refactored writing mode code into InKTranscription

3 files changed, 89 insertions, 93 deletions

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 226983138..1a7bb0808 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -24,7 +24,7 @@ import { RadialMenu } from "./nodes/RadialMenu";
 import HorizontalPalette from "./Palette";
 import { Touchable } from "./Touchable";
 import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
-import { checkInksToGroup, createInkGroup } from "./nodes/button/FontIconBox";
+import { InkTranscription } from "./InkTranscription";
 
 @observer
 export class GestureOverlay extends Touchable {
@@ -127,7 +127,7 @@ export class GestureOverlay extends Touchable {
             // pen is also a touch, but with a radius of 0.5 (at least with the surface pens)
             // and this seems to be the only way of differentiating pen and touch on touch events
             if (pt.radiusX > 1 && pt.radiusY > 1) {
-                createInkGroup();
+                InkTranscription.Instance.createInkGroup();
                 Doc.UserDoc().activeInkTool = InkTool.None;
                 this.prevPoints.set(pt.identifier, pt);
             }
@@ -499,7 +499,7 @@ export class GestureOverlay extends Touchable {
         if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) {
             setupMoveUpEvents(this, e, returnFalse, returnFalse, action((e: PointerEvent, doubleTap?: boolean) => {
                 if (doubleTap) {
-                    createInkGroup();
+                    InkTranscription.Instance.createInkGroup();
                     CurrentUserUtils.SelectedTool = InkTool.None;
                     return;
                 }
@@ -649,8 +649,6 @@ export class GestureOverlay extends Touchable {
                     if (controlPoints.length > 4 && dist < 10) controlPoints[controlPoints.length - 1] = controlPoints[0];
                     this._points = controlPoints;
                     this.dispatchGesture(GestureUtils.Gestures.Stroke);
-                    // TODO: nda - check inks to group here
-                    checkInksToGroup();
                 }
                 this._points = [];
             }
diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx
index 231ab694d..e1a80ae50 100644
--- a/src/client/views/InkTranscription.tsx
+++ b/src/client/views/InkTranscription.tsx
@@ -2,7 +2,7 @@ import * as iink from 'iink-js';
 import { action, observable } from 'mobx';
 import * as React from 'react';
 import { Doc, DocListCast, HeightSym, WidthSym } from '../../fields/Doc';
-import { InkData, InkField } from "../../fields/InkField";
+import { InkData, InkField, InkTool } from "../../fields/InkField";
 import { Cast, DateCast, NumCast } from '../../fields/Types';
 import { DocumentType } from "../documents/DocumentTypes";
 import './InkTranscription.scss';
@@ -10,7 +10,7 @@ import { aggregateBounds } from '../../Utils';
 import { CollectionFreeFormView } from './collections/collectionFreeForm';
 import { DocumentManager } from "../util/DocumentManager";
 import { InkingStroke } from './InkingStroke';
-import { groupInkDocs } from './nodes/button/FontIconBox';
+import { CurrentUserUtils } from '../util/CurrentUserUtils';
 
 
 export class InkTranscription extends React.Component {
@@ -174,7 +174,7 @@ export class InkTranscription extends React.Component {
             if (!docView) return;
             const marqViewRef = docView._marqueeViewRef.current;
             if (!marqViewRef) return;
-            groupInkDocs(selected, docView, word);
+            this.groupInkDocs(selected, docView, word);
         });
     }
 
@@ -238,6 +238,88 @@ export class InkTranscription extends React.Component {
             }
         }
     }
+    
+    /**
+ * Creates the ink grouping once the user leaves the writing mode
+ */
+createInkGroup() {
+    // 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;
+            const newCollection = this.groupInkDocs(selected, ffView);
+            ffView.unprocessedDocs = [];
+
+            InkTranscription.Instance.transcribeInk(newCollection, ffView.layoutDoc, selected, false, ffView);
+        });
+    }
+    CollectionFreeFormView.collectionsWithUnprocessedInk.clear();
+}
+
+/**
+ * Creates the groupings for a given list of ink docs on a specific doc view
+ * @param selected: the list of ink docs to create a grouping of
+ * @param docView: the view in which we want the grouping to be created
+ * @param word: optional param if the group we are creating is a word (subgrouping individual words)
+ * @returns a new collection Doc or undefined if the grouping fails
+ */
+  groupInkDocs(selected: Doc[], docView: CollectionFreeFormView, word?: string): Doc | undefined {
+    const bounds: { x: number, y: number, width?: number, height?: number }[] = []
+
+    // calculate the necessary bounds from the selected ink docs
+    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 });
+    }))
+
+    // calculate the aggregated bounds
+    const aggregBounds = aggregateBounds(bounds, 0, 0);
+    const marqViewRef = docView._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;
+    }
+
+    // map through all the selected ink strokes and create the groupings
+    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;
+    }));
+    docView.props.removeDocument?.(selected);
+    // Gets a collection based on the selected nodes using a marquee view ref
+    const newCollection = marqViewRef?.getCollection(selected, undefined, true);
+    if (newCollection) {
+        newCollection.height = newCollection[HeightSym]();
+        newCollection.width = newCollection[WidthSym]();
+        // if the grouping we are creating is an individual word
+        if (word) {
+            newCollection.title = word;
+        }
+    }
+
+    // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
+    newCollection && docView.props.addDocument?.(newCollection);
+    return newCollection;
+}
 
     render() {
         return (
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 7a527b767..e16c055e4 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -706,89 +706,6 @@ ScriptingGlobals.add(function toggleItalic(checkResult?: boolean) {
     else Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === "italics" ? undefined : "italics";
 });
 
-/**
- * Creates the ink grouping once the user leaves the writing mode
- */
-export function createInkGroup() {
-    // 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;
-            const newCollection = groupInkDocs(selected, ffView);
-            ffView.unprocessedDocs = [];
-
-            InkTranscription.Instance.transcribeInk(newCollection, ffView.layoutDoc, selected, false, ffView);
-        });
-    }
-    CollectionFreeFormView.collectionsWithUnprocessedInk.clear();
-}
-
-/**
- * Creates the groupings for a given list of ink docs on a specific doc view
- * @param selected: the list of ink docs to create a grouping of
- * @param docView: the view in which we want the grouping to be created
- * @param word: optional param if the group we are creating is a word (subgrouping individual words)
- * @returns a new collection Doc or undefined if the grouping fails
- */
-export function groupInkDocs(selected: Doc[], docView: CollectionFreeFormView, word?: string): Doc | undefined {
-    const bounds: { x: number, y: number, width?: number, height?: number }[] = []
-
-    // calculate the necessary bounds from the selected ink docs
-    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 });
-    }))
-
-    // calculate the aggregated bounds
-    const aggregBounds = aggregateBounds(bounds, 0, 0);
-    const marqViewRef = docView._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;
-    }
-
-    // map through all the selected ink strokes and create the groupings
-    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;
-    }));
-    docView.props.removeDocument?.(selected);
-    // Gets a collection based on the selected nodes using a marquee view ref
-    const newCollection = marqViewRef?.getCollection(selected, undefined, true);
-    if (newCollection) {
-        newCollection.height = newCollection[HeightSym]();
-        newCollection.width = newCollection[WidthSym]();
-        // if the grouping we are creating is an individual word
-        if (word) {
-            newCollection.title = word;
-        }
-    }
-
-    // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
-    newCollection && docView.props.addDocument?.(newCollection);
-    return newCollection;
-}
-
-
 /** INK
  *      setActiveInkTool
  *      setStrokeWidth
@@ -796,8 +713,7 @@ export function groupInkDocs(selected: Doc[], docView: CollectionFreeFormView, w
  **/
 
 ScriptingGlobals.add(function setActiveInkTool(tool: string, checkResult?: boolean) {
-    createInkGroup();
-
+    InkTranscription.Instance?.createInkGroup();
     if (checkResult) {
         return ((Doc.UserDoc().activeInkTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool) ?
             Colors.MEDIUM_BLUE : "transparent";