angular-fabric-js/bundles/angular-fabric-js.umd.min.js

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.7.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("fabric"),require("@angular/platform-browser"),require("@angular/forms"),require("ngx-color-picker")):"function"==typeof define&&define.amd?define("angular-fabric-js",["exports","@angular/core","fabric","@angular/platform-browser","@angular/forms","ngx-color-picker"],e):e((t=t||self)["angular-fabric-js"]={},t.ng.core,t.fabric,t.ng.platformBrowser,t.ng.forms,t.ngxColorPicker)}(this,(function(t,e,i,o,n,s){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */function a(t,e,i,o){var n,s=arguments.length,a=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(a=(s<3?n(a):s>3?n(e,i,a):n(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a}var r=function(){function t(){this.props={canvasFill:"#ffffff",canvasImage:"",id:null,opacity:null,fill:null,fontSize:null,lineHeight:null,charSpacing:null,fontWeight:null,fontStyle:null,textAlign:null,fontFamily:null,TextDecoration:""},this.url="",this.size={width:500,height:300},this.globalEditor=!1,this.textEditor=!1,this.imageEditor=!1,this.figureEditor=!1}return t.prototype.ngAfterViewInit=function(){var t=this;this.canvas=new i.fabric.Canvas(this.htmlCanvas.nativeElement,{hoverCursor:"pointer",selection:!0,selectionBorderColor:"blue",isDrawingMode:!0}),this.canvas.on({"object:moving":function(t){},"object:modified":function(t){},"object:selected":function(e){var i=e.target;if(t.selected=i,i.hasRotatingPoint=!0,i.transparentCorners=!1,i.borderColor="blue",i.cornerColor="green",i.cornerSize=6,i.cornerStyle="circle",i.padding=10,t.resetPanels(),"group"!==i.type&&i)switch(t.getId(),t.getOpacity(),i.type){case"rect":case"circle":case"triangle":t.figureEditor=!0,t.getFill();break;case"i-text":t.textEditor=!0,t.getLineHeight(),t.getCharSpacing(),t.getBold(),t.getFill(),t.getTextDecoration(),t.getTextAlign(),t.getFontFamily()}},"selection:cleared":function(e){t.selected=null,t.resetPanels()}}),this.canvas.setWidth(this.size.width),this.canvas.setHeight(this.size.height),this.canvas.on("mouse:down",(function(t){document.getElementById("canvas")}))},t.prototype.changeSize=function(){this.canvas.setWidth(this.size.width),this.canvas.setHeight(this.size.height)},t.prototype.addText=function(){if(this.textString){var t=new i.fabric.IText(this.textString,{left:10,top:10,fontFamily:"helvetica",angle:0,fill:"#000000",scaleX:.5,scaleY:.5,fontWeight:"",hasRotatingPoint:!0});this.extend(t,this.randomId()),this.canvas.add(t),this.selectItemAfterAdded(t),this.textString=""}},t.prototype.getImgPolaroid=function(t){var e=this,o=t.target;i.fabric.loadSVGFromURL(o.src,(function(t,o){var n=i.fabric.util.groupSVGElements(t,o);n.set({left:10,top:10,angle:0,padding:10,cornerSize:10,hasRotatingPoint:!0}),e.extend(n,e.randomId()),e.canvas.add(n),e.selectItemAfterAdded(n)}))},t.prototype.addImageOnCanvas=function(t){var e=this;t&&i.fabric.Image.fromURL(t,(function(t){t.set({left:10,top:10,angle:0,padding:10,cornerSize:10,hasRotatingPoint:!0}),t.scaleToWidth(200),t.scaleToHeight(200),e.extend(t,e.randomId()),e.canvas.add(t),e.selectItemAfterAdded(t)}))},t.prototype.readUrl=function(t){var e=this;if(t.target.files&&t.target.files[0]){var i=new FileReader;i.onload=function(t){e.url=t.target.result},i.readAsDataURL(t.target.files[0])}},t.prototype.removeWhite=function(t){this.url=""},t.prototype.addFigure=function(t){var e;switch(t){case"rectangle":e=new i.fabric.Rect({width:200,height:100,left:10,top:10,angle:0,fill:"#3f51b5"});break;case"square":e=new i.fabric.Rect({width:100,height:100,left:10,top:10,angle:0,fill:"#4caf50"});break;case"triangle":e=new i.fabric.Triangle({width:100,height:100,left:10,top:10,fill:"#2196f3"});break;case"circle":e=new i.fabric.Circle({radius:50,left:10,top:10,fill:"#ff5722"})}this.extend(e,this.randomId()),this.canvas.add(e),this.selectItemAfterAdded(e)},t.prototype.cleanSelect=function(){this.canvas.discardActiveObject().renderAll()},t.prototype.selectItemAfterAdded=function(t){this.canvas.discardActiveObject().renderAll(),this.canvas.setActiveObject(t)},t.prototype.setCanvasFill=function(){this.props.canvasImage||(this.canvas.backgroundColor=this.props.canvasFill,this.canvas.renderAll())},t.prototype.extend=function(t,e){var o;t.toObject=(o=t.toObject,function(){return i.fabric.util.object.extend(o.call(this),{id:e})})},t.prototype.setCanvasImage=function(){this.props.canvasImage&&this.canvas.setBackgroundImage(this.props.canvasImage,this.canvas.renderAll.bind(this.canvas),{originX:"left",originY:"top",crossOrigin:"anonymous"})},t.prototype.randomId=function(){return Math.floor(999999*Math.random())+1},t.prototype.getActiveStyle=function(t,e){return(e=e||this.canvas.getActiveObject())?e.getSelectionStyles&&e.isEditing?e.getSelectionStyles()[t]||"":e[t]||"":""},t.prototype.setActiveStyle=function(t,e,i){if(i=i||this.canvas.getActiveObject()){if(i.setSelectionStyles&&i.isEditing){var o={};o[t]=e,"string"==typeof e&&(e.includes("underline")?i.setSelectionStyles({underline:!0}):i.setSelectionStyles({underline:!1}),e.includes("overline")?i.setSelectionStyles({overline:!0}):i.setSelectionStyles({overline:!1}),e.includes("line-through")?i.setSelectionStyles({linethrough:!0}):i.setSelectionStyles({linethrough:!1})),i.setSelectionStyles(o),i.setCoords()}else"string"==typeof e&&(e.includes("underline")?i.set("underline",!0):i.set("underline",!1),e.includes("overline")?i.set("overline",!0):i.set("overline",!1),e.includes("line-through")?i.set("linethrough",!0):i.set("linethrough",!1)),i.set(t,e);i.setCoords(),this.canvas.renderAll()}},t.prototype.getActiveProp=function(t){var e=this.canvas.getActiveObject();return e&&e[t]||""},t.prototype.setActiveProp=function(t,e){var i=this.canvas.getActiveObject();i&&(i.set(t,e).setCoords(),this.canvas.renderAll())},t.prototype.clone=function(){var t=this.canvas.getActiveObject();this.canvas.getActiveObjects();if(t){var e=void 0;switch(t.type){case"rect":e=new i.fabric.Rect(t.toObject());break;case"circle":e=new i.fabric.Circle(t.toObject());break;case"triangle":e=new i.fabric.Triangle(t.toObject());break;case"i-text":e=new i.fabric.IText("",t.toObject());break;case"image":e=i.fabric.util.object.clone(t)}e&&(e.set({left:10,top:10}),this.canvas.add(e),this.selectItemAfterAdded(e))}},t.prototype.getId=function(){this.props.id=this.canvas.getActiveObject().toObject().id},t.prototype.setId=function(){var t=this.props.id,e=this.canvas.getActiveObject().toObject();console.log(e),this.canvas.getActiveObject().toObject=function(){return e.id=t,e}},t.prototype.getOpacity=function(){this.props.opacity=100*this.getActiveStyle("opacity",null)},t.prototype.setOpacity=function(){this.setActiveStyle("opacity",parseInt(this.props.opacity,10)/100,null)},t.prototype.getFill=function(){this.props.fill=this.getActiveStyle("fill",null)},t.prototype.setFill=function(){this.setActiveStyle("fill",this.props.fill,null)},t.prototype.getLineHeight=function(){this.props.lineHeight=this.getActiveStyle("lineHeight",null)},t.prototype.setLineHeight=function(){this.setActiveStyle("lineHeight",parseFloat(this.props.lineHeight),null)},t.prototype.getCharSpacing=function(){this.props.charSpacing=this.getActiveStyle("charSpacing",null)},t.prototype.setCharSpacing=function(){this.setActiveStyle("charSpacing",this.props.charSpacing,null)},t.prototype.getFontSize=function(){this.props.fontSize=this.getActiveStyle("fontSize",null)},t.prototype.setFontSize=function(){this.setActiveStyle("fontSize",parseInt(this.props.fontSize,10),null)},t.prototype.getBold=function(){this.props.fontWeight=this.getActiveStyle("fontWeight",null)},t.prototype.setBold=function(){this.props.fontWeight=!this.props.fontWeight,this.setActiveStyle("fontWeight",this.props.fontWeight?"bold":"",null)},t.prototype.setFontStyle=function(){this.props.fontStyle=!this.props.fontStyle,this.props.fontStyle?this.setActiveStyle("fontStyle","italic",null):this.setActiveStyle("fontStyle","normal",null)},t.prototype.getTextDecoration=function(){this.props.TextDecoration=this.getActiveStyle("textDecoration",null)},t.prototype.setTextDecoration=function(t){var e=this.props.TextDecoration;e.includes(t)?e=e.replace(RegExp(t,"g"),""):e+=" "+t,this.props.TextDecoration=e,this.setActiveStyle("textDecoration",this.props.TextDecoration,null)},t.prototype.hasTextDecoration=function(t){return this.props.TextDecoration.includes(t)},t.prototype.getTextAlign=function(){this.props.textAlign=this.getActiveProp("textAlign")},t.prototype.setTextAlign=function(t){this.props.textAlign=t,this.setActiveProp("textAlign",this.props.textAlign)},t.prototype.getFontFamily=function(){this.props.fontFamily=this.getActiveProp("fontFamily")},t.prototype.setFontFamily=function(){this.setActiveProp("fontFamily",this.props.fontFamily)},t.prototype.removeSelected=function(){var t=this.canvas.getActiveObject(),e=this.canvas.getActiveObjects();if(t)this.canvas.remove(t);else if(e){this.canvas.discardActiveObject();var i=this;e.forEach((function(t){i.canvas.remove(t)}))}},t.prototype.bringToFront=function(){var t=this.canvas.getActiveObject(),e=this.canvas.getActiveObjects();t?(t.bringToFront(),t.opacity=1):e&&(this.canvas.discardActiveObject(),e.forEach((function(t){t.bringToFront()})))},t.prototype.sendToBack=function(){var t=this.canvas.getActiveObject(),e=this.canvas.getActiveObjects();t?(this.canvas.sendToBack(t),t.sendToBack(),t.opacity=1):e&&(this.canvas.discardActiveObject(),e.forEach((function(t){t.sendToBack()})))},t.prototype.confirmClear=function(){confirm("Are you sure?")&&this.canvas.clear()},t.prototype.rasterize=function(){var t=new Image;t.src=this.canvas.toDataURL({format:"png"}),window.open("").document.write(t.outerHTML),this.downLoadImage()},t.prototype.downLoadImage=function(){var t=this.canvas.toDataURL({format:"png"}),e=document.createElement("a");document.body.appendChild(e),e.href=t,e.target="_self",e.download=Date.now()+".png",e.click()},t.prototype.rasterizeSVG=function(){return window.open("").document.write(this.canvas.toSVG()),this.downLoadSVG(),"data:image/svg+xml;utf8,"+encodeURIComponent(this.canvas.toSVG())},t.prototype.downLoadSVG=function(){var t="data:image/svg+xml;utf8,"+encodeURIComponent(this.canvas.toSVG()),e=document.createElement("a");document.body.appendChild(e),e.href=t,e.target="_self",e.download=Date.now()+".svg",e.click()},t.prototype.saveCanvasToJSON=function(){var t=JSON.stringify(this.canvas);localStorage.setItem("Kanvas",t),console.log("json"),console.log(t)},t.prototype.loadCanvasFromJSON=function(){var t=this,e=localStorage.getItem("Kanvas");console.log("CANVAS"),console.log(e),this.canvas.loadFromJSON(e,(function(){console.log("CANVAS untar"),console.log(e),t.canvas.renderAll(),console.log("this.canvas.item(0).name"),console.log(t.canvas)}))},t.prototype.rasterizeJSON=function(){this.json=JSON.stringify(this.canvas,null,2)},t.prototype.resetPanels=function(){this.textEditor=!1,this.imageEditor=!1,this.figureEditor=!1},t.prototype.drawingMode=function(){this.canvas.isDrawingMode=!this.canvas.isDrawingMode},a([e.ViewChild("htmlCanvas")],t.prototype,"htmlCanvas",void 0),t=a([e.Component({selector:"angular-editor-fabric-js",template:'<canvas id="canvas" #htmlCanvas></canvas>\r\n',styles:["#canvas{border:2px dashed #ccc}"]})],t)}(),c=function(){function t(){}return t=a([e.NgModule({declarations:[r],imports:[o.BrowserModule,n.FormsModule,s.ColorPickerModule],exports:[r]})],t)}();t.FabricjsEditorComponent=r,t.FabricjsEditorModule=c,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=angular-fabric-js.umd.min.js.map