From 7e439440a1d7fc3e3b29333b0502d6ed4d178309 Mon Sep 17 00:00:00 2001 From: vkalev Date: Wed, 18 Aug 2021 12:12:23 -0400 Subject: highlighter tool added & working --- src/client/views/InkHandles.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/client/views/InkHandles.tsx') diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx index 0b24c3c32..b9f75f8d7 100644 --- a/src/client/views/InkHandles.tsx +++ b/src/client/views/InkHandles.tsx @@ -16,7 +16,6 @@ import { GestureOverlay } from "./GestureOverlay"; export interface InkHandlesProps { inkDoc: Doc; data: InkData; - shape?: string; format: number[]; ScreenToLocalTransform: () => Transform; } @@ -70,7 +69,6 @@ export class InkHandles extends React.Component { // Accessing the current ink's data and extracting all handle points and handle lines. const data = this.props.data; - const shape = this.props.shape; const handlePoints: HandlePoint[] = []; const handleLines: HandleLine[] = []; if (data.length >= 4) { -- cgit v1.2.3-70-g09d2 From c316b836b5fae84546eac15ae74833d31cb1318d Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 14 Sep 2021 15:09:35 -0400 Subject: fixed handle size/placement for ink editing. --- src/client/views/InkControls.tsx | 14 +++++++------- src/client/views/InkHandles.tsx | 8 ++++---- src/client/views/InkingStroke.tsx | 4 ++-- 3 files changed, 13 insertions(+), 13 deletions(-) (limited to 'src/client/views/InkHandles.tsx') diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx index 46377380a..b62239c4f 100644 --- a/src/client/views/InkControls.tsx +++ b/src/client/views/InkControls.tsx @@ -96,8 +96,8 @@ export class InkControls extends React.Component { } } const addedPoints = this.props.addedPoints; - const [left, top, scaleX, scaleY, strokeWidth] = this.props.format; - + const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format; + const rectHdlSize = this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4; return ( <> {addedPoints.map((pts, i) => @@ -119,11 +119,11 @@ export class InkControls extends React.Component { {controlPoints.map((control, i) => { this.changeCurrPoint(control.I); diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx index b9f75f8d7..4e3a842d0 100644 --- a/src/client/views/InkHandles.tsx +++ b/src/client/views/InkHandles.tsx @@ -83,7 +83,7 @@ export class InkHandles extends React.Component { handleLines.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 }); } } - const [left, top, scaleX, scaleY, strokeWidth] = this.props.format; + const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format; return ( <> @@ -92,7 +92,7 @@ export class InkHandles extends React.Component { this.onHandleDown(e, pts.I)} @@ -108,7 +108,7 @@ export class InkHandles extends React.Component { x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke={Colors.MEDIUM_BLUE} - strokeWidth={strokeWidth / 4} + strokeWidth={screenSpaceLineWidth} display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> { x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} stroke={Colors.MEDIUM_BLUE} - strokeWidth={strokeWidth / 4} + strokeWidth={screenSpaceLineWidth} display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> )} diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 771419937..06d15a108 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -146,12 +146,12 @@ export class InkingStroke extends ViewBoxBaseComponent : ""} -- cgit v1.2.3-70-g09d2 From abc5f96945fc0716fb1ccb4c99005bc7b7473086 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 14 Sep 2021 15:49:21 -0400 Subject: fixed adding a new point on an ink stroke --- src/client/views/InkControls.tsx | 119 ++++++++++++++++++++------------------ src/client/views/InkHandles.tsx | 15 +++-- src/client/views/InkingStroke.tsx | 25 ++++---- 3 files changed, 83 insertions(+), 76 deletions(-) (limited to 'src/client/views/InkHandles.tsx') diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx index e4861c086..4df7ee813 100644 --- a/src/client/views/InkControls.tsx +++ b/src/client/views/InkControls.tsx @@ -1,20 +1,22 @@ import React = require("react"); -import { observable, action } from "mobx"; +import { action, observable } from "mobx"; import { observer } from "mobx-react"; -import { InkStrokeProperties } from "./InkStrokeProperties"; -import { setupMoveUpEvents, emptyFunction } from "../../Utils"; -import { UndoManager } from "../util/UndoManager"; -import { ControlPoint, InkData, PointData } from "../../fields/InkField"; -import { Transform } from "../util/Transform"; -import { Colors } from "./global/globalEnums"; import { Doc } from "../../fields/Doc"; +import { ControlPoint, InkData, PointData } from "../../fields/InkField"; import { listSpec } from "../../fields/Schema"; import { Cast } from "../../fields/Types"; +import { setupMoveUpEvents } from "../../Utils"; +import { Transform } from "../util/Transform"; +import { UndoManager } from "../util/UndoManager"; +import { Colors } from "./global/globalEnums"; +import { InkStrokeProperties } from "./InkStrokeProperties"; export interface InkControlProps { inkDoc: Doc; - data: InkData; - addedPoints: PointData[]; + inkCtrlPoints: InkData; + screenCtrlPoints: InkData; + inkStrokeSamplePts: PointData[]; + screenStrokeSamplePoints: PointData[]; format: number[]; ScreenToLocalTransform: () => Transform; } @@ -87,57 +89,60 @@ export class InkControls extends React.Component { if (!formatInstance) return (null); // Accessing the current ink's data and extracting all control points. - const data = this.props.data; - const controlPoints: ControlPoint[] = []; - if (data.length >= 4) { - for (let i = 0; i <= data.length - 4; i += 4) { - controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); - controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 }); - } + const scrData = this.props.screenCtrlPoints; + const sreenCtrlPoints: ControlPoint[] = []; + for (let i = 0; i <= scrData.length - 4; i += 4) { + sreenCtrlPoints.push({ X: scrData[i].X, Y: scrData[i].Y, I: i }); + sreenCtrlPoints.push({ X: scrData[i + 3].X, Y: scrData[i + 3].Y, I: i + 3 }); } - const addedPoints = this.props.addedPoints; + + const inkData = this.props.inkCtrlPoints; + const inkCtrlPts: ControlPoint[] = []; + for (let i = 0; i <= inkData.length - 4; i += 4) { + inkCtrlPts.push({ X: inkData[i].X, Y: inkData[i].Y, I: i }); + inkCtrlPts.push({ X: inkData[i + 3].X, Y: inkData[i + 3].Y, I: i + 3 }); + } + const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format; const rectHdlSize = (i: number) => this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4; - return ( - <> - {addedPoints.map((pts, i) => - - { formatInstance?.addPoints(pts.X, pts.Y, addedPoints, i, controlPoints); }} - onMouseEnter={() => this.onEnterAddPoint(i)} - onMouseLeave={this.onLeaveAddPoint} - pointerEvents="all" - cursor="all-scroll" - /> - - )} - {controlPoints.map((control, i) => - - { - this.changeCurrPoint(control.I); - this.onControlDown(e, control.I); - }} - onMouseEnter={() => this.onEnterControl(i)} - onMouseLeave={this.onLeaveControl} - pointerEvents="all" - cursor="default" - /> - - )} - + return ( + {/* 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 */} + {this.props.screenStrokeSamplePoints.map((pts, i) => + formatInstance?.addPoints(this.props.inkStrokeSamplePts[i].X, this.props.inkStrokeSamplePts[i].Y, this.props.inkStrokeSamplePts, i, inkCtrlPts)} + onMouseEnter={() => this.onEnterAddPoint(i)} + onMouseLeave={this.onLeaveAddPoint} + pointerEvents="all" + cursor="all-scroll" + /> + )} + {sreenCtrlPoints.map((control, i) => + { + this.changeCurrPoint(control.I); + this.onControlDown(e, control.I); + }} + onMouseEnter={() => this.onEnterControl(i)} + onMouseLeave={this.onLeaveControl} + pointerEvents="all" + cursor="default" + /> + )} + ); } } \ No newline at end of file diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx index 4e3a842d0..afe94cdfb 100644 --- a/src/client/views/InkHandles.tsx +++ b/src/client/views/InkHandles.tsx @@ -1,17 +1,16 @@ import React = require("react"); -import { observable, action } from "mobx"; +import { action } from "mobx"; import { observer } from "mobx-react"; -import { InkStrokeProperties } from "./InkStrokeProperties"; -import { setupMoveUpEvents, emptyFunction } from "../../Utils"; -import { UndoManager } from "../util/UndoManager"; -import { InkData, HandlePoint, HandleLine } from "../../fields/InkField"; -import { Transform } from "../util/Transform"; import { Doc } from "../../fields/Doc"; -import { listSpec } from "../../fields/Schema"; +import { HandleLine, HandlePoint, InkData } from "../../fields/InkField"; import { List } from "../../fields/List"; +import { listSpec } from "../../fields/Schema"; import { Cast } from "../../fields/Types"; +import { emptyFunction, setupMoveUpEvents } from "../../Utils"; +import { Transform } from "../util/Transform"; +import { UndoManager } from "../util/UndoManager"; import { Colors } from "./global/globalEnums"; -import { GestureOverlay } from "./GestureOverlay"; +import { InkStrokeProperties } from "./InkStrokeProperties"; export interface InkHandlesProps { inkDoc: Doc; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 06d15a108..768808569 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -115,28 +115,29 @@ export class InkingStroke extends ViewBoxBaseComponent { - const { inkData, inkScaleX, inkScaleY, inkStrokeWidth } = this.inkScaledData(); + const inkDoc = this.props.Document; + const screenSpaceCenterlineStrokeWidth = 3; // the width of the blue line widget that shows the centerline of the ink stroke + const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData(); const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth); const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(point.X, point.Y)).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; - - const inkDoc = this.props.Document; - - const overlayWidth = 3; const screenOrigin = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - const addedPoints = InteractionUtils.CreatePoints(inkData, screenLeft, screenTop, StrCast(inkDoc.strokeColor, "none"), screenInkWidth[0], overlayWidth, + const screenSpaceSamplePoints = InteractionUtils.CreatePoints(screenPts, screenLeft, screenTop, StrCast(inkDoc.strokeColor, "none"), screenInkWidth[0], screenSpaceCenterlineStrokeWidth, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), inkScaleX, inkScaleY, "", "none", this.props.isSelected() && inkStrokeWidth <= 5, false); + const inkSpaceSamplePoints = InteractionUtils.CreatePoints(inkData, inkLeft, inkTop, StrCast(inkDoc.strokeColor, "none"), inkStrokeWidth, screenSpaceCenterlineStrokeWidth, + StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker), + StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), 1, 1, "", "none", this.props.isSelected() && inkStrokeWidth <= 5, false); return
- {InteractionUtils.CreatePolyline(screenPts, screenLeft, screenTop, Colors.MEDIUM_BLUE, screenInkWidth[0], overlayWidth, + {InteractionUtils.CreatePolyline(screenPts, screenLeft, screenTop, Colors.MEDIUM_BLUE, screenInkWidth[0], screenSpaceCenterlineStrokeWidth, StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"), StrCast(inkDoc.strokeStartMarker), StrCast(inkDoc.strokeEndMarker), StrCast(inkDoc.strokeDash), inkScaleX, inkScaleY, "", "none", 1.0, false)} @@ -144,14 +145,16 @@ export class InkingStroke extends ViewBoxBaseComponent : ""}
-- cgit v1.2.3-70-g09d2