From 4d49a8bdd6da088bc23b28751da8b0973b643f07 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Mon, 4 Oct 2021 20:25:38 +0200 Subject: [PATCH] playground now has a shared folder and a personal folder --- packages/playground/devEnv/servePlayground.ts | 26 ++- packages/playground/src/.gitignore | 2 + packages/playground/src/audio/index.ts | 40 ----- packages/playground/src/index.tsx | 1 - packages/playground/src/r3f/App.tsx | 149 ------------------ packages/playground/src/redesign/Scene.tsx | 149 ------------------ packages/playground/src/redesign/index.tsx | 33 ---- .../playground/src/{ => shared}/dom/Scene.tsx | 0 .../playground/src/{ => shared}/dom/index.tsx | 6 + .../src/{ => shared}/dom/useDrag.ts | 0 .../r3f-rocket}/App.tsx | 0 .../src/{r3f => shared/r3f-rocket}/index.tsx | 0 .../r3f-rocket}/scene.glb | Bin .../{ => shared}/turtle/TurtleRenderer.tsx | 0 .../src/{ => shared}/turtle/index.tsx | 11 +- .../src/{ => shared}/turtle/turtle.ts | 0 .../src/{ => shared}/turtle/utils.ts | 0 .../src/space-exploration/index.tsx | 5 - 18 files changed, 39 insertions(+), 383 deletions(-) create mode 100644 packages/playground/src/.gitignore delete mode 100644 packages/playground/src/audio/index.ts delete mode 100644 packages/playground/src/index.tsx delete mode 100644 packages/playground/src/r3f/App.tsx delete mode 100644 packages/playground/src/redesign/Scene.tsx delete mode 100644 packages/playground/src/redesign/index.tsx rename packages/playground/src/{ => shared}/dom/Scene.tsx (100%) rename packages/playground/src/{ => shared}/dom/index.tsx (61%) rename packages/playground/src/{ => shared}/dom/useDrag.ts (100%) rename packages/playground/src/{space-exploration => shared/r3f-rocket}/App.tsx (100%) rename packages/playground/src/{r3f => shared/r3f-rocket}/index.tsx (100%) rename packages/playground/src/{space-exploration => shared/r3f-rocket}/scene.glb (100%) rename packages/playground/src/{ => shared}/turtle/TurtleRenderer.tsx (100%) rename packages/playground/src/{ => shared}/turtle/index.tsx (86%) rename packages/playground/src/{ => shared}/turtle/turtle.ts (100%) rename packages/playground/src/{ => shared}/turtle/utils.ts (100%) delete mode 100644 packages/playground/src/space-exploration/index.tsx diff --git a/packages/playground/devEnv/servePlayground.ts b/packages/playground/devEnv/servePlayground.ts index 1550eb3..3e1317c 100644 --- a/packages/playground/devEnv/servePlayground.ts +++ b/packages/playground/devEnv/servePlayground.ts @@ -1,3 +1,4 @@ +import {existsSync, writeFileSync} from 'fs' import path from 'path' import {definedGlobals} from '../../../theatre/devEnv/buildUtils' @@ -5,6 +6,27 @@ const playgroundDir = path.join(__dirname, '..') const port = 8080 +const playgroundIndexContent = ` +/** + * This file is created automatically and won't be comitted to the repo. + * You can change the import statement and import your own playground code. + * + * Your own playground code should reside in './personal', which is a folder + * that won't be committed to the repo. + * + * The shared playgrounds which other contributors can use are in the './shared' folder, + * which are comitted to the repo. + * + * Happy playing! + * */ +import './shared/r3f-rocket' +` + +const playgroundEntry = path.join(playgroundDir, 'src/index.ts') +if (!existsSync(playgroundEntry)) { + writeFileSync(playgroundEntry, playgroundIndexContent, {encoding: 'utf-8'}) +} + require('esbuild') .serve( { @@ -12,7 +34,7 @@ require('esbuild') servedir: path.join(playgroundDir, 'src'), }, { - entryPoints: [path.join(playgroundDir, 'src/index.tsx')], + entryPoints: [playgroundEntry], target: ['firefox88'], loader: { '.png': 'file', @@ -26,5 +48,5 @@ require('esbuild') }, ) .then((server: unknown) => { - console.log('serving', 'http://localhost:' + port) + console.log('Playground running at', 'http://localhost:' + port) }) diff --git a/packages/playground/src/.gitignore b/packages/playground/src/.gitignore new file mode 100644 index 0000000..5e71368 --- /dev/null +++ b/packages/playground/src/.gitignore @@ -0,0 +1,2 @@ +personal +index.ts \ No newline at end of file diff --git a/packages/playground/src/audio/index.ts b/packages/playground/src/audio/index.ts deleted file mode 100644 index 422050c..0000000 --- a/packages/playground/src/audio/index.ts +++ /dev/null @@ -1,40 +0,0 @@ -import {getProject} from '@theatre/core' -import studio from '@theatre/studio' - -studio.initialize() - -const proj = getProject('Musical project') -const sheet = proj.sheet('Scene') -sheet.object('An object', {x: 0}) - -setTimeout(async () => { - // const d = defer() - // window.addEventListener('click', () => { - // d.resolve(null) - // }) - // await d.promise - const {gainNode, audioContext} = await sheet.sequence.attachAudio({ - source: 'http://localhost:5000/audio.mp3', - }) - - const lowerGain = audioContext.createGain() - gainNode.disconnect() - gainNode.connect(lowerGain) - - lowerGain.gain.setValueAtTime(0.01, audioContext.currentTime) - lowerGain.connect(audioContext.destination) - - sheet.sequence.position = 11 - await sheet.sequence.play({ - iterationCount: 4, - range: [10, 14], - direction: 'normal', - rate: 2, - }) - // await sheet.sequence.play({ - // iterationCount: 2, - // range: [20, 22], - // direction: 'normal', - // rate: 4, - // }) -}, 10) diff --git a/packages/playground/src/index.tsx b/packages/playground/src/index.tsx deleted file mode 100644 index 1403840..0000000 --- a/packages/playground/src/index.tsx +++ /dev/null @@ -1 +0,0 @@ -import './audio' diff --git a/packages/playground/src/r3f/App.tsx b/packages/playground/src/r3f/App.tsx deleted file mode 100644 index 14a9bbe..0000000 --- a/packages/playground/src/r3f/App.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import {editable as e, SheetProvider} from '@theatre/r3f' -import {getProject} from '@theatre/core' -import * as THREE from 'three' -import React, {useState, useEffect, useRef} from 'react' -import type {Color} from '@react-three/fiber' -import {Canvas, useFrame} from '@react-three/fiber' -import {softShadows, Shadow} from '@react-three/drei' -import type {DirectionalLight} from 'three' - -// Soft shadows are expensive, comment and refresh when it's too slow -softShadows() - -// credit: https://codesandbox.io/s/camera-pan-nsb7f - -function Button() { - const vec = new THREE.Vector3() - const light = useRef(undefined as any) - const [active, setActive] = useState(false) - const [zoom, set] = useState(true) - useEffect( - () => void (document.body.style.cursor = active ? 'pointer' : 'auto'), - [active], - ) - - useFrame((state) => { - const step = 0.1 - const camera = state.camera as THREE.PerspectiveCamera - camera.fov = (THREE as any).MathUtils.lerp(camera.fov, zoom ? 10 : 42, step) - camera.position.lerp( - vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10), - step, - ) - state.camera.lookAt(0, 0, 0) - state.camera.updateProjectionMatrix() - - light.current.position.lerp( - vec.set(zoom ? 4 : 0, zoom ? 3 : 8, zoom ? 3 : 5), - step, - ) - }) - - return ( - set(!zoom)} - onPointerOver={() => setActive(true)} - onPointerOut={() => setActive(false)} - uniqueName="The Button" - > - - - - - - ) -} - -function Plane({ - color, - uniqueName, - ...props -}: {color: Color; uniqueName: string} & Parameters[0]) { - return ( - - - - - ) -} - -function App() { - return ( -
- - getProject('Playground - R3F').sheet('R3F-Canvas')} - > - {/* @ts-ignore */} - - - - - - - - - - -
- ) -} - -export default App diff --git a/packages/playground/src/redesign/Scene.tsx b/packages/playground/src/redesign/Scene.tsx deleted file mode 100644 index 2886473..0000000 --- a/packages/playground/src/redesign/Scene.tsx +++ /dev/null @@ -1,149 +0,0 @@ -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} from '@theatre/core' -import type {IScrub, IStudio} from '@theatre/studio' - -studio.initialize() - -const boxObjectConfig = { - position: { - x: 0, - y: 0, - z: 0, - }, - scale: { - x: 0, - y: 0, - z: 0, - origin: { - x: 0, - y: 0, - }, - w: 0, - }, -} - -const Box: React.FC<{ - id: string - sheet: ISheet - selection: IStudio['selection'] -}> = ({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, 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(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.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 ( -
{ - studio.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', - }} - >
- ) -} - -let lastBoxId = 1 - -export const Scene: React.FC<{project: IProject}> = ({project}) => { - const [boxes, setBoxes] = useState>(['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() - - useLayoutEffect(() => { - return studio.onSelectionChange((newState) => { - setSelection(newState) - }) - }) - - return ( -
- - {boxes.map((id) => ( - - ))} -
- ) -} diff --git a/packages/playground/src/redesign/index.tsx b/packages/playground/src/redesign/index.tsx deleted file mode 100644 index 29e6caf..0000000 --- a/packages/playground/src/redesign/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -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.initialize() - -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( - , - document.getElementById('root'), -) diff --git a/packages/playground/src/dom/Scene.tsx b/packages/playground/src/shared/dom/Scene.tsx similarity index 100% rename from packages/playground/src/dom/Scene.tsx rename to packages/playground/src/shared/dom/Scene.tsx diff --git a/packages/playground/src/dom/index.tsx b/packages/playground/src/shared/dom/index.tsx similarity index 61% rename from packages/playground/src/dom/index.tsx rename to packages/playground/src/shared/dom/index.tsx index e2aaf7a..e461419 100644 --- a/packages/playground/src/dom/index.tsx +++ b/packages/playground/src/shared/dom/index.tsx @@ -3,6 +3,12 @@ import ReactDOM from 'react-dom' import studio from '@theatre/studio' import {getProject} from '@theatre/core' import {Scene} from './Scene' +/** + * This is a basic example of using Theatre for manipulating the DOM. + * + * It also uses {@link IStudio.selection | studio.selection} to customize + * the selection behavior. + */ studio.initialize() diff --git a/packages/playground/src/dom/useDrag.ts b/packages/playground/src/shared/dom/useDrag.ts similarity index 100% rename from packages/playground/src/dom/useDrag.ts rename to packages/playground/src/shared/dom/useDrag.ts diff --git a/packages/playground/src/space-exploration/App.tsx b/packages/playground/src/shared/r3f-rocket/App.tsx similarity index 100% rename from packages/playground/src/space-exploration/App.tsx rename to packages/playground/src/shared/r3f-rocket/App.tsx diff --git a/packages/playground/src/r3f/index.tsx b/packages/playground/src/shared/r3f-rocket/index.tsx similarity index 100% rename from packages/playground/src/r3f/index.tsx rename to packages/playground/src/shared/r3f-rocket/index.tsx diff --git a/packages/playground/src/space-exploration/scene.glb b/packages/playground/src/shared/r3f-rocket/scene.glb similarity index 100% rename from packages/playground/src/space-exploration/scene.glb rename to packages/playground/src/shared/r3f-rocket/scene.glb diff --git a/packages/playground/src/turtle/TurtleRenderer.tsx b/packages/playground/src/shared/turtle/TurtleRenderer.tsx similarity index 100% rename from packages/playground/src/turtle/TurtleRenderer.tsx rename to packages/playground/src/shared/turtle/TurtleRenderer.tsx diff --git a/packages/playground/src/turtle/index.tsx b/packages/playground/src/shared/turtle/index.tsx similarity index 86% rename from packages/playground/src/turtle/index.tsx rename to packages/playground/src/shared/turtle/index.tsx index 94049b6..bd4509a 100644 --- a/packages/playground/src/turtle/index.tsx +++ b/packages/playground/src/shared/turtle/index.tsx @@ -1,4 +1,7 @@ -// sdf +/** + * A super basic Turtle geometry renderer hooked up to Theatre, so the parameters + * can be tweaked and animated. + */ import React, {useMemo, useState} from 'react' import {render} from 'react-dom' import {getProject} from '@theatre/core' @@ -30,9 +33,9 @@ const TurtleExample: React.FC<{}> = (props) => { style={{ position: 'fixed', top: '0', - right: '20vw', - bottom: '30vh', - left: '20vw', + right: '0', + bottom: '0', + left: '0', background: 'black', }} > diff --git a/packages/playground/src/turtle/turtle.ts b/packages/playground/src/shared/turtle/turtle.ts similarity index 100% rename from packages/playground/src/turtle/turtle.ts rename to packages/playground/src/shared/turtle/turtle.ts diff --git a/packages/playground/src/turtle/utils.ts b/packages/playground/src/shared/turtle/utils.ts similarity index 100% rename from packages/playground/src/turtle/utils.ts rename to packages/playground/src/shared/turtle/utils.ts diff --git a/packages/playground/src/space-exploration/index.tsx b/packages/playground/src/space-exploration/index.tsx deleted file mode 100644 index b3d0515..0000000 --- a/packages/playground/src/space-exploration/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import App from './App' - -ReactDOM.render(, document.getElementById('root'))