mini-canvas-core
Version:
Core library for Mini Canvas Editor.
2 lines (1 loc) • 7.43 kB
JavaScript
"use strict";var t,e,s=require("fabric/node");class i extends s.Image{constructor(t,e){super(t,Object.assign({label:"Image"},e))}toObject(t=[]){return super.toObject(t.concat(["label","selectable"]))}}s.classRegistry.setClass(i);class c extends s.Path{set type(t){}constructor(t,e){super(t,Object.assign({label:"Path"},e))}toObject(t=[]){return super.toObject(t.concat(["label","selectable"]))}}s.classRegistry.setClass(c);class r extends s.Rect{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"]))}}s.classRegistry.setClass(r),exports.MceVerticalAlign=void 0,(t=exports.MceVerticalAlign||(exports.MceVerticalAlign={}))[t.top=1]="top",t[t.middle=2]="middle",t[t.bottom=3]="bottom",exports.MceTextBackground=void 0,(e=exports.MceTextBackground||(exports.MceTextBackground={}))[e.none=0]="none",e[e.behind=1]="behind";class a extends s.Textbox{constructor(t,e){super(t,Object.assign({label:"Textbox",fill:"#000000",fontSize:30,fontFamily:"serif",verticalAlign:exports.MceVerticalAlign.top,textBackground:exports.MceTextBackground.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===exports.MceVerticalAlign.top)return t;const e=this.getHeightOfLine(0)*this.textLines.length,s=Math.max(this.maxHeight-e,0);if(this.verticalAlign===exports.MceVerticalAlign.middle)return t+s/2;if(this.verticalAlign===exports.MceVerticalAlign.bottom)return t+s;throw new Error("Unsupported vertical align")}_renderTextCommon(t,e){t.save();const s=this._getLeftOffset(),i=this._getTopOffset();this.textBackground===exports.MceTextBackground.behind&&(t.fillStyle=this.textBackgroundFill);let c=0;for(let r=0,a=this._textLines.length;r<a;r++){const a=this.getHeightOfLine(r);if(c+a>this.maxHeight)break;const o=a/this.lineHeight,n=this._getLineLeftOffset(r);if(this.textBackground===exports.MceTextBackground.behind){const e=this.__charBounds[r][0],a=this.__charBounds[r][this.__charBounds[r].length-1];t.fillRect(s+n,i+c,a.left-e.left+a.width,o)}this._renderTextLine(e,t,this._textLines[r],s+n,i+c+o,r),c+=a}t.restore()}toObject(t=[]){return super.toObject(t.concat(["label","selectable","verticalAlign","maxHeight","verticalAlign","textBackground","textBackgroundFill"]))}}function o(t,e){const s=Math.max(t.getScaledWidth()/e.width,t.getScaledHeight()/e.height),c=t.getScaledWidth()/s,r=t.getScaledHeight()/s,a=(e.height-t.getScaledHeight()/s)/2,o=(e.width-t.getScaledWidth()/s)/2;return new i(e,{angle:t.angle,left:t.left,top:t.top,width:c,height:r,scaleX:s,scaleY:s,cropY:a,cropX:o})}function n(t,e,s,i){return new(s||(s=Promise))((function(c,r){function a(t){try{n(i.next(t))}catch(t){r(t)}}function o(t){try{n(i.throw(t))}catch(t){r(t)}}function n(t){var e;t.done?c(t.value):(e=t.value,e instanceof s?e:new s((function(t){t(e)}))).then(a,o)}n((i=i.apply(t,e||[])).next())}))}function h(t,e){const s=t.width/e.width,c=t.height/e.height;return new i(e,{angle:t.angle,left:t.left,top:t.top,width:e.width,height:e.height,scaleX:s,scaleY:c})}function l(t,e){const s=Math.min(t.width/e.width,t.height/e.height),c=t.width/s,r=t.height/s,a=Math.max(0,(e.height-r)/2),o=Math.max(0,(e.width-c)/2),n=t.left+(t.width-e.width*s)/2,h=t.top+(t.height-e.height*s)/2;return new i(e,{angle:t.angle,left:n,top:h,width:c,height:r,scaleX:s,scaleY:s,cropY:a,cropX:o})}a.cacheProperties=[...s.Textbox.cacheProperties,"verticalAlign","textBackground","textBackgroundFill"],s.classRegistry.setClass(a),"function"==typeof SuppressedError&&SuppressedError;class g{static create(t){const e=t.getObjects();return new g(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,i){return n(this,void 0,void 0,(function*(){const c=this.objects[t.realIndex];if(!c.visible)return;var r;let a;switch("string"==typeof e&&(e=yield(r=e,new Promise(((t,e)=>{const i=s.getEnv().document.createElement("img");i.onload=()=>t(i),i.onerror=()=>{const t=r.length>20?r.substring(0,20)+"...":r;e(new Error(`Failed to load image: ${t}`))},i.src=r})))),i){case"stretch":a=h(c,e);break;case"fit":a=o(c,e);break;case"fill":a=l(c,e);break;default:throw new Error(`Unknown mode: ${i}`)}this.canvas.remove(c),this.canvas.insertAt(t.realIndex,a)}))}}function d(){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 u{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 c=e[i];c!==this.canvas.workspaceBackground&&s.push({index:s.length,realIndex:i,name:null!==(t=c.get("label"))&&void 0!==t?t:c.type,type:c.type})}return s}}}class p extends s.Canvas{static createBlank(t,e,i,c){const a=new r({left:0,top:0,width:t,height:e,fill:new s.Pattern({repeat:"repeat",source:d()}),selectable:!1}),o=new p(t,e,i,Object.assign({clipPath:a},c));return o.add(a),o.workspaceBackground=a,o}static createFromJSON(t,e,s){return n(this,void 0,void 0,(function*(){const i=new p(t.width,t.height,e,s);yield i.loadFromJSON(t.data);const c=i.getObjects();if(i.workspaceBackground=c[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 u(this),this.getWorkspaceObjects=this.common.getWorkspaceObjects,this.getLayers=this.common.getLayers}toImageJSON(){return{width:this.workspaceWidth,height:this.workspaceHeight,data:this.toJSON()}}}class f extends s.StaticCanvas{static createFromJSON(t){return n(this,void 0,void 0,(function*(){const e=new f(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 u(this),this.getWorkspaceObjects=this.common.getWorkspaceObjects,this.getLayers=this.common.getLayers}getReplacer(){return g.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})}}exports.MceCanvas=p,exports.MceCanvasReplacer=g,exports.MceImage=i,exports.McePath=c,exports.MceRect=r,exports.MceStaticCanvas=f,exports.MceTextbox=a,exports.fillImage=l,exports.fitImage=o,exports.stretchImage=h,Object.keys(s).forEach((function(t){"default"===t||Object.prototype.hasOwnProperty.call(exports,t)||Object.defineProperty(exports,t,{enumerable:!0,get:function(){return s[t]}})}));