1 files changed, 13 insertions, 76 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index ff938df78..a794e213e 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -302,70 +302,20 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     createCanvas = async (downX?: number, downY?: number, cb?: (filename: string, x: number | undefined, y: number | undefined) => void) => {
-        const width = NumCast(this.layoutDoc._width);
         const canvas = document.createElement('canvas');
-        // canvas.width = 640;
-        // canvas.height = (640 * Doc.NativeHeight(this.layoutDoc)) / (Doc.NativeWidth(this.layoutDoc) || 1);
-        canvas.width = NumCast(this.layoutDoc._width);
-        canvas.height = NumCast(this.layoutDoc._height);
+        const scaling = 1 / (this._props.NativeDimScaling?.() || 1);
+        const w = AnchorMenu.Instance.marqueeWidth * scaling;
+        const h = AnchorMenu.Instance.marqueeHeight * scaling;
+        canvas.width = w;
+        canvas.height = h;
         const ctx = canvas.getContext('2d'); // draw image to canvas. scale to target dimensions
         if (ctx) {
-            // this._imageRef && ctx.drawImage(this._imageRef, 0, 0, canvas.width, canvas.height);
-            this._imageRef && ctx.drawImage(this._imageRef, NumCast(this._marqueeref.current?.left), NumCast(this._marqueeref.current?.top), this._width, this._height, 0, 0, 1000, 1000);
-            //this._imageRef && ctx.drawImage(this._imageRef, 0, 0, 2000, 1000, 0, 0, canvas.width, canvas.height);
-            // console.log(NumCast(this._marqueeref.current?.left) + 100);
+            this._imageRef && ctx.drawImage(this._imageRef, NumCast(this._marqueeref.current?.left) * scaling, NumCast(this._marqueeref.current?.top) * scaling, w, h, 0, 0, w, h);
         }
+        // canvas.style.zIndex = '2000000';
+        // document.body.appendChild(canvas);
         const blob = await ImageUtility.canvasToBlob(canvas);
         return ImageBox.selectUrlToBase64(blob);
-
-        // if (this._imageRef) {
-        //     const canv = ImageUtility.getCroppedImg(this._imageRef, this._imageRef.width, this._imageRef.height);
-        //     console.log(this._imageRef.width);
-        //     if (canv) {
-        //         const blob = await ImageUtility.canvasToBlob(canv);
-        //         return ImageBox.selectUrlToBase64(blob);
-        //     }
-        // }
-        if (!this._imageRef) {
-            const b = Docs.Create.LabelDocument({
-                x: NumCast(this.layoutDoc.x) + width,
-                y: NumCast(this.layoutDoc.y, 1),
-                _width: 150,
-                _height: 50,
-                // title: (this.layoutDoc._layout_currentTimecode || 0).toString(),
-                onClick: FollowLinkScript(),
-            });
-            this._props.addDocument?.(b);
-            DocUtils.MakeLink(b, this.Document, { link_relationship: 'image snapshot' });
-        } else {
-            // convert to desired file format
-            // const dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
-            // // if you want to preview the captured image,
-            // const retitled = StrCast(this.Document.title).replace(/[ -.:]/g, '');
-            // const encodedFilename = encodeURIComponent(('snapshot' + retitled + '_' + (this.layoutDoc._layout_currentTimecode || 0).toString()).replace(/[./?=]/g, '_'));
-            // const filename = basename(encodedFilename);
-            // ClientUtils.convertDataUri(dataUrl, filename).then((returnedFilename: string) => returnedFilename && (cb ?? this.createSnapshotLink)(returnedFilename, downX, downY));
-        }
-        // convert to desired file format
-
-        // const dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
-        // // if you want to preview the captured image,
-        // const retitled = StrCast(this.Document.title).replace(/[ -.:]/g, '');
-        // const encodedFilename = encodeURIComponent(('snapshot' + retitled + '_' + (this.layoutDoc._layout_currentTimecode || 0).toString()).replace(/[./?=]/g, '_'));
-        // const filename = basename(encodedFilename);
-        //ClientUtils.convertDataUri(dataUrl, filename).then((returnedFilename: string) => returnedFilename && (cb ?? this.createSnapshotLink)(returnedFilename, downX, downY));
-        // }
-        // const docViewContent = this.DocumentView?.().ContentDiv!;
-        // if (docViewContent instanceof HTMLCanvasElement) {
-        //     const canvas = docViewContent;
-        //     const img = document.createElement('img'); // create a Image Element
-        //     img.src = canvas.toDataURL(); // image sourcez
-        //     img.style.width = canvas.style.width;
-        //     img.style.height = canvas.style.height;
-        //     const parEle = newCan.parentElement as HTMLElement;
-        //     parEle.removeChild(newCan);
-        //     parEle.appendChild(img);
-        // }
     };
 
     createSnapshotLink = (imagePath: string, downX?: number, downY?: number) => {
@@ -390,21 +340,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         setTimeout(() => downX !== undefined && downY !== undefined && DocumentView.getFirstDocumentView(imageSnapshot)?.startDragging(downX, downY, dropActionType.move, true));
     };
 
-    /**
-     * 
-        if (oldDiv instanceof HTMLCanvasElement) {
-            const canvas = oldDiv;
-            const img = document.createElement('img'); // create a Image Element
-            img.src = canvas.toDataURL(); // image sourcez
-            img.style.width = canvas.style.width;
-            img.style.height = canvas.style.height;
-            const newCan = newDiv as HTMLCanvasElement;
-            const parEle = newCan.parentElement as HTMLElement;
-            parEle.removeChild(newCan);
-            parEle.appendChild(img);
-        }
-     */
-
     static selectUrlToBase64 = async (blob: Blob): Promise<string> => {
         try {
             return new Promise((resolve, reject) => {
@@ -445,10 +380,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         try {
             // const hrefBase64 = await ImageBox.imageUrlToBase64(hrefComplete);
             const hrefBase64 = await this.createCanvas();
-            const response = await gptImageLabel(hrefBase64, 'Tell me what words you see on this image.');
-            //const response = await gptImageLabel(hrefBase64, 'Make flashcards out of this text with each question and answer labeled as question and answer. Do not label each flashcard and do not include asterisks: ');
+            //const response = await gptImageLabel(hrefBase64, 'Tell me what words you see on this image.');
+            const response = await gptImageLabel(hrefBase64, 'Make flashcards out of this text with each question and answer labeled as question and answer. Do not label each flashcard and do not include asterisks: ');
             console.log(response);
-            // AnchorMenu.Instance.transferToFlashcard(response);
+            AnchorMenu.Instance.transferToFlashcard(response);
             // this.Document[DocData].description = response.trim();
             // return response; // Return the response
         } catch (error) {
@@ -669,6 +604,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._getAnchor = AnchorMenu.Instance?.GetAnchor;
         AnchorMenu.Instance.gptFlashcards = this.getImageDesc;
         AnchorMenu.Instance.addToCollection = this._props.DocumentView?.()._props.addDocument;
+        AnchorMenu.Instance.marqueeWidth = this._marqueeref.current?.Width ?? 0;
+        AnchorMenu.Instance.marqueeHeight = this._marqueeref.current?.Height ?? 0;
         this._marqueeref.current?.onTerminateSelection();
         this._props.select(false);
     };