aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts2
-rw-r--r--src/client/views/InkControlPtHandles.tsx1
-rw-r--r--src/client/views/InkStrokeProperties.ts8
-rw-r--r--src/client/views/InkTangentHandles.tsx8
-rw-r--r--src/client/views/InkingStroke.tsx36
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>;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:01:46 +0000