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, 65 insertions, 49 deletions

diff --git a/src/client/views/InkTangentHandles.tsx b/src/client/views/InkTangentHandles.tsx
index ae35bc980..c4a2f603e 100644
--- a/src/client/views/InkTangentHandles.tsx
+++ b/src/client/views/InkTangentHandles.tsx
@@ -1,21 +1,21 @@
-import React = require("react");
-import { action } from "mobx";
-import { observer } from "mobx-react";
-import { Doc } from "../../fields/Doc";
-import { HandleLine, HandlePoint, InkData } from "../../fields/InkField";
-import { List } from "../../fields/List";
-import { listSpec } from "../../fields/Schema";
-import { Cast } from "../../fields/Types";
-import { emptyFunction, setupMoveUpEvents } 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 React = require('react');
+import { action } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../fields/Doc';
+import { HandleLine, HandlePoint, InkData } from '../../fields/InkField';
+import { List } from '../../fields/List';
+import { listSpec } from '../../fields/Schema';
+import { Cast } from '../../fields/Types';
+import { emptyFunction, setupMoveUpEvents } 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';
 export interface InkHandlesProps {
     inkDoc: Doc;
-    inkView: DocumentView;
+    inkView: InkingStroke;
     screenCtrlPoints: InkData;
     screenSpaceLineWidth: number;
     ScreenToLocalTransform: () => Transform;
@@ -23,49 +23,51 @@ export interface InkHandlesProps {
 
 @observer
 export class InkTangentHandles extends React.Component<InkHandlesProps> {
+    get docView() {
+        return this.props.inkView.props.docViewPath().lastElement();
+    }
     /**
      * Handles the movement of a selected handle point when the user clicks and drags.
      * @param handleNum The index of the currently selected handle point.
      */
     onHandleDown = (e: React.PointerEvent, handleIndex: number): void => {
-        const ptFromScreen = this.props.inkView.ComponentView?.ptFromScreen;
-        if (!ptFromScreen) return;
-        const screenScale = this.props.ScreenToLocalTransform().Scale;
-        var controlUndo: UndoManager.Batch | undefined;
         const order = handleIndex % 4;
         const oppositeHandleRawIndex = order === 1 ? handleIndex - 3 : handleIndex + 3;
         const oppositeHandleIndex = (oppositeHandleRawIndex < 0 ? this.props.screenCtrlPoints.length + oppositeHandleRawIndex : oppositeHandleRawIndex) % this.props.screenCtrlPoints.length;
         const controlIndex = (order === 1 ? handleIndex - 1 : handleIndex + 2) % this.props.screenCtrlPoints.length;
-        setupMoveUpEvents(this, e,
+        setupMoveUpEvents(
+            this,
+            e,
             (e: PointerEvent, down: number[], delta: number[]) => {
-                if (!controlUndo) controlUndo = UndoManager.StartBatch("DocDecs move tangent");
+                if (!this.props.inkView.controlUndo) this.props.inkView.controlUndo = UndoManager.StartBatch('DocDecs move tangent');
                 if (e.altKey) this.onBreakTangent(controlIndex);
-                const inkMoveEnd = ptFromScreen({ X: delta[0], Y: delta[1] });
-                const inkMoveStart = ptFromScreen({ X: 0, Y: 0 });
-                InkStrokeProperties.Instance.moveTangentHandle(this.props.inkView, -(inkMoveEnd.X - inkMoveStart.X), -(inkMoveEnd.Y - inkMoveStart.Y), handleIndex, oppositeHandleIndex, controlIndex);
+                const inkMoveEnd = this.props.inkView.ptFromScreen({ X: delta[0], Y: delta[1] });
+                const inkMoveStart = this.props.inkView.ptFromScreen({ X: 0, Y: 0 });
+                InkStrokeProperties.Instance.moveTangentHandle(this.docView, -(inkMoveEnd.X - inkMoveStart.X), -(inkMoveEnd.Y - inkMoveStart.Y), handleIndex, oppositeHandleIndex, controlIndex);
                 return false;
-            }, () => {
-                controlUndo?.end();
-                UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
-            }, emptyFunction
+            },
+            () => {
+                this.props.inkView.controlUndo?.end();
+                UndoManager.FilterBatches(['data', 'x', 'y', 'width', 'height']);
+            },
+            emptyFunction
         );
-    }
+    };
 
     /**
-     * Breaks tangent handle movement when ‘Alt’ key is held down. Adds the current handle index and 
+     * Breaks tangent handle movement when ‘Alt’ key is held down. Adds the current handle index and
      * its matching (opposite) handle to a list of broken handle indices.
      * @param handleNum The index of the currently selected handle point.
      */
     @action
     onBreakTangent = (controlIndex: number) => {
         const closed = InkingStroke.IsClosed(this.props.screenCtrlPoints);
-        const brokenIndices = Cast(this.props.inkDoc.brokenInkIndices, listSpec("number"));
-        if (!brokenIndices?.includes(controlIndex) &&
-            ((controlIndex > 0 && controlIndex < this.props.screenCtrlPoints.length - 1) || closed)) {
+        const brokenIndices = Cast(this.props.inkDoc.brokenInkIndices, listSpec('number'));
+        if (!brokenIndices?.includes(controlIndex) && ((controlIndex > 0 && controlIndex < this.props.screenCtrlPoints.length - 1) || closed)) {
             if (brokenIndices) brokenIndices.push(controlIndex);
             else this.props.inkDoc.brokenInkIndices = new List<number>([controlIndex]);
         }
-    }
+    };
 
     render() {
         // Accessing the current ink's data and extracting all handle points and handle lines.
@@ -81,10 +83,18 @@ export class InkTangentHandles extends React.Component<InkHandlesProps> {
             // Adding first and last (single) handle lines.
             if (closed) {
                 tangentLines.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: data.length - 1 });
-            }
-            else {
+            } else {
                 tangentLines.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 });
-                tangentLines.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 });
+                tangentLines.push({
+                    X1: data[data.length - 2].X,
+                    Y1: data[data.length - 2].Y,
+                    X2: data[data.length - 1].X,
+                    Y2: data[data.length - 1].Y,
+                    X3: data[data.length - 1].X,
+                    Y3: data[data.length - 1].Y,
+                    dot1: data.length - 1,
+                    dot2: data.length - 1,
+                });
             }
             for (let i = 2; i < data.length - 4; i += 4) {
                 tangentLines.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 });
@@ -94,7 +104,7 @@ export class InkTangentHandles extends React.Component<InkHandlesProps> {
 
         return (
             <>
-                {tangentHandles.map((pts, i) =>
+                {tangentHandles.map((pts, i) => (
                     <svg height="10" width="10" key={`hdl${i}`}>
                         <circle
                             cx={pts.X}
@@ -106,25 +116,31 @@ export class InkTangentHandles extends React.Component<InkHandlesProps> {
                             onPointerDown={e => this.onHandleDown(e, pts.I)}
                             pointerEvents="all"
                             cursor="default"
-                            display={(pts.dot1 === InkStrokeProperties.Instance._currentPoint || pts.dot2 === InkStrokeProperties.Instance._currentPoint) ? "inherit" : "none"} />
-                    </svg>)}
+                            display={pts.dot1 === InkStrokeProperties.Instance._currentPoint || pts.dot2 === InkStrokeProperties.Instance._currentPoint ? 'inherit' : 'none'}
+                        />
+                    </svg>
+                ))}
                 {tangentLines.map((pts, i) => {
-                    const tangentLine = (x1: number, y1: number, x2: number, y2: number) =>
+                    const tangentLine = (x1: number, y1: number, x2: number, y2: number) => (
                         <line
                             x1={x1}
                             y1={y1}
                             x2={x2}
                             y2={y2}
                             stroke={Colors.MEDIUM_BLUE}
-                            strokeDasharray={"1 1"}
+                            strokeDasharray={'1 1'}
                             strokeWidth={1}
-                            display={(pts.dot1 === InkStrokeProperties.Instance._currentPoint || pts.dot2 === InkStrokeProperties.Instance._currentPoint) ? "inherit" : "none"} />;
-                    return <svg height="100" width="100" key={`line${i}`}>
-                        {tangentLine(pts.X1, pts.Y1, pts.X2, pts.Y2)}
-                        {tangentLine(pts.X2, pts.Y2, pts.X3, pts.Y3)}
-                    </svg>;
+                            display={pts.dot1 === InkStrokeProperties.Instance._currentPoint || pts.dot2 === InkStrokeProperties.Instance._currentPoint ? 'inherit' : 'none'}
+                        />
+                    );
+                    return (
+                        <svg height="100" width="100" key={`line${i}`}>
+                            {tangentLine(pts.X1, pts.Y1, pts.X2, pts.Y2)}
+                            {tangentLine(pts.X2, pts.Y2, pts.X3, pts.Y3)}
+                        </svg>
+                    );
                 })}
             </>
         );
     }
-}
\ No newline at end of file
+}