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

Merge pull request #127 from theatre-js/dev/cl-2022-04/refactors-docs

Browse source 
Dev/cl 2022 04/refactors docs
This commit is contained in:
Cole Lawrence 2022-04-20 12:18:42 -04:00 committed by GitHub
commit 9f46a0b78f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 76 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/playground/src/index.html
View file

@ -1,6 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playground – Theatre.js</title>
<style>
body {

16
theatre/core/src/propTypes/index.ts
View file

@ -14,8 +14,7 @@ import type {
IValidCompoundProps,
ShorthandCompoundPropsToLonghandCompoundProps,
} from './internals'
import {sanitizeCompoundProps} from './internals'
import {propTypeSymbol} from './internals'
import {propTypeSymbol, sanitizeCompoundProps} from './internals'
// eslint-disable-next-line unused-imports/no-unused-imports
import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
@ -91,9 +90,7 @@ const validateCommonOpts = (fnCallSignature: string, opts?: CommonOpts) => {
*/
export const compound = <Props extends IShorthandCompoundProps>(
props: Props,
opts: {
label?: string
} = {},
opts: CommonOpts = {},
): PropTypeConfig_Compound<
ShorthandCompoundPropsToLonghandCompoundProps<Props>
> => {
@ -287,9 +284,7 @@ const _interpolateNumber = (
export const rgba = (
defaultValue: Rgba = {r: 0, g: 0, b: 0, a: 1},
opts: {
label?: string
} = {},
opts: CommonOpts = {},
): PropTypeConfig_Rgba => {
if (process.env.NODE_ENV !== 'production') {
validateCommonOpts('t.rgba(defaultValue, opts)', opts)
@ -337,6 +332,7 @@ export const rgba = (
}
const _sanitizeRgba = (val: unknown): Rgba | undefined => {
if (!val) return undefined
let valid = true
for (const c of ['r', 'g', 'b', 'a']) {
if (
@ -555,8 +551,6 @@ export function stringLiteral<
}
}
export type Sanitizer<T> = (value: unknown) => T | undefined
/**
* A linear interpolator for a certain value type.
*
@ -669,7 +663,7 @@ const defaultNumberNudgeFn: NumberNudgeFn = ({
export interface PropTypeConfig_Boolean
extends ISimplePropType<'boolean', boolean> {}
interface CommonOpts {
type CommonOpts = {
/**
* Each prop type may be given a custom label instead of the name of the sub-prop
* it is in.

10
theatre/core/src/propTypes/internals.ts
View file

@ -17,6 +17,16 @@ export type IValidCompoundProps = {
[K in string]: PropTypeConfig
}
/**
*
* This does not include Rgba since Rgba does not have a predictable
* object shape. We prefer to infer that compound props are described as
* `Record<string, IShorthandProp>` for now.
*
* In the future, it might be reasonable to wrap these types up into something
* which would allow us to differentiate between values at runtime
* (e.g. `val.type = "Rgba"` vs `val.type = "Compound"` etc)
*/
type IShorthandProp =
| string
| number

2
theatre/studio/src/panels/DetailPanel/propEditors/BooleanPropEditor.tsx
View file

@ -23,7 +23,7 @@ const BooleanPropEditor: React.FC<{
const onChange = useCallback(
(el: React.ChangeEvent<HTMLInputElement>) => {
stuff.permenantlySetValue(Boolean(el.target.checked))
stuff.permanentlySetValue(Boolean(el.target.checked))
},
[propConfig, pointerToProp, obj],
)

2
theatre/studio/src/panels/DetailPanel/propEditors/NumberPropEditor.tsx
View file

@ -29,7 +29,7 @@ const NumberPropEditor: React.FC<{
value={stuff.value}
temporarilySetValue={stuff.temporarilySetValue}
discardTemporaryValue={stuff.discardTemporaryValue}
permenantlySetValue={stuff.permenantlySetValue}
permanentlySetValue={stuff.permanentlySetValue}
range={propConfig.range}
nudge={nudge}
/>

6
theatre/studio/src/panels/DetailPanel/propEditors/RgbaPropEditor.tsx
View file

@ -76,7 +76,7 @@ const RgbaPropEditor: React.FC<{
const onChange = useCallback(
(color: string) => {
const rgba = decorateRgba(parseRgbaFromHex(color))
stuff.permenantlySetValue(rgba)
stuff.permanentlySetValue(rgba)
},
[stuff],
)
@ -98,7 +98,7 @@ const RgbaPropEditor: React.FC<{
permanentlySetValue={(color) => {
// console.log('perm')
const rgba = decorateRgba(color)
stuff.permenantlySetValue(rgba)
stuff.permanentlySetValue(rgba)
}}
discardTemporaryValue={stuff.discardTemporaryValue}
/>
@ -120,7 +120,7 @@ const RgbaPropEditor: React.FC<{
value={rgba2hex(stuff.value)}
temporarilySetValue={noop}
discardTemporaryValue={noop}
permenantlySetValue={onChange}
permanentlySetValue={onChange}
isValid={(v) => !!v.match(/^#?([0-9a-f]{8})$/i)}
/>
</RowContainer>

2
theatre/studio/src/panels/DetailPanel/propEditors/StringLiteralPropEditor.tsx
View file

@ -20,7 +20,7 @@ const StringLiteralPropEditor: React.FC<{
const onChange = useCallback(
(val: string) => {
stuff.permenantlySetValue(val)
stuff.permanentlySetValue(val)
},
[propConfig, pointerToProp, obj],
)

2
theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx
View file

@ -22,7 +22,7 @@ const StringPropEditor: React.FC<{
value={stuff.value}
temporarilySetValue={stuff.temporarilySetValue}
discardTemporaryValue={stuff.discardTemporaryValue}
permenantlySetValue={stuff.permenantlySetValue}
permanentlySetValue={stuff.permanentlySetValue}
/>
</SingleRowPropEditor>
)

4
theatre/studio/src/panels/DetailPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx
View file

@ -23,7 +23,7 @@ interface CommonStuff<T> {
temporarilySetValue(v: T): void
discardTemporaryValue(): void
permenantlySetValue(v: T): void
permanentlySetValue(v: T): void
}
interface Default<T> extends CommonStuff<T> {
@ -76,7 +76,7 @@ export function useEditingToolsForPrimitiveProp<
currentScrub = null
}
},
permenantlySetValue(v: T): void {
permanentlySetValue(v: T): void {
if (currentScrub) {
currentScrub.capture((api) => {
api.set(pointerToProp, v)

8
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx
View file

@ -192,7 +192,7 @@ const CurveEditorPopover: React.FC<
tempTransaction = undefined
}
},
permenantlySetValue(newCurve: string): void {
permanentlySetValue(newCurve: string): void {
if (tempTransaction) {
tempTransaction.discard()
tempTransaction = undefined
@ -282,7 +282,7 @@ const CurveEditorPopover: React.FC<
props.onRequestClose()
}
if (e.key === 'Enter') {
fns.permenantlySetValue(filter)
fns.permanentlySetValue(filter)
props.onRequestClose()
}
}}
@ -302,7 +302,7 @@ const CurveEditorPopover: React.FC<
if (e.key === 'Escape') {
props.onRequestClose()
} else if (e.key === 'Enter') {
fns.permenantlySetValue(preset.value)
fns.permanentlySetValue(preset.value)
props.onRequestClose()
}
if (e.key === 'ArrowRight') {
@ -358,7 +358,7 @@ const CurveEditorPopover: React.FC<
ref={optionsRef.current[preset.label]}
key={preset.label}
onClick={() => {
fns.permenantlySetValue(preset.value)
fns.permanentlySetValue(preset.value)
props.onRequestClose()
}}
// Temporarily apply on hover

4
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/Dot.tsx
View file

@ -14,7 +14,7 @@ import styled from 'styled-components'
import type KeyframeEditor from './KeyframeEditor'
import {useLockFrameStampPosition} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
import {attributeNameThatLocksFramestamp} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
import {useCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
import SnapCursor from './SnapCursor.svg'
import selectedKeyframeIdsIfInSingleTrack from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/selectedKeyframeIdsIfInSingleTrack'
@ -237,7 +237,7 @@ function useDragKeyframe(
useDrag(node, gestureHandlers)
useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
return [isDragging]
}

17
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx
View file

@ -10,7 +10,7 @@ import React, {useLayoutEffect, useMemo} from 'react'
import styled from 'styled-components'
import {useReceiveVerticalWheelEvent} from '@theatre/studio/panels/SequenceEditorPanel/VerticalScrollContainer'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import {useCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
import type {IRange} from '@theatre/shared/utils/types'
const Container = styled.div`
@ -80,7 +80,7 @@ function useDragHandlers(
const setIsSeeking = val(layoutP.seeker.setIsSeeking)
return {
onDrag(dx: number, _, event) {
onDrag(dx, _, event) {
const deltaPos = scaledSpaceToUnitSpace(dx)
const unsnappedPos = clamp(posBeforeSeek + deltaPos, 0, sequence.length)
@ -104,8 +104,12 @@ function useDragHandlers(
sequence.position = newPosition
},
onDragStart(event) {
if (event.target instanceof HTMLInputElement) return false
if (event.target instanceof HTMLInputElement) {
// editing some value
return false
}
if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
// e.g. marquee selection has shiftKey
return false
}
if (
@ -113,6 +117,9 @@ function useDragHandlers(
.composedPath()
.some((el) => el instanceof HTMLElement && el.draggable === true)
) {
// Question: I think to check if we want another descendent element
// to be able to take control of this drag event.
// Question: e.g. for `useDragKeyframe`?
return false
}
@ -139,9 +146,9 @@ function useDragHandlers(
}
}, [layoutP, containerEl])
const [isDragigng] = useDrag(containerEl, handlers)
const [isDragging] = useDrag(containerEl, handlers)
useCursorLock(isDragigng, 'draggingPositionInSequenceEditor', 'ew-resize')
useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
}
function useHandlePanAndZoom(

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx
View file

@ -57,7 +57,7 @@ const LengthEditorPopover: React.FC<{
tempTransaction = undefined
}
},
permenantlySetValue(newLength: number): void {
permanentlySetValue(newLength: number): void {
if (tempTransaction) {
tempTransaction.discard()
tempTransaction = undefined

4
theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx
View file

@ -13,7 +13,7 @@ import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Histo
import {useLockFrameStampPosition} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
import {attributeNameThatLocksFramestamp} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import {useCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
export const dotSize = 6
@ -170,7 +170,7 @@ function useDragKeyframe(
}, [])
useDrag(node, gestureHandlers)
useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
return isDragging
}

4
theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.tsx
View file

@ -13,7 +13,7 @@ import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Histo
import {useLockFrameStampPosition} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
import {attributeNameThatLocksFramestamp} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import {useCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
export const dotSize = 6
@ -224,7 +224,7 @@ function useDragKeyframe(
}, [])
useDrag(node, gestureHandlers)
useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'move')
useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'move')
return isDragging
}

4
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
View file

@ -7,7 +7,7 @@ import getStudio from '@theatre/studio/getStudio'
import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
import {topStripHeight} from '@theatre/studio/panels/SequenceEditorPanel/RightOverlay/TopStrip'
import type {CommitOrDiscard} from '@theatre/studio/StudioStore/StudioStore'
import {useCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
import useDrag from '@theatre/studio/uiComponents/useDrag'
import useRefAndState from '@theatre/studio/utils/useRefAndState'
import React, {useMemo, useRef, useState} from 'react'
@ -211,7 +211,7 @@ const FocusRangeThumb: React.FC<{
useDrag(hitZoneNode, gestureHandlers)
useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
return usePrism(() => {
const existingRange = existingRangeD.getValue()

2
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
View file

@ -133,6 +133,8 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace)
// This may not currently snap correctly like it does when grabbing the "Rod".
// See https://www.notion.so/theatrejs/dragging-from-playhead-does-not-snap-dadac4fa755149cebbcb70a655c3a0d5
const gestureHandlers = useMemo((): Parameters<typeof useDrag>[1] => {
const setIsSeeking = val(layoutP.seeker.setIsSeeking)

2
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.tsx
View file

@ -55,7 +55,7 @@ const PlayheadPositionPopover: React.FC<{
sequence.position = originalPosition
}
},
permenantlySetValue(newPosition: number): void {
permanentlySetValue(newPosition: number): void {
if (tempPosition) {
tempPosition = undefined
}

2
theatre/studio/src/panels/SequenceEditorPanel/positionSnapping.ts
View file

@ -1,2 +0,0 @@
// export const
export {}

16
theatre/studio/src/uiComponents/PointerEventsHandler.tsx
View file

@ -68,9 +68,23 @@ const PointerEventsHandler: React.FC<{
)
}
export const useCursorLock = (
/**
* A "locking" mechanism for managing style.cursor values.
*
* Putting this behind a lock is important so we can properly manage
* multiple features all coordinating to style the cursor.
*
* This will also track a stack of different cursor styles so that
* adding a style to be the "foremost" cursor can override a previous style,
* but then "unlocking" that style will again reveal the existing styles.
*
* It behaves a bit like a stack.
*/
export const useCssCursorLock = (
/** Whether to enable the provided cursor style */
enabled: boolean,
className: string,
/** e.g. `"ew"`, `"help"`, `"pointer"`, `"text"`, etc */
cursor: string,
) => {
const ctx = useContext(context)

6
theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
View file

@ -105,7 +105,7 @@ const BasicNumberInput: React.FC<{
value: number
temporarilySetValue: (v: number) => void
discardTemporaryValue: () => void
permenantlySetValue: (v: number) => void
permanentlySetValue: (v: number) => void
className?: string
range?: [min: number, max: number]
isValid?: (v: number) => boolean
@ -167,7 +167,7 @@ const BasicNumberInput: React.FC<{
if (curState.valueBeforeEditing === value) {
propsRef.current.discardTemporaryValue()
} else {
propsRef.current.permenantlySetValue(value)
propsRef.current.permanentlySetValue(value)
}
}
}
@ -243,7 +243,7 @@ const BasicNumberInput: React.FC<{
if (curState.valueBeforeDragging === value) {
propsRef.current.discardTemporaryValue()
} else {
propsRef.current.permenantlySetValue(value)
propsRef.current.permanentlySetValue(value)
}
stateRef.current = {mode: 'noFocus'}
}

4
theatre/studio/src/uiComponents/form/BasicStringInput.tsx
View file

@ -55,7 +55,7 @@ const BasicStringInput: React.FC<{
value: string
temporarilySetValue: (v: string) => void
discardTemporaryValue: () => void
permenantlySetValue: (v: string) => void
permanentlySetValue: (v: string) => void
className?: string
isValid?: (v: string) => boolean
inputRef?: MutableRefObject<HTMLInputElement | null>
@ -112,7 +112,7 @@ const BasicStringInput: React.FC<{
if (curState.valueBeforeEditing === value) {
propsRef.current.discardTemporaryValue()
} else {
propsRef.current.permenantlySetValue(value)
propsRef.current.permanentlySetValue(value)
}
}
}

4
theatre/studio/src/uiComponents/useDrag.ts
View file

@ -1,7 +1,7 @@
import type {$FixMe} from '@theatre/shared/utils/types'
import {useLayoutEffect, useRef} from 'react'
import useRefAndState from '@theatre/studio/utils/useRefAndState'
import {useCursorLock} from './PointerEventsHandler'
import {useCssCursorLock} from './PointerEventsHandler'
export type UseDragOpts = {
/**
@ -52,7 +52,7 @@ export default function useDrag(
'dragStartCalled' | 'dragging' | 'notDragging'
>('notDragging')
useCursorLock(
useCssCursorLock(
mode === 'dragging' && typeof opts.lockCursorTo === 'string',
'dragging',
opts.lockCursorTo!,