variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Re-do bundling, compat tests, and extension API (#174)

Browse source
This commit is contained in:
Aria 2022-05-25 00:37:18 +02:00 • committed by GitHub
parent 5ee9a2543f
commit ec18687a98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
83 changed files with 1138 additions and 886 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/dataverse/devEnv/build.ts
View file

@ -1,9 +1,7 @@
import * as path from 'path'
import {build} from 'esbuild'
const definedGlobals = {
global: 'window',
}
const definedGlobals = {}
function createBundles(watch: boolean) {
const pathToPackage = path.join(__dirname, '../')

32
packages/dataverse/src/Ticker.ts
View file

@ -1,10 +1,42 @@
type ICallback = (t: number) => void
function createRafTicker() {
const ticker = new Ticker()
if (typeof window !== 'undefined') {
/**
* @remarks
* TODO users should also be able to define their own ticker.
*/
const onAnimationFrame = (t: number) => {
ticker.tick(t)
window.requestAnimationFrame(onAnimationFrame)
}
window.requestAnimationFrame(onAnimationFrame)
} else {
ticker.tick(0)
setTimeout(() => ticker.tick(1), 0)
console.log(
`@theatre/dataverse is running in a server rather than in a browser. We haven't gotten around to testing server-side rendering, so if something is working in the browser but not on the server, please file a bug: https://github.com/theatre-js/theatre/issues/new`,
)
}
return ticker
}
let rafTicker: undefined | Ticker
/**
* The Ticker class helps schedule callbacks. Scheduled callbacks are executed per tick. Ticks can be triggered by an
* external scheduling strategy, e.g. a raf.
*/
export default class Ticker {
static get raf(): Ticker {
if (!rafTicker) {
rafTicker = createRafTicker()
}
return rafTicker
}
private _scheduledForThisOrNextTick: Set<ICallback>
private _scheduledForNextTick: Set<ICallback>
private _timeAtCurrentTick: number

12
packages/dataverse/src/derivations/prism/discoveryMechanism.ts
View file

@ -62,10 +62,16 @@ function createMechanism() {
function getSharedMechanism(): ReturnType<typeof createMechanism> {
const varName = '__dataverse_discoveryMechanism_sharedStack'
if (global) {
const root =
typeof window !== 'undefined'
? window
: typeof global !== 'undefined'
? global
: {}
if (root) {
const existingMechanism: ReturnType<typeof createMechanism> | undefined =
// @ts-ignore ignore
global[varName]
root[varName]
if (
existingMechanism &&
typeof existingMechanism === 'object' &&
@ -75,7 +81,7 @@ function getSharedMechanism(): ReturnType<typeof createMechanism> {
} else {
const mechanism = createMechanism()
// @ts-ignore ignore
global[varName] = mechanism
root[varName] = mechanism
return mechanism
}
} else {

5
packages/playground/devEnv/vite.config.ts
View file

@ -39,5 +39,8 @@ export default defineConfig({
*/
alias: [...getAliasesFromTsConfigForRollup()],
},
define: {...definedGlobals, 'window.__IS_VISUAL_REGRESSION_TESTING': 'true'},
define: {
...definedGlobals,
'window.__IS_VISUAL_REGRESSION_TESTING': 'true',
},
})

2
packages/r3f/src/components/ReferenceWindow/ReferenceWindow.tsx
View file

@ -99,7 +99,7 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({height}) => {
const ctx = canvasRef.current!.getContext('2d')!
console.log(gl.domElement.getContext('webgl2')!.getContextAttributes())
// console.log(gl.domElement.getContext('webgl2')!.getContextAttributes())
// https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing
ctx.imageSmoothingQuality = 'high'

22
packages/r3f/src/components/SnapshotEditor.tsx
View file

@ -1,4 +1,4 @@
import {useCallback, useEffect, useLayoutEffect, useMemo} from 'react'
import {useCallback, useEffect, useLayoutEffect, useMemo, useState} from 'react'
import React from 'react'
import {Canvas, useThree} from '@react-three/fiber'
import type {BaseSheetObjectType} from '../store'
@ -6,7 +6,7 @@ import {allRegisteredObjects, useEditorStore} from '../store'
import shallow from 'zustand/shallow'
import root from 'react-shadow/styled-components'
import ProxyManager from './ProxyManager'
import studio, {ToolbarIconButton} from '@theatre/studio'
import studio from '@theatre/studio'
import {useVal} from '@theatre/react'
import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
import type {ISheet} from '@theatre/core'
@ -16,7 +16,6 @@ import type {$IntentionalAny} from '@theatre/shared/utils/types'
import {InfiniteGridHelper} from '../InfiniteGridHelper'
import {DragDetectorProvider} from './DragDetector'
import TooltipPortalProvider from './TooltipPortalProvider'
import {FiRefreshCw} from 'react-icons/fi'
import ReferenceWindow from './ReferenceWindow/ReferenceWindow'
const GlobalStyle = createGlobalStyle`
@ -168,6 +167,14 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
}
}, [])
const [toolsContainer, setToolsContainer] = useState<null | HTMLElement>()
useEffect(() => {
if (!toolsContainer) return
return studio.ui.renderToolset('snapshot-editor', toolsContainer)
}, [toolsContainer])
if (!editorObject) return <></>
return (
@ -178,14 +185,7 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
<TooltipPortalProvider>
<Wrapper>
<Overlay>
<Tools>
<ToolbarIconButton
title="Refresh Snapshot"
onClick={createSnapshot}
>
<FiRefreshCw />
</ToolbarIconButton>
</Tools>
<Tools ref={setToolsContainer} />
{showReferenceWindow && (
<ReferenceWindowContainer>
<ReferenceWindow height={120} />

118
packages/r3f/src/components/Toolbar/Toolbar.tsx
View file

@ -1,118 +0,0 @@
import type {VFC} from 'react'
import React from 'react'
import {IoCameraOutline} from 'react-icons/io5'
import studio, {ToolbarIconButton} from '@theatre/studio'
import {useVal} from '@theatre/react'
import TransformControlsModeSelect from './TransformControlsModeSelect'
import ViewportShadingSelect from './ViewportShadingSelect'
import TransformControlsSpaceSelect from './TransformControlsSpaceSelect'
import {getEditorSheetObject} from '../editorStuff'
const Toolbar: VFC = () => {
const editorObject = getEditorSheetObject()
const transformControlsMode =
useVal(editorObject?.props.transformControls.mode) ?? 'translate'
const transformControlsSpace =
useVal(editorObject?.props.transformControls.space) ?? 'world'
const viewportShading =
useVal(editorObject?.props.viewport.shading) ?? 'rendered'
if (!editorObject) return <></>
return (
<>
<ToolbarIconButton
onClick={() => {
studio.createPane('snapshot')
}}
title="Create snapshot"
>
<IoCameraOutline />
</ToolbarIconButton>
<TransformControlsModeSelect
value={transformControlsMode}
onChange={(value) =>
studio.transaction(({set}) =>
set(editorObject!.props.transformControls.mode, value),
)
}
/>
<TransformControlsSpaceSelect
value={transformControlsSpace}
onChange={(space) => {
studio.transaction(({set}) => {
set(editorObject.props.transformControls.space, space)
})
}}
/>
<ViewportShadingSelect
value={viewportShading}
onChange={(shading) => {
studio.transaction(({set}) => {
set(editorObject.props.viewport.shading, shading)
})
}}
/>
{/* <ToolbarIconButton
label="Focus on selected"
icon={<RiFocus3Line />}
onClick={() => {
const orbitControls =
useEditorStore.getState().orbitControlsRef?.current
const selected = getSelected()
let focusObject
if (selected) {
focusObject =
useEditorStore.getState().editablesSnapshot![selected].proxyObject
}
if (orbitControls && focusObject) {
focusObject.getWorldPosition(
// @ts-ignore TODO
orbitControls.target as Vector3,
)
}
}}
/> */}
{/* <ToolbarIconButton
label="Align object to view"
icon={<GiPocketBow />}
onClick={() => {
const camera = (
useEditorStore.getState().orbitControlsRef?.current as $FixMe
)?.object
const selected = getSelected()
let proxyObject
if (selected) {
proxyObject =
useEditorStore.getState().editablesSnapshot![selected].proxyObject
if (proxyObject && camera) {
const direction = new Vector3()
const position = camera.position.clone()
camera.getWorldDirection(direction)
proxyObject.position.set(0, 0, 0)
proxyObject.lookAt(direction)
proxyObject.parent!.worldToLocal(position)
proxyObject.position.copy(position)
proxyObject.updateMatrix()
}
}
}}
/> */}
</>
)
}
export default Toolbar

41
packages/r3f/src/components/Toolbar/TransformControlsModeSelect.tsx
View file

@ -1,41 +0,0 @@
import {ToolbarSwitchSelect} from '@theatre/studio'
import type {VFC} from 'react'
import React from 'react'
import {GiClockwiseRotation, GiMove, GiResize} from 'react-icons/gi'
import type {TransformControlsMode} from '../../store'
export interface TransformControlsModeSelectProps {
value: TransformControlsMode
onChange: (value: string) => void
}
const TransformControlsModeSelect: VFC<TransformControlsModeSelectProps> = ({
value,
onChange,
}) => {
return (
<ToolbarSwitchSelect
value={value}
onChange={onChange}
options={[
{
value: 'translate',
label: 'Tool: Translate',
icon: <GiMove />,
},
{
value: 'rotate',
label: 'Tool: Rotate',
icon: <GiClockwiseRotation />,
},
{
value: 'scale',
label: 'Tool: Scale',
icon: <GiResize />,
},
]}
/>
)
}
export default TransformControlsModeSelect

34
packages/r3f/src/components/Toolbar/TransformControlsSpaceSelect.tsx
View file

@ -1,34 +0,0 @@
import type {VFC} from 'react'
import React from 'react'
import type {TransformControlsSpace} from '../../store'
import {BiCube, BiGlobe} from 'react-icons/bi'
import {ToolbarSwitchSelect} from '@theatre/studio'
export interface TransformControlsSpaceSelectProps {
value: TransformControlsSpace
onChange: (value: TransformControlsSpace) => void
}
const TransformControlsSpaceSelect: VFC<TransformControlsSpaceSelectProps> = ({
value,
onChange,
}) => (
<ToolbarSwitchSelect
value={value}
onChange={onChange}
options={[
{
value: 'world',
label: 'Space: World',
icon: <BiGlobe />,
},
{
value: 'local',
label: 'Space: Local',
icon: <BiCube />,
},
]}
/>
)
export default TransformControlsSpaceSelect

46
packages/r3f/src/components/Toolbar/ViewportShadingSelect.tsx
View file

@ -1,46 +0,0 @@
import type {VFC} from 'react'
import React from 'react'
import type {ViewportShading} from '../../store'
import {FaCube} from 'react-icons/fa'
import {GiCube, GiIceCube} from 'react-icons/gi'
import {BiCube} from 'react-icons/bi'
import {ToolbarSwitchSelect} from '@theatre/studio'
export interface ViewportShadingSelectProps {
value: ViewportShading
onChange: (value: ViewportShading) => void
}
const ViewportShadingSelect: VFC<ViewportShadingSelectProps> = ({
value,
onChange,
}) => (
<ToolbarSwitchSelect
value={value}
onChange={onChange}
options={[
{
value: 'wireframe',
label: 'Display: Wireframe',
icon: <BiCube />,
},
{
value: 'flat',
label: 'Display: Flat',
icon: <GiCube />,
},
{
value: 'solid',
label: 'Display: Solid',
icon: <FaCube />,
},
{
value: 'rendered',
label: 'Display: Rendered',
icon: <GiIceCube />,
},
]}
/>
)
export default ViewportShadingSelect

142
packages/r3f/src/extension.ts
View file

@ -1,16 +1,150 @@
import SnapshotEditor from './components/SnapshotEditor'
import type {IExtension} from '@theatre/studio'
import Toolbar from './components/Toolbar/Toolbar'
import {prism, Ticker, val} from '@theatre/dataverse'
import {getEditorSheetObject} from './components/editorStuff'
import {useEditorStore} from './store'
import ReactDOM from 'react-dom'
import React from 'react'
import type {ToolsetConfig} from '@theatre/studio'
const io5CameraOutline = `<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Camera</title><path d="M350.54 148.68l-26.62-42.06C318.31 100.08 310.62 96 302 96h-92c-8.62 0-16.31 4.08-21.92 10.62l-26.62 42.06C155.85 155.23 148.62 160 140 160H80a32 32 0 00-32 32v192a32 32 0 0032 32h352a32 32 0 0032-32V192a32 32 0 00-32-32h-59c-8.65 0-16.85-4.77-22.46-11.32z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle cx="256" cy="272" r="80" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M124 158v-22h-24v22"/></svg>`
const gameIconMove = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 34.47l-90.51 90.51h67.883v108.393H124.98V165.49L34.47 256l90.51 90.51v-67.883h108.393V387.02H165.49L256 477.53l90.51-90.51h-67.883V278.627H387.02v67.883L477.53 256l-90.51-90.51v67.883H278.627V124.98h67.883L256 34.47z"/></svg>`
const gameIconClockwiseRotation = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M263.09 50c-11.882-.007-23.875 1.018-35.857 3.13C142.026 68.156 75.156 135.026 60.13 220.233 45.108 305.44 85.075 391.15 160.005 434.41c32.782 18.927 69.254 27.996 105.463 27.553 46.555-.57 92.675-16.865 129.957-48.15l-30.855-36.768c-50.95 42.75-122.968 49.05-180.566 15.797-57.597-33.254-88.152-98.777-76.603-164.274 11.55-65.497 62.672-116.62 128.17-128.168 51.656-9.108 103.323 7.98 139.17 43.862L327 192h128V64l-46.34 46.342C370.242 71.962 317.83 50.03 263.09 50z"/></svg>`
const gameIconResize = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M29 30l1 90h36V66h26V30H29zm99 0v36h72V30h-72zm108 0v36h72V30h-72zm108 0v36h72V30h-72zm102 0v78h36V30h-36zm-206 80v36h100.543l-118 118H30v218h218V289.457l118-118V272h36V110H240zm206 34v72h36v-72h-36zM30 156v72h36v-72H30zm416 96v72h36v-72h-36zm0 108v72h36v-72h-36zm-166 86v36h72v-36h-72zm108 0v36h72v-36h-72z"/></svg>`
const boxIconsGlobe = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm7.931 9h-2.764a14.67 14.67 0 0 0-1.792-6.243A8.013 8.013 0 0 1 19.931 11zM12.53 4.027c1.035 1.364 2.427 3.78 2.627 6.973H9.03c.139-2.596.994-5.028 2.451-6.974.172-.01.344-.026.519-.026.179 0 .354.016.53.027zm-3.842.7C7.704 6.618 7.136 8.762 7.03 11H4.069a8.013 8.013 0 0 1 4.619-6.273zM4.069 13h2.974c.136 2.379.665 4.478 1.556 6.23A8.01 8.01 0 0 1 4.069 13zm7.381 6.973C10.049 18.275 9.222 15.896 9.041 13h6.113c-.208 2.773-1.117 5.196-2.603 6.972-.182.012-.364.028-.551.028-.186 0-.367-.016-.55-.027zm4.011-.772c.955-1.794 1.538-3.901 1.691-6.201h2.778a8.005 8.005 0 0 1-4.469 6.201z"></path></svg>`
const boxIconsCube = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm7.931 9h-2.764a14.67 14.67 0 0 0-1.792-6.243A8.013 8.013 0 0 1 19.931 11zM12.53 4.027c1.035 1.364 2.427 3.78 2.627 6.973H9.03c.139-2.596.994-5.028 2.451-6.974.172-.01.344-.026.519-.026.179 0 .354.016.53.027zm-3.842.7C7.704 6.618 7.136 8.762 7.03 11H4.069a8.013 8.013 0 0 1 4.619-6.273zM4.069 13h2.974c.136 2.379.665 4.478 1.556 6.23A8.01 8.01 0 0 1 4.069 13zm7.381 6.973C10.049 18.275 9.222 15.896 9.041 13h6.113c-.208 2.773-1.117 5.196-2.603 6.972-.182.012-.364.028-.551.028-.186 0-.367-.016-.55-.027zm4.011-.772c.955-1.794 1.538-3.901 1.691-6.201h2.778a8.005 8.005 0 0 1-4.469 6.201z"></path></svg>`
const gameIconsCube = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 24.585L51.47 118.989 256 213.394l204.53-94.405zM38.998 133.054v258.353L247 487.415V229.063zm434.004 0L265 229.062v258.353l208.002-96.008z"></path></svg>`
const fontAwesomeCube = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"></path></svg>`
const gameIconsIceCube = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M238.406 26.844c-9.653.12-18.926 2.69-30.437 7.062l-157.282 57c-20.984 7.65-21.587 11.834-22.344 33.28L20.937 358.22c-1.207 27.514-.654 33.187 23.25 43.56L229.97 483.19c19.34 8.29 31.906 7.655 45.186 3.218l181.938-56.53c21.95-7.295 25.04-9.627 25.875-36.845l7.686-250.155c.662-17.37-5.667-24.695-18.78-29.625L271.062 34.375c-12.977-5.344-23.003-7.653-32.657-7.53zm.813 24.875c23.637-.053 45.564 8.434 87.874 24.874 95.545 37.123 131.71 53.8 69.687 77.937-74.002 28.802-128.175 45.115-172.28 25.814L113.47 131.75c-34.57-15.127-44.69-27.46 17.843-50.094 55.64-20.14 82.742-29.882 107.906-29.937zm44.718 43.75c-38.284.402-55.285 21.205-56.813 38.936-.873 10.132 2.95 19.6 12.406 26.25 9.456 6.65 25.355 10.56 48.97 5.938 35.817-7.01 61.536-15.056 77.5-22.844 7.982-3.894 13.464-7.737 16.5-10.844 3.036-3.107 3.453-4.942 3.438-6-.016-1.057-.44-2.675-3.313-5.406-2.873-2.73-8.03-6.04-15.22-9.156-14.378-6.233-36.757-11.877-65.717-15.72-6.355-.842-12.28-1.213-17.75-1.155zM59.25 134c10.372-.29 29.217 7.2 63.906 22.656 140.925 62.786 140.52 65.876 130.97 200.656-7.783 109.81-8.797 109.85-128.47 59.282-73.15-30.91-86.806-40.853-85.187-88.97l5.468-162.937c.674-20.034 1.557-30.358 13.312-30.687zm381.938 30.906c29.172-.384 29.1 28.075 26.75 105.25-4.118 135.132-9.05 140.184-120.375 173.72-70.42 21.21-81.49 25.614-78.97-12.032l11-164.156c3.217-48.034 7.588-51.508 94.813-83.907 31.323-11.633 52.534-18.686 66.78-18.874zm-20.438 40.688c-.332-.002-.674.015-1 .03-5.22.263-10.226 2.77-14.188 8.407-3.96 5.638-6.81 14.71-5.687 27.907 1.448 17.033-4.507 38.11-15.156 56.938-10.65 18.827-26.502 35.91-47.814 38.813-29.127 3.968-42.41 23.58-43.5 42.062-.545 9.24 2.108 18.03 7.688 24.594s14.088 11.335 27.187 12.03c41.146 2.185 71.336-10.766 91.595-39.155 20.26-28.39 30.396-73.76 25.875-136.595-1.876-26.076-14.708-34.977-25-35.03zm-246.25 8.844c-.644 0-1.218.063-1.72.187-2.003.494-3.685 1.53-5.655 4.813-1.913 3.186-3.688 8.618-4.406 16.343l-.064.657c-1.388 16.732-8.098 28.602-17.844 35.063-9.745 6.46-20.794 7.808-31.125 9.094-10.33 1.286-20.177 2.39-28.156 5.75-7.977 3.36-14.36 8.38-19.468 19.78-7.2 16.076-7.143 28.027-3.124 38.563 4.018 10.537 12.688 20.106 24.687 28.75 23.998 17.29 60.27 29.956 88.906 41.844 11.386 4.727 20.496 6.484 27.282 6.126 6.787-.358 11.278-2.423 15.375-6.562 8.195-8.28 14.057-27.692 15-57.344 2.024-63.623-18.84-110.284-38.656-130.875-8.668-9.008-16.52-12.193-21.03-12.188zm184.22 6.812c-.95-.003-1.927.035-2.97.094-35.464 1.99-48.477 12.867-52.5 24.062-4.023 11.196.826 27.07 10.844 39.78 11.488 14.58 20.59 15.736 30.437 12.283 9.848-3.455 20.542-14.108 27.376-26.908s9.512-27.397 7.188-36.28c-1.163-4.443-3.144-7.422-6.47-9.626-2.908-1.928-7.274-3.388-13.905-3.406z"></path></svg>`
const r3fExtension: IExtension = {
id: '@theatre/r3f',
globalToolbar: {
component: Toolbar,
toolbars: {
global(set, studio) {
const calc = prism<ToolsetConfig>(() => {
const editorObject = getEditorSheetObject()
const transformControlsMode =
val(editorObject?.props.transformControls.mode) ?? 'translate'
const transformControlsSpace =
val(editorObject?.props.transformControls.space) ?? 'world'
const viewportShading =
val(editorObject?.props.viewport.shading) ?? 'rendered'
return [
{
type: 'Icon',
title: 'Create Snapshot',
svgSource: io5CameraOutline,
onClick: () => {
studio.createPane('snapshot')
},
},
{
type: 'Switch',
value: transformControlsMode,
onChange: (value) =>
studio.transaction(({set}) =>
set(editorObject!.props.transformControls.mode, value),
),
options: [
{
value: 'translate',
label: 'Tool: Translate',
svgSource: gameIconMove,
},
{
value: 'rotate',
label: 'Tool: Rotate',
svgSource: gameIconClockwiseRotation,
},
{
value: 'scale',
label: 'Tool: Scale',
svgSource: gameIconResize,
},
],
},
{
type: 'Switch',
value: transformControlsSpace,
onChange: (space) =>
studio.transaction(({set}) => {
set(editorObject!.props.transformControls.space, space)
}),
options: [
{
value: 'world',
label: 'Space: World',
svgSource: boxIconsGlobe,
},
{
value: 'local',
label: 'Space: Local',
svgSource: boxIconsCube,
},
],
},
{
type: 'Switch',
value: viewportShading,
onChange: (shading) =>
studio.transaction(({set}) => {
set(editorObject!.props.viewport.shading, shading)
}),
options: [
{
value: 'wireframe',
label: 'Display: Wireframe',
svgSource: boxIconsCube,
},
{
value: 'flat',
label: 'Display: Flat',
svgSource: gameIconsCube,
},
{
value: 'solid',
label: 'Display: Solid',
svgSource: fontAwesomeCube,
},
{
value: 'rendered',
label: 'Display: Rendered',
svgSource: gameIconsIceCube,
},
],
},
]
})
return calc.tapImmediate(Ticker.raf, () => {
set(calc.getValue())
})
},
'snapshot-editor': (set) => {
const {createSnapshot} = useEditorStore.getState()
const onClick = createSnapshot
set([
{
type: 'Icon',
onClick,
title: 'Refresh Snapshot',
svgSource: `<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
},
])
return () => {}
},
},
panes: [
{
class: 'snapshot',
component: SnapshotEditor,
mount: ({paneId, node}) => {
ReactDOM.render(React.createElement(SnapshotEditor, {paneId}), node)
function unmount() {
ReactDOM.unmountComponentAtNode(node)
}
return unmount
},
},
],
}