working on getting subgroups to work

2 files changed, 82 insertions, 9 deletions

diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx
index b1f807bdf..f7260c5b4 100644
--- a/src/client/views/InkTranscription.tsx
+++ b/src/client/views/InkTranscription.tsx
@@ -1,13 +1,14 @@
 import * as iink from 'iink-js';
 import { action, observable } from 'mobx';
 import * as React from 'react';
-import { DataSym, Doc, DocListCast } from '../../fields/Doc';
+import { DataSym, Doc, DocListCast, HeightSym, WidthSym } from '../../fields/Doc';
 import { InkData, InkField } from "../../fields/InkField";
 import { Cast, DateCast, NumCast } from '../../fields/Types';
 import { DocumentType } from "../documents/DocumentTypes";
 import './InkTranscription.scss';
 import { aggregateBounds, Utils } from '../../Utils';
 import { timesSeries } from 'async';
+import { CollectionFreeFormView } from './collections/collectionFreeForm';
 
 export class InkTranscription extends React.Component {
     static Instance: InkTranscription;
@@ -106,9 +107,12 @@ export class InkTranscription extends React.Component {
         return this._textRef = r;
     }
 
-    transcribeInk = (groupDoc: Doc | undefined, containingLayout: Doc, inkDocs: Doc[], math: boolean) => {
+    transcribeInk = (groupDoc: Doc | undefined, containingLayout: Doc, inkDocs: Doc[], math: boolean, ffView?: CollectionFreeFormView) => {
         if (!groupDoc) return;
         this.inkDocs = inkDocs;
+        if (ffView) {
+            this.ffView = ffView;
+        }
 
         const validInks = inkDocs.filter(s => s.type === DocumentType.INK);
 
@@ -165,6 +169,69 @@ export class InkTranscription extends React.Component {
         return max - min;
     }
 
+    subgroupsTranscriptions = (wordInkDocMap: Map<string, Doc[]>) => {
+         // 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
+        // loop through the words in wordInkDocMap
+        // for each word, get the inkDocs
+
+        // iterate through the keys of wordInkDocMap
+        wordInkDocMap.forEach((inkDocs: Doc[], word: string) => {
+            const selected = wordInkDocMap.get(word);
+            if (!selected) {
+                return;
+            }
+             // 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 = this.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;
+            }));
+            this.ffView.props.removeDocument?.(selected);
+            // TODO: nda - this is the code to actually get a new grouped collection
+            const newCollection = marqViewRef?.getCollection(selected, undefined, [], true);
+            if (newCollection) {
+                newCollection.height = newCollection[HeightSym]();
+                newCollection.width = newCollection[WidthSym]();
+                newCollection.title = word;
+            }
+
+
+            // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
+            newCollection && this.ffView.props.addDocument?.(newCollection);
+        });
+    }
+
     exportInk = (e: any, ref: any) => {
         const exports = e.detail.exports;
         console.log(e);
@@ -186,10 +253,12 @@ export class InkTranscription extends React.Component {
                     // map timestamp to strokes
                     const timestampWord = new Map<number, string>();
                     this.lastJiix.words.map((word: any) => {
-                        word.items.map((i: any) => {
-                            const ms = Date.parse(i.timestamp);
-                            timestampWord.set(ms, word.label);
-                        })
+                        if (word.items) {
+                            word.items.forEach((i: {id: string, timestamp: string, X: Array<number>, Y: Array<number>, F: Array<number>}) => {
+                                const ms = Date.parse(i.timestamp);
+                                timestampWord.set(ms, word.label);
+                            })
+                        }
                     })
 
                     const wordInkDocMap = new Map<string, Doc[]>();
@@ -210,8 +279,12 @@ export class InkTranscription extends React.Component {
                                 const newEntry = [inkDoc];
                                 wordInkDocMap.set(word, newEntry);
                             }
-                            
                         });
+                        // do the fun marq stuff
+                        // generate subgroups
+
+                        console.log(wordInkDocMap);
+                        this.subgroupsTranscriptions(wordInkDocMap);
 
                     }
                     // we can iterate through docs and for each doc index into the map by timestamp
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 1c2a22226..d87b23d86 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -711,7 +711,7 @@ export function checkInksToGroup() {
     }
 }
 
-export function createInkGroup(inksToGroup?: Doc[]) {
+export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
     // 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 => {
@@ -767,7 +767,7 @@ export function createInkGroup(inksToGroup?: Doc[]) {
             // TODO: nda - will probably need to go through and only remove the unprocessed selected docs
             ffView.unprocessedDocs = [];
 
-            InkTranscription.Instance.transcribeInk(newCollection, ffView.layoutDoc, selected, false);
+            InkTranscription.Instance.transcribeInk(newCollection, ffView.layoutDoc, selected, false, ffView);
         });
     }
     CollectionFreeFormView.collectionsWithUnprocessedInk.clear();