made changes to ink grouping

4 files changed, 93 insertions, 40 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index 6519b5d13..8d71ca6eb 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -5,6 +5,12 @@ import { Socket } from 'socket.io';
 import { Colors } from './client/views/global/globalEnums';
 import { Message } from './server/Message';
 import Color = require('color');
+import { InkTool } from './fields/InkField';
+import { action } from 'mobx';
+import { CurrentUserUtils } from './client/util/CurrentUserUtils';
+import { CollectionFreeFormView } from './client/views/collections/collectionFreeForm';
+import { WidthSym, HeightSym } from './fields/Doc';
+import { NumCast } from './fields/Types';
 
 export namespace Utils {
     export let DRAG_THRESHOLD = 4;
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 54fb50db9..24df3925b 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -24,6 +24,7 @@ import { RadialMenu } from "./nodes/RadialMenu";
 import HorizontalPalette from "./Palette";
 import { Touchable } from "./Touchable";
 import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
+import { checkInksToGroup } from "./nodes/button/FontIconBox";
 
 @observer
 export class GestureOverlay extends Touchable {
@@ -82,6 +83,7 @@ export class GestureOverlay extends Touchable {
         const ntt: (React.Touch | Touch)[] = Array.from(e.targetTouches);
         const nct: (React.Touch | Touch)[] = Array.from(e.changedTouches);
         const nt: (React.Touch | Touch)[] = Array.from(e.touches);
+        console.log("getNewTouches");
         this._hands.forEach((hand) => {
             for (let i = 0; i < e.targetTouches.length; i++) {
                 const pt = e.targetTouches.item(i);
@@ -108,6 +110,7 @@ export class GestureOverlay extends Touchable {
     }
 
     onReactTouchStart = (te: React.TouchEvent) => {
+        console.log("react touch start");
         document.removeEventListener("touchmove", this.onReactHoldTouchMove);
         document.removeEventListener("touchend", this.onReactHoldTouchEnd);
         if (RadialMenu.Instance?._display === true) {
@@ -204,6 +207,7 @@ export class GestureOverlay extends Touchable {
     }
 
     onReactTouchMove = (e: TouchEvent) => {
+        console.log("react touch move");
         const nts: any = this.getNewTouches(e);
         this._holdTimer && clearTimeout(this._holdTimer);
         this._holdTimer = undefined;
@@ -620,6 +624,7 @@ export class GestureOverlay extends Touchable {
                 if (!actionPerformed) {
                     const newPoints = this._points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]);
                     newPoints.pop();
+                    console.log("getting to bezier math");
                     const controlPoints: { X: number, Y: number }[] = [];
 
                     const bezierCurves = fitCurve(newPoints, 10);
@@ -630,14 +635,15 @@ export class GestureOverlay extends Touchable {
                         controlPoints.push({ X: curve[2][0], Y: curve[2][1] });
                         controlPoints.push({ X: curve[3][0], Y: curve[3][1] });
 
-
                     }
                     const dist = Math.sqrt((controlPoints[0].X - controlPoints.lastElement().X) * (controlPoints[0].X - controlPoints.lastElement().X) +
                         (controlPoints[0].Y - controlPoints.lastElement().Y) * (controlPoints[0].Y - controlPoints.lastElement().Y));
                     if (controlPoints.length > 4 && dist < 10) controlPoints[controlPoints.length - 1] = controlPoints[0];
-                    this._points = controlPoints;
-
+                        this._points = controlPoints;
+                    
                     this.dispatchGesture(GestureUtils.Gestures.Stroke);
+                    // TODO: nda - check inks to group here
+                    checkInksToGroup();
                     
                 }
                 this._points = [];
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 40164313c..f927c7934 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -441,13 +441,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             document.removeEventListener("pointerup", this.onPenUp);
             const currentCol = DocListCast(this.rootDoc.currentInkDoc)
             const rootDocList = DocListCast(this.rootDoc.data);
-            console.log("rootDocList", rootDocList[rootDocList.length - 1]);
-            console.log("currentCol", currentCol);
-            // if (!currentCol[0].data) {
-            //     currentCol[0].data = [];
-            // }
-            // let docList = DocListCast(currentCol[0]);
-
             currentCol.push(rootDocList[rootDocList.length - 1]);
             console.log(currentCol);
 
@@ -471,28 +464,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     case InkTool.Write:
                         break;
                     case InkTool.Pen: 
-                        // not the greatest solution
-                        // want to have a currentInkDoc field
-                        // const freeformOptions: DocumentOptions = {
-                        //     x: 0,
-                        //     y: 0,
-                        //     _width: 1500,
-                        //     _height: 1000,
-                        //     _fitWidth: true,
-                        //     _backgroundColor: 'pink',
-                        //     _backgroundGridShow: false,
-                        //     title: `Stroke-Col`,
-                        // };
-                        // // TODO: nda - fix the null issues that occur here
-                        // let currentInkDoc = Docs.Create.FreeformDocument([], freeformOptions)
-                        // this.rootDoc.currentInkDoc = currentInkDoc;
-                        // // example of creating the list
-                        // this.addDocument(currentInkDoc)
-                        // // wtf ...
-                        // document.addEventListener("pointerup", this.onPenUp);
-                        
-                        // create a new collection 
-                        // list.push()
                         break; // the GestureOverlay handles ink stroke input -- either as gestures, or drying as ink strokes that are added to document views
                     case InkTool.Eraser:
                         document.addEventListener("pointermove", this.onEraserMove);
@@ -547,7 +518,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 const B = this.getTransform().transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height);
                 const inkDoc = Docs.Create.InkDocument(ActiveInkColor(), CurrentUserUtils.SelectedTool, ActiveInkWidth(), ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), points,
                     { title: "ink stroke", x: B.x - ActiveInkWidth() / 2, y: B.y - ActiveInkWidth() / 2, _width: B.width + ActiveInkWidth(), _height: B.height + ActiveInkWidth() });
-                    console.log("doc exists")
                     if (CurrentUserUtils.SelectedTool === InkTool.Write) {
                         this.unprocessedDocs.push(inkDoc);
                         CollectionFreeFormView.collectionsWithUnprocessedInk.add(this);
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 4b7540e1d..862c16050 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -5,7 +5,7 @@ import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ColorState, SketchPicker } from 'react-color';
-import { DataSym, Doc, DocListCast, HeightSym, StrListCast, WidthSym } from '../../../../fields/Doc';
+import { DataSym, Doc, DocListCast, HeightSym, LayoutSym, StrListCast, WidthSym } from '../../../../fields/Doc';
 import { InkTool } from '../../../../fields/InkField';
 import { createSchema } from '../../../../fields/Schema';
 import { ScriptField } from '../../../../fields/ScriptField';
@@ -697,15 +697,24 @@ ScriptingGlobals.add(function toggleItalic(checkResult?: boolean) {
 
 
 
-/** INK
- *      setActiveInkTool
- *      setStrokeWidth
- *      setStrokeColor
- **/
+export function checkInksToGroup() {
+    console.log("getting here to inks group");
+    if (CurrentUserUtils.SelectedTool === InkTool.Write) {
+        CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
+            // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
+           // find all inkDocs in ffView.unprocessedDocs that are within 200 pixels of each other
+              const inksToGroup = ffView.unprocessedDocs.filter(inkDoc => {
+                    console.log(inkDoc.x, inkDoc.y);
+            });
+        });
+    }
+}
 
-ScriptingGlobals.add(function setActiveInkTool(tool: string, checkResult?: boolean) {
+export function createInkGroup(inksToGroup?: Doc[]) {
+    // TODO nda - if document being added to is a inkGrouping then we can just add to that group
     if (CurrentUserUtils.SelectedTool === InkTool.Write) {
         CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
+            // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
             const selected = ffView.unprocessedDocs;
             // loop through selected an get the bound
             const bounds: { x: number, y: number, width?: number, height?: number }[] = []
@@ -750,10 +759,72 @@ ScriptingGlobals.add(function setActiveInkTool(tool: string, checkResult?: boole
     
             // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
             newCollection && ffView.props.addDocument?.(newCollection);
+            // TODO: nda - will probably need to go through and only remove the unprocessed selected docs
             ffView.unprocessedDocs = [];
         });
     }
     CollectionFreeFormView.collectionsWithUnprocessedInk.clear();
+}
+
+
+/** INK
+ *      setActiveInkTool
+ *      setStrokeWidth
+ *      setStrokeColor
+ **/
+
+ScriptingGlobals.add(function setActiveInkTool(tool: string, checkResult?: boolean) {
+    createInkGroup();
+    // if (CurrentUserUtils.SelectedTool === InkTool.Write) {
+    //     CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
+    //         const selected = ffView.unprocessedDocs;
+    //         // loop through selected an get the bound
+    //         const bounds: { x: number, y: number, width?: number, height?: number }[] = []
+            
+    //         selected.map(action(d => {
+    //             const x = NumCast(d.x);
+    //             const y = NumCast(d.y);
+    //             const width = d[WidthSym]();
+    //             const height = d[HeightSym]();
+    //             bounds.push({x, y, width, height});
+    //         }))
+    
+    //         const aggregBounds = aggregateBounds(bounds, 0, 0);
+    //         const marqViewRef = ffView._marqueeViewRef.current;
+    
+    //         // set the vals for bounds in marqueeView
+    //         if (marqViewRef) {
+    //             marqViewRef._downX = aggregBounds.x;
+    //             marqViewRef._downY = aggregBounds.y;
+    //             marqViewRef._lastX = aggregBounds.r;
+    //             marqViewRef._lastY = aggregBounds.b;
+    //         }        
+    
+    //         selected.map(action(d => {
+    //             const dx = NumCast(d.x);
+    //             const dy = NumCast(d.y);
+    //             delete d.x;
+    //             delete d.y;
+    //             delete d.activeFrame;
+    //             delete d._timecodeToShow;  // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
+    //             delete d._timecodeToHide;  // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
+    //             // calculate pos based on bounds
+    //             if (marqViewRef?.Bounds) {
+    //                 d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2;
+    //                 d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2;
+    //             }
+    //             return d;
+    //         }));
+    //         ffView.props.removeDocument?.(selected);
+    //         // TODO: nda - this is the code to actually get a new grouped collection
+    //         const newCollection = marqViewRef?.getCollection(selected, undefined, [], true);
+    
+    //         // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
+    //         newCollection && ffView.props.addDocument?.(newCollection);
+    //         ffView.unprocessedDocs = [];
+    //     });
+    // }
+    // CollectionFreeFormView.collectionsWithUnprocessedInk.clear();
 
     if (checkResult) {
         return ((Doc.UserDoc().activeInkTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool) ?