aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/InkTranscription.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/InkTranscription.tsx')
-rw-r--r--src/client/views/InkTranscription.tsx94
1 files changed, 44 insertions, 50 deletions
diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx
index 26e0aa372..8698a6962 100644
--- a/src/client/views/InkTranscription.tsx
+++ b/src/client/views/InkTranscription.tsx
@@ -3,7 +3,7 @@ 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, DocCast, ImageCast, NumCast, StrCast } from '../../fields/Types';
+import { Cast, DateCast, ImageCast, NumCast } from '../../fields/Types';
import { aggregateBounds } from '../../Utils';
import { DocumentType } from '../documents/DocumentTypes';
import { CollectionFreeFormView, MarqueeView } from './collections/collectionFreeForm';
@@ -11,11 +11,8 @@ 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';
import { gptHandwriting } from '../apis/gpt/GPT';
-import * as fs from 'fs';
import { URLField } from '../../fields/URLField';
/**
* Class component that handles inking in writing mode
@@ -23,30 +20,30 @@ import { URLField } from '../../fields/URLField';
export class InkTranscription extends React.Component {
static Instance: InkTranscription;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
@observable _mathRegister: any = undefined;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
@observable _mathRef: any = undefined;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
@observable _textRegister: any = undefined;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
@observable _textRef: any = undefined;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
@observable iinkEditor: any = undefined;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
private lastJiix: any;
private currGroup?: Doc;
private collectionFreeForm?: CollectionFreeFormView;
- constructor(props: Readonly<{}>) {
+ constructor(props: Readonly<object>) {
super(props);
InkTranscription.Instance = this;
}
-
- componentWillUnmount() {
- // this._mathRef.removeEventListener('exported', (e: any) => this.exportInk(e, this._mathRef));
- // this._textRef.removeEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
- }
-
@action
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
setMathRef = async (r: any) => {
if (!this._textRegister && r) {
- let editor;
const options = {
configuration: {
server: {
@@ -61,21 +58,22 @@ export class InkTranscription extends React.Component {
},
},
};
-
- editor = new iink.Editor(r, options as any);
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const editor = new iink.Editor(r, options as any);
await editor.initialize();
this._textRegister = r;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
r?.addEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
return (this._textRef = r);
}
};
@action
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
setTextRef = async (r: any) => {
if (!this._textRegister && r) {
- let editor;
const options = {
configuration: {
server: {
@@ -90,12 +88,13 @@ export class InkTranscription extends React.Component {
},
},
};
-
- editor = new iink.Editor(r, options as any);
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const editor = new iink.Editor(r, options as any);
await editor.initialize();
this.iinkEditor = editor;
this._textRegister = r;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
r?.addEventListener('exported', (e: any) => this.exportInk(e, this._textRef));
return (this._textRef = r);
@@ -124,28 +123,9 @@ export class InkTranscription extends React.Component {
strokes.push(d.inkData.map(pd => inkStroke.ptToScreen({ X: pd.X, Y: pd.Y })));
times.push(DateCast(i.author_date).getDate().getTime());
});
- console.log(strokes);
- console.log(
- `this.Multistrokes.push(
- new Multistroke(
- Gestures.Scribble,
- useBoundedRotationInvariance,
- new Array([
- ` +
- this.convertPointsToString(strokes) +
- `
- ])
- )
- )
- `
- );
- //console.log(this.convertPointsToString(strokes));
- //console.log(this.convertPointsToString2(strokes));
this.currGroup = groupDoc;
const pointerData = strokes.map((stroke, i) => this.inkJSON(stroke, times[i]));
- const processGestures = false;
if (math) {
- console.log('math');
this.iinkEditor.importPointEvents(pointerData);
} else {
this.iinkEditor.importPointEvents(pointerData);
@@ -172,9 +152,9 @@ export class InkTranscription extends React.Component {
t: number;
p: number;
}
- let strokeObjects: strokeData[] = [];
+ const strokeObjects: strokeData[] = [];
stroke.forEach(point => {
- let tempObject: strokeData = {
+ const tempObject: strokeData = {
x: point.X,
y: point.Y,
t: time,
@@ -220,6 +200,7 @@ export class InkTranscription extends React.Component {
* @param e the event objects
* @param ref the ref to the editor
*/
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
exportInk = async (e: any, ref: any) => {
const exports = e.detail['application/vnd.myscript.jiix'];
if (exports) {
@@ -236,6 +217,7 @@ export class InkTranscription extends React.Component {
this.lastJiix = JSON.parse(exports['application/vnd.myscript.jiix']);
// map timestamp to strokes
const timestampWord = new Map<number, string>();
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
this.lastJiix.words.map((word: any) => {
if (word.items) {
word.items.forEach((i: { id: string; timestamp: string; X: Array<number>; Y: Array<number>; F: Array<number> }) => {
@@ -271,12 +253,7 @@ export class InkTranscription extends React.Component {
if (this.currGroup && text) {
DocumentView.getDocumentView(this.currGroup)?.ComponentView?.updateIcon?.();
- this.currGroup.transcription = text;
- this.currGroup.title = text;
- let image = await DocumentView.GetDocImage(this.currGroup);
- const pathname = image?.url.href as string;
- console.log(image?.url);
- console.log(image);
+ const image = await this.getIcon();
const { href } = (image as URLField).url;
const hrefParts = href.split('.');
const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
@@ -284,11 +261,12 @@ export class InkTranscription extends React.Component {
try {
const hrefBase64 = await this.imageUrlToBase64(hrefComplete);
response = await gptHandwriting(hrefBase64);
- console.log(response);
- } catch (error) {
- console.log('bad things have happened');
+ } catch {
+ console.error('Error getting image');
}
const textBoxText = 'iink: ' + text + '\n' + '\n' + 'ChatGPT: ' + response;
+ this.currGroup.transcription = response;
+ this.currGroup.title = response;
if (!this.currGroup.hasTextBox) {
const newDoc = Docs.Create.TextDocument(textBoxText, { title: '', x: this.currGroup.x as number, y: (this.currGroup.y as number) + (this.currGroup.height as number) });
newDoc.height = 200;
@@ -300,6 +278,22 @@ export class InkTranscription extends React.Component {
}
}
};
+ /**
+ * gets the icon of the collection that was just made
+ * @returns the image of the collection
+ */
+ 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)), 1000));
+ }
+ return undefined;
+ }
+ /**
+ * converts the image to base url formate
+ * @param imageUrl imageurl taken from the collection icon
+ */
imageUrlToBase64 = async (imageUrl: string): Promise<string> => {
try {
const response = await fetch(imageUrl);
@@ -403,8 +397,8 @@ 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) {
+ docView.props.addDocument?.(newCollection);
newCollection.hasTextBox = false;
}
return newCollection;
@@ -413,8 +407,8 @@ export class InkTranscription extends React.Component {
render() {
return (
<div className="ink-transcription">
- <div className="math-editor" ref={this.setMathRef} touch-action="none"></div>
- <div className="text-editor" ref={this.setTextRef} touch-action="none"></div>
+ <div className="math-editor" ref={this.setMathRef}></div>
+ <div className="text-editor" ref={this.setTextRef}></div>
</div>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-13 09:05:05 +0000