add hswaw shapes

src/index.html

@@ -6,7 +6,7 @@
   <link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
   <meta name="apple-mobile-web-app-capable" content="yes"/>
-  <title>Method Draw Vector Editor</title>
+  <title>HSWAW Method Draw Vector Editor</title>
   <meta charset="utf-8">
   <meta name="description" content="Method Draw is an open source SVG editor for the web, you can use it online without signing up.">
 
@@ -87,8 +87,14 @@
       </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>
+
+  <div class="menu">
+    <div class="menu_title" style="background: pink; color: black; border-radius: 4px;">Print</div>
+    <div class="menu_list inverted-undo" id="print_menu">
+      <div data-action="print_dymo" id="tool_print" class="menu_item">Print on DYMO (small label)</div>
+      <div data-action="print_zebra" id="tool_print" class="menu_item">Print on Zebra (big label)</div>
     </div>
   </div>
 
@@ -154,12 +160,12 @@
 
 
       <label data-title="Change canvas width" class="draginput">
-        <input id="canvas_width" type="text" pattern="[0-9]*" value="600" />
+        <input id="canvas_width" type="text" pattern="[0-9]*" value="1200" />
         <span class="icon_label">Width</span>
       </label>
 
       <label data-title="Change canvas height" class="draginput">
-        <input id="canvas_height" type="text" pattern="[0-9]*" value="400" />
+        <input id="canvas_height" type="text" pattern="[0-9]*" value="800" />
         <span class="icon_label">Height</span>
       </label>
       
@@ -175,7 +181,7 @@
         </div>
       </label>
 
-      <div class="draginput">
+      <div class="draginput" style="outline: 3px solid pink">
         <span>Size</span>
         <select id="resolution">
 
@@ -183,9 +189,9 @@
           <option id="fitToContent" value="content">Fit to Content</option>
 
           <optgroup label="HSWAW">
-            <option value="356x144">Small Label / DYMO (89 × 36mm)</option>
-            <option value="600x400" selected="selected">Large Label Landscape / 4x6 / Zebra (150 × 100mm)</option>
-            <option value="400x600">Large Label Portrait / 4x6 / Zebra (100 × 150mm)</option>
+            <option value="1080x432">Small Label / DYMO (89 × 36mm)</option>
+            <option value="1200x800" selected="selected">Large Label Landscape / 4x6 / Zebra (150 × 100mm)</option>
+            <option value="800x1200">Large Label Portrait / 4x6 / Zebra (100 × 150mm)</option>
           </optgroup>
 
           <optgroup label="Social Media">
@@ -242,7 +248,7 @@
           </optgroup>
         </select>
         <div class="caret"></div>
-        <label id="resolution_label">600x400</label>
+        <label id="resolution_label">Default</label>
       </div>
 
     </div>
@@ -705,9 +711,9 @@
     <option value="12">12%</option>
     <option value="16">16%</option>
     <option value="25">25%</option>
-    <option value="50">50%</option>
+    <option value="50" selected="selected">50%</option>
     <option value="75">75%</option>
-    <option value="100"  selected="selected">100%</option>
+    <option value="100">100%</option>
     <option value="150">150%</option>
     <option value="200">200%</option>
     <option value="300">300%</option>
@@ -721,7 +727,7 @@
       <span  id="zoomLabel" class="zoom_tool icon_label">
         <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="2 2 20 20" width="27"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
       </span>
-      <input id="zoom" value="100%" type="text" readonly="readonly" />
+      <input id="zoom" value="50%" type="text" readonly="readonly" />
     </div>
   </div>
   

src/js/Shapelib.js

@@ -13,6 +13,7 @@ MD.Shapelib = function(){
   
   // This populates the category list
   var categories = {
+    hswaw: 'HSWAW',
     basic: 'Basic',
     object: 'Objects',
     symbol: 'Symbols',

src/js/Zoom.js

@@ -88,9 +88,12 @@ MD.Zoom = function(){
   };
 
   function reset(){
-    multiply(1);
+    multiply(0.5);
   }
 
+  // dunno how to set initial value lol
+  setTimeout(()=>reset(), 0)
+
   this.multiply = multiply;
   this.reset = reset;
   this.changed = changed;

src/js/dao.js

@@ -24,7 +24,7 @@ const dao = [
     name: "canvasSize",
     label: "Canvas Size",
     type: "array",
-    default: [600, 400],
+    default: [1200, 800],
     private: false,
     save: true
   },
@@ -60,10 +60,10 @@ const dao = [
     name: "canvasContent",
     label: "Canvas Content",
     type: "string",
-    default: `<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'>
+    default: `<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'>
       <g>
         <title>Layer 1</title>
-        <text font-weight="normal" font-style="normal" stroke="#000" xml:space="preserve" text-anchor="start" font-family="'Open Sans'" font-size="42" id="svg_1" y="54.90625" x="10" stroke-width="0" fill="#000000">Sample text</text>
+        <text font-weight="normal" font-style="normal" stroke="#000" xml:space="preserve" text-anchor="center" font-family="'Open Sans'" font-size="84" id="svg_1" y="120" x="80" stroke-width="0" fill="#000000">Sample text</text>
       </g>
     </svg>`,
     private: true,

src/js/editor.js

@@ -278,9 +278,9 @@ MD.Editor = function(){
     c.width = svgCanvas.contentW;
     c.height = svgCanvas.contentH;
     canvg(c, data.svg, {renderCallback: function() {
-      if (data.shouldPrint) {
+      if (data.printerName) {
         c.toBlob((blob) => {
-          fetch('/print?printer=zebra', {
+          fetch(`/print?printer=${data.printerName}`, {
             method: 'POST',
             body: blob
           }).then(response => {
@@ -425,22 +425,32 @@ MD.Editor = function(){
   this.saveCanvas = saveCanvas;
   this.loadFromUrl = loadFromUrl;
 
-  this.export = function(shouldPrint = false){
+  this.export = function(printerName = null){
     if(window.canvg) {
-        svgCanvas.rasterExport(shouldPrint);
+        svgCanvas.rasterExport(printerName);
       } else {
         $.getScript('js/lib/rgbcolor.js', function() {
           $.getScript('js/lib/canvg.js', function() {
-            svgCanvas.rasterExport(shouldPrint);
+            svgCanvas.rasterExport(printerName);
           });
         });
       }}
 
 
-  function print() {
-    editor.menu.flash($('#file_menu'));
-    if (!confirm("Do you want to print?")) return;
-    this.export(true)
+  function print(printerName) {
+    if (!confirm(`Do you want to print on ${printerName}?`)) return;
+    this.export(printerName)
   }
   this.print = print
+
+  function print_dymo() {
+    this.print("DYMO")
+  }
+
+  function print_zebra() {
+    this.print("Zebra")
+  }
+
+  this.print_dymo = print_dymo
+  this.print_zebra = print_zebra
 }

src/js/svgcanvas.js

@@ -45,7 +45,7 @@ var svgns = "http://www.w3.org/2000/svg",
 var curConfig = {
   show_outside_canvas: true,
   selectNew: true,
-  dimensions: [600, 400],
+  dimensions: [1200, 800],
   initFill: {color: 'fff', opacity: 1},
   initStroke: {width: 3, color: '000', opacity: 1},
   imgPath: 'images/',
@@ -146,7 +146,7 @@ all_properties.text = $.extend(true, {}, all_properties.shape);
 $.extend(all_properties.text, {
   fill: "#000000",
   stroke_width: 0,
-  font_size: 42,
+  font_size: 84,
   font_family: curConfig.defaultFont
 });
 
@@ -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(shouldPrint) {
+this.rasterExport = function(printerName) {
   // remove the selected outline before serializing
   clearSelection();
   
@@ -5391,7 +5391,7 @@ this.rasterExport = function(shouldPrint) {
   });
 
   var str = this.svgCanvasToString();
-  call("exported", {svg: str, issues: issues, shouldPrint});
+  call("exported", {svg: str, issues: issues, printerName});
 };
 
 // Function: getSvgString