From 33f416349c00bdec405455340befb0ca85b2fee4 Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Mon, 1 Jul 2024 13:54:07 -0400
Subject: weird error?

---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 107 ++++++++++++++-------
 1 file changed, 70 insertions(+), 37 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index b8257ff31..467191735 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -7,7 +7,6 @@ import { action, computed, IReactionDisposer, makeObservable, observable, reacti
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import * as React from 'react';
-import { TbAlpha } from 'react-icons/tb';
 import { ClientUtils, DashColor, lightOrDark, OmitKeys, returnFalse, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../../ClientUtils';
 import { DateField } from '../../../../fields/DateField';
 import { ActiveEraserWidth, ActiveInkWidth, Doc, DocListCast, Field, FieldType, Opt, SetActiveInkColor, SetActiveInkWidth } from '../../../../fields/Doc';
@@ -56,7 +55,7 @@ import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannable
 import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors';
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
-import { SmartDrawHandler } from './SmartDrawHandler';
+import { DrawingOptions, SmartDrawHandler } from '../../smartdraw/SmartDrawHandler';
 
 @observer
 class CollectionFreeFormOverlayView extends React.Component<{ elements: () => ViewDefResult[] }> {
@@ -120,6 +119,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @observable _panZoomTransition: number = 0; // sets the pan/zoom transform ease time- used by nudge(), focus() etc to smoothly zoom/pan.  set to 0 to use document's transition time or default of 0
     @observable _firstRender = false; // this turns off rendering of the collection's content so that there's instant feedback when a tab is switched of what content will be shown.  could be used for performance improvement
     @observable _showAnimTimeline = false;
+    @observable _showDrawingEditor = false;
     @observable _deleteList: DocumentView[] = [];
     @observable _timelineRef = React.createRef<Timeline>();
     @observable _marqueeViewRef = React.createRef<MarqueeView>();
@@ -514,7 +514,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         e.stopPropagation();
                         break;
                     case InkTool.SmartDraw:
-                        setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, this.createDrawing, hit !== -1);
+                        setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, this.showSmartDraw, hit !== -1);
                         e.stopPropagation();
                     case InkTool.None:
                         if (!(this._props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine))) {
@@ -566,6 +566,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             }
         }
     };
+
     @action
     onEraserUp = (): void => {
         this._deleteList.lastElement()?._props.removeDocument?.(this._deleteList.map(ink => ink.Document));
@@ -607,12 +608,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     _eraserPts: number[][] = []; // keep track of the last few eraserPts to make the eraser circle 'stretch'
 
     erase = (e: PointerEvent, delta: number[]) => {
+        e.stopImmediatePropagation();
         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));
         if (Doc.ActiveTool === InkTool.RadiusEraser) {
             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);
@@ -682,9 +683,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     @action
     onEraserClick = (e: PointerEvent, doubleTap?: boolean) => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
         this.erase(e, [0, 0]);
-        e.stopPropagation();
-        return false;
     };
 
     /**
@@ -696,32 +697,32 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
      * @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;
-    };
+    // @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));
@@ -1263,15 +1264,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     };
 
     @action
-    createDrawing = (e: PointerEvent, doubleTap?: boolean) => {
-        SmartDrawHandler.Instance.displaySmartDrawHandler(e.pageX, e.pageY, this.createInkStrokes);
+    showSmartDraw = (e: PointerEvent, doubleTap?: boolean) => {
+        SmartDrawHandler.Instance.displaySmartDrawHandler(e.pageX, e.pageY, this.createDrawing, this.removeDrawing);
     };
 
+    _drawing: Doc[] = [];
     @undoBatch
-    createInkStrokes = (strokeData: [InkData, string, string][]) => {
+    createDrawing = (e: React.PointerEvent<Element>, strokeData: [InkData, string, string][], opts: DrawingOptions, gptRes: string) => {
         strokeData.forEach((stroke: [InkData, string, string]) => {
-            // const points: InkData = FitCurve(inkData, 20) as InkData;
-            // const allPts = GenerateControlPoints(inkData, alpha);
             const bounds = InkField.getBounds(stroke[0]);
             const B = this.screenToFreeformContentsXf.transformBounds(bounds.left, bounds.top, bounds.width, bounds.height);
             const inkWidth = ActiveInkWidth() * this.ScreenToLocalBoxXf().Scale;
@@ -1288,8 +1288,33 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 undefined,
                 stroke[2] === 'none' ? undefined : stroke[2]
             );
+            this._drawing.push(inkDoc);
             this.addDocument(inkDoc);
         });
+        // const collection = this._marqueeViewRef.current?.collection(undefined, false, this._drawing);
+        // if (collection) {
+        //     const docData = collection[DocData];
+        //     docData.title = opts.text;
+        //     docData.drawingInput = opts.text;
+        //     docData.drawingComplexity = opts.complexity;
+        //     docData.drawingColored = opts.autoColor;
+        //     docData.drawingSize = opts.size;
+        //     docData.drawingData = gptRes;
+        // }
+        this._batch?.end();
+    };
+
+    removeDrawing = (doc?: Doc) => {
+        this._batch = UndoManager.StartBatch('regenerateDrawing');
+        if (doc) {
+            const docData: Doc = doc[DocData];
+            const children = docData.data as unknown as Doc[];
+            this._props.removeDocument?.(doc);
+            this._props.removeDocument?.(children);
+        } else {
+            this._props.removeDocument?.(this._drawing);
+        }
+        this._drawing = [];
     };
 
     @action
@@ -1995,6 +2020,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 }),
                 icon: 'eye',
             });
+        optionItems.push({
+            description: (this._showDrawingEditor ? 'Close' : 'Show') + ' Drawing Editor',
+            event: action(() => {
+                this._showDrawingEditor = !this._showDrawingEditor;
+                this._showDrawingEditor ? SmartDrawHandler.Instance.displayRegenerate(this._downX, this._downY - 10, this.createDrawing, this.removeDrawing) : SmartDrawHandler.Instance.hideRegenerate();
+            }),
+            icon: 'pen-to-square',
+        });
         this._props.renderDepth &&
             optionItems.push({
                 description: 'Use Background Color as Default',
-- 
cgit v1.2.3-70-g09d2