diff options
Diffstat (limited to 'src/client/views/InkingStroke.tsx')
| -rw-r--r-- | src/client/views/InkingStroke.tsx | 26 |
1 files changed, 23 insertions, 3 deletions
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 449019ca8..859e53b97 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -41,6 +41,11 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume inkDoc._stayInCollection = inkDoc.isInkMask ? true : undefined; }); + /** + * Handles the movement of a selected control point when the user clicks and drags. + * @param e React Pointer Event. + * @param controlNum The number of the currently selected control point. + */ @action onControlDown = (e: React.PointerEvent, controlNum: number): void => { if (InkStrokeProperties.Instance) { @@ -56,6 +61,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume } } + /** + * Changes the current selected control point. + * @param i The number of the point to be selected. + */ @action changeCurrPoint = (i: number) => { if (InkStrokeProperties.Instance) { @@ -64,6 +73,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume } } + /** + * Deletes the currently selected points. + * @param e Keyboard Event. + */ @action delPts = (e: KeyboardEvent) => { if (["-", "Backspace", "Delete"].includes(e.key)) { @@ -71,6 +84,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume } } + /** + * Handles the movement of the entire ink object when the user clicks and drags. + * @param e React Pointer Event. + */ onPointerDown = (e: React.PointerEvent) => { if (this.props.isSelected(true)) { setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e: PointerEvent, doubleTap: boolean | undefined) => @@ -102,17 +119,18 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume const scaleY = height === strokeWidth ? 1 : (this.props.PanelHeight() - strokeWidth) / (height - strokeWidth); const strokeColor = StrCast(this.layoutDoc.color, ""); + // Visually renders the polygonal line made by the user. const points = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5 && lineBot - lineTop > 1 && lineRgt - lineLft > 1, false); + // Invisible polygonal line that enables the ink to be selected by the user. const hpoints = InteractionUtils.CreatePolyline(data, left, top, this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), "none", "none", undefined, scaleX, scaleY, "", this.props.layerProvider?.(this.props.Document) === false ? "none" : "visiblepainted", false, true); - //points for adding const apoints = InteractionUtils.CreatePoints(data, left, top, strokeColor, strokeWidth, strokeWidth, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), @@ -153,24 +171,27 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume // } const dotsize = Math.max(width * scaleX, height * scaleY) / 40; + // Additional points (controls) added by the user via click when editing the ink's format. const addpoints = apoints.map((pts, i) => <svg height="10" width="10" key={`add${i}`}> <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={strokeWidth / 2} stroke="invisible" strokeWidth={dotsize / 2} fill="invisible" onPointerDown={(e) => { formatInstance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} pointerEvents="all" cursor="all-scroll" /> </svg>); + // Green circles that allow the user to edit the curvature of the line using the selected point as the anchor. const handles = handlePoints.map((pts, i) => <svg height="10" width="10" key={`hdl${i}`}> <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={strokeWidth} strokeWidth={0} fill="green" onPointerDown={(e) => this.onControlDown(e, pts.I)} pointerEvents="all" cursor="default" display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} /> </svg>); - + // Points (red circles) of the ink that are made visible to user when editing its format. const controls = controlPoints.map((pts, i) => <svg height="10" width="10" key={`ctrl${i}`}> <circle cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2} cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={strokeWidth / 2} strokeWidth={0} fill="red" onPointerDown={(e) => { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="default" /> </svg>); + // Set of two green lines (each with a handle at the end) that are rendered perpendicular to the current selected point while editing. const handleLines = handleLine.map((pts, i) => <svg height="100" width="100" key={`line${i}`} > <line x1={(pts.X1 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y1={(pts.Y1 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} @@ -181,7 +202,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume display={(pts.dot1 === formatInstance._currPoint || pts.dot2 === formatInstance._currPoint) ? "inherit" : "none"} /> </svg>); - return ( <svg className="inkingStroke" style={{ |