@erase2d/fabric 1.1.0-1 → 1.1.1

package/dist/fabric/src/ClippingGroup.js

@@ -1,2 +1,52 @@
-import{defineProperty as t,inherits as e,createClass as i,classCallCheck as r,callSuper as a,objectSpread2 as s,assertThisInitialized as n,get as o,getPrototypeOf as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{classRegistry as c,LayoutManager as h,FixedLayout as u,Path as f,Group as p}from"fabric";var g=function(c){function g(e,i){var o;return r(this,g),o=a(this,g,[e,s({layoutManager:new h(new u)},i)]),t(n(o),"blockErasing",!1),o}return e(g,p),i(g,[{key:"drawObject",value:function(t){var e=[],i=[];this._objects.forEach((function(t){return(t instanceof f?e:i).push(t)})),t.save(),t.fillStyle="black",t.fillRect(-this.width/2,-this.height/2,this.width,this.height),t.restore(),!this.blockErasing&&e.forEach((function(e){e.render(t)})),i.forEach((function(e){e.globalCompositeOperation=e.inverted?"destination-out":"source-in",e.render(t)}))}}],[{key:"getDefaults",value:function(){return s(s({},o(l(g),"getDefaults",this).call(this)),{},{originX:"center",originY:"center",left:0,top:0})}}]),g}();t(g,"type","clipping"),c.setClass(g);export{g as ClippingGroup};
+import { defineProperty as _defineProperty, inherits as _inherits, createClass as _createClass, classCallCheck as _classCallCheck, callSuper as _callSuper, objectSpread2 as _objectSpread2, assertThisInitialized as _assertThisInitialized, get as _get, getPrototypeOf as _getPrototypeOf } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { classRegistry, LayoutManager, FixedLayout, Path, Group } from 'fabric';
+
+var ClippingGroup = /*#__PURE__*/function (_Group) {
+  _inherits(ClippingGroup, _Group);
+  function ClippingGroup(objects, options) {
+    var _this;
+    _classCallCheck(this, ClippingGroup);
+    _this = _callSuper(this, ClippingGroup, [objects, _objectSpread2({
+      layoutManager: new LayoutManager(new FixedLayout())
+    }, options)]);
+    _defineProperty(_assertThisInitialized(_this), "blockErasing", false);
+    return _this;
+  }
+  _createClass(ClippingGroup, [{
+    key: "drawObject",
+    value: function drawObject(ctx) {
+      var paths = [];
+      var objects = [];
+      this._objects.forEach(function (object) {
+        return (object instanceof Path ? paths : objects).push(object);
+      });
+      ctx.save();
+      ctx.fillStyle = 'black';
+      ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
+      ctx.restore();
+      !this.blockErasing && paths.forEach(function (path) {
+        path.render(ctx);
+      });
+      objects.forEach(function (object) {
+        object.globalCompositeOperation = object.inverted ? 'destination-out' : 'source-in';
+        object.render(ctx);
+      });
+    }
+  }], [{
+    key: "getDefaults",
+    value: function getDefaults() {
+      return _objectSpread2(_objectSpread2({}, _get(_getPrototypeOf(ClippingGroup), "getDefaults", this).call(this)), {}, {
+        originX: 'center',
+        originY: 'center',
+        left: 0,
+        top: 0
+      });
+    }
+  }]);
+  return ClippingGroup;
+}(Group);
+_defineProperty(ClippingGroup, "type", 'clipping');
+classRegistry.setClass(ClippingGroup);
+
+export { ClippingGroup };
 //# sourceMappingURL=ClippingGroup.js.map

package/dist/fabric/src/ClippingGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClippingGroup.js","sources":["../../../src/ClippingGroup.ts"],"sourcesContent":["import {\n  Group,\n  LayoutManager,\n  FixedLayout,\n  Path,\n  FabricObject,\n  GroupProps,\n  classRegistry,\n} from 'fabric';\n\nexport class ClippingGroup extends Group {\n  static type = 'clipping';\n\n  static getDefaults(): Record<string, any> {\n    return {\n      ...super.getDefaults(),\n      originX: 'center',\n      originY: 'center',\n      left: 0,\n      top: 0,\n    };\n  }\n\n  private blockErasing = false;\n\n  constructor(objects: FabricObject[], options: Partial<GroupProps>) {\n    super(objects, {\n      layoutManager: new LayoutManager(new FixedLayout()),\n      ...options,\n    });\n  }\n\n  drawObject(ctx: CanvasRenderingContext2D) {\n    const paths: Path[] = [];\n    const objects: FabricObject[] = [];\n    this._objects.forEach((object) =>\n      (object instanceof Path ? paths : objects).push(object)\n    );\n\n    ctx.save();\n    ctx.fillStyle = 'black';\n    ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);\n    ctx.restore();\n\n    !this.blockErasing &&\n      paths.forEach((path) => {\n        path.render(ctx);\n      });\n\n    objects.forEach((object) => {\n      object.globalCompositeOperation = object.inverted\n        ? 'destination-out'\n        : 'source-in';\n      object.render(ctx);\n    });\n  }\n}\n\nclassRegistry.setClass(ClippingGroup);\n"],"names":["ClippingGroup","_Group","objects","options","_this","_classCallCheck","_callSuper","this","_objectSpread","layoutManager","LayoutManager","FixedLayout","_defineProperty","_assertThisInitialized","_inherits","Group","_createClass","key","value","ctx","paths","_objects","forEach","object","Path","push","save","fillStyle","fillRect","width","height","restore","blockErasing","path","render","globalCompositeOperation","inverted","_get","_getPrototypeOf","call","originX","originY","left","top","classRegistry","setClass"],"mappings":"0TAUaA,IAAAA,WAAaC,GAexB,SAAAD,EAAYE,EAAyBC,GAA8B,IAAAC,EAFvC,OAEuCC,OAAAL,GACjEI,EAAAE,EAAAC,KAAAP,EAAME,CAAAA,EAAOM,EAAA,CACXC,cAAe,IAAIC,EAAc,IAAIC,IAClCR,KACFS,EAAAC,EAAAT,mBANkB,GAAKA,CAO5B,CATC,OAXuBU,EAAAd,EAASe,GAoBhCC,EAAAhB,EAAA,CAAA,CAAAiB,IAAA,aAAAC,MAED,SAAWC,GACT,IAAMC,EAAgB,GAChBlB,EAA0B,GAChCK,KAAKc,SAASC,SAAQ,SAACC,GAAM,OAC1BA,aAAkBC,EAAOJ,EAAQlB,GAASuB,KAAKF,EAAO,IAGzDJ,EAAIO,OACJP,EAAIQ,UAAY,QAChBR,EAAIS,UAAUrB,KAAKsB,MAAQ,GAAItB,KAAKuB,OAAS,EAAGvB,KAAKsB,MAAOtB,KAAKuB,QACjEX,EAAIY,WAEHxB,KAAKyB,cACJZ,EAAME,SAAQ,SAACW,GACbA,EAAKC,OAAOf,EACd,IAEFjB,EAAQoB,SAAQ,SAACC,GACfA,EAAOY,yBAA2BZ,EAAOa,SACrC,kBACA,YACJb,EAAOW,OAAOf,EAChB,GACF,IAAC,CAAA,CAAAF,IAAA,cAAAC,MA1CD,WACE,OAAAV,EAAAA,EAAA6B,CAAAA,EAAAA,EAAAC,EAAAtC,GAAA,cAAAO,MAAAgC,KAAAhC,OAAA,CAAA,EAAA,CAEEiC,QAAS,SACTC,QAAS,SACTC,KAAM,EACNC,IAAK,GAET,KAAC3C,CAAA,IAmCFY,EA9CYZ,EAAa,OACV,YA+ChB4C,EAAcC,SAAS7C"}
+{"version":3,"file":"ClippingGroup.js","sources":["../../../src/ClippingGroup.ts"],"sourcesContent":["import {\n  Group,\n  LayoutManager,\n  FixedLayout,\n  Path,\n  FabricObject,\n  GroupProps,\n  classRegistry,\n} from 'fabric';\n\nexport class ClippingGroup extends Group {\n  static type = 'clipping';\n\n  static getDefaults(): Record<string, any> {\n    return {\n      ...super.getDefaults(),\n      originX: 'center',\n      originY: 'center',\n      left: 0,\n      top: 0,\n    };\n  }\n\n  private blockErasing = false;\n\n  constructor(objects: FabricObject[], options: Partial<GroupProps>) {\n    super(objects, {\n      layoutManager: new LayoutManager(new FixedLayout()),\n      ...options,\n    });\n  }\n\n  drawObject(ctx: CanvasRenderingContext2D) {\n    const paths: Path[] = [];\n    const objects: FabricObject[] = [];\n    this._objects.forEach((object) =>\n      (object instanceof Path ? paths : objects).push(object)\n    );\n\n    ctx.save();\n    ctx.fillStyle = 'black';\n    ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);\n    ctx.restore();\n\n    !this.blockErasing &&\n      paths.forEach((path) => {\n        path.render(ctx);\n      });\n\n    objects.forEach((object) => {\n      object.globalCompositeOperation = object.inverted\n        ? 'destination-out'\n        : 'source-in';\n      object.render(ctx);\n    });\n  }\n}\n\nclassRegistry.setClass(ClippingGroup);\n"],"names":["ClippingGroup","_Group","_inherits","objects","options","_this","_classCallCheck","_callSuper","_objectSpread","layoutManager","LayoutManager","FixedLayout","_defineProperty","_assertThisInitialized","_createClass","key","value","drawObject","ctx","paths","_objects","forEach","object","Path","push","save","fillStyle","fillRect","width","height","restore","blockErasing","path","render","globalCompositeOperation","inverted","getDefaults","_get","_getPrototypeOf","call","originX","originY","left","top","Group","classRegistry","setClass"],"mappings":";;;AAUaA,IAAAA,aAAa,0BAAAC,MAAA,EAAA;EAAAC,SAAA,CAAAF,aAAA,EAAAC,MAAA,CAAA,CAAA;AAexB,EAAA,SAAAD,aAAYG,CAAAA,OAAuB,EAAEC,OAA4B,EAAE;AAAA,IAAA,IAAAC,KAAA,CAAA;AAAAC,IAAAA,eAAA,OAAAN,aAAA,CAAA,CAAA;AACjEK,IAAAA,KAAA,GAAAE,UAAA,CAAA,IAAA,EAAAP,aAAA,EAAMG,CAAAA,OAAO,EAAAK,cAAA,CAAA;AACXC,MAAAA,aAAa,EAAE,IAAIC,aAAa,CAAC,IAAIC,WAAW,EAAE,CAAA;AAAC,KAAA,EAChDP,OAAO,CAAA,CAAA,CAAA,CAAA;AACTQ,IAAAA,eAAA,CAAAC,sBAAA,CAAAR,KAAA,mBANkB,KAAK,CAAA,CAAA;AAAA,IAAA,OAAAA,KAAA,CAAA;AAO5B,GAAA;AAACS,EAAAA,YAAA,CAAAd,aAAA,EAAA,CAAA;IAAAe,GAAA,EAAA,YAAA;AAAAC,IAAAA,KAAA,EAED,SAAAC,UAAWC,CAAAA,GAA6B,EAAE;MACxC,IAAMC,KAAa,GAAG,EAAE,CAAA;MACxB,IAAMhB,OAAuB,GAAG,EAAE,CAAA;AAClC,MAAA,IAAI,CAACiB,QAAQ,CAACC,OAAO,CAAC,UAACC,MAAM,EAAA;AAAA,QAAA,OAC3B,CAACA,MAAM,YAAYC,IAAI,GAAGJ,KAAK,GAAGhB,OAAO,EAAEqB,IAAI,CAACF,MAAM,CAAC,CAAA;AAAA,OACzD,CAAC,CAAA;MAEDJ,GAAG,CAACO,IAAI,EAAE,CAAA;MACVP,GAAG,CAACQ,SAAS,GAAG,OAAO,CAAA;MACvBR,GAAG,CAACS,QAAQ,CAAC,CAAC,IAAI,CAACC,KAAK,GAAG,CAAC,EAAE,CAAC,IAAI,CAACC,MAAM,GAAG,CAAC,EAAE,IAAI,CAACD,KAAK,EAAE,IAAI,CAACC,MAAM,CAAC,CAAA;MACxEX,GAAG,CAACY,OAAO,EAAE,CAAA;MAEb,CAAC,IAAI,CAACC,YAAY,IAChBZ,KAAK,CAACE,OAAO,CAAC,UAACW,IAAI,EAAK;AACtBA,QAAAA,IAAI,CAACC,MAAM,CAACf,GAAG,CAAC,CAAA;AAClB,OAAC,CAAC,CAAA;AAEJf,MAAAA,OAAO,CAACkB,OAAO,CAAC,UAACC,MAAM,EAAK;QAC1BA,MAAM,CAACY,wBAAwB,GAAGZ,MAAM,CAACa,QAAQ,GAC7C,iBAAiB,GACjB,WAAW,CAAA;AACfb,QAAAA,MAAM,CAACW,MAAM,CAACf,GAAG,CAAC,CAAA;AACpB,OAAC,CAAC,CAAA;AACJ,KAAA;AAAC,GAAA,CAAA,EAAA,CAAA;IAAAH,GAAA,EAAA,aAAA;IAAAC,KAAA,EA1CD,SAAAoB,WAAAA,GAA0C;MACxC,OAAA5B,cAAA,CAAAA,cAAA,CAAA6B,EAAAA,EAAAA,IAAA,CAAAC,eAAA,CAAAtC,aAAA,CAAA,EAAA,aAAA,EAAA,IAAA,CAAA,CAAAuC,IAAA,CAAA,IAAA,CAAA,CAAA,EAAA,EAAA,EAAA;AAEEC,QAAAA,OAAO,EAAE,QAAQ;AACjBC,QAAAA,OAAO,EAAE,QAAQ;AACjBC,QAAAA,IAAI,EAAE,CAAC;AACPC,QAAAA,GAAG,EAAE,CAAA;AAAC,OAAA,CAAA,CAAA;AAEV,KAAA;AAAC,GAAA,CAAA,CAAA,CAAA;AAAA,EAAA,OAAA3C,aAAA,CAAA;AAAA,CAAA,CAXgC4C,KAAK,EAAA;AA8CvChC,eAAA,CA9CYZ,aAAa,EAAA,MAAA,EACV,UAAU,CAAA,CAAA;AA+C1B6C,aAAa,CAACC,QAAQ,CAAC9C,aAAa,CAAC;;;;"}

package/dist/fabric/src/EraserBrush.js

@@ -1,2 +1,436 @@
-import{asyncToGenerator as t,inherits as e,createClass as n,regeneratorRuntime as r,classCallCheck as a,callSuper as i,defineProperty as s,assertThisInitialized as o,get as c,getPrototypeOf as u,toConsumableArray as l,slicedToArray as h}from"../../_virtual/_rollupPluginBabelHelpers.js";import*as v from"fabric";import{Group as p}from"fabric";import{erase as f}from"../../core/erase.js";import{ClippingGroup as d}from"./ClippingGroup.js";import{draw as m}from"./ErasingEffect.js";function y(t,e){return t.flatMap((function(t){return t.erasable&&t.intersectsWithObject(e)?t instanceof p&&"deep"===t.erasable?y(t.getObjects(),e):[t]:[]}))}var g=function(t){var e=t.clipPath;if(e instanceof d)return e;var n=new d([],{width:t.width,height:t.height});if(e){var r=e.translateToOriginPoint(new v.Point,e.originX,e.originY),a=r.x,i=r.y;e.originX=e.originY="center",v.util.sendObjectToPlane(e,void 0,v.util.createTranslateMatrix(a,i)),n.add(e)}return t.clipPath=n};function w(t,e){var n=g(t);n.add(e),n.set("dirty",!0),t.set("dirty",!0)}function x(t,e){return E.apply(this,arguments)}function E(){return(E=t(r().mark((function t(e,n){var a;return r().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,n.clone();case 2:return a=t.sent,v.util.sendObjectToPlane(a,void 0,e.calcTransformMatrix()),w(e,a),t.abrupt("return",a);case 6:case"end":return t.stop()}}),t)})))).apply(this,arguments)}function b(t,e,n){return k.apply(this,arguments)}function k(){return(k=t(r().mark((function t(e,n,a){var i,s;return r().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,a.clone();case 2:return i=t.sent,s=n&&e.translateToOriginPoint(new v.Point,e.originX,e.originY),v.util.sendObjectToPlane(i,void 0,s?v.util.multiplyTransformMatrixArray([[1,0,0,1,s.x,s.y],n,[1,0,0,1,-s.x,-s.y],e.calcTransformMatrix()]):e.calcTransformMatrix()),w(e,i),t.abrupt("return",i);case 7:case"end":return t.stop()}}),t)})))).apply(this,arguments)}var P=function(p){function d(t){var e;a(this,d),e=i(this,d,[t]),s(o(e),"inverted",!1),s(o(e),"active",!1);var n=document.createElement("canvas"),r=n.getContext("2d");if(!r)throw new Error("Failed to get context");return function(t,e,n){var r=n.width,a=n.height,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;t.width=r,t.height=a,i>1&&(t.setAttribute("width",(r*i).toString()),t.setAttribute("height",(a*i).toString()),e.scale(i,i))}(n,r,t,e.canvas.getRetinaScaling()),e.effectContext=r,e.eventEmitter=new EventTarget,e}var g;return e(d,p),n(d,[{key:"on",value:function(t,e,n){var r=this;return this.eventEmitter.addEventListener(t,e,n),function(){return r.eventEmitter.removeEventListener(t,e,n)}}},{key:"drawEffect",value:function(){m(this.effectContext,{opacity:new v.Color(this.color).getAlpha(),inverted:this.inverted},{canvas:this.canvas})}},{key:"_setBrushStyles",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.canvas.contextTop;c(u(d.prototype),"_setBrushStyles",this).call(this,t),t.strokeStyle="black"}},{key:"needsFullRender",value:function(){return!0}},{key:"_render",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.canvas.getTopContext();c(u(d.prototype),"_render",this).call(this,t),f(this.canvas.getContext(),t,this.effectContext)}},{key:"onMouseDown",value:function(t,e){var n=this;this.eventEmitter.dispatchEvent(new CustomEvent("start",{detail:e,cancelable:!0}))&&(this.active=!0,this.eventEmitter.dispatchEvent(new CustomEvent("redraw",{detail:{type:"start"},cancelable:!0}))&&this.drawEffect(),this._disposer=this.canvas.on("after:render",(function(t){t.ctx===n.canvas.getContext()&&(n.eventEmitter.dispatchEvent(new CustomEvent("redraw",{detail:{type:"render"},cancelable:!0}))&&n.drawEffect(),n._render())})),c(u(d.prototype),"onMouseDown",this).call(this,t,e))}},{key:"onMouseMove",value:function(t,e){this.active&&this.eventEmitter.dispatchEvent(new CustomEvent("move",{detail:e,cancelable:!0}))&&c(u(d.prototype),"onMouseMove",this).call(this,t,e)}},{key:"onMouseUp",value:function(t){var e;return this.active&&c(u(d.prototype),"onMouseUp",this).call(this,t),this.active=!1,null===(e=this._disposer)||void 0===e||e.call(this),delete this._disposer,!1}},{key:"convertPointsToSVGPath",value:function(t){return c(u(d.prototype),"convertPointsToSVGPath",this).call(this,this.decimate?this.decimatePoints(t,this.decimate):t)}},{key:"createPath",value:function(t){var e=c(u(d.prototype),"createPath",this).call(this,t);return e.set(this.inverted?{globalCompositeOperation:"source-over",stroke:"white"}:{globalCompositeOperation:"destination-out",stroke:"black",opacity:new v.Color(this.color).getAlpha()}),e}},{key:"commit",value:(g=t(r().mark((function e(n){var a,i;return r().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return a=n.path,i=n.targets,e.t0=Map,e.next=4,Promise.all([].concat(l(i.map(function(){var e=t(r().mark((function t(e){return r().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.t0=e,t.next=3,x(e,a);case 3:return t.t1=t.sent,t.abrupt("return",[t.t0,t.t1]);case 5:case"end":return t.stop()}}),t)})));return function(t){return e.apply(this,arguments)}}())),l([[this.canvas.backgroundImage,this.canvas.backgroundVpt?void 0:this.canvas.viewportTransform],[this.canvas.overlayImage,this.canvas.overlayVpt?void 0:this.canvas.viewportTransform]].filter((function(t){return h(t,1)[0]})).map(function(){var e=t(r().mark((function t(e){var n,i,s;return r().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n=h(e,2),i=n[0],s=n[1],t.t0=i,t.next=4,b(i,s,a);case 4:return t.t1=t.sent,t.abrupt("return",[t.t0,t.t1]);case 6:case"end":return t.stop()}}),t)})));return function(t){return e.apply(this,arguments)}}()))));case 4:e.t1=e.sent,new e.t0(e.t1);case 6:case"end":return e.stop()}}),e,this)}))),function(t){return g.apply(this,arguments)})},{key:"_finalizeAndAddPath",value:function(){var t=this._points;if(t.length<2)this.eventEmitter.dispatchEvent(new CustomEvent("cancel",{cancelable:!1}));else{var e=this.createPath(this.convertPointsToSVGPath(t)),n=y(this.canvas.getObjects(),e);this.eventEmitter.dispatchEvent(new CustomEvent("end",{detail:{path:e,targets:n},cancelable:!0}))&&this.commit({path:e,targets:n}),this.canvas.clearContext(this.canvas.contextTop),this.canvas.requestRenderAll(),this._resetShadow()}}},{key:"dispose",value:function(){var t=this.effectContext.canvas;t.width=t.height=0}}]),d}(v.PencilBrush);export{P as EraserBrush,w as commitErasing,b as eraseCanvasDrawable,x as eraseObject};
+import { asyncToGenerator as _asyncToGenerator, inherits as _inherits, createClass as _createClass, regeneratorRuntime as _regeneratorRuntime, classCallCheck as _classCallCheck, callSuper as _callSuper, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, get as _get, getPrototypeOf as _getPrototypeOf, toConsumableArray as _toConsumableArray, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { erase } from '../../core/dist/src/erase.js';
+import * as fabric from 'fabric';
+import { Group } from 'fabric';
+import { ClippingGroup } from './ClippingGroup.js';
+import { draw } from './ErasingEffect.js';
+
+function walk(objects, path) {
+  return objects.flatMap(function (object) {
+    if (!object.erasable || !object.intersectsWithObject(path)) {
+      return [];
+    } else if (object instanceof Group && object.erasable === 'deep') {
+      return walk(object.getObjects(), path);
+    } else {
+      return [object];
+    }
+  });
+}
+var assertClippingGroup = function assertClippingGroup(object) {
+  var curr = object.clipPath;
+  if (curr instanceof ClippingGroup) {
+    return curr;
+  }
+
+  // In order to support objects with stroke width, stroke uniform, shadow etc.
+  // we use the actual drawn size
+  var _object$_limitCacheSi = object._limitCacheSize(object._getCacheCanvasDimensions()),
+    width = _object$_limitCacheSi.width,
+    height = _object$_limitCacheSi.height;
+  var next = new ClippingGroup([], {
+    width: width,
+    height: height
+  });
+  if (curr) {
+    var _curr$translateToOrig = curr.translateToOriginPoint(new fabric.Point(), curr.originX, curr.originY),
+      x = _curr$translateToOrig.x,
+      y = _curr$translateToOrig.y;
+    curr.originX = curr.originY = 'center';
+    fabric.util.sendObjectToPlane(curr, undefined, fabric.util.createTranslateMatrix(x, y));
+    next.add(curr);
+  }
+  return object.clipPath = next;
+};
+function commitErasing(object, sourceInObjectPlane) {
+  var clipPath = assertClippingGroup(object);
+  clipPath.add(sourceInObjectPlane);
+  clipPath.set('dirty', true);
+  object.set('dirty', true);
+}
+function eraseObject(_x, _x2) {
+  return _eraseObject.apply(this, arguments);
+}
+function _eraseObject() {
+  _eraseObject = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(object, source) {
+    var clone;
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _context4.next = 2;
+          return source.clone();
+        case 2:
+          clone = _context4.sent;
+          fabric.util.sendObjectToPlane(clone, undefined, object.calcTransformMatrix());
+          commitErasing(object, clone);
+          return _context4.abrupt("return", clone);
+        case 6:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return _eraseObject.apply(this, arguments);
+}
+function eraseCanvasDrawable(_x3, _x4, _x5) {
+  return _eraseCanvasDrawable.apply(this, arguments);
+}
+function _eraseCanvasDrawable() {
+  _eraseCanvasDrawable = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(object, vpt, source) {
+    var clone, d;
+    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _context5.next = 2;
+          return source.clone();
+        case 2:
+          clone = _context5.sent;
+          d = vpt && object.translateToOriginPoint(new fabric.Point(), object.originX, object.originY);
+          fabric.util.sendObjectToPlane(clone, undefined, d ? fabric.util.multiplyTransformMatrixArray([[1, 0, 0, 1, d.x, d.y],
+          // apply vpt from center of drawable
+          vpt, [1, 0, 0, 1, -d.x, -d.y], object.calcTransformMatrix()]) : object.calcTransformMatrix());
+          commitErasing(object, clone);
+          return _context5.abrupt("return", clone);
+        case 7:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  }));
+  return _eraseCanvasDrawable.apply(this, arguments);
+}
+var setCanvasDimensions = function setCanvasDimensions(el, ctx, _ref) {
+  var width = _ref.width,
+    height = _ref.height;
+  var retinaScaling = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  el.width = width;
+  el.height = height;
+  if (retinaScaling > 1) {
+    el.setAttribute('width', (width * retinaScaling).toString());
+    el.setAttribute('height', (height * retinaScaling).toString());
+    ctx.scale(retinaScaling, retinaScaling);
+  }
+};
+
+/**
+ * Supports **selective** erasing: only erasable objects are affected by the eraser brush.
+ *
+ * Supports **{@link inverted}** erasing: the brush can "undo" erasing.
+ *
+ * Supports **alpha** erasing: setting the alpha channel of the `color` property controls the eraser intensity.
+ *
+ * In order to support selective erasing, the brush clips the entire canvas and
+ * masks all non-erasable objects over the erased path, see {@link draw}.
+ *
+ * If **{@link inverted}** draws all objects, erasable objects without their eraser, over the erased path.
+ * This achieves the desired effect of seeming to erase or undo erasing on erasable objects only.
+ *
+ * After erasing is done the `end` event {@link ErasingEndEvent} is fired, after which erasing will be committed to the tree.
+ * @example
+ * canvas = new Canvas();
+ * const eraser = new EraserBrush(canvas);
+ * canvas.freeDrawingBrush = eraser;
+ * canvas.isDrawingMode = true;
+ * eraser.on('start', (e) => {
+ *    console.log('started erasing');
+ *    // prevent erasing
+ *    e.preventDefault();
+ * });
+ * eraser.on('end', (e) => {
+ *    const { targets: erasedTargets, path } = e.detail;
+ *    e.preventDefault(); // prevent erasing being committed to the tree
+ *    eraser.commit({ targets: erasedTargets, path }); // commit manually since default was prevented
+ * });
+ *
+ * In case of performance issues trace {@link drawEffect} calls and consider preventing it from executing
+ * @example
+ * const eraser = new EraserBrush(canvas);
+ * eraser.on('redraw', (e) => {
+ *    // prevent effect redraw on pointer down (e.g. useful if canvas didn't change)
+ *    e.detail.type === 'start' && e.preventDefault());
+ *    // prevent effect redraw after canvas has rendered (effect will become stale)
+ *    e.detail.type === 'render' && e.preventDefault());
+ * });
+ */
+var EraserBrush = /*#__PURE__*/function (_fabric$PencilBrush) {
+  _inherits(EraserBrush, _fabric$PencilBrush);
+  function EraserBrush(canvas) {
+    var _this;
+    _classCallCheck(this, EraserBrush);
+    _this = _callSuper(this, EraserBrush, [canvas]);
+    /**
+     * When set to `true` the brush will create a visual effect of undoing erasing
+     */
+    _defineProperty(_assertThisInitialized(_this), "inverted", false);
+    _defineProperty(_assertThisInitialized(_this), "active", false);
+    var el = document.createElement('canvas');
+    var ctx = el.getContext('2d');
+    if (!ctx) {
+      throw new Error('Failed to get context');
+    }
+    setCanvasDimensions(el, ctx, canvas, _this.canvas.getRetinaScaling());
+    _this.effectContext = ctx;
+    _this.eventEmitter = new EventTarget();
+    return _this;
+  }
+
+  /**
+   * @returns disposer make sure to call it to avoid memory leaks
+   */
+  _createClass(EraserBrush, [{
+    key: "on",
+    value: function on(type, cb, options) {
+      var _this2 = this;
+      this.eventEmitter.addEventListener(type, cb, options);
+      return function () {
+        return _this2.eventEmitter.removeEventListener(type, cb, options);
+      };
+    }
+  }, {
+    key: "drawEffect",
+    value: function drawEffect() {
+      draw(this.effectContext, {
+        opacity: new fabric.Color(this.color).getAlpha(),
+        inverted: this.inverted
+      }, {
+        canvas: this.canvas
+      });
+    }
+
+    /**
+     * @override
+     */
+  }, {
+    key: "_setBrushStyles",
+    value: function _setBrushStyles() {
+      var ctx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.canvas.contextTop;
+      _get(_getPrototypeOf(EraserBrush.prototype), "_setBrushStyles", this).call(this, ctx);
+      ctx.strokeStyle = 'black';
+    }
+
+    /**
+     * @override strictly speaking the eraser needs a full render only if it has opacity set.
+     * However since {@link PencilBrush} is designed for subclassing that is what we have to work with.
+     */
+  }, {
+    key: "needsFullRender",
+    value: function needsFullRender() {
+      return true;
+    }
+
+    /**
+     * @override erase
+     */
+  }, {
+    key: "_render",
+    value: function _render() {
+      var ctx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.canvas.getTopContext();
+      _get(_getPrototypeOf(EraserBrush.prototype), "_render", this).call(this, ctx);
+      erase(this.canvas.getContext(), ctx, this.effectContext);
+    }
+
+    /**
+     * @override {@link drawEffect}
+     */
+  }, {
+    key: "onMouseDown",
+    value: function onMouseDown(pointer, context) {
+      var _this3 = this;
+      if (!this.eventEmitter.dispatchEvent(new CustomEvent('start', {
+        detail: context,
+        cancelable: true
+      }))) {
+        return;
+      }
+      this.active = true;
+      this.eventEmitter.dispatchEvent(new CustomEvent('redraw', {
+        detail: {
+          type: 'start'
+        },
+        cancelable: true
+      })) && this.drawEffect();
+
+      // consider a different approach
+      this._disposer = this.canvas.on('after:render', function (_ref2) {
+        var ctx = _ref2.ctx;
+        if (ctx !== _this3.canvas.getContext()) {
+          return;
+        }
+        _this3.eventEmitter.dispatchEvent(new CustomEvent('redraw', {
+          detail: {
+            type: 'render'
+          },
+          cancelable: true
+        })) && _this3.drawEffect();
+        _this3._render();
+      });
+      _get(_getPrototypeOf(EraserBrush.prototype), "onMouseDown", this).call(this, pointer, context);
+    }
+
+    /**
+     * @override run if active
+     */
+  }, {
+    key: "onMouseMove",
+    value: function onMouseMove(pointer, context) {
+      this.active && this.eventEmitter.dispatchEvent(new CustomEvent('move', {
+        detail: context,
+        cancelable: true
+      })) && _get(_getPrototypeOf(EraserBrush.prototype), "onMouseMove", this).call(this, pointer, context);
+    }
+
+    /**
+     * @override run if active, dispose of {@link drawEffect} listener
+     */
+  }, {
+    key: "onMouseUp",
+    value: function onMouseUp(context) {
+      var _this$_disposer;
+      this.active && _get(_getPrototypeOf(EraserBrush.prototype), "onMouseUp", this).call(this, context);
+      this.active = false;
+      (_this$_disposer = this._disposer) === null || _this$_disposer === void 0 || _this$_disposer.call(this);
+      delete this._disposer;
+      return false;
+    }
+
+    /**
+     * @override {@link fabric.PencilBrush} logic
+     */
+  }, {
+    key: "convertPointsToSVGPath",
+    value: function convertPointsToSVGPath(points) {
+      return _get(_getPrototypeOf(EraserBrush.prototype), "convertPointsToSVGPath", this).call(this, this.decimate ? this.decimatePoints(points, this.decimate) : points);
+    }
+
+    /**
+     * @override
+     */
+  }, {
+    key: "createPath",
+    value: function createPath(pathData) {
+      var path = _get(_getPrototypeOf(EraserBrush.prototype), "createPath", this).call(this, pathData);
+      path.set(this.inverted ? {
+        globalCompositeOperation: 'source-over',
+        stroke: 'white'
+      } : {
+        globalCompositeOperation: 'destination-out',
+        stroke: 'black',
+        opacity: new fabric.Color(this.color).getAlpha()
+      });
+      return path;
+    }
+  }, {
+    key: "commit",
+    value: function () {
+      var _commit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref3) {
+        var path, targets;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              path = _ref3.path, targets = _ref3.targets;
+              _context3.t0 = Map;
+              _context3.next = 4;
+              return Promise.all([].concat(_toConsumableArray(targets.map( /*#__PURE__*/function () {
+                var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(object) {
+                  return _regeneratorRuntime().wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        _context.t0 = object;
+                        _context.next = 3;
+                        return eraseObject(object, path);
+                      case 3:
+                        _context.t1 = _context.sent;
+                        return _context.abrupt("return", [_context.t0, _context.t1]);
+                      case 5:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee);
+                }));
+                return function (_x7) {
+                  return _ref4.apply(this, arguments);
+                };
+              }())), _toConsumableArray([[this.canvas.backgroundImage, !this.canvas.backgroundVpt ? this.canvas.viewportTransform : undefined], [this.canvas.overlayImage, !this.canvas.overlayVpt ? this.canvas.viewportTransform : undefined]].filter(function (_ref5) {
+                var _ref6 = _slicedToArray(_ref5, 1),
+                  object = _ref6[0];
+                return object;
+              }).map( /*#__PURE__*/function () {
+                var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref7) {
+                  var _ref9, object, vptFlag;
+                  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                    while (1) switch (_context2.prev = _context2.next) {
+                      case 0:
+                        _ref9 = _slicedToArray(_ref7, 2), object = _ref9[0], vptFlag = _ref9[1];
+                        _context2.t0 = object;
+                        _context2.next = 4;
+                        return eraseCanvasDrawable(object, vptFlag, path);
+                      case 4:
+                        _context2.t1 = _context2.sent;
+                        return _context2.abrupt("return", [_context2.t0, _context2.t1]);
+                      case 6:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }, _callee2);
+                }));
+                return function (_x8) {
+                  return _ref8.apply(this, arguments);
+                };
+              }()))));
+            case 4:
+              _context3.t1 = _context3.sent;
+              new _context3.t0(_context3.t1);
+            case 6:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function commit(_x6) {
+        return _commit.apply(this, arguments);
+      }
+      return commit;
+    }()
+    /**
+     * @override handle events
+     */
+  }, {
+    key: "_finalizeAndAddPath",
+    value: function _finalizeAndAddPath() {
+      var points = this['_points'];
+      if (points.length < 2) {
+        this.eventEmitter.dispatchEvent(new CustomEvent('cancel', {
+          cancelable: false
+        }));
+        return;
+      }
+      var path = this.createPath(this.convertPointsToSVGPath(points));
+      var targets = walk(this.canvas.getObjects(), path);
+      this.eventEmitter.dispatchEvent(new CustomEvent('end', {
+        detail: {
+          path: path,
+          targets: targets
+        },
+        cancelable: true
+      })) && this.commit({
+        path: path,
+        targets: targets
+      });
+      this.canvas.clearContext(this.canvas.contextTop);
+      this.canvas.requestRenderAll();
+      this._resetShadow();
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      var canvas = this.effectContext.canvas;
+      // prompt GC
+      canvas.width = canvas.height = 0;
+      // release ref?
+      // delete this.effectContext
+    }
+  }]);
+  return EraserBrush;
+}(fabric.PencilBrush);
+
+export { EraserBrush, commitErasing, eraseCanvasDrawable, eraseObject };
 //# sourceMappingURL=EraserBrush.js.map