goblin-laboratory 2.2.1 → 2.2.2

package/widgets/laboratory/widget.js

@@ -1,98 +1,98 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import Maintenance from 'goblin-laboratory/widgets/maintenance/widget';
-import DisconnectOverlay from '../disconnect-overlay/widget';
-import ThemeContext from 'goblin-laboratory/widgets/theme-context/widget';
-
-import importer from 'goblin_importer';
-const widgetImporter = importer('widget');
-
-class LaboratoryNC extends Widget {
-  constructor() {
-    super(...arguments);
-  }
-
-  renderContent() {
-    const {status, root, rootId, overlay, message} = this.props;
-    if (status && status !== 'off') {
-      return <Maintenance />;
-    } else {
-      const widgetName = root.split('@')[0];
-      const RootWidget = widgetImporter(widgetName);
-      if (overlay) {
-        return (
-          <DisconnectOverlay message={message}>
-            <RootWidget id={rootId} />
-          </DisconnectOverlay>
-        );
-      } else {
-        return <RootWidget id={rootId} />;
-      }
-    }
-  }
-
-  render() {
-    const {id, root, theme, themeContext, titlebar, titlebarId} = this.props;
-    if (!root) {
-      // Laboratory not loaded
-      return null;
-    }
-    if (titlebar) {
-      const TitlebarWidget = widgetImporter(titlebar);
-      return (
-        <ThemeContext
-          labId={id}
-          currentTheme={theme}
-          themeContext={themeContext}
-        >
-          <TitlebarWidget id={titlebarId}>
-            {this.renderContent()}
-          </TitlebarWidget>
-        </ThemeContext>
-      );
-    } else {
-      return (
-        <ThemeContext
-          labId={id}
-          currentTheme={theme}
-          themeContext={themeContext}
-        >
-          {this.renderContent()}
-        </ThemeContext>
-      );
-    }
-  }
-}
-
-const Laboratory = Widget.connect((state, props) => {
-  const labState = state.get('backend').get(props.id);
-  if (!labState) {
-    return {};
-  }
-
-  let overlay = false;
-  let message = '';
-  const hasOverlay = state.get('network.hasOverlay');
-  if (hasOverlay) {
-    const hordes = state.get('network.hordes');
-    const payload = hordes.find(({overlay}) => overlay);
-    if (payload) {
-      overlay = payload.overlay;
-      message = payload.message;
-    }
-  }
-
-  return {
-    root: labState.get('root'),
-    rootId: labState.get('rootId'),
-    titlebar: labState.get('titlebar'),
-    titlebarId: labState.get('titlebarId'),
-    theme: labState.get('theme'),
-    themeContext: labState.get('themeContext'),
-    status: state.get('backend.workshop.maintenance.status'),
-    overlay,
-    message,
-  };
-})(LaboratoryNC);
-
-export default Laboratory;
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import Maintenance from 'goblin-laboratory/widgets/maintenance/widget';
+import DisconnectOverlay from '../disconnect-overlay/widget';
+import ThemeContext from 'goblin-laboratory/widgets/theme-context/widget';
+
+import importer from 'goblin_importer';
+const widgetImporter = importer('widget');
+
+class LaboratoryNC extends Widget {
+  constructor() {
+    super(...arguments);
+  }
+
+  renderContent() {
+    const {status, root, rootId, overlay, message} = this.props;
+    if (status && status !== 'off') {
+      return <Maintenance />;
+    } else {
+      const widgetName = root.split('@')[0];
+      const RootWidget = widgetImporter(widgetName);
+      if (overlay) {
+        return (
+          <DisconnectOverlay message={message}>
+            <RootWidget id={rootId} />
+          </DisconnectOverlay>
+        );
+      } else {
+        return <RootWidget id={rootId} />;
+      }
+    }
+  }
+
+  render() {
+    const {id, root, theme, themeContext, titlebar, titlebarId} = this.props;
+    if (!root) {
+      // Laboratory not loaded
+      return null;
+    }
+    if (titlebar) {
+      const TitlebarWidget = widgetImporter(titlebar);
+      return (
+        <ThemeContext
+          labId={id}
+          currentTheme={theme}
+          themeContext={themeContext}
+        >
+          <TitlebarWidget id={titlebarId}>
+            {this.renderContent()}
+          </TitlebarWidget>
+        </ThemeContext>
+      );
+    } else {
+      return (
+        <ThemeContext
+          labId={id}
+          currentTheme={theme}
+          themeContext={themeContext}
+        >
+          {this.renderContent()}
+        </ThemeContext>
+      );
+    }
+  }
+}
+
+const Laboratory = Widget.connect((state, props) => {
+  const labState = state.get('backend').get(props.id);
+  if (!labState) {
+    return {};
+  }
+
+  let overlay = false;
+  let message = '';
+  const hasOverlay = state.get('network.hasOverlay');
+  if (hasOverlay) {
+    const hordes = state.get('network.hordes');
+    const payload = hordes.find(({overlay}) => overlay);
+    if (payload) {
+      overlay = payload.overlay;
+      message = payload.message;
+    }
+  }
+
+  return {
+    root: labState.get('root'),
+    rootId: labState.get('rootId'),
+    titlebar: labState.get('titlebar'),
+    titlebarId: labState.get('titlebarId'),
+    theme: labState.get('theme'),
+    themeContext: labState.get('themeContext'),
+    status: state.get('backend.workshop.maintenance.status'),
+    overlay,
+    message,
+  };
+})(LaboratoryNC);
+
+export default Laboratory;

package/widgets/maintenance/styles.js

@@ -1,38 +1,38 @@
-//T:2019-02-27
-
-export const propNames = ['zIndex'];
-
-export default function styles(theme, props) {
-  const {zIndex} = props;
-
-  const fullScreenStyle = {
-    visibility: 'visible',
-    position: 'fixed',
-    zIndex: zIndex || 10,
-    top: '0px',
-    left: '0px',
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    userSelect: 'none',
-    cursor: 'default',
-    backgroundColor: theme.palette.flyingDialogFullScreenBackground,
-  };
-
-  const gaugeStyle = {
-    display: 'flex',
-    width: '300px',
-    height: '10px',
-    transform: 'scale(2)',
-  };
-
-  return {
-    fullScreen: fullScreenStyle,
-    gauge: gaugeStyle,
-  };
-}
-
-/******************************************************************************/
+//T:2019-02-27
+
+export const propNames = ['zIndex'];
+
+export default function styles(theme, props) {
+  const {zIndex} = props;
+
+  const fullScreenStyle = {
+    visibility: 'visible',
+    position: 'fixed',
+    zIndex: zIndex || 10,
+    top: '0px',
+    left: '0px',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    userSelect: 'none',
+    cursor: 'default',
+    backgroundColor: theme.palette.flyingDialogFullScreenBackground,
+  };
+
+  const gaugeStyle = {
+    display: 'flex',
+    width: '300px',
+    height: '10px',
+    transform: 'scale(2)',
+  };
+
+  return {
+    fullScreen: fullScreenStyle,
+    gauge: gaugeStyle,
+  };
+}
+
+/******************************************************************************/

package/widgets/maintenance/widget.js

@@ -1,65 +1,65 @@
-//T:2019-02-27
-
-import React from 'react';
-
-import Widget from 'goblin-laboratory/widgets/widget';
-import Label from 'goblin-gadgets/widgets/label/widget';
-import Gauge from 'goblin-gadgets/widgets/gauge/widget';
-
-class Maintenance extends Widget {
-  constructor() {
-    super(...arguments);
-  }
-
-  static get wiring() {
-    return {
-      id: 'id',
-      status: 'maintenance.status',
-      progress: 'maintenance.progress',
-      message: 'maintenance.message',
-    };
-  }
-
-  render() {
-    const {id, status, progress, message} = this.props;
-
-    if (!id) {
-      return null;
-    }
-
-    const fullScreenClass = this.styles.classNames.fullScreen;
-    const gaugeClass = this.styles.classNames.gauge;
-
-    return (
-      <div className={fullScreenClass}>
-        <Label
-          height="350px"
-          justify="center"
-          kind="footer"
-          glyphPosition="center"
-          glyph="solid/lock-alt"
-          glyphSize="1000%"
-        />
-        <div className={gaugeClass}>
-          <Gauge
-            kind="rounded"
-            gradient="red-yellow-green"
-            width="300px"
-            height="10px"
-            direction="horizontal"
-            value={progress * 100}
-          />
-        </div>
-        <Label
-          height="200px"
-          justify="center"
-          kind="footer"
-          fontSize="300%"
-          text={message}
-        />
-      </div>
-    );
-  }
-}
-
-export default Widget.Wired(Maintenance)('workshop');
+//T:2019-02-27
+
+import React from 'react';
+
+import Widget from 'goblin-laboratory/widgets/widget';
+import Label from 'goblin-gadgets/widgets/label/widget';
+import Gauge from 'goblin-gadgets/widgets/gauge/widget';
+
+class Maintenance extends Widget {
+  constructor() {
+    super(...arguments);
+  }
+
+  static get wiring() {
+    return {
+      id: 'id',
+      status: 'maintenance.status',
+      progress: 'maintenance.progress',
+      message: 'maintenance.message',
+    };
+  }
+
+  render() {
+    const {id, status, progress, message} = this.props;
+
+    if (!id) {
+      return null;
+    }
+
+    const fullScreenClass = this.styles.classNames.fullScreen;
+    const gaugeClass = this.styles.classNames.gauge;
+
+    return (
+      <div className={fullScreenClass}>
+        <Label
+          height="350px"
+          justify="center"
+          kind="footer"
+          glyphPosition="center"
+          glyph="solid/lock-alt"
+          glyphSize="1000%"
+        />
+        <div className={gaugeClass}>
+          <Gauge
+            kind="rounded"
+            gradient="red-yellow-green"
+            width="300px"
+            height="10px"
+            direction="horizontal"
+            value={progress * 100}
+          />
+        </div>
+        <Label
+          height="200px"
+          justify="center"
+          kind="footer"
+          fontSize="300%"
+          text={message}
+        />
+      </div>
+    );
+  }
+}
+
+export default Widget.Wired(Maintenance)('workshop');

package/widgets/props-binder/widget.js

@@ -1,48 +1,48 @@
-import Widget from 'goblin-laboratory/widgets/widget';
-import React from 'react';
-
-export default (Component) => {
-  const ConnectedComponent = Widget.connect(
-    (state, props) => {
-      const {model, ...otherProps} = props;
-      return Object.entries(otherProps).reduce((properties, [key, path]) => {
-        if (key === 'value') {
-          return properties;
-        }
-
-        //do binding
-        if (path.startsWith('.')) {
-          path = `${model}${path}`;
-          properties[key] = state.get(path);
-          return properties;
-        } else if (path.startsWith('state.')) {
-          path = `${path.substring(2)}`;
-          properties[key] = state.get(path);
-          return properties;
-        }
-
-        return properties;
-      }, {});
-    },
-    () => ({}) // Do not add "dispatch" to the props
-  )(Component);
-
-  return class PropsBinder extends Widget {
-    constructor() {
-      super(...arguments);
-
-      if (this.context.register) {
-        this.context.register(this.props);
-      }
-    }
-
-    render() {
-      return (
-        <ConnectedComponent
-          {...this.props}
-          model={this.props.model || this.context.model}
-        />
-      );
-    }
-  };
-};
+import Widget from 'goblin-laboratory/widgets/widget';
+import React from 'react';
+
+export default (Component) => {
+  const ConnectedComponent = Widget.connect(
+    (state, props) => {
+      const {model, ...otherProps} = props;
+      return Object.entries(otherProps).reduce((properties, [key, path]) => {
+        if (key === 'value') {
+          return properties;
+        }
+
+        //do binding
+        if (path.startsWith('.')) {
+          path = `${model}${path}`;
+          properties[key] = state.get(path);
+          return properties;
+        } else if (path.startsWith('state.')) {
+          path = `${path.substring(2)}`;
+          properties[key] = state.get(path);
+          return properties;
+        }
+
+        return properties;
+      }, {});
+    },
+    () => ({}) // Do not add "dispatch" to the props
+  )(Component);
+
+  return class PropsBinder extends Widget {
+    constructor() {
+      super(...arguments);
+
+      if (this.context.register) {
+        this.context.register(this.props);
+      }
+    }
+
+    render() {
+      return (
+        <ConnectedComponent
+          {...this.props}
+          model={this.props.model || this.context.model}
+        />
+      );
+    }
+  };
+};

package/widgets/renderer.js

@@ -1,85 +1,85 @@
-if (process.env.NODE_ENV === 'development') {
-  require('./devtools.js');
-}
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Root from 'goblin-laboratory/widgets/root';
-import {createHashHistory} from 'history';
-import {push} from 'connected-react-router/immutable';
-import configureStore from 'goblin-laboratory/widgets/store/store';
-
-class Renderer {
-  constructor(send, options = {}) {
-    this.send = send;
-    this.push = push;
-    this.options = options;
-
-    this.history = undefined;
-    if (this.options.useRouter !== false) {
-      this.history = createHashHistory();
-    }
-
-    this._store = configureStore(
-      window.__INITIAL_STATE__,
-      this.history,
-      this.send
-    );
-
-    document.addEventListener('drop', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      const filePaths = [];
-      for (const file of e.dataTransfer.files) {
-        filePaths.push(file.path);
-      }
-
-      if (filePaths.length) {
-        send('DATA_TRANSFER', {filePaths});
-      }
-    });
-
-    document.addEventListener('dragover', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      e.dataTransfer.dropEffect = 'copy';
-    });
-  }
-
-  get store() {
-    return this._store;
-  }
-
-  newBackendState(transitState) {
-    this.store.dispatch({
-      type: 'NEW_BACKEND_STATE',
-      data: transitState,
-      renderer: this,
-    });
-  }
-
-  main(labId) {
-    //PUT LABID IN WINDOW STATE
-    //USEFULL IN SOME CONNECT()
-    window.labId = labId;
-
-    const rootElement = document.getElementById('root');
-    const isHydratable = rootElement.hasAttribute('data-hydratable');
-    let render = ReactDOM.render;
-    if (isHydratable) {
-      render = ReactDOM.hydrate;
-    }
-    render(
-      <Root
-        store={this.store}
-        labId={labId}
-        useRouter={this.options.useRouter !== false}
-        history={this.history}
-      />,
-      rootElement
-    );
-  }
-}
-
-export default Renderer;
+if (process.env.NODE_ENV === 'development') {
+  require('./devtools.js');
+}
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Root from 'goblin-laboratory/widgets/root';
+import {createHashHistory} from 'history';
+import {push} from 'connected-react-router/immutable';
+import configureStore from 'goblin-laboratory/widgets/store/store';
+
+class Renderer {
+  constructor(send, options = {}) {
+    this.send = send;
+    this.push = push;
+    this.options = options;
+
+    this.history = undefined;
+    if (this.options.useRouter !== false) {
+      this.history = createHashHistory();
+    }
+
+    this._store = configureStore(
+      window.__INITIAL_STATE__,
+      this.history,
+      this.send
+    );
+
+    document.addEventListener('drop', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const filePaths = [];
+      for (const file of e.dataTransfer.files) {
+        filePaths.push(file.path);
+      }
+
+      if (filePaths.length) {
+        send('DATA_TRANSFER', {filePaths});
+      }
+    });
+
+    document.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.dropEffect = 'copy';
+    });
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  newBackendState(transitState) {
+    this.store.dispatch({
+      type: 'NEW_BACKEND_STATE',
+      data: transitState,
+      renderer: this,
+    });
+  }
+
+  main(labId) {
+    //PUT LABID IN WINDOW STATE
+    //USEFULL IN SOME CONNECT()
+    window.labId = labId;
+
+    const rootElement = document.getElementById('root');
+    const isHydratable = rootElement.hasAttribute('data-hydratable');
+    let render = ReactDOM.render;
+    if (isHydratable) {
+      render = ReactDOM.hydrate;
+    }
+    render(
+      <Root
+        store={this.store}
+        labId={labId}
+        useRouter={this.options.useRouter !== false}
+        history={this.history}
+      />,
+      rootElement
+    );
+  }
+}
+
+export default Renderer;