From ba58b46b55527c23cd23b34c2ca13be945c4bf4e Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Sun, 7 Apr 2024 13:35:40 -0400 Subject: radius erase changes --- src/client/util/CurrentUserUtils.ts | 10 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 165 ++++++++++----------- src/fields/InkField.ts | 3 + 3 files changed, 94 insertions(+), 84 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 714e33d25..96edce177 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -650,7 +650,15 @@ export class CurrentUserUtils { return [ { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen-nib", toolType: "pen", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }}, { title: "Write", toolTip: "Write (Ctrl+Shift+P)", btnType: ButtonType.ToggleButton, icon: "pen", toolType: "write", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, - { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.ToggleButton, icon: "eraser", toolType: "eraser", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, + // { title: "Eraser", toolTip: "Eraser (Ctrl+E)", width: 50, btnType: ButtonType.DropdownList, icon: "eraser", toolType: "eraser", ignoreClick: true, scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }, + // btnList: new List(["Stroke Erase", "Segment Erase", "Radius Erase"]) }, + { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.MultiToggleButton, toolType:"eraser", scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}, + subMenu: [ + { title: "Stroke", toolTip: "Stroke Erase", btnType: ButtonType.ToggleButton, icon: "eraser", toolType:"strokeeraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, + { title: "Segment", toolTip: "Segment Erase", btnType: ButtonType.ToggleButton, icon: "minus", toolType:"segmenteraser",ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, + { title: "Radius", toolTip: "Radius Erase", btnType: ButtonType.ToggleButton, icon: "circle", toolType:"radiuseraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, + // { title: "Width", toolTip: "Eraser Width", btnType: ButtonType.NumberSliderButton, toolType:"strokeWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1}, + ]}, { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle", toolType:GestureUtils.Gestures.Circle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square", toolType:GestureUtils.Gestures.Rectangle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, { title: "Line", toolTip: "Line (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "minus", toolType:GestureUtils.Gestures.Line, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 18b75d8ff..da4c53d66 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -610,10 +610,21 @@ export class CollectionFreeFormView extends CollectionSubView segment.map(pt => pt)) - // segments[0][3].x === segments[1][0].x - - // 3 == "3" true - // 3 === "3" falsen !== - - // for (var i = 0; i < segments.length; i ++) { - // if (segments[i][0].points.lastElement().x === segments[i+1][0].points.lastElement().x && segments[i][0].points.lastElement().y === segments[i+1][0].points.lastElement().y) { - // segments[i][0].points.pop(); - // segments[i][0].points = segments[i][0].points.concat(segments[i+1][0].points); - // segments.splice(i+1, 1); - // } - // i++; + var segments; + if (Doc.ActiveTool === InkTool.SegmentEraser) { + segments = this.segmentErase(intersect.inkView, intersect.t); // intersect.t is where the eraser intersected the ink stroke - want to remove the segment that starts at the intersection just before this t value and goes to the one just after it + } else if (Doc.ActiveTool === InkTool.RadiusEraser) { + console.log("RADIUS"); + segments = this.radiusErase(intersect.inkView, intersect.t); + } + // } else if (Doc.ActiveTool === InkTool.RadiusEraser) { + // segments = undefined; // } - segments.forEach(segment => + segments?.forEach(segment => this.forceStrokeGesture( e, GestureUtils.Gestures.Stroke, @@ -837,6 +839,42 @@ export class CollectionFreeFormView extends CollectionSubView { + const segments: Segment[] = []; + var segment1: Segment = []; + var segment2: Segment = []; + const eraseWidth = ActiveInkWidth() / 100; + const { inkData } = (ink?.ComponentView as InkingStroke).inkScaledData(); + for (var i = 0; i < inkData.length - 3; i += 4) { + const currCurveT = Math.floor(i/4); + const inkSegment: Bezier = InkField.Segment(inkData, i); + if (eraseT >= currCurveT && eraseT < currCurveT+1) { + if (eraseT - eraseWidth > currCurveT && eraseT + eraseWidth < currCurveT + 1) { + segment1.push(inkSegment.split(0, eraseT - currCurveT - eraseWidth)); + segment2.push(inkSegment.split(eraseT - currCurveT + eraseWidth, 1)); + } else if (eraseT - eraseWidth < currCurveT) { + segment2.push(inkSegment.split(eraseT - currCurveT + eraseWidth, 1)); + } else if (eraseT + eraseWidth > currCurveT + 1) { + segment1.push(inkSegment.split(0, eraseT - currCurveT - eraseWidth)); + } + } else if (eraseT > currCurveT + 1) { + segment1.push(inkSegment); + } else { + segment2.push(inkSegment); + } + } + + // push 1 or both segments if they are not empty + if (segment1.length && (Math.abs(segment1[0].points[0].x - segment1[0].points.lastElement().x) > 0.5 || Math.abs(segment1[0].points[0].y - segment1[0].points.lastElement().y) > 0.5)) { + segments.push(segment1); + } + if (segment2.length && (Math.abs(segment2[0].points[0].x - segment2[0].points.lastElement().x) > 0.5 || Math.abs(segment2[0].points[0].y - segment2[0].points.lastElement().y) > 0.5)) { + segments.push(segment2); + } + return segments; + } + /** * Erases ink strokes by segments. Locates intersections of the current ink stroke with all other ink strokes (including itself), * then erases the segment that was intersected by the eraser. This is done by creating either 1 or two resulting segments @@ -846,7 +884,7 @@ export class CollectionFreeFormView extends CollectionSubView { + segmentErase = (ink: DocumentView, excludeT: number): Segment[] => { const segments: Segment[] = []; var segment1: Segment = []; @@ -873,8 +911,17 @@ export class CollectionFreeFormView extends CollectionSubView value > 0.0001 && value < Math.floor(inkData.length / 4) ? index : -1) + .filter(index => index !== -1); + + // Filter intersections and segmentIndexes based on validIndices + intersections = indices.map(index => intersections[index]); + segmentIndexes = indices.map(index => segmentIndexes[index]); + // intersections = intersections.slice(1, intersections.length ); // take the 0 intersection out + // segmentIndexes = segmentIndexes.slice(1, segmentIndexes.length); // same for indexes } if (intersections.length) { @@ -938,13 +985,16 @@ export class CollectionFreeFormView extends CollectionSubView { - // const docCurveTVal = t + Math.floor(i / 4); - // if (excludeT < startSegmentT || excludeT > docCurveTVal) { - // const localStartTVal = startSegmentT - Math.floor(i / 4); - // if (!hasSplit) { - // t !== (localStartTVal < 0 ? 0 : localStartTVal) && segment1.push(inkSegment.split(localStartTVal < 0 ? 0 : localStartTVal, t)); - // } else { - // t !== (localStartTVal < 0 ? 0 : localStartTVal) && segment2.push(inkSegment.split(localStartTVal < 0 ? 0 : localStartTVal, t)); - // } - // // if (segment.length && (Math.abs(segment[0].points[0].x - segment[0].points.lastElement().x) > 0.5 || Math.abs(segment[0].points[0].y - segment[0].points.lastElement().y) > 0.5)) segments.push(segment); - // } - // // start a new segment from the intersection t value - // if (tVals.length - 1 === index) { - // const split = inkSegment.split(t).right; - // if (!hasSplit) { - // if (split && (Math.abs(split.points[0].x - split.points.lastElement().x) > 0.5 || Math.abs(split.points[0].y - split.points.lastElement().y) > 0.5)) segment1.push(split); - // } else { - // if (split && (Math.abs(split.points[0].x - split.points.lastElement().x) > 0.5 || Math.abs(split.points[0].y - split.points.lastElement().y) > 0.5)) segment2.push(split); - // } - // } - // startSegmentT = docCurveTVal; - // }); - // } else { - // if (!hasSplit) { - // segment1.push(inkSegment); - // } else { - // segment2.push(inkSegment); - // } - // } - // } - // if (segment1.length && (Math.abs(segment1[0].points[0].x - segment1[0].points.lastElement().x) > 0.5 || Math.abs(segment1[0].points[0].y - segment1[0].points.lastElement().y) > 0.5)) { - // segments.push(segment1); - // } - // if (segment2.length && (Math.abs(segment2[0].points[0].x - segment2[0].points.lastElement().x) > 0.5 || Math.abs(segment2[0].points[0].y - segment2[0].points.lastElement().y) > 0.5)) { - // segments.push(segment2); - // } }; /** diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts index b3e01229a..9c8c5df2c 100644 --- a/src/fields/InkField.ts +++ b/src/fields/InkField.ts @@ -11,6 +11,9 @@ export enum InkTool { Pen = 'pen', Highlighter = 'highlighter', Eraser = 'eraser', + StrokeEraser = 'strokeeraser', + SegmentEraser = 'segmenteraser', + RadiusEraser = 'radiuseraser', Stamp = 'stamp', Write = 'write', PresentationPin = 'presentationpin', -- cgit v1.2.3-70-g09d2