https://classgrit.com/Scripts/CanvasEditor/CanvasEditor.js?b=134302854817858011

1WebFontConfig={google:{families:["Actor","Amaranth","Amatic SC","Amiri","Andika","Antic","Anton","Arapey","Architects Daughter","Archivo Black","Arimo","Audiowide","Bad Script","Bangers","BenchNine","Bitter","Black Ops One","Bubbler One","Candal","Chewy","Cinzel","Cookie","Coming Soon","Covered By Your Grace","Damion","Dancing Script","Droid Serif","Enriqueta","Exo","Francois One","Fredoka One","Fugaz One","Happy Monkey","Homemade Apple","Indie Flower","Karla","Kaushan Script","Lato","Limelight","Lobster","Lobster Two","Lora","Luckiest Guy","Molengo","Monda","Montserrat","News Cycle","Open Sans","Orbitron","Oswald","Pacifico","Passion One","Patrick Hand","Paytone One","Permanent Marker","Playfair Display SC","Poiret One","Quicksand","Raleway","Roboto","Roboto Mono","Rock Salt","Russo One","Satisfy","Shadows Into Light","Sigmar One","Special Elite","Ubuntu","Varela Round","Vidaloka","Yanone Kaffeesatz"]},fontactive:function(n){$(window).trigger("fontLoadedEvent",[n])},active:function(){$(window).trigger("allFontsLoadedEvent")}};MITM.Core.registerModule("CanvasEditor",null,function(){function vi(){$(window).on("resize",fi);$(window).on("fontLoadedEvent",function(n,t){a.append($("<option/>").attr("value",t.toLowerCase()).text(t))});n.on("selection:created",ti);n.on("selection:updated",ti);n.on("selection:cleared",function(){ci()});n.on("before:selection:cleared",yi);n.on("text:selection:changed",function(){var t=n.getActiveObject();t&&t.isEditing&&ft(t)});n.on("text:editing:entered",function(){var t=n.getActiveObject();t&&ft(t)});window.addEventListener("paste",function(n){var i,t;if(l){i=(n.clipboardData||n.originalEvent.clipboardData).items;for(ind in i){if(t=i[ind],t.kind==="file"){wt(t.getAsFile());break}if(t.kind==="string"&&t.type.match("^text/plain")){t.getAsString(function(n){et(n)});break}}}});c.on("drop",function(n){var r,t,i;if(l)for(n.preventDefault(),n.stopPropagation(),r=n.originalEvent.dataTransfer.files,t=0;t<r.length;t++)i=n.originalEvent.dataTransfer.files[t],i.type.indexOf("image")>-1&&wt(i)});$(window).on("keydown",function(t){var r,i;if(l){r=window.event?window.event.keyCode:t.keyCode;switch(r){case 46:i=n.getActiveObject();i&&!i.isEditing&&ii(i);break;case 67:t.ctrlKey&&(i=n.getActiveObject(),i&&!i.isEditing&&ui())}}})}function ti(t){for(var r,u,i=0;i<t.selected.length;i++)t.selected[i].handleSelect&&t.selected[i].handleSelect();r=n.getActiveObject();u=r&&r.type==="textbox";p.toggleClass("disabled",!1);w.toggleClass("disabled",!1);$(".text-only-control").show();$(".text-only-control").toggle(u);$(".object-control").show();$(".details-empty-state").hide();li();ci()}function yi(){p.toggleClass("disabled",!0);w.toggleClass("disabled",!0);$(".object-control").hide();$(".text-only-control").hide();$(".details-empty-state").show();li()}function ii(t){t.type==="activeSelection"?t.forEachObject(function(t){n.remove(t)}):n.remove(t);n.discardActiveObject();n.requestRenderAll()}function pi(){$("body").css("overflow","hidden");g.show();h.show();l=!0;$headerTitle&&$headerTitle.text(t.headerTitle||"")}function ri(){$("body").css("overflow","auto");ki();g.hide();h.hide();l=!1}function lt(t){n.loadFromJSON(t,n.renderAll.bind(n))}function at(i){wi(n.toDataURL(),t.canvasCrop.left,t.canvasCrop.top,t.canvasCrop.width,t.canvasCrop.height,function(t){var r=n.toJSON();r&&r.objects.length!==0||(r=null,image=null);i({JSON:r,Image:t})})}function wi(n,t,i,r,u,f){var e=document.createElement("canvas"),o;e.width=r;e.height=u;o=new Image;o.onload=function(){e.getContext("2d").drawImage(o,t,i,r,u,0,0,r,u);f(e.toDataURL())};o.src=n}function bi(n,t,i){return new Promise(function(r){n.clone(function(n){var u=n.getBoundingRect(!1),s=10,l=u.width+s*2,a=u.height+s*2,e=Math.min(t/l,i/a,1),o=document.createElement("canvas"),f,h,c;o.width=t;o.height=i;f=new fabric.StaticCanvas(o);f.backgroundColor="white";n.type==="activeSelection"?(h=u.left+u.width/2,c=u.top+u.height/2,n.forEachObject(function(n){var r=n.left-h,u=n.top-c;n.scale(e);n.set({left:t/2+r*e,top:i/2+u*e});f.add(n)})):(n.scale(e),n.set({left:t/2,top:i/2,originX:"center",originY:"center"}),f.add(n));f.renderAll();r(o.toDataURL("image/png"))})})}function ui(){var t=n.getActiveObject();t&&t.clone(function(t){t.clone(function(i){n.discardActiveObject();i.set({left:i.left+10,top:i.top+10,evented:!0});

1i.type==="activeSelection"?(i.canvas=n,i.forEachObject(function(t){n.add(t)}),i.setCoords()):n.add(i);t.top+=10;t.left+=10;n.setActiveObject(i);n.requestRenderAll()})})}function ki(){n.clear()}function di(){nt.width(t.canvasCrop.width).height(t.canvasCrop.height).css({top:t.canvasCrop.top,left:t.canvasCrop.left});tt.width(t.canvasCrop.width).height(t.canvasCrop.height).css({top:t.canvasCrop.top,left:t.canvasCrop.left});fi()}function fi(){var n=$(window).outerWidth()-320;c.css("left",(n-c.outerWidth())/2+"px")}function gi(){var i=$("body"),r;g=MITM.Utility.createLoadingMask(i,!0);g.addClass("CanvasEditor_Mask");h=$("<div/>").addClass("CanvasEditor_Outer");h.hide();c=$("<div/>").addClass("CanvasEditor_CanvasOuter");ot=$("<div/>").addClass("CanvasEditor_Container");ot.append(c);bt=$("<canvas/>").attr("id","CanvasEditor").addClass("CanvasEditor_Canvas").attr("width",dt.width+"px").attr("height",dt.height+"px");nt=$("<div/>").addClass("CanvasEditor_Border");nt.width(t.canvasCrop.width).height(t.canvasCrop.height).css({top:t.canvasCrop.top,left:t.canvasCrop.left});tt=$("<div/>

1").addClass("CanvasEditor_Background");tt.width(t.canvasCrop.width).height(t.canvasCrop.height).css({top:t.canvasCrop.top,left:t.canvasCrop.left});c.append([bt,tt,nt]);st=$("<div/>").addClass("CanvasEditor_Header p-2");ht=$("<div/>").addClass("CanvasEditor_Toolbar p-2");r=$("<div/>").addClass("CanvasEditor_Toolbar_Child").hide();ct=$("<div/>").addClass("CanvasEditor_Details p-2");h.append([st,ht,r,ot,ct]);i.append(h);tr();nr();ir();fabric.Canvas.prototype.preserveObjectStacking=!0;n=new fabric.Canvas("CanvasEditor")}function nr(){var n,i;$headerTitle=$("<div/>").addClass("CanvasEditor_HeaderTitle").text(t.headerTitle);n=$("<button/>").attr("id","Finish").addClass("CanvasCmd btn btn-primary mr-2").text("Finish");n.off("click").on("click",function(){at(function(n){f&&(f.resolve(n),f=null);ri()})});i=$("<button/>").attr("id","Cancel").addClass("CanvasCmd btn btn-danger").text("Cancel");i.off("click").on("click",function(){window.history.back(-1)});st.append([$headerTitle,$("<div/>").addClass("SaveCmds").append([n,i])])}function tr(){var o=$("<button/>").attr("id","AddText").addClass("CanvasCmd btn btn-primary mr-2").html('<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4h14v2h-5v12h-4V6H5V4z"/><\/svg> Text'),t,r,f,e;o.off("click").on("click",function(){et()});t=$("<input/>").attr("type","file").attr("id","AddImg").attr("accept",".jpg,.jpeg,.png,.gif,.svg,.webp,.bmp").addClass("CanvasCmd").hide();t.off("change").on("change",function(n){wt(n.target.files[0]);$(this).val("")}

1);r=$("<button/>").addClass("CanvasCmd btn btn-primary mr-2").html('<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/><\/svg> Image');r.off("click").on("click",function(){$("#AddImg").click()});f=$("<button/>").attr("id","ShapeBtn").attr("data-toggle","dropdown").addClass("CanvasCmd btn btn-primary dropdown-toggle mr-2").html('<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7 3.5v6.64l-7 3.5-7-3.5V7.68l7-3.5z"/><\/svg> Shape');e=$("<div/>").addClass("btn-group").attr("role","group").append([f,$("<div/>").addClass("dropdown-menu").attr("aria-labelledby","ShapeBtn").append([$("<a/>").addClass("dropdown-item").attr("href","#").attr("id","Tool_Arrow").text("Arrow"),$("<a/>").addClass("dropdown-item").attr("href","#").attr("id","Tool_Circle").text("Circle"),$("<a/>").addClass("dropdown-item").attr("href","#").attr("id","Tool_Polygon").text("Hexagon"),$("<a/>").addClass("dropdown-item").attr("href","#").attr("id","Tool_Line").text("Line"),$("<a/>").addClass("dropdown-item").attr("href","#").attr("id","Tool_Rect").text("Rectangle"),$("<a/>").addClass("dropdown-item").attr("href","#").attr("id","Tool_Star").text("Star"),$("<a/>").addClass("dropdown-item").attr("href","#").attr("id","Tool_Triangle").text("Triangle")])]);f.on("click",function(){u.popover("hide");i.popover("hide")});e.off("click").on("click",".dropdown-item",function(t){n.discardActiveObject();var i=$(t.currentTarget).attr("id");i=="Tool_Arrow"&&new Arrow(n).enable();i=="Tool_Circle"&&new Circle(n).enable();i=="Tool_Line"&&new Line(n).enable();i=="Tool_Polygon"&&new Polygon(n).enable();i=="Tool_Rect"&&new Rectangle(n).enable();i=="Tool_Star"&&new Star(n).enable();i=="Tool_Triangle"&&new Triangle(n).enable();t.preventDefault()});u=$("<button/>").attr("data-toggle","popover").attr("data-placement","bottom").attr("id","Template").addClass("CanvasCmd btn btn-primary mr-2 dropdown-toggle").html('<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/><\/svg> Template');u.popover({html:!0,animation:!0,sanitize:!1,template:'<div class="popover Template_Popover" role="tooltip"><div class="arrow"><\/div><h3 class="popover-header"><\/h3><div class="popover-body"><\/div><\/div>',content:function(){var n=localStorage.getItem("templateIndex"),i,t,r;if(!n||JSON.parse(n).length==0)return'Design a card and then click "Create Template" to store and reuse on other questions';for(i=[],n=JSON.parse(n),t=0;t<n.length;t++)r=localStorage.getItem(n[t]),r&&i.push($("<div/>").addClass("card p-1 m-2").attr("data-template",n[t]).append([$("<img/>").addClass("Template_Img").attr("src",JSON.parse(r).Image),$("<button/>").addClass("Template_Delete btn btn-danger btn-sm").text("Delete")])[0].outerHTML);return i.join("")},title:function(){var n=$("<button/>").attr("id","AddTemplate").addClass("CanvasCmd btn btn-primary").text("Create Template");n.off("click").on("click",function(){at(function(n){var t,i;if(!n.JSON)return MITM.Dialog.alert("Enter some data on the current card to save it as a template");t=localStorage.getItem("templateIndex");t=t?JSON.parse(t):[];i="Template_"+MITM.Core.generateUniqueId();t.push(i);try{localStorage.setItem(i,JSON.stringify(n));localStorage.setItem("templateIndex",JSON.stringify(t))}catch(r){if(r.toString().indexOf("QuotaExceededError")>-1)return MITM.Dialog.alert("It looks like you have run out of template storage space.  Please delete an existing template to make room.  <br/><br/><i>tip: templates with large images take up more space<\/i>");throw r;}u.popover("hide")})});return n}});u.on("show.bs.popover",function(){i.popover("hide")});u.on("shown.bs.popover",function(){$(".Template_Popover").off("click").on("click",function(n){var t=$(n.target),f=t.parent(".card"),i=f.attr("data-template"),r;t.hasClass("Template_Delete")&&MITM.Dialog.confirm("Delete template?",function(){var n,t;localStorage.removeItem(i);n=localStorage.getItem("templateIndex");

1n&&(n=JSON.parse(n),t=n.indexOf(i),t>-1&&(n.splice(t,1),localStorage.setItem("templateIndex",JSON.stringify(n)),f.remove()))});t.hasClass("Template_Img")&&(r=localStorage.getItem(i),r&&lt(JSON.parse(r).JSON),u.popover("hide"))})});i=$("<button/>").attr("data-toggle","popover").attr("data-placement","bottom").attr("id","Snippet").addClass("CanvasCmd btn btn-primary mr-2 dropdown-toggle").html('<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/><\/svg> Snippets');i.popover({html:!0,animation:!0,sanitize:!1,template:'<div class="popover Snippet_Popover" role="tooltip"><div class="arrow"><\/div><h3 class="popover-header"><\/h3><div class="popover-body"><\/div><\/div>',content:function(){var n=localStorage.getItem("snippetIndex"),i,t,r;if(!n||JSON.parse(n).length==0)return'Select an element and click "Save Selection" to store it for reuse';for(i=[],n=JSON.parse(n),t=0;t<n.length;t++)if(r=localStorage.getItem(n[t]),r){var f=JSON.parse(r),u=f.Thumbnail,e=u?$("<img/>").addClass("Snippet_Img").attr("src",u):$("<div/>").text("Snippet "+(t+1)).css("font-weight","bold");i.push($("<div/>").addClass("card p-2 m-2").attr("data-snippet",n[t]).append([e,$("<button/>").addClass("Snippet_Delete btn btn-danger btn-sm").text("Delete")])[0].outerHTML)}return i.join("")},title:function(){var t=$("<button/>").attr("id","AddSnippet").addClass("CanvasCmd btn btn-primary").text("Save Selection");t.off("click").on("click",function(){var t=n.getActiveObject(),r;if(!t)return MITM.Dialog.alert("Please select one element to save");if(t.type==="activeSelection")return MITM.Dialog.alert("Only one element can be saved at a time");r=[t.toJSON()];bi(t,150,100).then(function(n){var t=localStorage.getItem("snippetIndex"),u;t=t?JSON.parse(t):[];u="Snippet_"+MITM.Core.generateUniqueId();t.push(u);try{localStorage.setItem(u,JSON.stringify({Objects:r,Thumbnail:n}));localStorage.setItem("snippetIndex",JSON.stringify(t))}catch(f){if(f.toString().indexOf("QuotaExceededError")>-1)return MITM.Dialog.alert("Storage full. Delete a snippet to make room.");throw f;}i.popover("hide");i.popover("show")})});return t}});i.on("show.bs.popover",function(){u.popover("hide")});$(document).on("click",function(n){var t=$(n.target);t.closest(".popover").length||t.closest("#Template").length||t.closest("#Snippet").length||(u.popover("hide"),i.popover("hide"))});i.on("shown.bs.popover",function(){$(".Snippet_Popover").off("click").on("click",function(t){var e=$(t.target),r=e.closest(".card"),u=r.attr("data-snippet"),f,o,s;e.hasClass("Snippet_Delete")?MITM.Dialog.confirm("Delete snippet?",function(){var n,t;localStorage.removeItem(u);n=localStorage.getItem("snippetIndex");n&&(n=JSON.parse(n),t=n.indexOf(u),t>-1&&(n.splice(t,1),localStorage.setItem("snippetIndex",JSON.stringify(n)),r.remove()))}):r.length&&(f=localStorage.getItem(u),f&&(o=JSON.parse(f),s=o.Objects,n.discardActiveObject(),s.forEach(function(t){fabric.util.enlivenObjects([t],function(t){t.forEach(function(t){n.add(t);n.setActiveObject(t)});n.requestRenderAll()})})),i.popover("hide"))})});ht.append([o,r,e,u,i,t])}function ci(){var n=ai();b.spectrum("set",n.backgroundColor);v.spectrum("set",n.fill);k.spectrum("set",n.stroke);rt.val(n.opacity*100);ut.val(n.strokeWidth);a.val(n.fontFamily);e.val(n.fontSize);it.text(n.fontSize+"px");d.val(n.textAlign)}function ft(n){var t=n.selectionStart,c=n.selectionEnd,r,s,h,u;r=t!==c?t:t>0?t-1:0;var f=n.getSelectionStyles(r,r+1),i=f.length>0?f[0]:{},o=i.fontSize||n.fontSize;e.val(o);it.text(o+"px");s=i.fill||n.fill;v.spectrum("set",s);h=i.fontFamily||n.fontFamily;a.val(h);u=i._scriptType||null;$super.toggleClass("active",u==="super");vt.toggleClass("active",u==="sub")}function ir(){function t(n){return $("<button/>").addClass("mathSymbol btn btn-outline-primary btn-sm").text(n)}var i,u,f,o;b.change(function(){s("backgroundColor",b.val())});v.change(function(){s("fill",v.val())});k.change(function(){s("stroke",k.val())});rt.change(function(){s("opacity",parseInt(rt.val(),10)/100)});ut.change(function(){s("strokeWidth",parseInt(ut.val(),10))});a.change(function(){s("fontFamily",a.val())});e.on("input change",function(){var n=parseInt(e.val()),t=parseInt(e.attr("min")),i=parseInt(e.attr("max"));n<t&&(n=t);n>i&&(n=i);e.val(n);it.text(n+"px");s("fontSize",n)});d.change(function(){s("textAlign",d.val().toLowerCase())});d.append([$("<option/>").attr("value","left").text("Left"),$("<option/>").attr("value","center").text("Center"),$("<option/>").attr("value","right").text("Right")]);ei.off("click").on("click",function(){n.bringForward(n.getActiveObject())});oi.off("click").on("click",function(){n.sendBackwards(n.getActiveObject())});

1si.off("click").on("click",function(){n.bringToFront(n.getActiveObject())});hi.off("click").on("click",function(){n.sendToBack(n.getActiveObject())});$super.off("click").on("click",function(){var t=n.getActiveObject(),r,u,i,f,e;if(t&&t.isEditing){if(r=t.selectionStart,u=t.selectionEnd,r===u)return;for(i=r;i<u;i++)if(f=t.getSelectionStyles(i,i+1),e=f.length>0?f[0]:{},e._scriptType==="super")t.setSelectionStyles({deltaY:0,fontSize:t.fontSize,_scriptType:null,_sizeRatio:null,_baselineRatio:null},i,i+1);else{var h=e.fontSize||t.fontSize,o=Math.round(t.fontSize*.6),s=Math.round(t.fontSize*-.35);t.setSelectionStyles({fontSize:o,deltaY:s,_scriptType:"super",_sizeRatio:.6,_baselineRatio:-.35},i,i+1)}n.requestRenderAll();ft(t)}else t&&(t.setSuperscript(),n.requestRenderAll())});vt.off("click").on("click",function(){var t=n.getActiveObject(),r,u,i,f,e,o,s;if(t&&t.isEditing){if(r=t.selectionStart,u=t.selectionEnd,r===u)return;for(i=r;i<u;i++)f=t.getSelectionStyles(i,i+1),e=f.length>0?f[0]:{},e._scriptType==="sub"?t.setSelectionStyles({deltaY:0,fontSize:t.fontSize,_scriptType:null,_sizeRatio:null,_baselineRatio:null},i,i+1):(o=Math.round(t.fontSize*.6),s=Math.round(t.fontSize*.11),t.setSelectionStyles({fontSize:o,deltaY:s,_scriptType:"sub",_sizeRatio:.6,_baselineRatio:.11},i,i+1));n.requestRenderAll();ft(t)}else t&&(t.setSubscript(),n.requestRenderAll())});i=$("<div/>").addClass("math-symbols-modal").css("display","none").append([$("<div/>").addClass("math-symbols-modal-backdrop"),$("<div/>").addClass("math-symbols-modal-content").append([$("<div/>").addClass("math-symbols-modal-header").append([$("<span/>").text("Insert Math Symbol"),$("<button/>").addClass("math-symbols-modal-close btn btn-sm btn-outline-danger").text("Close")]),$("<div/>").addClass("math-symbols-grid").append([t("÷"),t("×"),t("∗"),t("±"),t("√"),t("<"),t(">"),t("≤"),t("≥"),t("≠"),t("≈"),t("π"),t("°"),t("²"),t("³"),t("∞"),t("⅀"),t("∘"),t("∙"),t("⁄"),t("∠"),t("△"),t("∥"),t("⊥")])])]);$("body").append(i);u=$("<button/>").addClass("btn btn-outline-primary btn-sm").html("Math Symbols π ÷ √");u.on("click",function(){i.show()});i.find(".math-symbols-modal-backdrop, .math-symbols-modal-close").on("click",function(){i.hide()});$("body").on("click",".mathSymbol",function(t){var f=$(t.currentTarget).text(),r=n.getActiveObject(),u,e;r&&r.insertChars&&(u=r.selectionStart,e=r.selectionEnd,r.enterEditing(),r.insertChars(f,null,u,e),r.setSelectionStart(u+f.length),r.setSelectionEnd(u+f.length+1),r.exitEditing(),n.renderAll(),r.enterEditing());i.hide()});f='<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/><\/svg>';o='<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/><\/svg>';w=$("<button/>").addClass("CanvasCmd btn btn-outline-danger btn-sm disabled").html(f+" Delete");w.off("click").on("click",function(){var t=n.getActiveObject();t&&!t.isEditing&&ii(t)});p=$("<button/>").addClass("CanvasCmd btn btn-outline-primary btn-sm disabled").html(o+" Duplicate");p.off("click").on("click",ui);var h=$("<div/>").addClass("btn-group btn-group-sm").append([p,w]),c=$("<div/>").addClass("btn-group btn-group-sm").append([ei,oi,si,hi]),l=$("<div/>").addClass("object-control").css("display","none").append([yt("Object Actions"),r("",h),r("Stack Order",c)]),y=$("<div/>").addClass("colors-row").append([r("Back",b),r("Fill",v),r("Stroke",k)]),g=$("<div/>").addClass("object-control").css("display","none").append([yt("Appearance"),y,r("Opacity",rt),r("Stroke Width",ut)]),nt=$("<div/>").append([e,it]),tt=$("<div/>").addClass("text-only-control").css("display","none").append([yt("Text Options"),r("Font Family",a),r("Font Size",nt),r("Text Align",d),r("Effects",$("<div/>").addClass("btn-group btn-group-sm").append([$super,vt])),r("",u)]),et=$("<div/>").addClass("details-empty-state").append([$("<svg/>").attr({viewBox:"0 0 24 24",width:48,height:48}).addClass("details-empty-icon").append($("<path/>").attr({d:"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",fill:"#6e81a5"})),$("<div/>").addClass("details-empty-title").text("No element selected"),$("

1<div/>").addClass("details-empty-hint").text("Click an element on the canvas to edit its properties, or use the toolbar to add text, images, and shapes.")]);ct.append([et,l,g,tt]);b.spectrum({preferredFormat:"rgb",showAlpha:!0,allowEmpty:!0});v.spectrum({preferredFormat:"rgb",showAlpha:!0,allowEmpty:!0});k.spectrum({preferredFormat:"rgb",showAlpha:!0,allowEmpty:!0})}function r(n,t,i){var r=$("<div/>").addClass("details-group mr-2");return i&&r.addClass(i),r.append($("<div/>").addClass("details-label mr-2").text(n)),t&&r.append(t),r}function yt(n){return $("<div/>").addClass("details-section-header").text(n)}function li(){var t=n.getActiveObject(),i,r;t&&(i=t.type,r=ai(),kt[i]=r)}function rr(n){return kt[n]}function ai(){return props={backgroundColor:o("backgroundColor"),fill:o("fill"),stroke:o("stroke"),opacity:o("opacity"),strokeWidth:o("strokeWidth"),fontFamily:ur(),fontSize:o("fontSize"),textAlign:(o("textAlign").charAt(0).toUpperCase()+o("textAlign").slice(1)).toLowerCase()}}function o(t){var i=n.getActiveObject();return i?i[t]===0?0:i[t]||"":""}function ur(){var i=n.getActiveObject(),t;if(!i||i.type!="textbox")return"";t=[];i.fontFamily&&t.push(i.fontFamily);const r=i.styles;return r&&Object.keys(r).forEach(n=>{Object.keys(r[n]).forEach(i=>{const u=r[n][i];u.fontFamily&&t.push(u.fontFamily)})}),t.length>0?t[t.length-1]:""}function s(t,i){var r=n.getActiveObject(),o,u,s,e,f;if(r){if(r.setChildOption)r.setChildOption(t,i),r.setCoords();else if(r.setSelectionStyles&&r.isEditing){if(r.selectionStart===r.selectionEnd)f=r[t],r.set(t,i),t==="fontSize"&&r.styles&&Object.keys(r.styles).forEach(function(n){Object.keys(r.styles[n]).forEach(function(u){var e=r.styles[n][u];e._scriptType?(e.fontSize=Math.round(i*e._sizeRatio),e.deltaY=Math.round(i*e._baselineRatio)):e.deltaY?(e._sizeRatio=(e.fontSize||f)/(f||1),e._baselineRatio=e.deltaY/(f||1),e._scriptType=e.deltaY<0?"super":"sub",e.fontSize=Math.round(i*e._sizeRatio),e.deltaY=Math.round(i*e._baselineRatio)):delete e[t]})});else if(o={},o[t]=i,t==="fontSize")for(u=r.selectionStart;u<r.selectionEnd;u++)if(s=r.getSelectionStyles(u,u+1),e=s.length>0?s[0]:{},e._scriptType)r.setSelectionStyles({fontSize:Math.round(i*e._sizeRatio),deltaY:Math.round(i*e._baselineRatio)},u,u+1);else if(e.deltaY){var h=r.fontSize,c=(e.fontSize||h)/(h||1),l=e.deltaY/(h||1);r.setSelectionStyles({fontSize:Math.round(i*c),deltaY:Math.round(i*l),_scriptType:e.deltaY<0?"super":"sub",_sizeRatio:c,_baselineRatio:l},u,u+1)}else r.setSelectionStyles({fontSize:i},u,u+1);else r.setSelectionStyles(o);r.setCoords()}else f=r[t],r.set(t,i).setCoords(),t==="fontSize"&&r.styles&&Object.keys(r.styles).forEach(function(n){Object.keys(r.styles[n]).forEach(function(t){var u=r.styles[n][t];u._scriptType?(u.fontSize=Math.round(i*u._sizeRatio),u.deltaY=Math.round(i*u._baselineRatio)):u.deltaY?(u._sizeRatio=(u.fontSize||f)/(f||1),u._baselineRatio=u.deltaY/(f||1),u._scriptType=u.deltaY<0?"super":"sub",u.fontSize=Math.round(i*u._sizeRatio),u.deltaY=Math.round(i*u._baselineRatio)):delete u.fontSize})});n.renderAll()}}function pt(){return{top:t.canvasCrop.height/2+t.canvasCrop.top,left:t.canvasCrop.width/2+t.canvasCrop.left}}function et(t){var i,r;(t===null||t===undefined)&&(t="");i=rr("textbox");i||(i={});i.top=pt().top;i.left=pt().left;i.padding=7;i.originX="center";i.originY="center";i.splitByGrapheme=!1;i.textAlign="center";i.width=gt.width;r=new fabric.Textbox(t,i);n.add(r);r.enterEditing();n.setActiveObject(r);n.renderAll();n.fire("selection:created",{selected:[r]})}function wt(i){if(i){MITM.Dialog.showLoadingScreen();var r=new FileReader;r.onload=function(i){var r=new Image,u={};r.onload=function(){var i=new fabric.Image(r,u),i=i.set({left:0,top:0,angle:0}),e=1,o,f;i.width>t.canvasCrop.width&&(e=t.canvasCrop.width/i.width);i.height>t.canvasCrop.height&&(e=Math.min(e,t.canvasCrop.height/i.height));i.set({scaleX:e,scaleY:e});n.add(i);n.renderAll();r=null;o=i;f=new Image;f.onload=function(){var i=pt(),t=new fabric.Image(f,{left:i.left-f.width/2,top:i.top-f.height/2,selectable:!0});n.remove(o);n.add(t);n.setActiveObject(t);n.renderAll();n.fire("selection:created",{selected:[t]});f=null};f.src=o.toDataURL();MITM.Dialog.hideLoadingScreen()};r.src=i.target.result};

1r.readAsDataURL(i)}}var y={},g=null,nt=null,tt=null,h=null,bt=null,c=null,ot=null,st=null,ht=null,ct=null,f=null,l=!1,n=null,kt={},u=null,i=null,dt={width:1300,height:740},gt={width:667,height:302,top:120,left:300},p=null,w=null,ni=!1,t={canvasCrop:gt,initialText:null,headerTitle:""};y.init=function(){gi();vi()};y.edit_Async=function(n,i){if(f=new $.Deferred,t=$.extend(t,i),ni)lt(n),t.initialText&&(et(t.initialText),t.initialText=null);else{ni=!0;MITM.Dialog.showLoadingScreen();$(window).one("allFontsLoadedEvent",function(){lt(n);t.initialText&&(et(t.initialText),t.initialText=null);$(window).resize();MITM.Dialog.hideLoadingScreen()});var r=document.createElement("script"),u=document.scripts[0];r.src="//ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js";u.parentNode.insertBefore(r,u)}return pi(),di(),f};y.edit_Close=function(){u.popover("hide");i.popover("hide");at(function(n){f&&(f.reject(n),f=null);ri()})};y.isOpen=function(){return l};var b=$("<input/>").attr("type","text").addClass("form-control"),a=$("<select/>").addClass("form-control"),e=$("<input/>").attr("type","range").attr("min",8).attr("max","200").attr("step",1).addClass("form-control-range"),it=$("<span/>").addClass("font-size-label"),v=$("<input/>").attr("type","text").addClass("form-control"),k=$("<input/>").attr("type","text").addClass("form-control"),rt=$("<input/>").attr("type","range").addClass("form-control-range").val(100),ut=$("<input/>").attr("type","range").attr("min",0).attr("max",10).addClass("form-control-range").val(1),d=$("<select/>").addClass("form-control"),ei=$("<input/>").attr("type","button").addClass("btn btn-outline-primary btn-sm").val("^"),oi=$("<input/>").attr("type","button").addClass("btn btn-outline-primary btn-sm").val("v"),si=$("<input/>").attr("type","button").addClass("btn btn-outline-primary btn-sm").val("Front"),hi=$("<input/>").attr("type","button").addClass("btn btn-outline-primary btn-sm").val("Back"),$super=$("<input/>").attr("type","button").addClass("btn btn-outline-primary btn-sm").val("Super"),vt=$("<input/>").attr("type","button").addClass("btn btn-outline-primary btn-sm").val("Sub");return y})