fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
3 lines (2 loc) • 16.8 kB
JavaScript
import{defineProperty as t,objectSpread2 as e,objectWithoutProperties as i}from"../../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{cache as s}from"../../cache.min.mjs";import{config as o}from"../../config.min.mjs";import{ALIASING_LIMIT as r,SCALE_X as n,SCALE_Y as a,STROKE as h,iMatrix as c,CENTER as l,VERSION as m,FILL as f,LEFT as d,TOP as p}from"../../constants.min.mjs";import{Point as u}from"../../Point.min.mjs";import{Shadow as g}from"../../Shadow.min.mjs";import{classRegistry as C}from"../../ClassRegistry.min.mjs";import{runningAnimations as w}from"../../util/animation/AnimationRegistry.min.mjs";import{capValue as _}from"../../util/misc/capValue.min.mjs";import{createCanvasElement as v,toDataURL as y}from"../../util/misc/dom.min.mjs";import{qrDecompose as b,invertTransform as k}from"../../util/misc/matrix.min.mjs";import{enlivenObjectEnlivables as O}from"../../util/misc/objectEnlive.min.mjs";import{saveObjectTransform as j,resetObjectTransform as S}from"../../util/misc/objectTransforms.min.mjs";import{sendObjectToPlane as P}from"../../util/misc/planeChange.min.mjs";import{pick as x,pickBy as T}from"../../util/misc/pick.min.mjs";import{toFixed as Y}from"../../util/misc/toFixed.min.mjs";import{StaticCanvas as X}from"../../canvas/StaticCanvas.min.mjs";import{isTextObject as D,isFiller as F,isSerializableFiller as L}from"../../util/typeAssertions.min.mjs";import{stateProperties as A,cacheProperties as z,fabricObjectDefaultValues as M}from"./defaultValues.min.mjs";import{getDevicePixelRatio as R,getEnv as B}from"../../env/index.min.mjs";import{log as V}from"../../util/internals/console.min.mjs";import{animateColor as I,animate as W}from"../../util/animation/animate.min.mjs";import{ObjectGeometry as G}from"./ObjectGeometry.min.mjs";const E=["type"],N=["extraParam"];class U extends G{static getDefaults(){return U.ownDefaults}get type(){const t=this.constructor.type;return"FabricObject"===t?"object":t.toLowerCase()}set type(t){V("warn","Setting type has no effect",t)}constructor(e){super(),t(this,"_cacheContext",null),Object.assign(this,U.ownDefaults),this.setOptions(e)}_createCacheCanvas(){this._cacheCanvas=v(),this._cacheContext=this._cacheCanvas.getContext("2d"),this._updateCacheCanvas(),this.dirty=!0}_limitCacheSize(t){const e=t.width,i=t.height,r=o.maxCacheSideLimit,n=o.minCacheSideLimit;if(e<=r&&i<=r&&e*i<=o.perfLimitSizeTotal)return e<n&&(t.width=n),i<n&&(t.height=n),t;const a=e/i,[h,c]=s.limitDimsByArea(a),l=_(n,h,r),m=_(n,c,r);return e>l&&(t.zoomX/=e/l,t.width=l,t.capped=!0),i>m&&(t.zoomY/=i/m,t.height=m,t.capped=!0),t}_getCacheCanvasDimensions(){const t=this.getTotalObjectScaling(),e=this._getTransformedDimensions({skewX:0,skewY:0}),i=e.x*t.x/this.scaleX,s=e.y*t.y/this.scaleY;return{width:i+r,height:s+r,zoomX:t.x,zoomY:t.y,x:i,y:s}}_updateCacheCanvas(){const t=this._cacheCanvas,e=this._cacheContext,i=this._limitCacheSize(this._getCacheCanvasDimensions()),s=o.minCacheSideLimit,r=i.width,n=i.height,a=i.zoomX,h=i.zoomY,c=r!==t.width||n!==t.height,l=this.zoomX!==a||this.zoomY!==h;if(!t||!e)return!1;let m,f,d=c||l,p=0,u=0,g=!1;if(c){const t=this._cacheCanvas.width,e=this._cacheCanvas.height,o=r>t||n>e;g=o||(r<.9*t||n<.9*e)&&t>s&&e>s,o&&!i.capped&&(r>s||n>s)&&(p=.1*r,u=.1*n)}return D(this)&&this.path&&(d=!0,g=!0,p+=this.getHeightOfLine(0)*this.zoomX,u+=this.getHeightOfLine(0)*this.zoomY),!!d&&(g?(t.width=Math.ceil(r+p),t.height=Math.ceil(n+u)):(e.setTransform(1,0,0,1,0,0),e.clearRect(0,0,t.width,t.height)),m=i.x/2,f=i.y/2,this.cacheTranslationX=Math.round(t.width/2-m)+m,this.cacheTranslationY=Math.round(t.height/2-f)+f,e.translate(this.cacheTranslationX,this.cacheTranslationY),e.scale(a,h),this.zoomX=a,this.zoomY=h,!0)}setOptions(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this._setOptions(t)}transform(t){const e=this.group&&!this.group._transformDone||this.group&&this.canvas&&t===this.canvas.contextTop,i=this.calcTransformMatrix(!e);t.transform(i[0],i[1],i[2],i[3],i[4],i[5])}getObjectScaling(){if(!this.group)return new u(Math.abs(this.scaleX),Math.abs(this.scaleY));const t=b(this.calcTransformMatrix());return new u(Math.abs(t.scaleX),Math.abs(t.scaleY))}getTotalObjectScaling(){const t=this.getObjectScaling();if(this.canvas){const e=this.canvas.getZoom(),i=this.getCanvasRetinaScaling();return t.scalarMultiply(e*i)}return t}getObjectOpacity(){let t=this.opacity;return this.group&&(t*=this.group.getObjectOpacity()),t}_constrainScale(t){return Math.abs(t)<this.minScaleLimit?t<0?-this.minScaleLimit:this.minScaleLimit:0===t?1e-4:t}_set(t,e){t!==n&&t!==a||(e=this._constrainScale(e)),t===n&&e<0?(this.flipX=!this.flipX,e*=-1):"scaleY"===t&&e<0?(this.flipY=!this.flipY,e*=-1):"shadow"!==t||!e||e instanceof g||(e=new g(e));const i=this[t]!==e;return this[t]=e,i&&this.constructor.cacheProperties.includes(t)&&(this.dirty=!0),this.parent&&(this.dirty||i&&this.constructor.stateProperties.includes(t))&&this.parent._set("dirty",!0),this}isNotVisible(){return 0===this.opacity||!this.width&&!this.height&&0===this.strokeWidth||!this.visible}render(t){this.isNotVisible()||this.canvas&&this.canvas.skipOffscreen&&!this.group&&!this.isOnScreen()||(t.save(),this._setupCompositeOperation(t),this.drawSelectionBackground(t),this.transform(t),this._setOpacity(t),this._setShadow(t),this.shouldCache()?(this.renderCache(),this.drawCacheOnCanvas(t)):(this._removeCacheCanvas(),this.drawObject(t),this.dirty=!1),t.restore())}drawSelectionBackground(t){}renderCache(t){t=t||{},this._cacheCanvas&&this._cacheContext||this._createCacheCanvas(),this.isCacheDirty()&&this._cacheContext&&(this.drawObject(this._cacheContext,t.forClipping),this.dirty=!1)}_removeCacheCanvas(){this._cacheCanvas=void 0,this._cacheContext=null}hasStroke(){return this.stroke&&"transparent"!==this.stroke&&0!==this.strokeWidth}hasFill(){return this.fill&&"transparent"!==this.fill}needsItsOwnCache(){return!!(this.paintFirst===h&&this.hasFill()&&this.hasStroke()&&this.shadow)||!!this.clipPath}shouldCache(){return this.ownCaching=this.needsItsOwnCache()||this.objectCaching&&(!this.parent||!this.parent.isOnACache()),this.ownCaching}willDrawShadow(){return!!this.shadow&&(0!==this.shadow.offsetX||0!==this.shadow.offsetY)}drawClipPathOnCache(t,e){if(t.save(),e.inverted?t.globalCompositeOperation="destination-out":t.globalCompositeOperation="destination-in",e.absolutePositioned){const e=k(this.calcTransformMatrix());t.transform(e[0],e[1],e[2],e[3],e[4],e[5])}e.transform(t),t.scale(1/e.zoomX,1/e.zoomY),t.drawImage(e._cacheCanvas,-e.cacheTranslationX,-e.cacheTranslationY),t.restore()}drawObject(t,e){const i=this.fill,s=this.stroke;e?(this.fill="black",this.stroke="",this._setClippingProperties(t)):this._renderBackground(t),this._render(t),this._drawClipPath(t,this.clipPath),this.fill=i,this.stroke=s}_drawClipPath(t,e){e&&(e._set("canvas",this.canvas),e.shouldCache(),e._transformDone=!0,e.renderCache({forClipping:!0}),this.drawClipPathOnCache(t,e))}drawCacheOnCanvas(t){t.scale(1/this.zoomX,1/this.zoomY),t.drawImage(this._cacheCanvas,-this.cacheTranslationX,-this.cacheTranslationY)}isCacheDirty(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(this.isNotVisible())return!1;const e=this._cacheCanvas,i=this._cacheContext;return!(!e||!i||t||!this._updateCacheCanvas())||!!(this.dirty||this.clipPath&&this.clipPath.absolutePositioned)&&(e&&i&&!t&&(i.save(),i.setTransform(1,0,0,1,0,0),i.clearRect(0,0,e.width,e.height),i.restore()),!0)}_renderBackground(t){if(!this.backgroundColor)return;const e=this._getNonTransformedDimensions();t.fillStyle=this.backgroundColor,t.fillRect(-e.x/2,-e.y/2,e.x,e.y),this._removeShadow(t)}_setOpacity(t){this.group&&!this.group._transformDone?t.globalAlpha=this.getObjectOpacity():t.globalAlpha*=this.opacity}_setStrokeStyles(t,e){const i=e.stroke;i&&(t.lineWidth=e.strokeWidth,t.lineCap=e.strokeLineCap,t.lineDashOffset=e.strokeDashOffset,t.lineJoin=e.strokeLineJoin,t.miterLimit=e.strokeMiterLimit,F(i)?"percentage"===i.gradientUnits||i.gradientTransform||i.patternTransform?this._applyPatternForTransformedGradient(t,i):(t.strokeStyle=i.toLive(t),this._applyPatternGradientTransform(t,i)):t.strokeStyle=e.stroke)}_setFillStyles(t,e){let{fill:i}=e;i&&(F(i)?(t.fillStyle=i.toLive(t),this._applyPatternGradientTransform(t,i)):t.fillStyle=i)}_setClippingProperties(t){t.globalAlpha=1,t.strokeStyle="transparent",t.fillStyle="#000000"}_setLineDash(t,e){e&&0!==e.length&&(1&e.length&&e.push(...e),t.setLineDash(e))}_setShadow(t){if(!this.shadow)return;const e=this.shadow,i=this.canvas,s=this.getCanvasRetinaScaling(),[r,,,n]=(null==i?void 0:i.viewportTransform)||c,a=r*s,h=n*s,l=e.nonScaling?new u(1,1):this.getObjectScaling();t.shadowColor=e.color,t.shadowBlur=e.blur*o.browserShadowBlurConstant*(a+h)*(l.x+l.y)/4,t.shadowOffsetX=e.offsetX*a*l.x,t.shadowOffsetY=e.offsetY*h*l.y}_removeShadow(t){this.shadow&&(t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0)}_applyPatternGradientTransform(t,e){if(!F(e))return{offsetX:0,offsetY:0};const i=e.gradientTransform||e.patternTransform,s=-this.width/2+e.offsetX||0,o=-this.height/2+e.offsetY||0;return"percentage"===e.gradientUnits?t.transform(this.width,0,0,this.height,s,o):t.transform(1,0,0,1,s,o),i&&t.transform(i[0],i[1],i[2],i[3],i[4],i[5]),{offsetX:s,offsetY:o}}_renderPaintInOrder(t){this.paintFirst===h?(this._renderStroke(t),this._renderFill(t)):(this._renderFill(t),this._renderStroke(t))}_render(t){}_renderFill(t){this.fill&&(t.save(),this._setFillStyles(t,this),"evenodd"===this.fillRule?t.fill("evenodd"):t.fill(),t.restore())}_renderStroke(t){if(this.stroke&&0!==this.strokeWidth){if(this.shadow&&!this.shadow.affectStroke&&this._removeShadow(t),t.save(),this.strokeUniform){const e=this.getObjectScaling();t.scale(1/e.x,1/e.y)}this._setLineDash(t,this.strokeDashArray),this._setStrokeStyles(t,this),t.stroke(),t.restore()}}_applyPatternForTransformedGradient(t,e){var i;const s=this._limitCacheSize(this._getCacheCanvasDimensions()),o=v(),r=this.getCanvasRetinaScaling(),n=s.x/this.scaleX/r,a=s.y/this.scaleY/r;o.width=Math.ceil(n),o.height=Math.ceil(a);const h=o.getContext("2d");h&&(h.beginPath(),h.moveTo(0,0),h.lineTo(n,0),h.lineTo(n,a),h.lineTo(0,a),h.closePath(),h.translate(n/2,a/2),h.scale(s.zoomX/this.scaleX/r,s.zoomY/this.scaleY/r),this._applyPatternGradientTransform(h,e),h.fillStyle=e.toLive(t),h.fill(),t.translate(-this.width/2-this.strokeWidth/2,-this.height/2-this.strokeWidth/2),t.scale(r*this.scaleX/s.zoomX,r*this.scaleY/s.zoomY),t.strokeStyle=null!==(i=h.createPattern(o,"no-repeat"))&&void 0!==i?i:"")}_findCenterFromElement(){return new u(this.left+this.width/2,this.top+this.height/2)}clone(t){const e=this.toObject(t);return this.constructor.fromObject(e)}cloneAsImage(t){const e=this.toCanvasElement(t);return new(C.getClass("image"))(e)}toCanvasElement(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const e=j(this),i=this.group,s=this.shadow,o=Math.abs,r=t.enableRetinaScaling?R():1,n=(t.multiplier||1)*r,a=t.canvasProvider||(t=>new X(t,{enableRetinaScaling:!1,renderOnAddRemove:!1,skipOffscreen:!1}));delete this.group,t.withoutTransform&&S(this),t.withoutShadow&&(this.shadow=null),t.viewportTransform&&P(this,this.getViewportTransform()),this.setCoords();const h=v(),c=this.getBoundingRect(),m=this.shadow,f=new u;if(m){const t=m.blur,e=m.nonScaling?new u(1,1):this.getObjectScaling();f.x=2*Math.round(o(m.offsetX)+t)*o(e.x),f.y=2*Math.round(o(m.offsetY)+t)*o(e.y)}const d=c.width+f.x,p=c.height+f.y;h.width=Math.ceil(d),h.height=Math.ceil(p);const g=a(h);"jpeg"===t.format&&(g.backgroundColor="#fff"),this.setPositionByOrigin(new u(g.width/2,g.height/2),l,l);const C=this.canvas;g._objects=[this],this.set("canvas",g),this.setCoords();const w=g.toCanvasElement(n||1,t);return this.set("canvas",C),this.shadow=s,i&&(this.group=i),this.set(e),this.setCoords(),g._objects=[],g.destroy(),w}toDataURL(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return y(this.toCanvasElement(t),t.format||"png",t.quality||1)}isType(){for(var t=arguments.length,e=new Array(t),i=0;i<t;i++)e[i]=arguments[i];return e.includes(this.constructor.type)||e.includes(this.type)}complexity(){return 1}toJSON(){return this.toObject()}rotate(t){const{centeredRotation:e,originX:i,originY:s}=this;if(e){const{x:t,y:e}=this.getRelativeCenterPoint();this.originX=l,this.originY=l,this.left=t,this.top=e}if(this.set("angle",t),e){const{x:t,y:e}=this.translateToOriginPoint(this.getRelativeCenterPoint(),i,s);this.left=t,this.top=e,this.originX=i,this.originY=s}}setOnGroup(){}_setupCompositeOperation(t){this.globalCompositeOperation&&(t.globalCompositeOperation=this.globalCompositeOperation)}dispose(){w.cancelByTarget(this),this.off(),this._set("canvas",void 0),this._cacheCanvas&&B().dispose(this._cacheCanvas),this._cacheCanvas=void 0,this._cacheContext=null}animate(t,e){return Object.entries(t).reduce(((t,i)=>{let[s,o]=i;return t[s]=this._animate(s,o,e),t}),{})}_animate(t,i){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const o=t.split("."),r=this.constructor.colorProperties.includes(o[o.length-1]),{abort:n,startValue:a,onChange:h,onComplete:c}=s,l=e(e({},s),{},{target:this,startValue:null!=a?a:o.reduce(((t,e)=>t[e]),this),endValue:i,abort:null==n?void 0:n.bind(this),onChange:(t,e,i)=>{o.reduce(((e,i,s)=>(s===o.length-1&&(e[i]=t),e[i])),this),h&&h(t,e,i)},onComplete:(t,e,i)=>{this.setCoords(),c&&c(t,e,i)}});return r?I(l):W(l)}isDescendantOf(t){const{parent:e,group:i}=this;return e===t||i===t||!!e&&e.isDescendantOf(t)||!!i&&i!==e&&i.isDescendantOf(t)}getAncestors(){const t=[];let e=this;do{e=e.parent,e&&t.push(e)}while(e);return t}findCommonAncestors(t){if(this===t)return{fork:[],otherFork:[],common:[this,...this.getAncestors()]};const e=this.getAncestors(),i=t.getAncestors();if(0===e.length&&i.length>0&&this===i[i.length-1])return{fork:[],otherFork:[t,...i.slice(0,i.length-1)],common:[this]};for(let s,o=0;o<e.length;o++){if(s=e[o],s===t)return{fork:[this,...e.slice(0,o)],otherFork:[],common:e.slice(o)};for(let r=0;r<i.length;r++){if(this===i[r])return{fork:[],otherFork:[t,...i.slice(0,r)],common:[this,...e]};if(s===i[r])return{fork:[this,...e.slice(0,o)],otherFork:[t,...i.slice(0,r)],common:e.slice(o)}}}return{fork:[this,...e],otherFork:[t,...i],common:[]}}hasCommonAncestors(t){const e=this.findCommonAncestors(t);return e&&!!e.common.length}isInFrontOf(t){if(this===t)return;const e=this.findCommonAncestors(t);if(e.fork.includes(t))return!0;if(e.otherFork.includes(this))return!1;const i=e.common[0]||this.canvas;if(!i)return;const s=e.fork.pop(),o=e.otherFork.pop(),r=i._objects.indexOf(s),n=i._objects.indexOf(o);return r>-1&&r>n}toObject(){const t=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:[]).concat(U.customProperties,this.constructor.customProperties||[]);let i;const s=o.NUM_FRACTION_DIGITS,{clipPath:r,fill:n,stroke:a,shadow:h,strokeDashArray:c,left:l,top:f,originX:d,originY:p,width:u,height:g,strokeWidth:C,strokeLineCap:w,strokeDashOffset:_,strokeLineJoin:v,strokeUniform:y,strokeMiterLimit:b,scaleX:k,scaleY:O,angle:j,flipX:S,flipY:P,opacity:T,visible:X,backgroundColor:D,fillRule:F,paintFirst:A,globalCompositeOperation:z,skewX:M,skewY:R}=this;r&&!r.excludeFromExport&&(i=r.toObject(t.concat("inverted","absolutePositioned")));const B=t=>Y(t,s),V=e(e({},x(this,t)),{},{type:this.constructor.type,version:m,originX:d,originY:p,left:B(l),top:B(f),width:B(u),height:B(g),fill:L(n)?n.toObject():n,stroke:L(a)?a.toObject():a,strokeWidth:B(C),strokeDashArray:c?c.concat():c,strokeLineCap:w,strokeDashOffset:_,strokeLineJoin:v,strokeUniform:y,strokeMiterLimit:B(b),scaleX:B(k),scaleY:B(O),angle:B(j),flipX:S,flipY:P,opacity:B(T),shadow:h?h.toObject():h,visible:X,backgroundColor:D,fillRule:F,paintFirst:A,globalCompositeOperation:z,skewX:B(M),skewY:B(R)},i?{clipPath:i}:null);return this.includeDefaultValues?V:this._removeDefaultValues(V)}toDatalessObject(t){return this.toObject(t)}_removeDefaultValues(t){const e=this.constructor.getDefaults(),i=Object.keys(e).length>0?e:Object.getPrototypeOf(this);return T(t,((t,e)=>{if(e===d||e===p||"type"===e)return!0;const s=i[e];return t!==s&&!(Array.isArray(t)&&Array.isArray(s)&&0===t.length&&0===s.length)}))}toString(){return"#<".concat(this.constructor.type,">")}static _fromObject(t){let e=i(t,E),s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},{extraParam:o}=s,r=i(s,N);return O(e,r).then((t=>o?(delete t[o],new this(e[o],t)):new this(t)))}static fromObject(t,e){return this._fromObject(t,e)}}t(U,"stateProperties",A),t(U,"cacheProperties",z),t(U,"ownDefaults",M),t(U,"type","FabricObject"),t(U,"colorProperties",[f,h,"backgroundColor"]),t(U,"customProperties",[]),C.setClass(U),C.setClass(U,"object");export{U as FabricObject};
//# sourceMappingURL=Object.min.mjs.map