implementing generic way to extend UI through 'sockets'

modules/ui/components/AuxWidget.jsx

@@ -4,11 +4,15 @@ import cx from 'classnames';
 import ls from './AuxWidget.less';
 import AdjustableAbs from './AdjustableAbs';
 
-export default function AuxWidget({flatTop, flatBottom, flatRight, flatLeft, children, className, ...props}) {
-  return <AdjustableAbs className={cx(ls.root,
-                                      flatTop && ls.flatTop, flatBottom && ls.flatBottom,
-                                      flatRight && ls.flatRight, flatLeft && ls.flatLeft,
-                                      className)} {...props}>
+export default function AuxWidget(props) {
+  return <AuxWidgetLook {...props} Component={AdjustableAbs}/>
+}
+
+export function AuxWidgetLook({flatTop, flatBottom, flatRight, flatLeft, children, className, Component, ...props}) {
+  return <Component className={cx(ls.root,
+    flatTop && ls.flatTop, flatBottom && ls.flatBottom,
+    flatRight && ls.flatRight, flatLeft && ls.flatLeft,
+    className)} {...props}>
     {children}
-  </AdjustableAbs>;
+  </Component>;
 }

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import ls from './HeadsUpHelper.less';
+
+import Socket from './Socket';
+import {AuxWidgetLook} from 'ui/components/AuxWidget';
+
+export default function HeadsUpHelper() {
+  return <AuxWidgetLook Component={Div} className={ls.root} flatTop>
+    <Socket entry='headsUpHelper'/>
+  </AuxWidgetLook>
+}
+
+const Div = props => <div {...props} />;

web/app/cad/dom/components/HeadsUpHelper.less

@@ -0,0 +1,4 @@
+.root {
+  margin: 0 auto;
+  z-index: 100;
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import connect from 'ui/connect';
+import mapContext from 'ui/mapContext';
+import {state} from 'lstream';
+
+@mapContext(ctx => ({
+  getComponent: ctx.services.ui.getComponent
+}))
+@connect((streams, props) => {
+  let stream = streams.ui.sockets[props.entry];
+  if (!stream) {
+    stream= state();
+    streams.ui.sockets[props.entry] = stream;
+  }
+  return stream.map(componentId => ({componentId}));
+})
+export default class Socket extends React.Component {
+  render() {
+    let {getComponent, componentId, ...props} = this.props;
+    if (!componentId) {
+      return null;
+    }
+    let Component = getComponent(componentId);
+    if (!Component) {
+      return null;
+    }
+    return <Component {...props} />;
+  }
+};

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

@@ -11,6 +11,7 @@ import SelectedModificationInfo from '../../craft/ui/SelectedModificationInfo';
 import BottomStack from './BottomStack';
 import SketcherToolbars from './SketcherToolbars';
 import CameraControl from './CameraControl';
+import HeadsUpHelper from './HeadsUpHelper';
 
 
 export default class View3d extends React.Component {
@@ -32,6 +33,7 @@ export default class View3d extends React.Component {
             <AuxiliaryToolbar small vertical/>
           </Abs>
         </Abs>
+        <HeadsUpHelper/>
         <BottomStack>
           <CameraControl />
           <HistoryTimeline />

web/app/cad/dom/uiPlugin.js

@@ -1,6 +1,6 @@
 import {state} from 'lstream';
 
-export function activate({streams}) {
+export function defineStreams({streams}) {
 
   streams.ui = {
     controlBars: {
@@ -15,8 +15,18 @@ export function activate({streams}) {
       sketcherControl: state([]),
       sketcherToolbarsVisible: state(false)
     },
+    sockets: {}
   };
 
 }
 
-
+export function activate({services}) {
+  
+  let components = new Map();
+  const registerComponent = (id, Component) => components.set(id, Component);
+  const getComponent = id => components.get(id);
+  
+  services.ui = {
+    registerComponent, getComponent
+  }
+}

web/app/cad/init/startApplication.js

@@ -6,7 +6,7 @@ import * as MouseEventSystemPlugin from '../scene/controls/mouseEventSystemPlugi
 import * as ScenePlugin from '../scene/scenePlugin';
 import * as SelectionMarkerPlugin from '../scene/selectionMarker/selectionMarkerPlugin';
 import * as ActionSystemPlugin from '../actions/actionSystemPlugin';
-import * as UiEntryPointsPlugin from '../dom/uiEntryPointsPlugin';
+import * as UiPlugin from '../dom/uiPlugin';
 import * as MenuPlugin from '../dom/menu/menuPlugin';
 import * as KeyboardPlugin from '../keyboard/keyboardPlugin';
 import * as WizardPlugin from '../craft/wizard/wizardPlugin';
@@ -39,7 +39,7 @@ export default function startApplication(callback) {
     StoragePlugin,
     AppTabsPlugin,
     ActionSystemPlugin,
-    UiEntryPointsPlugin,
+    UiPlugin,
     MenuPlugin,
     KeyboardPlugin,
     OperationPlugin,