auto transcribes on grouping

1 files changed, 22 insertions, 28 deletions

diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx
index 4957446dc..ea5d5a1ec 100644
--- a/src/client/views/InkTranscription.tsx
+++ b/src/client/views/InkTranscription.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { Doc } from '../../fields/Doc';
 import { InkData, InkField } from "../../fields/InkField";
 import { Cast, NumCast, StrCast } from '../../fields/Types';
-import { Docs } from "../documents/Documents";
+import { DocumentType } from "../documents/DocumentTypes";
 import './InkTranscription.scss';
 
 export class InkTranscription extends React.Component {
@@ -15,8 +15,7 @@ export class InkTranscription extends React.Component {
     @observable _mathRef: any;
     @observable _textRegister: any;
     @observable _textRef: any;
-    private addDocument?: (doc: Doc | Doc[]) => boolean;
-    private bounds: { x: number, y: number, width: number, height: number } = { x: 0, y: 0, width: 0, height: 0 };
+    private currGroup?: Doc;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -27,9 +26,6 @@ export class InkTranscription extends React.Component {
     componentWillUnmount() {
         this._mathRef.removeEventListener('exported', (e: any) => this.exportInk(e, this._mathRef));
         this._textRef.removeEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
-
-        this._mathRef.removeEventListener('changed', (e: any) => this.callExport(this._mathRef));
-        this._textRef.removeEventListener('changed', (e: any) => this.callExport(this._textRef));
     }
 
     @action
@@ -58,15 +54,11 @@ export class InkTranscription extends React.Component {
                             }
                         }
                     }
-                },
-                triggers: {
-                    exportContent: 'DEMAND'
                 }
             }) : null;
         }
 
         r.addEventListener('exported', (e: any) => this.exportInk(e, this._mathRef));
-        r.addEventListener('changed', (e: any) => this.callExport(this._mathRef));
 
         return this._mathRef = r;
     }
@@ -97,22 +89,22 @@ export class InkTranscription extends React.Component {
                             }
                         }
                     }
-                },
-                triggers: {
-                    exportContent: 'DEMAND'
                 }
             }) : null;
         }
 
         r.addEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
-        r.addEventListener('changed', (e: any) => this.callExport(this._textRef));
 
         return this._textRef = r;
     }
 
-    transcribeInk = (inkdocs: Doc[], math: boolean, bounds: { x: number, y: number, width: number, height: number }, addDocument?: (doc: Doc | Doc[]) => boolean) => {
+    transcribeInk = (groupDoc: Doc | undefined, inkDocs: Doc[], math: boolean) => {
+        if (!groupDoc) return;
+
+        const validInks = inkDocs.filter(s => s.type === DocumentType.INK);
+
         const strokes: InkData[] = [];
-        inkdocs.filter(i => Cast(i.data, InkField)).forEach(i => {
+        validInks.filter(i => Cast(i.data, InkField)).forEach(i => {
             // TODO: interpolate missing times stamps
             const d = Cast(i.data, InkField, null);
             const left = Math.min(...d?.inkData.map(pd => pd.X) ?? [0]);
@@ -120,8 +112,7 @@ export class InkTranscription extends React.Component {
             strokes.push(d.inkData.map(pd => ({ X: pd.X + NumCast(i.x) - left, Y: pd.Y + NumCast(i.y) - top, time: pd.time })));
         });
 
-        this.addDocument = addDocument;
-        this.bounds = bounds;
+        this.currGroup = groupDoc;
 
         const pointerData = { "events": strokes.map(stroke => this.inkJSON(stroke)) };
         // console.log(JSON.stringify(pointerData));
@@ -135,12 +126,6 @@ export class InkTranscription extends React.Component {
         }
     }
 
-    callExport(ref: any) {
-        if (ref.editor.canExport) {
-            ref.editor.export_();
-        }
-    }
-
     inkJSON = (stroke: InkData) => {
         return {
             "pointerType": "PEN",
@@ -159,15 +144,24 @@ export class InkTranscription extends React.Component {
                 const latex = exports['application/x-latex'];
                 console.log(latex);
 
-                this.addDocument?.(Docs.Create.EquationDocument({ title: latex, x: this.bounds.x + this.bounds.width, y: this.bounds.y, _width: this.bounds.width, _height: this.bounds.height }));
+                if (this.currGroup) {
+                    this.currGroup.text = latex;
+                    this.currGroup.title = latex;
+                }
+
+                ref.editor.clear();
             }
             else if (exports['text/plain']) {
                 const text = exports['text/plain'];
                 console.log(text);
-                this.addDocument?.(Docs.Create.TextDocument(text, { title: text, x: this.bounds.x + this.bounds.width, y: this.bounds.y, _width: this.bounds.width, _height: this.bounds.height }));
-            }
 
-            ref.editor.clear();
+                if (this.currGroup) {
+                    this.currGroup.text = text;
+                    this.currGroup.title = text;
+                }
+
+                ref.editor.clear();
+            }
         }
     }