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}from"../../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{cache as e}from"../../cache.min.mjs";import{config as i}from"../../config.min.mjs";import{FILL as s,STROKE as o,ALIASING_LIMIT as r,SCALE_X as n,SCALE_Y as a,iMatrix as h,CENTER as c,VERSION as l,LEFT as m,TOP as f}from"../../constants.min.mjs";import{Point as d}from"../../Point.min.mjs";import{Shadow as p}from"../../Shadow.min.mjs";import{classRegistry as u}from"../../ClassRegistry.min.mjs";import{runningAnimations as g}from"../../util/animation/AnimationRegistry.min.mjs";import{capValue as C}from"../../util/misc/capValue.min.mjs";import{createCanvasElement as w,createCanvasElementFor as _,toDataURL as v,toBlob 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 T,pickBy as Y}from"../../util/misc/pick.min.mjs";import{toFixed as X}from"../../util/misc/toFixed.min.mjs";import{StaticCanvas as x}from"../../canvas/StaticCanvas.min.mjs";import{isFiller as D,isSerializableFiller as F}from"../../util/typeAssertions.min.mjs";import{stateProperties as z,cacheProperties as A,fabricObjectDefaultValues as L}from"./defaultValues.min.mjs";import{getDevicePixelRatio as M,getEnv as R}from"../../env/index.min.mjs";import{log as B}from"../../util/internals/console.min.mjs";import{animateColor as V,animate as I}from"../../util/animation/animate.min.mjs";import{ObjectGeometry as E}from"./ObjectGeometry.min.mjs";class G extends E{static getDefaults(){return G.ownDefaults}get type(){const t=this.constructor.type;return"FabricObject"===t?"object":t.toLowerCase()}set type(t){B("warn","Setting type has no effect",t)}constructor(e){super(),t(this,"_cacheContext",null),Object.assign(this,G.ownDefaults),this.setOptions(e)}_createCacheCanvas(){this._cacheCanvas=w(),this._cacheContext=this._cacheCanvas.getContext("2d"),this._updateCacheCanvas(),this.dirty=!0}_limitCacheSize(t){const s=t.width,o=t.height,r=i.maxCacheSideLimit,n=i.minCacheSideLimit;if(s<=r&&o<=r&&s*o<=i.perfLimitSizeTotal)return s<n&&(t.width=n),o<n&&(t.height=n),t;const a=s/o,[h,c]=e.limitDimsByArea(a),l=C(n,h,r),m=C(n,c,r);return s>l&&(t.zoomX/=s/l,t.width=l,t.capped=!0),o>m&&(t.zoomY/=o/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:Math.ceil(i+r),height:Math.ceil(s+r),zoomX:t.x,zoomY:t.y,x:i,y:s}}_updateCacheCanvas(){const t=this._cacheCanvas,e=this._cacheContext,{width:i,height:s,zoomX:o,zoomY:r,x:n,y:a}=this._limitCacheSize(this._getCacheCanvasDimensions()),h=i!==t.width||s!==t.height,c=this.zoomX!==o||this.zoomY!==r;if(!t||!e)return!1;if(h||c){i!==t.width||s!==t.height?(t.width=i,t.height=s):(e.setTransform(1,0,0,1,0,0),e.clearRect(0,0,t.width,t.height));const h=n/2,c=a/2;return this.cacheTranslationX=Math.round(t.width/2-h)+h,this.cacheTranslationY=Math.round(t.height/2-c)+c,e.translate(this.cacheTranslationX,this.cacheTranslationY),e.scale(o,r),this.zoomX=o,this.zoomY=r,!0}return!1}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 d(Math.abs(this.scaleX),Math.abs(this.scaleY));const t=b(this.calcTransformMatrix());return new d(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 p||(e=new p(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,!1,{}),this.dirty=!1),t.restore())}drawSelectionBackground(t){}renderCache(t){if(t=t||{},this._cacheCanvas&&this._cacheContext||this._createCacheCanvas(),this.isCacheDirty()&&this._cacheContext){const{zoomX:e,zoomY:i,cacheTranslationX:s,cacheTranslationY:o}=this,{width:r,height:n}=this._cacheCanvas;this.drawObject(this._cacheContext,t.forClipping,{zoomX:e,zoomY:i,cacheTranslationX:s,cacheTranslationY:o,width:r,height:n,parentClipPaths:[]}),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===o&&this.hasFill()&&this.hasStroke()&&this.shadow)||!!this.clipPath}shouldCache(){return this.ownCaching=this.objectCaching&&(!this.parent||!this.parent.isOnACache())||this.needsItsOwnCache(),this.ownCaching}willDrawShadow(){return!!this.shadow&&(0!==this.shadow.offsetX||0!==this.shadow.offsetY)}drawClipPathOnCache(t,e,i){t.save(),e.inverted?t.globalCompositeOperation="destination-out":t.globalCompositeOperation="destination-in",t.setTransform(1,0,0,1,0,0),t.drawImage(i,0,0),t.restore()}drawObject(t,e,i){const s=this.fill,o=this.stroke;e?(this.fill="black",this.stroke="",this._setClippingProperties(t)):this._renderBackground(t),this._render(t),this._drawClipPath(t,this.clipPath,i),this.fill=s,this.stroke=o}createClipPathLayer(t,e){const i=_(e),s=i.getContext("2d");if(s.translate(e.cacheTranslationX,e.cacheTranslationY),s.scale(e.zoomX,e.zoomY),t._cacheCanvas=i,e.parentClipPaths.forEach(t=>{t.transform(s)}),e.parentClipPaths.push(t),t.absolutePositioned){const t=k(this.calcTransformMatrix());s.transform(t[0],t[1],t[2],t[3],t[4],t[5])}return t.transform(s),t.drawObject(s,!0,e),i}_drawClipPath(t,e,i){if(!e)return;e._transformDone=!0;const s=this.createClipPathLayer(e,i);this.drawClipPathOnCache(t,e,s)}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,D(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&&(D(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&&t.setLineDash(e)}_setShadow(t){if(!this.shadow)return;const e=this.shadow,s=this.canvas,o=this.getCanvasRetinaScaling(),[r,,,n]=(null==s?void 0:s.viewportTransform)||h,a=r*o,c=n*o,l=e.nonScaling?new d(1,1):this.getObjectScaling();t.shadowColor=e.color,t.shadowBlur=e.blur*i.browserShadowBlurConstant*(a+c)*(l.x+l.y)/4,t.shadowOffsetX=e.offsetX*a*l.x,t.shadowOffsetY=e.offsetY*c*l.y}_removeShadow(t){this.shadow&&(t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0)}_applyPatternGradientTransform(t,e){if(!D(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===o?(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=this.getCanvasRetinaScaling(),r=s.x/this.scaleX/o,n=s.y/this.scaleY/o,a=_({width:Math.ceil(r),height:Math.ceil(n)}),h=a.getContext("2d");h&&(h.beginPath(),h.moveTo(0,0),h.lineTo(r,0),h.lineTo(r,n),h.lineTo(0,n),h.closePath(),h.translate(r/2,n/2),h.scale(s.zoomX/this.scaleX/o,s.zoomY/this.scaleY/o),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(o*this.scaleX/s.zoomX,o*this.scaleY/s.zoomY),t.strokeStyle=null!==(i=h.createPattern(a,"no-repeat"))&&void 0!==i?i:"")}_findCenterFromElement(){return new d(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(u.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?M():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=w(),l=this.getBoundingRect(),m=this.shadow,f=new d;if(m){const t=m.blur,e=m.nonScaling?new d(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 p=l.width+f.x,u=l.height+f.y;h.width=Math.ceil(p),h.height=Math.ceil(u);const g=a(h);"jpeg"===t.format&&(g.backgroundColor="#fff"),this.setPositionByOrigin(new d(g.width/2,g.height/2),c,c);const C=this.canvas;g._objects=[this],this.set("canvas",g),this.setCoords();const _=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(),_}toDataURL(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return v(this.toCanvasElement(t),t.format||"png",t.quality||1)}toBlob(){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=c,this.originY=c,this.left=t,this.top=e}if(this.set("angle",t),e){const{x:t,y:e}=this.getPositionByOrigin(i,s);this.left=t,this.top=e,this.originX=i,this.originY=s}}setOnGroup(){}_setupCompositeOperation(t){this.globalCompositeOperation&&(t.globalCompositeOperation=this.globalCompositeOperation)}dispose(){g.cancelByTarget(this),this.off(),this._set("canvas",void 0),this._cacheCanvas&&R().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,e){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const s=t.split("."),o=this.constructor.colorProperties.includes(s[s.length-1]),{abort:r,startValue:n,onChange:a,onComplete:h}=i,c={...i,target:this,startValue:null!=n?n:s.reduce((t,e)=>t[e],this),endValue:e,abort:null==r?void 0:r.bind(this),onChange:(t,e,i)=>{s.reduce((e,i,o)=>(o===s.length-1&&(e[i]=t),e[i]),this),a&&a(t,e,i)},onComplete:(t,e,i)=>{this.setCoords(),h&&h(t,e,i)}};return o?V(c):I(c)}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(G.customProperties,this.constructor.customProperties||[]);let e;const s=i.NUM_FRACTION_DIGITS,{clipPath:o,fill:r,stroke:n,shadow:a,strokeDashArray:h,left:c,top:m,originX:f,originY:d,width:p,height:u,strokeWidth:g,strokeLineCap:C,strokeDashOffset:w,strokeLineJoin:_,strokeUniform:v,strokeMiterLimit:y,scaleX:b,scaleY:k,angle:O,flipX:j,flipY:S,opacity:P,visible:Y,backgroundColor:x,fillRule:D,paintFirst:z,globalCompositeOperation:A,skewX:L,skewY:M}=this;o&&!o.excludeFromExport&&(e=o.toObject(t.concat("inverted","absolutePositioned")));const R=t=>X(t,s),B={...T(this,t),type:this.constructor.type,version:l,originX:f,originY:d,left:R(c),top:R(m),width:R(p),height:R(u),fill:F(r)?r.toObject():r,stroke:F(n)?n.toObject():n,strokeWidth:R(g),strokeDashArray:h?h.concat():h,strokeLineCap:C,strokeDashOffset:w,strokeLineJoin:_,strokeUniform:v,strokeMiterLimit:R(y),scaleX:R(b),scaleY:R(k),angle:R(O),flipX:j,flipY:S,opacity:R(P),shadow:a?a.toObject():a,visible:Y,backgroundColor:x,fillRule:D,paintFirst:z,globalCompositeOperation:A,skewX:R(L),skewY:R(M),...e?{clipPath:e}:null};return this.includeDefaultValues?B:this._removeDefaultValues(B)}toDatalessObject(t){return this.toObject(t)}_removeDefaultValues(t){const e=this.constructor.getDefaults(),i=Object.keys(e).length>0?e:Object.getPrototypeOf(this);return Y(t,(t,e)=>{if(e===m||e===f||"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`#<${this.constructor.type}>`}static _fromObject(t){let{type:e,...i}=t,{extraParam:s,...o}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return O(i,o).then(t=>s?(delete t[s],new this(i[s],t)):new this(t))}static fromObject(t,e){return this._fromObject(t,e)}}t(G,"stateProperties",z),t(G,"cacheProperties",A),t(G,"ownDefaults",L),t(G,"type","FabricObject"),t(G,"colorProperties",[s,o,"backgroundColor"]),t(G,"customProperties",[]),u.setClass(G),u.setClass(G,"object");export{G as FabricObject};
//# sourceMappingURL=Object.min.mjs.map