@axceta/angular-editor-fabric-js/bundles/axceta-angular-editor-fabric-js.umd.min.js

> Drag-and-drop editor based on Fabricjs for Angular with multiple options

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("fabric"),require("@angular/core"),require("@angular/platform-browser"),require("@angular/forms"),require("ngx-color-picker")):"function"==typeof define&&define.amd?define("@axceta/angular-editor-fabric-js",["exports","fabric","@angular/core","@angular/platform-browser","@angular/forms","ngx-color-picker"],e):e(((t=t||self).axceta=t.axceta||{},t.axceta["angular-editor-fabric-js"]={}),t.fabric,t.ng.core,t.ng.platformBrowser,t.ng.forms,t.ngxColorPicker)}(this,(function(t,e,i,n,o,r){"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,n){var o,r=arguments.length,a=r<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,n);else for(var s=t.length-1;s>=0;s--)(o=t[s])&&(a=(r<3?o(a):r>3?o(e,i,a):o(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a}var s=function(){function t(){}return t.createCanvas=function(t,i){return new e.fabric.Canvas(t,i)},t.createStaticCanvas=function(t,i){return new e.fabric.StaticCanvas(t,i)},t}(),c=function(){function t(){this.moving=new i.EventEmitter,this.modified=new i.EventEmitter,this.selection=new i.EventEmitter,this.cleared=new i.EventEmitter,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:800},this.textEditor=!1,this.figureEditor=!1}return t.prototype.ngAfterViewInit=function(){var t=this;this.canvas=new e.fabric.Canvas(this.htmlCanvas.nativeElement,{hoverCursor:"pointer",selection:!0,selectionBorderColor:"blue"}),this.canvas.on({"object:moving":function(e){t.moving.emit(e)},"object:modified":function(e){t.modified.emit(e)},"object:selected":function(e){t.selection.emit(e);var i=e.target;if(t.selected=i,i.hasRotatingPoint=!0,i.transparentCorners=!1,i.cornerColor="rgba(255, 87, 34, 0.7)",t.resetPanels(),"group"!==i.type&&i)switch(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.cleared.emit(e),t.selected=null,t.resetPanels()}}),this.canvas.setWidth(this.size.width),this.canvas.setHeight(this.size.height)},t.prototype.onEvent=function(t,e){var i;this.canvas.on(((i={})[t]=e,i))},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 e.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 i=this,n=t.target;e.fabric.loadSVGFromURL(n.src,(function(t,n){var o=e.fabric.util.groupSVGElements(t,n);o.set({left:10,top:10,angle:0,padding:10,cornerSize:10,hasRotatingPoint:!0}),i.extend(o,i.randomId()),i.canvas.add(o),i.selectItemAfterAdded(o)}))},t.prototype.addImageOnCanvas=function(t){var i=this;t&&e.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),i.extend(t,i.randomId()),i.canvas.add(t),i.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,e){var i=e||this.randomId();return this.extend(t,i),this.canvas.add(t),this.selectItemAfterAdded(t),i},t.prototype.addPredefinedFigure=function(t,i){var n,o=i||this.randomId();switch(t){case"rectangle":n=new e.fabric.Rect({width:200,height:100,left:10,top:10,angle:0,fill:"#3f51b5"});break;case"square":n=new e.fabric.Rect({width:100,height:100,left:10,top:10,angle:0,fill:"#4caf50"});break;case"triangle":n=new e.fabric.Triangle({width:100,height:100,left:10,top:10,fill:"#2196f3"});break;case"circle":n=new e.fabric.Circle({radius:50,left:10,top:10,fill:"#ff5722"})}return this.addFigure(n,o)},t.prototype.addRect=function(t,i){var n=new e.fabric.Rect(t);return i&&(n=Object.assign(n,{data:{id:i}})),this.addFigure(n,i)},t.prototype.cleanSelect=function(){this.canvas.discardActiveObject()},t.prototype.selectItemAfterAdded=function(t){this.canvas.discardActiveObject(),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,i){var n;t.toObject=(n=t.toObject,function(){return e.fabric.util.object.extend(n.call(this),{id:i})})},t.prototype.setCanvasImage=function(){var t=this;this.props.canvasImage&&this.canvas.setBackgroundColor(new e.fabric.Pattern({source:this.props.canvasImage,repeat:"repeat"}),(function(){t.props.canvasFill="",t.canvas.renderAll()}))},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 n={};n[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(n),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 i=void 0;switch(t.type){case"rect":i=new e.fabric.Rect(t.toObject());break;case"circle":i=new e.fabric.Circle(t.toObject());break;case"triangle":i=new e.fabric.Triangle(t.toObject());break;case"i-text":i=new e.fabric.IText("",t.toObject());break;case"image":i=e.fabric.util.object.clone(t)}i&&(i.set({left:10,top:10}),this.canvas.add(i),this.selectItemAfterAdded(i))}},t.prototype.getId=function(){return this.getIdOfSelectedObject()},t.prototype.getIdOfSelectedObject=function(){return this.props.id=this.canvas.getActiveObject().toObject().id,this.props.id},t.prototype.setId=function(){this.setIdOfSelectedObject()},t.prototype.setIdOfSelectedObject=function(){var t=this.props.id,e=this.canvas.getActiveObject().toObject();this.canvas.getActiveObject().toObject=function(){return e.id=t,e}},t.prototype.getObjectWithID=function(t){var e;return this.canvas.getObjects().forEach((function(i){i.id===t&&(e=i)})),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.clear()},t.prototype.clear=function(){this.canvas.clear()},t.prototype.rasterize=function(){var t=new Image;t.src=this.canvas.toDataURL({format:"png"}),window.open("").document.write(t.outerHTML)},t.prototype.rasterizeSVG=function(){return window.open("").document.write(this.canvas.toSVG()),"data:image/svg+xml;utf8,"+encodeURIComponent(this.canvas.toSVG())},t.prototype.saveCanvasToJSON=function(){var t=JSON.stringify(this.canvas);localStorage.setItem("Kanvas",t),console.log("json"),console.log(t)},t.prototype.importCanvasFromLocalStorage=function(){this.loadCanvas(localStorage.getItem("Kanvas"))},t.prototype.importCanvasFromJson=function(t){this.loadCanvas(t)},t.prototype.importFromObject=function(t){this.loadCanvas(t)},t.prototype.loadCanvas=function(t){var e=this;this.canvas.loadFromJSON(t,(function(){e.canvas.renderAll()}))},t.prototype.loadCanvasFromJSON=function(){this.importCanvasFromLocalStorage()},t.prototype.getCanvasData=function(t){return this.canvas.toObject(t)},t.prototype.rasterizeJSON=function(){this.json=JSON.stringify(this.canvas,null,2)},t.prototype.resetPanels=function(){this.textEditor=!1,this.figureEditor=!1},a([i.ViewChild("htmlCanvas")],t.prototype,"htmlCanvas",void 0),a([i.Output()],t.prototype,"moving",void 0),a([i.Output()],t.prototype,"modified",void 0),a([i.Output()],t.prototype,"selection",void 0),a([i.Output()],t.prototype,"cleared",void 0),t=a([i.Component({selector:"angular-editor-fabric-js",template:'<canvas id="canvas" #htmlCanvas></canvas>\n',styles:["#canvas{border:2px dashed #ccc}"]})],t)}(),l=function(){function t(){}return t=a([i.NgModule({declarations:[c],imports:[n.BrowserModule,o.FormsModule,r.ColorPickerModule],exports:[c]})],t)}();t.CanvasManager=s,t.DEFAULT_CANVAS_WIDTH=500,t.FabricjsEditorComponent=c,t.FabricjsEditorModule=l,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=axceta-angular-editor-fabric-js.umd.min.js.map