@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/uiComponents/Popover/PopoverArrow.js

@@ -0,0 +1,38 @@
+import React, { forwardRef, useContext } from 'react';
+import styled from 'styled-components';
+import ArrowContext from './ArrowContext';
+const Container = styled.div `
+  position: absolute;
+  width: 0;
+  height: 0;
+  color: var(--popover-arrow-color);
+  pointer-events: none;
+`;
+const Adjust = styled.div `
+  width: 12px;
+  height: 8px;
+  position: absolute;
+  left: -7px;
+  top: -8px;
+  text-align: center;
+  line-height: 0;
+`;
+const InnerTriangle = styled.path `
+  fill: var(--popover-bg);
+`;
+const InnerStroke = styled.path `
+  fill: var(--popover-inner-stroke);
+`;
+const OuterStroke = styled.path `
+  fill: var(--popover-outer-stroke);
+`;
+const PopoverArrow = forwardRef(({ className }, ref) => {
+    const arrowStyle = useContext(ArrowContext);
+    return (React.createElement(Container, { className: className, ref: ref, style: { ...arrowStyle } },
+        React.createElement(Adjust, null,
+            React.createElement("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement(OuterStroke, { d: "M6 0L0 6H12L6 0Z" }),
+                React.createElement(InnerStroke, { d: "M6 1.5L0 7.5H12L6 1.5Z" }),
+                React.createElement(InnerTriangle, { d: "M6 3L0 9H12L6 3Z" })))));
+});
+export default PopoverArrow;

package/dist/uiComponents/Popover/TooltipContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const useTooltipOpenState: () => [isOpen: boolean, setIsOpen: (isOpen: boolean, delay: number) => void];
+declare const TooltipContext: React.FC<{
+    children: React.ReactNode;
+}>;
+export default TooltipContext;
+//# sourceMappingURL=TooltipContext.d.ts.map

package/dist/uiComponents/Popover/TooltipContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContext.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/Popover/TooltipContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAMN,MAAM,OAAO,CAAA;AASd,eAAO,MAAM,mBAAmB,8CAEV,OAAO,SAAS,MAAM,KAAK,IAAI,CAmBpD,CAAA;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAwBzD,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/uiComponents/Popover/TooltipContext.js

@@ -0,0 +1,46 @@
+import { Atom } from '@tomorrowevening/theatre-dataverse';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, } from 'react';
+const ctx = createContext(null);
+let lastTooltipId = 0;
+export const useTooltipOpenState = () => {
+    const id = useMemo(() => lastTooltipId++, []);
+    const { cur, set } = useContext(ctx);
+    const [isOpenRef, isOpen] = useRefAndState(false);
+    const setIsOpen = useCallback((shouldOpen, delay) => {
+        set(shouldOpen ? id : -1, delay);
+    }, []);
+    useEffect(() => {
+        return cur.onStale(() => {
+            const flag = cur.getValue() === id;
+            if (isOpenRef.current !== flag)
+                isOpenRef.current = flag;
+        });
+    }, [cur, id]);
+    return [isOpen, setIsOpen];
+};
+const TooltipContext = ({ children }) => {
+    const currentTooltipId = useMemo(() => new Atom(-1), []);
+    const cur = currentTooltipId.prism;
+    const set = useMemo(() => {
+        let lastTimeout = undefined;
+        return (id, delay) => {
+            const overridingPreviousTimeout = lastTimeout !== undefined;
+            if (lastTimeout !== undefined) {
+                clearTimeout(lastTimeout);
+                lastTimeout = undefined;
+            }
+            if (delay === 0 || overridingPreviousTimeout) {
+                currentTooltipId.set(id);
+            }
+            else {
+                lastTimeout = setTimeout(() => {
+                    currentTooltipId.set(id);
+                    lastTimeout = undefined;
+                }, delay);
+            }
+        };
+    }, []);
+    return React.createElement(ctx.Provider, { value: { cur, set } }, children);
+};
+export default TooltipContext;

package/dist/uiComponents/Popover/TooltipWrapper.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export type AbsolutePlacementBoxConstraints = {
+    minX?: number;
+    maxX?: number;
+    minY?: number;
+    maxY?: number;
+};
+declare const TooltipWrapper: React.FC<{
+    target: HTMLElement | SVGElement | Element;
+    onClickOutside?: (e: MouseEvent) => void;
+    children: () => React.ReactElement;
+    onPointerOutside?: {
+        threshold: number;
+        callback: (e: MouseEvent) => void;
+    };
+    verticalPlacement?: 'top' | 'bottom' | 'overlay';
+    verticalGap?: number;
+    constraints?: AbsolutePlacementBoxConstraints;
+}>;
+export default TooltipWrapper;
+//# sourceMappingURL=TooltipWrapper.d.ts.map

package/dist/uiComponents/Popover/TooltipWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipWrapper.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/Popover/TooltipWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,MAAM,MAAM,+BAA+B,GAAG;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,MAAM,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,CAAA;IAC1C,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,QAAQ,EAAE,MAAM,KAAK,CAAC,YAAY,CAAA;IAClC,gBAAgB,CAAC,EAAE;QACjB,SAAS,EAAE,MAAM,CAAA;QACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;KAClC,CAAA;IACD,iBAAiB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAA;IAChD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,+BAA+B,CAAA;CAC9C,CAuHA,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/uiComponents/Popover/TooltipWrapper.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { cloneElement, useLayoutEffect, useState } from 'react';
+import useWindowSize from 'react-use/esm/useWindowSize';
+import useBoundingClientRect from '@tomorrowevening/theatre-studio/uiComponents/useBoundingClientRect';
+import ArrowContext from './ArrowContext';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import useOnClickOutside from '@tomorrowevening/theatre-studio/uiComponents/useOnClickOutside';
+import onPointerOutside from '@tomorrowevening/theatre-studio/uiComponents/onPointerOutside';
+import noop from '@tomorrowevening/theatre-shared/utils/noop';
+import { clamp } from 'lodash-es';
+const minimumDistanceOfArrowToEdgeOfPopover = 8;
+const TooltipWrapper = (props) => {
+    const originalElement = props.children();
+    const [ref, container] = useRefAndState(null);
+    const style = originalElement.props.style
+        ? { ...originalElement.props.style }
+        : {};
+    style.position = 'absolute';
+    const containerRect = useBoundingClientRect(container);
+    const targetRect = useBoundingClientRect(props.target);
+    const windowSize = useWindowSize();
+    const [arrowContextValue, setArrowContextValue] = useState({});
+    useLayoutEffect(() => {
+        if (!containerRect || !container || !targetRect)
+            return;
+        const gap = props.verticalGap ?? 8;
+        const arrowStyle = {};
+        let verticalPlacement = props.verticalPlacement ?? 'bottom';
+        let top = 0;
+        let left = 0;
+        if (verticalPlacement === 'bottom') {
+            if (targetRect.bottom + containerRect.height + gap < windowSize.height) {
+                verticalPlacement = 'bottom';
+                top = targetRect.bottom + gap;
+                arrowStyle.top = '0px';
+            }
+            else if (targetRect.top > containerRect.height + gap) {
+                verticalPlacement = 'top';
+                top = targetRect.top - (containerRect.height + gap);
+                arrowStyle.bottom = '0px';
+                arrowStyle.transform = 'rotateZ(180deg)';
+            }
+            else {
+                verticalPlacement = 'overlay';
+            }
+        }
+        else if (verticalPlacement === 'top') {
+            if (targetRect.top > containerRect.height + gap) {
+                verticalPlacement = 'top';
+                top = targetRect.top - (containerRect.height + gap);
+                arrowStyle.bottom = '0px';
+                arrowStyle.transform = 'rotateZ(180deg)';
+            }
+            else if (targetRect.bottom + containerRect.height + gap <
+                windowSize.height) {
+                verticalPlacement = 'bottom';
+                top = targetRect.bottom + gap;
+                arrowStyle.top = '0px';
+            }
+            else {
+                verticalPlacement = 'overlay';
+            }
+        }
+        let arrowLeft = 0;
+        if (verticalPlacement !== 'overlay') {
+            const anchorLeft = targetRect.left + targetRect.width / 2;
+            if (anchorLeft < containerRect.width / 2) {
+                left = gap;
+                arrowLeft = Math.max(anchorLeft - gap, minimumDistanceOfArrowToEdgeOfPopover);
+            }
+            else if (anchorLeft + containerRect.width / 2 > windowSize.width) {
+                left = windowSize.width - (gap + containerRect.width);
+                arrowLeft = Math.min(anchorLeft - left, containerRect.width - minimumDistanceOfArrowToEdgeOfPopover);
+            }
+            else {
+                left = anchorLeft - containerRect.width / 2;
+                arrowLeft = containerRect.width / 2;
+            }
+            arrowStyle.left = arrowLeft + 'px';
+        }
+        const { minX = -Infinity, maxX = Infinity, minY = -Infinity, maxY = Infinity, } = props.constraints ?? {};
+        const pos = {
+            left: clamp(left, minX, maxX - containerRect.width),
+            top: clamp(top, minY, maxY + containerRect.height),
+        };
+        container.style.left = pos.left + 'px';
+        container.style.top = pos.top + 'px';
+        setArrowContextValue(arrowStyle);
+        if (props.onPointerOutside) {
+            return onPointerOutside(container, props.onPointerOutside.threshold, props.onPointerOutside.callback);
+        }
+    }, [
+        containerRect,
+        container,
+        props.target,
+        targetRect,
+        windowSize,
+        props.onPointerOutside,
+    ]);
+    useOnClickOutside([container, props.target ?? null], props.onClickOutside ?? noop);
+    return (React.createElement(ArrowContext.Provider, { value: arrowContextValue }, cloneElement(originalElement, { ref, style })));
+};
+export default TooltipWrapper;

package/dist/uiComponents/Popover/usePopover.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { AbsolutePlacementBoxConstraints } from './TooltipWrapper';
+export type OpenFn = (e: React.MouseEvent | MouseEvent | {
+    clientX: number;
+    clientY: number;
+}, target: HTMLElement | SVGElement | Element) => void;
+type CloseFn = (reason: string) => void;
+type Opts = {
+    debugName: string;
+    closeWhenPointerIsDistant?: boolean;
+    pointerDistanceThreshold?: number;
+    closeOnClickOutside?: boolean;
+    constraints?: AbsolutePlacementBoxConstraints;
+    verticalGap?: number;
+};
+export interface IPopover {
+    /**
+     * The React node of the popover. Insert into your JSX using \{node\}. Its state
+     * will be managed automatically.
+     */
+    node: React.ReactNode;
+    open: OpenFn;
+    close: CloseFn;
+    toggle: OpenFn;
+    isOpen: boolean;
+}
+export default function usePopover(opts: Opts | (() => Opts), render: () => React.ReactElement): IPopover;
+export {};
+//# sourceMappingURL=usePopover.d.ts.map

package/dist/uiComponents/Popover/usePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/Popover/usePopover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,kBAAkB,CAAA;AAIrE,MAAM,MAAM,MAAM,GAAG,CACnB,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,UAAU,GAAG;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,EACrE,MAAM,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,KACvC,IAAI,CAAA;AACT,KAAK,OAAO,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;AA4BvC,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,WAAW,CAAC,EAAE,+BAA+B,CAAA;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,WAAW,QAAQ;IACvB;;;OAGG;IACH,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,IAAI,EAAE,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,EACzB,MAAM,EAAE,MAAM,KAAK,CAAC,YAAY,GAC/B,QAAQ,CAwGV"}

package/dist/uiComponents/Popover/usePopover.js

@@ -0,0 +1,132 @@
+import { usePointerCapturing } from '@tomorrowevening/theatre-studio/UIRoot/PointerCapturing';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { PortalContext } from 'reakit';
+import TooltipWrapper from './TooltipWrapper';
+import { contextMenuShownContext } from '@tomorrowevening/theatre-studio/panels/DetailPanel/DetailPanel';
+const PopoverAutoCloseLock = React.createContext({
+    // defaults have no effects, since there would not be a
+    // parent popover to worry about auto-closing.
+    takeFocus() {
+        return {
+            releaseFocus() { },
+        };
+    },
+});
+export default function usePopover(opts, render) {
+    const _debug = (...args) => { };
+    // want to make sure that we don't close a popover when dragging something (like a curve editor handle)
+    // I think this could be improved to handle closing after done dragging, better.
+    const { isPointerBeingCaptured } = usePointerCapturing(`usePopover`);
+    const [stateRef, state] = useRefAndState({
+        isOpen: false,
+    });
+    const optsRef = useRef(opts);
+    const close = useCallback((reason) => {
+        _debug(`closing due to "${reason}"`);
+        stateRef.current = { isOpen: false };
+    }, []);
+    const open = useCallback((e, target) => {
+        const opts = typeof optsRef.current === 'function'
+            ? optsRef.current()
+            : optsRef.current;
+        function onClickOutside() {
+            if (lock.childHasFocusRef.current)
+                return;
+            if (opts.closeOnClickOutside !== false) {
+                close('clicked outside popover');
+            }
+        }
+        stateRef.current = {
+            isOpen: true,
+            clickPoint: { clientX: e.clientX, clientY: e.clientY },
+            target,
+            opts,
+            onClickOutside: onClickOutside,
+            onPointerOutside: opts.closeWhenPointerIsDistant === false
+                ? undefined
+                : {
+                    threshold: opts.pointerDistanceThreshold ?? 100,
+                    callback: () => {
+                        if (lock.childHasFocusRef.current)
+                            return;
+                        // this is a bit weird, because when you stop capturing, then the popover can close on you...
+                        // TODO: Better fixes?
+                        if (isPointerBeingCaptured())
+                            return;
+                        close('pointer outside');
+                    },
+                },
+        };
+    }, []);
+    const toggle = useCallback((...args) => {
+        if (stateRef.current.isOpen) {
+            close('toggled');
+        }
+        else {
+            open(...args);
+        }
+    }, []);
+    /**
+     * See doc comment on {@link useAutoCloseLockState}.
+     * Used to ensure that moving far away from a parent popover doesn't
+     * close a child popover.
+     */
+    const lock = useAutoCloseLockState({
+        _debug,
+        state,
+    });
+    // TODO: this lock is now exported from the detail panel, do refactor it when you get the chance
+    const [, addContextMenu] = useContext(contextMenuShownContext);
+    useEffect(() => {
+        let removeContextMenu;
+        if (state.isOpen) {
+            removeContextMenu = addContextMenu();
+        }
+        return () => removeContextMenu?.();
+    }, [state.isOpen]);
+    const portalLayer = useContext(PortalContext);
+    const node = state.isOpen ? (createPortal(React.createElement(PopoverAutoCloseLock.Provider, { value: lock.childPopoverLock },
+        React.createElement(TooltipWrapper, { children: render, target: state.target, onClickOutside: state.onClickOutside, onPointerOutside: state.onPointerOutside, constraints: state.opts.constraints, verticalGap: state.opts.verticalGap })), portalLayer)) : (React.createElement(React.Fragment, null));
+    return { node, open, close, toggle, isOpen: state.isOpen };
+}
+/**
+ * Keep track of the current lock state, and provide
+ * a lock that can be passed down to popover children.
+ *
+ * Used to ensure that moving far away from a parent popover doesn't
+ * close a child popover.
+ * When child popovers are opened, we want to suspend all auto-closing
+ * behaviors for parenting popovers.
+ */
+function useAutoCloseLockState(options) {
+    const parentLock = useContext(PopoverAutoCloseLock);
+    useEffect(() => {
+        if (options.state.isOpen) {
+            // when this "popover" is open, then take focus from parent
+            const focused = parentLock.takeFocus();
+            options._debug('take focus');
+            return () => {
+                // when closed / unmounted, release focus
+                options._debug('release focus');
+                focused.releaseFocus();
+            };
+        }
+    }, [options.state.isOpen]);
+    // child of us
+    const childHasFocusRef = useRef(false);
+    return {
+        childHasFocusRef: childHasFocusRef,
+        childPopoverLock: {
+            takeFocus() {
+                childHasFocusRef.current = true;
+                return {
+                    releaseFocus() {
+                        childHasFocusRef.current = false;
+                    },
+                };
+            },
+        },
+    };
+}

package/dist/uiComponents/Popover/useTooltip.d.ts

@@ -0,0 +1,14 @@
+import type { MutableRefObject } from 'react';
+import React from 'react';
+export default function useTooltip<T extends HTMLElement>(opts: {
+    enabled?: boolean;
+    enterDelay?: number;
+    exitDelay?: number;
+    verticalPlacement?: 'top' | 'bottom' | 'overlay';
+    verticalGap?: number;
+}, render: () => React.ReactElement): [
+    node: React.ReactNode,
+    targetRef: MutableRefObject<T | null>,
+    isOpen: boolean
+];
+//# sourceMappingURL=useTooltip.d.ts.map

package/dist/uiComponents/Popover/useTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/Popover/useTooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,OAAO,CAAA;AAG3C,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,SAAS,WAAW,EACtD,IAAI,EAAE;IACJ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAA;IAChD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,EACD,MAAM,EAAE,MAAM,KAAK,CAAC,YAAY,GAC/B;IACD,IAAI,EAAE,KAAK,CAAC,SAAS;IACrB,SAAS,EAAE,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC;IACrC,MAAM,EAAE,OAAO;CAChB,CA6CA"}

package/dist/uiComponents/Popover/useTooltip.js

@@ -0,0 +1,33 @@
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import { useContext } from 'react';
+import { useEffect } from 'react';
+import React from 'react';
+import TooltipWrapper from './TooltipWrapper';
+import { createPortal } from 'react-dom';
+import { useTooltipOpenState } from './TooltipContext';
+import { PortalContext } from 'reakit';
+import noop from '@tomorrowevening/theatre-shared/utils/noop';
+export default function useTooltip(opts, render) {
+    const enabled = opts.enabled !== false;
+    const [isOpen, setIsOpen] = useTooltipOpenState();
+    const [targetRef, targetNode] = useRefAndState(null);
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const target = targetRef.current;
+        if (!target)
+            return;
+        const onMouseEnter = () => setIsOpen(true, opts.enterDelay ?? 400);
+        const onMouseLeave = () => setIsOpen(false, opts.exitDelay ?? 200);
+        target.addEventListener('mouseenter', onMouseEnter);
+        target.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            target.removeEventListener('mouseenter', onMouseEnter);
+            target.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [targetRef, enabled, opts.enterDelay, opts.exitDelay]);
+    const portalLayer = useContext(PortalContext);
+    const node = enabled && isOpen && targetNode ? (createPortal(React.createElement(TooltipWrapper, { children: render, target: targetNode, onClickOutside: noop, verticalPlacement: opts.verticalPlacement, verticalGap: opts.verticalGap }), portalLayer)) : (React.createElement(React.Fragment, null));
+    return [node, targetRef, isOpen];
+}

package/dist/uiComponents/RoomToClick.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const RoomToClick: React.FC<{
+    room: number;
+}>;
+export default RoomToClick;
+//# sourceMappingURL=RoomToClick.d.ts.map

package/dist/uiComponents/RoomToClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoomToClick.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/RoomToClick.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAEzC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/uiComponents/RoomToClick.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styled from 'styled-components';
+const Container = styled.div `
+  position: absolute;
+  inset: ${(props) => props.room * -1}px;
+`;
+const RoomToClick = (props) => {
+    return React.createElement(Container, { room: props.room });
+};
+export default RoomToClick;

package/dist/uiComponents/SVGIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Sizing = 'em' | 'fill' | 'none' | 'absoluteFill';
+declare const SvgIcon: React.FC<{
+    src: string;
+    sizing?: Sizing;
+}>;
+export default SvgIcon;
+//# sourceMappingURL=SVGIcon.d.ts.map

package/dist/uiComponents/SVGIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGIcon.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/SVGIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAkBzB,KAAK,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,CAAA;AAErD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAOA,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/uiComponents/SVGIcon.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+const Container = styled.div `
+  width: ${(props) => (props.sizing === 'em' ? '1em' : '100%')};
+  ${(props) => props.sizing === 'absoluteFill' &&
+    css `
+      & > svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+    `}
+`;
+const SvgIcon = (props) => {
+    return (React.createElement(Container, { sizing: props.sizing || 'em', dangerouslySetInnerHTML: { __html: props.src } }));
+};
+export default SvgIcon;

package/dist/uiComponents/ShowMousePosition.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const ShowMousePosition: React.FC<{}>;
+export default ShowMousePosition;
+//# sourceMappingURL=ShowMousePosition.d.ts.map

package/dist/uiComponents/ShowMousePosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowMousePosition.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/ShowMousePosition.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAkCnC,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/uiComponents/ShowMousePosition.js

@@ -0,0 +1,30 @@
+import mousePositionD from '@tomorrowevening/theatre-studio/utils/mousePositionD';
+import { usePrism } from '@tomorrowevening/theatre-react';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import { createPortal } from 'react-dom';
+const ShowMousePosition = (props) => {
+    const pos = usePrism(() => val(mousePositionD) ?? { clientX: 0, clientY: 0 }, []);
+    return createPortal(React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                position: 'fixed',
+                top: '0',
+                bottom: '0',
+                width: '1px',
+                background: 'rgba(255, 255, 255, 0.2)',
+                pointerEvents: 'none',
+                zIndex: 9999,
+                left: `${pos.clientX}px`,
+            } }),
+        React.createElement("div", { style: {
+                position: 'fixed',
+                left: '0',
+                right: '0',
+                height: '1px',
+                background: 'rgba(255, 255, 255, 0.2)',
+                pointerEvents: 'none',
+                zIndex: 9999,
+                top: `${pos.clientY}px`,
+            } })), document.body);
+};
+export default ShowMousePosition;

package/dist/uiComponents/colorPicker/components/EditingProvider.d.ts

@@ -0,0 +1,15 @@
+import type { FC } from 'react';
+import React from 'react';
+/**
+ * Provides the current mode the color picker is in. When editing, the picker should be
+ * stateful and disregard controlling props, while not editing, it should behave
+ * in a controlled manner.
+ */
+export declare const EditingProvider: FC<{
+    children: React.ReactNode;
+}>;
+export declare const useEditing: () => {
+    editing: boolean;
+    setEditing: (editing: boolean) => void;
+};
+//# sourceMappingURL=EditingProvider.d.ts.map

package/dist/uiComponents/colorPicker/components/EditingProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditingProvider.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/colorPicker/components/EditingProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,OAAO,CAAA;AAC7B,OAAO,KAA4C,MAAM,OAAO,CAAA;AAOhE;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAe3D,CAAA;AAED,eAAO,MAAM,UAAU;aA1BZ,OAAO;0BACM,OAAO,KAAK,IAAI;CAyBkB,CAAA"}

package/dist/uiComponents/colorPicker/components/EditingProvider.js

@@ -0,0 +1,15 @@
+import React, { createContext, useContext, useState } from 'react';
+const editingContext = createContext(undefined);
+/**
+ * Provides the current mode the color picker is in. When editing, the picker should be
+ * stateful and disregard controlling props, while not editing, it should behave
+ * in a controlled manner.
+ */
+export const EditingProvider = ({ children, }) => {
+    const [editing, setEditing] = useState(false);
+    return (React.createElement(editingContext.Provider, { value: {
+            editing,
+            setEditing,
+        } }, children));
+};
+export const useEditing = () => useContext(editingContext);

package/dist/uiComponents/colorPicker/components/RgbaColorPicker.d.ts

@@ -0,0 +1,3 @@
+import type { ColorPickerBaseProps, RgbaColor } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/types';
+export declare const RgbaColorPicker: (props: ColorPickerBaseProps<RgbaColor>) => JSX.Element;
+//# sourceMappingURL=RgbaColorPicker.d.ts.map

package/dist/uiComponents/colorPicker/components/RgbaColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RgbaColorPicker.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/colorPicker/components/RgbaColorPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,oBAAoB,EAEpB,SAAS,EACV,MAAM,gEAAgE,CAAA;AAiCvE,eAAO,MAAM,eAAe,UACnB,qBAAqB,SAAS,CAAC,KACrC,WAUF,CAAA"}

package/dist/uiComponents/colorPicker/components/RgbaColorPicker.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { AlphaColorPicker } from './common/AlphaColorPicker';
+import { equalColorObjects } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/compare';
+import { rgbaToHsva, hsvaToRgba, } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/convert';
+import { EditingProvider } from './EditingProvider';
+const normalizeRgba = (rgba) => {
+    return {
+        r: rgba.r / 255,
+        g: rgba.g / 255,
+        b: rgba.b / 255,
+        a: rgba.a,
+    };
+};
+const denormalizeRgba = (rgba) => {
+    return {
+        r: rgba.r * 255,
+        g: rgba.g * 255,
+        b: rgba.b * 255,
+        a: rgba.a,
+    };
+};
+const colorModel = {
+    defaultColor: { r: 0, g: 0, b: 0, a: 1 },
+    toHsva: (rgba) => rgbaToHsva(denormalizeRgba(rgba)),
+    fromHsva: (hsva) => normalizeRgba(hsvaToRgba(hsva)),
+    equal: equalColorObjects,
+};
+export const RgbaColorPicker = (props) => (React.createElement(EditingProvider, null,
+    React.createElement(AlphaColorPicker, { ...props, permanentlySetValue: (newColor) => {
+            props.permanentlySetValue(newColor);
+        }, colorModel: colorModel })));

package/dist/uiComponents/colorPicker/components/common/Alpha.d.ts

@@ -0,0 +1,11 @@
+import type { HsvaColor } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/types';
+interface Props {
+    className?: string;
+    hsva: HsvaColor;
+    onChange: (newAlpha: {
+        a: number;
+    }) => void;
+}
+export declare const Alpha: ({ className, hsva, onChange }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=Alpha.d.ts.map

package/dist/uiComponents/colorPicker/components/common/Alpha.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alpha.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/uiComponents/colorPicker/components/common/Alpha.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gEAAgE,CAAA;AAyC7F,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,CAAC,QAAQ,EAAE;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAA;CAC1C;AAED,eAAO,MAAM,KAAK,kCAAiC,KAAK,KAAG,WA4B1D,CAAA"}