@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/propEditors/DefaultValueIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultValueIndicator.d.ts","sourceRoot":"","sources":["../../../../../studio/src/propEditors/DefaultValueIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,iDAAiD,CAAA;AAC/E,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AACrF,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,yCAAyC,CAAA;AA0D3E,QAAA,MAAM,6BAA6B,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5C,iBAAiB,EAAE,OAAO,CAAA;IAC1B,UAAU,EAAE,UAAU,CAAA;IACtB,GAAG,EAAE,WAAW,CAAA;IAChB,UAAU,EAAE,cAAc,CAAA;CAC3B,CA4BA,CAAA;AAED,eAAe,6BAA6B,CAAA"}

package/dist/propEditors/DefaultValueIndicator.js

@@ -0,0 +1,64 @@
+import { transparentize } from 'polished';
+import React from 'react';
+import styled from 'styled-components';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { nextPrevCursorsTheme } from './NextPrevKeyframeCursors';
+import { isPropConfigComposite, iteratePropType, } from '@tomorrowevening/theatre-shared/propTypes/utils';
+const theme = {
+    defaultState: {
+        color: transparentize(0.95, `#C4C4C4`),
+        hoverColor: transparentize(0.15, nextPrevCursorsTheme.onColor),
+    },
+    withStaticOverride: {
+        color: transparentize(0.85, `#C4C4C4`),
+        hoverColor: transparentize(0.15, nextPrevCursorsTheme.onColor),
+    },
+};
+const Container = styled.div `
+  width: 16px;
+  margin: 0 0px 0 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  color: ${(props) => props.hasStaticOverride
+    ? theme.withStaticOverride.color
+    : theme.defaultState.color};
+
+  &:hover {
+    color: ${(props) => props.hasStaticOverride
+    ? theme.withStaticOverride.hoverColor
+    : theme.defaultState.hoverColor};
+  }
+`;
+const DefaultIcon = styled.div `
+  width: 5px;
+  height: 5px;
+  border-radius: 1px;
+  transform: rotate(45deg);
+  /* border: 1px solid currentColor; */
+  background-color: currentColor;
+`;
+const FilledIcon = styled.div `
+  width: 5px;
+  height: 5px;
+  background-color: currentColor;
+  border-radius: 1px;
+  transform: rotate(45deg);
+`;
+const DefaultOrStaticValueIndicator = (props) => {
+    const { hasStaticOverride, obj, propConfig, pathToProp } = props;
+    const sequenceCb = () => {
+        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);
+            }
+        });
+    };
+    return (React.createElement(Container, { hasStaticOverride: hasStaticOverride, onClick: sequenceCb, title: "Sequence this prop" }, hasStaticOverride ? (React.createElement(FilledIcon, { title: "The default value is overridden" })) : (React.createElement(DefaultIcon, { title: "This is the default value for this prop" }))));
+};
+export default DefaultOrStaticValueIndicator;

package/dist/propEditors/NextPrevKeyframeCursors.d.ts

@@ -0,0 +1,29 @@
+import type { Keyframe } from '@tomorrowevening/theatre-core/projects/store/types/SheetState_Historic';
+import type { StudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { VoidFn } from '@tomorrowevening/theatre-shared/utils/types';
+import React from 'react';
+export type NearbyKeyframesControls = {
+    prev?: Pick<Keyframe, 'position'> & {
+        jump: VoidFn;
+        itemKey: StudioSheetItemKey;
+    };
+    cur: {
+        type: 'on';
+        toggle: VoidFn;
+        itemKey: StudioSheetItemKey;
+    } | {
+        type: 'off';
+        toggle: VoidFn;
+    };
+    next?: Pick<Keyframe, 'position'> & {
+        jump: VoidFn;
+        itemKey: StudioSheetItemKey;
+    };
+};
+export declare const nextPrevCursorsTheme: {
+    offColor: string;
+    onColor: string;
+};
+declare const NextPrevKeyframeCursors: React.VFC<NearbyKeyframesControls>;
+export default NextPrevKeyframeCursors;
+//# sourceMappingURL=NextPrevKeyframeCursors.d.ts.map

package/dist/propEditors/NextPrevKeyframeCursors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextPrevKeyframeCursors.d.ts","sourceRoot":"","sources":["../../../../../studio/src/propEditors/NextPrevKeyframeCursors.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,wEAAwE,CAAA;AACpG,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,2CAA2C,CAAA;AACjF,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAA;AAGvE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;QAClC,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EAAE,kBAAkB,CAAA;KAC5B,CAAA;IACD,GAAG,EACC;QAAC,IAAI,EAAE,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,kBAAkB,CAAA;KAAC,GACzD;QAAC,IAAI,EAAE,KAAK,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAA;IACjC,IAAI,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;QAClC,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EAAE,kBAAkB,CAAA;KAC5B,CAAA;CACF,CAAA;AAwDD,eAAO,MAAM,oBAAoB;;;CAGhC,CAAA;AAmHD,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAmC/D,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/propEditors/NextPrevKeyframeCursors.js

@@ -0,0 +1,135 @@
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import { transparentize } from 'polished';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { PresenceFlag } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
+import usePresence from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
+const Container = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  margin: 0 0px 0 2px;
+  position: relative;
+  z-index: 0;
+  opacity: 0.7;
+
+  &:after {
+    position: absolute;
+    left: -14px;
+    right: -14px;
+    top: -2px;
+    bottom: -2px;
+    content: ' ';
+    display: none;
+    z-index: -1;
+    background: ${transparentize(0.2, 'black')};
+  }
+
+  &:hover {
+    opacity: 1;
+    &:after {
+      display: block;
+    }
+  }
+`;
+const Button = styled.div `
+  background: none;
+  position: relative;
+  border: 0;
+  transition: transform 0.1s ease-out;
+  z-index: 0;
+  outline: none;
+  cursor: pointer;
+
+  &:after {
+    display: none;
+    ${Container}:hover & {
+      display: block;
+    }
+    position: absolute;
+    left: -4px;
+    right: -4px;
+    top: -4px;
+    bottom: -4px;
+    content: ' ';
+    z-index: -1;
+  }
+`;
+export const nextPrevCursorsTheme = {
+    offColor: '#555',
+    onColor: '#e0c917',
+};
+const CurButton = styled(Button) `
+  &:hover {
+    color: #e0c917;
+  }
+
+  color: ${(props) => props.presence === PresenceFlag.Primary
+    ? 'white'
+    : props.isOn
+        ? nextPrevCursorsTheme.onColor
+        : nextPrevCursorsTheme.offColor};
+`;
+const pointerEventsNone = css `
+  pointer-events: none !important;
+`;
+const PrevOrNextButton = styled(Button) `
+  color: ${(props) => props.flag === PresenceFlag.Primary
+    ? 'white'
+    : props.available
+        ? nextPrevCursorsTheme.onColor
+        : nextPrevCursorsTheme.offColor};
+
+  ${(props) => props.available ? pointerEventsAutoInNormalMode : pointerEventsNone};
+`;
+const Prev = styled(PrevOrNextButton) `
+  transform: translateX(2px);
+  ${Container}:hover & {
+    transform: translateX(-7px);
+  }
+`;
+const Next = styled(PrevOrNextButton) `
+  transform: translateX(-2px);
+  ${Container}:hover & {
+    transform: translateX(7px);
+  }
+`;
+var Icons;
+(function (Icons) {
+    const Chevron_Group = styled.g `
+    stroke-width: 1;
+    ${PrevOrNextButton}:hover & path {
+      stroke-width: 3;
+    }
+  `;
+    Icons.Prev = () => (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement(Chevron_Group, { transform: `translate(6 3)` },
+            React.createElement("path", { d: "M4 1L1 4L4 7", stroke: "currentColor" }))));
+    Icons.Next = () => (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement(Chevron_Group, { transform: `translate(1 3)` },
+            React.createElement("path", { d: "M1 1L4 4L1 7", stroke: "currentColor" }))));
+    const Cur_Group = styled.g `
+    stroke-width: 0;
+    ${CurButton}:hover & path {
+      stroke: currentColor;
+      stroke-width: 2;
+    }
+  `;
+    Icons.Cur = () => (React.createElement("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement(Cur_Group, { transform: "translate(1 4)" },
+            React.createElement("path", { d: "M3 0L6 3L3 6L0 3L3 0Z", fill: "currentColor" }))));
+})(Icons || (Icons = {}));
+const NextPrevKeyframeCursors = (props) => {
+    const prevPresence = usePresence(props.prev?.itemKey);
+    const curPresence = usePresence(props.cur?.type === 'on' ? props.cur.itemKey : undefined);
+    const nextPresence = usePresence(props.next?.itemKey);
+    return (React.createElement(Container, null,
+        React.createElement(Prev, { available: !!props.prev, onClick: props.prev?.jump, flag: prevPresence.flag, ...prevPresence.attrs },
+            React.createElement(Icons.Prev, null)),
+        React.createElement(CurButton, { isOn: props.cur.type === 'on', onClick: props.cur.toggle, presence: curPresence.flag, ...curPresence.attrs },
+            React.createElement(Icons.Cur, null)),
+        React.createElement(Next, { available: !!props.next, onClick: props.next?.jump, flag: nextPresence.flag, ...nextPresence.attrs },
+            React.createElement(Icons.Next, null))));
+};
+export default NextPrevKeyframeCursors;

package/dist/propEditors/getNearbyKeyframesOfTrack.d.ts

@@ -0,0 +1,9 @@
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+import type { KeyframeWithTrack, TrackWithId } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/collectAggregateKeyframes';
+export declare function getNearbyKeyframesOfTrack(obj: SheetObject, track: TrackWithId | undefined, sequencePosition: number): NearbyKeyframes;
+export type NearbyKeyframes = {
+    prev?: KeyframeWithTrack;
+    cur?: KeyframeWithTrack;
+    next?: KeyframeWithTrack;
+};
+//# sourceMappingURL=getNearbyKeyframesOfTrack.d.ts.map

package/dist/propEditors/getNearbyKeyframesOfTrack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getNearbyKeyframesOfTrack.d.ts","sourceRoot":"","sources":["../../../../../studio/src/propEditors/getNearbyKeyframesOfTrack.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AAErF,OAAO,KAAK,EACV,iBAAiB,EACjB,WAAW,EACZ,MAAM,sGAAsG,CAAA;AAS7G,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,WAAW,GAAG,SAAS,EAC9B,gBAAgB,EAAE,MAAM,GACvB,eAAe,CAsDjB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,GAAG,CAAC,EAAE,iBAAiB,CAAA;IACvB,IAAI,CAAC,EAAE,iBAAiB,CAAA;CACzB,CAAA"}

package/dist/propEditors/getNearbyKeyframesOfTrack.js

@@ -0,0 +1,46 @@
+import { createStudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
+const cache = new WeakMap();
+const noKeyframes = {};
+export function getNearbyKeyframesOfTrack(obj, track, sequencePosition) {
+    if (!track || track.data.keyframes.length === 0)
+        return noKeyframes;
+    const cachedItem = cache.get(track.data);
+    if (cachedItem && cachedItem[0] === sequencePosition) {
+        return cachedItem[1];
+    }
+    function getKeyframeWithTrackId(idx) {
+        if (!track)
+            return;
+        const found = track.data.keyframes[idx];
+        return (found && {
+            kf: found,
+            track,
+            itemKey: createStudioSheetItemKey.forTrackKeyframe(obj, track.id, found.id),
+        });
+    }
+    const calculate = () => {
+        const nextOrCurIdx = track.data.keyframes.findIndex((kf) => kf.position >= sequencePosition);
+        if (nextOrCurIdx === -1) {
+            return {
+                prev: getKeyframeWithTrackId(track.data.keyframes.length - 1),
+            };
+        }
+        const nextOrCur = getKeyframeWithTrackId(nextOrCurIdx);
+        if (nextOrCur.kf.position === sequencePosition) {
+            return {
+                prev: getKeyframeWithTrackId(nextOrCurIdx - 1),
+                cur: nextOrCur,
+                next: getKeyframeWithTrackId(nextOrCurIdx + 1),
+            };
+        }
+        else {
+            return {
+                next: nextOrCur,
+                prev: getKeyframeWithTrackId(nextOrCurIdx - 1),
+            };
+        }
+    };
+    const result = calculate();
+    cache.set(track.data, [sequencePosition, result]);
+    return result;
+}

package/dist/propEditors/simpleEditors/BooleanPropEditor.d.ts

@@ -0,0 +1,6 @@
+import type { PropTypeConfig_Boolean } from '@tomorrowevening/theatre-core/propTypes';
+import React from 'react';
+import type { ISimplePropEditorReactProps } from './ISimplePropEditorReactProps';
+declare function BooleanPropEditor({ propConfig, editingTools, value, autoFocus, }: ISimplePropEditorReactProps<PropTypeConfig_Boolean>): React.JSX.Element;
+export default BooleanPropEditor;
+//# sourceMappingURL=BooleanPropEditor.d.ts.map

package/dist/propEditors/simpleEditors/BooleanPropEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanPropEditor.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,yCAAyC,CAAA;AACnF,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,+BAA+B,CAAA;AAU9E,iBAAS,iBAAiB,CAAC,EACzB,UAAU,EACV,YAAY,EACZ,KAAK,EACL,SAAS,GACV,EAAE,2BAA2B,CAAC,sBAAsB,CAAC,qBASrD;AAED,eAAe,iBAAiB,CAAA"}

package/dist/propEditors/simpleEditors/BooleanPropEditor.js

@@ -0,0 +1,17 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import BasicCheckbox from '@tomorrowevening/theatre-studio/uiComponents/form/BasicCheckbox';
+const Input = styled(BasicCheckbox) `
+  margin-left: 6px;
+
+  :focus {
+    outline: 1px solid #555;
+  }
+`;
+function BooleanPropEditor({ propConfig, editingTools, value, autoFocus, }) {
+    const onChange = useCallback((el) => {
+        editingTools.permanentlySetValue(Boolean(el.target.checked));
+    }, [propConfig, editingTools]);
+    return React.createElement(Input, { checked: value, onChange: onChange, autoFocus: autoFocus });
+}
+export default BooleanPropEditor;

package/dist/propEditors/simpleEditors/FilePropEditor.d.ts

@@ -0,0 +1,6 @@
+import type { PropTypeConfig_File } from '@tomorrowevening/theatre-core/propTypes';
+import React from 'react';
+import type { ISimplePropEditorReactProps } from './ISimplePropEditorReactProps';
+declare function FilePropEditor({ propConfig, editingTools, value, autoFocus, }: ISimplePropEditorReactProps<PropTypeConfig_File>): React.JSX.Element;
+export default FilePropEditor;
+//# sourceMappingURL=FilePropEditor.d.ts.map

package/dist/propEditors/simpleEditors/FilePropEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePropEditor.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/propEditors/simpleEditors/FilePropEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,yCAAyC,CAAA;AAEhF,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,+BAA+B,CAAA;AAuF9E,iBAAS,cAAc,CAAC,EACtB,UAAU,EACV,YAAY,EACZ,KAAK,EACL,SAAS,GACV,EAAE,2BAA2B,CAAC,mBAAmB,CAAC,qBAwDlD;AAED,eAAe,cAAc,CAAA"}

package/dist/propEditors/simpleEditors/FilePropEditor.js

@@ -0,0 +1,118 @@
+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.d.ts

@@ -0,0 +1,10 @@
+import type { IBasePropType } from '@tomorrowevening/theatre-core/propTypes';
+import type { IEditingTools } from '@tomorrowevening/theatre-studio/propEditors/utils/IEditingTools';
+/** Helper for defining consistent prop editor components */
+export type ISimplePropEditorReactProps<TPropTypeConfig extends IBasePropType<string, any>> = {
+    propConfig: TPropTypeConfig;
+    editingTools: IEditingTools<TPropTypeConfig['valueType']>;
+    value: TPropTypeConfig['valueType'];
+    autoFocus?: boolean;
+};
+//# sourceMappingURL=ISimplePropEditorReactProps.d.ts.map

package/dist/propEditors/simpleEditors/ISimplePropEditorReactProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ISimplePropEditorReactProps.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/propEditors/simpleEditors/ISimplePropEditorReactProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,yCAAyC,CAAA;AAC1E,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,iEAAiE,CAAA;AAElG,4DAA4D;AAC5D,MAAM,MAAM,2BAA2B,CACrC,eAAe,SAAS,aAAa,CAAC,MAAM,EAAE,GAAG,CAAC,IAChD;IACF,UAAU,EAAE,eAAe,CAAA;IAC3B,YAAY,EAAE,aAAa,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAA;IACzD,KAAK,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA"}

package/dist/propEditors/simpleEditors/ISimplePropEditorReactProps.js

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

package/dist/propEditors/simpleEditors/ImagePropEditor.d.ts

@@ -0,0 +1,6 @@
+import type { PropTypeConfig_Image } from '@tomorrowevening/theatre-core/propTypes';
+import React from 'react';
+import type { ISimplePropEditorReactProps } from './ISimplePropEditorReactProps';
+declare function ImagePropEditor({ propConfig, editingTools, value, autoFocus, }: ISimplePropEditorReactProps<PropTypeConfig_Image>): React.JSX.Element;
+export default ImagePropEditor;
+//# sourceMappingURL=ImagePropEditor.d.ts.map

package/dist/propEditors/simpleEditors/ImagePropEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePropEditor.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/propEditors/simpleEditors/ImagePropEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,yCAAyC,CAAA;AAGjF,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,+BAA+B,CAAA;AA+F9E,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,YAAY,EACZ,KAAK,EACL,SAAS,GACV,EAAE,2BAA2B,CAAC,oBAAoB,CAAC,qBA6DnD;AAED,eAAe,eAAe,CAAA"}

package/dist/propEditors/simpleEditors/ImagePropEditor.js

@@ -0,0 +1,126 @@
+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.d.ts

@@ -0,0 +1,6 @@
+import type { PropTypeConfig_Number } from '@tomorrowevening/theatre-core/propTypes';
+import React from 'react';
+import type { ISimplePropEditorReactProps } from './ISimplePropEditorReactProps';
+declare function NumberPropEditor({ propConfig, editingTools, value, autoFocus, }: ISimplePropEditorReactProps<PropTypeConfig_Number>): React.JSX.Element;
+export default NumberPropEditor;
+//# sourceMappingURL=NumberPropEditor.d.ts.map

package/dist/propEditors/simpleEditors/NumberPropEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberPropEditor.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/propEditors/simpleEditors/NumberPropEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,yCAAyC,CAAA;AAElF,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,+BAA+B,CAAA;AAE9E,iBAAS,gBAAgB,CAAC,EACxB,UAAU,EACV,YAAY,EACZ,KAAK,EACL,SAAS,GACV,EAAE,2BAA2B,CAAC,qBAAqB,CAAC,qBAmBpD;AAED,eAAe,gBAAgB,CAAA"}

package/dist/propEditors/simpleEditors/NumberPropEditor.js

@@ -0,0 +1,9 @@
+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.d.ts

@@ -0,0 +1,6 @@
+import type { PropTypeConfig_Rgba } from '@tomorrowevening/theatre-core/propTypes';
+import React from 'react';
+import type { ISimplePropEditorReactProps } from './ISimplePropEditorReactProps';
+declare function RgbaPropEditor({ editingTools, value, autoFocus, }: ISimplePropEditorReactProps<PropTypeConfig_Rgba>): React.JSX.Element;
+export default RgbaPropEditor;
+//# sourceMappingURL=RgbaPropEditor.d.ts.map

package/dist/propEditors/simpleEditors/RgbaPropEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RgbaPropEditor.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,yCAAyC,CAAA;AAQhF,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,+BAA+B,CAAA;AAgD9E,iBAAS,cAAc,CAAC,EACtB,YAAY,EACZ,KAAK,EACL,SAAS,GACV,EAAE,2BAA2B,CAAC,mBAAmB,CAAC,qBAuDlD;AAED,eAAe,cAAc,CAAA"}