aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentDecorations.scss3
-rw-r--r--src/client/views/DocumentDecorations.tsx46
-rw-r--r--src/client/views/InkingStroke.tsx33
-rw-r--r--src/client/views/nodes/DocumentView.tsx1
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;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 08:10:36 +0000