fixed pres hide before/after, select w/o nav, and updating contents.. made collections fitWidth by default so that they resize like a normal window. Made freeform pan/zoom animate when changing keyframes. allow nesting of keyframe collections.. made presEffects work even if there's no transition movement. made nested collection timelines follow parent by default, but with ability to change ordering. fixed treeView incremental render. treat doc anchors are preselements instead of delegating. don't highlight ink when dragging ctrl pts.

1 files changed, 146 insertions, 122 deletions

diff --git a/src/client/views/InkControlPtHandles.tsx b/src/client/views/InkControlPtHandles.tsx
index d036a636a..9447b2e72 100644
--- a/src/client/views/InkControlPtHandles.tsx
+++ b/src/client/views/InkControlPtHandles.tsx
@@ -1,23 +1,23 @@
-import React = require("react");
-import { action, observable } from "mobx";
-import { observer } from "mobx-react";
-import { Doc } from "../../fields/Doc";
-import { ControlPoint, InkData, PointData, InkField } from "../../fields/InkField";
-import { List } from "../../fields/List";
-import { listSpec } from "../../fields/Schema";
-import { Cast, NumCast } from "../../fields/Types";
-import { setupMoveUpEvents, returnFalse } from "../../Utils";
-import { Transform } from "../util/Transform";
-import { UndoManager } from "../util/UndoManager";
-import { Colors } from "./global/globalEnums";
-import { InkingStroke } from "./InkingStroke";
-import { InkStrokeProperties } from "./InkStrokeProperties";
-import { DocumentView } from "./nodes/DocumentView";
-import { SelectionManager } from "../util/SelectionManager";
+import React = require('react');
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../fields/Doc';
+import { ControlPoint, InkData, PointData, InkField } from '../../fields/InkField';
+import { List } from '../../fields/List';
+import { listSpec } from '../../fields/Schema';
+import { Cast, NumCast } from '../../fields/Types';
+import { setupMoveUpEvents, returnFalse } from '../../Utils';
+import { Transform } from '../util/Transform';
+import { UndoManager } from '../util/UndoManager';
+import { Colors } from './global/globalEnums';
+import { InkingStroke } from './InkingStroke';
+import { InkStrokeProperties } from './InkStrokeProperties';
+import { DocumentView } from './nodes/DocumentView';
+import { SelectionManager } from '../util/SelectionManager';
 
 export interface InkControlProps {
     inkDoc: Doc;
-    inkView: DocumentView;
+    inkView: InkingStroke;
     inkCtrlPoints: InkData;
     screenCtrlPoints: InkData;
     screenSpaceLineWidth: number;
@@ -26,16 +26,16 @@ export interface InkControlProps {
 
 @observer
 export class InkControlPtHandles extends React.Component<InkControlProps> {
-
     @observable private _overControl = -1;
-
-    @observable controlUndo: UndoManager.Batch | undefined;
+    get docView() {
+        return this.props.inkView.props.docViewPath().lastElement();
+    }
 
     componentDidMount() {
-        document.addEventListener("keydown", this.onDelete, true);
+        document.addEventListener('keydown', this.onDelete, true);
     }
     componentWillUnmount() {
-        document.removeEventListener("keydown", this.onDelete, true);
+        document.removeEventListener('keydown', this.onDelete, true);
     }
     /**
      * Handles the movement of a selected control point when the user clicks and drags.
@@ -43,30 +43,32 @@ export class InkControlPtHandles extends React.Component<InkControlProps> {
      */
     @action
     onControlDown = (e: React.PointerEvent, controlIndex: number): void => {
-        const ptFromScreen = this.props.inkView.ComponentView?.ptFromScreen;
+        const ptFromScreen = this.props.inkView.ptFromScreen;
         if (ptFromScreen) {
             const order = controlIndex % 4;
             const handleIndexA = ((order === 3 ? controlIndex - 1 : controlIndex - 2) + this.props.inkCtrlPoints.length) % this.props.inkCtrlPoints.length;
             const handleIndexB = (order === 3 ? controlIndex + 2 : controlIndex + 1) % this.props.inkCtrlPoints.length;
-            const brokenIndices = Cast(this.props.inkDoc.brokenInkIndices, listSpec("number"));
+            const brokenIndices = Cast(this.props.inkDoc.brokenInkIndices, listSpec('number'));
             const wasSelected = InkStrokeProperties.Instance._currentPoint === controlIndex;
             if (!wasSelected) InkStrokeProperties.Instance._currentPoint = -1;
             const origInk = this.props.inkCtrlPoints.slice();
-            setupMoveUpEvents(this, e,
+            setupMoveUpEvents(
+                this,
+                e,
                 action((e: PointerEvent, down: number[], delta: number[]) => {
-                    if (!this.controlUndo) this.controlUndo = UndoManager.StartBatch("drag ink ctrl pt");
+                    if (!this.props.inkView.controlUndo) this.props.inkView.controlUndo = UndoManager.StartBatch('drag ink ctrl pt');
                     const inkMoveEnd = ptFromScreen({ X: delta[0], Y: delta[1] });
                     const inkMoveStart = ptFromScreen({ X: 0, Y: 0 });
-                    InkStrokeProperties.Instance.moveControlPtHandle(this.props.inkView, inkMoveEnd.X - inkMoveStart.X, inkMoveEnd.Y - inkMoveStart.Y, controlIndex, origInk);
+                    InkStrokeProperties.Instance.moveControlPtHandle(this.docView, inkMoveEnd.X - inkMoveStart.X, inkMoveEnd.Y - inkMoveStart.Y, controlIndex, origInk);
                     return false;
                 }),
                 action(() => {
-                    if (this.controlUndo) {
-                        InkStrokeProperties.Instance.snapControl(this.props.inkView, controlIndex);
+                    if (this.props.inkView.controlUndo) {
+                        InkStrokeProperties.Instance.snapControl(this.docView, controlIndex);
                     }
-                    this.controlUndo?.end();
-                    this.controlUndo = undefined;
-                    UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
+                    this.props.inkView.controlUndo?.end();
+                    this.props.inkView.controlUndo = undefined;
+                    UndoManager.FilterBatches(['data', 'x', 'y', 'width', 'height']);
                 }),
                 action((e: PointerEvent, doubleTap: boolean | undefined) => {
                     const equivIndex = controlIndex === 0 ? this.props.inkCtrlPoints.length - 1 : controlIndex === this.props.inkCtrlPoints.length - 1 ? 0 : controlIndex;
@@ -76,44 +78,52 @@ export class InkControlPtHandles extends React.Component<InkControlProps> {
                             else this.props.inkDoc.brokenInkIndices = new List<number>([controlIndex]);
                         } else {
                             if (brokenIndices?.includes(equivIndex)) {
-                                if (!this.controlUndo) this.controlUndo = UndoManager.StartBatch("make smooth");
-                                InkStrokeProperties.Instance.snapHandleTangent(this.props.inkView, equivIndex, handleIndexA, handleIndexB);
+                                if (!this.props.inkView.controlUndo) this.props.inkView.controlUndo = UndoManager.StartBatch('make smooth');
+                                InkStrokeProperties.Instance.snapHandleTangent(this.docView, equivIndex, handleIndexA, handleIndexB);
                             }
                             if (equivIndex !== controlIndex && brokenIndices?.includes(controlIndex)) {
-                                if (!this.controlUndo) this.controlUndo = UndoManager.StartBatch("make smooth");
-                                InkStrokeProperties.Instance.snapHandleTangent(this.props.inkView, controlIndex, handleIndexA, handleIndexB);
+                                if (!this.props.inkView.controlUndo) this.props.inkView.controlUndo = UndoManager.StartBatch('make smooth');
+                                InkStrokeProperties.Instance.snapHandleTangent(this.docView, controlIndex, handleIndexA, handleIndexB);
                             }
                         }
-                        this.controlUndo?.end();
-                        this.controlUndo = undefined;
+                        this.props.inkView.controlUndo?.end();
+                        this.props.inkView.controlUndo = undefined;
                     }
                     this.changeCurrPoint(controlIndex);
-                }), undefined, undefined, () => wasSelected && this.changeCurrPoint(-1));
+                }),
+                undefined,
+                undefined,
+                () => wasSelected && this.changeCurrPoint(-1)
+            );
         }
-    }
+    };
     /**
      * Updates whether a user has hovered over a particular control point or point that could be added
      * on click.
      */
-    @action onEnterControl = (i: number) => { this._overControl = i; };
-    @action onLeaveControl = () => { this._overControl = -1; };
+    @action onEnterControl = (i: number) => {
+        this._overControl = i;
+    };
+    @action onLeaveControl = () => {
+        this._overControl = -1;
+    };
 
     /**
      * Deletes the currently selected point.
      */
     @action
     onDelete = (e: KeyboardEvent) => {
-        if (["-", "Backspace", "Delete"].includes(e.key)) {
-            InkStrokeProperties.Instance.deletePoints(this.props.inkView, e.shiftKey);
+        if (['-', 'Backspace', 'Delete'].includes(e.key)) {
+            InkStrokeProperties.Instance.deletePoints(this.docView, e.shiftKey);
             e.stopPropagation();
         }
-    }
+    };
 
     /**
      * Changes the current selected control point.
      */
     @action
-    changeCurrPoint = (i: number) => InkStrokeProperties.Instance._currentPoint = i
+    changeCurrPoint = (i: number) => (InkStrokeProperties.Instance._currentPoint = i);
 
     render() {
         // Accessing the current ink's data and extracting all control points.
@@ -133,101 +143,115 @@ export class InkControlPtHandles extends React.Component<InkControlProps> {
 
         const closed = InkingStroke.IsClosed(inkData);
         const nearestScreenPt = this.props.nearestScreenPt();
-        const TagType = (broken?: boolean) => broken ? "rect" : "circle";
-        const hdl = (control: { X: number, Y: number, I: number }, scale: number, color: string) => {
-            const broken = Cast(this.props.inkDoc.brokenInkIndices, listSpec("number"))?.includes(control.I);
+        const TagType = (broken?: boolean) => (broken ? 'rect' : 'circle');
+        const hdl = (control: { X: number; Y: number; I: number }, scale: number, color: string) => {
+            const broken = Cast(this.props.inkDoc.brokenInkIndices, listSpec('number'))?.includes(control.I);
             const Tag = TagType((control.I === 0 || control.I === inkData.length - 1) && !closed) as keyof JSX.IntrinsicElements;
-            return <Tag key={control.I.toString() + scale}
-                x={control.X - this.props.screenSpaceLineWidth * 2 * scale}
-                y={control.Y - this.props.screenSpaceLineWidth * 2 * scale}
-                cx={control.X}
-                cy={control.Y}
-                r={this.props.screenSpaceLineWidth * 2 * scale}
-                opacity={this.controlUndo ? 0.15 : 1}
-                height={this.props.screenSpaceLineWidth * 4 * scale}
-                width={this.props.screenSpaceLineWidth * 4 * scale}
-                strokeWidth={this.props.screenSpaceLineWidth / 2}
-                stroke={Colors.MEDIUM_BLUE}
-                fill={broken ? Colors.MEDIUM_BLUE : color}
-                onPointerDown={(e: React.PointerEvent) => this.onControlDown(e, control.I)}
-                onMouseEnter={() => this.onEnterControl(control.I)}
-                onMouseLeave={this.onLeaveControl}
-                pointerEvents="all"
-                cursor="default"
-            />;
-        };
-        return (<svg>
-            {!nearestScreenPt ? (null) :
-                <circle key={"npt"}
-                    cx={nearestScreenPt.X}
-                    cy={nearestScreenPt.Y}
-                    r={this.props.screenSpaceLineWidth * 2}
-                    fill={"#00007777"}
-                    stroke={"#00007777"}
-                    strokeWidth={0}
-                    pointerEvents="none"
+            return (
+                <Tag
+                    key={control.I.toString() + scale}
+                    x={control.X - this.props.screenSpaceLineWidth * 2 * scale}
+                    y={control.Y - this.props.screenSpaceLineWidth * 2 * scale}
+                    cx={control.X}
+                    cy={control.Y}
+                    r={this.props.screenSpaceLineWidth * 2 * scale}
+                    opacity={this.props.inkView.controlUndo ? 0.15 : 1}
+                    height={this.props.screenSpaceLineWidth * 4 * scale}
+                    width={this.props.screenSpaceLineWidth * 4 * scale}
+                    strokeWidth={this.props.screenSpaceLineWidth / 2}
+                    stroke={Colors.MEDIUM_BLUE}
+                    fill={broken ? Colors.MEDIUM_BLUE : color}
+                    onPointerDown={(e: React.PointerEvent) => this.onControlDown(e, control.I)}
+                    onMouseEnter={() => this.onEnterControl(control.I)}
+                    onMouseLeave={this.onLeaveControl}
+                    pointerEvents="all"
+                    cursor="default"
                 />
-            }
-            {sreenCtrlPoints.map(control => hdl(control, this._overControl !== control.I ? 1 : 3 / 2, Colors.WHITE))}
-        </svg>
+            );
+        };
+        return (
+            <svg>
+                {!nearestScreenPt ? null : <circle key={'npt'} cx={nearestScreenPt.X} cy={nearestScreenPt.Y} r={this.props.screenSpaceLineWidth * 2} fill={'#00007777'} stroke={'#00007777'} strokeWidth={0} pointerEvents="none" />}
+                {sreenCtrlPoints.map(control => hdl(control, this._overControl !== control.I ? 1 : 3 / 2, Colors.WHITE))}
+            </svg>
         );
     }
 }
 
-
 export interface InkEndProps {
     inkDoc: Doc;
-    inkView: DocumentView;
+    inkView: InkingStroke;
     screenSpaceLineWidth: number;
     startPt: PointData;
     endPt: PointData;
 }
 @observer
 export class InkEndPtHandles extends React.Component<InkEndProps> {
-    @observable controlUndo: UndoManager.Batch | undefined;
     @observable _overStart: boolean = false;
     @observable _overEnd: boolean = false;
 
     @action
-    dragRotate = (e: React.PointerEvent, p1: () => { X: number, Y: number }, p2: () => { X: number, Y: number }) => {
-        setupMoveUpEvents(this, e, (e) => {
-            if (!this.controlUndo) this.controlUndo = UndoManager.StartBatch("stretch ink");
-            // compute stretch factor by finding scaling along axis between start and end points
-            const v1 = { X: p1().X - p2().X, Y: p1().Y - p2().Y };
-            const v2 = { X: e.clientX - p2().X, Y: e.clientY - p2().Y };
-            const v1len = Math.sqrt(v1.X * v1.X + v1.Y * v1.Y);
-            const v2len = Math.sqrt(v2.X * v2.X + v2.Y * v2.Y);
-            const scaling = v2len / v1len;
-            const v1n = { X: v1.X / v1len, Y: v1.Y / v1len };
-            const v2n = { X: v2.X / v2len, Y: v2.Y / v2len };
-            const angle = Math.acos(v1n.X * v2n.X + v1n.Y * v2n.Y) * Math.sign(v1.X * v2.Y - v2.X * v1.Y);
-            InkStrokeProperties.Instance.stretchInk(SelectionManager.Views(), scaling, p2(), v1n, e.shiftKey);
-            InkStrokeProperties.Instance.rotateInk(SelectionManager.Views(), angle, p2());
-            return false;
-        }, action(() => {
-            this.controlUndo?.end();
-            this.controlUndo = undefined;
-            UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
-        }), returnFalse);
-    }
+    dragRotate = (e: React.PointerEvent, p1: () => { X: number; Y: number }, p2: () => { X: number; Y: number }) => {
+        setupMoveUpEvents(
+            this,
+            e,
+            action(e => {
+                if (!this.props.inkView.controlUndo) this.props.inkView.controlUndo = UndoManager.StartBatch('stretch ink');
+                // compute stretch factor by finding scaling along axis between start and end points
+                const v1 = { X: p1().X - p2().X, Y: p1().Y - p2().Y };
+                const v2 = { X: e.clientX - p2().X, Y: e.clientY - p2().Y };
+                const v1len = Math.sqrt(v1.X * v1.X + v1.Y * v1.Y);
+                const v2len = Math.sqrt(v2.X * v2.X + v2.Y * v2.Y);
+                const scaling = v2len / v1len;
+                const v1n = { X: v1.X / v1len, Y: v1.Y / v1len };
+                const v2n = { X: v2.X / v2len, Y: v2.Y / v2len };
+                const angle = Math.acos(v1n.X * v2n.X + v1n.Y * v2n.Y) * Math.sign(v1.X * v2.Y - v2.X * v1.Y);
+                InkStrokeProperties.Instance.stretchInk(SelectionManager.Views(), scaling, p2(), v1n, e.shiftKey);
+                InkStrokeProperties.Instance.rotateInk(SelectionManager.Views(), angle, p2());
+                return false;
+            }),
+            action(() => {
+                this.props.inkView.controlUndo?.end();
+                this.props.inkView.controlUndo = undefined;
+                UndoManager.FilterBatches(['data', 'x', 'y', 'width', 'height']);
+            }),
+            returnFalse
+        );
+    };
 
     render() {
-        const hdl = (key: string, pt: PointData, dragFunc: (e: React.PointerEvent) => void) => <circle key={key}
-            cx={pt.X}
-            cy={pt.Y}
-            r={this.props.screenSpaceLineWidth * 2}
-            fill={this._overStart ? "#aaaaaa" : "#99999977"}
-            stroke={"#00007777"}
-            strokeWidth={0}
-            onPointerLeave={action(() => this._overStart = false)}
-            onPointerEnter={action(() => this._overStart = true)}
-            onPointerDown={dragFunc}
-            pointerEvents="all"
-        />;
-        return (<svg>
-            {hdl("start", this.props.startPt, (e: React.PointerEvent) => this.dragRotate(e, () => this.props.startPt, () => this.props.endPt))}
-            {hdl("end", this.props.endPt, (e: React.PointerEvent) => this.dragRotate(e, () => this.props.endPt, () => this.props.startPt))}
-        </svg>
+        const hdl = (key: string, pt: PointData, dragFunc: (e: React.PointerEvent) => void) => (
+            <circle
+                key={key}
+                cx={pt.X}
+                cy={pt.Y}
+                r={this.props.screenSpaceLineWidth * 2}
+                fill={this._overStart ? '#aaaaaa' : '#99999977'}
+                stroke={'#00007777'}
+                strokeWidth={0}
+                onPointerLeave={action(() => (this._overStart = false))}
+                onPointerEnter={action(() => (this._overStart = true))}
+                onPointerDown={dragFunc}
+                pointerEvents="all"
+            />
+        );
+        return (
+            <svg>
+                {hdl('start', this.props.startPt, (e: React.PointerEvent) =>
+                    this.dragRotate(
+                        e,
+                        () => this.props.startPt,
+                        () => this.props.endPt
+                    )
+                )}
+                {hdl('end', this.props.endPt, (e: React.PointerEvent) =>
+                    this.dragRotate(
+                        e,
+                        () => this.props.endPt,
+                        () => this.props.startPt
+                    )
+                )}
+            </svg>
         );
     }
-}
\ No newline at end of file
+}