fix(IText): drag image + retina

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(DraggableText): drag image blur [#8712](https://github.com/fabricjs/fabric.js/pull/8712)
 - ci(): Fix tests for firefox 110 update [#8710](https://github.com/fabricjs/fabric.js/pull/8710)
 - chore(): index files for exports and tree shaking [#8661](https://github.com/fabricjs/fabric.js/pull/8661)
 - ci(test): cleanup node config (#8694 followup) [#8707](https://github.com/fabricjs/fabric.js/issues/8707)

src/shapes/IText/DraggableTextDelegate.ts

@@ -9,8 +9,6 @@ import { Point } from '../../Point';
 import type { IText } from './IText';
 import { setStyle } from '../../util/dom_style';
 import { cloneDeep } from '../../util/internals/cloneDeep';
-import { createCanvasElement } from '../../util/misc/dom';
-import { isIdentityMatrix } from '../../util/misc/matrix';
 import { TextStyleDeclaration } from '../Text/StyledText';
 
 /**
@@ -140,37 +138,27 @@ export class DraggableTextDelegate {
     };
     target.setSelectionStyles(styleOverride, 0, selectionStart);
     target.setSelectionStyles(styleOverride, selectionEnd, target.text.length);
-    let dragImage = target.toCanvasElement({
+    target.dirty = true;
+    const dragImage = target.toCanvasElement({
       enableRetinaScaling,
+      viewportTransform: true,
     });
     // restore values
     target.backgroundColor = bgc;
     target.styles = styles;
-    //  handle retina scaling and vpt
-    if (retinaScaling > 1 || !isIdentityMatrix(vpt)) {
-      const dragImageCanvas = createCanvasElement();
-      const size = new Point(dragImage.width, dragImage.height)
-        .scalarDivide(retinaScaling)
-        .transform(vpt, true);
-      dragImageCanvas.width = size.x;
-      dragImageCanvas.height = size.y;
-      const ctx = dragImageCanvas.getContext('2d')!;
-      ctx.scale(1 / retinaScaling, 1 / retinaScaling);
-      const [a, b, c, d] = vpt;
-      ctx.transform(a, b, c, d, 0, 0);
-      ctx.drawImage(dragImage, 0, 0);
-      dragImage = dragImageCanvas;
-    }
-    this.__dragImageDisposer && this.__dragImageDisposer();
-    this.__dragImageDisposer = () => {
-      dragImage.remove();
-    };
+    target.dirty = true;
     //  position drag image offscreen
     setStyle(dragImage, {
-      position: 'absolute',
-      left: -dragImage.width + 'px',
+      position: 'fixed',
+      left: `${-dragImage.width}px`,
       border: 'none',
+      width: `${dragImage.width / retinaScaling}px`,
+      height: `${dragImage.height / retinaScaling}px`,
     });
+    this.__dragImageDisposer && this.__dragImageDisposer();
+    this.__dragImageDisposer = () => {
+      dragImage.remove();
+    };
     getDocument().body.appendChild(dragImage);
     e.dataTransfer?.setDragImage(dragImage, offset.x, offset.y);
   }
@@ -301,7 +289,7 @@ export class DraggableTextDelegate {
         } else if (insertAt > selectionEnd) {
           insertAt -= selectionEnd - selectionStart;
         }
-        target.insertChars('', undefined, selectionStart, selectionEnd);
+        target.removeChars(selectionStart, selectionEnd);
         // prevent `dragend` from handling event
         delete this.__dragStartSelection;
       }
@@ -365,7 +353,7 @@ export class DraggableTextDelegate {
         } else {
           target.clearContextTop();
           if (dropEffect === 'move') {
-            target.insertChars('', undefined, selectionStart, selectionEnd);
+            target.removeChars(selectionStart, selectionEnd);
             target.selectionStart = target.selectionEnd = selectionStart;
             target.hiddenTextarea &&
               (target.hiddenTextarea.value = target.text);

src/shapes/Object/Object.ts

@@ -24,6 +24,7 @@ import {
   resetObjectTransform,
   saveObjectTransform,
 } from '../../util/misc/objectTransforms';
+import { sendObjectToPlane } from '../../util/misc/planeChange';
 import { pick } from '../../util/misc/pick';
 import { toFixed } from '../../util/misc/toFixed';
 import type { Group } from '../Group';
@@ -1651,6 +1652,7 @@ export class FabricObject<
    * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4
    * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
    * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2
+   * @param {Boolean} [options.viewportTransform] Account for canvas viewport transform
    * @return {HTMLCanvasElement} Returns DOM element <canvas> with the FabricObject
    */
   toCanvasElement(options: any = {}) {
@@ -1669,6 +1671,9 @@ export class FabricObject<
     if (options.withoutShadow) {
       this.shadow = null;
     }
+    if (options.viewportTransform) {
+      sendObjectToPlane(this, this.getViewportTransform());
+    }
 
     const el = createCanvasElement(),
       // skip canvas zoom and calculate with setCoords now.

test/visual/text.js

@@ -518,7 +518,7 @@
     golden: 'drag_image.png',
     width: 120,
     height: 220,
-    percentage: 0.04,
+    percentage: 0.01,
     fabricClass: 'Canvas'
   });
 
@@ -529,7 +529,7 @@
     golden: 'drag_image.png',
     width: 110,
     height: 250,
-    percentage: 0.04,
+    percentage: 0.01,
     fabricClass: 'Canvas'
   });
 
@@ -540,7 +540,7 @@
     golden: 'drag_image_vpt.png',
     width: 220,
     height: 250,
-    percentage: 0.04,
+    percentage: 0.01,
     fabricClass: 'Canvas'
   });
 
@@ -551,7 +551,7 @@
     golden: 'drag_image_vpt.png',
     width: 220,
     height: 250,
-    percentage: 0.04,
+    percentage: 0.01,
     fabricClass: 'Canvas'
   });