diff options
| author | eleanor-park <eleanor_park@brown.edu> | 2024-08-27 16:22:33 -0400 |
|---|---|---|
| committer | eleanor-park <eleanor_park@brown.edu> | 2024-08-27 16:22:33 -0400 |
| commit | 6f73686ec4dc3e01ae3eacc0150aa59eafea0325 (patch) | |
| tree | 392d6ebcb6122326441afbb7dfe69ff4cb583c1d /src/client/views/collections/collectionFreeForm | |
| parent | fd5278045e8c2e280d81cb965c0b2cc5afb59be8 (diff) | |
pulling from master
Diffstat (limited to 'src/client/views/collections/collectionFreeForm')
3 files changed, 21 insertions, 110 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 8575807b3..8dc5f03b0 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -599,6 +599,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection _eraserLock = 0; _eraserPts: number[][] = []; // keep track of the last few eraserPts to make the eraser circle 'stretch' + /** + * Erases strokes by intersecting them with an invisible "eraser stroke". + * By default this iterates through all intersected ink strokes, determines which parts of a stroke need to be erased based on the type + * of eraser, draws back the ink segments to keep, and deletes the original stroke. + * + * Radius eraser: erases strokes by intersecting them with a circle of variable radius. Essentially creates an InkField for the + * eraser circle, then determines its intersections with other ink strokes. Each stroke's DocumentView and its + * intersection t-values are put into a map, which gets looped through to take out the erased parts. + */ erase = (e: PointerEvent, delta: number[]) => { e.stopImmediatePropagation(); const currPoint = { X: e.clientX, Y: e.clientY }; @@ -646,11 +655,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return false; }; - /** - * Erases strokes by intersecting them with an invisible "eraser stroke". - * By default this iterates through all intersected ink strokes, determines their segmentation, draws back the non-intersected segments, - * and deletes the original stroke. - */ @action onEraserMove = (e: PointerEvent, down: number[], delta: number[]) => { this.erase(e, delta); @@ -665,42 +669,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection this.erase(e, [0, 0]); }; - /** - * Erases strokes by intersecting them with a circle of variable radius. Essentially creates an InkField for the - * eraser circle, then determines its intersections with other ink strokes. Each stroke's DocumentView and its - * intersection t-values are put into a map, which gets looped through to take out the erased parts. - * @param e - * @param down - * @param delta - * @returns - */ - // @action - // onRadiusEraserMove = (e: PointerEvent, down: number[], delta: number[]) => { - // const currPoint = { X: e.clientX, Y: e.clientY }; - // this._eraserPts.push([currPoint.X, currPoint.Y]); - // this._eraserPts = this._eraserPts.slice(Math.max(0, this._eraserPts.length - 5)); - // const strokeMap: Map<DocumentView, number[]> = this.getRadiusEraserIntersections({ X: currPoint.X - delta[0], Y: currPoint.Y - delta[1] }, currPoint); - - // strokeMap.forEach((intersects, stroke) => { - // if (!this._deleteList.includes(stroke)) { - // this._deleteList.push(stroke); - // SetActiveInkWidth(StrCast(stroke.Document.stroke_width?.toString()) || '1'); - // SetActiveInkColor(StrCast(stroke.Document.color?.toString()) || 'black'); - // const segments = this.radiusErase(stroke, intersects.sort()); - // segments?.forEach(segment => - // this.forceStrokeGesture( - // e, - // Gestures.Stroke, - // segment.reduce((data, curve) => [...data, ...curve.points.map(p => stroke.ComponentView?.ptToScreen?.({ X: p.x, Y: p.y }) ?? { X: 0, Y: 0 })], [] as PointData[]) - // ) - // ); - // } - // stroke.layoutDoc.opacity = 0; - // stroke.layoutDoc.dontIntersect = true; - // }); - // return false; - // }; - forceStrokeGesture = (e: PointerEvent, gesture: Gestures, points: InkData, text?: any) => { this.onGesture(e, new GestureUtils.GestureEvent(gesture, points, InkField.getBounds(points), text)); }; @@ -1240,6 +1208,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return tVals; }; + /** + * Creates an ink document to add to the freeform canvas. + */ createInkDoc = (points: InkData, transformedBounds?: { x: number; y: number; width: number; height: number }) => { const bounds = InkField.getBounds(points); const B = transformedBounds || this.screenToFreeformContentsXf.transformBounds(bounds.left, bounds.top, bounds.width, bounds.height); @@ -1273,6 +1244,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection _drawing: Doc[] = []; _drawingContainer: Doc | undefined = undefined; + /** + * Function that creates a drawing--a group of ink strokes--to go with the smart draw function. + */ @undoBatch createDrawingDoc = (strokeData: [InkData, string, string][], opts: DrawingOptions, gptRes: string) => { this._drawing = []; @@ -1304,6 +1278,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return collection; }; + /** + * Part of regenerating a drawing--deletes the old drawing. + */ removeDrawing = (doc?: Doc) => { this._batch = UndoManager.StartBatch('regenerateDrawing'); if (doc) { @@ -1317,6 +1294,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection this._drawing = []; }; + /** + * Adds the created drawing to the freeform canvas and sets the metadata. + */ addDrawing = (doc: Doc, opts: DrawingOptions, gptRes: string) => { const docData = doc[DocData]; docData.title = opts.text.match(/^(.*?)~~~.*$/)?.[1] || opts.text; @@ -1926,8 +1906,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const locPt = this.ScreenToLocalBoxXf().transformPoint(e.clientX, e.clientY); this._eraserX = locPt[0]; this._eraserY = locPt[1]; - // Doc.ActiveTool === InkTool.RadiusEraser ? this._childPointerEvents = 'none' : this._childPointerEvents = 'all' - // super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY)); }; @action diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index 76c37dff0..b3fdd9379 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -21,7 +21,6 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> { public pinWithView: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction; public classifyImages: (e: React.MouseEvent | undefined) => void = unimplementedFunction; public groupImages: () => void = unimplementedFunction; - public smoothStrokes: (docs?: Doc[]) => void = unimplementedFunction; public isShown = () => this._opacity > 0; constructor(props: any) { super(props); @@ -42,7 +41,6 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> { <IconButton tooltip="Delete Documents" onPointerDown={this.delete} icon={<FontAwesomeIcon icon="trash-alt" />} color={this.userColor} /> <IconButton tooltip="Pin selected region" onPointerDown={this.pinWithView} icon={<FontAwesomeIcon icon="map-pin" />} color={this.userColor} /> <IconButton tooltip="Classify Images" onPointerDown={this.classifyImages} icon={<FontAwesomeIcon icon="object-group" />} color={this.userColor} /> - <IconButton tooltip="Smooth Strokes" onPointerDown={() => this.smoothStrokes} icon={<FontAwesomeIcon icon="object-group" />} color={this.userColor} /> </> ); return this.getElement(buttons); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 92c0da983..bc1dfed92 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -284,7 +284,6 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps MarqueeOptionsMenu.Instance.pinWithView = this.pinWithView; MarqueeOptionsMenu.Instance.classifyImages = this.classifyImages; MarqueeOptionsMenu.Instance.groupImages = this.groupImages; - MarqueeOptionsMenu.Instance.smoothStrokes = this.smoothStrokes; document.addEventListener('pointerdown', hideMarquee, true); document.addEventListener('wheel', hideMarquee, true); } else { @@ -498,70 +497,6 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps }); @undoBatch - smoothStrokes = action((docs?: Doc[]) => { - docs && docs.length > 0 ? (this._selectedDocs = docs) : (this._selectedDocs = this.marqueeSelect(false, DocumentType.INK)); - if (this._selectedDocs.length == 0) return; - - this._selectedDocs.forEach(stroke => { - const docView = DocumentView.getDocumentView(stroke); - const inkStroke = docView?.ComponentView as InkingStroke; - const { inkData } = inkStroke.inkScaledData(); - - const result = inkData.length > 2 && GestureUtils.GestureRecognizer.Recognize([inkData]); - console.log(result); - let polygonPoints: { X: number; Y: number }[] | undefined = undefined; - if (result && (result.Name === 'line' ? result.Score > 0.9 : result.Score > 0.8)) { - switch (result.Name) { - case Gestures.Line: - case Gestures.Triangle: - case Gestures.Rectangle: - case Gestures.Circle: - GestureOverlay.makeBezierPolygon(inkData, result.Name, true); - break; - default: - } - } else { - const distances: number[] = []; - for (var i = 0; i < inkData.length - 3; i += 4) { - distances.push(Math.sqrt((inkData[i].X - inkData[i + 3].X) ** 2 + (inkData[i].Y - inkData[i + 3].Y) ** 2)); - } - const avgDist = (NumCast(stroke.width) + NumCast(stroke.height)) / 2; - // const avgDist = distances.reduce((a, b) => a + b) / distances.length; - if (Math.sqrt((inkData.lastElement().X - inkData[0].X) ** 2 + (inkData.lastElement().Y - inkData[0].Y) ** 2) < avgDist) { - inkData.pop(); - inkData.push({ X: inkData[0].X, Y: inkData[0].Y }); - } - // const editedPoints: InkData = []; - // const toDelete: number[] = []; - - // distances.forEach((dist, i) => { - // if (dist < avgDist / 3) { - // toDelete.unshift(i * 4); - // } - // }); - // toDelete.forEach(pt => { - // InkStrokeProperties.Instance._currentPoint = pt; - // docView && InkStrokeProperties.Instance.deletePoints(docView, false); - // }); - - // for (var i = 0; i < distances.length; i++) { - // if (distances[i] > avgDist / 3) { - // editedPoints.push(...inkData.slice(i * 4, i * 4 + 4)); - // } else { - // if (i !== distances.length) { - // editedPoints.push(...inkData.slice(i * 4, i * 4 + 2)); - // editedPoints.push(...inkData.slice(i * 4 + 6, i * 4 + 8)); - // i++; - // } - // } - // } - // inkData.length = 0; - // inkData.push(...editedPoints); - } - }); - }); - - @undoBatch syntaxHighlight = action((e: KeyboardEvent | React.PointerEvent | undefined) => { const selected = this.marqueeSelect(false); if (e instanceof KeyboardEvent ? e.key === 'i' : true) { |
