sponsors and loading

readme.md

@@ -1,13 +1,17 @@
 # Method Draw
 
-Method Draw is a web based vector drawing application.
+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).
 
-### [Try Method Draw](https://editor.method.ac) online.
+## 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)
 
-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).
-
 ## Development
 
 Develop and run a local web server under `src`;

src/css/app.css

@@ -9,14 +9,8 @@
 }
 
 #svgcanvas {
-  background-color: var(--z1);
+  background-color: var(--z2);
-  width: 800px;
+  display: block;
-  height: 600px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  background: var(--z2);
 }
 
  #workarea {

src/css/loading.css

@@ -0,0 +1,46 @@
+#workarea > svg {
+  display: none;
+}
+
+.loading #svgcanvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#svgcanvas:after {
+  transition:  opacity var(--transition-duration) 300ms;
+  opacity: 0;
+}
+
+.loading #svgcanvas:after {
+  position: absolute;
+  content: 'Loading';
+  font-size:  13px;
+  font-weight: 600;
+  line-height: var(--x6);
+  padding:  0 var(--x2);
+  background:  var(--z2);
+  color:  var(--z10);
+  z-index: 100;
+  opacity: 1;
+  border-radius: var(--x1);
+}
+
+.loading #workarea > svg {
+  display: block;
+  position: absolute;
+  background:  white;
+  top:  50%;
+  left:  50%;
+  transform:  translate(-50%, -50%);
+}
+
+
+
+

src/css/menu.css

@@ -3,6 +3,7 @@
   position: relative;
   z-index: 2;
   height: var(--x8);
+  display: flex;
 }
 
 #menu_bar.active .menu.open .menu_list {
@@ -122,3 +123,7 @@
 .menu_list .menu_item:not(.disabled):hover span {
   background: var(--d13);
 }
+
+#modal_donate {
+  display: none;
+}

src/css/netlify.toml

@@ -0,0 +1,5 @@
+[build]
+  command = "gulp"
+  publish = "dist/"
+[dev]
+   publish="src/"

src/css/sponsors.css

@@ -0,0 +1,137 @@
+#sponsors {
+  display: none;
+  margin-left: auto;
+  margin-right: calc(var(--panel-width) + var(--x4));
+}
+
+.sponsor a {
+  transition: all 200ms ease;
+  background-color: var(--z3);
+  line-height: var(--x6);
+  margin: var(--x1) 0;
+  border-radius: var(--x1);
+  display: inline-block;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--z14);
+  padding: 0 var(--x2);
+  font-size: 12px;
+  position: relative;
+}
+
+.sponsor a:hover {
+  color: var(--z15);
+  background: var(--d7);
+}
+
+.sponsor .deta {
+  padding-left: var(--x7);
+  position: relative;
+}
+
+.sponsor .deta span {
+  display: block;
+  position: absolute;
+  border-radius: 100%;
+  top: 2px;
+  left: var(--x1);
+  transform: scale(0.6);
+  transition: transform var(--transition-duration) ease;
+}
+
+.sponsors .deta span:nth-child(1) {
+  width: var(--x5);
+  height: var(--x5);
+  background-color: #EF39A8;
+  margin: 0;
+  transition-delay: 0;
+}
+
+.sponsors .deta span:nth-child(2) {
+  width: var(--x4);
+  height: var(--x4);
+  background-color: #BD399C;
+  margin: 2px;
+  transition-delay: 100ms;
+}
+
+.sponsors .deta span:nth-child(3) {
+  width: var(--x3);
+  height: var(--x3);
+  background-color: #93388E;
+  margin: 4px;
+  transition-delay: 200ms;
+}
+
+.sponsors .deta span:nth-child(4) {
+  width: var(--x2);
+  height: var(--x2);
+  background-color:  rgb(96, 48, 162);
+  margin: 6px;
+  transition-delay: 300ms;
+}
+
+.sponsors .deta:hover span {
+  transform: scale(0.9);
+}
+
+.sponsor a:hover {
+  color: var(--z15);
+  background: var(--d7);
+}
+
+.sponsor a:hover + .sponsor-description {
+  opacity: 1;
+  transform: translate(0,0);
+  transform: translate3d(0,0,0);
+}
+
+.sponsor-description {
+  transition: all var(--transition-duration) ease;
+  position: absolute;
+  right: calc(var(--panel-width) + var(--x4));
+  top: var(--x10);
+  width: calc(var(--x16)*4);
+  z-index: 100;
+  background: var(--z15);
+  padding: var(--x6);
+  border-radius: var(--x1);
+  line-height: 150%;
+  box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.2);
+  margin-left: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(0,8px);
+  transform: translate3d(0,8px,0);
+}
+
+.sponsor-description:after {
+  content: '';
+  border: solid transparent var(--x2);
+  border-bottom-color: var(--z15);
+  position: absolute;
+  top: calc(var(--x4)*-1);
+  right: var(--x10);
+}
+
+.sponsor-description p {
+  color: var(--z6);
+}
+
+.sponsor-description strong {
+  display: block;
+  margin-bottom: var(--x2);
+}
+
+.sponsor-logo {
+  display: block;
+  width:  180px;
+  margin:  var(--x4) auto var(--x1);
+}
+
+.sponsor-disclaimer {
+  color: var(--z11);
+  text-align: center;
+  font-size:  0.8em;
+}

src/index.html

@@ -35,9 +35,11 @@
   <link rel="stylesheet" href="css/panel.css" type="text/css"/>
   <link rel="stylesheet" href="css/align_buttons.css" type="text/css"/>
   <link rel="stylesheet" href="css/text.css" type="text/css"/>
+  <link rel="stylesheet" href="css/sponsors.css" type="text/css"/>
+  <link rel="stylesheet" href="css/loading.css" type="text/css"/>
   <!-- endbuild -->
 </head>
-<body>
+<body class="loading">
 
 <div id="method-draw" class="app">
 <div id="rulers">
@@ -48,7 +50,6 @@
 
 <div id="workarea">
 <div id="svgcanvas">
-
 </div>
 </div>
 
@@ -125,6 +126,24 @@
         <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">
+          <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>
 
 <div id="panels" class="tools_panel">
@@ -728,6 +747,7 @@
   <div id="shape_buttons"></div>
 </div>
 
+  <script type="text/javascript" src="js/loading.js"></script>
 <!-- build:js all.js -->
   <script type="text/javascript" src="js/lib/jquery-3.5.1.min.js"></script>
   <script type="text/javascript" src="js/lib/pathseg.js"></script>

src/js/Menu.js

@@ -9,8 +9,10 @@ MD.Menu = function(){
   $('#tool_group').on("click", editor.groupSelected);
   $('#tool_ungroup').on("click", editor.ungroupSelected);
   $('#tool_ungroup').on("click", editor.ungroupSelected);
-  if (window.location.host !== "editor.method.ac")
+  if (window.location.host !== "editor.method.ac") {
-    $('#modal_donate').hide();
+    $('#modal_donate').show();
+    $('#sponsors').show();
+  }
   // top dropdown menus
   $('.menu_title')
     .on('mousedown', function() {

src/js/loading.js

@@ -0,0 +1,9 @@
+(function(){
+  const canvasContent = localStorage.getItem("md-canvasContent");
+  if (!canvasContent) return;
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(canvasContent, "image/svg+xml");
+  const workarea = document.getElementById("workarea")
+  workarea.appendChild(doc.documentElement);
+  const svg = workarea.querySelector("svg");
+})();

src/js/method-draw.js

@@ -898,7 +898,6 @@ window.methodDraw = function() {
     };
     
     var clickSave = function(){
-      console.log("hi")
       flash($('#file_menu'));
       svgCanvas.save();
     };

src/js/start.js

@@ -120,3 +120,4 @@ svgCanvas.setSvgString(state.get("canvasContent"));
 editor.paintBox.fill.setPaint(state.get("canvasFill"));
 editor.paintBox.stroke.setPaint(state.get("canvasStroke"));
 editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
+document.body.classList.remove("loading");

src/js/state.js

@@ -48,7 +48,7 @@ function State(){
     // basic checks
     if (val === undefined || val === null) throw "wont save nuthin, " + key + " " + val;
     const isObject = dao.find(thing => thing.name === key).type === "object";
-    localStorage.setItem("write" + "-" + key, isObject ? JSON.stringify(val) : val.toString());
+    localStorage.setItem("md" + "-" + key, isObject ? JSON.stringify(val) : val.toString());
   }
 
   function _getKey(name) {
@@ -69,7 +69,7 @@ function State(){
   };
 
   function _getValue(key, def) {
-    const item = localStorage.getItem("write-" + key) || def;
+    const item = localStorage.getItem("md-" + key) || def;
     const archetype = dao.find(thing => thing.name === key.split("-")[0]);
     if (archetype) return archetype.clean(item);
     else throw "Unkown archetype";

src/js/svgcanvas.js

@@ -5758,11 +5758,13 @@ this.setSvgString = function(xmlString) {
   try {
     // convert string into XML document
     var newDoc = svgedit.utilities.text2xml(xmlString);
-    this.styleToAttr(newDoc);
     this.prepareSvg(newDoc);
 
     var batchCmd = new BatchCommand("Change Source");
 
+    newDoc = this.styleToAttr(newDoc);
+    
+
     // remove old svg document
     var nextSibling = svgcontent.nextSibling;
     var oldzoom = svgroot.removeChild(svgcontent);