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