cleaned up overlay ink stroke in document decorations

4 files changed, 48 insertions, 35 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 9479fd365..68e0d12d4 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -7,6 +7,9 @@ $linkGap : 3px;
     z-index: 2000;
 }
 .documentDecorations-inkstroke {
+    position: absolute;
+    overflow: visible;
+    pointer-events: none;
 
   svg:not(:root) {
     overflow: visible !important;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index ce33f488a..3ffbb2904 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -457,23 +457,23 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
         bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight));
 
         const useRotation = seldoc.rootDoc.type === DocumentType.INK;
-        const docView = seldoc.docView;
-        let selectedLine = null;
-
-        if (useRotation && docView) {
-            const inkData = Cast(seldoc.rootDoc.data, InkField)?.inkData ?? [{ X: 0, Y: 0 }];
-            const inkDoc = seldoc.layoutDoc;
-            const overlayInkWidth = 10;
-
-            const { inkScaleX, inkScaleY, inkStrokeWidth } = InkingStroke.inkScaling(inkDoc, inkData, docView.props.PanelWidth(), docView.props.PanelHeight());
-
-            const screenInkWidth = docView.screenToLocal().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth);
-            const screenPts = inkData.map(point => docView.screenToLocal().inverse().transformPoint(point.X * inkScaleX, point.Y * inkScaleY)).map(p => ({ X: p[0], Y: p[1] }));
-            const screenTop = Math.min(...screenPts.map(p => p.Y)) - screenInkWidth[0] / 2;
-            const screenLeft = Math.min(...screenPts.map(p => p.X)) - screenInkWidth[0] / 2;
-
-            selectedLine = InteractionUtils.CreatePolyline(screenPts, screenLeft, screenTop, Colors.MEDIUM_BLUE, overlayInkWidth, overlayInkWidth, StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"),
-                StrCast(inkDoc.strokeStartMarker), StrCast(inkDoc.strokeEndMarker), StrCast(inkDoc.strokeDash), 1, 1, "", "none", 1.0, false);
+        const screenData = seldoc.ComponentView?.screenStrokeData?.();
+        let selectedLine = (null);
+        if (screenData) {
+            const inkDoc = seldoc.props.Document;
+            const overlayWidth = 10;
+            selectedLine = <div className="documentDecorations-inkstroke" style={{
+                width: (bounds.r - bounds.x) + "px",
+                height: (bounds.b - bounds.y) + "px",
+                left: bounds.x,
+                top: bounds.y,
+            }} >
+                {InteractionUtils.CreatePolyline(screenData.screenPts, screenData.screenLeft, screenData.screenTop, Colors.MEDIUM_BLUE, overlayWidth, overlayWidth,
+                    StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"),
+                    StrCast(inkDoc.strokeStartMarker), StrCast(inkDoc.strokeEndMarker),
+                    StrCast(inkDoc.strokeDash), 1, 1, "", "none", 1.0, false)}
+
+            </div>
         }
 
         return (<div className="documentDecorations" style={{ background: CurrentUserUtils.ActiveDashboard?.darkScheme ? "dimgray" : "" }} >
@@ -516,17 +516,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
                         </>
                     }
                 </div >
-                <div className="documentDecorations-inkstroke" style={{
-                    position: "absolute",
-                    width: (bounds.r - bounds.x) + "px",
-                    height: (bounds.b - bounds.y) + "px",
-                    left: bounds.x,
-                    top: bounds.y,
-                    overflow: "visible",
-                    pointerEvents: "none",
-                }} >
-                    {selectedLine}
-                </div>
+                {selectedLine}
                 {seldoc?.Document.type === DocumentType.FONTICON ? (null) : <div className="link-button-container" key="links" style={{ left: bounds.x - this._resizeBorderWidth / 2 + 10, top: bounds.b + this._resizeBorderWidth / 2 }}>
                     <DocumentButtonBar views={SelectionManager.Views} />
                 </div>}
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index b8ab0c4d8..8461930bc 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -21,6 +21,7 @@ import { InkControls } from "./InkControls";
 import { InkHandles } from "./InkHandles";
 import { Colors } from "./global/globalEnums";
 import { GestureOverlay } from "./GestureOverlay";
+import { isThisTypeNode } from "typescript";
 
 type InkDocument = makeInterface<[typeof documentSchema]>;
 const InkDocument = makeInterface(documentSchema);
@@ -38,6 +39,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         // this._previousColor = ActiveInkColor();
     }
 
+    componentDidMount() {
+        this.props.setContentView?.(this);
+    }
+
     public static LayoutString(fieldStr: string) {
         return FieldView.LayoutString(InkingStroke, fieldStr);
     }
@@ -88,8 +93,9 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         // }
     }
 
-    public static inkScaling(inkDoc: Doc, inkData: InkData, panelWidth: number, panelHeight: number) {
-        const inkStrokeWidth = NumCast(inkDoc.strokeWidth, 1);
+    inkScaledData = () => {
+        const inkData: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
+        const inkStrokeWidth = NumCast(this.rootDoc.strokeWidth, 1);
         const inkTop = Math.min(...inkData.map(p => p.Y)) - inkStrokeWidth / 2;
         const inkBottom = Math.max(...inkData.map(p => p.Y)) + inkStrokeWidth / 2;
         const inkLeft = Math.min(...inkData.map(p => p.X)) - inkStrokeWidth / 2;
@@ -102,10 +108,23 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             inkLeft,
             inkWidth,
             inkHeight,
-            inkScaleX: inkHeight === inkStrokeWidth ? 1 : (panelWidth - inkStrokeWidth) / (inkWidth - inkStrokeWidth),
-            inkScaleY: inkWidth === inkStrokeWidth ? 1 : (panelHeight - inkStrokeWidth) / (inkHeight - inkStrokeWidth)
+            inkScaleX: inkHeight === inkStrokeWidth ? 1 : (this.props.PanelWidth() - inkStrokeWidth) / (inkWidth - inkStrokeWidth),
+            inkScaleY: inkWidth === inkStrokeWidth ? 1 : (this.props.PanelHeight() - inkStrokeWidth) / (inkHeight - inkStrokeWidth)
         };
     }
+
+    screenStrokeData = () => {
+        const inkData: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
+        const { inkScaleX, inkScaleY, inkStrokeWidth } = this.inkScaledData();
+
+        const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth);
+        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(point.X * inkScaleX, point.Y * inkScaleY)).map(p => ({ X: p[0], Y: p[1] }));
+        const screenTop = Math.min(...screenPts.map(p => p.Y)) - screenInkWidth[0] / 2;
+        const screenLeft = Math.min(...screenPts.map(p => p.X)) - screenInkWidth[0] / 2;
+
+        return { screenPts, screenLeft, screenTop };
+    }
+
     render() {
         TraceMobx();
         this.toggleControlButton();
@@ -114,7 +133,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
         const inkDoc: Doc = this.layoutDoc;
 
-        const { inkStrokeWidth, inkLeft, inkTop, inkScaleX, inkScaleY, inkWidth, inkHeight } = InkingStroke.inkScaling(inkDoc, data, this.props.PanelWidth(), this.props.PanelHeight());
+        const { inkStrokeWidth, inkLeft, inkTop, inkScaleX, inkScaleY, inkWidth, inkHeight } = this.inkScaledData();
 
         const strokeColor = StrCast(this.layoutDoc.color, "");
         const dotsize = Math.max(inkWidth * inkScaleX, inkHeight * inkScaleY) / 40;
@@ -160,12 +179,12 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                             inkDoc={inkDoc}
                             data={data}
                             addedPoints={addedPoints}
-                            format={[lineLeft, lineTop, scaleX, scaleY, inkStrokeWidth]}
+                            format={[inkLeft, inkTop, inkScaleX, inkScaleY, inkStrokeWidth]}
                             ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                         <InkHandles
                             inkDoc={inkDoc}
                             data={data}
-                            format={[lineLeft, lineTop, scaleX, scaleY, inkStrokeWidth]}
+                            format={[inkLeft, inkTop, inkScaleX, inkScaleY, inkStrokeWidth]}
                             ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
                     </> : ""}
             </svg>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 745d58656..3587c1d2a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -88,6 +88,7 @@ export interface DocComponentView {
     setKeyFrameEditing?: (set: boolean) => void; // whether the document is in keyframe editing mode (if it is, then all hidden documents that are not active at the keyframe time will still be shown)
     playFrom?: (time: number, endTime?: number) => void;
     setFocus?: () => void;
+    screenStrokeData?: () => { screenPts: { X: number, Y: number }[], screenTop: number, screenLeft: number };
 }
 export interface DocumentViewSharedProps {
     renderDepth: number;