@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/uiComponents/useDrag.js

@@ -1,199 +0,0 @@
-import { useLayoutEffect, useRef } from 'react';
-import { useCssCursorLock } from './PointerEventsHandler';
-import { usePointerCapturing } from '@tomorrowevening/theatre-studio/UIRoot/PointerCapturing';
-import noop from '@tomorrowevening/theatre-shared/utils/noop';
-import { isSafari } from './isSafari';
-import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
-export var MouseButton;
-(function (MouseButton) {
-    MouseButton[MouseButton["Left"] = 0] = "Left";
-    MouseButton[MouseButton["Middle"] = 1] = "Middle";
-    // Not including Right because it _might_ interfere with chord clicking.
-    // So we'll wait for chord-clicking to land before exploring right-button gestures
-})(MouseButton || (MouseButton = {}));
-/** How far in total does the cursor have to move before we decide that the user is dragging */
-const DRAG_DETECTION_DISTANCE_THRESHOLD = 3;
-const DRAG_DETECTION_WAS_POINTER_LOCK_MOVEMENT = 100;
-export default function useDrag(target, opts) {
-    const optsRef = useRef(opts);
-    optsRef.current = opts;
-    /**
-     * Safari has a gross behavior with locking the pointer changes the height of the webpage
-     * See {@link UseDragOpts.shouldPointerLock} for more context.
-     */
-    const isPointerLockUsed = opts.shouldPointerLock && !isSafari;
-    const stateRef = useRef({
-        domDragStarted: false,
-    });
-    const { capturePointer } = usePointerCapturing(`useDrag for ${opts.debugName}`);
-    const callbacksRef = useRef({ onDrag: noop, onDragEnd: noop, onClick: noop });
-    const capturedPointerRef = useRef();
-    // needed to have a state on the react lifecycle which can be updated
-    // via a ref (e.g. via the below layout effect).
-    const [isDraggingRef, isDragging] = useRefAndState(false);
-    useLayoutEffect(() => {
-        if (!target)
-            return;
-        const ensureIsDraggingUpToDateForReactLifecycle = () => {
-            const isDragging = stateRef.current.domDragStarted && stateRef.current.detection.detected;
-            if (isDraggingRef.current !== isDragging) {
-                isDraggingRef.current = isDragging;
-            }
-        };
-        const dragHandler = (event) => {
-            if (!stateRef.current.domDragStarted)
-                return;
-            const stateStarted = stateRef.current;
-            if (didPointerLockCauseMovement(event, stateStarted))
-                return;
-            if (!stateStarted.detection.detected) {
-                stateStarted.detection.totalDistanceMoved +=
-                    Math.abs(event.movementY) + Math.abs(event.movementX);
-                if (stateStarted.detection.totalDistanceMoved >
-                    DRAG_DETECTION_DISTANCE_THRESHOLD) {
-                    if (isPointerLockUsed) {
-                        target.requestPointerLock();
-                    }
-                    stateStarted.detection = {
-                        detected: true,
-                        dragMovement: { x: 0, y: 0 },
-                        dragEventCount: 0,
-                    };
-                    ensureIsDraggingUpToDateForReactLifecycle();
-                }
-            }
-            // drag detection threshold checking
-            if (stateStarted.detection.detected) {
-                stateStarted.detection.dragEventCount += 1;
-                const { dragMovement } = stateStarted.detection;
-                if (isPointerLockUsed) {
-                    // when locked, the pointer event screen position is going to be 0s, since the pointer can't move.
-                    // So, we use the movement on the event
-                    dragMovement.x += event.movementX;
-                    dragMovement.y += event.movementY;
-                }
-                else {
-                    const { startPos } = stateStarted;
-                    dragMovement.x = event.screenX - startPos.x;
-                    dragMovement.y = event.screenY - startPos.y;
-                }
-                callbacksRef.current.onDrag(dragMovement.x, dragMovement.y, event, event.movementX, event.movementY);
-            }
-        };
-        const dragEndHandler = (e) => {
-            removeDragListeners();
-            if (!stateRef.current.domDragStarted)
-                return;
-            const dragHappened = stateRef.current.detection.detected;
-            stateRef.current = { domDragStarted: false };
-            if (opts.shouldPointerLock && !isSafari)
-                document.exitPointerLock();
-            callbacksRef.current.onDragEnd(dragHappened);
-            // ensure that the window is focused after a successful drag
-            // this fixes an issue where after dragging something like the playhead
-            // through an iframe, you can immediately hit [space] and the animation
-            // will play, even if you hadn't been focusing in the iframe at the start
-            // of the drag.
-            //
-            // Fixes https://linear.app/theatre/issue/P-177/beginners-scrubbing-the-playhead-from-within-an-iframe-then-[space]
-            window.focus();
-            if (!dragHappened) {
-                callbacksRef.current.onClick(e);
-            }
-            ensureIsDraggingUpToDateForReactLifecycle();
-        };
-        const addDragListeners = () => {
-            document.addEventListener('mousemove', dragHandler);
-            document.addEventListener('mouseup', dragEndHandler);
-        };
-        const removeDragListeners = () => {
-            capturedPointerRef.current?.release();
-            document.removeEventListener('mousemove', dragHandler);
-            document.removeEventListener('mouseup', dragEndHandler);
-        };
-        const preventUnwantedClick = (event) => {
-            if (optsRef.current.disabled)
-                return;
-            if (!stateRef.current.domDragStarted)
-                return;
-            if (stateRef.current.detection.detected) {
-                if (!optsRef.current.dontBlockMouseDown) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                }
-                stateRef.current.detection = {
-                    detected: false,
-                    totalDistanceMoved: 0,
-                };
-                ensureIsDraggingUpToDateForReactLifecycle();
-            }
-        };
-        const dragStartHandler = (event) => {
-            // defensively release
-            capturedPointerRef.current?.release();
-            const opts = optsRef.current;
-            if (opts.disabled === true)
-                return;
-            const acceptedButtons = opts.buttons ?? [MouseButton.Left];
-            if (!acceptedButtons.includes(event.button))
-                return;
-            const returnOfOnDragStart = opts.onDragStart(event);
-            if (returnOfOnDragStart === false) {
-                // we should ignore the gesture
-                return;
-            }
-            callbacksRef.current.onDrag = returnOfOnDragStart.onDrag;
-            callbacksRef.current.onDragEnd = returnOfOnDragStart.onDragEnd ?? noop;
-            callbacksRef.current.onClick = returnOfOnDragStart.onClick ?? noop;
-            // need to capture pointer after we know the provided handler wants to handle drag start
-            capturedPointerRef.current = capturePointer('Drag start');
-            if (!opts.dontBlockMouseDown) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-            stateRef.current = {
-                domDragStarted: true,
-                startPos: { x: event.screenX, y: event.screenY },
-                detection: {
-                    detected: false,
-                    totalDistanceMoved: 0,
-                },
-            };
-            ensureIsDraggingUpToDateForReactLifecycle();
-            addDragListeners();
-        };
-        const onMouseDown = (e) => {
-            dragStartHandler(e);
-        };
-        target.addEventListener('mousedown', onMouseDown);
-        target.addEventListener('click', preventUnwantedClick);
-        return () => {
-            removeDragListeners();
-            target.removeEventListener('mousedown', onMouseDown);
-            target.removeEventListener('click', preventUnwantedClick);
-            if (stateRef.current.domDragStarted) {
-                callbacksRef.current.onDragEnd?.(stateRef.current.detection.detected);
-            }
-            stateRef.current = { domDragStarted: false };
-            ensureIsDraggingUpToDateForReactLifecycle();
-        };
-    }, [target]);
-    useCssCursorLock(isDragging && !!opts.lockCSSCursorTo, 'dragging', opts.lockCSSCursorTo);
-    return [isDragging];
-}
-/**
- * shouldPointerLock moves the mouse to the center of your screen in firefox, which
- * can cause it to report very large movementX when the pointer lock begins. This
- * function hackily detects unnaturally large movements of the mouse.
- *
- * @param event - MouseEvent from onDrag
- * @returns
- */
-function didPointerLockCauseMovement(event, state) {
-    const isEarlyInDragging = !state.detection.detected ||
-        (state.detection.detected && state.detection.dragEventCount < 3);
-    return (isEarlyInDragging &&
-        // sudden movement
-        (Math.abs(event.movementX) > DRAG_DETECTION_WAS_POINTER_LOCK_MOVEMENT ||
-            Math.abs(event.movementY) > DRAG_DETECTION_WAS_POINTER_LOCK_MOVEMENT));
-}

package/dist/uiComponents/useHotspot.js

@@ -1,30 +0,0 @@
-import { useEffect, useState } from 'react';
-export default function useHotspot(spot) {
-    const [active, setActive] = useState(false);
-    useEffect(() => {
-        const hoverListener = (e) => {
-            const threshold = active ? 200 : 50;
-            // This is a super specific solution just for now so that the hotspot region
-            // excludes the pin button.
-            const topBuffer = 56;
-            let mouseInside = spot === 'left' ? e.x < threshold : e.x > window.innerWidth - threshold;
-            mouseInside &&= e.y > topBuffer;
-            if (mouseInside) {
-                setActive(true);
-            }
-            else {
-                setActive(false);
-            }
-        };
-        document.addEventListener('mousemove', hoverListener);
-        const leaveListener = () => {
-            setActive(false);
-        };
-        document.addEventListener('mouseleave', leaveListener);
-        return () => {
-            document.removeEventListener('mousemove', hoverListener);
-            document.removeEventListener('mouseleave', leaveListener);
-        };
-    }, [active]);
-    return active;
-}

package/dist/uiComponents/useHover.js

@@ -1,23 +0,0 @@
-import { useEffect, useState } from 'react';
-export default function useHover(target) {
-    const [isHovered, setIsHovered] = useState(false);
-    useEffect(() => {
-        setIsHovered(false);
-        if (!target)
-            return;
-        const onMouseEnter = () => {
-            setIsHovered(true);
-        };
-        const onMouseLeave = () => {
-            setIsHovered(false);
-        };
-        target.addEventListener('mouseenter', onMouseEnter);
-        target.addEventListener('mouseleave', onMouseLeave);
-        return () => {
-            setIsHovered(false);
-            target.removeEventListener('mouseenter', onMouseEnter);
-            target.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [target]);
-    return isHovered;
-}

package/dist/uiComponents/useHoverWithoutDescendants.js

@@ -1,33 +0,0 @@
-import { useEffect, useState } from 'react';
-/**
- * A react hook that returns true if the pointer is hovering over the target element and not its descendants
- */
-export default function useHoverWithoutDescendants(target) {
-    const [isHovered, setIsHovered] = useState(false);
-    useEffect(() => {
-        setIsHovered(false);
-        if (!target)
-            return;
-        const onMouseEnterOrMove = (e) => {
-            if (e.target === target) {
-                setIsHovered(true);
-            }
-            else {
-                setIsHovered(false);
-            }
-        };
-        const onMouseLeave = () => {
-            setIsHovered(false);
-        };
-        target.addEventListener('mouseenter', onMouseEnterOrMove);
-        target.addEventListener('mousemove', onMouseEnterOrMove);
-        target.addEventListener('mouseleave', onMouseLeave);
-        return () => {
-            setIsHovered(false);
-            target.removeEventListener('mouseenter', onMouseEnterOrMove);
-            target.removeEventListener('mousemove', onMouseEnterOrMove);
-            target.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [target]);
-    return isHovered;
-}

package/dist/uiComponents/useKeyDown.js

@@ -1,9 +0,0 @@
-import { useState } from 'react';
-import useKeyDownCallback from './useKeyDownCallback';
-export default function useKeyDown(combo) {
-    const [state, setState] = useState(false);
-    useKeyDownCallback(combo, ({ down }) => {
-        setState(down);
-    });
-    return state;
-}

package/dist/uiComponents/useKeyDownCallback.js

@@ -1,28 +0,0 @@
-import { useEffect, useRef } from 'react';
-export default function useKeyDownCallback(combo, listener) {
-    const refs = useRef({ combo, listener });
-    refs.current = { combo, listener };
-    useEffect(() => {
-        function onKeyDown(event) {
-            if (event.key === refs.current.combo) {
-                refs.current.listener({ down: true, event });
-            }
-        }
-        function onKeyUp(event) {
-            if (event.key === refs.current.combo) {
-                refs.current.listener({ down: false, event });
-            }
-        }
-        function onBlur(event) {
-            refs.current.listener({ down: false, event: undefined });
-        }
-        document.addEventListener('keydown', onKeyDown);
-        document.addEventListener('keyup', onKeyUp);
-        window.addEventListener('blur', onBlur);
-        return () => {
-            document.removeEventListener('keydown', onKeyDown);
-            document.removeEventListener('keyup', onKeyUp);
-            window.removeEventListener('blur', onBlur);
-        };
-    }, []);
-}

package/dist/uiComponents/useLockSet.js

@@ -1,17 +0,0 @@
-import { useMemo, useState } from 'react';
-export default function useLockSet() {
-    const [isLocked, _setIsLocked] = useState(false);
-    const addLock = useMemo(() => {
-        const locks = new Set();
-        return () => {
-            const unlock = () => {
-                locks.delete(unlock);
-                _setIsLocked(locks.size > 0);
-            };
-            locks.add(unlock);
-            _setIsLocked(true);
-            return unlock;
-        };
-    }, []);
-    return [isLocked, addLock];
-}

package/dist/uiComponents/useLogger.js

@@ -1,16 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-const loggerContext = React.createContext(null);
-export function ProvideLogger(props) {
-    return (React.createElement(loggerContext.Provider, { value: props.logger }, props.children));
-}
-export function useLogger(name, key) {
-    const parentLogger = useContext(loggerContext);
-    return useMemo(() => {
-        if (name) {
-            return parentLogger.named(name, key);
-        }
-        else {
-            return parentLogger;
-        }
-    }, [parentLogger, name, key]);
-}

package/dist/uiComponents/useOnClickOutside.js

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-export default function useOnClickOutside(container, onOutside, enabled) {
-    useEffect(() => {
-        if (!container || enabled === false)
-            return;
-        const containers = Array.isArray(container)
-            ? container.filter((container) => container)
-            : [container];
-        const onMouseDown = (e) => {
-            if (containers.every((container) => !e.composedPath().includes(container))) {
-                onOutside(e);
-            }
-        };
-        window.addEventListener('mousedown', onMouseDown, {
-            capture: true,
-            passive: false,
-        });
-        return () => {
-            window.removeEventListener('mousedown', onMouseDown, {
-                capture: true,
-                passive: false,
-            });
-        };
-    }, [container, enabled]);
-}

package/dist/uiComponents/useOnKeyDown.js

@@ -1,12 +0,0 @@
-import { useEffect, useRef } from 'react';
-export default function useOnKeyDown(callback) {
-    const ref = useRef(callback);
-    ref.current = callback;
-    useEffect(() => {
-        const onKeyDown = (ev) => ref.current(ev);
-        window.addEventListener('keydown', onKeyDown);
-        return () => {
-            window.removeEventListener('keydown', onKeyDown);
-        };
-    }, []);
-}

package/dist/uiComponents/usePresence.js

@@ -1,156 +0,0 @@
-import React, { useMemo } from 'react';
-import { useEffect } from 'react';
-import { useLogger } from './useLogger';
-import { prism, pointerToPrism } from '@tomorrowevening/theatre-dataverse';
-import { Atom } from '@tomorrowevening/theatre-dataverse';
-import { usePrismInstance } from '@tomorrowevening/theatre-react';
-import { selectClosestHTMLAncestor } from '@tomorrowevening/theatre-studio/utils/selectClosestHTMLAncestor';
-import pointerDeep from '@tomorrowevening/theatre-shared/utils/pointerDeep';
-/** To mean the presence value */
-export var PresenceFlag;
-(function (PresenceFlag) {
-    /** Self is hovered or what represents "self" is being hovered */
-    PresenceFlag[PresenceFlag["Primary"] = 2] = "Primary";
-    /** Related item is hovered */
-    PresenceFlag[PresenceFlag["Secondary"] = 1] = "Secondary";
-    // /** Tutorial */
-    // TutorialEmphasis = 0,
-})(PresenceFlag || (PresenceFlag = {}));
-const undefinedD = prism(() => undefined);
-undefinedD.keepHot(); // constant anyway...
-function createPresenceContext(options) {
-    const currentUserHoverItemB = new Atom(undefined);
-    const currentUserHoverFlagItemsAtom = new Atom({});
-    // keep as part of presence creation
-    const relationsAtom = new Atom({});
-    let lastRelationId = 0;
-    return {
-        addRelatedFlags(itemKey, relationships) {
-            const relationId = String(++lastRelationId);
-            // "clean up" paths returned from relationships declared
-            const undoAtPaths = relationships.map((rel) => {
-                const presence = {
-                    flag: rel.flag,
-                };
-                const path = [rel.affects, itemKey, relationId];
-                relationsAtom.setByPointer((p) => pointerDeep(p, path), presence);
-                return path;
-            });
-            return () => {
-                for (const pathToUndo of undoAtPaths) {
-                    relationsAtom.setByPointer((p) => pointerDeep(p, pathToUndo), undefined);
-                }
-            };
-        },
-        usePresenceFlag(itemKey) {
-            if (!options.enabled)
-                return undefined;
-            const focusD = useMemo(() => {
-                if (!itemKey)
-                    return undefinedD;
-                // this is the thing being hovered
-                const currentD = currentUserHoverItemB.prism;
-                const primaryFocusDer = pointerToPrism(currentUserHoverFlagItemsAtom.pointer[itemKey]);
-                const relationsDer = pointerToPrism(relationsAtom.pointer[itemKey]);
-                return prism(() => {
-                    const primary = primaryFocusDer.getValue();
-                    if (primary) {
-                        return PresenceFlag.Primary;
-                    }
-                    else {
-                        const related = relationsDer.getValue();
-                        const current = currentD.getValue();
-                        const rels = related && current && related[current];
-                        if (rels) {
-                            // can this be cached into a derived atom?
-                            let best;
-                            for (const rel of Object.values(rels)) {
-                                if (!rel)
-                                    continue;
-                                if (best && best >= rel.flag)
-                                    continue;
-                                best = rel.flag;
-                            }
-                            return best;
-                        }
-                        return undefined;
-                    }
-                });
-            }, [itemKey]);
-            return usePrismInstance(focusD);
-        },
-        setUserHover(itemKeyOpt) {
-            const prev = currentUserHoverItemB.get();
-            if (prev === itemKeyOpt) {
-                return;
-            }
-            if (prev) {
-                currentUserHoverFlagItemsAtom.setByPointer((p) => p[prev], false);
-            }
-            currentUserHoverItemB.set(itemKeyOpt);
-            if (itemKeyOpt) {
-                currentUserHoverFlagItemsAtom.setByPointer((p) => p[itemKeyOpt], true);
-            }
-        },
-    };
-}
-const presenceInternalCtx = React.createContext(createPresenceContext({ enabled: false }));
-export function ProvidePresenceRoot({ children }) {
-    const presence = useMemo(() => createPresenceContext({ enabled: false }), []);
-    return React.createElement(presenceInternalCtx.Provider, { children, value: presence }, children);
-}
-const PRESENCE_ITEM_DATA_ATTR = 'data-pi-key';
-export default function usePresence(key) {
-    const presenceInternal = React.useContext(presenceInternalCtx);
-    const flag = presenceInternal.usePresenceFlag(key);
-    return {
-        attrs: {
-            [PRESENCE_ITEM_DATA_ATTR]: key,
-        },
-        flag,
-        useRelations(getRelations, deps) {
-            useEffect(() => {
-                return key && presenceInternal.addRelatedFlags(key, getRelations());
-            }, [key, ...deps]);
-        },
-    };
-}
-export function usePresenceListenersOnRootElement(target) {
-    const presence = React.useContext(presenceInternalCtx);
-    const logger = useLogger('PresenceListeners');
-    useEffect(() => {
-        // keep track of current primary hover to make sure we make changes to presence distinct
-        let currentItemKeyUserHover;
-        if (!target)
-            return;
-        const onMouseOver = (event) => {
-            if (event.target instanceof Node) {
-                const found = selectClosestHTMLAncestor(event.target, `[${PRESENCE_ITEM_DATA_ATTR}]`);
-                if (found) {
-                    const itemKey = found.getAttribute(PRESENCE_ITEM_DATA_ATTR);
-                    if (currentItemKeyUserHover !== itemKey) {
-                        currentItemKeyUserHover = itemKey;
-                        presence.setUserHover((itemKey || undefined));
-                        logger._debug('Updated current hover', { itemKey });
-                    }
-                    return;
-                }
-                // remove hover
-                if (currentItemKeyUserHover != null) {
-                    currentItemKeyUserHover = null;
-                    presence.setUserHover(undefined);
-                    logger._debug('Cleared current hover');
-                }
-            }
-        };
-        target.addEventListener('mouseover', onMouseOver);
-        return () => {
-            target.removeEventListener('mouseover', onMouseOver);
-            // remove hover
-            if (currentItemKeyUserHover != null) {
-                currentItemKeyUserHover = null;
-                logger._debug('Cleared current hover as part of cleanup');
-            }
-        };
-    }, [target, presence]);
-}

package/dist/uiComponents/useValToAtom.js

@@ -1,11 +0,0 @@
-import { Atom } from '@tomorrowevening/theatre-dataverse';
-import { useLayoutEffect, useMemo } from 'react';
-export default function useValToAtom(val) {
-    const atom = useMemo(() => {
-        return new Atom(val);
-    }, []);
-    useLayoutEffect(() => {
-        atom.set(val);
-    }, [val]);
-    return atom;
-}

package/dist/utils/absoluteDims.js

@@ -1,7 +0,0 @@
-/** Create CSS rule string for centered and give it this width and height */
-export const absoluteDims = (w, h = w) => `
-  left: ${w * -0.5}px;
-  top: ${h * -0.5}px;
-  width: ${w}px;
-  height: ${h}px;
-`;

package/dist/utils/contextualWebComponents.js

@@ -1,44 +0,0 @@
-import { getMounter } from './renderInPortalInContext';
-export function registerContextualWebComponent(ReactComponent, componentName, 
-// currently only supporting string prop types
-propKeys) {
-    if (typeof window === 'undefined' || typeof customElements === 'undefined')
-        return;
-    const propList = Object.keys(propKeys);
-    class CustomWebComponent extends HTMLElement {
-        _mounted = false;
-        _mountOrRender;
-        _unmount;
-        static get observedAttributes() {
-            return propList;
-        }
-        constructor() {
-            super();
-            const { mountOrRender, unmount } = getMounter();
-            this._mountOrRender = mountOrRender;
-            this._unmount = unmount;
-        }
-        connectedCallback() {
-            // const shadow = this.attachShadow({mode: 'open'})
-            this._mounted = true;
-            this._render();
-        }
-        _render() {
-            const props = Object.fromEntries(propList.map((propName) => [
-                propName,
-                this.getAttribute(propName),
-            ]));
-            this._mountOrRender(ReactComponent, props, this);
-        }
-        attributeChangedCallback() {
-            if (!this._mounted)
-                return;
-            this._render();
-        }
-        disconnectedCallback() {
-            this._mounted = false;
-            this._unmount();
-        }
-    }
-    customElements.define(componentName, CustomWebComponent);
-}

package/dist/utils/copyToClipboard.js

@@ -1,28 +0,0 @@
-export async function copyToClipboard(text) {
-    if (navigator.clipboard) {
-        return navigator.clipboard
-            .writeText(text)
-            .then(() => {
-            return true;
-        })
-            .catch(() => {
-            return false;
-        });
-    }
-    else {
-        const tempTextArea = document.createElement('textarea');
-        tempTextArea.value = text;
-        document.body.appendChild(tempTextArea);
-        tempTextArea.focus();
-        tempTextArea.select();
-        try {
-            const successful = document.execCommand('copy');
-            document.body.removeChild(tempTextArea);
-            return Promise.resolve(successful);
-        }
-        catch (err) {
-            document.body.removeChild(tempTextArea);
-            return Promise.resolve(false);
-        }
-    }
-}