Sketch Manager

web/app/sketcher/main2d.js

@@ -1,6 +1,11 @@
+TCAD.STORAGE_PREFIX = "TCAD.projects.";
+
 TCAD.App2D = function() {
 
   this.viewer = new TCAD.TWO.Viewer(document.getElementById('viewer'));
+
+  this.initSketchManager();
+
   var app = this;
 
   this.actions = {};
@@ -13,6 +18,19 @@ TCAD.App2D = function() {
     app._actionsOrder.push(id);
   };
 
+  this.registerAction('new', "Create New Sketch", function () {
+    app.newSketch();
+  });
+
+  this.registerAction('open', "Open Sketch", function (e) {
+    app._sketchesList.refresh();
+    TCAD.ui.openWin(app._sketchesWin, e);
+  });
+
+  this.registerAction('clone', "Clone Sketch", function () {
+    app.cloneSketch();
+  });
+
   this.registerAction('exportSVG', "Export To SVG", function () {
     app.exportTextData(app.viewer.io.svgExport(), "svg");
   });
@@ -142,6 +160,78 @@ TCAD.App2D = function() {
   });
 };
 
+TCAD.App2D.prototype.cloneSketch = function() {
+  var name = prompt("Name for sketch clone");
+  if (name != null) {
+    if (this.isSketchExists(name)) {
+      alert("Sorry, a sketch with the name '" + name + "' already exists. Won't override it.");
+      return;
+    }
+    localStorage.setItem(TCAD.STORAGE_PREFIX + name, this.viewer.io.serializeSketch())
+    this.openSketch(name);
+  }
+};
+
+TCAD.App2D.prototype.isSketchExists = function(name) {
+  return localStorage.getItem(TCAD.STORAGE_PREFIX + name) != null;
+};
+
+TCAD.App2D.prototype.openSketch = function(name) {
+  var uri = window.location.href.split("#")[0];
+  if (name !== "untitled") {
+    uri += "#" + name;
+  }
+  var win = window.open(uri, '_blank');
+  win.focus();
+};
+
+TCAD.App2D.prototype.newSketch = function() {
+  var name = prompt("Name for sketch");
+  if (name != null) {
+    if (this.isSketchExists(name)) {
+      alert("Sorry, a sketch with the name '" + name + "' already exists. Won't override it.");
+      return;
+    }
+    this.openSketch(name);
+  }
+};
+
+TCAD.App2D.prototype.initSketchManager = function(data, ext) {
+  this._sketchesWin = new TCAD.ui.Window($('#sketchManager'));
+  var app = this;
+  var sketchesList = new TCAD.ui.List($('#sketchList'), {
+    items : function() {
+      var theItems = [];
+      for (var name in localStorage) {
+        if (!localStorage.hasOwnProperty(name)) {
+          continue;
+        }
+        if (name.startsWith(TCAD.STORAGE_PREFIX)) {
+          name = name.substring(TCAD.STORAGE_PREFIX.length);
+        }
+        theItems.push({name : name});
+      }
+      return theItems;
+    },
+
+    remove : function(item) {
+      if (confirm("Selected sketch will be REMOVED! Are you sure?")) {
+        localStorage.removeItem(TCAD.STORAGE_PREFIX + item.name);
+        sketchesList.refresh();
+      }
+    },
+
+    mouseleave : function(item) {},
+    hover : function(item) {},
+
+    click : function(item) {
+      app.openSketch(item.name);
+    }
+  });
+  sketchesList.refresh();
+  this._sketchesList = sketchesList;
+}
+
 TCAD.App2D.prototype.exportTextData = function(data, ext) {
   var link = document.getElementById("downloader");
   link.href = "data:application/octet-stream;charset=utf-8;base64," + btoa(data);
@@ -165,5 +255,5 @@ TCAD.App2D.prototype.getSketchId = function() {
   if (!id) {
     id = "untitled";
   }
-  return "TCAD.projects." + id;
+  return TCAD.STORAGE_PREFIX + id;
 };

web/app/ui.js

@@ -4,7 +4,7 @@ TCAD.ui = {};
 TCAD.ui.Window = function(el) {
   this.root = el;
   var root = this.root;
-  this.root.find('.tool-caption .rm input').click(function() {
+  this.root.find('.tool-caption .rm').click(function() {
     root.hide();
   });
 };
@@ -55,7 +55,10 @@ TCAD.ui.List.prototype.refresh = function() {
   var items = this.model.items();
   var model = this.model;
   function makeCallbacks(li, item, index) {
-    li.find('.ui-rm').click(function() {model.remove(item, index)});
+    li.find('.ui-rm').click(function(e) {
+      model.remove(item, index);
+      e.stopPropagation();
+    });
     li.hover(function() {model.hover(item, index)});
     li.mouseleave(function() {model.mouseleave(item, index)});
     li.click(function() {model.click(item, index)});

web/sketcher.html

@@ -100,7 +100,7 @@
       font-weight: bold;
       color: #fff;
       border-bottom: 1px solid #000;
-      padding: 1px 3px;
+      padding: 0 0 0 3px;
       background: #333;
     }
 
@@ -126,11 +126,12 @@
     }
 
     .tlist .rm {
-      display: none;
+      visibility:hidden;
+      padding-left: 5px;
     }
 
     .tlist li:hover .rm {
-      display: block;
+      visibility:visible;
     }
 
     .scroll {
@@ -177,6 +178,28 @@
       margin-right: 13px;
     }
 
+
+    .pseudo-btn:hover {
+      background-color: #808080;
+    }
+
+    .pseudo-btn {
+      background-color: #606060;
+      color: white;
+      width: 18px; text-align: center;
+      cursor: pointer;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+    .pseudo-btn a {
+      color: white;
+      text-decoration: none;
+    }
+
   </style>
   <link rel="shortcut icon" href="img/tgn.png" />
   <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
@@ -218,6 +241,7 @@
       var app = new TCAD.App2D();
       app.loadFromLocalStorage();
       var actionsWin = new TCAD.ui.Window($('#actions'));
+
       TCAD.ui.bindOpening( $('#showActions'), actionsWin );
       var addAction = TCAD.ui.createActionsWinBuilder(actionsWin);
 
@@ -353,12 +377,21 @@
   </div>
 
   <div id="actions" class="scroll win" style="display: none;">
-    <div class="tool-caption" >ACTIONS<span class="rm" style="float: right; "><input class="btn sbtn" style="" type="submit" value="✘"></span></div>
+    <div class="tool-caption" >ACTIONS<div class="rm pseudo-btn" style="float: right;">✘</div></div>
     <div class="content">
       <div><input class="btn txt-btn" style="width: 100%;" type="submit" value="$value$"></div>
     </div>
   </div>
 
+  <div id="sketchManager" class="scroll win" style="display: none; min-width: 100px;">
+    <div class="tool-caption" >SKETCHES<div class="rm pseudo-btn" style="float: right;">✘</div></div>
+    <div class="content panel" style="padding: 0;">
+      <ul class="tlist" id='sketchList'>
+        <li>$name$<span class="rm" style="float: right;"><input class="btn sbtn ui-rm" style="" type="submit" value="✘"></span></li>
+      </ul>
+    </div>
+  </div>
+
   <!--<div id="log" style="position:absolute; width: 500px; height: 300px; top:500px; pxleft:0; overflow: scroll;background-color: salmon;">-->
 </body>
 </html>