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