mini-canvas-core/lib/esm/index.browser.js

Core library for Mini Canvas Editor.

import{classRegistry as t,Image as e,Path as s,Rect as i,Textbox as n,getEnv as c,Canvas as r,Pattern as o,StaticCanvas as a}from"fabric";export*from"fabric";class h extends e{constructor(t,e){super(t,Object.assign({label:"Image"},e))}toObject(t=[]){return super.toObject(t.concat(["label","selectable"]))}}t.setClass(h);class l extends s{set type(t){}constructor(t,e){super(t,Object.assign({label:"Path"},e))}toObject(t=[]){return super.toObject(t.concat(["label","selectable"]))}}t.setClass(l);class g extends i{constructor(t){super(Object.assign({fill:"#000000",strokeWidth:0,stroke:"#000000",label:"Rect"},t)),this.onScaled=()=>{const t=this.width*this.scaleX,e=this.height*this.scaleY;this.set({width:t,height:e,scaleX:1,scaleY:1})},this.on("scaling",this.onScaled)}toObject(t=[]){return super.toObject(t.concat(["label","selectable"]))}}var d,u;t.setClass(g),function(t){t[t.top=1]="top",t[t.middle=2]="middle",t[t.bottom=3]="bottom"}(d||(d={})),function(t){t[t.none=0]="none",t[t.behind=1]="behind"}(u||(u={}));class f extends n{constructor(t,e){super(t,Object.assign({label:"Textbox",fill:"#000000",fontSize:30,fontFamily:"serif",verticalAlign:d.top,textBackground:u.none,textBackgroundFill:"#ff0000",stroke:"#ff0000",strokeWidth:0,paintFirst:"stroke"},e)),this.onScaled=()=>{const t=this.width*this.scaleX,e=this.maxHeight*this.scaleY;this.set({width:t,maxHeight:e,scaleX:1,scaleY:1})},this.on("scaling",this.onScaled)}setText(t){this.set({text:t})}calcTextHeight(){return this.maxHeight}_getTopOffset(){const t=-this.maxHeight/2;if(this.verticalAlign===d.top)return t;const e=this.getHeightOfLine(0)*this.textLines.length,s=Math.max(this.maxHeight-e,0);if(this.verticalAlign===d.middle)return t+s/2;if(this.verticalAlign===d.bottom)return t+s;throw new Error("Unsupported vertical align")}_renderTextCommon(t,e){t.save();const s=this._getLeftOffset(),i=this._getTopOffset();this.textBackground===u.behind&&(t.fillStyle=this.textBackgroundFill);let n=0;for(let c=0,r=this._textLines.length;c<r;c++){const r=this.getHeightOfLine(c);if(n+r>this.maxHeight)break;const o=r/this.lineHeight,a=this._getLineLeftOffset(c);if(this.textBackground===u.behind){const e=this.__charBounds[c][0],r=this.__charBounds[c][this.__charBounds[c].length-1];t.fillRect(s+a,i+n,r.left-e.left+r.width,o)}this._renderTextLine(e,t,this._textLines[c],s+a,i+n+o,c),n+=r}t.restore()}toObject(t=[]){return super.toObject(t.concat(["label","selectable","verticalAlign","maxHeight","verticalAlign","textBackground","textBackgroundFill"]))}}function p(t,e){const s=Math.max(t.getScaledWidth()/e.width,t.getScaledHeight()/e.height),i=t.getScaledWidth()/s,n=t.getScaledHeight()/s,c=(e.height-t.getScaledHeight()/s)/2,r=(e.width-t.getScaledWidth()/s)/2;return new h(e,{angle:t.angle,left:t.left,top:t.top,width:i,height:n,scaleX:s,scaleY:s,cropY:c,cropX:r})}function w(t,e,s,i){return new(s||(s=Promise))((function(n,c){function r(t){try{a(i.next(t))}catch(t){c(t)}}function o(t){try{a(i.throw(t))}catch(t){c(t)}}function a(t){var e;t.done?n(t.value):(e=t.value,e instanceof s?e:new s((function(t){t(e)}))).then(r,o)}a((i=i.apply(t,e||[])).next())}))}function b(t,e){const s=t.width/e.width,i=t.height/e.height;return new h(e,{angle:t.angle,left:t.left,top:t.top,width:e.width,height:e.height,scaleX:s,scaleY:i})}function m(t,e){const s=Math.min(t.width/e.width,t.height/e.height),i=t.width/s,n=t.height/s,c=Math.max(0,(e.height-n)/2),r=Math.max(0,(e.width-i)/2),o=t.left+(t.width-e.width*s)/2,a=t.top+(t.height-e.height*s)/2;return new h(e,{angle:t.angle,left:o,top:a,width:i,height:n,scaleX:s,scaleY:s,cropY:c,cropX:r})}f.cacheProperties=[...n.cacheProperties,"verticalAlign","textBackground","textBackgroundFill"],t.setClass(f),"function"==typeof SuppressedError&&SuppressedError;class k{static create(t){const e=t.getObjects();return new k(t,e)}constructor(t,e){this.canvas=t,this.objects=e}getText(t){return this.objects[t.realIndex].text}replaceText(t,e){const s=this.objects[t.realIndex];s.visible&&s.setText(e)}replaceRectToImage(t,e,s){return w(this,void 0,void 0,(function*(){const i=this.objects[t.realIndex];if(!i.visible)return;var n;let r;switch("string"==typeof e&&(e=yield(n=e,new Promise(((t,e)=>{const s=c().document.createElement("img");s.onload=()=>t(s),s.onerror=()=>{const t=n.length>20?n.substring(0,20)+"...":n;e(new Error(`Failed to load image: ${t}`))},s.src=n})))),s){case"stretch":r=b(i,e);break;case"fit":r=p(i,e);break;case"fill":r=m(i,e);break;default:throw new Error(`Unknown mode: ${s}`)}this.canvas.remove(i),this.canvas.insertAt(t.realIndex,r)}))}}function x(){const t=document.createElement("canvas");t.width=10,t.height=10;const e=t.getContext("2d");return e.fillStyle="#ffffff",e.fillRect(0,0,10,10),e.fillStyle="#f0f0f0",e.fillRect(0,0,5,5),e.fillRect(5,5,5,5),t}class O{constructor(t){this.canvas=t,this.getWorkspaceObjects=()=>this.canvas.getObjects().filter((t=>t!==this.canvas.workspaceBackground)),this.getLayers=()=>{var t;const e=this.canvas.getObjects(),s=[];for(let i=0;i<e.length;i++){const n=e[i];n!==this.canvas.workspaceBackground&&s.push({index:s.length,realIndex:i,name:null!==(t=n.get("label"))&&void 0!==t?t:n.type,type:n.type})}return s}}}class v extends r{static createBlank(t,e,s,i){const n=new g({left:0,top:0,width:t,height:e,fill:new o({repeat:"repeat",source:x()}),selectable:!1}),c=new v(t,e,s,Object.assign({clipPath:n},i));return c.add(n),c.workspaceBackground=n,c}static createFromJSON(t,e,s){return w(this,void 0,void 0,(function*(){const i=new v(t.width,t.height,e,s);yield i.loadFromJSON(t.data);const n=i.getObjects();if(i.workspaceBackground=n[0],!i.workspaceBackground)throw new Error("JSON does not contain a workspace background");return i.clipPath=i.workspaceBackground,i}))}constructor(t,e,s,i){super(s,i),this.workspaceWidth=t,this.workspaceHeight=e,this.common=new O(this),this.getWorkspaceObjects=this.common.getWorkspaceObjects,this.getLayers=this.common.getLayers}toImageJSON(){return{width:this.workspaceWidth,height:this.workspaceHeight,data:this.toJSON()}}}class j extends a{static createFromJSON(t){return w(this,void 0,void 0,(function*(){const e=new j(t.width,t.height,{width:t.width,height:t.height});if(yield e.loadFromJSON(t.data),e.workspaceBackground=e.getObjects()[0],!e.workspaceBackground)throw new Error("JSON does not contain a workspace background");return e}))}constructor(t,e,s){super(null,s),this.workspaceWidth=t,this.workspaceHeight=e,this.common=new O(this),this.getWorkspaceObjects=this.common.getWorkspaceObjects,this.getLayers=this.common.getLayers}getReplacer(){return k.create(this)}exportToDataURL(t,e=1){return this.workspaceBackground.visible=!1,this.toDataURL({width:this.workspaceWidth,height:this.workspaceHeight,multiplier:1,format:t,quality:e})}}export{v as MceCanvas,k as MceCanvasReplacer,h as MceImage,l as McePath,g as MceRect,j as MceStaticCanvas,u as MceTextBackground,f as MceTextbox,d as MceVerticalAlign,m as fillImage,p as fitImage,b as stretchImage};