From 610147f7d48ae5a8191fff45cb6d0a5e71bf94a5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 2 Sep 2021 15:25:53 -0400 Subject: cleaned up overlay ink stroke in document decorations --- src/client/views/DocumentDecorations.scss | 3 ++ src/client/views/DocumentDecorations.tsx | 46 ++++++++++++------------------- src/client/views/InkingStroke.tsx | 33 +++++++++++++++++----- src/client/views/nodes/DocumentView.tsx | 1 + 4 files changed, 48 insertions(+), 35 deletions(-) (limited to 'src') 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 =
+ {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)} + +
} return (
@@ -516,17 +516,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P }
-
- {selectedLine} -
+ {selectedLine} {seldoc?.Document.type === DocumentType.FONTICON ? (null) :
} 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 { + 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 { + 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 : ""} 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; -- cgit v1.2.3-70-g09d2