Initial OSS commit

packages/playground/src/redesign/Scene.tsx

@@ -0,0 +1,150 @@
+import type {UseDragOpts} from '@theatre/studio/uiComponents/useDrag'
+import useDrag from '@theatre/studio/uiComponents/useDrag'
+import React, {useLayoutEffect, useMemo, useState} from 'react'
+import studio from '@theatre/studio'
+import type {IProject, ISheet, ISheetObject} from '@theatre/core'
+import {types as t} from '@theatre/core'
+import type {IScrub, IStudio} from '@theatre/studio'
+
+const boxObjectConfig = {
+  props: t.compound({
+    position: t.compound({
+      x: t.number(0),
+      y: t.number(0),
+      z: t.number(0),
+    }),
+    scale: t.compound({
+      x: t.number(0),
+      y: t.number(0),
+      z: t.number(0),
+      origin: t.compound({
+        x: t.number(0),
+        y: t.number(0),
+      }),
+      w: t.number(0),
+    }),
+  }),
+}
+
+const Box: React.FC<{
+  id: string
+  sheet: ISheet
+  selection: ISheetObject[]
+}> = ({id, sheet, selection: selection}) => {
+  // This is cheap to call and always returns the same value, so no need for useMemo()
+  const obj = sheet.object('object ' + id, null, boxObjectConfig)
+
+  const isSelected = selection.includes(obj)
+
+  const [pos, setPos] = useState<{x: number; y: number}>({x: 0, y: 0})
+
+  useLayoutEffect(() => {
+    const unsubscribeFromChanges = obj.onValuesChange((newValues) => {
+      setPos(newValues.position)
+    })
+    return unsubscribeFromChanges
+  }, [id])
+
+  const [divRef, setDivRef] = useState<HTMLElement | null>(null)
+
+  const dragOpts = useMemo((): UseDragOpts => {
+    let scrub: IScrub | undefined
+    let initial: typeof obj.value.position
+    let firstOnDragCalled = false
+    return {
+      onDragStart() {
+        scrub = studio.scrub()
+        initial = obj.value.position
+        firstOnDragCalled = false
+      },
+      onDrag(x, y) {
+        if (!firstOnDragCalled) {
+          studio.__experimental_setSelection([obj])
+          firstOnDragCalled = true
+        }
+        scrub!.capture(({set}) => {
+          set(obj.props.position, {
+            x: x + initial.x,
+            y: y + initial.y,
+            z: 0,
+          })
+        })
+      },
+      onDragEnd(dragHappened) {
+        if (dragHappened) {
+          scrub!.commit()
+        } else {
+          scrub!.discard()
+        }
+      },
+      lockCursorTo: 'move',
+    }
+  }, [])
+
+  useDrag(divRef, dragOpts)
+
+  return (
+    <div
+      onClick={() => {
+        studio.__experimental_setSelection([obj])
+      }}
+      ref={setDivRef}
+      style={{
+        width: 100,
+        height: 100,
+        background: 'gray',
+        position: 'absolute',
+        left: pos.x + 'px',
+        top: pos.y + 'px',
+        boxSizing: 'border-box',
+        border: isSelected ? '1px solid #5a92fa' : '1px solid transparent',
+      }}
+    ></div>
+  )
+}
+
+let lastBoxId = 1
+
+export const Scene: React.FC<{project: IProject}> = ({project}) => {
+  const [boxes, setBoxes] = useState<Array<string>>(['0', '1'])
+
+  // This is cheap to call and always returns the same value, so no need for useMemo()
+  const sheet = project.sheet('Scene', 'default')
+  const [selection, setSelection] = useState<IStudio['selection']>()
+
+  useLayoutEffect(() => {
+    return studio.__experimental_onSelectionChange((newState) => {
+      setSelection(newState)
+    })
+  })
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: '20vw',
+        right: '20vw',
+        top: 0,
+        bottom: '30vh',
+        background: 'black',
+        display: 'none',
+      }}
+    >
+      <button
+        onClick={() => {
+          setBoxes((boxes) => [...boxes, String(++lastBoxId)])
+        }}
+      >
+        Add
+      </button>
+      {boxes.map((id) => (
+        <Box
+          key={'box' + id}
+          id={id}
+          sheet={sheet}
+          selection={selection ?? []}
+        />
+      ))}
+    </div>
+  )
+}

packages/playground/src/redesign/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import studio from '@theatre/studio'
+import {getProject} from '@theatre/core'
+import {Scene} from './Scene'
+import bg from '../../xeno/bgs/8.png'
+
+studio.ui
+
+document.body.style.cssText = `
+  background-image: url(${bg});
+  background-color: #3A3A39;
+  background-position: center bottom;
+  background-size: calc(100% - 0px);
+  background-repeat: no-repeat;
+`
+;(function renderDragArea() {
+  const div = document.createElement('div')
+  div.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 80px;
+    height: 20px;
+    -webkit-app-region: drag;
+  `
+  document.body.appendChild(div)
+})()
+
+ReactDOM.render(
+  <Scene project={getProject('Sample project')} />,
+  document.getElementById('root'),
+)