myscript / iinkts Goto Github PK

export class HandwritingEditor {
    private iinkEditor: IInkEditor
    private editorContainer: HTMLElement
    private editorElement: HTMLElement
    private resizeObserver: ResizeObserver
    private lastChangeID: string = ""

    constructor(applicationKey: string, hmacKey: string) {
        this.editorContainer = document.createElement('div')
        this.editorContainer.id = 'handwriting-editor-container'
        this.editorElement = document.createElement('div')
        this.editorElement.id = 'handwriting-editor'
        this.editorContainer.appendChild(this.editorElement)
        this.iinkEditor = new IInkEditor(this.editorElement,
            {
                configuration: {
                    server: {
                        scheme: "https",
                        host: "cloud.myscript.com",
                        applicationKey: applicationKey,
                        hmacKey: hmacKey,
                    },
                },
            }
        )
        setTimeout(() => {
            this.iinkEditor.initialize().then(() => {
                this.iinkEditor.events.addEventListener("changed", (evt: any) => {
                    const changeID = crypto.randomUUID()
                    this.lastChangeID = changeID
                    setTimeout(() => {
                        if (changeID == this.lastChangeID) {
                            this.iinkEditor.convert()
                        }
                    }, 2000)
                })
            })
        })
        this.resizeObserver = new ResizeObserver(this.refreshSize.bind(this));
        this.resizeObserver.observe(this.editorElement);
        this.refreshSize()
    }

    getEditorContainer() {
        return this.editorContainer
    }

    refreshSize() {
        this.iinkEditor.resize()
    }
}

let editor = HandwritingEditor("app key", "hmac key")
document.body.appendChild(editor.getEditorContainer())