@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/CurveHandle.js

@@ -0,0 +1,186 @@
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import { clamp } from 'lodash-es';
+import React, { useMemo, useRef } from 'react';
+import styled from 'styled-components';
+import { transformBox } from './Curve';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+export const dotSize = 6;
+const Circle = styled.circle `
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+  fill: var(--main-color);
+  r: 2px;
+  pointer-events: none;
+`;
+const HitZone = styled.circle `
+  stroke-width: 6px;
+  vector-effect: non-scaling-stroke;
+  r: 6px;
+  fill: transparent;
+  cursor: move;
+  ${pointerEventsAutoInNormalMode};
+  &:hover {
+  }
+  &:hover + ${Circle} {
+    r: 6px;
+  }
+`;
+const Line = styled.path `
+  stroke-width: 1;
+  stroke: var(--main-color);
+  /* stroke: gray; */
+  fill: none;
+  vector-effect: non-scaling-stroke;
+`;
+const CurveHandle = (props) => {
+    const [ref, node] = useRefAndState(null);
+    const { index, trackData } = props;
+    const cur = trackData.keyframes[index];
+    const next = trackData.keyframes[index + 1];
+    const [contextMenu] = useOurContextMenu(node, props);
+    useOurDrags(node, props);
+    const posInDiffSpace = props.which === 'left' ? cur.handles[2] : next.handles[0];
+    const posInUnitSpace = cur.position + (next.position - cur.position) * posInDiffSpace;
+    const valInDiffSpace = props.which === 'left' ? cur.handles[3] : next.handles[1];
+    const curValue = props.isScalar ? cur.value : 0;
+    const nextValue = props.isScalar ? next.value : 1;
+    const value = curValue + (nextValue - curValue) * valInDiffSpace;
+    const valInExtremumSpace = props.extremumSpace.fromValueSpace(value);
+    const heightInExtremumSpace = valInExtremumSpace -
+        props.extremumSpace.fromValueSpace(props.which === 'left' ? curValue : nextValue);
+    const lineTransform = transformBox(props.which === 'left' ? cur.position : next.position, props.extremumSpace.fromValueSpace(props.which === 'left' ? curValue : nextValue), posInUnitSpace - (props.which === 'left' ? cur.position : next.position), heightInExtremumSpace);
+    return (React.createElement("g", null,
+        React.createElement(HitZone, { ref: ref, style: {
+                // @ts-ignore
+                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${posInUnitSpace} * 1px)`,
+                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${valInExtremumSpace}) * 1px)`,
+            } }),
+        React.createElement(Circle, { style: {
+                // @ts-ignore
+                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${posInUnitSpace} * 1px)`,
+                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${valInExtremumSpace}) * 1px)`,
+            } }),
+        React.createElement(Line, { d: "M 0 0 L 1 1", style: {
+                transform: lineTransform,
+            } }),
+        contextMenu));
+};
+export default CurveHandle;
+function useOurDrags(node, props) {
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const handlers = useMemo(() => {
+        return {
+            debugName: 'CurveHandler/useOurDrags',
+            lockCSSCursorTo: 'move',
+            onDragStart() {
+                let tempTransaction;
+                const propsAtStartOfDrag = propsRef.current;
+                const scaledToUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace);
+                const verticalToExtremumSpace = val(propsAtStartOfDrag.layoutP.graphEditorVerticalSpace.toExtremumSpace);
+                const unlockExtremums = propsAtStartOfDrag.extremumSpace.lock();
+                return {
+                    onDrag(dxInScaledSpace, dy) {
+                        if (tempTransaction) {
+                            tempTransaction.discard();
+                            tempTransaction = undefined;
+                        }
+                        const { index, trackData } = propsAtStartOfDrag;
+                        const cur = trackData.keyframes[index];
+                        const next = trackData.keyframes[index + 1];
+                        const dPosInUnitSpace = scaledToUnitSpace(dxInScaledSpace);
+                        let dPosInKeyframeDiffSpace = dPosInUnitSpace / (next.position - cur.position);
+                        const dyInVerticalSpace = -dy;
+                        const dYInExtremumSpace = verticalToExtremumSpace(dyInVerticalSpace);
+                        const dYInValueSpace = propsAtStartOfDrag.extremumSpace.deltaToValueSpace(dYInExtremumSpace);
+                        const curValue = props.isScalar ? cur.value : 0;
+                        const nextValue = props.isScalar ? next.value : 1;
+                        const dyInKeyframeDiffSpace = dYInValueSpace / (nextValue - curValue);
+                        if (propsAtStartOfDrag.which === 'left') {
+                            const handleX = clamp(cur.handles[2] + dPosInKeyframeDiffSpace, 0, 1);
+                            const handleY = cur.handles[3] + dyInKeyframeDiffSpace;
+                            tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                                stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
+                                    ...propsAtStartOfDrag.sheetObject.address,
+                                    snappingFunction: val(propsAtStartOfDrag.layoutP.sheet).getSequence().closestGridPosition,
+                                    trackId: propsAtStartOfDrag.trackId,
+                                    keyframes: [
+                                        {
+                                            ...cur,
+                                            handles: [
+                                                cur.handles[0],
+                                                cur.handles[1],
+                                                handleX,
+                                                handleY,
+                                            ],
+                                        },
+                                    ],
+                                });
+                            });
+                        }
+                        else {
+                            const handleX = clamp(next.handles[0] + dPosInKeyframeDiffSpace, 0, 1);
+                            const handleY = next.handles[1] + dyInKeyframeDiffSpace;
+                            tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                                stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
+                                    ...propsAtStartOfDrag.sheetObject.address,
+                                    trackId: propsAtStartOfDrag.trackId,
+                                    snappingFunction: val(propsAtStartOfDrag.layoutP.sheet).getSequence().closestGridPosition,
+                                    keyframes: [
+                                        {
+                                            ...next,
+                                            handles: [
+                                                handleX,
+                                                handleY,
+                                                next.handles[2],
+                                                next.handles[3],
+                                            ],
+                                        },
+                                    ],
+                                });
+                            });
+                        }
+                    },
+                    onDragEnd(dragHappened) {
+                        unlockExtremums();
+                        if (dragHappened) {
+                            if (tempTransaction) {
+                                tempTransaction.commit();
+                            }
+                        }
+                        else {
+                            if (tempTransaction) {
+                                tempTransaction.discard();
+                            }
+                        }
+                    },
+                };
+            },
+        };
+    }, []);
+    useDrag(node, handlers);
+}
+function useOurContextMenu(node, props) {
+    return useContextMenu(node, {
+        menuItems: () => {
+            return [
+                {
+                    label: 'Delete',
+                    callback: () => {
+                        getStudio().transaction(({ stateEditors }) => {
+                            stateEditors.coreByProject.historic.sheetsById.sequence.deleteKeyframes({
+                                ...props.sheetObject.address,
+                                keyframeIds: [props.keyframe.id],
+                                trackId: props.trackId,
+                            });
+                        });
+                    },
+                },
+            ];
+        },
+    });
+}

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type KeyframeEditor from './KeyframeEditor';
+export declare const dotSize = 6;
+type IProps = Parameters<typeof KeyframeEditor>[0] & {
+    which: 'left' | 'right';
+};
+declare const GraphEditorDotNonScalar: React.VFC<IProps>;
+export default GraphEditorDotNonScalar;
+//# sourceMappingURL=GraphEditorDotNonScalar.d.ts.map

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphEditorDotNonScalar.d.ts","sourceRoot":"","sources":["../../../../../../../../../studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAEtD,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAelD,eAAO,MAAM,OAAO,IAAI,CAAA;AAmCxB,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG;IAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,CAAA;AAE9E,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CA8D9C,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.js

@@ -0,0 +1,162 @@
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import React, { useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { useLockFrameStampPosition } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+import { includeLockFrameStampAttrs } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import { lockedCursorCssVarName, useCssCursorLock, } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
+import { useKeyframeInlineEditorPopover } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover';
+import usePresence, { PresenceFlag, } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
+export const dotSize = 6;
+const Circle = styled.circle `
+  fill: var(--main-color);
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+
+  r: 2px;
+`;
+const HitZone = styled.circle `
+  stroke-width: 6px;
+  vector-effect: non-scaling-stroke;
+  r: 6px;
+  fill: transparent;
+  ${pointerEventsAutoInNormalMode};
+
+  &:hover + ${Circle} {
+    r: 6px;
+  }
+
+  #pointer-root.normal & {
+    cursor: ew-resize;
+  }
+
+  #pointer-root.draggingPositionInSequenceEditor & {
+    pointer-events: auto;
+    cursor: var(${lockedCursorCssVarName});
+  }
+
+  &.beingDragged {
+    pointer-events: none !important;
+  }
+`;
+const GraphEditorDotNonScalar = (props) => {
+    const [ref, node] = useRefAndState(null);
+    const { index, trackData, itemKey } = props;
+    const cur = trackData.keyframes[index];
+    const [contextMenu] = useKeyframeContextMenu(node, props);
+    const presence = usePresence(itemKey);
+    const curValue = props.which === 'left' ? 0 : 1;
+    const inlineEditorPopover = useKeyframeInlineEditorPopover([
+        {
+            type: 'primitiveProp',
+            keyframe: props.keyframe,
+            pathToProp: props.pathToProp,
+            propConfig: props.propConfig,
+            sheetObject: props.sheetObject,
+            trackId: props.trackId,
+        },
+    ]);
+    const isDragging = useDragKeyframe({
+        node,
+        props,
+        // dragging does not work with also having a click listener
+        onDetectedClick: (event) => inlineEditorPopover.toggle(event, event.target instanceof Element ? event.target : node),
+    });
+    const cyInExtremumSpace = props.extremumSpace.fromValueSpace(curValue);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HitZone, { ref: ref, style: {
+                // @ts-ignore
+                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${cur.position} * 1px)`,
+                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${cyInExtremumSpace}) * 1px)`,
+            }, ...presence.attrs, ...includeLockFrameStampAttrs(cur.position), ...DopeSnap.includePositionSnapAttrs(cur.position), className: isDragging ? 'beingDragged' : '' }),
+        React.createElement(Circle, { style: {
+                // @ts-ignore
+                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${cur.position} * 1px)`,
+                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${cyInExtremumSpace}) * 1px)`,
+                fill: presence.flag === PresenceFlag.Primary ? 'white' : undefined,
+            } }),
+        inlineEditorPopover.node,
+        contextMenu));
+};
+export default GraphEditorDotNonScalar;
+function useDragKeyframe(options) {
+    const [isDragging, setIsDragging] = useState(false);
+    useLockFrameStampPosition(isDragging, options.props.keyframe.position);
+    const propsRef = useRef(options.props);
+    propsRef.current = options.props;
+    const gestureHandlers = useMemo(() => {
+        return {
+            debugName: 'GraphEditorDotNonScalar/useDragKeyframe',
+            lockCSSCursorTo: 'ew-resize',
+            onDragStart(event) {
+                setIsDragging(true);
+                const propsAtStartOfDrag = propsRef.current;
+                const toUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace);
+                const unlockExtremums = propsAtStartOfDrag.extremumSpace.lock();
+                let tempTransaction;
+                return {
+                    onDrag(dx, dy) {
+                        const original = propsAtStartOfDrag.trackData.keyframes[propsAtStartOfDrag.index];
+                        const deltaPos = toUnitSpace(dx);
+                        const updatedKeyframes = [];
+                        const cur = {
+                            ...original,
+                            position: original.position + deltaPos,
+                            value: original.value,
+                            handles: [...original.handles],
+                        };
+                        updatedKeyframes.push(cur);
+                        tempTransaction?.discard();
+                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                            stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
+                                ...propsAtStartOfDrag.sheetObject.address,
+                                trackId: propsAtStartOfDrag.trackId,
+                                keyframes: updatedKeyframes,
+                                snappingFunction: val(propsAtStartOfDrag.layoutP.sheet).getSequence().closestGridPosition,
+                            });
+                        });
+                    },
+                    onDragEnd(dragHappened) {
+                        setIsDragging(false);
+                        unlockExtremums();
+                        if (dragHappened) {
+                            tempTransaction?.commit();
+                        }
+                        else {
+                            tempTransaction?.discard();
+                            options.onDetectedClick(event);
+                        }
+                    },
+                };
+            },
+        };
+    }, []);
+    useDrag(options.node, gestureHandlers);
+    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize');
+    return isDragging;
+}
+function useKeyframeContextMenu(node, props) {
+    return useContextMenu(node, {
+        menuItems: () => {
+            return [
+                {
+                    label: 'Delete',
+                    callback: () => {
+                        getStudio().transaction(({ stateEditors }) => {
+                            stateEditors.coreByProject.historic.sheetsById.sequence.deleteKeyframes({
+                                ...props.sheetObject.address,
+                                keyframeIds: [props.keyframe.id],
+                                trackId: props.trackId,
+                            });
+                        });
+                    },
+                },
+            ];
+        },
+    });
+}

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type KeyframeEditor from './KeyframeEditor';
+export declare const dotSize = 6;
+type IProps = Parameters<typeof KeyframeEditor>[0];
+declare const GraphEditorDotScalar: React.VFC<IProps>;
+export default GraphEditorDotScalar;
+//# sourceMappingURL=GraphEditorDotScalar.d.ts.map

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphEditorDotScalar.d.ts","sourceRoot":"","sources":["../../../../../../../../../studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAEtD,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAelD,eAAO,MAAM,OAAO,IAAI,CAAA;AAmCxB,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAElD,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CA4D3C,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.js

@@ -0,0 +1,209 @@
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import useContextMenu from '@tomorrowevening/theatre-studio/uiComponents/simpleContextMenu/useContextMenu';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import React, { useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { useLockFrameStampPosition } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+import { includeLockFrameStampAttrs } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import { lockedCursorCssVarName, useCssCursorLock, } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import DopeSnap from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/RightOverlay/DopeSnap';
+import { useKeyframeInlineEditorPopover } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover';
+import usePresence, { PresenceFlag, } from '@tomorrowevening/theatre-studio/uiComponents/usePresence';
+export const dotSize = 6;
+const Circle = styled.circle `
+  fill: var(--main-color);
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+
+  r: 2px;
+`;
+const HitZone = styled.circle `
+  stroke-width: 6px;
+  vector-effect: non-scaling-stroke;
+  r: 6px;
+  fill: transparent;
+  ${pointerEventsAutoInNormalMode};
+
+  &:hover + ${Circle} {
+    r: 6px;
+  }
+
+  #pointer-root.normal & {
+    cursor: move;
+  }
+
+  #pointer-root.draggingPositionInSequenceEditor & {
+    pointer-events: auto;
+    cursor: var(${lockedCursorCssVarName});
+  }
+
+  &.beingDragged {
+    pointer-events: none !important;
+  }
+`;
+const GraphEditorDotScalar = (props) => {
+    const [ref, node] = useRefAndState(null);
+    const { index, trackData } = props;
+    const cur = trackData.keyframes[index];
+    const [contextMenu] = useKeyframeContextMenu(node, props);
+    const presence = usePresence(props.itemKey);
+    const curValue = cur.value;
+    const cyInExtremumSpace = props.extremumSpace.fromValueSpace(curValue);
+    const inlineEditorPopover = useKeyframeInlineEditorPopover([
+        {
+            type: 'primitiveProp',
+            keyframe: props.keyframe,
+            pathToProp: props.pathToProp,
+            propConfig: props.propConfig,
+            sheetObject: props.sheetObject,
+            trackId: props.trackId,
+        },
+    ]);
+    const isDragging = useDragKeyframe({
+        node,
+        props,
+        // dragging does not work with also having a click listener
+        onDetectedClick: (event) => inlineEditorPopover.toggle(event, event.target instanceof Element ? event.target : node),
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HitZone, { ref: ref, style: {
+                // @ts-ignore
+                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${cur.position} * 1px)`,
+                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${cyInExtremumSpace}) * 1px)`,
+            }, ...includeLockFrameStampAttrs(cur.position), ...DopeSnap.includePositionSnapAttrs(cur.position), ...presence.attrs, className: isDragging ? 'beingDragged' : '' }),
+        React.createElement(Circle, { style: {
+                // @ts-ignore
+                cx: `calc(var(--unitSpaceToScaledSpaceMultiplier) * ${cur.position} * 1px)`,
+                cy: `calc((var(--graphEditorVerticalSpace) - var(--graphEditorVerticalSpace) * ${cyInExtremumSpace}) * 1px)`,
+                fill: presence.flag === PresenceFlag.Primary ? 'white' : undefined,
+            } }),
+        inlineEditorPopover.node,
+        contextMenu));
+};
+export default GraphEditorDotScalar;
+function useDragKeyframe(options) {
+    const [isDragging, setIsDragging] = useState(false);
+    useLockFrameStampPosition(isDragging, options.props.keyframe.position);
+    const propsRef = useRef(options.props);
+    propsRef.current = options.props;
+    const gestureHandlers = useMemo(() => {
+        return {
+            debugName: 'GraphEditorDotScalar/useDragKeyframe',
+            lockCSSCursorTo: 'move',
+            onDragStart(event) {
+                setIsDragging(true);
+                const keepSpeeds = !!event.altKey;
+                const propsAtStartOfDrag = propsRef.current;
+                const toUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace);
+                const verticalToExtremumSpace = val(propsAtStartOfDrag.layoutP.graphEditorVerticalSpace.toExtremumSpace);
+                const unlockExtremums = propsAtStartOfDrag.extremumSpace.lock();
+                let tempTransaction;
+                return {
+                    onDrag(dx, dy) {
+                        const original = propsAtStartOfDrag.trackData.keyframes[propsAtStartOfDrag.index];
+                        const deltaPos = toUnitSpace(dx);
+                        const dyInVerticalSpace = -dy;
+                        const dYInExtremumSpace = verticalToExtremumSpace(dyInVerticalSpace);
+                        const dYInValueSpace = propsAtStartOfDrag.extremumSpace.deltaToValueSpace(dYInExtremumSpace);
+                        const updatedKeyframes = [];
+                        const cur = {
+                            ...original,
+                            position: original.position + deltaPos,
+                            value: original.value + dYInValueSpace,
+                            handles: [...original.handles],
+                        };
+                        updatedKeyframes.push(cur);
+                        if (keepSpeeds) {
+                            const prev = propsAtStartOfDrag.trackData.keyframes[propsAtStartOfDrag.index - 1];
+                            if (prev &&
+                                Math.abs(original.value - prev.value) >
+                                    0) {
+                                const newPrev = {
+                                    ...prev,
+                                    handles: [...prev.handles],
+                                };
+                                updatedKeyframes.push(newPrev);
+                                newPrev.handles[3] = preserveRightHandle(prev.handles[3], prev.value, prev.value, original.value, cur.value);
+                            }
+                            const next = propsAtStartOfDrag.trackData.keyframes[propsAtStartOfDrag.index + 1];
+                            if (next &&
+                                Math.abs(original.value - next.value) >
+                                    0) {
+                                const newNext = {
+                                    ...next,
+                                    handles: [...next.handles],
+                                };
+                                updatedKeyframes.push(newNext);
+                                newNext.handles[1] = preserveLeftHandle(newNext.handles[1], newNext.value, newNext.value, original.value, cur.value);
+                            }
+                        }
+                        tempTransaction?.discard();
+                        tempTransaction = getStudio().tempTransaction(({ stateEditors }) => {
+                            stateEditors.coreByProject.historic.sheetsById.sequence.replaceKeyframes({
+                                ...propsAtStartOfDrag.sheetObject.address,
+                                trackId: propsAtStartOfDrag.trackId,
+                                keyframes: updatedKeyframes,
+                                snappingFunction: val(propsAtStartOfDrag.layoutP.sheet).getSequence().closestGridPosition,
+                            });
+                        });
+                    },
+                    onDragEnd(dragHappened) {
+                        setIsDragging(false);
+                        unlockExtremums();
+                        if (dragHappened) {
+                            tempTransaction?.commit();
+                        }
+                        else {
+                            tempTransaction?.discard();
+                            options.onDetectedClick(event);
+                        }
+                    },
+                };
+            },
+        };
+    }, []);
+    useDrag(options.node, gestureHandlers);
+    useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'move');
+    return isDragging;
+}
+function useKeyframeContextMenu(node, props) {
+    return useContextMenu(node, {
+        menuItems: () => {
+            return [
+                {
+                    label: 'Delete',
+                    callback: () => {
+                        getStudio().transaction(({ stateEditors }) => {
+                            stateEditors.coreByProject.historic.sheetsById.sequence.deleteKeyframes({
+                                ...props.sheetObject.address,
+                                keyframeIds: [props.keyframe.id],
+                                trackId: props.trackId,
+                            });
+                        });
+                    },
+                },
+            ];
+        },
+    });
+}
+function preserveRightHandle(rightHandleInKeyframeDeltaSpace, originalValueOfMovedKeyframe, newValueOfMovedKeyframe, originalValueOfNeighbouringKeyframe, newValueOfNeighbouringKeyframe) {
+    const diffOfHandleYToMovingKeyframeInValueSpace = (originalValueOfNeighbouringKeyframe - originalValueOfMovedKeyframe) *
+        rightHandleInKeyframeDeltaSpace;
+    const newHandleYInKeyframeDeltaSpace = diffOfHandleYToMovingKeyframeInValueSpace /
+        (newValueOfNeighbouringKeyframe - newValueOfMovedKeyframe);
+    return newHandleYInKeyframeDeltaSpace;
+}
+function preserveLeftHandle(leftHandleInKeyframeDeltaSpace, originalValueOfMovedKeyframe, newValueOfMovedKeyframe, originalValueOfNeighbouringKeyframe, newValueOfNeighbouringKeyframe) {
+    const handleYInValueSpace = (originalValueOfMovedKeyframe - originalValueOfNeighbouringKeyframe) *
+        leftHandleInKeyframeDeltaSpace +
+        originalValueOfNeighbouringKeyframe;
+    const diffOfHandleYToMovingKeyframeInValueSpace = handleYInValueSpace - originalValueOfMovedKeyframe;
+    const newHandleYInValueSpace = diffOfHandleYToMovingKeyframeInValueSpace + newValueOfMovedKeyframe;
+    const diffOfNewHandleYToNeighbouringKeyframe = newHandleYInValueSpace - newValueOfNeighbouringKeyframe;
+    const newHandleYInKeyframeDeltaSpace = diffOfNewHandleYToNeighbouringKeyframe /
+        (newValueOfMovedKeyframe - newValueOfNeighbouringKeyframe);
+    return newHandleYInKeyframeDeltaSpace;
+}

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorNonScalarDash.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type KeyframeEditor from './KeyframeEditor';
+export declare const dotSize = 6;
+type IProps = Parameters<typeof KeyframeEditor>[0];
+declare const GraphEditorNonScalarDash: React.VFC<IProps>;
+export default GraphEditorNonScalarDash;
+//# sourceMappingURL=GraphEditorNonScalarDash.d.ts.map

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorNonScalarDash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphEditorNonScalarDash.d.ts","sourceRoot":"","sources":["../../../../../../../../../studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorNonScalarDash.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAIlD,eAAO,MAAM,OAAO,IAAI,CAAA;AAWxB,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAElD,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAuB/C,CAAA;AAED,eAAe,wBAAwB,CAAA"}

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorNonScalarDash.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import { transformBox } from './Curve';
+export const dotSize = 6;
+const SVGPath = styled.path `
+  stroke-width: 2;
+  stroke: var(--main-color);
+  stroke-dasharray: 3 2;
+  fill: none;
+  vector-effect: non-scaling-stroke;
+  opacity: 0.3;
+`;
+const GraphEditorNonScalarDash = (props) => {
+    const { index, trackData } = props;
+    const pathD = `M 0 0 L 1 1`;
+    const transform = transformBox(trackData.keyframes[index].position, props.extremumSpace.fromValueSpace(0), 0, props.extremumSpace.fromValueSpace(1) -
+        props.extremumSpace.fromValueSpace(0));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SVGPath, { d: pathD, style: {
+                transform,
+            } })));
+};
+export default GraphEditorNonScalarDash;

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/KeyframeEditor.d.ts

@@ -0,0 +1,27 @@
+import type { Keyframe, TrackData } from '@tomorrowevening/theatre-core/projects/store/types/SheetState_Historic';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { SequenceTrackId, StudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { graphEditorColors } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor';
+import type { ExtremumSpace } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/BasicKeyframedTrack';
+import type { PropTypeConfig_AllSimples } from '@tomorrowevening/theatre-core/propTypes';
+import type { PathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
+type IKeyframeEditorProps = {
+    index: number;
+    keyframe: Keyframe;
+    trackData: TrackData;
+    itemKey: StudioSheetItemKey;
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    trackId: SequenceTrackId;
+    sheetObject: SheetObject;
+    pathToProp: PathToProp;
+    extremumSpace: ExtremumSpace;
+    isScalar: boolean;
+    color: keyof typeof graphEditorColors;
+    propConfig: PropTypeConfig_AllSimples;
+};
+declare const KeyframeEditor: React.VFC<IKeyframeEditorProps>;
+export default KeyframeEditor;
+//# sourceMappingURL=KeyframeEditor.d.ts.map

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/KeyframeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyframeEditor.d.ts","sourceRoot":"","sources":["../../../../../../../../../studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/KeyframeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACV,MAAM,wEAAwE,CAAA;AAC/E,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AACrF,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AACvH,OAAO,KAAK,EACV,eAAe,EACf,kBAAkB,EACnB,MAAM,2CAA2C,CAAA;AAClD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,oFAAoF,CAAA;AACzH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,gHAAgH,CAAA;AAMjJ,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,yCAAyC,CAAA;AACtF,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,iDAAiD,CAAA;AAQ/E,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,QAAQ,CAAA;IAClB,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,kBAAkB,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,OAAO,EAAE,eAAe,CAAA;IACxB,WAAW,EAAE,WAAW,CAAA;IACxB,UAAU,EAAE,UAAU,CAAA;IACtB,aAAa,EAAE,aAAa,CAAA;IAC5B,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,OAAO,iBAAiB,CAAA;IACrC,UAAU,EAAE,yBAAyB,CAAA;CACtC,CAAA;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAmCnD,CAAA;AAED,eAAe,cAAc,CAAA"}