1 files changed, 18 insertions, 28 deletions
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>}