fixed ink handles to work in lightbox, so re-enabled open in lightbox for selected ink. fixed double-click to not lock out in some cases because pendingDoubleClick never gets unset. fixed text to not jitter scroll bar when typing enter at end of autosize texst box.

5 files changed, 33 insertions, 22 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 9bcd23aa0..fdfd7bd31 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -745,7 +745,7 @@ export namespace Docs {
             I.layout = InkingStroke.LayoutString("data");
             I.color = color;
             I.hideDecorationTitle = true;  // don't show title when selected
-            I.hideOpenButton = true; // don't show open full screen button when selected
+            // I.hideOpenButton = true; // don't show open full screen button when selected
             I.fillColor = fillColor;
             I.strokeWidth = strokeWidth;
             I.strokeBezier = strokeBezier;
diff --git a/src/client/views/InkControlPtHandles.tsx b/src/client/views/InkControlPtHandles.tsx
index a7f511ab4..d036a636a 100644
--- a/src/client/views/InkControlPtHandles.tsx
+++ b/src/client/views/InkControlPtHandles.tsx
@@ -21,7 +21,6 @@ export interface InkControlProps {
     inkCtrlPoints: InkData;
     screenCtrlPoints: InkData;
     screenSpaceLineWidth: number;
-    ScreenToLocalTransform: () => Transform;
     nearestScreenPt: () => PointData | undefined;
 }
 
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 41cace1e3..e4486fc78 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -207,7 +207,7 @@ export class InkStrokeProperties {
     @undoBatch
     @action
     stretchInk = (inkStrokes: DocumentView[], scaling: number, scrpt: PointData, scrVec: PointData, scaleUniformly: boolean) => {
-        this.applyFunction(inkStrokes, (view: DocumentView, ink: InkData, xScale: number, yScale: number, inkStrokeWidth: number) => {
+        this.applyFunction(inkStrokes, (view: DocumentView, ink: InkData) => {
             const ptFromScreen = view.ComponentView?.ptFromScreen;
             const ptToScreen = view.ComponentView?.ptToScreen;
             return !ptToScreen || !ptFromScreen ? ink :
@@ -227,7 +227,7 @@ export class InkStrokeProperties {
     @undoBatch
     @action
     moveControlPtHandle = (inkView: DocumentView, deltaX: number, deltaY: number, controlIndex: number, origInk?: InkData) =>
-        this.applyFunction(inkView, (view: DocumentView, ink: InkData, xScale: number, yScale: number) => {
+        this.applyFunction(inkView, (view: DocumentView, ink: InkData) => {
             const order = controlIndex % 4;
             const closed = InkingStroke.IsClosed(ink);
             if (origInk && this._currentPoint > 0 && this._currentPoint < ink.length - 1) {
@@ -435,13 +435,13 @@ export class InkStrokeProperties {
     @undoBatch
     @action
     moveTangentHandle = (inkView: DocumentView, deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) =>
-        this.applyFunction(inkView, (view: DocumentView, ink: InkData, xScale: number, yScale: number) => {
+        this.applyFunction(inkView, (view: DocumentView, ink: InkData) => {
             const doc = view.rootDoc;
             const closed = InkingStroke.IsClosed(ink);
             const oldHandlePoint = ink[handleIndex];
             const oppositeHandlePoint = ink[oppositeHandleIndex];
             const controlPoint = ink[controlIndex];
-            const newHandlePoint = { X: ink[handleIndex].X - deltaX / xScale, Y: ink[handleIndex].Y - deltaY / yScale };
+            const newHandlePoint = { X: ink[handleIndex].X - deltaX, Y: ink[handleIndex].Y - deltaY };
             const inkCopy = ink.slice();
             inkCopy[handleIndex] = newHandlePoint;
             const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
diff --git a/src/client/views/InkTangentHandles.tsx b/src/client/views/InkTangentHandles.tsx
index ab73e58a4..b15e4260d 100644
--- a/src/client/views/InkTangentHandles.tsx
+++ b/src/client/views/InkTangentHandles.tsx
@@ -29,8 +29,10 @@ export class InkTangentHandles extends React.Component<InkHandlesProps> {
      * @param handleNum The index of the currently selected handle point.
      */
     onHandleDown = (e: React.PointerEvent, handleIndex: number): void => {
-        var controlUndo: UndoManager.Batch | undefined;
+        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;
@@ -39,7 +41,9 @@ export class InkTangentHandles extends React.Component<InkHandlesProps> {
             (e: PointerEvent, down: number[], delta: number[]) => {
                 if (!controlUndo) controlUndo = UndoManager.StartBatch("DocDecs move tangent");
                 if (e.altKey) this.onBreakTangent(controlIndex);
-                InkStrokeProperties.Instance.moveTangentHandle(this.props.inkView, -delta[0] * screenScale, -delta[1] * screenScale, handleIndex, oppositeHandleIndex, 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);
                 return false;
             }, () => {
                 controlUndo?.end();
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 40fe6aa68..23bdf8406 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -67,6 +67,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
         this._selDisposer?.();
     }
 
+    // transform is the inherited screentolocal xf plus any scaling that was done to make the stroke
+    // fit within its panel (e.g., for content fitting views like Lightbox or multicolumn, etc)
+    screenToLocal = () => this.props.ScreenToLocalTransform().scale(this.props.scaling?.() || 1)
+
     /**
     * @returns the center of the ink stroke in the ink document's coordinate space (not screen space, and not the ink data coordinate space); 
     * DocumentDecorations calls getBounds() on DocumentViews which call getCenter() if defined - in the case of ink it needs to be defined since
@@ -119,7 +123,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
         this._handledClick = false;
         const inkView = this.props.docViewPath().lastElement();
         const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
-        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(
+        const screenPts = inkData.map(point => this.screenToLocal().inverse().transformPoint(
             (point.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2,
             (point.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2)).map(p => ({ X: p[0], Y: p[1] }));
         const { nearestSeg } = InkStrokeProperties.nearestPtToStroke(screenPts, { X: e.clientX, Y: e.clientY });
@@ -160,7 +164,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
      */
     ptFromScreen = (scrPt: { X: number, Y: number }) => {
         const { inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
-        const docPt = this.props.ScreenToLocalTransform().transformPoint(scrPt.X, scrPt.Y);
+        const docPt = this.screenToLocal().transformPoint(scrPt.X, scrPt.Y);
         const inkPt = {
             X: (docPt[0] - inkStrokeWidth / 2) / inkScaleX + inkStrokeWidth / 2 + inkLeft,
             Y: (docPt[1] - inkStrokeWidth / 2) / inkScaleY + inkStrokeWidth / 2 + inkTop,
@@ -178,7 +182,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
             X: (inkPt.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2,
             Y: (inkPt.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2
         };
-        const scrPt = this.props.ScreenToLocalTransform().inverse().transformPoint(docPt.X, docPt.Y);
+        const scrPt = this.screenToLocal().inverse().transformPoint(docPt.X, docPt.Y);
         return { X: scrPt[0], Y: scrPt[1] };
     }
 
@@ -192,7 +196,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
     snapPt = (scrPt: { X: number, Y: number }, excludeSegs?: number[]) => {
         const { inkData } = this.inkScaledData();
         const { nearestPt, distance } = InkStrokeProperties.nearestPtToStroke(inkData, this.ptFromScreen(scrPt), excludeSegs ?? []);
-        return { nearestPt, distance: distance * this.props.ScreenToLocalTransform().inverse().Scale };
+        return { nearestPt, distance: distance * this.screenToLocal().inverse().Scale };
     }
 
     /**
@@ -220,10 +224,14 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
         };
     }
 
+    //
+    // this updates the highlight for the nearest point on the curve to the cursor.  
+    // if the user double clicks, this highlighted point will be added as a control point in the curve.
+    //
     @action
     onPointerMove = (e: React.PointerEvent) => {
         const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
-        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(
+        const screenPts = inkData.map(point => this.screenToLocal().inverse().transformPoint(
             (point.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2,
             (point.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2)).map(p => ({ X: p[0], Y: p[1] }));
         const { distance, nearestT, nearestSeg, nearestPt } = InkStrokeProperties.nearestPtToStroke(screenPts, { X: e.clientX, Y: e.clientY });
@@ -246,10 +254,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
     componentUI = (boundsLeft: number, boundsTop: number) => {
         const inkDoc = this.props.Document;
         const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
-        const screenSpaceCenterlineStrokeWidth = Math.min(3, inkStrokeWidth * this.props.ScreenToLocalTransform().inverse().Scale);  // the width of the blue line widget that shows the centerline of the ink stroke
+        const screenSpaceCenterlineStrokeWidth = Math.min(3, inkStrokeWidth * this.screenToLocal().inverse().Scale);  // the width of the blue line widget that shows the centerline of the ink stroke
 
-        const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth);
-        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(
+        const screenInkWidth = this.screenToLocal().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth);
+        const screenPts = inkData.map(point => this.screenToLocal().inverse().transformPoint(
             (point.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2,
             (point.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2)).map(p => ({ X: p[0], Y: p[1] }));
         const screenHdlPts = screenPts;
@@ -264,9 +272,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
                         <InkEndPtHandles
                             inkView={this.props.docViewPath().lastElement()}
                             inkDoc={inkDoc}
-                            startPt={this.ptToScreen(inkData[0])}
-                            endPt={this.ptToScreen(inkData.lastElement())}
-                            screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth} /></div>) :
+                            startPt={screenPts[0]}
+                            endPt={screenPts.lastElement()}
+                            screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth} />
+                    </div>) :
                 <div className="inkstroke-UI" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}>
                     {InteractionUtils.CreatePolyline(screenPts, 0, 0, Colors.MEDIUM_BLUE, screenInkWidth[0], screenSpaceCenterlineStrokeWidth,
                         StrCast(inkDoc.strokeLineJoin), StrCast(this.layoutDoc.strokeLineCap), StrCast(inkDoc.strokeBezier),
@@ -277,14 +286,13 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
                         inkCtrlPoints={inkData}
                         screenCtrlPoints={screenHdlPts}
                         nearestScreenPt={this.nearestScreenPt}
-                        screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth}
-                        ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
+                        screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth} />
                     <InkTangentHandles
                         inkView={this.props.docViewPath().lastElement()}
                         inkDoc={inkDoc}
                         screenCtrlPoints={screenHdlPts}
                         screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth}
-                        ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
+                        ScreenToLocalTransform={this.screenToLocal} />
                 </div>;
     }