From c9245aa313fed7e2ae2a81411a335d6357fff337 Mon Sep 17 00:00:00 2001
From: Val Erastov <xibyte@gmail.com>
Date: Wed, 17 Feb 2016 23:35:31 -0800
Subject: [PATCH] UI work

---
 web/app/app-init.js        |  9 +++-
 web/app/sketcher/canvas.js |  8 +--
 web/app/sketcher/main2d.js | 22 ++++-----
 web/app/ui.js              | 99 ++++++++++++++++++++++++++++----------
 web/css/app.css            | 21 ++++++--
 web/sketcher.html          | 20 +++-----
 6 files changed, 119 insertions(+), 60 deletions(-)

diff --git a/web/app/app-init.js b/web/app/app-init.js
index 6459197a..4eefad55 100644
--- a/web/app/app-init.js
+++ b/web/app/app-init.js
@@ -76,10 +76,15 @@ function start() {
       app.viewer.parametricManager.refresh();
     }
   });
-  $('.dock-node').append(constrList.ul);
+  app.dock.views['Constraints'].node.append(constrList.ul);
   app.viewer.parametricManager.listeners.push(function() {constrList.refresh()});
   constrList.refresh();
-
+  
+  var layerSelection = $('<span>', {id: 'layerSelection'})
+    .append($('<label>', {for : 'layersList'}).text('Layer: '))
+    .append($('<select>', {id : 'layersList'}));
+  app.dock.views['Properties'].node.append(layerSelection);
+  
   var updateLayersList = function () {
     var options = '';
     for (var i = 0; i < app.viewer.layers.length; i++) {
diff --git a/web/app/sketcher/canvas.js b/web/app/sketcher/canvas.js
index d899e2cf..7211d7b3 100644
--- a/web/app/sketcher/canvas.js
+++ b/web/app/sketcher/canvas.js
@@ -87,12 +87,12 @@ TCAD.TWO.Viewer = function(canvas) {
     canvas.style.height = canvasHeight + "px";
   }
 
-  function onWindowResize() {
+  this.onWindowResize = function() {
     updateCanvasSize();
     viewer.refresh();
-  }
+  };
   updateCanvasSize();
-  window.addEventListener( 'resize', onWindowResize, false );
+  window.addEventListener( 'resize', this.onWindowResize, false );
 
   Object.defineProperty(this, "activeLayer", {
     get: viewer.getActiveLayer ,
@@ -713,7 +713,7 @@ TCAD.TWO.ToolManager = function(viewer, defaultTool) {
   var tm = this;
   canvas.addEventListener('mousemove', function (e) {
     e.preventDefault();
-    e.stopPropagation();
+    //e.stopPropagation(); // allow propagation for move in sake of dynamic layout 
     tm.getTool().mousemove(e);
   }, false);
   canvas.addEventListener('mousedown', function (e) {
diff --git a/web/app/sketcher/main2d.js b/web/app/sketcher/main2d.js
index 22197a05..432ebcf7 100644
--- a/web/app/sketcher/main2d.js
+++ b/web/app/sketcher/main2d.js
@@ -5,6 +5,7 @@ TCAD.App2D = function() {
   var app = this;
 
   this.viewer = new TCAD.TWO.Viewer(document.getElementById('viewer'));
+  this.winManager = new TCAD.ui.WinManager();
 
   this.initSketchManager();
   this._exportWin = new TCAD.ui.Window($('#exportManager'));
@@ -17,9 +18,13 @@ TCAD.App2D = function() {
   //For debug view
   this._actionsOrder = [];
 
-  this.dock = new TCAD.ui.Dock($('#dock'), $('#status'), TCAD.App2D.viewes);
+  var dockEl = $('#dock');
+  this.dock = new TCAD.ui.Dock(dockEl, $('#status'), TCAD.App2D.views);
   this.dock.show('Constraints');
   
+  this.winManager.makeHRResizable(dockEl);
+  $('body').on('layout', this.viewer.onWindowResize);
+  
   this.registerAction = function(id, desc, action) {
     app.actions[id] = {id: id, desc: desc, action: action};
     app._actionsOrder.push(id);
@@ -188,22 +193,14 @@ TCAD.App2D = function() {
   });
 };
 
-TCAD.App2D.viewes = [
-  {
-    name: 'Layers',
-    icon: 'bars'
-  },
-  {
-    name: 'Properties',
-    icon: 'sliders'
-  },
+TCAD.App2D.views = [
   {
     name: 'Dimensions',
     icon: 'arrows-v'
   },
   {
-    name: 'Settings',
-    icon: 'wrench'
+    name: 'Properties',
+    icon: 'sliders'
   },
   {
     name: 'Constraints',
@@ -306,6 +303,7 @@ TCAD.App2D.prototype.initSketchManager = function(data, ext) {
   $('#sketchManager').find('.content').append(sketchesList.ul);
   sketchesList.refresh();
   this._sketchesList = sketchesList;
+  this.winManager.makeHRResizable($('#sketchManager'));
 };
 
 TCAD.App2D.prototype.loadFromLocalStorage = function() {
diff --git a/web/app/ui.js b/web/app/ui.js
index 1d5d2cae..927cd47d 100644
--- a/web/app/ui.js
+++ b/web/app/ui.js
@@ -5,6 +5,10 @@ TCAD.ui = {};
 TCAD.ui.Window = function(el) {
   this.root = el;
   var root = this.root;
+  this.root.find('.tool-caption').each(function() {
+    var closeBtn = '<span class="btn rm" style="float: right;"><i class="fa fa-remove"></i></span>';
+    $(this).append(closeBtn);
+  }); 
   this.root.find('.tool-caption .rm').click(function() {
     root.hide();
   });
@@ -63,6 +67,7 @@ TCAD.ui.List.prototype.refresh = function() {
     li.find('.rm').click(function(e) {
       model.remove(item, index);
       e.stopPropagation();
+      e.preventDefault();
     });
     li.hover(function() {model.hover(item, index)});
     li.mouseleave(function() {model.mouseleave(item, index)});
@@ -79,11 +84,10 @@ TCAD.ui.List.prototype.refresh = function() {
 };
 
 TCAD.ui.Dock = function(dockEl, switcherEl, viewDefinitions) {
-  this.viewes = {};
+  this.views = {};
   this.dockEl = dockEl;
-  this.order = [];
   function bindClick(dock, switchEl, viewName) {
-    switchEl.click(function() {
+    switchEl.click(function(e) {
       if (dock.isVisible(viewName)) {
         dock.hide(viewName);
       } else {
@@ -94,13 +98,14 @@ TCAD.ui.Dock = function(dockEl, switcherEl, viewDefinitions) {
   for (var i = 0; i < viewDefinitions.length; i++) {
     var viewDef = viewDefinitions[i];
     var view = {};
-    this.viewes[viewDef.name] = view;
-    this.order.push(viewDef.name);
+    this.views[viewDef.name] = view;
     view.node = $('<div>', {class: 'dock-node'});
     var caption = $('<div>', {class: 'tool-caption'});
     caption.append($('<span>', {class: 'txt'}).text(viewDef.name.toUpperCase()));
     caption.append(TCAD.App2D.faBtn(viewDef.icon));
     view.node.append(caption);
+    view.node.hide();
+    this.dockEl.append(view.node);
     
     view.switch = $('<span>', {class: 'dock-btn'});
     view.switch.append(TCAD.App2D.faBtn(viewDef.icon));
@@ -111,40 +116,84 @@ TCAD.ui.Dock = function(dockEl, switcherEl, viewDefinitions) {
 };
 
 TCAD.ui.Dock.prototype.show = function(viewName) {
-  var view = this.viewes[viewName];
+  var view = this.views[viewName];
   if (view.switch.hasClass('selected')) {
     return;
   }
-  
-  var addAfter = null; 
-  for (var i = 0; i < this.order.length; i++) {
-    var otherView = this.order[i];
-    if (viewName == otherView) break;
-    if (this.isVisible(otherView)) {
-      addAfter = this.viewes[otherView]
-    }
-  }
-  if (addAfter == null) {
-    this.dockEl.find('.tool-caption .no-top-border').removeClass('no-top-border');
-    this.dockEl.prepend(view.node);
-    view.node.find('.tool-caption').addClass('no-top-border');
-  } else {
-    view.node.insertAfter(addAfter.node);
+  if (!this.dockEl.is(":visible")) {
+    this.dockEl.show();
+    $('body').trigger('layout');
   }
+  view.node.show();
   view.switch.addClass('selected');
 };
 
 TCAD.ui.Dock.prototype.hide = function(viewName) {
-  var view = this.viewes[viewName];
+  var view = this.views[viewName];
   if (!view.switch.hasClass('selected')) {
     return;
   }
-  view.node.detach();
+  view.node.hide();
   view.switch.removeClass('selected');
+  if (this.dockEl.find('.dock-node:visible').length == 0) {
+    this.dockEl.hide();
+    $('body').trigger('layout');
+  } 
 };
 
-
 TCAD.ui.Dock.prototype.isVisible = function(viewName) {
-  return this.viewes[viewName].switch.hasClass('selected');
+  return this.views[viewName].switch.hasClass('selected');
 };
 
+TCAD.ui.WinManager = function() {
+  this.moveHandler = null;
+  var wm = this;
+  $('body').mousemove(function(e) {
+    if (wm.moveHandler != null) {
+      wm.moveHandler(e);
+      e.preventDefault();
+    }  
+  });
+};
+
+TCAD.ui.WinManager.prototype.makeHRResizable = function(el) {
+  var origin = {x : NaN, y : NaN};
+  var originSize = {x : NaN, y : NaN};
+  var wm = this;
+  function onEdge(e, el) {
+    var offset = el.offset();
+    var width = el.width();
+    return e.pageX > offset.left + width;
+  }
+  function mousemove(e) {
+    var dx = e.pageX - origin.x;
+    var dy = e.pageY - origin.y;
+    var newWidth = originSize.x + dx;
+    el.css('width', (newWidth) + 'px');
+    $('body').trigger('layout');
+  }
+  el.mousedown(function(e) {
+    if (!onEdge(e, $(this))) {
+      stopDrag(e);
+      return;
+    }
+    origin.x = e.pageX;
+    origin.y = e.pageY;
+    originSize.x = el.width()
+    wm.moveHandler = mousemove;
+  });
+  var stopDrag = function(e) {
+    origin.x = NaN;
+    origin.y = NaN;
+    wm.moveHandler = null;
+  };
+  
+  el.mouseup(stopDrag);
+  el.mousemove(function(e) {
+    if (onEdge(e, $(this))) {
+      el.css('cursor', 'ew-resize');
+    } else {
+      el.css('cursor', 'inherited');
+    }
+  });
+};
diff --git a/web/css/app.css b/web/css/app.css
index 565c555b..b197d323 100644
--- a/web/css/app.css
+++ b/web/css/app.css
@@ -23,7 +23,7 @@ html, body {
 .b-top { border-top-width: 1px; }
 .b-bot { border-bottom-width: 1px; }
 .b-left { border-left-width: 1px; }
-.b-right { border-right-width: 1px; }
+.b-right { border-right-width: 5px; border-color: #222222 }
 
 .btn:hover {
   background-color: #808080;
@@ -119,9 +119,7 @@ html, body {
 .tool-caption {
   font-weight: bold;
   color: #fff;
-  border-bottom: 1px solid #000;
-  border-top: 1px solid #000;
-  padding: 1px 0 1px 3px;
+  padding: 2px 0 2px 3px;
   background: #333;
 }
 
@@ -187,13 +185,26 @@ html, body {
   left:100px;
   top:300px;
   background: #666;
-  border: 2px solid #ccc;
+  border: 5px solid #444444;
+  box-shadow: 0px 0px 21px 2px rgba(0,0,0,0.75);
 }
 
 .win .content {
   padding: 7px;
 }
 
+.win .tool-caption {
+  cursor: default;
+}
+.win .tool-caption .rm {
+  border: 0;
+  border-radius: 0px;
+  color: white;
+  font-size: 16px;
+  height: 17px;
+  padding-left: 5px;
+}
+
 .sep {
   margin-right: 13px;
 }
diff --git a/web/sketcher.html b/web/sketcher.html
index 26368400..c5107689 100644
--- a/web/sketcher.html
+++ b/web/sketcher.html
@@ -43,10 +43,6 @@
 <body>
   <a id="downloader" style="display: none;" ></a>
   <div class="panel b-bot" style="width: 100%; height: 35px; text-align:right;">
-       <span id="layerSelection">
-         <label for="layersList">Layer: </label>
-         <select id="layersList"></select>
-       </span>
        <span class="logo" style="float:left">sketcher.js <span style="font-size: 10px">(alpha)</span></span>
 
        <button class="btn tbtn act-undo" ><i class="fa fa-arrow-left"></i></button><!--
@@ -74,9 +70,6 @@
   <div style="width: 100%; height: calc(100% - 59px);">
 
     <div id="dock" class="panel b-right scroll" style="float: left; width: 245px; height: 100%;"></div>
-    <div style="background: black; float: left; width: calc(100% - 298px); height: 100%;">
-      <canvas width="300" height="300" id="viewer"></canvas>
-    </div>
     <div id="right-toolbar" class="panel b-left scroll" style="width: 50px; float: right; height: 100%; ">
       <div style="width:50%; height: 2px"></div>  
       <button class="btn rbtn act-coincident" style="background-image: url(img/coi.png);"></button>
@@ -95,26 +88,29 @@
       <button class="btn rbtn act-pointInMiddle" style="background-image: url(img/vec/pointInMiddle.svg);"></button>
       <button class="btn rbtn act-llAngle" style="background-image: url(img/vec/angle.svg);"></button>
     </div>
+    <div style="background: black; overflow: hidden; height: 100%;">
+      <canvas width="300" height="300" id="viewer"></canvas>
+    </div>
   </div>
   
   <div id="status" class="panel b-top" style="width: 100%; height:22px; padding-top: 3px;"><span 
     id='showActions' class="dock-btn"><i class="fa fa-slack"></i></span></div>
 
   <div id="actions" class="scroll win" style="display: none;">
-    <div class="tool-caption" >ACTIONS<div class="rm pseudo-btn" style="float: right;">✘</div></div>
+    <div class="tool-caption" >ACTIONS</div>
     <div class="content">
       <div><input class="btn txt-btn" style="width: 100%;" type="submit" value="$value$"></div>
     </div>
   </div>
 
-  <div id="sketchManager" class="win" style="display: none; min-width: 100px;">
-    <div class="tool-caption" >SKETCHES<div class="rm pseudo-btn" style="float: right;">✘</div></div>
+  <div id="sketchManager" class="win" style="display: none;">
+    <div class="tool-caption" >SKETCHES</div>
     <div class="content panel scroll" style="padding: 0;max-height: 500px;">
     </div>
   </div>
 
   <div id="exportManager" class="scroll win" style="display: none; min-width: 100px;">
-    <div class="tool-caption" >FORMAT<div class="rm pseudo-btn" style="float: right;">✘</div></div>
+    <div class="tool-caption" >FORMAT</div>
     <div class="content panel" style="padding: 0;">
       <ul class="tlist">
         <li class="act-exportSVG">SVG</li>
@@ -122,7 +118,7 @@
       </ul>
     </div>
   </div>
-
+  
   <!--<div id="log" style="position:absolute; width: 500px; height: 300px; top:500px; pxleft:0; overflow: scroll;background-color: salmon;">-->
 </body>
 </html>
\ No newline at end of file