From fc849a5e7a18763dadc5ab0cf84078f349092b5e Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Thu, 10 Aug 2023 14:53:56 +0200 Subject: [PATCH] Add file playground --- .../playground/src/shared/file/index.html | 11 ++++ packages/playground/src/shared/file/index.tsx | 52 +++++++++++++++++++ .../playground/src/shared/image/index.tsx | 4 -- 3 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 packages/playground/src/shared/file/index.html create mode 100644 packages/playground/src/shared/file/index.tsx diff --git a/packages/playground/src/shared/file/index.html b/packages/playground/src/shared/file/index.html new file mode 100644 index 0000000..b3a037a --- /dev/null +++ b/packages/playground/src/shared/file/index.html @@ -0,0 +1,11 @@ + + + + + Theatre.js Playground + + + +
+ + diff --git a/packages/playground/src/shared/file/index.tsx b/packages/playground/src/shared/file/index.tsx new file mode 100644 index 0000000..a1e75b9 --- /dev/null +++ b/packages/playground/src/shared/file/index.tsx @@ -0,0 +1,52 @@ +import {getProject, types} from '@theatre/core' +import studio from '@theatre/studio' +import React, {useEffect, useState} from 'react' +import ReactDom from 'react-dom/client' +import styled from 'styled-components' + +const project = getProject('Image type playground', { + assets: { + baseUrl: '/', + }, +}) +studio.initialize() +const sheet = project.sheet('Image type') + +const Wrapper = styled.div` + position: absolute; + inset: 0; + display: flex; + justify-content: center; + align-items: center; +` + +const FileTypeExample: React.FC<{}> = (props) => { + const [fileUrl, setFileUrl] = useState() + + useEffect(() => { + const object = sheet.object('File holder', { + f: types.file('', { + label: 'The OBJ', + }), + }) + object.onValuesChange(({f}) => { + setFileUrl(project.getAssetUrl(f)) + }) + + return () => { + sheet.detachObject('canvas') + } + }, []) + + return File url is: {fileUrl} +} + +project.ready + .then(() => { + ReactDom.createRoot(document.getElementById('root')!).render( + , + ) + }) + .catch((err) => { + console.error(err) + }) diff --git a/packages/playground/src/shared/image/index.tsx b/packages/playground/src/shared/image/index.tsx index d2a3b1d..f8cf631 100644 --- a/packages/playground/src/shared/image/index.tsx +++ b/packages/playground/src/shared/image/index.tsx @@ -1,7 +1,3 @@ -/** - * A super basic Turtle geometry renderer hooked up to Theatre, so the parameters - * can be tweaked and animated. - */ import {getProject, types} from '@theatre/core' import studio from '@theatre/studio' import React, {useEffect, useState} from 'react'