@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/uiComponents/colorPicker/components/common/Alpha.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Interactive } from './Interactive';
+import { Pointer } from './Pointer';
+import { hsvaToHslaString } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/convert';
+import { clamp } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/clamp';
+import { round } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/round';
+import styled from 'styled-components';
+const Container = styled.div `
+  position: relative;
+  height: 16px;
+  border-radius: 2px;
+  // Checkerboard
+  background-color: #fff;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+`;
+const Gradient = styled.div.attrs(({ colorFrom, colorTo }) => ({
+    style: {
+        backgroundImage: `linear-gradient(90deg, ${colorFrom}, ${colorTo})`,
+    },
+})) `
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  border-radius: inherit;
+
+  // Improve rendering on light backgrounds
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+`;
+const StyledPointer = styled(Pointer) `
+  // Checkerboard
+  background-color: #fff;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+`;
+export const Alpha = ({ className, hsva, onChange }) => {
+    const handleMove = (interaction) => {
+        onChange({ a: interaction.left });
+    };
+    const handleKey = (offset) => {
+        // Alpha always fit into [0, 1] range
+        onChange({ a: clamp(hsva.a + offset.left) });
+    };
+    // We use `Object.assign` instead of the spread operator
+    // to prevent adding the polyfill (about 150 bytes gzipped)
+    const colorFrom = hsvaToHslaString(Object.assign({}, hsva, { a: 0 }));
+    const colorTo = hsvaToHslaString(Object.assign({}, hsva, { a: 1 }));
+    return (React.createElement(Container, { className: className },
+        React.createElement(Gradient, { colorFrom: colorFrom, colorTo: colorTo }),
+        React.createElement(Interactive, { onMove: handleMove, onKey: handleKey, "aria-label": "Alpha", "aria-valuetext": `${round(hsva.a * 100)}%` },
+            React.createElement(StyledPointer, { left: hsva.a, color: hsvaToHslaString(hsva) }))));
+};

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

@@ -0,0 +1,7 @@
+import type { ColorModel, ColorPickerBaseProps, AnyColor } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/types';
+interface Props<T extends AnyColor> extends ColorPickerBaseProps<T> {
+    colorModel: ColorModel<T>;
+}
+export declare const AlphaColorPicker: <T extends AnyColor>({ className, colorModel, color, temporarilySetValue, permanentlySetValue, discardTemporaryValue, ...rest }: Props<T>) => JSX.Element;
+export {};
+//# sourceMappingURL=AlphaColorPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaColorPicker.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/uiComponents/colorPicker/components/common/AlphaColorPicker.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,UAAU,EACV,oBAAoB,EACpB,QAAQ,EACT,MAAM,gEAAgE,CAAA;AAevE,UAAU,KAAK,CAAC,CAAC,SAAS,QAAQ,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IACjE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;CAC1B;AAED,eAAO,MAAM,gBAAgB,gJAQf,WAqBb,CAAA"}

package/dist/uiComponents/colorPicker/components/common/AlphaColorPicker.js

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { Hue } from './Hue';
+import { Saturation } from './Saturation';
+import { Alpha } from './Alpha';
+import { useColorManipulation } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/hooks/useColorManipulation';
+import styled from 'styled-components';
+const Container = styled.div `
+  position: relative;
+  display: flex;
+  gap: 4px;
+  flex-direction: column;
+  width: 200px;
+  height: 200px;
+  user-select: none;
+  cursor: default;
+`;
+export const AlphaColorPicker = ({ className, colorModel, color = colorModel.defaultColor, temporarilySetValue, permanentlySetValue, discardTemporaryValue, ...rest }) => {
+    const [tempHsva, updateHsva] = useColorManipulation(colorModel, color, temporarilySetValue, permanentlySetValue);
+    useEffect(() => {
+        return () => {
+            discardTemporaryValue();
+        };
+    }, []);
+    return (React.createElement(Container, { ...rest },
+        React.createElement(Saturation, { hsva: tempHsva, onChange: updateHsva }),
+        React.createElement(Hue, { hue: tempHsva.h, onChange: updateHsva }),
+        React.createElement(Alpha, { hsva: tempHsva, onChange: updateHsva })));
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    className?: string;
+    hue: number;
+    onChange: (newHue: {
+        h: number;
+    }) => void;
+}
+export declare const Hue: React.MemoExoticComponent<({ className, hue, onChange }: Props) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=Hue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hue.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/uiComponents/colorPicker/components/common/Hue.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgCzB,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAA;CACxC;AA+BD,eAAO,MAAM,GAAG,2DA7B6B,KAAK,uBA6BZ,CAAA"}

package/dist/uiComponents/colorPicker/components/common/Hue.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Interactive } from './Interactive';
+import { Pointer } from './Pointer';
+import { hsvaToHslString } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/convert';
+import { clamp } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/clamp';
+import { round } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/round';
+import styled from 'styled-components';
+const Container = styled.div `
+  position: relative;
+  height: 16px;
+  border-radius: 2px;
+
+  background: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+`;
+const StyledPointer = styled(Pointer) `
+  z-index: 2;
+`;
+const HueBase = ({ className, hue, onChange }) => {
+    const handleMove = (interaction) => {
+        onChange({ h: 360 * interaction.left });
+    };
+    const handleKey = (offset) => {
+        // Hue measured in degrees of the color circle ranging from 0 to 360
+        onChange({
+            h: clamp(hue + offset.left * 360, 0, 360),
+        });
+    };
+    return (React.createElement(Container, { className: className },
+        React.createElement(Interactive, { onMove: handleMove, onKey: handleKey, "aria-label": "Hue", "aria-valuetext": round(hue) },
+            React.createElement(StyledPointer, { left: hue / 360, color: hsvaToHslString({ h: hue, s: 100, v: 100, a: 1 }) }))));
+};
+export const Hue = React.memo(HueBase);

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface Interaction {
+    left: number;
+    top: number;
+}
+interface Props {
+    onMove: (interaction: Interaction) => void;
+    onKey: (offset: Interaction) => void;
+    children: React.ReactNode;
+}
+export declare const Interactive: React.MemoExoticComponent<({ onMove, onKey, ...rest }: Props) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=Interactive.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Interactive.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/uiComponents/colorPicker/components/common/Interactive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAA;AAOvD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ;AA4DD,UAAU,KAAK;IACb,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IAC1C,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAgID,eAAO,MAAM,WAAW,yDAlH2B,KAAK,uBAkHF,CAAA"}

package/dist/uiComponents/colorPicker/components/common/Interactive.js

@@ -0,0 +1,142 @@
+import React, { useRef, useMemo, useEffect } from 'react';
+import { useEventCallback } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/hooks/useEventCallback';
+import { clamp } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/clamp';
+import styled from 'styled-components';
+import { useEditing } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/components/EditingProvider';
+// Check if an event was triggered by touch
+const isTouch = (event) => 'touches' in event;
+// Finds a proper touch point by its identifier
+const getTouchPoint = (touches, touchId) => {
+    for (let i = 0; i < touches.length; i++) {
+        if (touches[i].identifier === touchId)
+            return touches[i];
+    }
+    return touches[0];
+};
+// Finds the proper window object to fix iframe embedding issues
+const getParentWindow = (node) => {
+    return (node && node.ownerDocument.defaultView) || self;
+};
+// Returns a relative position of the pointer inside the node's bounding box
+const getRelativePosition = (node, event, touchId) => {
+    const rect = node.getBoundingClientRect();
+    // Get user's pointer position from `touches` array if it's a `TouchEvent`
+    const pointer = isTouch(event)
+        ? getTouchPoint(event.touches, touchId)
+        : event;
+    return {
+        left: clamp((pointer.pageX - (rect.left + getParentWindow(node).pageXOffset)) /
+            rect.width),
+        top: clamp((pointer.pageY - (rect.top + getParentWindow(node).pageYOffset)) /
+            rect.height),
+    };
+};
+// Browsers introduced an intervention, making touch events passive by default.
+// This workaround removes `preventDefault` call from the touch handlers.
+// https://github.com/facebook/react/issues/19651
+const preventDefaultMove = (event) => {
+    !isTouch(event) && event.preventDefault();
+};
+// Prevent mobile browsers from handling mouse events (conflicting with touch ones).
+// If we detected a touch interaction before, we prefer reacting to touch events only.
+const isInvalid = (event, hasTouch) => {
+    return hasTouch && !isTouch(event);
+};
+const Container = styled.div `
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  outline: none;
+  /* Don't trigger the default scrolling behavior when the event is originating from this element */
+  touch-action: none;
+`;
+const InteractiveBase = ({ onMove, onKey, ...rest }) => {
+    const container = useRef(null);
+    const onMoveCallback = useEventCallback(onMove);
+    const onKeyCallback = useEventCallback(onKey);
+    const touchId = useRef(null);
+    const hasTouch = useRef(false);
+    const { setEditing } = useEditing();
+    const [handleMoveStart, handleKeyDown, toggleDocumentEvents] = useMemo(() => {
+        const handleMoveStart = ({ nativeEvent, }) => {
+            const el = container.current;
+            if (!el)
+                return;
+            // Prevent text selection
+            preventDefaultMove(nativeEvent);
+            if (isInvalid(nativeEvent, hasTouch.current) || !el)
+                return;
+            if (isTouch(nativeEvent)) {
+                hasTouch.current = true;
+                const changedTouches = nativeEvent.changedTouches || [];
+                if (changedTouches.length)
+                    touchId.current = changedTouches[0].identifier;
+            }
+            el.focus();
+            setEditing(true);
+            onMoveCallback(getRelativePosition(el, nativeEvent, touchId.current));
+            toggleDocumentEvents(true);
+        };
+        const handleMove = (event) => {
+            // Prevent text selection
+            preventDefaultMove(event);
+            // If user moves the pointer outside the window or iframe bounds and release it there,
+            // `mouseup`/`touchend` won't be fired. In order to stop the picker from following the cursor
+            // after the user has moved the mouse/finger back to the document, we check `event.buttons`
+            // and `event.touches`. It allows us to detect that the user is just moving his pointer
+            // without pressing it down
+            // Note: we should use pointer events to fix this, since we don't have strict compatibility
+            // requirements.
+            const isDown = isTouch(event)
+                ? event.touches.length > 0
+                : event.buttons > 0;
+            if (isDown && container.current) {
+                onMoveCallback(getRelativePosition(container.current, event, touchId.current));
+            }
+            else {
+                setEditing(false);
+                toggleDocumentEvents(false);
+            }
+        };
+        // Use move-end anyway (see above) so we can terminate early if we receive one
+        // instead of having to wait for the user to move the mouse, which they might not do.
+        const handleMoveEnd = (event) => {
+            setEditing(false);
+            toggleDocumentEvents(false);
+        };
+        const handleKeyDown = (event) => {
+            const keyCode = event.which || event.keyCode;
+            // Ignore all keys except arrow ones
+            if (keyCode < 37 || keyCode > 40)
+                return;
+            // Do not scroll page by arrow keys when document is focused on the element
+            event.preventDefault();
+            // Send relative offset to the parent component.
+            // We use codes (37←, 38↑, 39→, 40↓) instead of keys ('ArrowRight', 'ArrowDown', etc)
+            // to reduce the size of the library
+            onKeyCallback({
+                left: keyCode === 39 ? 0.05 : keyCode === 37 ? -0.05 : 0,
+                top: keyCode === 40 ? 0.05 : keyCode === 38 ? -0.05 : 0,
+            });
+        };
+        function toggleDocumentEvents(state) {
+            const touch = hasTouch.current;
+            const el = container.current;
+            const parentWindow = getParentWindow(el);
+            // Add or remove additional pointer event listeners
+            const toggleEvent = state
+                ? parentWindow.addEventListener
+                : parentWindow.removeEventListener;
+            toggleEvent(touch ? 'touchmove' : 'mousemove', handleMove);
+            toggleEvent(touch ? 'touchend' : 'mouseup', handleMoveEnd);
+        }
+        return [handleMoveStart, handleKeyDown, toggleDocumentEvents];
+    }, [onKeyCallback, onMoveCallback]);
+    // Remove window event listeners before unmounting
+    useEffect(() => toggleDocumentEvents, [toggleDocumentEvents]);
+    return (React.createElement(Container, { ...rest, onTouchStart: handleMoveStart, onMouseDown: handleMoveStart, ref: container, onKeyDown: handleKeyDown, tabIndex: 0, role: "slider" }));
+};
+export const Interactive = React.memo(InteractiveBase);

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface Props {
+    className?: string;
+    top?: number;
+    left: number;
+    color: string;
+}
+export declare const Pointer: ({ className, color, left, top, }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=Pointer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pointer.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/uiComponents/colorPicker/components/common/Pointer.tsx"],"names":[],"mappings":";AAmCA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,OAAO,qCAKjB,KAAK,KAAG,WAWV,CAAA"}

package/dist/uiComponents/colorPicker/components/common/Pointer.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Interactive } from './Interactive';
+// Create an "empty" styled version, so we can reference it for contextual styling
+const StyledInteractive = styled(Interactive) ``;
+const Container = styled.div `
+  position: absolute;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  border: 1px solid #ffffff00;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+  ${StyledInteractive}:focus & {
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+`;
+const Fill = styled.div `
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  border-radius: inherit;
+`;
+export const Pointer = ({ className, color, left, top = 0.5, }) => {
+    const style = {
+        top: `${top * 100}%`,
+        left: `${left * 100}%`,
+    };
+    return (React.createElement(Container, { style: style, className: className },
+        React.createElement(Fill, { style: { backgroundColor: color } })));
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { HsvaColor } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/types';
+interface Props {
+    hsva: HsvaColor;
+    onChange: (newColor: {
+        s: number;
+        v: number;
+    }) => void;
+}
+export declare const Saturation: React.MemoExoticComponent<({ hsva, onChange }: Props) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=Saturation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Saturation.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/uiComponents/colorPicker/components/common/Saturation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gEAAgE,CAAA;AAuB7F,UAAU,KAAK;IACb,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,CAAC,QAAQ,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAA;CACrD;AA0CD,eAAO,MAAM,UAAU,iDAxCmB,KAAK,uBAwCK,CAAA"}

package/dist/uiComponents/colorPicker/components/common/Saturation.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Interactive } from './Interactive';
+import { Pointer } from './Pointer';
+import { hsvaToHslString } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/convert';
+import { clamp } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/clamp';
+import { round } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/round';
+import styled from 'styled-components';
+const Container = styled.div `
+  position: relative;
+  flex-grow: 1;
+  border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */
+  border-bottom: 12px solid #000;
+  border-radius: 2px;
+  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
+    linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+
+  // Improve elements rendering on light backgrounds
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+`;
+const StyledPointer = styled(Pointer) `
+  z-index: 3;
+`;
+const SaturationBase = ({ hsva, onChange }) => {
+    const handleMove = (interaction) => {
+        onChange({
+            s: interaction.left * 100,
+            v: 100 - interaction.top * 100,
+        });
+    };
+    const handleKey = (offset) => {
+        // Saturation and brightness always fit into [0, 100] range
+        onChange({
+            s: clamp(hsva.s + offset.left * 100, 0, 100),
+            v: clamp(hsva.v - offset.top * 100, 0, 100),
+        });
+    };
+    const containerStyle = {
+        backgroundColor: hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 }),
+    };
+    return (React.createElement(Container, { style: containerStyle },
+        React.createElement(Interactive, { onMove: handleMove, onKey: handleKey, "aria-label": "Color", "aria-valuetext": `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%` },
+            React.createElement(StyledPointer, { top: 1 - hsva.v / 100, left: hsva.s / 100, color: hsvaToHslString(hsva) }))));
+};
+export const Saturation = React.memo(SaturationBase);

package/dist/uiComponents/colorPicker/hooks/useColorManipulation.d.ts

@@ -0,0 +1,3 @@
+import type { ColorModel, AnyColor, HsvaColor } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/types';
+export declare function useColorManipulation<T extends AnyColor>(colorModel: ColorModel<T>, color: T, onTemporarilyChange: (color: T) => void, onPermanentlyChange: (color: T) => void): [HsvaColor, (color: Partial<HsvaColor>) => void];
+//# sourceMappingURL=useColorManipulation.d.ts.map

package/dist/uiComponents/colorPicker/hooks/useColorManipulation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorManipulation.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/colorPicker/hooks/useColorManipulation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,UAAU,EACV,QAAQ,EACR,SAAS,EACV,MAAM,gEAAgE,CAAA;AAKvE,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,QAAQ,EACrD,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,EACzB,KAAK,EAAE,CAAC,EACR,mBAAmB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EACvC,mBAAmB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GACtC,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,CAuFlD"}

package/dist/uiComponents/colorPicker/hooks/useColorManipulation.js

@@ -0,0 +1,77 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { equalColorObjects } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/utils/compare';
+import { useEventCallback } from './useEventCallback';
+import { useEditing } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/components/EditingProvider';
+export function useColorManipulation(colorModel, color, onTemporarilyChange, onPermanentlyChange) {
+    const { editing } = useEditing();
+    const [editingValue, setEditingValue] = useState(color);
+    // Save onChange callbacks in refs for to avoid unnecessarily updating when parent doesn't use useCallback
+    const onTemporarilyChangeCallback = useEventCallback(onTemporarilyChange);
+    const onPermanentlyChangeCallback = useEventCallback(onPermanentlyChange);
+    // If editing, be uncontrolled, if not editing, be controlled
+    let value = editing ? editingValue : color;
+    // No matter which color model is used (HEX, RGB(A) or HSL(A)),
+    // all internal calculations are in HSVA
+    const [hsva, updateHsva] = useState(() => colorModel.toHsva(value));
+    // Use refs to prevent infinite update loops. They basically serve as a more
+    // explicit hack around the rigidity of React hooks' dep lists, since we want
+    // to do all color equality checks in HSVA, without breaking the roles of hooks.
+    // We use separate refs for temporary updates and permanent updates,
+    // since they are two independent update models.
+    const tempCache = useRef({ color: value, hsva });
+    const permCache = useRef({ color: value, hsva });
+    // When entering editing mode, set the internal state of the uncontrolled mode
+    // to the last value of the controlled mode.
+    useEffect(() => {
+        if (editing) {
+            setEditingValue(tempCache.current.color);
+        }
+    }, [editing]);
+    // Trigger `on*Change` callbacks only if an updated color is different from
+    // the  cached one; save the new color to the ref to prevent unnecessary updates.
+    useEffect(() => {
+        let newColor = colorModel.fromHsva(hsva);
+        if (editing) {
+            if (!equalColorObjects(hsva, tempCache.current.hsva) &&
+                !colorModel.equal(newColor, tempCache.current.color)) {
+                tempCache.current = { hsva, color: newColor };
+                setEditingValue(newColor);
+                onTemporarilyChangeCallback(newColor);
+            }
+        }
+        else {
+            if (!equalColorObjects(hsva, permCache.current.hsva) &&
+                !colorModel.equal(newColor, permCache.current.color)) {
+                permCache.current = { hsva, color: newColor };
+                tempCache.current = { hsva, color: newColor };
+                onPermanentlyChangeCallback(newColor);
+            }
+        }
+    }, [
+        editing,
+        hsva,
+        colorModel,
+        onTemporarilyChangeCallback,
+        onPermanentlyChangeCallback,
+    ]);
+    // This has to come after the callback calling effect, so that the cache isn't
+    // updated before the above effect checks for equality, otherwise no updates would
+    // be issued.
+    // Note: it doesn't make sense to have an editing version of this effect because
+    // the callback calling effect already updates the caches.
+    useEffect(() => {
+        if (!editing) {
+            if (!colorModel.equal(value, permCache.current.color)) {
+                const newHsva = colorModel.toHsva(value);
+                permCache.current = { hsva: newHsva, color: value };
+                updateHsva(newHsva);
+            }
+        }
+    }, [editing, value, colorModel]);
+    // Merge the current HSVA color object with updated params.
+    // For example, when a child component sends `h` or `s` only
+    const handleChange = useCallback((params) => {
+        updateHsva((current) => Object.assign({}, current, params));
+    }, []);
+    return [hsva, handleChange];
+}

package/dist/uiComponents/colorPicker/hooks/useEventCallback.d.ts

@@ -0,0 +1,2 @@
+export declare function useEventCallback<T>(handler?: (value: T) => void): (value: T) => void;
+//# sourceMappingURL=useEventCallback.d.ts.map

package/dist/uiComponents/colorPicker/hooks/useEventCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventCallback.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/colorPicker/hooks/useEventCallback.ts"],"names":[],"mappings":"AAGA,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAC3B,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAQpB"}

package/dist/uiComponents/colorPicker/hooks/useEventCallback.js

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+// Saves incoming handler to the ref in order to avoid "useCallback hell"
+export function useEventCallback(handler) {
+    const callbackRef = useRef(handler);
+    const fn = useRef((value) => {
+        callbackRef.current && callbackRef.current(value);
+    });
+    callbackRef.current = handler;
+    return fn.current;
+}

package/dist/uiComponents/colorPicker/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+//# sourceMappingURL=useIsomorphicLayoutEffect.d.ts.map

package/dist/uiComponents/colorPicker/hooks/useIsomorphicLayoutEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/colorPicker/hooks/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAC,MAAM,OAAO,CAAA;AAKhD,eAAO,MAAM,yBAAyB,kBACuB,CAAA"}

package/dist/uiComponents/colorPicker/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,5 @@
+import { useLayoutEffect, useEffect } from 'react';
+// React currently throws a warning when using useLayoutEffect on the server.
+// To get around it, we can conditionally useEffect on the server (no-op) and
+// useLayoutEffect in the browser.
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/uiComponents/colorPicker/index.d.ts

@@ -0,0 +1,3 @@
+export { RgbaColorPicker } from './components/RgbaColorPicker';
+export type { RgbColor, RgbaColor, HslColor, HslaColor, HsvColor, HsvaColor, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/uiComponents/colorPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/colorPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAA;AAG5D,YAAY,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,GACV,MAAM,SAAS,CAAA"}

package/dist/uiComponents/colorPicker/index.js

@@ -0,0 +1 @@
+export { RgbaColorPicker } from './components/RgbaColorPicker';

package/dist/uiComponents/colorPicker/types.d.ts

@@ -0,0 +1,47 @@
+import type React from 'react';
+export interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface RgbaColor extends RgbColor {
+    a: number;
+}
+export interface HslColor {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface HslaColor extends HslColor {
+    a: number;
+}
+export interface HsvColor {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface HsvaColor extends HsvColor {
+    a: number;
+}
+export type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
+export type AnyColor = string | ObjectColor;
+export interface ColorModel<T extends AnyColor> {
+    defaultColor: T;
+    toHsva: (defaultColor: T) => HsvaColor;
+    fromHsva: (hsva: HsvaColor) => T;
+    equal: (first: T, second: T) => boolean;
+}
+type ColorPickerHTMLAttributes = Partial<Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange' | 'onChangeCapture'>>;
+export interface ColorPickerBaseProps<T extends AnyColor> extends ColorPickerHTMLAttributes {
+    color: T;
+    temporarilySetValue: (newColor: T) => void;
+    permanentlySetValue: (newColor: T) => void;
+    discardTemporaryValue: () => void;
+}
+type ColorInputHTMLAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>;
+export interface ColorInputBaseProps extends ColorInputHTMLAttributes {
+    color?: string;
+    onChange?: (newColor: string) => void;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/uiComponents/colorPicker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/colorPicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAE3C,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,QAAQ;IAC5C,YAAY,EAAE,CAAC,CAAA;IACf,MAAM,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,SAAS,CAAA;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,CAAC,CAAA;IAChC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,OAAO,CAAA;CACxC;AAED,KAAK,yBAAyB,GAAG,OAAO,CACtC,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,OAAO,GAAG,UAAU,GAAG,iBAAiB,CACzC,CACF,CAAA;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,QAAQ,CACtD,SAAQ,yBAAyB;IACjC,KAAK,EAAE,CAAC,CAAA;IACR,mBAAmB,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAA;IAC1C,mBAAmB,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAA;IAC1C,qBAAqB,EAAE,MAAM,IAAI,CAAA;CAClC;AAED,KAAK,wBAAwB,GAAG,IAAI,CAClC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,OAAO,CACrB,CAAA;AAED,MAAM,WAAW,mBAAoB,SAAQ,wBAAwB;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC"}

package/dist/uiComponents/colorPicker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/uiComponents/colorPicker/utils/clamp.d.ts

@@ -0,0 +1,2 @@
+export declare const clamp: (number: number, min?: number, max?: number) => number;
+//# sourceMappingURL=clamp.d.ts.map

package/dist/uiComponents/colorPicker/utils/clamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/colorPicker/utils/clamp.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,WAAY,MAAM,iCAAqB,MAExD,CAAA"}

package/dist/uiComponents/colorPicker/utils/clamp.js

@@ -0,0 +1,6 @@
+// Clamps a value between an upper and lower bound.
+// We use ternary operators because it makes the minified code
+// 2 times shorter then `Math.min(Math.max(a,b),c)`
+export const clamp = (number, min = 0, max = 1) => {
+    return number > max ? max : number < min ? min : number;
+};