From c354a602a4f60c49bd5b7a999f3b4547aebf989d Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Thu, 1 Dec 2022 15:37:19 +0100 Subject: [PATCH] Remove `Box` in favor of `Atom` --- packages/dataverse/src/Atom.ts | 18 +++++++++++-- packages/dataverse/src/index.ts | 2 -- .../hello-world-extension-dataverse/index.tsx | 4 +-- packages/react/src/index.ts | 14 +++++------ theatre/core/src/sequences/Sequence.ts | 25 ++++++++++--------- .../studio/src/UIRoot/useKeyboardShortcuts.ts | 6 ++--- .../src/panels/DetailPanel/DetailPanel.tsx | 6 ++--- .../src/panels/OutlinePanel/OutlinePanel.tsx | 6 ++--- .../CurveEditorPopover/CurveEditorPopover.tsx | 4 +-- .../DopeSheet/Right/KeyframeSnapTarget.tsx | 7 +++--- .../ExtensionToolbar/ExtensionToolbar.tsx | 6 ++--- .../uiComponents/Popover/TooltipContext.tsx | 6 ++--- .../studio/src/uiComponents/usePresence.tsx | 8 +++--- 13 files changed, 63 insertions(+), 49 deletions(-) diff --git a/packages/dataverse/src/Atom.ts b/packages/dataverse/src/Atom.ts index c63069e..5e25d4b 100644 --- a/packages/dataverse/src/Atom.ts +++ b/packages/dataverse/src/Atom.ts @@ -115,7 +115,7 @@ class Scope { /** * Wraps an object whose (sub)properties can be individually tracked. */ -export default class Atom implements IdentityPrismProvider { +export default class Atom implements IdentityPrismProvider { private _currentState: State /** * @internal @@ -130,6 +130,8 @@ export default class Atom implements IdentityPrismProvider { */ readonly pointer: Pointer + readonly prism: Prism = this.getIdentityPrism([]) as $IntentionalAny + constructor(initialState: State) { this._currentState = initialState this._rootScope = new Scope(undefined, []) @@ -141,7 +143,7 @@ export default class Atom implements IdentityPrismProvider { * * @param newState - The new state of the atom. */ - setState(newState: State) { + set(newState: State) { const oldState = this._currentState this._currentState = newState @@ -150,11 +152,23 @@ export default class Atom implements IdentityPrismProvider { /** * Gets the current state of the atom. + * @deprecated */ getState() { return this._currentState } + get() { + return this.getState() + } + + /** + * @deprecated + */ + setState(newState: State) { + this.set(newState) + } + /** * Gets the state of the atom at `path`. */ diff --git a/packages/dataverse/src/index.ts b/packages/dataverse/src/index.ts index 3c9a688..d01ecb5 100644 --- a/packages/dataverse/src/index.ts +++ b/packages/dataverse/src/index.ts @@ -6,8 +6,6 @@ export type {IdentityPrismProvider} from './Atom' export {default as Atom, val, pointerToPrism} from './Atom' -export {default as Box} from './Box' -export type {IBox} from './Box' export {isPrism} from './prism/Interface' export type {Prism} from './prism/Interface' export {default as iterateAndCountTicks} from './prism/iterateAndCountTicks' diff --git a/packages/playground/src/shared/hello-world-extension-dataverse/index.tsx b/packages/playground/src/shared/hello-world-extension-dataverse/index.tsx index 4a3a308..73e4934 100644 --- a/packages/playground/src/shared/hello-world-extension-dataverse/index.tsx +++ b/packages/playground/src/shared/hello-world-extension-dataverse/index.tsx @@ -4,7 +4,7 @@ import App from './App' import type {ToolsetConfig} from '@theatre/studio' import studio from '@theatre/studio' import extension from '@theatre/r3f/dist/extension' -import {Box, prism, Ticker, val} from '@theatre/dataverse' +import {Atom, prism, Ticker, val} from '@theatre/dataverse' /** * Let's take a look at how we can use `prism`, `Ticker`, and `val` from Theatre.js's Dataverse library @@ -26,7 +26,7 @@ studio.extend({ id: '@theatre/hello-world-extension', toolbars: { global(set, studio) { - const exampleBox = new Box('mobile') + const exampleBox = new Atom('mobile') const untapFn = prism(() => [ { diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 3df7246..15e3315 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,8 +4,8 @@ * @packageDocumentation */ -import type {Prism} from '@theatre/dataverse' -import {Box} from '@theatre/dataverse' +import type { Prism} from '@theatre/dataverse'; +import {Atom} from '@theatre/dataverse' import {prism, val} from '@theatre/dataverse' import {findIndex} from 'lodash-es' import queueMicrotask from 'queue-microtask' @@ -58,17 +58,17 @@ export function usePrism( debugLabel?: string, ): T { const fnAsCallback = useCallback(fn, deps) - const boxRef = useRef>(null as $IntentionalAny) - if (!boxRef.current) { - boxRef.current = new Box(fnAsCallback) + const atomRef = useRef>(null as $IntentionalAny) + if (!atomRef.current) { + atomRef.current = new Atom(fnAsCallback) } else { - boxRef.current.set(fnAsCallback) + atomRef.current.setState(fnAsCallback) } const prsm = useMemo( () => prism(() => { - const fn = boxRef.current.prism.getValue() + const fn = atomRef.current.prism.getValue() return fn() }), [], diff --git a/theatre/core/src/sequences/Sequence.ts b/theatre/core/src/sequences/Sequence.ts index c227047..1973512 100644 --- a/theatre/core/src/sequences/Sequence.ts +++ b/theatre/core/src/sequences/Sequence.ts @@ -3,9 +3,10 @@ import type Sheet from '@theatre/core/sheets/Sheet' import type {SequenceAddress} from '@theatre/shared/utils/addresses' import didYouMean from '@theatre/shared/utils/didYouMean' import {InvalidArgumentError} from '@theatre/shared/utils/errors' -import type {IBox, Prism, Pointer} from '@theatre/dataverse' +import type {Prism, Pointer} from '@theatre/dataverse' +import {Atom} from '@theatre/dataverse' import {pointer} from '@theatre/dataverse' -import {Box, prism, val} from '@theatre/dataverse' +import {prism, val} from '@theatre/dataverse' import {padStart} from 'lodash-es' import type { IPlaybackController, @@ -37,7 +38,7 @@ export default class Sequence { public readonly address: SequenceAddress publicApi: TheatreSequence - private _playbackControllerBox: IBox + private _playbackControllerBox: Atom private _prismOfStatePointer: Prism> private _positionD: Prism private _positionFormatterD: Prism @@ -62,7 +63,7 @@ export default class Sequence { this.publicApi = new TheatreSequence(this) - this._playbackControllerBox = new Box( + this._playbackControllerBox = new Atom( playbackController ?? new DefaultPlaybackController(getCoreTicker()), ) @@ -123,7 +124,7 @@ export default class Sequence { } get position() { - return this._playbackControllerBox.get().getCurrentPosition() + return this._playbackControllerBox.getState().getCurrentPosition() } get subUnitsPerUnit(): number { @@ -165,7 +166,7 @@ export default class Sequence { } const dur = this.length this._playbackControllerBox - .get() + .getState() .gotoPosition(position > dur ? dur : position) } @@ -174,7 +175,7 @@ export default class Sequence { } get playing() { - return val(this._playbackControllerBox.get().statePointer.playing) + return val(this._playbackControllerBox.getState().statePointer.playing) } _makeRangeFromSequenceTemplate(): Prism { @@ -195,7 +196,7 @@ export default class Sequence { * */ playDynamicRange(rangeD: Prism): Promise { - return this._playbackControllerBox.get().playDynamicRange(rangeD) + return this._playbackControllerBox.getState().playDynamicRange(rangeD) } async play( @@ -329,18 +330,18 @@ To fix this, either set \`conf.range[1]\` to be less the duration of the sequenc direction: IPlaybackDirection, ): Promise { return this._playbackControllerBox - .get() + .getState() .play(iterationCount, range, rate, direction) } pause() { - this._playbackControllerBox.get().pause() + this._playbackControllerBox.getState().pause() } replacePlaybackController(playbackController: IPlaybackController) { this.pause() - const oldController = this._playbackControllerBox.get() - this._playbackControllerBox.set(playbackController) + const oldController = this._playbackControllerBox.getState() + this._playbackControllerBox.setState(playbackController) const time = oldController.getCurrentPosition() oldController.destroy() diff --git a/theatre/studio/src/UIRoot/useKeyboardShortcuts.ts b/theatre/studio/src/UIRoot/useKeyboardShortcuts.ts index a1c9e68..022fb54 100644 --- a/theatre/studio/src/UIRoot/useKeyboardShortcuts.ts +++ b/theatre/studio/src/UIRoot/useKeyboardShortcuts.ts @@ -4,7 +4,7 @@ import {cmdIsDown} from '@theatre/studio/utils/keyboardUtils' import {getSelectedSequence} from '@theatre/studio/selectors' import type {$IntentionalAny} from '@theatre/shared/utils/types' import type {Prism} from '@theatre/dataverse' -import {Box, prism, val} from '@theatre/dataverse' +import {Atom, prism, val} from '@theatre/dataverse' import type {IPlaybackRange} from '@theatre/core/sequences/Sequence' import type Sequence from '@theatre/core/sequences/Sequence' import memoizeFn from '@theatre/shared/utils/memoizeFn' @@ -150,13 +150,13 @@ export default function useKeyboardShortcuts() { }, []) } -type ControlledPlaybackStateBox = Box< +type ControlledPlaybackStateBox = Atom< undefined | Prism<{range: IPlaybackRange; isFollowingARange: boolean}> > const getPlaybackStateBox = memoizeFn( (sequence: Sequence): ControlledPlaybackStateBox => { - const box = new Box(undefined) as ControlledPlaybackStateBox + const box = new Atom(undefined) as ControlledPlaybackStateBox return box }, ) diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index acf919e..a2ae973 100644 --- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -19,7 +19,7 @@ import ObjectDetails from './ObjectDetails' import ProjectDetails from './ProjectDetails' import getStudio from '@theatre/studio/getStudio' import useHotspot from '@theatre/studio/uiComponents/useHotspot' -import {Box, prism, val} from '@theatre/dataverse' +import {Atom, prism, val} from '@theatre/dataverse' import EmptyState from './EmptyState' import useLockSet from '@theatre/studio/uiComponents/useLockSet' import {usePresenceListenersOnRootElement} from '@theatre/studio/uiComponents/usePresence' @@ -195,8 +195,8 @@ export default () => { ) } -const isDetailPanelHotspotActiveB = new Box(false) -const isDetailPanelHoveredB = new Box(false) +const isDetailPanelHotspotActiveB = new Atom(false) +const isDetailPanelHoveredB = new Atom(false) export const shouldShowDetailD = prism(() => { const isHovered = val(isDetailPanelHoveredB.prism) diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx index e4c98fc..0c0f63a 100644 --- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx +++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx @@ -5,7 +5,7 @@ import ProjectsList from './ProjectsList/ProjectsList' import {useVal} from '@theatre/react' import getStudio from '@theatre/studio/getStudio' import useHotspot from '@theatre/studio/uiComponents/useHotspot' -import {Box, prism, val} from '@theatre/dataverse' +import {Atom, prism, val} from '@theatre/dataverse' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' const headerHeight = `44px` @@ -79,8 +79,8 @@ const OutlinePanel: React.FC<{}> = () => { export default OutlinePanel -const isOutlinePanelHotspotActiveB = new Box(false) -const isOutlinePanelHoveredB = new Box(false) +const isOutlinePanelHotspotActiveB = new Atom(false) +const isOutlinePanelHoveredB = new Atom(false) export const shouldShowOutlineD = prism(() => { const isHovered = val(isOutlinePanelHoveredB.prism) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx index 4a6fa52..cc9222f 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx @@ -1,4 +1,4 @@ -import {Box, prism} from '@theatre/dataverse' +import {Atom, prism} from '@theatre/dataverse' import type {KeyboardEvent} from 'react' import React, { useEffect, @@ -532,7 +532,7 @@ function areConnectedKeyframesTheSameAs({ const {isCurveEditorOpenD, isConnectionEditingInCurvePopover, getLock} = (() => { - const connectionsInCurvePopoverEdit = new Box< + const connectionsInCurvePopoverEdit = new Atom< Array >([]) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget.tsx index 4c105dd..5573971 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget.tsx @@ -1,6 +1,7 @@ import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout' -import type {Pointer} from '@theatre/dataverse' -import {Box, val} from '@theatre/dataverse' +import type { Pointer} from '@theatre/dataverse'; +import {Atom} from '@theatre/dataverse' +import {val} from '@theatre/dataverse' import React from 'react' import styled from 'styled-components' import {DopeSnapHitZoneUI} from '@theatre/studio/panels/SequenceEditorPanel/RightOverlay/DopeSnapHitZoneUI' @@ -62,7 +63,7 @@ export type KeyframeSnapPositions = { } } -const stateB = new Box< +const stateB = new Atom< | { // all keyframes must be snap targets mode: 'snapToAll' diff --git a/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx b/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx index 3f8a8fe..d7c9282 100644 --- a/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx +++ b/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx @@ -1,4 +1,4 @@ -import {Box} from '@theatre/dataverse' +import {Atom} from '@theatre/dataverse' import {useVal} from '@theatre/react' import type {IExtension} from '@theatre/studio' import getStudio from '@theatre/studio/getStudio' @@ -29,11 +29,11 @@ const ExtensionToolsetRender: React.FC<{ extension: IExtension toolbarId: string }> = ({extension, toolbarId}) => { - const toolsetConfigBox = useMemo(() => new Box([]), []) + const toolsetConfigBox = useMemo(() => new Atom([]), []) useLayoutEffect(() => { const detach = extension.toolbars?.[toolbarId]?.( - toolsetConfigBox.set.bind(toolsetConfigBox), + toolsetConfigBox.setState.bind(toolsetConfigBox), getStudio()!.publicApi, ) diff --git a/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx b/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx index 15a463e..9cd917d 100644 --- a/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx +++ b/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx @@ -1,5 +1,5 @@ -import type {Prism} from '@theatre/dataverse' -import {Box} from '@theatre/dataverse' +import type { Prism} from '@theatre/dataverse'; +import {Atom} from '@theatre/dataverse' import useRefAndState from '@theatre/studio/utils/useRefAndState' import React, { createContext, @@ -40,7 +40,7 @@ export const useTooltipOpenState = (): [ } const TooltipContext: React.FC<{}> = ({children}) => { - const currentTooltipId = useMemo(() => new Box(-1), []) + const currentTooltipId = useMemo(() => new Atom(-1), []) const cur = currentTooltipId.prism const set = useMemo(() => { diff --git a/theatre/studio/src/uiComponents/usePresence.tsx b/theatre/studio/src/uiComponents/usePresence.tsx index 90d8c67..609aeb6 100644 --- a/theatre/studio/src/uiComponents/usePresence.tsx +++ b/theatre/studio/src/uiComponents/usePresence.tsx @@ -3,7 +3,7 @@ import type {StrictRecord} from '@theatre/shared/utils/types' import React, {useMemo} from 'react' import {useEffect} from 'react' import {useLogger} from './useLogger' -import {Box, prism, pointerToPrism} from '@theatre/dataverse' +import {prism, pointerToPrism} from '@theatre/dataverse' import {Atom} from '@theatre/dataverse' import {usePrismInstance} from '@theatre/react' import {selectClosestHTMLAncestor} from '@theatre/studio/utils/selectClosestHTMLAncestor' @@ -24,7 +24,7 @@ undefinedD.keepHot() // constant anyway... function createPresenceContext(options: { enabled: boolean }): InternalPresenceContext { - const currentUserHoverItemB = new Box( + const currentUserHoverItemB = new Atom( undefined, ) const currentUserHoverFlagItemsAtom = new Atom( @@ -98,14 +98,14 @@ function createPresenceContext(options: { return usePrismInstance(focusD) }, setUserHover(itemKeyOpt) { - const prev = currentUserHoverItemB.get() + const prev = currentUserHoverItemB.getState() if (prev === itemKeyOpt) { return } if (prev) { currentUserHoverFlagItemsAtom.setIn([prev], false) } - currentUserHoverItemB.set(itemKeyOpt) + currentUserHoverItemB.setState(itemKeyOpt) if (itemKeyOpt) { currentUserHoverFlagItemsAtom.setIn([itemKeyOpt], true) }