@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/propEditors/simpleEditors/FilePropEditor.js

@@ -1,118 +0,0 @@
-import { Package, Trash } from '@tomorrowevening/theatre-studio/uiComponents/icons';
-import React, { useCallback, useEffect } from 'react';
-import styled, { css } from 'styled-components';
-const Container = styled.div `
-  display: flex;
-  align-items: center;
-  height: 100%;
-  gap: 4px;
-`;
-const AddFile = styled.div `
-  position: absolute;
-  inset: -5px;
-  // rotate 45deg
-  transform: rotate(45deg);
-  --checker-color: #ededed36;
-  &:hover {
-    --checker-color: #ededed77;
-  }
-  // checkerboard background with 4px squares
-  background-image: linear-gradient(
-      45deg,
-      var(--checker-color) 25%,
-      transparent 25%
-    ),
-    linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
-    linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%);
-  background-size: 5px 5px;
-`;
-const InputLabel = styled.label `
-  position: relative;
-  cursor: default;
-  box-sizing: border-box;
-
-  height: 18px;
-  aspect-ratio: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 16px;
-
-  overflow: hidden;
-  color: #ccc;
-  &:hover {
-    color: white;
-  }
-
-  border-radius: 99999px;
-  border: 1px solid hwb(220deg 40% 52%);
-  &:hover {
-    border-color: hwb(220deg 45% 52%);
-  }
-
-  ${(props) => (props.empty ? css `` : css ``)}
-`;
-// file input
-const Input = styled.input.attrs({ type: 'file' }) `
-  display: none;
-`;
-const DeleteButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-  background: transparent;
-  color: #a8a8a9;
-
-  border: none;
-  height: 100%;
-  aspect-ratio: 1/1;
-
-  opacity: 0;
-
-  ${Container}:hover & {
-    opacity: 0.8;
-  }
-
-  &:hover {
-    opacity: 1;
-    color: white;
-  }
-`;
-function FilePropEditor({ propConfig, editingTools, value, autoFocus, }) {
-    const [previewUrl, setPreviewUrl] = React.useState();
-    useEffect(() => {
-        if (value) {
-            setPreviewUrl(editingTools.getAssetUrl(value));
-        }
-        else {
-            setPreviewUrl(undefined);
-        }
-    }, [value]);
-    const onChange = useCallback(async (event) => {
-        const file = event.target.files[0];
-        editingTools.permanentlySetValue({ type: 'file', id: undefined });
-        const fileId = await editingTools.createAsset(file);
-        if (!fileId) {
-            editingTools.permanentlySetValue(value);
-        }
-        else {
-            editingTools.permanentlySetValue({
-                type: 'file',
-                id: fileId,
-            });
-        }
-        event.target.value = null;
-    }, [editingTools, value]);
-    const empty = !value?.id;
-    return (React.createElement(Container, { empty: empty },
-        React.createElement(InputLabel, { empty: empty, title: empty ? 'Upload file' : `"${value.id}" (Click to upload new file)` },
-            React.createElement(Input, { type: "file", onChange: onChange, autoFocus: autoFocus }),
-            previewUrl ? React.createElement(Package, null) : React.createElement(AddFile, null)),
-        !empty && (React.createElement(DeleteButton, { title: "Delete file", onClick: () => {
-                editingTools.permanentlySetValue({ type: 'file', id: undefined });
-            } },
-            React.createElement(Trash, null)))));
-}
-export default FilePropEditor;

package/dist/propEditors/simpleEditors/ISimplePropEditorReactProps.js

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

package/dist/propEditors/simpleEditors/ImagePropEditor.js

@@ -1,126 +0,0 @@
-import { Trash } from '@tomorrowevening/theatre-studio/uiComponents/icons';
-import React, { useCallback, useEffect } from 'react';
-import styled, { css } from 'styled-components';
-const Container = styled.div `
-  display: flex;
-  align-items: center;
-  height: 100%;
-  gap: 4px;
-`;
-const AddImage = styled.div `
-  position: absolute;
-  inset: -5px;
-  // rotate 45deg
-  transform: rotate(45deg);
-  --checker-color: #ededed36;
-  &:hover {
-    --checker-color: #ededed77;
-  }
-  // checkerboard background with 4px squares
-  background-image: linear-gradient(
-      45deg,
-      var(--checker-color) 25%,
-      transparent 25%
-    ),
-    linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
-    linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%);
-  background-size: 5px 5px;
-`;
-const InputLabel = styled.label `
-  position: relative;
-  cursor: default;
-  box-sizing: border-box;
-
-  height: 18px;
-  aspect-ratio: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 16px;
-
-  overflow: hidden;
-  color: #ccc;
-  &:hover {
-    color: white;
-  }
-
-  border-radius: 99999px;
-  border: 1px solid hwb(220deg 40% 52%);
-  &:hover {
-    border-color: hwb(220deg 45% 52%);
-  }
-
-  ${(props) => (props.empty ? css `` : css ``)}
-`;
-// file input
-const Input = styled.input.attrs({ type: 'file' }) `
-  display: none;
-`;
-const Preview = styled.img `
-  position: absolute;
-  inset: 0;
-  height: 100%;
-  aspect-ratio: 1;
-
-  object-fit: cover;
-`;
-const DeleteButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-  background: transparent;
-  color: #a8a8a9;
-
-  border: none;
-  height: 100%;
-  aspect-ratio: 1/1;
-
-  opacity: 0;
-
-  ${Container}:hover & {
-    opacity: 0.8;
-  }
-
-  &:hover {
-    opacity: 1;
-    color: white;
-  }
-`;
-function ImagePropEditor({ propConfig, editingTools, value, autoFocus, }) {
-    const [previewUrl, setPreviewUrl] = React.useState();
-    useEffect(() => {
-        if (value) {
-            setPreviewUrl(editingTools.getAssetUrl(value));
-        }
-        else {
-            setPreviewUrl(undefined);
-        }
-    }, [value]);
-    const onChange = useCallback(async (event) => {
-        const file = event.target.files[0];
-        editingTools.permanentlySetValue({ type: 'image', id: undefined });
-        const imageId = await editingTools.createAsset(file);
-        if (!imageId) {
-            editingTools.permanentlySetValue(value);
-        }
-        else {
-            editingTools.permanentlySetValue({
-                type: 'image',
-                id: imageId,
-            });
-        }
-        event.target.value = null;
-    }, [editingTools, value]);
-    const empty = !value?.id;
-    return (React.createElement(Container, { empty: empty },
-        React.createElement(InputLabel, { empty: empty, title: empty ? 'Upload image' : `"${value.id}" (Click to upload new image)` },
-            React.createElement(Input, { type: "file", onChange: onChange, accept: "image/*,.hdr", autoFocus: autoFocus }),
-            previewUrl ? React.createElement(Preview, { src: previewUrl }) : React.createElement(AddImage, null)),
-        !empty && (React.createElement(DeleteButton, { title: "Delete image", onClick: () => {
-                editingTools.permanentlySetValue({ type: 'image', id: undefined });
-            } },
-            React.createElement(Trash, null)))));
-}
-export default ImagePropEditor;

package/dist/propEditors/simpleEditors/NumberPropEditor.js

@@ -1,9 +0,0 @@
-import BasicNumberInput from '@tomorrowevening/theatre-studio/uiComponents/form/BasicNumberInput';
-import React, { useCallback } from 'react';
-function NumberPropEditor({ propConfig, editingTools, value, autoFocus, }) {
-    const nudge = useCallback((params) => {
-        return propConfig.nudgeFn({ ...params, config: propConfig });
-    }, [propConfig]);
-    return (React.createElement(BasicNumberInput, { value: value, temporarilySetValue: editingTools.temporarilySetValue, discardTemporaryValue: editingTools.discardTemporaryValue, permanentlySetValue: editingTools.permanentlySetValue, range: propConfig.range, nudge: nudge, autoFocus: autoFocus }));
-}
-export default NumberPropEditor;

package/dist/propEditors/simpleEditors/RgbaPropEditor.js

@@ -1,73 +0,0 @@
-import { validHexRegExp } from '@tomorrowevening/theatre-shared/utils/color';
-import { decorateRgba, rgba2hex, parseRgbaFromHex, } from '@tomorrowevening/theatre-shared/utils/color';
-import React, { useCallback, useRef } from 'react';
-import { RgbaColorPicker } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker';
-import styled from 'styled-components';
-import usePopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/usePopover';
-import BasicStringInput from '@tomorrowevening/theatre-studio/uiComponents/form/BasicStringInput';
-import { popoverBackgroundColor } from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicPopover';
-const RowContainer = styled.div `
-  display: flex;
-  align-items: center;
-  height: 100%;
-  gap: 4px;
-`;
-const ColorPreviewPuck = styled.div.attrs((props) => ({
-    style: {
-        // weirdly, rgba2hex is needed to ensure initial render was correct background?
-        // huge head scratcher.
-        background: rgba2hex(props.rgbaColor),
-    },
-})) `
-  height: 18px;
-  aspect-ratio: 1;
-  border-radius: 99999px;
-`;
-const HexInput = styled(BasicStringInput) `
-  flex: 1;
-`;
-const noop = () => { };
-const RgbaPopover = styled.div `
-  position: absolute;
-  background-color: ${popoverBackgroundColor};
-  color: white;
-  margin: 0;
-  cursor: default;
-  border-radius: 3px;
-  z-index: 10000;
-  backdrop-filter: blur(8px);
-
-  padding: 4px;
-  pointer-events: all;
-
-  border: none;
-  box-shadow: none;
-`;
-function RgbaPropEditor({ editingTools, value, autoFocus, }) {
-    const containerRef = useRef(null);
-    const onChange = useCallback((color) => {
-        const rgba = decorateRgba(parseRgbaFromHex(color));
-        editingTools.permanentlySetValue(rgba);
-    }, [editingTools]);
-    const popover = usePopover({ debugName: 'RgbaPropEditor' }, () => (React.createElement(RgbaPopover, null,
-        React.createElement(RgbaColorPicker, { color: {
-                r: value.r,
-                g: value.g,
-                b: value.b,
-                a: value.a,
-            }, temporarilySetValue: (color) => {
-                const rgba = decorateRgba(color);
-                editingTools.temporarilySetValue(rgba);
-            }, permanentlySetValue: (color) => {
-                const rgba = decorateRgba(color);
-                editingTools.permanentlySetValue(rgba);
-            }, discardTemporaryValue: editingTools.discardTemporaryValue }))));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(RowContainer, null,
-            React.createElement(ColorPreviewPuck, { rgbaColor: value, ref: containerRef, onClick: (e) => {
-                    popover.toggle(e, containerRef.current);
-                } }),
-            React.createElement(HexInput, { value: rgba2hex(value, { removeAlphaIfOpaque: true }), temporarilySetValue: noop, discardTemporaryValue: noop, permanentlySetValue: onChange, isValid: (v) => !!v.match(validHexRegExp), autoFocus: autoFocus })),
-        popover.node));
-}
-export default RgbaPropEditor;

package/dist/propEditors/simpleEditors/StringLiteralPropEditor.js

@@ -1,10 +0,0 @@
-import React, { useCallback } from 'react';
-import BasicSwitch from '@tomorrowevening/theatre-studio/uiComponents/form/BasicSwitch';
-import BasicSelect from '@tomorrowevening/theatre-studio/uiComponents/form/BasicSelect';
-function StringLiteralPropEditor({ propConfig, editingTools, value, autoFocus, }) {
-    const onChange = useCallback((val) => {
-        editingTools.permanentlySetValue(val);
-    }, [propConfig, editingTools]);
-    return propConfig.as === 'menu' ? (React.createElement(BasicSelect, { value: value, onChange: onChange, options: propConfig.valuesAndLabels, autoFocus: autoFocus })) : (React.createElement(BasicSwitch, { value: value, onChange: onChange, options: propConfig.valuesAndLabels, autoFocus: autoFocus }));
-}
-export default StringLiteralPropEditor;

package/dist/propEditors/simpleEditors/StringPropEditor.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import BasicStringInput from '@tomorrowevening/theatre-studio/uiComponents/form/BasicStringInput';
-function StringPropEditor({ editingTools, value, autoFocus, }) {
-    return (React.createElement(BasicStringInput, { value: value, temporarilySetValue: editingTools.temporarilySetValue, discardTemporaryValue: editingTools.discardTemporaryValue, permanentlySetValue: editingTools.permanentlySetValue, autoFocus: autoFocus }));
-}
-export default StringPropEditor;

package/dist/propEditors/simpleEditors/simplePropEditorByPropType.js

@@ -1,16 +0,0 @@
-import BooleanPropEditor from './BooleanPropEditor';
-import NumberPropEditor from './NumberPropEditor';
-import StringLiteralPropEditor from './StringLiteralPropEditor';
-import StringPropEditor from './StringPropEditor';
-import RgbaPropEditor from './RgbaPropEditor';
-import ImagePropEditor from './ImagePropEditor';
-import FilePropEditor from './FilePropEditor';
-export const simplePropEditorByPropType = {
-    number: NumberPropEditor,
-    string: StringPropEditor,
-    boolean: BooleanPropEditor,
-    stringLiteral: StringLiteralPropEditor,
-    rgba: RgbaPropEditor,
-    image: ImagePropEditor,
-    file: FilePropEditor,
-};

package/dist/propEditors/useEditingToolsForCompoundProp.js

@@ -1,228 +0,0 @@
-import getStudio from '@tomorrowevening/theatre-studio/getStudio';
-import getDeep from '@tomorrowevening/theatre-shared/utils/getDeep';
-import { usePrism } from '@tomorrowevening/theatre-react';
-import { getPointerParts, prism, val } from '@tomorrowevening/theatre-dataverse';
-import get from 'lodash-es/get';
-import React from 'react';
-import DefaultOrStaticValueIndicator from './DefaultValueIndicator';
-import { compoundHasSimpleDescendants, isPropConfigComposite, iteratePropType, } from '@tomorrowevening/theatre-shared/propTypes/utils';
-import { createStudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
-import pointerDeep from '@tomorrowevening/theatre-shared/utils/pointerDeep';
-import NextPrevKeyframeCursors from './NextPrevKeyframeCursors';
-import { getNearbyKeyframesOfTrack } from './getNearbyKeyframesOfTrack';
-import { emptyObject } from '@tomorrowevening/theatre-shared/utils';
-export function useEditingToolsForCompoundProp(pointerToProp, obj, propConfig) {
-    const pathToProp = getPointerParts(pointerToProp).path;
-    return usePrism(() => {
-        // if the compound has no simple descendants, then there isn't much the user can do with it
-        if (!compoundHasSimpleDescendants(propConfig)) {
-            return {
-                type: 'AllStatic',
-                beingScrubbed: false,
-                contextMenuItems: [],
-                controlIndicators: (React.createElement(DefaultOrStaticValueIndicator, { hasStaticOverride: false, obj: obj, pathToProp: pathToProp, propConfig: propConfig })),
-            };
-        }
-        /**
-         * TODO This implementation is wrong because {@link stateEditors.studio.ephemeral.projects.stateByProjectId.stateBySheetId.stateByObjectKey.propsBeingScrubbed.flag}
-         * does not prune empty objects
-         */
-        const someDescendantsBeingScrubbed = !!val(get(getStudio().atomP.ephemeral.projects.stateByProjectId[obj.address.projectId].stateBySheetId[obj.address.sheetId].stateByObjectKey[obj.address.objectKey].valuesBeingScrubbed, getPointerParts(pointerToProp).path));
-        const contextMenuItems = [];
-        const common = {
-            beingScrubbed: someDescendantsBeingScrubbed,
-            contextMenuItems,
-            controlIndicators: React.createElement(React.Fragment, null),
-        };
-        const validSequencedTracks = val(obj.template.getMapOfValidSequenceTracks_forStudio());
-        const possibleSequenceTrackIds = getDeep(validSequencedTracks, pathToProp);
-        const hasOneOrMoreSequencedTracks = possibleSequenceTrackIds !== undefined &&
-            Object.keys(possibleSequenceTrackIds).length !== 0; // check if object is empty or undefined
-        const listOfDescendantTrackIds = [];
-        const allStaticOverrides = val(obj.template.getStaticButNotSequencedOverrides());
-        const staticOverrides = getDeep(allStaticOverrides ?? emptyObject, pathToProp);
-        let hasStatics = staticOverrides !== undefined;
-        if (hasOneOrMoreSequencedTracks) {
-            for (const descendant of iteratePropType(propConfig, [])) {
-                if (isPropConfigComposite(descendant.conf))
-                    continue;
-                const sequencedTrackIdBelongingToDescendant = getDeep(possibleSequenceTrackIds, descendant.path);
-                if (typeof sequencedTrackIdBelongingToDescendant !== 'string') {
-                    hasStatics = true;
-                }
-                else {
-                    listOfDescendantTrackIds.push(sequencedTrackIdBelongingToDescendant);
-                }
-            }
-        }
-        if (hasStatics || hasOneOrMoreSequencedTracks) {
-            contextMenuItems.push({
-                label: 'Reset all to default',
-                callback: () => {
-                    getStudio().transaction(({ unset }) => {
-                        unset(pointerToProp);
-                    });
-                },
-            });
-        }
-        if (hasOneOrMoreSequencedTracks) {
-            contextMenuItems.push({
-                label: 'Make all static',
-                callback: () => {
-                    getStudio().transaction(({ stateEditors }) => {
-                        for (const { path: subPath, conf } of iteratePropType(propConfig, [])) {
-                            if (isPropConfigComposite(conf))
-                                continue;
-                            const propAddress = {
-                                ...obj.address,
-                                pathToProp: [...pathToProp, ...subPath],
-                            };
-                            const pointerToSub = pointerDeep(pointerToProp, subPath);
-                            stateEditors.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsStatic({
-                                ...propAddress,
-                                value: obj.getValueByPointer(pointerToSub),
-                            });
-                        }
-                    });
-                },
-            });
-        }
-        if (!hasOneOrMoreSequencedTracks ||
-            (hasOneOrMoreSequencedTracks && hasStatics)) {
-            contextMenuItems.push({
-                label: 'Sequence all',
-                callback: () => {
-                    getStudio().transaction(({ stateEditors }) => {
-                        for (const { path, conf } of iteratePropType(propConfig, pathToProp)) {
-                            if (isPropConfigComposite(conf))
-                                continue;
-                            const propAddress = { ...obj.address, pathToProp: path };
-                            stateEditors.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced(propAddress, propConfig);
-                        }
-                    });
-                },
-            });
-        }
-        if (hasOneOrMoreSequencedTracks) {
-            const controlIndicators = prism.memo(`controlIndicators`, () => (React.createElement(ControlIndicators, { pointerToProp,
-                obj,
-                possibleSequenceTrackIds,
-                listOfDescendantTrackIds })), [possibleSequenceTrackIds, listOfDescendantTrackIds]);
-            const ret = {
-                ...common,
-                type: 'HasSequences',
-                controlIndicators,
-            };
-            return ret;
-        }
-        else {
-            return {
-                ...common,
-                type: 'AllStatic',
-                controlIndicators: (React.createElement(DefaultOrStaticValueIndicator, { hasStaticOverride: hasStatics, obj: obj, pathToProp: pathToProp, propConfig: propConfig })),
-            };
-        }
-    }, []);
-}
-function ControlIndicators({ pointerToProp, obj, possibleSequenceTrackIds, listOfDescendantTrackIds, }) {
-    return usePrism(() => {
-        const pathToProp = getPointerParts(pointerToProp).path;
-        const sequencePosition = val(obj.sheet.getSequence().positionPrism);
-        /*
-        2/10 perf concern:
-        When displaying a hierarchy like {props: {transform: {position: {x, y, z}}}},
-        we'd be recalculating this variable for both `position` and `transform`. While
-        we _could_ be re-using the calculation of `transform` in `position`, I think
-        it's unlikely that this optimization would matter.
-        */
-        const nearbyKeyframesInEachTrack = listOfDescendantTrackIds
-            .map((trackId) => ({
-            trackId,
-            track: val(obj.template.project.pointers.historic.sheetsById[obj.address.sheetId]
-                .sequence.tracksByObject[obj.address.objectKey].trackData[trackId]),
-        }))
-            .filter(({ track }) => !!track)
-            .map((s) => ({
-            ...s,
-            nearbies: getNearbyKeyframesOfTrack(obj, { id: s.trackId, data: s.track, sheetObject: obj }, sequencePosition),
-        }));
-        const hasCur = nearbyKeyframesInEachTrack.find(({ nearbies }) => !!nearbies.cur);
-        const allCur = nearbyKeyframesInEachTrack.every(({ nearbies }) => !!nearbies.cur);
-        const closestPrev = nearbyKeyframesInEachTrack.reduce((acc, s) => {
-            if (s.nearbies.prev) {
-                if (acc === undefined ||
-                    s.nearbies.prev.kf.position > acc.kf.position) {
-                    return s.nearbies.prev;
-                }
-                else {
-                    return acc;
-                }
-            }
-            else {
-                return acc;
-            }
-        }, undefined);
-        const closestNext = nearbyKeyframesInEachTrack.reduce((acc, s) => {
-            if (s.nearbies.next) {
-                if (acc === undefined ||
-                    s.nearbies.next.kf.position < acc.kf.position) {
-                    return s.nearbies.next;
-                }
-                else {
-                    return acc;
-                }
-            }
-            else {
-                return acc;
-            }
-        }, undefined);
-        const toggle = () => {
-            if (allCur) {
-                getStudio().transaction((api) => {
-                    api.unset(pointerToProp);
-                });
-            }
-            else if (hasCur) {
-                getStudio().transaction((api) => {
-                    api.set(pointerToProp, val(pointerToProp));
-                });
-            }
-            else {
-                getStudio().transaction((api) => {
-                    api.set(pointerToProp, val(pointerToProp));
-                });
-            }
-        };
-        const pr = {
-            cur: hasCur
-                ? {
-                    type: 'on',
-                    itemKey: createStudioSheetItemKey.forCompoundPropAggregateKeyframe(obj, pathToProp, sequencePosition),
-                    toggle,
-                }
-                : {
-                    toggle,
-                    type: 'off',
-                },
-            prev: closestPrev !== undefined
-                ? {
-                    position: closestPrev.kf.position,
-                    itemKey: createStudioSheetItemKey.forCompoundPropAggregateKeyframe(obj, pathToProp, closestPrev.kf.position),
-                    jump: () => {
-                        obj.sheet.getSequence().position = closestPrev.kf.position;
-                    },
-                }
-                : undefined,
-            next: closestNext !== undefined
-                ? {
-                    position: closestNext.kf.position,
-                    itemKey: createStudioSheetItemKey.forCompoundPropAggregateKeyframe(obj, pathToProp, closestNext.kf.position),
-                    jump: () => {
-                        obj.sheet.getSequence().position = closestNext.kf.position;
-                    },
-                }
-                : undefined,
-        };
-        return React.createElement(NextPrevKeyframeCursors, { ...pr });
-    }, [pointerToProp, obj, possibleSequenceTrackIds, listOfDescendantTrackIds]);
-}