removing deta sponsorship

fix case for Darkmode filename

readme.md

@@ -2,12 +2,6 @@
 
 Method Draw is a web based vector drawing application. The purpose of Method Draw is to provide a simple and easy-to-use SVG editor experience. It purposely removes some features such as layers and line-caps/corners in exchange for a more simple and pleasant experience. If you are looking for a more complete vector editing open-source solution, please check out [SVG Edit](https://github.com/SVG-Edit/svgedit).
 
-## Online sync and sharing
-
-Cloud sync and sharing are available on Method Draw for Deta.
-
-[<img src="https://method.ac/img/install-on-deta.png" width="200">](https://deta.space/discovery/method-draw?ref=method.ac)
-
 #### [Try Method Draw](https://editor.method.ac) online.
 
 ![Method Draw](https://method.ac/img/method-draw2021.png)
@@ -54,7 +48,7 @@ Deploy `dist` to your static file server of choice.
 **2015.01.01** Project frozen  
 **2013.01.01** Project forked from SVG-Edit  
 
-Sponsor development in the form of [one-time donations](https://method.ac/donate/), or by hiring me to customize Method Draw for your own needs (only simple 2-20 hour projects).
+Sponsor development by [donating to the author](https://method.ac/donate/).
 
 Method Draw is Copyright (c)
 Mark MacKay [mark@method.ac](mailto:mark@method.ac)

src/index.html

@@ -129,23 +129,6 @@
         <div class="menu_item" id="tool_source" data-action="source">Source... <span class="shortcut">⌘U</span></div>
     </div>
   </div>
-
-  <div class="sponsors" id="sponsors">
-    <div class="sponsor">
-      <a href="https://deta.space/discovery/method-draw?ref=method.ac" class="deta">
-        <span></span><span></span><span></span><span></span>
-        Install
-      </a>
-      <div class="sponsor-description inverted-undo">
-          <strong>Install Method Draw on Deta Space</strong>
-          <span>With Method Draw on Deta Space, you can securely save, open, and share your designs in the cloud.</span>
-          <p>These designs are available to you across your devices, over the internet, for free.</p><p> Click the button to try Method Draw on Deta Space!</p>
-          <svg class="sponsor-logo" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 225" preserveAspectRatio="xMidYMid meet"><g clip-path="url(#deta_new_svg__clip0)"><path d="M111.14 0c61.38 0 111.139 49.705 111.139 111.02S172.52 222.04 111.14 222.04C49.759 222.04 0 172.335 0 111.02S49.759 0 111.14 0z" fill="#EF39A8"></path><path d="M111.404 21.676c49.689 0 89.97 40.237 89.97 89.873s-40.281 89.873-89.97 89.873-89.97-40.237-89.97-89.873 40.281-89.873 89.97-89.873z" fill="#BD399C"></path><path d="M111.404 45.465c36.536 0 66.154 29.586 66.154 66.084 0 36.497-29.618 66.083-66.154 66.083S45.25 148.046 45.25 111.549c0-36.498 29.618-66.084 66.154-66.084z" fill="#93388E"></path><path d="M110.874 65.555c24.844 0 44.985 20.119 44.985 44.937 0 24.817-20.141 44.936-44.985 44.936s-44.985-20.119-44.985-44.936c0-24.818 20.141-44.937 44.985-44.937z" fill="#6030A2"></path><path d="M339 170.836h49.915c23.004 0 40.365-5.842 51.867-17.745 11.719-11.902 17.579-25.752 17.579-41.983 0-16.23-5.86-30.296-17.579-42.199-11.502-11.902-28.863-17.745-51.867-17.745H339v119.672zm96.574-59.728c0 11.686-3.907 21.641-11.719 29.864-7.596 8.007-19.315 12.119-34.94 12.119h-27.779V68.909h27.779c15.625 0 27.344 4.112 34.94 12.119 7.812 8.223 11.719 18.178 11.719 30.08zm40.582 10.388c0 30.08 19.098 51.504 52.302 51.504 22.136 0 39.931-10.604 47.744-30.513h-24.523c-5.426 8.44-13.022 12.768-23.221 12.768-16.928 0-27.778-10.82-29.732-27.7h79.212v-6.059c0-29.648-19.966-51.505-50.782-51.505-31.034 0-51 21.208-51 51.505zm78.995-8.224h-56.208c2.388-14.932 11.936-25.535 28.213-25.535 15.843 0 25.608 10.387 27.995 25.535zm73.353 20.992V88.386h24.957v-16.23h-24.957V49h-21.702v23.155h-16.06v16.23h16.06v45.879c0 14.499 3.038 24.237 9.332 29.431 6.293 5.193 15.191 7.79 26.693 7.79 3.69 0 6.944-.216 9.766-.865l4.123-.866v-17.096l-4.123.433c-2.822.433-6.076.649-9.766.649-11.719 0-14.323-6.059-14.323-19.476zm93.101-63.624c-14.54 0-25.825 3.03-33.638 9.306-8.029 6.276-11.936 13.85-11.936 22.723h22.136c0-10.388 11.719-14.283 23.438-14.283 14.757 0 23.872 5.193 23.872 18.827v6.059h-26.693c-26.259 0-46.659 6.709-46.659 28.782 0 20.342 15.625 30.946 38.847 30.946 14.973 0 25.607-3.679 31.901-11.037l3.039-3.678c0 4.111 1.735 10.387 2.386 12.551H770v-1.731l-1.519-4.761c-.868-3.246-1.302-8.223-1.302-15.148v-38.088c0-28.998-16.493-40.468-45.574-40.468zm23.872 57.131c0 19.693-9.982 29.864-28.863 29.864-12.37 0-22.354-4.111-22.354-14.499 0-11.902 10.852-15.365 24.524-15.581l26.693.216z" fill="#000"></path></g><defs><clipPath id="deta_new_svg__clip0"><path fill="#fff" d="M0 0h770v222.04H0z"></path></clipPath></defs></svg>
-          <div class="sponsor-disclaimer">Deta is a sponsor of Method Draw</div>
-
-      </div>
-    </div>
-  </div>
   <div class="menu-right">
   <button class="menu-icon" id="darkmode-button">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M17.66 7.93L12 2.27 6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58c2.05 0 4.1-.78 5.66-2.34 3.12-3.12 3.12-8.19 0-11.31zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"></path></svg>

src/js/PaintBox.js

@@ -78,7 +78,7 @@ MD.PaintBox = function(container, type){
     const elem = selectedElems[0];
     // fill or stroke
     var url = elem.getAttribute(type);
-    if (url.includes("(")) {
+    if (url && url.includes("(")) {
       url = url.split("(")[1].split(")")[0];
     }
     // not a gradient

src/js/Panel.js

@@ -101,7 +101,8 @@ MD.Panel = function(){
 
       const tagName = elem.tagName;
       $("#" + tagName + "_panel").show();
-      $('#stroke_width').val(elem.getAttribute("stroke-width") || 0);
+      const strokeWidth = elem.getAttribute("stroke") && !elem.getAttribute("stroke-width") ? 1 : elem.getAttribute("stroke-width") || 0;
+      $('#stroke_width').val(strokeWidth);
       const dash = elem.getAttribute("stroke-dasharray") || "none"
       $('#stroke_style option').removeAttr('selected');
       $('#stroke_style option[value="'+ dash +'"]').attr("selected", "selected");
@@ -182,6 +183,18 @@ MD.Panel = function(){
  
       if (elem !== null) {
         $("#stroke_panel").show();
+        const strokeWidth = elem.getAttribute("stroke") && !elem.getAttribute("stroke-width") ? 1 : elem.getAttribute("stroke-width") || 0;
+        $('#stroke_width').val(strokeWidth);
+        // stroke style
+        const strokeStyle = elem.getAttribute("stroke-dasharray") || "none";
+        const strokeStyles = {
+          "none": "—",
+          "2,2": "...",
+          "5,5": "- -",
+          "5,2,2,2": "-·-",
+          "5,2,2,2,2,2": "-··-"
+        };
+        $("#stroke_style_label").html(strokeStyles[strokeStyle] || "—");
         var elname = elem.nodeName;
         var angle = svgCanvas.getRotationAngle(elem);
         $('#angle').val(Math.round(angle));

src/js/editor.js

@@ -301,7 +301,6 @@ MD.Editor = function(){
   };
 
   function saveCanvas(){
-    console.log("saved")
     state.set("canvasContent", svgCanvas.getSvgString());
   }
 

src/js/lib/pathseg.js

@@ -6,6 +6,12 @@
 // changes which were implemented in Firefox 43 and Chrome 46.
 
 (function() { "use strict";
+    // The polyfill only applies to browser environments with a `window` object 
+    // (i.e. not node.js, workers, etc.). If included in one of these 
+    // environments (such as when using 'react-dom/server'), simply return out
+    if (typeof window === 'undefined')
+        return;
+
     if (!("SVGPathSeg" in window)) {
         // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg
         window.SVGPathSeg = function(type, typeAsLetter, owningPathSegList) {

src/js/paste.js

@@ -1,4 +1,4 @@
-// window.addEventListener('paste', ... or
+// TODO as is paste is currently not working
 document.onpaste = function(event){
   var items = (event.clipboardData || event.originalEvent.clipboardData).items;
   for (index in items) {
@@ -6,8 +6,7 @@ document.onpaste = function(event){
     if (item.kind === 'file') {
       var blob = item.getAsFile();
       var reader = new FileReader();
-      reader.onload = function(event){
-        console.log(event.target.result)}; // data url!
+      reader.onload = function(event){}; // remove?
       reader.readAsDataURL(blob);
     }
   }

src/js/start.js

@@ -32,7 +32,28 @@ const shapeLib = svgCanvas.addExtension.apply(this, ["shapes", MD.Shapelib]);
 const eyedropper = svgCanvas.addExtension.apply(this, ["eyedropper", MD.Eyedropper]);
 state.set("canvasId", t("Untitled"));
 state.set("canvasMode", state.get("canvasMode"));
-svgCanvas.setSvgString(state.get("canvasContent"));
+
+// load from param
+if (!window.location.search.includes("?load=")) {
+  svgCanvas.setSvgString(state.get("canvasContent"));
+}
+else {
+  
+  const error = function(err) {
+      console.log(err);
+      svgCanvas.setSvgString(state.get("canvasContent"));
+  }
+
+  const url = utils.findGetParameter("load");
+  fetch(url)
+    .then(r => r.text())
+    .then(text => {
+      if (text.includes("Error response")) return error("Error response");
+      svgCanvas.setSvgString(text);
+    })
+    .catch(error);
+}
+
 state.set("canvasTitle", svgCanvas.getDocumentTitle());
 
 //editor.paintBox.fill.setPaint(state.get("canvasFill"));

src/js/svgcanvas.js

@@ -4629,6 +4629,11 @@ var pathActions = canvas.pathActions = function() {
       return svgedit.path.path;
     },
     opencloseSubPath: function() {
+      
+      const isNullish = (val) => {
+        return val === null || val === undefined;
+      };
+
       const path = svgedit.path.path;
       const selPts = path.selected_pts;
       // Only allow one selected node for now
@@ -4663,7 +4668,7 @@ var pathActions = canvas.pathActions = function() {
         return true;
       });
 
-      if (openPt == null) {
+      if (isNullish(openPt)) {
         // Single path, so close last seg
         openPt = path.segs.length - 1;
       }
@@ -4707,7 +4712,6 @@ var pathActions = canvas.pathActions = function() {
       // Find this sub-path's closing point and remove
       for (let i = 0; i < list.numberOfItems; i++) {
         const item = list.getItem(i);
-
         if (item.pathSegType === 2) {
           // Find the preceding M
           lastM = i;
@@ -4723,19 +4727,15 @@ var pathActions = canvas.pathActions = function() {
         }
       }
 
-      let num = (index - lastM) - 1;
-
-      while (num--) {
-        list.insertItemBefore(list.getItem(lastM), zSeg);
-      }
+      //let num = (index - lastM) - 1;
+      //while (num--) {
+      //  list.insertItemBefore(list.getItem(lastM), zSeg);
+      //}
 
       const pt = list.getItem(lastM);
-
+      
       // Make this point the new "M"
       svgedit.path.replacePathSeg(2, lastM, [ pt.x, pt.y ]);
-
-      // i = index; // i is local here, so has no effect; what was the intent for this?
-
       path.init().selectPt(0);
     },
     deletePathNode: function() {
@@ -5927,7 +5927,7 @@ this.setSvgString = function(xmlString) {
     var background = $("#canvas_background")
     if (background.length) {
       var opacity = background.attr("fill-opacity")
-      opacity = opacity ? parseInt(opacity)*100 : 100
+      opacity = opacity ? parseInt(opacity, 10)*100 : 100
       fill = this.getPaint(background.attr("fill"), opacity, "canvas")
       editor.paintBox.canvas.setPaint(fill)
     }
@@ -7213,15 +7213,13 @@ this.setPaintOpacity = function(type, val, preventUndo) {
 // elem - The element to check the blur value for
 this.getBlur = function(elem) {
   var val = 0;
-//    var elem = selectedElements[0];
-  
+
   if(elem) {
     var filter_url = elem.getAttribute('filter');
     if(filter_url) {
-      var blur = getElem(elem.id + '_blur');
-      if(blur) {
-        val = blur.firstChild.getAttribute('stdDeviation');
-      }
+      const selector = filter_url.split("url(#")[1].slice(0, -1);
+      var blur = getElem(selector);
+      if (blur) val = blur.firstChild.getAttribute('stdDeviation');
     }
   }
   return val;