work in progres

1 files changed, 88 insertions, 50 deletions

diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx
index 495bb6b83..44b63e605 100644
--- a/src/client/views/InkTranscription.tsx
+++ b/src/client/views/InkTranscription.tsx
@@ -1,16 +1,19 @@
 import * as iink from 'iink-ts';
-import {TProtocol,TSchene,TServerConfiguration,TConfiguration,TRecognitionConfiguration} from 'iink-ts';
 import { action, observable } from 'mobx';
 import * as React from 'react';
 import { Doc, DocListCast } from '../../fields/Doc';
 import { InkData, InkField, InkTool } from '../../fields/InkField';
-import { Cast, DateCast, NumCast } from '../../fields/Types';
+import { Cast, DateCast, ImageCast, NumCast, StrCast } from '../../fields/Types';
 import { aggregateBounds } from '../../Utils';
 import { DocumentType } from '../documents/DocumentTypes';
 import { CollectionFreeFormView } from './collections/collectionFreeForm';
 import { InkingStroke } from './InkingStroke';
 import './InkTranscription.scss';
+import { Docs } from '../documents/Documents';
 import { DocumentView } from './nodes/DocumentView';
+import { Number } from 'mongoose';
+import { NumberArray } from 'd3';
+import { ImageField } from '../../fields/URLField';
 
 /**
  * Class component that handles inking in writing mode
@@ -18,12 +21,14 @@ import { DocumentView } from './nodes/DocumentView';
 export class InkTranscription extends React.Component {
     static Instance: InkTranscription;
 
-    @observable _mathRegister: any= undefined;
-    @observable _mathRef: any= undefined;
-    @observable _textRegister: any= undefined;
-    @observable _textRef: any= undefined;
+    @observable _mathRegister: any = undefined;
+    @observable _mathRef: any = undefined;
+    @observable _textRegister: any = undefined;
+    @observable _textRef: any = undefined;
+    @observable iinkEditor: any = undefined;
     private lastJiix: any;
     private currGroup?: Doc;
+    private collectionFreeForm?: CollectionFreeFormView;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -43,57 +48,56 @@ export class InkTranscription extends React.Component {
             const options = {
                 configuration: {
                     server: {
-                        scheme: "https",
-                        host: "cloud.myscript.com",
-                        applicationKey: "c0901093-5ac5-4454-8e64-0def0f13f2ca",
-                        hmacKey: "f6465cca-1856-4492-a6a4-e2395841be2f",
-                        protocol: "WEBSOCKET"
+                        scheme: 'https',
+                        host: 'cloud.myscript.com',
+                        applicationKey: 'c0901093-5ac5-4454-8e64-0def0f13f2ca',
+                        hmacKey: 'f6465cca-1856-4492-a6a4-e2395841be2f',
+                        protocol: 'WEBSOCKET',
                     },
                     recognition: {
-                        type: "TEXT",
-                    }
-                }
+                        type: 'TEXT',
+                    },
+                },
             };
-            
+
             editor = new iink.Editor(r, options as any);
-            
+
             await editor.initialize();
-            
+
             this._textRegister = r;
             r?.addEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
 
             return (this._textRef = r);
         }
-    }
+    };
     @action
-    setTextRef = async (r:any) => {
+    setTextRef = async (r: any) => {
         if (!this._textRegister && r) {
             let editor;
             const options = {
                 configuration: {
                     server: {
-                        scheme: "https",
-                        host: "cloud.myscript.com",
-                        applicationKey: "c0901093-5ac5-4454-8e64-0def0f13f2ca",
-                        hmacKey: "f6465cca-1856-4492-a6a4-e2395841be2f",
-                        protocol: "WEBSOCKET"
+                        scheme: 'https',
+                        host: 'cloud.myscript.com',
+                        applicationKey: 'c0901093-5ac5-4454-8e64-0def0f13f2ca',
+                        hmacKey: 'f6465cca-1856-4492-a6a4-e2395841be2f',
+                        protocol: 'WEBSOCKET',
                     },
                     recognition: {
-                        type: "TEXT",
-                    }
-                }
+                        type: 'TEXT',
+                    },
+                },
             };
-            
+
             editor = new iink.Editor(r, options as any);
-            
+
             await editor.initialize();
-            
+            this.iinkEditor = editor;
             this._textRegister = r;
             r?.addEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
 
             return (this._textRef = r);
         }
-        
     };
 
     /**
@@ -119,14 +123,14 @@ export class InkTranscription extends React.Component {
             });
 
         this.currGroup = groupDoc;
-
-        const pointerData = { events: strokes.map((stroke, i) => this.inkJSON(stroke, times[i])) };
+        const pointerData = strokes.map((stroke, i) => this.inkJSON(stroke, times[i]));
+        console.log(JSON.stringify(pointerData));
         const processGestures = false;
-
         if (math) {
-            this._mathRef.editor.pointerEvents(pointerData, processGestures);
+            console.log('math');
+            this.iinkEditor.importPointEvents(pointerData);
         } else {
-            this._textRef.editor.pointerEvents(pointerData, processGestures);
+            this.iinkEditor.importPointEvents(pointerData);
         }
     };
 
@@ -138,13 +142,26 @@ export class InkTranscription extends React.Component {
      * @returns json object representation of ink data
      */
     inkJSON = (stroke: InkData, time: number) => {
+        interface strokeData {
+            x: number;
+            y: number;
+            t: number;
+            p: number;
+        }
+        let strokeObjects: strokeData[] = [];
+        stroke.forEach(point => {
+            let tempObject: strokeData = {
+                x: point.X,
+                y: point.Y,
+                t: time,
+                p: 1.0,
+            };
+            strokeObjects.push(tempObject);
+        });
         return {
             pointerType: 'PEN',
             pointerId: 1,
-            x: stroke.map(point => point.X),
-            y: stroke.map(point => point.Y),
-            t: new Array(stroke.length).fill(time),
-            p: new Array(stroke.length).fill(1.0),
+            pointers: strokeObjects,
         };
     };
 
@@ -163,7 +180,7 @@ export class InkTranscription extends React.Component {
             if (!ctx) {
                 return;
             }
-            const docView: CollectionFreeFormView =DocumentView.getDocumentView(ctx)?.ComponentView as CollectionFreeFormView;
+            const docView: CollectionFreeFormView = DocumentView.getDocumentView(ctx)?.ComponentView as CollectionFreeFormView;
             // DocumentManager.Instance.getDocumentView(ctx)?.ComponentView as CollectionFreeFormView;
 
             if (!docView) return;
@@ -179,10 +196,11 @@ export class InkTranscription extends React.Component {
      * @param e the event objects
      * @param ref the ref to the editor
      */
-    exportInk = (e: any, ref: any) => {
-        const exports = e.detail.exports;
+    exportInk = async (e: any, ref: any) => {
+        const exports = e.detail['application/vnd.myscript.jiix'];
+        console.log(exports);
         if (exports) {
-            if (exports['application/x-latex']) {
+            if (exports['type'] == 'Math') {
                 const latex = exports['application/x-latex'];
                 if (this.currGroup) {
                     this.currGroup.text = latex;
@@ -190,7 +208,7 @@ export class InkTranscription extends React.Component {
                 }
 
                 ref.editor.clear();
-            } else if (exports['text/plain']) {
+            } else if (exports['type'] == 'Text') {
                 if (exports['application/vnd.myscript.jiix']) {
                     this.lastJiix = JSON.parse(exports['application/vnd.myscript.jiix']);
                     // map timestamp to strokes
@@ -226,17 +244,33 @@ export class InkTranscription extends React.Component {
                         if (this.lastJiix.words.length > 1) this.subgroupsTranscriptions(wordInkDocMap);
                     }
                 }
-                const text = exports['text/plain'];
+                const text = exports['label'];
 
-                if (this.currGroup) {
+                if (this.currGroup && text) {
+                    DocumentView.getDocumentView(this.currGroup)?.ComponentView?.updateIcon?.();
+                    console.log(this.currGroup.icon);
                     this.currGroup.transcription = text;
-                    this.currGroup.title = text.split('\n')[0];
+                    this.currGroup.title = text;
+                    let image = await this.getIcon();
+                    console.log(this.currGroup.icon, image);
+                    if (!this.currGroup.hasTextBox) {
+                        const newDoc = Docs.Create.TextDocument(text, { title: '', x: this.currGroup.x as number, y: (this.currGroup.y as number) + (this.currGroup.height as number) });
+                        this.collectionFreeForm?.addDocument(newDoc);
+                        this.currGroup.hasTextBox = true;
+                    }
+                    ref.editor.clear();
                 }
-
-                ref.editor.clear();
             }
         }
     };
+    async getIcon() {
+        const docView = DocumentView.getDocumentView(this.currGroup);
+        if (docView) {
+            docView.ComponentView?.updateIcon?.();
+            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
+        }
+        return undefined;
+    }
 
     /**
      * Creates the ink grouping once the user leaves the writing mode.
@@ -267,6 +301,7 @@ export class InkTranscription extends React.Component {
      * @returns a new collection Doc or undefined if the grouping fails
      */
     groupInkDocs(selected: Doc[], docView: CollectionFreeFormView, word?: string): Doc | undefined {
+        this.collectionFreeForm = docView;
         const bounds: { x: number; y: number; width?: number; height?: number }[] = [];
 
         // calculate the necessary bounds from the selected ink docs
@@ -324,6 +359,9 @@ export class InkTranscription extends React.Component {
 
         // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
         newCollection && docView.props.addDocument?.(newCollection);
+        if (newCollection) {
+            newCollection.hasTextBox = false;
+        }
         return newCollection;
     }