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

Update compat tests to use THREE.r155

Browse source
This commit is contained in:
Aria Minaei 2023-08-06 17:18:35 +02:00
parent 4fefee863e
commit f612108e18
70 changed files with 534 additions and 374 deletions
Download patch file Download diff file Expand all files Collapse all files

3
compat-tests/fixtures/basic-react17/package/.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
/.cache
/dist
/package-lock.json

13
compat-tests/fixtures/basic-react17/package/index.html Normal file
View 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="./src/index.tsx"></script>
</body>
</html>

17
compat-tests/fixtures/basic-react17/package/package.json Normal file
View file

@ -0,0 +1,17 @@
{
"scripts": {
"dev": "parcel serve ./index.html",
"build": "NODE_ENV=production parcel build ./index.html --no-minify",
"start": "serve dist"
},
"dependencies": {
"@theatre/core": "0.0.1-COMPAT.1",
"@theatre/studio": "0.0.1-COMPAT.1",
"parcel-bundler": "^1.12.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"serve": "14.2.0"
}
}

135
compat-tests/fixtures/basic-react17/package/src/App/Scene.tsx Normal file
View file

@ -0,0 +1,135 @@
import type {IScrub} from '@theatre/studio'
import studio from '@theatre/studio'
import React, {useLayoutEffect, useMemo, useState} from 'react'
import type {ISheet, ISheetObject, IProject} from '@theatre/core'
import type {UseDragOpts} from './useDrag'
import useDrag from './useDrag'
studio.initialize()
const boxObjectConfig = {
x: 0,
y: 0,
}
const Box: React.FC<{
id: string
sheet: ISheet
selectedObject: ISheetObject<any> | 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, 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.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.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<Array<ISheetObject>>([])
useLayoutEffect(() => {
return studio.onSelectionChange((newSelection) => {
_setSelection(
newSelection.filter(
(s): s is ISheetObject => s.type === 'Theatre_SheetObject_PublicAPI',
),
)
})
})
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>
)
}

150
compat-tests/fixtures/basic-react17/package/src/App/useDrag.ts Normal file
View 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])
}

12
compat-tests/fixtures/basic-react17/package/src/index.tsx Normal file
View 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 './App/Scene'
studio.initialize()
ReactDOM.render(
<Scene project={getProject('Sample project')} />,
document.getElementById('root')!,
)

5
compat-tests/fixtures/basic-react17/package/tsconfig.json Normal file
View file

@ -0,0 +1,5 @@
{
"compilerOptions": {
"jsx": "react"
}
}

30
compat-tests/fixtures/basic-react17/react17.compat-test.ts Normal file
View file

@ -0,0 +1,30 @@
// @cspotcode/zx is zx in CommonJS
import {$, cd, path, ProcessPromise} from '@cspotcode/zx'
import {defer, testServerAndPage} from '../../utils/testUtils'
const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
describe(`react17`, () => {
test(`build succeeds`, async () => {
cd(PATH_TO_PACKAGE)
const {exitCode} = await $`npm run build`
// at this point, the build should have succeeded
expect(exitCode).toEqual(0)
})
// this one is failing for some reason, but manually running the server works fine
describe(`build`, () => {
return
function startServerOnPort(port: number): ProcessPromise<unknown> {
cd(PATH_TO_PACKAGE)
return $`npm start -- -p ${port}`
}
testServerAndPage({
startServerOnPort,
checkServerStdoutToSeeIfItsReady: (chunk) =>
chunk.includes('Accepting connections'),
})
})
})