Moved examples to a separate folder
This commit is contained in:
Aria Minaei
parent
d93b1a18d2
commit
f4c2fb2a08
12 changed files with 24 additions and 19 deletions
1
examples/basic-dom/.gitignore
vendored
Normal file
1
examples/basic-dom/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/.cache
|
||||
130
examples/basic-dom/Scene.tsx
Normal file
130
examples/basic-dom/Scene.tsx
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
import type {IScrub, IStudio} from '@theatre/studio'
|
||||
import studio from '@theatre/studio'
|
||||
import React, {useLayoutEffect, useMemo, useState} from 'react'
|
||||
import type {ISheet, ISheetObject, IProject} from '@theatre/core'
|
||||
import {types as t} from '@theatre/core'
|
||||
import type {UseDragOpts} from './useDrag'
|
||||
import useDrag from './useDrag'
|
||||
|
||||
const boxObjectConfig = t.compound({
|
||||
x: t.number(0),
|
||||
y: t.number(0),
|
||||
})
|
||||
|
||||
const Box: React.FC<{
|
||||
id: string
|
||||
sheet: ISheet
|
||||
selectedObject: ISheetObject | undefined
|
||||
}> = ({id, sheet, selectedObject}) => {
|
||||
// This is cheap to call and always returns the same value, so no need for useMemo()
|
||||
const obj = sheet.object(id, null, boxObjectConfig)
|
||||
|
||||
const isSelected = selectedObject === obj
|
||||
|
||||
const [pos, setPos] = useState<{x: number; y: number}>({x: 0, y: 0})
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const unsubscribeFromChanges = obj.onValuesChange((newValues) => {
|
||||
setPos(newValues)
|
||||
})
|
||||
return unsubscribeFromChanges
|
||||
}, [id])
|
||||
|
||||
const [divRef, setDivRef] = useState<HTMLElement | null>(null)
|
||||
|
||||
const dragOpts = useMemo((): UseDragOpts => {
|
||||
let scrub: IScrub | undefined
|
||||
let initial: typeof obj.value
|
||||
let firstOnDragCalled = false
|
||||
return {
|
||||
onDragStart() {
|
||||
scrub = studio.scrub()
|
||||
initial = obj.value
|
||||
firstOnDragCalled = false
|
||||
},
|
||||
onDrag(x, y) {
|
||||
if (!firstOnDragCalled) {
|
||||
studio.__experimental_setSelection([obj])
|
||||
firstOnDragCalled = true
|
||||
}
|
||||
scrub!.capture(({set}) => {
|
||||
set(obj.props, {x: x + initial.x, y: y + initial.y})
|
||||
})
|
||||
},
|
||||
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((newSelection) => {
|
||||
_setSelection(newSelection)
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
background: '#575757',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
setBoxes((boxes) => [...boxes, String(++lastBoxId)])
|
||||
}}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
{boxes.map((id) => (
|
||||
<Box
|
||||
key={'box' + id}
|
||||
id={id}
|
||||
sheet={sheet}
|
||||
selectedObject={selection[0]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
13
examples/basic-dom/index.html
Normal file
13
examples/basic-dom/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Theatre.js Example - DOM</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
12
examples/basic-dom/index.tsx
Normal file
12
examples/basic-dom/index.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import studio from '@theatre/studio'
|
||||
import {getProject} from '@theatre/core'
|
||||
import {Scene} from './Scene'
|
||||
|
||||
studio.ui
|
||||
|
||||
ReactDOM.render(
|
||||
<Scene project={getProject('Sample project')} />,
|
||||
document.getElementById('root'),
|
||||
)
|
||||
17
examples/basic-dom/package.json
Normal file
17
examples/basic-dom/package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "@examples/basic-dom",
|
||||
"private": "true",
|
||||
"scripts": {
|
||||
"start": "parcel serve ./index.html"
|
||||
},
|
||||
"dependencies": {
|
||||
"@theatre/core": "workspace:*",
|
||||
"@theatre/studio": "workspace:*",
|
||||
"@types/react": "^17.0.9",
|
||||
"@types/react-dom": "^17.0.6",
|
||||
"parcel-bundler": "^1.12.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"typescript": "^4.3.2"
|
||||
}
|
||||
}
|
||||
9
examples/basic-dom/tsconfig.json
Normal file
9
examples/basic-dom/tsconfig.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react",
|
||||
"skipDefaultLibCheck": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"files": ["index.tsx", "Scene.tsx", "useDrag.ts"]
|
||||
}
|
||||
150
examples/basic-dom/useDrag.ts
Normal file
150
examples/basic-dom/useDrag.ts
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import {useLayoutEffect, useRef} from 'react'
|
||||
|
||||
const noop = () => {}
|
||||
|
||||
function createCursorLock(cursor: string) {
|
||||
const el = document.createElement('div')
|
||||
el.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9999999;`
|
||||
|
||||
el.style.cursor = cursor
|
||||
document.body.appendChild(el)
|
||||
const relinquish = () => {
|
||||
document.body.removeChild(el)
|
||||
}
|
||||
|
||||
return relinquish
|
||||
}
|
||||
|
||||
export type UseDragOpts = {
|
||||
disabled?: boolean
|
||||
dontBlockMouseDown?: boolean
|
||||
lockCursorTo?: string
|
||||
onDragStart?: (event: MouseEvent) => void | false
|
||||
onDragEnd?: (dragHappened: boolean) => void
|
||||
onDrag: (dx: number, dy: number, event: MouseEvent) => void
|
||||
}
|
||||
|
||||
export default function useDrag(
|
||||
target: HTMLElement | undefined | null,
|
||||
opts: UseDragOpts,
|
||||
) {
|
||||
const optsRef = useRef<typeof opts>(opts)
|
||||
optsRef.current = opts
|
||||
|
||||
const modeRef = useRef<'dragStartCalled' | 'dragging' | 'notDragging'>(
|
||||
'notDragging',
|
||||
)
|
||||
|
||||
const stateRef = useRef<{
|
||||
dragHappened: boolean
|
||||
startPos: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
}>({dragHappened: false, startPos: {x: 0, y: 0}})
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!target) return
|
||||
|
||||
const getDistances = (event: MouseEvent): [number, number] => {
|
||||
const {startPos} = stateRef.current
|
||||
return [event.screenX - startPos.x, event.screenY - startPos.y]
|
||||
}
|
||||
|
||||
let relinquishCursorLock = noop
|
||||
|
||||
const dragHandler = (event: MouseEvent) => {
|
||||
if (!stateRef.current.dragHappened && optsRef.current.lockCursorTo) {
|
||||
relinquishCursorLock = createCursorLock(optsRef.current.lockCursorTo)
|
||||
}
|
||||
if (!stateRef.current.dragHappened) stateRef.current.dragHappened = true
|
||||
modeRef.current = 'dragging'
|
||||
|
||||
const deltas = getDistances(event)
|
||||
optsRef.current.onDrag(deltas[0], deltas[1], event)
|
||||
}
|
||||
|
||||
const dragEndHandler = () => {
|
||||
removeDragListeners()
|
||||
modeRef.current = 'notDragging'
|
||||
|
||||
optsRef.current.onDragEnd &&
|
||||
optsRef.current.onDragEnd(stateRef.current.dragHappened)
|
||||
relinquishCursorLock()
|
||||
relinquishCursorLock = noop
|
||||
}
|
||||
|
||||
const addDragListeners = () => {
|
||||
document.addEventListener('mousemove', dragHandler)
|
||||
document.addEventListener('mouseup', dragEndHandler)
|
||||
}
|
||||
|
||||
const removeDragListeners = () => {
|
||||
document.removeEventListener('mousemove', dragHandler)
|
||||
document.removeEventListener('mouseup', dragEndHandler)
|
||||
}
|
||||
|
||||
const preventUnwantedClick = (event: MouseEvent) => {
|
||||
if (optsRef.current.disabled) return
|
||||
if (stateRef.current.dragHappened) {
|
||||
if (
|
||||
!optsRef.current.dontBlockMouseDown &&
|
||||
modeRef.current !== 'notDragging'
|
||||
) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
}
|
||||
stateRef.current.dragHappened = false
|
||||
}
|
||||
}
|
||||
|
||||
const dragStartHandler = (event: MouseEvent) => {
|
||||
const opts = optsRef.current
|
||||
if (opts.disabled === true) return
|
||||
|
||||
if (event.button !== 0) return
|
||||
const resultOfStart = opts.onDragStart && opts.onDragStart(event)
|
||||
|
||||
if (resultOfStart === false) return
|
||||
|
||||
if (!opts.dontBlockMouseDown) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
modeRef.current = 'dragStartCalled'
|
||||
|
||||
const {screenX, screenY} = event
|
||||
stateRef.current.startPos = {x: screenX, y: screenY}
|
||||
stateRef.current.dragHappened = false
|
||||
|
||||
addDragListeners()
|
||||
}
|
||||
|
||||
const onMouseDown = (e: MouseEvent) => {
|
||||
dragStartHandler(e)
|
||||
}
|
||||
|
||||
target.addEventListener('mousedown', onMouseDown)
|
||||
target.addEventListener('click', preventUnwantedClick)
|
||||
|
||||
return () => {
|
||||
removeDragListeners()
|
||||
target.removeEventListener('mousedown', onMouseDown)
|
||||
target.removeEventListener('click', preventUnwantedClick)
|
||||
relinquishCursorLock()
|
||||
|
||||
if (modeRef.current !== 'notDragging') {
|
||||
optsRef.current.onDragEnd &&
|
||||
optsRef.current.onDragEnd(modeRef.current === 'dragging')
|
||||
}
|
||||
modeRef.current = 'notDragging'
|
||||
}
|
||||
}, [target])
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue