UNPKG

fabric

Version:

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

3 lines (2 loc) 7.42 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("fabric")):"function"==typeof define&&define.amd?define(["exports","fabric"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).fabricExtensions={},t.fabric)}(this,(function(t,e){"use strict";const n={margin:4,width:1,color:"rgb(255,0,0,0.9)"};function o(t,e){return Math.abs(t-e)}const i=["left","center","right"],r=["top","center","bottom"];function c(t){var e,o;const r=n.margin,{activeObject:c,isScale:s,index:f,point:l,list:d}=t,{dis:g,arr:u}=a(l,d,"x");if(g>r/(null!==(e=null===(o=c.canvas)||void 0===o?void 0:o.getZoom())&&void 0!==e?e:1))return[];let x=u[u.length-1].x-l.x;const h=0==f||3==f?-1:1;x*=h;const{width:y,scaleX:m,left:p}=c,b=c._getTransformedDimensions(),v=(x+b.x)/b.x;s?c.set("scaleX",m*v):c.set("width",y*v);const O=[0,x/2*h,x*h];h<0&&O.reverse();const j=O[i.indexOf(c.originX)];return c.set("left",p+j),c.setCoords(),u.map((t=>({x:t.x,y1:t.y,y2:l.y})))}function s(t){var e,o;const i=n.margin,{activeObject:c,isScale:s,index:f,point:l,list:d}=t,{dis:g,arr:u}=a(l,d,"y");if(g>i/(null!==(e=null===(o=c.canvas)||void 0===o?void 0:o.getZoom())&&void 0!==e?e:1))return[];let x=u[u.length-1].y-l.y;const h=f<2?-1:1;x*=h;const{height:y,scaleY:m,top:p}=c,b=c._getTransformedDimensions(),v=(x+b.y)/b.y;s?c.set("scaleY",m*v):c.set("height",y*v);const O=[0,x/2*h,x*h];h<0&&O.reverse();const j=O[r.indexOf(c.originY)];return c.set("top",p+j),c.setCoords(),u.map((t=>({y:t.y,x1:t.x,x2:l.x})))}function a(t,e,n){let i=1/0,r=[];for(const c of e){const e=o(t[n],c[n]);i>e&&(r=[],i=e),i==e&&r.push(c)}return{dis:i,arr:r}}function f(t,e,o){const{width:i,color:r}=n,c=t.getSelectionContext(),s=t.viewportTransform,a=t.getZoom();c.save(),c.transform(...s),c.lineWidth=i/a,c.strokeStyle=r,c.beginPath(),c.moveTo(e.x,e.y),c.lineTo(o.x,o.y),c.stroke(),d(c,a,e),d(c,a,o),c.restore()}const l=2.4;function d(t,e,n){const o=l/e;t.save(),t.translate(n.x,n.y),t.beginPath(),t.moveTo(-o,-o),t.lineTo(o,o),t.moveTo(o,-o),t.lineTo(-o,o),t.stroke(),t.restore()}function g(t,o){!function(t,e){const{width:o,color:i}=n,r=t.getSelectionContext(),c=t.viewportTransform,s=t.getZoom();r.save(),r.transform(...c),r.lineWidth=o/s,r.strokeStyle=i;for(const t of e)d(r,s,t);r.restore()}(t,o.map((t=>{const n="y2"in t,o=n?t.x:t.x1,i=n?t.y1:t.y;return new e.Point(o,i)})))}function u(t,n){const o=n.x;f(t,new e.Point(o,n.y1),new e.Point(o,n.y2))}function x(t,n){const o=n.y;f(t,new e.Point(n.x1,o),new e.Point(n.x2,o))}function h(t){const n=new Set,o=t.canvas;if(!o)return n;const i=t instanceof e.ActiveSelection?t.getObjects():[t];return o.forEachObject((t=>{t.isOnScreen()&&t.visible&&(t.constructor!=e.Group?n.add(t):m(n,t))})),y(n,i),n}function y(t,n){for(const o of n)o.constructor==e.Group?y(t,o.getObjects()):t.delete(o)}function m(t,n){const o=n.getObjects();for(const n of o)n.visible&&(n.constructor!=e.Group?t.add(n):m(t,n))}function p(t){var e,o;const i=n.margin,{activeObject:r,activeObjectRect:c,objectRect:s}=t,a={target:r,list:v(s),aList:v(c),margin:i/(null!==(e=null===(o=r.canvas)||void 0===o?void 0:o.getZoom())&&void 0!==e?e:1)},f=function(t){const{target:e,list:n,aList:o,margin:i}=t,r=o.map((t=>b(t,n,"x"))),c=Math.min(...r.map((t=>t.dis)));if(c>i)return[];const s=[],a=o[0].x2-o[0].x,f=o[0].y2-o[0].y;let l=!1;for(let t=0;t<r.length;t++){const i=r[t];if(c==i.dis){const r=n[i.index],d=o[i.index],g=r.x,u=d.y,x=Math.min(r.y,r.y2,u,d.y2),h=Math.max(r.y,r.y2,u,d.y2);if(s.push({x:g,y1:x,y2:h}),l)continue;l=!0,O({target:e,x:g,y:u,centerX:t-1,centerY:i.index-1,width:a,height:f,dir:"x"});const y=c*i.dir;o.forEach((t=>t.x-=y))}}return s}(a),l=function(t){const{target:e,list:n,aList:o,margin:i}=t,r=o.map((t=>b(t,n,"y"))),c=Math.min(...r.map((t=>t.dis)));if(c>i)return[];const s=[],a=o[0].x2-o[0].x,f=o[0].y2-o[0].y;let l=!1;for(let t=0;t<r.length;t++){const i=r[t];if(c==i.dis){const r=n[i.index],d=o[i.index],g=r.y,u=d.x,x=Math.min(r.x,r.x2,u,d.x2),h=Math.max(r.x,r.x2,u,d.x2);if(s.push({y:g,x1:x,x2:h}),l)continue;l=!0,O({target:e,x:u,y:g,centerX:i.index-1,centerY:t-1,width:a,height:f,dir:"y"});const y=c*i.dir;o.forEach((t=>t.y-=y))}}return s}(a);return{vLines:f,hLines:l}}function b(t,e,n){let i=1/0,r=-1,c=1;for(let s=0;s<e.length;s++){const a=o(t[n],e[s][n]);i>a&&(r=s,i=a,c=t[n]>e[s][n]?1:-1)}return{dis:i,index:r,dir:c}}function v(t){const{left:e,top:n,width:o,height:i}=t,r=e+o/2,c=n+i/2;return[{x:e,y:n,x2:e+o,y2:n+i},{x:r,y:c,x2:r,y2:c},{x:e+o,x2:e,y:n+i,y2:n}]}function O(t){const{target:n,centerX:o,centerY:i,width:r,height:c,dir:s}=t;let{x:a,y:f}=t;a-=o*r/2,f-=i*c/2,function(t,e,n){const o=t.translateToCenterPoint(e,"center","center"),i=t.translateToOriginPoint(o,t.originX,t.originY);"x"==n?t.setX(i.x):t.setY(i.y)}(n,new e.Point(a,f),s),n.setCoords()}const j=function(t){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"left",o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"top";return async function(i){const{originX:r=n,originY:c=o}=i;delete i.originX,delete i.originY;for(var s=arguments.length,a=new Array(s>1?s-1:0),f=1;f<s;f++)a[f-1]=arguments[f];const l=await t.call(this,i,...a),d=new e.Point(l.left,l.top);return l.setPositionByOrigin(d,r,c),l}};t.initAligningGuidelines=function(t){let o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Object.assign(n,o);const i=new Set,r=new Set;let a=!1;const f=new Map,l=t=>{const n=[t.calcTransformMatrix().toString(),t.width,t.height].join(),o=f.get(n);if(o)return o;const i=t.getCoords(),r=[e.util.makeBoundingBoxFromPoints(i),i];return f.set(n,r),r};function d(t){const e=t.target;e.setCoords(),a=!1,r.clear(),i.clear();const n=h(e),o=e.getBoundingRect();for(const t of n){const n=l(t)[0],{vLines:c,hLines:s}=p({activeObject:e,activeObjectRect:o,objectRect:n});c.forEach((t=>{r.add(JSON.stringify(t))})),s.forEach((t=>{i.add(JSON.stringify(t))}))}}function y(t){const n=t.target;n.setCoords();const o=String(t.transform.action).startsWith("scale");r.clear(),i.clear();const f=h(n);let d=t.transform.corner;n.flipX&&(d=d.replace("l","r").replace("r","l")),n.flipY&&(d=d.replace("t","b").replace("b","t"));let g=["tl","tr","br","bl","mt","mr","mb","ml"].indexOf(d);if(-1==g)return;if(a=g>3,a){if(n.getTotalAngle()%90!=0)return;g-=4}let u=n.getCoords()[g];for(const t of f){const[a,f]=l(t),d={activeObject:n,point:u,list:[...f,new e.Point(a.left+a.width/2,a.top+a.height/2)],isScale:o,index:g},x=c(d),h=s(d);x.forEach((t=>{r.add(JSON.stringify(t))})),h.forEach((t=>{i.add(JSON.stringify(t))})),(x.length||h.length)&&(u=n.getCoords()[g])}}function m(){t.clearContext(t.contextTop)}function b(){if(a){const e=[];for(const t of r)e.push(JSON.parse(t));for(const t of i)e.push(JSON.parse(t));g(t,e)}else{for(const e of r)u(t,JSON.parse(e));for(const e of i)x(t,JSON.parse(e))}}function v(){r.clear(),i.clear(),f.clear(),t.requestRenderAll()}return t.on("object:resizing",y),t.on("object:scaling",y),t.on("object:moving",d),t.on("before:render",m),t.on("after:render",b),t.on("mouse:up",v),()=>{t.off("object:resizing",y),t.off("object:scaling",y),t.off("object:moving",d),t.off("before:render",m),t.off("after:render",b),t.off("mouse:up",v)}},t.installOriginWrapperUpdater=(t,n)=>{e.BaseFabricObject._fromObject=j(e.BaseFabricObject._fromObject,t,n),e.FabricImage.fromObject=j(e.FabricImage.fromObject,t,n),e.Group.fromObject=j(e.Group.fromObject,t,n)},t.originUpdaterWrapper=j})); //# sourceMappingURL=fabric-extensions.min.js.map