gradient name improvements

src/index.html

@@ -829,6 +829,7 @@
   <script type="text/javascript" src="js/lib/taphold.js"></script>
   <script type="text/javascript" src="js/lib/filesaver.js"></script>
   <script type="text/javascript" src="js/paste.js"></script>
+  <script type="text/javascript" src="js/modals.js"></script>
   <script type="text/javascript" src="js/start.js"></script>
   <!-- endbuild -->
 </body>

src/js/Canvas.js

@@ -151,6 +151,8 @@ MD.Canvas = function(){
     }
   }
 
+  rename(state.get("canvasTitle"));
+
   this.resize = resize;
   this.update = update;
   this.rename = rename;

src/js/modals.js

@@ -0,0 +1,85 @@
+// globals
+const svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"));
+const editor = new MD.Editor();
+const state = new State();
+
+editor.modal = {
+  about: new MD.Modal({
+    html: `
+      <h1>About this application</h1>
+      <p>Method Draw is a simple <a href="https://github.com/methodofaction/Method-Draw">open source</a> vector drawing application. Method Draw was forked from <a href="https://github.com/SVG-Edit/svgedit">SVG-Edit</a> several years ago with the goal of improving and modernizing the interface.</p>
+      <p>At this time (2021), the author (<a href="http://method.ac/writing">Mark MacKay</a>) is working on improving stability and improving the codebase, which contains a lot of legacy practices. The goal is to create a vector editor suitable for simple graphic design tasks.</p>
+      `
+  }),
+  source: new MD.Modal({
+    html: `
+      <div id="svg_source_editor">
+        <div id="svg_source_overlay" class="overlay"></div>
+        <div id="svg_source_container">
+          <form>
+            <textarea id="svg_source_textarea" spellcheck="false"></textarea>
+          </form>
+          <div id="tool_source_back" class="toolbar_button">
+            <button id="tool_source_cancel" class="cancel">Cancel</button>
+            <button id="tool_source_save" class="ok">Apply Changes</button>
+          </div>
+        </div>
+    </div>`,
+    js: function(el){
+      el.children[0].classList.add("modal-item-source");
+      el.querySelector("#tool_source_save").addEventListener("click", function(){
+        var saveChanges = function() {
+          svgCanvas.clearSelection();
+          $('#svg_source_textarea').blur();
+          editor.zoom.multiply(1);
+          editor.rulers.update();
+          editor.paintBox.fill.prep();
+          editor.paintBox.stroke.prep();
+          editor.modal.source.close();
+        }
+
+        if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
+          $.confirm("There were parsing errors in your SVG source.\nRevert back to original SVG source?", function(ok) {
+            if(!ok) return false;
+            saveChanges();
+          });
+        } else {
+          saveChanges();
+        } 
+      })
+      el.querySelector("#tool_source_cancel").addEventListener("click", function(){
+        editor.modal.source.close();
+      });
+    }
+  }),
+  configure: new MD.Modal({
+    html: `
+      <h1>Configuration</h1>
+      <div id="configuration">
+        <button class="warning">Erase all data</button>
+        </div>
+      </div>`,
+    js: function(el){
+      const input = el.querySelector("#configuration button.warning");
+      input.addEventListener("click", function(){
+        state.clean();
+      })
+    }
+  }),
+  donate: new MD.Modal({
+    html: `
+      <h1>Donate</h1>
+      <p>
+        Method Draw relies on your generous donations for continued development.
+        <a href="https://method.ac/donate/">Donate now</a> if you find this application useful.
+      </p>`
+  }),
+  shortcuts: new MD.Modal({
+    html: `
+      <h1>Shortcuts</h1>
+      <div id="shortcuts"></div>`,
+    js: function(el){
+      el.children[0].classList.add("modal-item-wide");
+    }
+  })
+};

src/js/start.js

@@ -1,89 +1,3 @@
-// globals
-const svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"));
-const editor = new MD.Editor();
-const state = new State();
-
-editor.modal = {
-  about: new MD.Modal({
-    html: `
-      <h1>About this application</h1>
-      <p>Method Draw is a simple <a href="https://github.com/methodofaction/Method-Draw">open source</a> vector drawing application. Method Draw was forked from <a href="https://github.com/SVG-Edit/svgedit">SVG-Edit</a> several years ago with the goal of improving and modernizing the interface.</p>
-      <p>At this time (2021), the author (<a href="http://method.ac/writing">Mark MacKay</a>) is working on improving stability and improving the codebase, which contains a lot of legacy practices. The goal is to create a vector editor suitable for simple graphic design tasks.</p>
-      `
-  }),
-  source: new MD.Modal({
-    html: `
-      <div id="svg_source_editor">
-        <div id="svg_source_overlay" class="overlay"></div>
-        <div id="svg_source_container">
-          <form>
-            <textarea id="svg_source_textarea" spellcheck="false"></textarea>
-          </form>
-          <div id="tool_source_back" class="toolbar_button">
-            <button id="tool_source_cancel" class="cancel">Cancel</button>
-            <button id="tool_source_save" class="ok">Apply Changes</button>
-          </div>
-        </div>
-    </div>`,
-    js: function(el){
-      el.children[0].classList.add("modal-item-source");
-      el.querySelector("#tool_source_save").addEventListener("click", function(){
-        var saveChanges = function() {
-          svgCanvas.clearSelection();
-          $('#svg_source_textarea').blur();
-          editor.zoom.multiply(1);
-          editor.rulers.update();
-          editor.paintBox.fill.prep();
-          editor.paintBox.stroke.prep();
-          editor.modal.source.close();
-        }
-
-        if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
-          $.confirm("There were parsing errors in your SVG source.\nRevert back to original SVG source?", function(ok) {
-            if(!ok) return false;
-            saveChanges();
-          });
-        } else {
-          saveChanges();
-        } 
-      })
-      el.querySelector("#tool_source_cancel").addEventListener("click", function(){
-        editor.modal.source.close();
-      });
-    }
-  }),
-  configure: new MD.Modal({
-    html: `
-      <h1>Configuration</h1>
-      <div id="configuration">
-        <button class="warning">Erase all data</button>
-        </div>
-      </div>`,
-    js: function(el){
-      const input = el.querySelector("#configuration button.warning");
-      input.addEventListener("click", function(){
-        state.clean();
-      })
-    }
-  }),
-  donate: new MD.Modal({
-    html: `
-      <h1>Donate</h1>
-      <p>
-        Method Draw relies on your generous donations for continued development.
-        <a href="https://method.ac/donate/">Donate now</a> if you find this application useful.
-      </p>`
-  }),
-  shortcuts: new MD.Modal({
-    html: `
-      <h1>Shortcuts</h1>
-      <div id="shortcuts"></div>`,
-    js: function(el){
-      el.children[0].classList.add("modal-item-wide");
-    }
-  })
-};
-
 editor.keyboard = new MD.Keyboard();
 editor.menu = new MD.Menu();
 editor.toolbar = new MD.Toolbar();