refactor ui for new binding API

web/app/3d/ui/ctrl.js

@@ -11,6 +11,7 @@ import {PlaneWizard} from '../wizards/plane'
 import {BoxWizard} from '../wizards/box'
 import {SphereWizard} from '../wizards/sphere'
 import {TransformWizard} from '../wizards/transform'
+import {ImportWizard} from '../wizards/import'
 import {LoadTemplate} from './utils'
 import {BindArray} from './bind'
 import {SolidList} from './solid-list'
@@ -56,16 +57,6 @@ function UI(app) {
   });
 }
 
-UI.prototype.cutExtrude = function(isCut) {
-  return () => {
-    var selection = this.app.viewer.selectionMgr.selection;
-    if (selection.length == 0) {
-      return;
-    }
-    this.registerWizard(new ExtrudeWizard(this.app, selection[0], isCut), false);
-  }
-};
-
 UI.prototype.createCraftToolBar = function (vertPos) {
   var toolBar = new ToolBar(this.app);
   toolBar.add(this.app.actionManager.actions['EditFace']);
@@ -127,9 +118,14 @@ UI.prototype.fillControlBar = function() {
 UI.prototype.registerWizard = function(wizard, overridingHistory) {
   wizard.ui.box.root.css({left : (this.mainBox.root.width() + this.craftToolBar.node.width() + 30) + 'px', top : 0});
   var craft = this.app.craft; 
-  wizard.apply = function() {
-    craft.modify(wizard.createRequest(), overridingHistory);
+  wizard.onRequestReady = function(request) {
+    if (request.invalidAndShouldBeDropped == true) {
+      alert(request.message);   
+    } else {
+      craft.modify(request, overridingHistory);
+    }
   };
+    
   wizard.focus();
   return wizard;
 };
@@ -144,21 +140,8 @@ UI.prototype.getInfoForOp = function(op) {
 };
 
 UI.prototype.initOperation = function(op) {
-  if ('CUT' === op) {
-    this.cutExtrude(true)();
-  } else if ('PAD' === op) {
-    this.cutExtrude(false)();
-  } else if ('BOX' === op) {
-    this.registerWizard(new BoxWizard(this.app.viewer), false)
-  } else if ('PLANE' === op) {
-    this.registerWizard(new PlaneWizard(this.app.viewer), false)
-  } else if ('SPHERE' === op) {
-    this.registerWizard(new SphereWizard(this.app.viewer), false)
-  } else if ('IMPORT_STL' === op) {
-    alert('men at work');
-  } else {
-    console.log('unknown operation');
-  }
+  var selection = this.app.viewer.selectionMgr.selection;
+  return this.createWizard(op, false, undefined, selection[0]);
 };
 
 UI.prototype.createWizardForOperation = function(op) {
@@ -167,19 +150,29 @@ UI.prototype.createWizardForOperation = function(op) {
   if (face != null) {
     this.app.viewer.selectionMgr.select(face);
   }
-  var wizard;
-  if ('CUT' === op.type) {
+  return this.createWizard(op.type, true, initParams, face);
+};
+
+UI.prototype.createWizard = function(type, overridingHistory, initParams, face) {
+  let wizard = null;
+  if ('CUT' === type) {
     wizard = new ExtrudeWizard(this.app, face, true, initParams);
-  } else if ('PAD' === op.type) {
+  } else if ('PAD' === type) {
     wizard = new ExtrudeWizard(this.app, face, false, initParams);
-  } else if ('PLANE' === op.type) {
+  } else if ('PLANE' === type) {
     wizard = new PlaneWizard(this.app.viewer, initParams);
-  } else if ('BOX' === op.type) {
+  } else if ('BOX' === type) {
     wizard = new BoxWizard(this.app.viewer, initParams);
-  } else if ('SPHERE' === op.type) {
+  } else if ('SPHERE' === type) {
     wizard = new SphereWizard(this.app.viewer, initParams);
+  } else if ('IMPORT_STL' === type) {
+    wizard = new ImportWizard(this.app.viewer, initParams);
+  } else {
+    console.log('unknown operation');
+  }
+  if (wizard != null) {
+    this.registerWizard(wizard, overridingHistory);
   }
-  this.registerWizard(wizard, true);
   return wizard;
 };
 

web/app/3d/ui/input-manager.js

@@ -7,16 +7,19 @@ import {LoadTemplate, DefaultMouseEvent, EventData, fit} from './utils'
 export function InputManager(app) {
   this.app = app;
   this.openMenus = [];
-  this.menuContext = null;
   this.keymap = keymap;
   this.mouseInfo = new DefaultMouseEvent();
   this.requestedActionInfo = null;
   this.actionInfoDom = $(LoadTemplate('action-info')({}));
   this.messageSink = new MessageSink(this);
+  this.context = null;
   $(() => {
     $(document)
       .on('keydown', (e) => this.handleKeyPress(e))
       .on('mousedown', (e) => this.clear(e))
+      .on('click', '.context-click', (e) => this.context = $(e.currentTarget))
+      .on('mouseenter', '.context-hover', (e) => this.context = $(e.currentTarget))
+      .on('mouseleave', '.context-hover', (e) => this.context = null)
       .on('mouseenter', '.action-item', (e) => this.showActionInfo($(e.currentTarget)))
       .on('mouseleave', '.action-item', (e) => this.hideActionInfo())
       .on('mousemove', (e) => this.mouseInfo = e)
@@ -48,7 +51,6 @@ InputManager.prototype.clear = function(e) {
 };
 
 InputManager.prototype.clearMenus = function() {
-  this.menuContext = null;
   if (this.openMenus.length != 0) {
     for (let openMenu of this.openMenus) {
       openMenu.node.hide();
@@ -67,21 +69,19 @@ InputManager.prototype.handleRightClick = function(e) {
 };
 
 InputManager.prototype.handleActionClick = function(event) {
+  this.mouseInfo = event;
   var target = $(event.currentTarget);
   var action = target.data('action');
   if (action != undefined) {
     this.clear();
-    EventData.set(event, 'initiator', this.menuContext ? this.menuContext : target);
+    EventData.set(event, 'initiator', target);
     this.app.actionManager.run(action, event);
   }
 };
 
-InputManager.prototype.registerOpenMenu = function(menu, button) {
+InputManager.prototype.registerOpenMenu = function(menu) {
   fit(menu.node, $('body'));
   this.openMenus.push(menu);
-  if (this.menuContext == null) {
-    this.menuContext = button;
-  }
 };
 
 InputManager.prototype.hideActionInfo = function() {

web/app/3d/ui/modifications-panel.js

@@ -6,7 +6,7 @@ export function ModificationsPanel(app) {
   this.app = app;
   this.dom = $(LoadTemplate('modifications')({}));
   this.buttonsBlock = this.dom.find(".tc-buttons-block");
-  var buttons = this.buttonsBlock.find(".tc-buttons-block-item");
+  var buttons = this.buttonsBlock.find(".tc-block-btn");
   buttons.eq(0).click(() => app.craft.finishHistoryEditing());
   this.buttonsBlock.hide();
   this.historyWizard = null;

web/app/3d/ui/tmpl/modifications.html

@@ -4,6 +4,6 @@
     <div class="tc-row tc-pseudo-btn modification-item" data-bind="info"></div>
   </div>
   <div class="tc-row tc-ctrl tc-buttons-block">
-    <span class="tc-buttons-block-item">Finish History Editing</span>
+    <span class="tc-block-btn active-btn">Finish History Editing</span>
   </div>
 </div>

web/app/3d/ui/tmpl/solid-list.html

@@ -1,8 +1,11 @@
 <div class="tc-list solid-list">
   <div>
-    <div class="tc-row tc-pseudo-btn solid-item" data-bind="id" data-bind-hints="format">Solid %s</div>
+    <div class="tc-row tc-pseudo-btn solid-item action-item context-click" 
+         data-action="menu.SolidContext"
+         data-bind="id, @data-id: id">Solid %s</div>
     <div class="sketch-list" data-bind-list="sketches">
-      <div class="tc-row tc-pseudo-btn sketch-item" data-bind="id" data-bind-hints="format">Sketch %s</div>
+      <div class="tc-row tc-pseudo-btn sketch-item" data-bind="id, @data-id: id" >Sketch %s</div>
     </div>
   </div>
-</div>
+</div>
+