feat(IText): Draggable text

src/canvas.class.js

@@ -943,19 +943,16 @@
 
       if (boundsWidth === 0 || boundsHeight === 0) {
         // If bounds are not available (i.e. not visible), do not apply scale.
-        cssScale = { width: 1, height: 1 };
+        cssScale = { x: 1, y: 1 };
       }
       else {
         cssScale = {
-          width: upperCanvasEl.width / boundsWidth,
-          height: upperCanvasEl.height / boundsHeight
+          x: upperCanvasEl.width / boundsWidth,
+          y: upperCanvasEl.height / boundsHeight
         };
       }
 
-      return {
-        x: pointer.x * cssScale.width,
-        y: pointer.y * cssScale.height
-      };
+      return pointer.multiply(cssScale);
     },
 
     /**
@@ -980,6 +977,7 @@
 
       this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl);
       this._applyCanvasStyle(upperCanvasEl);
+      upperCanvasEl.setAttribute('draggable', 'true');
       this.contextTop = upperCanvasEl.getContext('2d');
     },
 

src/mixins/canvas_events.mixin.js

@@ -50,6 +50,8 @@
       functor(canvasElement, 'wheel', this._onMouseWheel);
       functor(canvasElement, 'contextmenu', this._onContextMenu);
       functor(canvasElement, 'dblclick', this._onDoubleClick);
+      functor(canvasElement, 'dragstart', this._onDragStart);
+      functor(canvasElement, 'dragend', this._onDragEnd);
       functor(canvasElement, 'dragover', this._onDragOver);
       functor(canvasElement, 'dragenter', this._onDragEnter);
       functor(canvasElement, 'dragleave', this._onDragLeave);
@@ -103,6 +105,8 @@
       this._onMouseEnter = this._onMouseEnter.bind(this);
       this._onContextMenu = this._onContextMenu.bind(this);
       this._onDoubleClick = this._onDoubleClick.bind(this);
+      this._onDragStart = this._onDragStart.bind(this);
+      this._onDragEnd = this._onDragEnd.bind(this);
       this._onDragOver = this._onDragOver.bind(this);
       this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter');
       this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave');
@@ -207,14 +211,43 @@
       this.__onLongPress && this.__onLongPress(e, self);
     },
 
+    /**
+     * supports native like text dragging
+     * @private
+     * @param {DragEvent} e
+     */
+    _onDragStart: function (e) {
+      var activeObject = this.getActiveObject();
+      if (activeObject && typeof activeObject.onDragStart === 'function' && activeObject.onDragStart(e)) {
+        this._dragSource = activeObject;
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    },
+
+    /**
+     * supports native like text dragging
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#finishing_a_drag
+     * @private
+     * @param {DragEvent} e
+     */
+    _onDragEnd: function (e) {
+      this._dragSource && typeof this._dragSource.onDragEnd === 'function' && this._dragSource.onDragEnd(e);
+      delete this._dragSource;
+      // we need to call mouse up synthetically because the browser won't
+      this._onMouseUp(e);
+    },
+
     /**
      * prevent default to allow drop event to be fired
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#specifying_drop_targets
      * @private
      * @param {Event} [e] Event object fired on Event.js shake
      */
     _onDragOver: function(e) {
-      e.preventDefault();
       var target = this._simpleEventHandler('dragover', e);
+      target && (!target.canDrop || target.canDrop(e)) && e.preventDefault();
       this._fireEnterLeaveEvents(target, e);
     },
 
@@ -374,7 +407,9 @@
      * @param {Event} e Event object fired on mousemove
      */
     _onMouseMove: function (e) {
-      !this.allowTouchScrolling && e.preventDefault && e.preventDefault();
+      var activeObject = this.getActiveObject();
+      !this.allowTouchScrolling && (!activeObject || !activeObject.__isDragging)
+        && e.preventDefault && e.preventDefault();
       this.__onMouseMove(e);
     },
 

src/mixins/itext_behavior.mixin.js

@@ -13,6 +13,12 @@
       this.initCursorSelectionHandlers();
       this.initDoubleClickSimulation();
       this.mouseMoveHandler = this.mouseMoveHandler.bind(this);
+      this.dragOverHandler = this.dragOverHandler.bind(this);
+      this.dragLeaveHandler = this.dragLeaveHandler.bind(this);
+      this.dropHandler = this.dropHandler.bind(this);
+      this.on('dragover', this.dragOverHandler);
+      this.on('dragleave', this.dragLeaveHandler);
+      this.on('drop', this.dropHandler);
     },
 
     onDeselect: function() {
@@ -412,6 +418,252 @@
       }
     },
 
+    /**
+     * Override to customize the drag image
+     * https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage
+     * @param {DragEvent} e
+     * @param {object} data
+     * @param {number} data.selectionStart
+     * @param {number} data.selectionEnd
+     * @param {boolean} data.trailingSpace
+     * @param {string} data.text
+     * @param {string} data.value selected text
+     */
+    setDragImage: function (e, data) {
+      var t = this.calcTransformMatrix();
+      var flipFactor = new fabric.Point(this.flipX ? -1 : 1, this.flipY ? -1 : 1);
+      var boundaries = this._getCursorBoundaries(data.selectionStart);
+      var selectionPosition = new fabric.Point(
+        boundaries.left + boundaries.leftOffset,
+        boundaries.top + boundaries.topOffset
+      ).multiply(flipFactor);
+      var pos = fabric.util.transformPoint(selectionPosition, t);
+      var pointer = this.canvas.getPointer(e);
+      var diff = pointer.subtract(pos);
+      var enableRetinaScaling = this.canvas._isRetinaScaling();
+      var retinaScaling = this.canvas.getRetinaScaling();
+      var bbox = this.getBoundingRect(true);
+      var correction = pos.subtract(new fabric.Point(bbox.left, bbox.top));
+      var offset = correction.add(diff).scalarMultiply(retinaScaling);
+      //  prepare instance for drag image snapshot by making all non selected text invisible
+      var bgc = this.backgroundColor;
+      var styles = fabric.util.object.clone(this.styles, true);
+      delete this.backgroundColor;
+      var styleOverride = {
+        fill: 'transparent',
+        textBackgroundColor: 'transparent'
+      };
+      this.setSelectionStyles(styleOverride, 0, data.selectionStart);
+      this.setSelectionStyles(styleOverride, data.selectionEnd, data.text.length);
+      var dragImage = this.toCanvasElement({ enableRetinaScaling: enableRetinaScaling });
+      this.backgroundColor = bgc;
+      this.styles = styles;
+      //  handle retina scaling
+      if (enableRetinaScaling && retinaScaling > 1) {
+        var c = fabric.util.createCanvasElement();
+        c.width = dragImage.width / retinaScaling;
+        c.height = dragImage.height / retinaScaling;
+        var ctx = c.getContext('2d');
+        ctx.scale(1 / retinaScaling, 1 / retinaScaling);
+        ctx.drawImage(dragImage, 0, 0);
+        dragImage = c;
+      }
+      this.__dragImageDisposer && this.__dragImageDisposer();
+      this.__dragImageDisposer = function () {
+        dragImage.remove();
+      };
+      //  position drag image offsecreen
+      fabric.util.setStyle(dragImage, {
+        position: 'absolute',
+        left: -dragImage.width + 'px'
+      });
+      fabric.document.body.appendChild(dragImage);
+      e.dataTransfer.setDragImage(dragImage, offset.x, offset.y);
+    },
+
+    /**
+     * support native like text dragging
+     * @private
+     * @param {DragEvent} e
+     * @returns {boolean} should handle event
+     */
+    onDragStart: function (e) {
+      this.__dragStartFired = true;
+      if (this.__isDragging) {
+        var trailing = this._text[this.selectionEnd];
+        var trailingSpace = this._reNewline.test(trailing) ?
+          this.findLineBoundaryLeft(this.selectionStart) === this.selectionStart
+          && this.findLineBoundaryRight(this.selectionEnd) === this.selectionEnd :
+          this.findWordBoundaryRight(this.selectionEnd - 1) === this.selectionEnd;
+        var selection = this.__dragStartSelection = {
+          selectionStart: this.selectionStart,
+          selectionEnd: this.selectionEnd + trailingSpace,
+          trailingSpace: trailingSpace
+        };
+        var value = this._text.slice(selection.selectionStart, selection.selectionEnd).join('');
+        var data = Object.assign({ text: this.text, value: value }, selection);
+        e.dataTransfer.setData('text/plain', value);
+        e.dataTransfer.setData('application/fabric', JSON.stringify({
+          value: value,
+          styles: this.getSelectionStyles(selection.selectionStart, selection.selectionEnd, true),
+          trailingSpace: trailingSpace
+        }));
+        e.dataTransfer.effectAllowed = 'copyMove';
+        e.dataTransfer.dropEffect = 'move';
+        this.setDragImage(e, data);
+        this.fire('dragstart', { e: e, data: data });
+      }
+      return this.__isDragging;
+    },
+
+    /**
+     * Override to customize drag and drop behavior
+     * @public
+     * @param {DragEvent} e
+     * @returns {boolean}
+     */
+    canDrop: function (e) { // eslint-disable-line no-unused-vars
+      return this.editable && !this.__corner;
+    },
+
+    /**
+     * support native like text dragging
+     * @private
+     */
+    dragOverHandler: function (options) {
+      if (!this.__isDraggingOver && this.canDrop(options.e)) {
+        this.__isDraggingOver = true;
+        this.enterEditing(options.e);
+      }
+      if (this.__isDraggingOver) {
+        this.setCursorByClick(options.e);
+        this._updateTextarea();
+        this.restartCursorIfNeeded();
+        this.renderCursorOrSelection();
+      }
+    },
+
+    /**
+     * support native like text dragging
+     * @private
+     */
+    dragLeaveHandler: function () {
+      if (this.__isDraggingOver) {
+        this.__isDraggingOver = false;
+        this.exitEditing();
+      }
+    },
+
+    /**
+     * support native like text dragging
+     * fired only on the drag source
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#finishing_a_drag
+     * @private
+     * @param {DragEvent} e
+     * @returns {boolean} should handle event
+     */
+    onDragEnd: function (e) {
+      if (this.__isDragging && this.__dragStartFired) {
+        if (this.__dragStartSelection) {
+          var selectionStart = this.__dragStartSelection.selectionStart;
+          var selectionEnd = this.__dragStartSelection.selectionEnd;
+          var trailingSpace = this.__dragStartSelection.trailingSpace;
+          if (e.dataTransfer.dropEffect === 'move') {
+            this.insertChars('', null, selectionStart, selectionEnd);
+            this.selectionStart = this.selectionEnd = selectionStart;
+            this.hiddenTextarea && (this.hiddenTextarea.value = this.text);
+            this._updateTextarea();
+            this.fire('changed', { index: selectionStart, action: 'dragend' });
+            this.canvas.fire('text:changed', { target: this });
+            this.canvas.requestRenderAll();
+          }
+          else {
+            this.selectionStart = selectionStart;
+            this.selectionEnd = selectionEnd - trailingSpace;
+          }
+          this.exitEditing();
+          this.__lastSelected = false;
+        }
+
+        this.fire('dragend', { e: e });
+      }
+
+      this.__dragImageDisposer && this.__dragImageDisposer();
+      delete this.__dragImageDisposer;
+      delete this.__dragStartSelection;
+      this.__isDraggingOver = false;
+    },
+
+    /**
+     * support native like text dragging
+     *
+     * Override the `text/plain | application/fabric` types of {@link DragEvent#dataTransfer}
+     * in order to change the drop value or to customize styling respectively, by listening to the `drop:before` event
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#performing_a_drop
+     * @private
+     */
+    dropHandler: function (options) {
+      var e = options.e;
+      this.__isDraggingOver = false;
+      // inform browser that the drop has been accepted
+      e.preventDefault();
+      var insert = e.dataTransfer.getData('text/plain');
+      if (insert) {
+        var insertAt = this.selectionStart;
+        var data = e.dataTransfer.types.includes('application/fabric') ?
+          JSON.parse(e.dataTransfer.getData('application/fabric')) :
+          {};
+        var styles = data.styles;
+        var trailingSpace = data.trailingSpace, trailing = insert[Math.max(0, insert.length - 1)];
+        this.canvas.discardActiveObject();
+        this.canvas.setActiveObject(this);
+        this.enterEditing(e);
+        var isSpace = /\s/;
+        var insertingOnSpace = isSpace.test(this._text[insertAt]);
+        var insertingAfterSpace = isSpace.test(this._text[insertAt - 1]);
+        var seletionStartOffset = 0;
+        //  drag and drop in same instance
+        if (this.__dragStartSelection) {
+          var selectionStart = this.__dragStartSelection.selectionStart;
+          var selectionEnd = this.__dragStartSelection.selectionEnd;
+          if (insertAt > selectionStart && insertAt <= selectionEnd) {
+            insertAt = selectionStart;
+            trailingSpace = false;
+          }
+          else if (insertAt > selectionEnd) {
+            insertAt -= selectionEnd - selectionStart;
+          }
+          this.insertChars('', null, selectionStart, selectionEnd);
+          // prevent `dragend` from handling event
+          delete this.__dragStartSelection;
+        }
+        //  handle spacing
+        if (trailingSpace && this.findLineBoundaryLeft(insertAt) < insertAt && !insertingAfterSpace
+          && (insertAt === this._text.length || !insertingOnSpace)) {
+          insert = ' ' + insert;
+          styles.unshift({});
+          seletionStartOffset = 1;
+        }
+        else if (trailingSpace && insertingOnSpace && !insertingAfterSpace) {
+          insertAt++;
+        }
+        //  remove redundant line break
+        if (this._reNewline.test(trailing)
+          && (this._reNewline.test(this._text[insertAt]) || insertAt === this._text.length)) {
+          insert = insert.trimEnd();
+        }
+        //  finalize
+        this.insertChars(insert, styles, insertAt);
+        this.selectionStart = Math.min(insertAt + seletionStartOffset, this._text.length);
+        this.selectionEnd = Math.min(this.selectionStart + insert.length, this._text.length);
+        this.hiddenTextarea && (this.hiddenTextarea.value = this.text);
+        this._updateTextarea();
+        this.fire('changed', { index: insertAt + seletionStartOffset, action: 'drop' });
+        this.canvas.fire('text:changed', { target: this });
+        this.canvas.requestRenderAll();
+      }
+    },
+
     /**
      * @private
      */