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

Add file playground

Browse source
This commit is contained in:
Aria Minaei 2023-08-10 14:53:56 +02:00
parent 10b82772ed
commit fc849a5e7a
3 changed files with 63 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/playground/src/shared/file/index.html Normal file
View file

@ -0,0 +1,11 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Theatre.js Playground</title>
<script src="./index.tsx" type="module"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

52
packages/playground/src/shared/file/index.tsx Normal file
View file

@ -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<string>()
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 <Wrapper>File url is: {fileUrl}</Wrapper>
}
project.ready
.then(() => {
ReactDom.createRoot(document.getElementById('root')!).render(
<FileTypeExample />,
)
})
.catch((err) => {
console.error(err)
})

4
packages/playground/src/shared/image/index.tsx
View file

@ -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 {getProject, types} from '@theatre/core'
import studio from '@theatre/studio' import studio from '@theatre/studio'
import React, {useEffect, useState} from 'react' import React, {useEffect, useState} from 'react'