refactor and fix brep debugger action

modules/bus/index.js

@@ -18,7 +18,7 @@ export default class Bus {
     return callback;
   };
 
-  unSubscribe(key, callback) {
+  unsubscribe(key, callback) {
     const listenerList = this.listeners[key];
     for (let i = 0; i < listenerList.length; i++) {
       if (listenerList[i] === callback) {
@@ -51,7 +51,7 @@ export default class Bus {
   }
 
   disconnectFromState(connection) {
-    this.stateConnections.get(connection).forEach(token => this.unSubscribe(token, connection));
+    this.stateConnections.get(connection).forEach(token => this.unsubscribe(token, connection));
     this.stateConnections.delete(connection);
   }
 

modules/bus/store.js

@@ -17,7 +17,7 @@ export class Store {
     return callback;
   };
 
-  unSubscribe(key, callback) {
+  unsubscribe(key, callback) {
     const listenerList = this.listeners[key];
     for (let i = 0; i < listenerList.length; i++) {
       if (listenerList[i] === callback) {

modules/scene/sceneGraph.js

@@ -11,5 +11,14 @@ export function createGroup() {
   return new THREE.Object3D();
 }
 
+export function clearGroup(group) {
+  while (group.children.length) {
+    const o = group.children[0];
+    clearGroup(o);
+    o.material.dispose();
+    o.geometry.dispose();
+    group.remove(o);
+  }
+}
  
 

modules/ui/WindowSystem.jsx

@@ -1,25 +1,38 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class WindowSystem extends React.Component {
 
   constructor() {
     super();
-    this.state = {
-      windows: []
-    }
+    this.moveHandler = null;
+  }
+
+  componentDidMount() {
+    document.body.onmousemove = e => {
+      if (this.moveHandler !== null) {
+        this.moveHandler(e);
+      }
+    };
+  }
+
+  componentWillUnMount() {
   }
 
   render() {
-    return this.state.windows;
+    return this.props.children;
   }
 
-  addWindow(window) {
-    this.setState({windows: [...this.state.windows, window]});    
+  childContext = {
+    setWindowMoveHandler: moveHandler => this.moveHandler = moveHandler
+  };
+  
+  getChildContext() {
+    return this.childContext;
   }
   
-  removeWindow(window) {
-    let windows = [...this.state.windows];
-    windows.splice(windows.indexOf(window), 1);
-    this.setState({windows});
+  static childContextTypes = {
+    setWindowMoveHandler: PropTypes.func
   }
+  
 }

modules/ui/components/Window.jsx

@@ -1,31 +1,38 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import ls from './Window.less'
 import Fa from "./Fa";
+import WindowSystem from '../WindowSystem';
+import cx from 'classnames';
+
 
 export default class Window extends React.Component {
   
-  constructor({initWidth, initLeft, initTop}) {
+  constructor({initWidth, initLeft, initTop, initHeight}) {
     super();
     this.state = {
       width: initWidth,
+      height: initHeight,
       left: initLeft,
       top: initTop
-    }
+    };
+    this.dragOrigin = null;
   }
   
   render() {
-    let {initWidth, initLeft, initTop, setFocus, children, title, minimizable, onClose, ...props} = this.props;
-    return <div className={ls.root} style={this.getStyle()} {...props} ref={this.keepRef}>
-      <div className={ls.bar + ' disable-selection'}>
-        <div><b>{title.toUpperCase()}</b></div>  
+    let {initWidth, initHeight, initLeft, initTop, setFocus, className, 
+      children, title, icon, minimizable, onClose, ...props} = this.props;
+    return <div className={cx(ls.root, className)} style={this.getStyle()} {...props} ref={this.keepRef}>
+      <div className={ls.bar + ' disable-selection'} onMouseDown={this.startDrag} onMouseUp={this.stopDrag}>
+        <div>{icon}<b>{title.toUpperCase()}</b></div>  
         <div className={ls.controlButtons}>
           {minimizable &&  <span className={ls.button}>_</span>}
           <span className={ls.button} onClick={onClose}><Fa fw icon='close' /></span>
+        </div>
       </div>
+      <div className={ls.content}>
+        {children}
       </div>
-      {children}
     </div>
 
   }
@@ -35,8 +42,7 @@ export default class Window extends React.Component {
       width: this.state.width,
       height: this.state.height,
       left: this.state.left,
-      top: this.state.top,
-      zIndex: 1
+      top: this.state.top
     }
   }
   
@@ -48,8 +54,32 @@ export default class Window extends React.Component {
     }
   }
 
+  startDrag = e => {
+    this.dragOrigin = {x : e.pageX, y : e.pageY};
+    this.originLocation = {
+      left: this.state.left,
+      top: this.state.top
+    };
+    this.context.setWindowMoveHandler(this.doDrag);
+  };
+  
+  doDrag = e => {
+    if (this.dragOrigin) {
+      let dx = e.pageX - this.dragOrigin.x;
+      let dy = e.pageY - this.dragOrigin.y;
+      this.setState({left : this.originLocation.left + dx, top : this.originLocation.top + dy});
+    }
+  };
+
+  stopDrag = e => {
+    this.dragOrigin = null;
+    this.context.setWindowMoveHandler(null);
+  };
+
   keepRef = el => this.el = el;
   
+  static contextTypes = WindowSystem.childContextTypes;
+  
 }
 
 Window.defaultProps = {

modules/ui/components/Window.less

@@ -3,7 +3,10 @@
 
 .root {
   position: absolute;
+  z-index: 1;
   background-color: @bg-color-alt;
+  display: flex;
+  flex-direction: column;
 }
 
 .bar {
@@ -22,3 +25,8 @@
   padding: 0.6rem 0.5rem 0.6rem 0.5rem;
   .button-behavior(@color-danger);
 }
+
+.content {
+  overflow-y: auto;
+  flex-grow: 1;
+}

modules/ui/connect.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+export const PROPAGATE_SELF_PROPS = v => v;
+
 export default function connect(WrappedComponent, tokens, config) {
   if (!config) {
     config = DEFAULT_CONFIG;

web/app/brep/debug/debugger/BrepDebuggerWindow.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Window from 'ui/components/Window';
+import BrepDebugger from './brepDebugger';
+import connect, {PROPAGATE_SELF_PROPS} from 'ui/connect';
+import {addToGroup, clearGroup, createGroup, removeFromGroup} from 'scene/sceneGraph';
+import {createToken} from 'bus';
+import Fa from 'ui/components/Fa';
+
+import ls from './BrepDebuggerWindow.less';
+
+export const BREP_DEBUG_WINDOW_VISIBLE = createToken('debug', 'brepDebugWindowVisible')
+
+class BrepDebuggerWindow extends React.Component {
+  
+  componentWillMount() {
+    this.brepDebugGroup = createGroup();
+    addToGroup(this.props.auxGroup, this.brepDebugGroup);
+  }
+  
+  componentWillUnmount() {
+    clearGroup();
+    removeFromGroup(this.props.auxGroup, this.brepDebugGroup);
+  }
+  
+  render() {
+    if (!this.props.visible) {
+      return null;
+    }
+    return <Window initTop={10} initLeft={10} initHeight='95%'
+                   icon={<Fa fw icon='bug'/>}
+                   title='Brep Debugger'
+                   className={ls.root}
+                   onClose={this.props.close}>
+      <BrepDebugger brepDebugGroup={this.brepDebugGroup}/>
+    </Window>;
+  }
+}
+
+export default connect(BrepDebuggerWindow, BREP_DEBUG_WINDOW_VISIBLE, {
+  mapProps: ([visible]) => ({visible}),
+  mapActions: ({dispatch}) => ({
+    close: () => dispatch(BREP_DEBUG_WINDOW_VISIBLE, false)
+  }),
+  mapSelfProps: PROPAGATE_SELF_PROPS
+});

web/app/brep/debug/debugger/BrepDebuggerWindow.less

@@ -0,0 +1,11 @@
+.root {
+  z-index: 998;
+  border: 2px solid rgb(49, 121, 255);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+
+  & :global(.x-Window-content) {
+    font-size: 1.2rem;
+    background: #eee;
+    color: #1a1a1a;
+  }
+}

web/app/brep/debug/debugger/brepDebugger.less

@@ -1,24 +1,3 @@
-:global
-#brep-debugger {
-  font-size: 1.2rem;
-  position: absolute;
-  z-index: 998;
-  left:10px;
-  top:10px;
-  bottom: 20px;
-  overflow: auto;
-  background: #eee;
-  border: 5px solid rgb(49, 121, 255);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-  color: #1a1a1a;
-  & .tool-caption {
-    padding: 0.4rem;
-    background-color: rgb(238, 255, 246);
-    cursor: default;
-    user-select: none
-  }
-}
-
 :global
 .brep-debugger {
 

web/app/cad/debugPlugin.js

@@ -1,18 +1,16 @@
-import {checkForSelectedFaces} from './actions/actionHelpers'
-import {nurbsToThreeGeom, triangulateToThree} from './scene/wrappers/brepSceneObject'
-import {createSolidMaterial} from './scene/wrappers/sceneObject'
-import DPR from 'dpr'
+import {checkForSelectedFaces} from './actions/actionHelpers';
+import {nurbsToThreeGeom, triangulateToThree} from './scene/wrappers/brepSceneObject';
+import {createSolidMaterial} from './scene/wrappers/sceneObject';
+import DPR from 'dpr';
 import Vector from 'math/vector';
-import * as ui from '../ui/ui';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
-import BrepDebugger from './../brep/debug/debugger/brepDebugger';
-import {TOKENS as UI_TOKENS} from "./dom/uiEntryPointsPlugin";
-import {IO} from '../sketcher/io';
+import {TOKENS as UI_TOKENS} from './dom/uiEntryPointsPlugin';
 import {readSketchFloat} from './sketch/sketchReader';
 import {TOKENS as CRAFT_TOKENS} from './craft/craftPlugin';
 import {toLoops} from '../brep/brep-io';
+import {contributeComponent} from './dom/components/ContributedComponents';
+import BrepDebuggerWindow, {BREP_DEBUG_WINDOW_VISIBLE} from '../brep/debug/debugger/BrepDebuggerWindow';
 
 
 export function activate({bus, services}) {
@@ -20,6 +18,8 @@ export function activate({bus, services}) {
   services.action.registerActions(DebugActions);
   services.menu.registerMenus([DebugMenuConfig]);
   bus.updateState(UI_TOKENS.CONTROL_BAR_LEFT, actions => [...actions, 'menu.debug']);
+  bus.enableState(BREP_DEBUG_WINDOW_VISIBLE, false);
+  contributeComponent(<BrepDebuggerWindow key='debug.BrepDebuggerWindow' auxGroup={services.cadScene.auxGroup} />);
 }
 
 function addGlobalDebugActions({viewer, cadScene, cadRegistry}) {
@@ -384,25 +384,8 @@ const DebugActions = [
       label: 'open BREP debugger',
       info: 'open the BREP debugger in a window',
     },
-    invoke: ({services: {cadScene}}) => {
-      // require('../brep/debug/debugger/brepDebugger.less');
-      let debuggerWinDom = document.getElementById('brep-debugger');
-      if (!debuggerWinDom) {
-        //Temporary hack until win infrastructure is done for 3d
-        debuggerWinDom = document.createElement('div');
-        debuggerWinDom.setAttribute('id', 'brep-debugger');
-        debuggerWinDom.innerHTML = '<div class="tool-caption" ><i class="fa fa-fw fa-bug"></i>Brep Debugger</div><div class="content"></div>';
-        document.body.appendChild(debuggerWinDom);
-        debuggerWinDom.debuggerWin = new ui.Window($(debuggerWinDom), new ui.WinManager());
-        let brepDebugGroup = new THREE.Object3D();
-        cadScene.auxGroup.add(brepDebugGroup);
-      
-        ReactDOM.render(
-          <BrepDebugger brepDebugGroup={brepDebugGroup}/>,
-          debuggerWinDom.getElementsByClassName('content')[0]
-        );
-      }
-      debuggerWinDom.debuggerWin.show();
+    invoke: ({bus}) => {
+      bus.dispatch(BREP_DEBUG_WINDOW_VISIBLE, true);
     }
   }
 

web/app/cad/dom/components/ContributedComponents.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+const CONTRIBUTED_COMPONENTS = [];
+
+const mounted = new Set();
+
+export default class ContributedComponents extends React.Component {
+
+
+  componentDidMount() {
+    mounted.add(this);
+  }
+  
+  
+  componentWillUnmount() {
+    mounted.delete(this);
+  }
+
+  render() {
+    return CONTRIBUTED_COMPONENTS;
+  }
+}
+
+
+
+export function contributeComponent(comp) {
+  CONTRIBUTED_COMPONENTS.push(comp);
+  mounted.forEach(c => c.forceUpdate());
+}

web/app/cad/dom/components/UISystem.jsx

@@ -5,6 +5,7 @@ import {TOKENS as MENU_TOKENS} from '../menu/menuPlugin';
 
 import WindowSystem from 'ui/WindowSystem';
 import ActionInfo from '../actionInfo/ActionInfo';
+import ContributedComponents from './ContributedComponents';
 
 export default class UISystem extends React.Component {
   
@@ -12,8 +13,10 @@ export default class UISystem extends React.Component {
     return <div {...this.props} onMouseDown={this.closeAllUpPopups} >
       <MenuHolder />
       <ActionInfo />
-      <WindowSystem />
-      {this.props.children}
+      <WindowSystem>
+        {this.props.children}
+        <ContributedComponents />
+      </WindowSystem>
     </div>
   }
 

web/app/cad/dom/domPlugin.js

@@ -1,8 +1,11 @@
 import {TOKENS as APP_TABS_TOKENS} from "./appTabsPlugin";
+import {contributeComponent} from './components/ContributedComponents';
 
 export function activate({bus, services}) {
+  
   services.dom = {
-    viewerContainer: document.getElementById('viewer-container')
+    viewerContainer: document.getElementById('viewer-container'),
+    contributeComponent
   };
   
   bus.subscribe(APP_TABS_TOKENS.TABS, ({activeTab}) => {

web/app/cad/legacy/mesh/wizards/revolve.js

@@ -145,7 +145,7 @@ RevolveWizard.prototype.createRequest = function(done) {
 };
 
 RevolveWizard.prototype.dispose = function() {
-  this.app.bus.unSubscribe('selection-sketch-object', this.selectionListener);
+  this.app.bus.unsubscribe('selection-sketch-object', this.selectionListener);
   OpWizard.prototype.dispose.call(this);
 };