goblin-gadgets 4.0.17 → 4.0.23

package/eslint.config.js

@@ -15,7 +15,10 @@ module.exports = [
     languageOptions: {
       parser: babelParser,
       parserOptions: {
-        requireConfigFile: false,
+        requireConfigFile: false, // Évite de devoir spécifier un fichier de configuration Babel
+        babelOptions: {
+          presets: ['@babel/preset-react'],
+        },
         ecmaFeatures: {
           jsx: true,
         },
@@ -36,7 +39,7 @@ module.exports = [
       'eqeqeq': 'error',
       'no-console': 'off',
       'react/display-name': 'off',
-      '@babel/no-unused-expressions': 'error',
+      '@babel/no-unused-expressions': 'error', // Utilisation de règles spécifiques à Babel
       'no-unused-vars': [
         'error',
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goblin-gadgets",
-  "version": "4.0.17",
+  "version": "4.0.23",
   "description": "Gadgets library",
   "main": "./builders/builders.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "goblin-theme": "^2.0.0",
     "goblin-laboratory": "^4.0.0",
     "leaflet": "1.2.0",
-    "mocha": "^5.2.0",
+    "mocha": "^10.7.3",
     "monaco-editor": "^0.31.1",
     "mousetrap": "^1.6.1",
     "prettier": "2.0.4",
@@ -44,7 +44,7 @@
     "scroll-into-view-if-needed": "^1.4.0",
     "xcraft-core-shredder": "^5.0.0",
     "xcraft-dev-prettier": "^2.0.0",
-    "xcraft-dev-rules": "^4.4.0"
+    "xcraft-dev-rules": "^4.4.2"
   },
   "prettier": "xcraft-dev-prettier"
 }

package/popup-dispatcher.js

@@ -0,0 +1,13 @@
+'use strict';
+
+/**
+ * Retrieve the list of available commands.
+ *
+ * @returns {Object} The list and definitions of commands.
+ */
+exports.xcraftCommands = function () {
+  return require(`./widgets/${require('path').basename(
+    __filename,
+    '.js'
+  )}/service.js`);
+};

package/widgets/label-text-field/widget.js

@@ -74,7 +74,6 @@ class LabelTextField extends Widget {
         width={this.props.labelWidth}
         disabled={this.props.disabled}
         wrap="no"
-        justify="left"
       />
     );
   }

package/widgets/popup-container/styles.js

@@ -0,0 +1,248 @@
+import {Unit} from 'goblin-theme';
+const px = Unit.toPx;
+const n = Unit.toValue;
+
+/******************************************************************************/
+
+export const propNames = [
+  'visibility',
+  'size',
+  'origin',
+  'attach',
+  'width',
+  'height',
+  'heightStrategy',
+  'marginTopBottom',
+  'attachPoint',
+  'transitionScope',
+  'triangle',
+  'triangleSize',
+  'screenBackground',
+];
+
+export default function styles(theme, props) {
+  const {
+    visibility,
+    size,
+    origin,
+    attach,
+    width,
+    height,
+    heightStrategy,
+    marginTopBottom,
+    attachPoint,
+    transitionScope = 'all',
+    triangle,
+    triangleSize = '16px',
+    screenBackground = 'rgba(255,255,255,0.8)',
+  } = props;
+
+  const showed = visibility === 'show';
+  const full = size === 'fullscreen';
+  const fitToContent = heightStrategy === 'fit-to-content';
+
+  let left = '0px';
+  let right = '0px';
+  let top = '0px';
+  let bottom = fitToContent ? null : '0px';
+
+  let marginLeft = 'calc(50% - 600px + 50px)';
+  let marginRight = 'calc(50% - 600px + 50px)';
+  let marginTop = '100px';
+  let marginBottom = '100px';
+  let maxHeight = fitToContent ? 'calc(100% - 200px)' : null;
+
+  if (width) {
+    const w = n(width);
+    marginLeft = `calc(50% - ${px(w / 2)})`;
+    marginRight = `calc(50% - ${px(w / 2)})`;
+  }
+
+  if (width && attach && attach.includes('left')) {
+    left = 'calc(50% - 600px + 100px)';
+    right = null;
+    marginLeft = null;
+    marginRight = null;
+  }
+
+  if (width && attach && attach.includes('right')) {
+    left = null;
+    right = 'calc(50% - 600px + 100px)';
+    marginLeft = null;
+    marginRight = null;
+  }
+
+  if (height && attach && attach.includes('top')) {
+    bottom = null;
+    marginTop = '100px';
+    marginBottom = null;
+  }
+
+  if (height && attach && attach.includes('bottom')) {
+    top = null;
+    marginBottom = '100px';
+    marginTop = null;
+  }
+
+  if (height && !attach) {
+    const h = n(height);
+    top = '50%';
+    bottom = '50%';
+    marginTop = px(-h / 2);
+    marginBottom = null;
+  }
+
+  if (marginTopBottom) {
+    marginTop = marginTopBottom;
+    marginBottom = marginTopBottom;
+  }
+
+  if (attachPoint) {
+    // Compute the attach point without overflow managment.
+    const al = px(attachPoint.x - n(width) / 2);
+    // Manages the overflow on the right.
+    const x = `min(${al}, 100vw - ${width} - 10px)`;
+    // Manages the overflow on the left.
+    const ml = `max(${x}, 10px)`;
+
+    // Cases where the popup goes out of the window are not handled.
+    switch (triangle) {
+      case 'bottom':
+        marginLeft = ml;
+        marginRight = null;
+        marginTop = px(attachPoint.y - n(height) - n(triangleSize));
+        marginBottom = null;
+        break;
+      case 'top':
+        marginLeft = ml;
+        marginRight = null;
+        marginTop = px(attachPoint.y + n(triangleSize));
+        marginBottom = null;
+        break;
+      case 'left':
+        marginLeft = px(attachPoint.x + n(triangleSize));
+        marginRight = null;
+        marginTop = px(attachPoint.y - n(height) / 2);
+        marginBottom = null;
+        break;
+      case 'right':
+        marginLeft = px(attachPoint.x - n(width) - n(triangleSize));
+        marginRight = null;
+        marginTop = px(attachPoint.y - n(height) / 2);
+        marginBottom = null;
+        break;
+      default:
+        console.error(
+          `popupContainer: triangle position '${triangle}' not supported`
+        );
+    }
+  }
+
+  if (full) {
+    marginLeft = null;
+    marginRight = null;
+    marginTop = null;
+    marginBottom = null;
+  }
+
+  const popupContainer = {
+    position: 'absolute',
+    inset: '0',
+    overflow: 'hidden',
+    backgroundColor: showed ? screenBackground : null,
+    transition: theme.transitions.openClosePopup,
+    opacity: showed ? 1 : 0,
+    pointerEvents: showed ? 'auto' : 'none',
+  };
+
+  const window = {
+    position: 'absolute',
+    left,
+    right,
+    top,
+    bottom,
+    marginLeft,
+    marginRight,
+    marginTop,
+    marginBottom,
+    width,
+    height,
+    maxHeight,
+    backgroundColor: '#fff',
+    borderRadius: full ? null : theme.shapes.popupRadius,
+    boxShadow: full ? null : '0px 0px 40px 0px rgba(0,0,0,0.5)',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    transformOrigin: origin || 'bottom',
+    transition: `${transitionScope} ${theme.transitions.openClosePopup}`,
+    transform: showed ? null : 'scale(0.5)', // (*)
+  };
+
+  // (*)  Ne pas faire:
+  //        transform: showed ? 'scale(1)' : 'scale(0.5)',
+  //      Cela génère un bug étrange lors du drag dans ColorPicker et AnalogClock !
+
+  /******************************************************************************/
+
+  const windowTriangle = {
+    ...window,
+    backgroundColor: null,
+    boxShadow: null,
+    overflow: null,
+    pointerEvents: 'none',
+  };
+
+  const triangleStyle = {
+    position: 'absolute',
+    width: '0px',
+    height: '0px',
+    boxSizing: 'border-box',
+  };
+
+  switch (triangle) {
+    case 'bottom':
+      triangleStyle.top = height;
+      triangleStyle.left = `calc(50% - ${triangleSize})`;
+      triangleStyle.borderTop = `${triangleSize} solid #fff`;
+      triangleStyle.borderBottom = `${triangleSize} solid transparent`;
+      triangleStyle.borderLeft = `${triangleSize} solid transparent`;
+      triangleStyle.borderRight = `${triangleSize} solid transparent`;
+      break;
+    case 'top':
+      triangleStyle.top = px(-2 * n(triangleSize));
+      triangleStyle.left = `calc(50% - ${triangleSize})`;
+      triangleStyle.borderTop = `${triangleSize} solid transparent`;
+      triangleStyle.borderBottom = `${triangleSize} solid #fff`;
+      triangleStyle.borderLeft = `${triangleSize} solid transparent`;
+      triangleStyle.borderRight = `${triangleSize} solid transparent`;
+      break;
+    case 'left':
+      triangleStyle.top = `calc(50% - ${triangleSize})`;
+      triangleStyle.left = px(-2 * n(triangleSize));
+      triangleStyle.borderTop = `${triangleSize} solid transparent`;
+      triangleStyle.borderBottom = `${triangleSize} solid transparent`;
+      triangleStyle.borderLeft = `${triangleSize} solid transparent`;
+      triangleStyle.borderRight = `${triangleSize} solid #fff`;
+      break;
+    case 'right':
+      triangleStyle.top = `calc(50% - ${triangleSize})`;
+      triangleStyle.left = width;
+      triangleStyle.borderTop = `${triangleSize} solid transparent`;
+      triangleStyle.borderBottom = `${triangleSize} solid transparent`;
+      triangleStyle.borderLeft = `${triangleSize} solid #fff`;
+      triangleStyle.borderRight = `${triangleSize} solid transparent`;
+      break;
+  }
+
+  /******************************************************************************/
+
+  return {
+    popupContainer,
+    window,
+    windowTriangle,
+    triangle: triangleStyle,
+  };
+}
+
+/******************************************************************************/

package/widgets/popup-container/widget.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import * as styles from './styles';
+import Widget from 'goblin-laboratory/widgets/widget';
+
+/******************************************************************************/
+
+function isInside(rect, x, y) {
+  if (rect && rect.left < rect.right && rect.top < rect.bottom) {
+    return (
+      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+    );
+  } else {
+    return true;
+  }
+}
+
+/******************************************************************************/
+
+export default class PopupContainer extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    this.onBackgroundClick = this.onBackgroundClick.bind(this);
+  }
+
+  onBackgroundClick(e) {
+    if (!this.props.enableBackgroundClickForCancel) {
+      return;
+    }
+
+    const rect = this.divWindow.getBoundingClientRect();
+    if (!isInside(rect, e.clientX, e.clientY)) {
+      // If the mouse is outside the window, close it.
+      this.props.onClose();
+    }
+  }
+
+  renderTriangle() {
+    if (!this.props.triangle) {
+      return null;
+    }
+
+    return (
+      <div className={this.styles.classNames.windowTriangle}>
+        <div className={this.styles.classNames.triangle} />
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div
+        className={this.styles.classNames.popupContainer}
+        onMouseDown={this.onBackgroundClick}
+        onTouchStart={this.onBackgroundClick}
+      >
+        <div
+          ref={(node) => (this.divWindow = node)}
+          className={this.styles.classNames.window}
+        >
+          {this.props.children}
+        </div>
+        {this.renderTriangle()}
+      </div>
+    );
+  }
+}
+
+/******************************************************************************/

package/widgets/popup-dispatcher/service.js

@@ -0,0 +1,108 @@
+'use strict';
+
+const path = require('path');
+const goblinName = path.basename(module.parent.filename, '.js');
+const Goblin = require('xcraft-core-goblin');
+
+/******************************************************************************/
+
+// Define initial logic values
+const logicState = {
+  id: goblinName,
+  popup: null,
+  params: null,
+};
+
+/******************************************************************************/
+
+const logicHandlers = {
+  create: (state, action) => {
+    return state.set('id', action.get('id'));
+  },
+
+  show: (state, action) => {
+    return state
+      .set('popup', action.get('popup'))
+      .set('params', action.get('params'));
+  },
+
+  hide: (state) => {
+    return state.set('popup', null).set('params', null);
+  },
+
+  setParams: (state, action) => {
+    return state.merge('params', action.get('params'));
+  },
+};
+
+/******************************************************************************/
+
+Goblin.registerQuest(goblinName, 'create', async function (
+  quest,
+  id,
+  desktopId,
+  labId
+) {
+  quest.goblin.setX('desktopId', desktopId);
+  quest.goblin.setX('labId', labId);
+
+  await quest.warehouse.subscribe({
+    feed: desktopId,
+    branches: [id],
+  });
+
+  quest.do({id});
+});
+
+/******************************************************************************/
+
+Goblin.registerQuest(goblinName, 'show', async function (quest, popup, params) {
+  await quest.me.showWindow();
+  quest.do({popup, params});
+});
+
+Goblin.registerQuest(goblinName, 'prompt', async function (
+  quest,
+  popup,
+  params
+) {
+  await quest.me.showWindow();
+  const result = await quest.sub.callAndWait(async function () {
+    await quest.me.show({popup, params});
+  }, `*::*<${popup}.done>`);
+
+  return result;
+});
+
+Goblin.registerQuest(goblinName, 'hide', function (quest, result) {
+  const state = quest.goblin.getState();
+  const popup = state.get('popup');
+  quest.evt(`<${popup}.done>`, result);
+  quest.do();
+});
+
+Goblin.registerQuest(goblinName, 'setParams', function (quest, params) {
+  quest.do({params});
+});
+
+Goblin.registerQuest(goblinName, 'showWindow', async function (quest) {
+  const labId = quest.goblin.getX('labId');
+  if (!labId) {
+    return;
+  }
+  const winId = `wm@${labId}`;
+  try {
+    const wmAPI = quest.getAPI(winId);
+    await wmAPI.moveToFront();
+  } catch (e) {
+    const err = e.stack || e.message || e;
+    quest.log.warn(
+      `Unable to call goblin-wm API ! showWindow works only in electron app ! ${err}`
+    );
+  }
+});
+
+Goblin.registerQuest(goblinName, 'delete', function (quest) {});
+
+/******************************************************************************/
+module.exports = Goblin.configure(goblinName, logicState, logicHandlers);

package/widgets/popup-dispatcher/widget.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import PopupContainer from 'goblin-gadgets/widgets/popup-container/widget';
+
+/******************************************************************************/
+
+function getAttachPoint(rect, shift, mode) {
+  let x, y;
+
+  switch (mode.x) {
+    case 'left':
+      x = rect.get('left');
+      break;
+    case 'right':
+      x = rect.get('right');
+      break;
+    case 'center':
+      x = (rect.get('left') + rect.get('right')) / 2;
+      break;
+  }
+
+  switch (mode.y) {
+    case 'top':
+      y = rect.get('top');
+      break;
+    case 'bottom':
+      y = rect.get('bottom');
+      break;
+    case 'center':
+      y = (rect.gett('top') + rect.get('bottom')) / 2;
+      break;
+  }
+
+  x += shift.x;
+  y += shift.y;
+
+  return {x, y};
+}
+
+/******************************************************************************/
+
+class PopupDispatcher extends Widget {
+  constructor() {
+    super(...arguments);
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  handleClose(item) {
+    this.doFor(this.props.id, 'hide', {popup: item.popup});
+  }
+  /******************************************************************************/
+
+  renderPopup(item, index) {
+    const {id, popup, params} = this.props;
+
+    const show = popup === item.popup;
+
+    if (params?.get('parentRect') && item.attachMode) {
+      item.attachPoint = getAttachPoint(
+        params.get('parentRect'),
+        item.attachShift,
+        item.attachMode
+      );
+    }
+
+    return (
+      <PopupContainer
+        key={index}
+        visibility={show ? 'show' : 'hidden'}
+        size={item.size}
+        origin={item.origin}
+        attach={item.attach}
+        width={item.width}
+        height={item.height}
+        heightStrategy={item.heightStrategy}
+        marginTopBottom={item.marginTopBottom}
+        screenBackground={item.screenBackground}
+        attachPoint={item.attachPoint}
+        triangle={item.triangle}
+        triangleSize="16px"
+        transitionScope={item.transitionScope}
+        enableBackgroundClickForCancel={item.enableBackgroundClickForCancel}
+        onClose={() => this.handleClose(item)}
+      >
+        {item.render({id, popup, params})}
+      </PopupContainer>
+    );
+  }
+
+  render() {
+    return this.props.popups.map((item, index) =>
+      this.renderPopup(item, index)
+    );
+  }
+}
+
+/******************************************************************************/
+
+export default Widget.connect((state, props) => {
+  const serviceState = state.get(`backend.${props.id}`);
+  if (!serviceState) {
+    return {};
+  }
+
+  const popup = serviceState.get('popup');
+  const params = serviceState.get('params');
+
+  return {
+    popup,
+    params,
+  };
+})(PopupDispatcher);

package/widgets/tab-navigation/service.js

@@ -55,6 +55,7 @@ class TabNavigationLogic extends Elf.Spirit {
 }
 
 class TabNavigation extends Elf {
+  logic = Elf.getLogic(TabNavigationLogic);
   state = new TabNavigationState();
 
   /** @type {NavigationViews} */
@@ -72,14 +73,14 @@ class TabNavigation extends Elf {
   async create(id, desktopId, views) {
     this.desktopId = desktopId;
     this.views = views;
-    this.do({id});
+    this.logic.create(id);
     const firstTab = Object.keys(views)[0];
     await this.setTab(firstTab);
     return this;
   }
 
   async change(path, newValue) {
-    this.do({path, newValue});
+    this.logic.change(path, newValue);
   }
 
   async _loadService(tab) {
@@ -112,7 +113,7 @@ class TabNavigation extends Elf {
     const view = this.views[tab];
     const widget = view.widget;
     const widgetProps = view.widgetProps;
-    this.do({tab, serviceId, widget, widgetProps});
+    this.logic.setTab(tab, serviceId, widget, widgetProps);
   }
 
   async switchTab(reverse) {