feat(IText): Draggable text

package.json

@@ -55,6 +55,7 @@
     "test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
     "coverage:report": "nyc report --reporter=lcov --reporter=text",
     "lint": "eslint --config .eslintrc.json src",
+    "lint:fix": "eslint --fix --config .eslintrc.json src",
     "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
     "all": "npm run build && npm run test -- --all && npm run lint && npm run lint_tests && npm run export",
     "testem": "testem .",

src/canvas.class.js

@@ -66,7 +66,7 @@
    *    // no winners
    *  }
    *  else if(!opt.didDrop) {
-   *    //  my objects didn't win, some other lucky bastard
+   *    //  my objects didn't win, some other lucky object
    *  }
    *  else {
    *    //  we have a winner it's opt.target!!

src/mixins/canvas_events.mixin.js

@@ -233,9 +233,21 @@
     /**
      * @private
      */
-    _renderDragStartSelection: function () {
-      this._dragSource && typeof this._dragSource.renderDragStartSelection === 'function'
-        && this._dragSource.renderDragStartSelection();
+    _renderDragEffects: function (e, source, target) {
+      var ctx = this.contextTop;
+      if (source) {
+        source.clearContextTop(true);
+        source.renderDragSourceEffect(e);
+      }
+      if (target) {
+        if (target !== source) {
+          ctx.restore();
+          ctx.save();
+          target.clearContextTop(true);
+        }
+        target.renderDropTargetEffect(e);
+      }
+      ctx.restore();
     },
 
     /**
@@ -295,26 +307,29 @@
             dragSource: this._dragSource,
             canDrop: false,
             dropTarget: undefined
-          };
+          },
+          dropTarget;
       //  fire on canvas
       this.fire(eventType, options);
       //  make sure we fire dragenter events before dragover
       //  if dragleave is needed, object will not fire dragover so we don't need to trouble ourselves with it
       this._fireEnterLeaveEvents(target, options);
       if (target) {
-        //  render drag selection before rendering target cursor for correct visuals
-        target.canDrop(e) && this._renderDragStartSelection();
+        // render drag selection before rendering target cursor for correct visuals
+        if (target.canDrop(e)) { dropTarget = target; };
         target.fire(eventType, options);
       }
       //  propagate the event to subtargets
       for (var i = 0; i < targets.length; i++) {
         target = targets[i];
         //  accept event only if previous targets didn't
-        !e.defaultPrevented && target.canDrop(e) && this._renderDragStartSelection();
+        if (!e.defaultPrevented && target.canDrop(e)) {
+          dropTarget = target;
+        }
         target.fire(eventType, options);
       }
-      //  render drag selection in case no target accepted the event
-      !e.defaultPrevented && this._renderDragStartSelection();
+      //  render drag effects now that relations between source and target is clear
+      this._renderDragEffects(e, this._dragSource, dropTarget);
     },
 
     /**

src/mixins/canvas_serialization.mixin.js

@@ -3,9 +3,9 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
   /**
    * Populates canvas with data from the specified JSON.
    * JSON format must conform to the one of {@link fabric.Canvas#toJSON}
-   * 
+   *
    * **IMPORTANT**: It is recommended to abort loading tasks before calling this method to prevent race conditions and unnecessary networking
-   * 
+   *
    * @param {String|Object} json JSON string or object
    * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
    * @param {Object} [options] options
@@ -23,7 +23,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
    * }).then((canvas) => {
    *   ... canvas is restored, add your code.
    * });
-   * 
+   *
    */
   loadFromJSON: function (json, reviver, options) {
     if (!json) {

src/mixins/itext_behavior.mixin.js

@@ -97,10 +97,7 @@
      * @private
      */
     _animateCursor: function(obj, targetOpacity, duration, completeMethod) {
-
-      var tickState;
-
-      tickState = {
+      var tickState = {
         isAborted: false,
         abort: function() {
           this.isAborted = true;
@@ -150,7 +147,6 @@
           delay = restart ? 0 : this.cursorDelay;
 
       this.abortCursorAnimation();
-      this._currentCursorOpacity = 1;
       if (delay) {
         this._cursorTimeout2 = setTimeout(function () {
           _this._tick();
@@ -172,12 +168,11 @@
       clearTimeout(this._cursorTimeout1);
       clearTimeout(this._cursorTimeout2);
 
-      this._currentCursorOpacity = 0;
+      this._currentCursorOpacity = 1;
 
       //  make sure we clear context even if instance is not editing
       if (shouldClear) {
-        var ctx = this._clearContextTop();
-        ctx && ctx.restore();
+        this.clearContextTop();
       }
     },
 
@@ -346,7 +341,6 @@
       if (this.isEditing || !this.editable) {
         return;
       }
-
       if (this.canvas) {
         this.canvas.calcOffset();
         this.exitEditingOnOthers(this.canvas);
@@ -512,6 +506,7 @@
         e.dataTransfer.effectAllowed = 'copyMove';
         this.setDragImage(e, data);
       }
+      this.abortCursorAnimation();
       return this.__isDragging;
     },
 
@@ -546,8 +541,6 @@
       var canDrop = !e.defaultPrevented && this.canDrop(e);
       if (!this.__isDraggingOver && canDrop) {
         this.__isDraggingOver = true;
-        this.enterEditing(e);
-        this.__isDragging && this.abortCursorAnimation();
       }
     },
 
@@ -562,26 +555,18 @@
       var canDrop = !e.defaultPrevented && this.canDrop(e);
       if (!this.__isDraggingOver && canDrop) {
         this.__isDraggingOver = true;
-        this.enterEditing(e);
-        this.__isDragging && this.abortCursorAnimation();
       }
       else if (this.__isDraggingOver && !canDrop) {
         //  drop state has changed
         this.__isDraggingOver = false;
-        !this.__isDragging && this.clearContextTop();
-        this.exitEditing();
       }
       if (this.__isDraggingOver) {
         //  can be dropped, inform browser
         e.preventDefault();
         //  inform event subscribers
         options.canDrop = true;
         options.dropTarget = this;
-        //  render
-        this.setCursorByClick(e);
-        this._updateTextarea();
-        this.restartCursorIfNeeded();
-        this.renderCursorOrSelection();
+        // find cursor under the drag part.
       }
     },
 
@@ -592,8 +577,6 @@
     dragLeaveHandler: function () {
       if (this.__isDraggingOver || this.__isDragging) {
         this.__isDraggingOver = false;
-        !this.__isDragging && this.clearContextTop();
-        this.exitEditing();
       }
     },
 
@@ -621,8 +604,7 @@
             this._updateTextarea();
           }
           else {
-            var ctx = this._clearContextTop();
-            ctx && ctx.restore();
+            this.clearContextTop();
             if (dropEffect === 'move') {
               this.insertChars('', null, selectionStart, selectionEnd);
               this.selectionStart = this.selectionEnd = selectionStart;
@@ -662,15 +644,12 @@
       e.preventDefault();
       var insert = e.dataTransfer.getData('text/plain');
       if (insert && !didDrop) {
-        var insertAt = this.selectionStart;
+        var insertAt = this.getSelectionStartFromPointer(e);
         var data = e.dataTransfer.types.includes('application/fabric') ?
           JSON.parse(e.dataTransfer.getData('application/fabric')) :
           {};
         var styles = data.styles;
         var trailing = insert[Math.max(0, insert.length - 1)];
-        this.canvas.discardActiveObject();
-        this.canvas.setActiveObject(this);
-        this.enterEditing(e);
         var selectionStartOffset = 0;
         //  drag and drop in same instance
         if (this.__dragStartSelection) {
@@ -696,12 +675,16 @@
         options.dropTarget = this;
         //  finalize
         this.insertChars(insert, styles, insertAt);
+        // can this part be moved in an outside event? andrea to check.
+        this.canvas.setActiveObject(this);
+        this.enterEditing();
         this.selectionStart = Math.min(insertAt + selectionStartOffset, 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 + selectionStartOffset, action: 'drop' });
         this.canvas.fire('text:changed', { target: this });
+        this.canvas.contextTopDirty = true;
         this.canvas.requestRenderAll();
       }
     },
@@ -910,7 +893,6 @@
       this.hiddenTextarea = null;
       this.abortCursorAnimation();
       this._restoreEditingProps();
-      this._currentCursorOpacity = 0;
       if (this._shouldClearDimensionCache()) {
         this.initDimensions();
         this.setCoords();

src/mixins/itext_click_behavior.mixin.js

@@ -100,7 +100,6 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
     if (!this.canvas || !this.editable || this.__isDragging || (options.e.button && options.e.button !== 1)) {
       return;
     }
-
     this.__isMousedown = true;
 
     if (this.selected) {
@@ -154,15 +153,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
    * standard handler for mouse up, overridable
    * @private
    */
-  mouseUpHandler: function (options) {
-    // restore selection state after dragging
-    if (this.__isDragging && !this.__dragStartFired) {
-      // drag didn't occur, so we revert to click behavior
-      this.__isDragging = false;
-      this._mouseDownHandler(options);
-    }
-    this.__isDragging = this.__dragStartFired = false;
-
+  mouseUpHandler: function(options) {
     this.__isMousedown = false;
     if (!this.editable ||
       (this.group && !this.group.interactive) ||

src/mixins/itext_key_behavior.mixin.js

@@ -103,7 +103,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
    * Override this method to customize cursor behavior on textbox blur
    */
   blur: function () {
-    !this.__isDragging && this.abortCursorAnimation();
+    this.abortCursorAnimation();
   },
 
   /**

src/mixins/object_ancestry.mixin.js

@@ -40,16 +40,16 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
 
   /**
    * Returns an object that represent the ancestry situation.
-   * 
+   *
    * @typedef {object} AncestryComparison
    * @property {Ancestors} common ancestors of `this` and `other` (may include `this` | `other`)
    * @property {Ancestors} fork ancestors that are of `this` only
    * @property {Ancestors} otherFork ancestors that are of `other` only
-   * 
+   *
    * @param {fabric.Object} other
    * @param {boolean} [strict] finds only ancestors that are objects (without canvas)
    * @returns {AncestryComparison | undefined}
-   * 
+   *
    */
   findCommonAncestors: function (other, strict) {
     if (this === other) {

src/mixins/object_interactivity.mixin.js

@@ -279,6 +279,34 @@
       return this;
     },
 
+    /**
+     * Clears the canvas.contextTop in a specific area that corresponds to the object's bounding box
+     * that is in the canvas.contextContainer.
+     * This function is used to clear pieces of contextTop where we render ephemeral effects on top of the object.
+     * Example: blinking cursror text selection, drag effects.
+     * // TODO: discuss swapping restoreManually with a renderCallback, but think of async issues
+     * @param {Boolean} [restoreManually] When true won't restore the context after clear, in order to draw something else.
+     * @return {CanvasRenderingContext2D|undefined} canvas.contextTop that is either still transformed
+     * with the object transformMatrix, or restored to neutral transform
+     */
+    clearContextTop: function(restoreManually) {
+      if (!this.canvas || !this.canvas.contextTop) {
+        return;
+      }
+      var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform;
+      if (!ctx) {
+        return;
+      }
+      ctx.save();
+      ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
+      this.transform(ctx);
+      // we add 4 pixel, to be sure to do not leave any pixel out
+      var width = this.width + 4, height = this.height + 4;
+      ctx.clearRect(-width / 2, -height / 2, width, height);
+
+      restoreManually || ctx.restore();
+      return ctx;
+    },
 
     /**
      * This callback function is called every time _discardActiveObject or _setActiveObject
@@ -311,5 +339,13 @@
       return false;
     },
 
+    renderDragSourceEffect: function() {
+      // for subclasses
+    },
+
+    renderDropTargetEffect: function(/* e */) {
+      // for subclasses
+    },
+
   });
 })();