aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/InkControls.tsx7
-rw-r--r--src/client/views/InkStrokeProperties.ts16
-rw-r--r--src/client/views/InkingStroke.tsx15
3 files changed, 14 insertions, 24 deletions
diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index 5fe0c0f8a..ee09273e3 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -90,7 +90,6 @@ export class InkControls extends React.Component<InkControlProps> {
const formatInstance = InkStrokeProperties.Instance;
if (!formatInstance) return (null);
-
// Accessing the current ink's data and extracting all control points.
const scrData = this.props.screenCtrlPoints;
const sreenCtrlPoints: ControlPoint[] = [];
@@ -111,12 +110,10 @@ export class InkControls extends React.Component<InkControlProps> {
const nearestScreenPt = this.props.nearestScreenPt();
return (<svg>
- {/* should really have just one circle here that represents the neqraest point on the stroke to the users hover point.
- This points should be passed as a prop from InkingStroke's UI which should set it in its onPointerOver method */}
{!nearestScreenPt ? (null) :
<circle key={"npt"}
- cx={(nearestScreenPt.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
- cy={(nearestScreenPt.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
+ cx={nearestScreenPt.X}
+ cy={nearestScreenPt.Y}
r={screenSpaceLineWidth * 4}
fill={"#00007777"}
stroke={"#00007777"}
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 115e75c2a..0b7fe5cd1 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -10,6 +10,7 @@ import { DocumentType } from "../documents/DocumentTypes";
import { CurrentUserUtils } from "../util/CurrentUserUtils";
import { SelectionManager } from "../util/SelectionManager";
import { undoBatch } from "../util/UndoManager";
+import { last } from "lodash";
export class InkStrokeProperties {
static Instance: InkStrokeProperties | undefined;
@@ -83,18 +84,8 @@ export class InkStrokeProperties {
const newsegs = new Bezier(array).split(t);
controls.splice(i, 4, ...[...newsegs.left.points.map(p => ({ X: p.x, Y: p.y })), ...newsegs.right.points.map(p => ({ X: p.x, Y: p.y }))]);
- let brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
// Updating the indices of the control points whose handle tangency has been broken.
- if (brokenIndices) {
- brokenIndices = new List(brokenIndices.map((control) => {
- if (control > i) {
- return control + 4;
- } else {
- return control;
- }
- }));
- }
- doc.brokenInkIndices = brokenIndices;
+ doc.brokenInkIndices = new List(Cast(doc.brokenInkIndices, listSpec("number"), []).map(control => control > i ? control + 4 : control));
this._currentPoint = -1;
return controls;
@@ -160,11 +151,14 @@ export class InkStrokeProperties {
deletePoints = () => this.applyFunction((doc: Doc, ink: InkData) => {
const newPoints: { X: number, Y: number }[] = [];
const toRemove = Math.floor(((this._currentPoint + 2) / 4));
+ const last = this._currentPoint === ink.length - 1;
for (let i = 0; i < ink.length; i++) {
if (Math.floor((i + 2) / 4) !== toRemove && (toRemove !== 0 || i > 3)) {
newPoints.push({ X: ink[i].X, Y: ink[i].Y });
}
}
+ doc.brokenInkIndices = new List(Cast(doc.brokenInkIndices, listSpec("number"), []).map(control => control >= toRemove * 4 ? control - 4 : control));
+ if (last) newPoints.splice(newPoints.length - 3, 2);
this._currentPoint = -1;
if (newPoints.length < 4) return undefined;
if (newPoints.length === 4) {
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 83fe04893..40bed0eca 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -141,9 +141,9 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
@action
onPointerOver = (e: React.PointerEvent) => {
const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
- const screenOrigin = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth)[0];
- const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(point.X, point.Y)).map(p => ({ X: p[0], Y: p[1] }));
+ const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().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 screenTop = Math.min(...screenPts.map(p => p.Y)) - screenInkWidth / 2;
const screenLeft = Math.min(...screenPts.map(p => p.X)) - screenInkWidth / 2;
var nearest = Number.MAX_SAFE_INTEGER;
@@ -151,16 +151,15 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
this._nearestSeg = -1;
this._nearestScrPt = { X: 0, Y: 0 };
for (var i = 0; i < screenPts.length - 3; i += 4) {
- const array = [{ x: screenPts[i].X, y: screenPts[i].Y }, { x: screenPts[i + 1].X, y: screenPts[i + 1].Y }, { x: screenPts[i + 2].X, y: screenPts[i + 2].Y }, { x: screenPts[i + 3].X, y: screenPts[i + 3].Y }];
- const point = new Bezier(array).project({ x: e.clientX + screenLeft - screenOrigin[0], y: e.clientY + screenTop - screenOrigin[1] });
+ const array = [screenPts[i], screenPts[i + 1], screenPts[i + 2], screenPts[i + 3]];
+ const point = new Bezier(array.map(p => ({ x: p.X, y: p.Y }))).project({ x: e.clientX, y: e.clientY });
if (point.t) {
- const dist = (point.x - screenLeft - e.clientX + screenOrigin[0]) * (point.x - screenLeft - e.clientX + screenOrigin[0]) +
- (point.y - screenTop - e.clientY + screenOrigin[1]) * (point.y - screenTop - e.clientY + screenOrigin[1]);
+ const dist = (point.x - e.clientX) * (point.x - e.clientX) + (point.y - e.clientY) * (point.y - e.clientY);
if (dist < nearest) {
nearest = dist;
this._nearestT = point.t;
this._nearestSeg = i;
- this._nearestScrPt = { X: point.x, Y: point.y };
+ this._nearestScrPt = { X: point.x - screenLeft, Y: point.y - screenTop };
}
}
}
@@ -234,7 +233,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
overflow: "visible",
}}
onPointerLeave={action(e =>
- this._nearestScrPt = undefined
+ console.log("") //this._nearestScrPt = undefined
)}
onPointerMove={this.props.isSelected() ? this.onPointerOver : undefined}
onPointerDown={this.onPointerDown}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 23:13:55 +0000