Making clipPath absolute positionable (fabricjs#5199)

Added visual tests
Added property absolutePositioned and inverse

Author: asturur

.eslintrc_tests

@@ -6,7 +6,8 @@
   "globals": {
     "fabric": true,
     "QUnit": true,
-    "assert": true
+    "assert": true,
+    "pixelmatch": true
   },
   "rules": {
     "eqeqeq": 0,

.travis.yml

@@ -13,6 +13,7 @@ addons:
     - libpng-dev
     - libpango1.0-dev
     - libjpeg-dev
+    - librsvg2-dev
 # libcairo2-dev is preinstalled
 stages:
   - Linting and Building
@@ -50,12 +51,14 @@ jobs:
           packages: # avoid installing packages
     - stage: Unit Tests
       env: LAUNCHER=Chrome
+      script: npm run build:fast && testem ci --port 8080 -f testem.json -l $LAUNCHER
       install: npm install [email protected] [email protected]
       addons:
         apt:
           packages: # avoid installing packages
     - stage: Unit Tests
       env: LAUNCHER=Firefox
+      script: npm run build:fast && testem ci --port 8080 -f testem.json -l $LAUNCHER
       install: npm install [email protected] [email protected]
       addons:
         apt:
@@ -72,17 +75,18 @@ jobs:
     - stage: Unit Tests
       node_js: "4"
     - stage: Visual Tests
+      env: LAUNCHER=Node CANFAIL=TRUE
       node_js: "8"
       script: npm run build:fast && npm run test:visual
     - stage: Visual Tests
       env: LAUNCHER=Chrome
-      install: npm install [email protected] qunit@2.4.1
+      install: npm install [email protected] qunit@2.6.1
       script: npm run build:fast && testem ci --port 8080 -f testem-visual.json -l $LAUNCHER
     - stage: Visual Tests
       env: LAUNCHER=Firefox
-      install: npm install [email protected] qunit@2.4.1
+      install: npm install [email protected] qunit@2.6.1
       script: npm run build:fast && testem ci --port 8080 -f testem-visual.json -l $LAUNCHER
 
-script: 'npm run build:fast && testem ci --port 8080 -f testem.json -l $LAUNCHER'
+script: npm run build:fast && npm run test
 
 dist: trusty

package.json

@@ -48,9 +48,10 @@
     "test:single": "./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib",
     "test": "istanbul cover ./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib test/unit",
     "test:visual": "./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib test/visual",
+    "test:visual:single": "./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib",
     "test:all": "npm run test && npm run test:visual",
     "lint": "eslint --config .eslintrc.json src",
-    "lint_tests": "eslint test/unit --config .eslintrc_tests",
+    "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
     "export_dist_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric.js && cp package.json ../fabricjs.com/lib/package.json && cp -r src HEADER.js lib ../fabricjs.com/build/files/",
     "export_tests_to_site": "cp test/unit/*.js ../fabricjs.com/test/unit && cp -r test/visual/* ../fabricjs.com/test/visual && cp -r test/fixtures/* ../fabricjs.com/test/fixtures",
     "all": "npm run build && npm run test && npm run test:visual && npm run lint && npm run lint_tests && npm run export_dist_to_site && npm run export_tests_to_site",
@@ -59,8 +60,8 @@
     "testem:ci": "testem ci"
   },
   "optionalDependencies": {
-    "canvas": "1.6.x",
-    "jsdom": "9.x.x",
+    "canvas": "^1.6.12",
+    "jsdom": "^9.12.0",
     "xmldom": "0.1.x"
   },
   "devDependencies": {
@@ -70,7 +71,8 @@
     "qunit": "^2.6.1",
     "testem": "^1.18.4",
     "uglify-js": "3.3.x",
-    "pixelmatch": "^4.0.2"
+    "pixelmatch": "^4.0.2",
+    "chalk": "^2.4.1"
   },
   "engines": {
     "node": ">=4.0.0"

src/shapes/object.class.js

@@ -612,6 +612,27 @@
      */
     clipPath: undefined,
 
+    /**
+     * Meaningfull ONLY when the object is used as clipPath.
+     * if true, the clipPath will make the object clip to the outside of the clipPath
+     * since 2.4.0
+     * @type boolean
+     * @default false
+     */
+    inverted: false,
+
+    /**
+     * Meaningfull ONLY when the object is used as clipPath.
+     * if true, the clipPath will have its top and left relative to canvas, and will
+     * not be influenced by the object transform. This will make the clipPath relative
+     * to the canvas, but clipping just a particular object.
+     * WARNING this is beta, this feature may change or be renamed.
+     * since 2.4.0
+     * @type boolean
+     * @default false
+     */
+    absolutePositioned: false,
+
     /**
      * Constructor
      * @param {Object} [options] Options object
@@ -842,6 +863,8 @@
 
       if (this.clipPath) {
         object.clipPath = this.clipPath.toObject(propertiesToInclude);
+        object.clipPath.inverted = this.clipPath.inverted;
+        object.clipPath.absolutePositioned = this.clipPath.absolutePositioned;
       }
 
       fabric.util.populateWithProperties(this, object, propertiesToInclude);
@@ -1120,8 +1143,17 @@
       ctx.save();
       // DEBUG: uncomment this line, comment the following
       // ctx.globalAlpha = 0.4
-      ctx.globalCompositeOperation = 'destination-in';
+      if (path.inverted) {
+        ctx.globalCompositeOperation = 'destination-out';
+      }
+      else {
+        ctx.globalCompositeOperation = 'destination-in';
+      }
       //ctx.scale(1 / 2, 1 / 2);
+      if (path.absolutePositioned) {
+        var m = fabric.util.invertTransform(this.calcTransformMatrix());
+        ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+      }
       path.transform(ctx);
       ctx.scale(1 / path.zoomX, 1 / path.zoomY);
       ctx.drawImage(path._cacheCanvas, -path.cacheTranslationX, -path.cacheTranslationY);
@@ -1182,7 +1214,10 @@
         return true;
       }
       else {
-        if (this.dirty || (this.statefullCache && this.hasStateChanged('cacheProperties'))) {
+        if (this.dirty ||
+          (this.clipPath && this.clipPath.absolutePositioned) ||
+          (this.statefullCache && this.hasStateChanged('cacheProperties'))
+        ) {
           if (this._cacheCanvas && !skipCanvas) {
             var width = this.cacheWidth / this.zoomX;
             var height = this.cacheHeight / this.zoomY;
@@ -1252,8 +1287,8 @@
 
     _setClippingProperties: function(ctx) {
       ctx.globalAlpha = 1;
-      ctx.lineWidth = 0;
-      ctx.fillStyle = 'black';
+      ctx.strokeStyle = 'transparent';
+      ctx.fillStyle = '#000000';
     },
 
     /**

test/lib/visualCallbackQunit.js

@@ -0,0 +1,41 @@
+(function(window) {
+  function visualCallback() {
+    this.currentArgs = {};
+  }
+
+  visualCallback.prototype.addArguments = function(argumentObj) {
+    this.currentArgs = {
+      enabled: true,
+      fabric: argumentObj.fabric,
+      golden: argumentObj.golden,
+      diff: argumentObj.diff,
+    };
+  };
+
+  visualCallback.prototype.testDone = function(details) {
+    if (window && document && this.currentArgs.enabled) {
+      var fabricCanvas = this.currentArgs.fabric;
+      var ouputImageDataRef = this.currentArgs.diff;
+      var goldenCanvasRef = this.currentArgs.golden;
+      var id = 'qunit-test-output-' + details.testId;
+      var node = document.getElementById(id);
+      var fabricCopy = document.createElement('canvas');
+      var diff = document.createElement('canvas');
+      diff.width = fabricCopy.width = fabricCanvas.width;
+      diff.height = fabricCopy.height = fabricCanvas.height;
+      diff.getContext('2d').putImageData(ouputImageDataRef, 0, 0);
+      fabricCopy.getContext('2d').drawImage(fabricCanvas, 0, 0);
+      var _div = document.createElement('div');
+      _div.appendChild(goldenCanvasRef);
+      _div.appendChild(fabricCopy);
+      _div.appendChild(diff);
+      node.appendChild(_div);
+      // after one run, disable
+      this.currentArgs.enabled = false;
+    }
+  };
+
+  if (window) {
+    window.visualCallback = new visualCallback();
+  }
+})(this);

test/node_test_setup.js

@@ -1,8 +1,29 @@
 // set the fabric famework as a global for tests
+var chalk = require('chalk');
 global.fabric = require('../dist/fabric').fabric;
 global.pixelmatch = require('pixelmatch');
 global.fs = require('fs');
-
+global.visualCallback = {
+  addArguments: function() {},
+};
+global.imageDataToChalk = function(imageData) {
+  // actually this does not work on travis-ci, so commenting it out
+  return '';
+  var block = String.fromCharCode(9608)
+  var data = imageData.data;
+  var width = imageData.width;
+  var height = imageData.height;
+  var outputString = '';
+  var cp = 0;
+  for (var i = 0; i < height; i++) {
+    outputString += '\n';
+    for (var j = 0; j < width; j++) {
+      cp = (i * width + j) * 4;
+      outputString += chalk.rgb(data[cp], data[cp + 1], data[cp + 2])(block);
+    }
+  }
+  return outputString;
+};
 QUnit.config.testTimeout = 15000;
 QUnit.config.noglobals = true;
 QUnit.config.hidePassed = true;

test/unit/object_clipPath.js

@@ -16,46 +16,50 @@
 
   QUnit.test('toObject with clipPath', function(assert) {
     var emptyObjectRepr = {
-      'version':                  fabric.version,
-      'type':                     'object',
-      'originX':                  'left',
-      'originY':                  'top',
-      'left':                     0,
-      'top':                      0,
-      'width':                    0,
-      'height':                   0,
-      'fill':                     'rgb(0,0,0)',
-      'stroke':                   null,
-      'strokeWidth':              1,
-      'strokeDashArray':          null,
-      'strokeLineCap':            'butt',
-      'strokeLineJoin':           'miter',
-      'strokeMiterLimit':         4,
-      'scaleX':                   1,
-      'scaleY':                   1,
-      'angle':                    0,
-      'flipX':                    false,
-      'flipY':                    false,
-      'opacity':                  1,
-      'shadow':                   null,
-      'visible':                  true,
-      'backgroundColor':          '',
-      'clipTo':                   null,
-      'fillRule':                 'nonzero',
-      'paintFirst':               'fill',
-      'globalCompositeOperation': 'source-over',
-      'skewX':                      0,
-      'skewY':                      0,
-      'transformMatrix':          null
+      version:                  fabric.version,
+      type:                     'object',
+      originX:                  'left',
+      originY:                  'top',
+      left:                     0,
+      top:                      0,
+      width:                    0,
+      height:                   0,
+      fill:                     'rgb(0,0,0)',
+      stroke:                   null,
+      strokeWidth:              1,
+      strokeDashArray:          null,
+      strokeLineCap:            'butt',
+      strokeLineJoin:           'miter',
+      strokeMiterLimit:         4,
+      scaleX:                   1,
+      scaleY:                   1,
+      angle:                    0,
+      flipX:                    false,
+      flipY:                    false,
+      opacity:                  1,
+      shadow:                   null,
+      visible:                  true,
+      backgroundColor:          '',
+      clipTo:                   null,
+      fillRule:                 'nonzero',
+      paintFirst:               'fill',
+      globalCompositeOperation: 'source-over',
+      skewX:                      0,
+      skewY:                      0,
+      transformMatrix:          null,
     };
 
     var cObj = new fabric.Object();
     assert.deepEqual(emptyObjectRepr, cObj.toObject());
 
     cObj.clipPath = new fabric.Object();
-
     var expected = fabric.util.object.clone(emptyObjectRepr);
-    expected.clipPath = emptyObjectRepr;
+    var expectedClipPath = fabric.util.object.clone(emptyObjectRepr);
+    expectedClipPath = fabric.util.object.extend(expectedClipPath, {
+      inverted: cObj.clipPath.inverted,
+      absolutePositioned: cObj.clipPath.absolutePositioned,
+    });
+    expected.clipPath = expectedClipPath;
     assert.deepEqual(expected, cObj.toObject());
   });
 
@@ -71,6 +75,20 @@
     });
   });
 
+  QUnit.test('from object with clipPath inverted, absolutePositioned', function(assert) {
+    var done = assert.async();
+    var rect = new fabric.Rect({ width: 100, height: 100 });
+    rect.clipPath = new fabric.Circle({ radius: 50, inverted: true, absolutePositioned: true });
+    var toObject = rect.toObject();
+    fabric.Rect.fromObject(toObject, function(rect) {
+      assert.ok(rect.clipPath instanceof fabric.Circle, 'clipPath is enlived');
+      assert.equal(rect.clipPath.radius, 50, 'radius is restored correctly');
+      assert.equal(rect.clipPath.inverted, true, 'inverted is restored correctly');
+      assert.equal(rect.clipPath.absolutePositioned, true, 'absolutePositioned is restored correctly');
+      done();
+    });
+  });
+
   QUnit.test('from object with clipPath, nested', function(assert) {
     var done = assert.async();
     var rect = new fabric.Rect({ width: 100, height: 100 });
@@ -85,4 +103,33 @@
       done();
     });
   });
+
+  QUnit.test('from object with clipPath, nested inverted, absolutePositioned', function(assert) {
+    var done = assert.async();
+    var rect = new fabric.Rect({ width: 100, height: 100 });
+    rect.clipPath = new fabric.Circle({ radius: 50 });
+    rect.clipPath.clipPath = new fabric.Text('clipPath', { inverted: true, absolutePositioned: true});
+    var toObject = rect.toObject();
+    fabric.Rect.fromObject(toObject, function(rect) {
+      assert.ok(rect.clipPath instanceof fabric.Circle, 'clipPath is enlived');
+      assert.equal(rect.clipPath.radius, 50, 'radius is restored correctly');
+      assert.ok(rect.clipPath.clipPath instanceof fabric.Text, 'neted clipPath is enlived');
+      assert.equal(rect.clipPath.clipPath.text, 'clipPath', 'instance is restored correctly');
+      assert.equal(rect.clipPath.clipPath.inverted, true, 'instance inverted is restored correctly');
+      assert.equal(rect.clipPath.clipPath.absolutePositioned, true, 'instance absolutePositioned is restored correctly');
+      done();
+    });
+  });
+
+  QUnit.test('_setClippingProperties fix the context props', function(assert) {
+    var canvas = new fabric.Canvas();
+    var rect = new fabric.Rect({ width: 100, height: 100 });
+    canvas.contextContainer.fillStyle = 'red';
+    canvas.contextContainer.strokeStyle = 'blue';
+    canvas.contextContainer.globalAlpha = 0.3;
+    rect._setClippingProperties(canvas.contextContainer);
+    assert.equal(canvas.contextContainer.fillStyle, '#000000', 'fillStyle is reset');
+    assert.equal(new fabric.Color(canvas.contextContainer.strokeStyle).getAlpha(), 0, 'stroke style is reset');
+    assert.equal(canvas.contextContainer.globalAlpha, 1, 'globalAlpha is reset');
+  });
 })();