Add Print on Zebra action

src/index.html

@@ -87,6 +87,8 @@
       </div>
       <div data-action="save" id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
       <div data-action="export" id="tool_export" class="menu_item">Export as PNG</div>
+      <div class="separator"></div>
+      <div data-action="print" id="tool_print" class="menu_item">Print on Zebra <span class="shortcut">⌘P</span></div>
     </div>
   </div>
 

src/js/Keyboard.js

@@ -15,6 +15,7 @@ MD.Keyboard = function(){
 "shift_x":   { name: "Switch fill/stroke",  cb: ()=> editor.switchPaint()},  
     "alt":   { name: false,                 cb: ()=> $("#workarea").toggleClass("out", state.get("canvasMode") === "zoom" )},  
     "cmd_s": { name: "Save SVG File",       cb: ()=> editor.save()},
+    "cmd_p": { name: "Print on Zebra",      cb: ()=> editor.print()},
     "cmd_z": { name: "Undo",                cb: ()=> editor.undo()},
     "cmd_y": { name: "Redo",                cb: ()=> editor.redo()},
 "cmd_shift_z": { name: "Redo",              cb: ()=> editor.redo()},

src/js/editor.js

@@ -278,7 +278,23 @@ MD.Editor = function(){
     c.width = svgCanvas.contentW;
     c.height = svgCanvas.contentH;
     canvg(c, data.svg, {renderCallback: function() {
-      var datauri = c.toDataURL('image/png');  
+      if (data.shouldPrint) {
+        c.toBlob((blob) => {
+          fetch('/print?printer=zebra', {
+            method: 'POST',
+            body: blob
+          }).then(response => {
+            if (response.ok) {
+              $.alert("Printed successfully")
+            } else {
+              $.alert("Error printing")
+            }
+          })
+        })
+        return
+      }
+
+      var datauri = c.toDataURL('image/png');
       if (!datauri) return false;
       var filename = "Method Draw Image";
       var type = 'image/png';
@@ -409,14 +425,22 @@ MD.Editor = function(){
   this.saveCanvas = saveCanvas;
   this.loadFromUrl = loadFromUrl;
 
-  this.export = function(){ 
+  this.export = function(shouldPrint = false){
     if(window.canvg) {
-        svgCanvas.rasterExport();
+        svgCanvas.rasterExport(shouldPrint);
       } else {
         $.getScript('js/lib/rgbcolor.js', function() {
           $.getScript('js/lib/canvg.js', function() {
-            svgCanvas.rasterExport();
+            svgCanvas.rasterExport(shouldPrint);
           });
         });
       }}
+
+
+  function print() {
+    editor.menu.flash($('#file_menu'));
+    if (!confirm("Do you want to print?")) return;
+    this.export(true)
+  }
+  this.print = print
 }

src/js/svgcanvas.js

@@ -5364,7 +5364,7 @@ this.save = function() {
 // Function: rasterExport
 // Generates a PNG Data URL based on the current image, then calls "exported" 
 // with an object including the string and any issues found
-this.rasterExport = function() {
+this.rasterExport = function(shouldPrint) {
   // remove the selected outline before serializing
   clearSelection();
   
@@ -5391,7 +5391,7 @@ this.rasterExport = function() {
   });
 
   var str = this.svgCanvasToString();
-  call("exported", {svg: str, issues: issues});
+  call("exported", {svg: str, issues: issues, shouldPrint});
 };
 
 // Function: getSvgString