@agilemotion/oui-react-js 1.3.0 → 1.3.2

package/dist/components/ElementResizeHandler.js

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ElementResizeHandler = void 0;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const MIN_WIDTH = 60;
+const MIN_HEIGHT = 40;
+const FULLSCREEN_MARGINS = -10;
+const MARGINS = 4;
+
+class ElementResizeHandler {
+  constructor(pane, ghostPane) {
+    _defineProperty(this, "setBounds", (element, x, y, w, h) => {
+      element.style.left = x + 'px';
+      element.style.top = y + 'px';
+      element.style.width = w + 'px';
+      element.style.height = h + 'px';
+    });
+
+    _defineProperty(this, "hintHide", () => {
+      this.setBounds(this.ghostPane, this.b.left, this.b.top, this.b.width, this.b.height);
+      this.ghostPane.style.opacity = 0;
+    });
+
+    _defineProperty(this, "onTouchDown", e => {
+      alert(1);
+      this.onDown(e.touches[0]);
+      e.preventDefault();
+    });
+
+    _defineProperty(this, "onTouchMove", e => {
+      alert(1);
+      this.onMove(e.touches[0]);
+    });
+
+    _defineProperty(this, "onTouchEnd", e => {
+      alert(1);
+
+      if (e.touches.length === 0) {
+        this.onUp(e.changedTouches[0]);
+      }
+    });
+
+    _defineProperty(this, "onMouseDown", e => {
+      this.onDown(e);
+      e.preventDefault();
+    });
+
+    _defineProperty(this, "onDown", e => {
+      this.calc(e);
+      var isResizing = this.onRightEdge || this.onBottomEdge || this.onTopEdge || this.onLeftEdge;
+      this.clicked = {
+        x: this.x,
+        y: this.y,
+        cx: e.clientX,
+        cy: e.clientY,
+        w: this.b.width,
+        h: this.b.height,
+        isResizing: this.isResizing,
+        isMoving: !this.isResizing && this.canMove(),
+        onTopEdge: this.onTopEdge,
+        onLeftEdge: this.onLeftEdge,
+        onRightEdge: this.onRightEdge,
+        onBottomEdge: this.onBottomEdge
+      };
+    });
+
+    _defineProperty(this, "canMove", () => {
+      return this.x > 0 && this.x < this.b.width && this.y > 0 && this.y < this.b.height && this.y < 30;
+    });
+
+    _defineProperty(this, "calc", e => {
+      this.b = this.pane.getBoundingClientRect();
+      this.x = e.clientX - this.b.left;
+      this.y = e.clientY - this.b.top;
+      this.onTopEdge = this.y < MARGINS;
+      this.onLeftEdge = this.x < MARGINS;
+      this.onRightEdge = this.x >= this.b.width - MARGINS;
+      this.onBottomEdge = this.y >= this.b.height - MARGINS;
+      this.rightScreenEdge = window.innerWidth - MARGINS;
+      this.bottomScreenEdge = window.innerHeight - MARGINS;
+    });
+
+    _defineProperty(this, "onMove", ee => {
+      this.calc(ee);
+      this.e = ee;
+      this.redraw = true;
+    });
+
+    _defineProperty(this, "animate", () => {
+      requestAnimationFrame(this.animate);
+      if (!this.redraw) return;
+      this.redraw = false;
+
+      if (this.clicked && this.clicked.isResizing) {
+        if (this.clicked.onRightEdge) this.pane.style.width = Math.max(this.x, MIN_WIDTH) + 'px';
+        if (this.clicked.onBottomEdge) this.pane.style.height = Math.max(this.y, MIN_HEIGHT) + 'px';
+
+        if (this.clicked.onLeftEdge) {
+          var currentWidth = Math.max(this.clicked.cx - this.e.clientX + this.clicked.w, MIN_WIDTH);
+
+          if (currentWidth > MIN_WIDTH) {
+            this.pane.style.width = currentWidth + 'px';
+            this.pane.style.left = this.e.clientX + 'px';
+          }
+        }
+
+        if (this.clicked.onTopEdge) {
+          var currentHeight = Math.max(this.clicked.cy - this.e.clientY + this.clicked.h, MIN_HEIGHT);
+
+          if (currentHeight > MIN_HEIGHT) {
+            this.pane.style.height = currentHeight + 'px';
+            this.pane.style.top = this.e.clientY + 'px';
+          }
+        }
+
+        this.hintHide();
+        return;
+      }
+
+      if (this.clicked && this.clicked.isMoving) {
+        if (this.b.top < FULLSCREEN_MARGINS || this.b.left < FULLSCREEN_MARGINS || this.b.right > window.innerWidth - FULLSCREEN_MARGINS || this.b.bottom > window.innerHeight - FULLSCREEN_MARGINS) {
+          // hintFull();
+          this.setBounds(this.ghostPane, 0, 0, window.innerWidth, window.innerHeight);
+          this.ghostPane.style.opacity = 0.2;
+        } else if (this.b.top < MARGINS) {
+          // hintTop();
+          this.setBounds(this.ghostPane, 0, 0, window.innerWidth, window.innerHeight / 2);
+          this.ghostPane.style.opacity = 0.2;
+        } else if (this.b.left < MARGINS) {
+          // hintLeft();
+          this.setBounds(this.ghostPane, 0, 0, window.innerWidth / 2, window.innerHeight);
+          this.ghostPane.style.opacity = 0.2;
+        } else if (this.b.right > this.rightScreenEdge) {
+          // hintRight();
+          this.setBounds(this.ghostPane, window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);
+          this.ghostPane.style.opacity = 0.2;
+        } else if (this.b.bottom > this.bottomScreenEdge) {
+          // hintBottom();
+          this.setBounds(this.ghostPane, 0, window.innerHeight / 2, window.innerWidth, window.innerWidth / 2);
+          this.ghostPane.style.opacity = 0.2;
+        } else {
+          this.hintHide();
+        }
+
+        if (this.preSnapped) {
+          this.setBounds(this.pane, this.e.clientX - this.preSnapped.width / 2, this.e.clientY - Math.min(this.clicked.y, this.preSnapped.height), this.preSnapped.width, this.preSnapped.height);
+          return;
+        } // moving
+
+
+        this.pane.style.top = this.e.clientY - this.clicked.y + 'px';
+        this.pane.style.left = this.e.clientX - this.clicked.x + 'px';
+        return;
+      } // This code executes when mouse moves without clicking
+      // style cursor
+
+
+      if (this.onRightEdge && this.onBottomEdge || this.onLeftEdge && this.onTopEdge) {
+        this.pane.style.cursor = 'nwse-resize';
+      } else if (this.onRightEdge && this.onTopEdge || this.onBottomEdge && this.onLeftEdge) {
+        this.pane.style.cursor = 'nesw-resize';
+      } else if (this.onRightEdge || this.onLeftEdge) {
+        this.pane.style.cursor = 'ew-resize';
+      } else if (this.onBottomEdge || this.onTopEdge) {
+        this.pane.style.cursor = 'ns-resize';
+      } else if (this.canMove()) {
+        this.pane.style.cursor = 'move';
+      } else {
+        this.pane.style.cursor = 'default';
+      }
+    });
+
+    _defineProperty(this, "onUp", e => {
+      this.calc(e);
+
+      if (this.clicked && this.clicked.isMoving) {
+        // Snap
+        var snapped = {
+          width: this.b.width,
+          height: this.b.height
+        };
+
+        if (this.b.top < FULLSCREEN_MARGINS || this.b.left < FULLSCREEN_MARGINS || this.b.right > window.innerWidth - FULLSCREEN_MARGINS || this.b.bottom > window.innerHeight - FULLSCREEN_MARGINS) {
+          // hintFull();
+          this.setBounds(this.pane, 0, 0, window.innerWidth, window.innerHeight);
+          this.preSnapped = snapped;
+        } else if (this.b.top < MARGINS) {
+          // hintTop();
+          this.setBounds(this.pane, 0, 0, window.innerWidth, window.innerHeight / 2);
+          this.preSnapped = snapped;
+        } else if (this.b.left < MARGINS) {
+          // hintLeft();
+          this.setBounds(this.pane, 0, 0, window.innerWidth / 2, window.innerHeight);
+          this.preSnapped = snapped;
+        } else if (this.b.right > this.rightScreenEdge) {
+          // hintRight();
+          this.setBounds(this.pane, window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);
+          this.preSnapped = snapped;
+        } else if (this.b.bottom > this.bottomScreenEdge) {
+          // hintBottom();
+          this.setBounds(this.pane, 0, window.innerHeight / 2, window.innerWidth, window.innerWidth / 2);
+          this.preSnapped = snapped;
+        } else {
+          this.preSnapped = null;
+        }
+
+        this.hintHide();
+      }
+
+      this.clicked = null;
+    });
+
+    this.clicked = null;
+    pane.addEventListener('mousedown', this.onMouseDown);
+    document.addEventListener('mousemove', this.onMove);
+    document.addEventListener('mouseup', this.onUp);
+    pane.addEventListener('touchstart', this.onTouchDown);
+    document.addEventListener('touchmove', this.onTouchMove);
+    document.addEventListener('touchend', this.onTouchEnd);
+    this.pane = pane;
+    this.ghostPane = ghostPane;
+    this.animate();
+  }
+
+}
+
+exports.ElementResizeHandler = ElementResizeHandler;

package/dist/components/Graph.js

@@ -25,9 +25,36 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 class Graph {
   constructor(config) {
+    _defineProperty(this, "getCurrentNodeIndex", () => {
+      let index = 0;
+      let collection = this.config.stepperMode === null || this.config.stepperMode === "DYNAMIC" ? this.path : this.config.nodes;
+
+      var _iterator = _createForOfIteratorHelper(collection),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          const element = _step.value;
+
+          if (this.current.config.name === element.name) {
+            return index;
+          }
+
+          index++;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      return null;
+    });
+
     _defineProperty(this, "init", () => {
       let root = this.config.nodes[0];
       this.current = new _GraphNode.default(this.config.nodes[0]);
+      this.addNodeToPath(this.current);
 
       _ActionHandlers.default.invokeHandler(root.action, null, null, this.config.id);
     });
@@ -35,37 +62,110 @@ class Graph {
     _defineProperty(this, "signal", event => {
       let nextNodeName = this.current.getNextNode(event);
 
-      if (!_Utils.default.isNull(nextNodeName)) {
-        var _iterator = _createForOfIteratorHelper(this.config.nodes),
-            _step;
+      if (this.current.config.last && nextNodeName === null) {
+        _ApplicationContext.default.removeLoadedGraph();
+      } else {
+        if (!_Utils.default.isNull(nextNodeName)) {
+          var _iterator2 = _createForOfIteratorHelper(this.config.nodes),
+              _step2;
 
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            const node = _step.value;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              const node = _step2.value;
 
-            if (node.name === nextNodeName) {
-              this.current = new _GraphNode.default(node);
+              if (node.name === nextNodeName) {
+                this.current = new _GraphNode.default(node);
+                this.addNodeToPath(this.current);
 
-              _ActionHandlers.default.invokeHandler(node.action, null, null, this.config.id);
+                _ActionHandlers.default.invokeHandler(node.action, null, null, this.config.id);
 
-              break;
+                break;
+              }
             }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
+
+        if (this.current === null) {
+          console.error("Node name could not be found : " + nextNodeName);
+        }
+      }
+    });
+
+    _defineProperty(this, "setCurrentNodeTitle", title => {
+      if (this.current !== null) {
+        this.current.title = title;
       }
+    });
+
+    _defineProperty(this, "addNodeToPath", node => {
+      if (this.path.length === 0) {
+        this.path.push(node);
+      } else {
+        let lastNode = this.path[this.path.length - 1];
 
-      if (this.current === null) {
-        console.error("Node name could not be found : " + nextNodeName);
+        if (lastNode.config.name === node.config.name) {
+          this.path.pop();
+        } else {
+          this.path.push(node);
+        }
       }
     });
 
     this.config = config;
     this.modelData = {};
     this.current = null;
+    this.path = [];
+  }
+
+  getTitleStack() {
+    let titleStack = [];
+    let index = 0;
+
+    if (this.config.stepperMode === null || this.config.stepperMode === "DYNAMIC") {
+      var _iterator3 = _createForOfIteratorHelper(this.path),
+          _step3;
+
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          const pathElement = _step3.value;
+          let stackItem = {};
+          stackItem.title = pathElement.title;
+          stackItem.index = index++;
+          titleStack.push(stackItem);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    } else {
+      var _iterator4 = _createForOfIteratorHelper(this.config.nodes),
+          _step4;
+
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          const node = _step4.value;
+          let stackItem = {};
+          stackItem.title = node.title;
+          stackItem.index = index++;
+          titleStack.push(stackItem);
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    }
+
+    return titleStack;
+  }
+
+  get title() {
+    return this.config.title;
   }
 
   get value() {
@@ -88,6 +188,10 @@ class Graph {
     return this.modelData;
   }
 
+  set model(model) {
+    this.modelData = model;
+  }
+
   get id() {
     return this.config.id;
   }

package/dist/components/GraphNode.js

@@ -81,8 +81,6 @@ class GraphNode {
 
       if (activeEdge !== null) {
         return activeEdge.targetNodeName;
-      } else {
-        console.error("Could not evaulate next link : " + JSON.stringify(this.config));
       }
 
       return null;

package/dist/components/HtmlPanel.js

@@ -11,14 +11,55 @@ var _Utils = _interopRequireDefault(require("../Utils"));
 
 var _reactHtmlRenderer = _interopRequireDefault(require("react-html-renderer"));
 
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 const HtmlPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  _react.default.useImperativeHandle(ref, () => ({
-    getId: () => {
-      return props.config.id;
+  const _React$useState = _react.default.useState(true),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        initializing = _React$useState2[0],
+        setInitializing = _React$useState2[1];
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (initializing) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      setInitializing(false);
+
+      if (!_Utils.default.isNull(props.loadCompleteHandler)) {
+        props.loadCompleteHandler(props.config.id);
+      }
     }
-  }));
+  });
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      loadData: actionConfig => {}
+    };
+  };
 
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref

package/dist/components/Icon.js

@@ -23,6 +23,10 @@ var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
 
 var _CloudDownload = _interopRequireDefault(require("@material-ui/icons/CloudDownload"));
 
+var _Work = _interopRequireDefault(require("@material-ui/icons/Work"));
+
+var _Person = _interopRequireDefault(require("@material-ui/icons/Person"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -53,6 +57,10 @@ class Icon extends _react.Component {
       return /*#__PURE__*/_react.default.createElement(_CloudDownload.default, null);
     } else if (this.props.id === 'SEARCH') {
       return /*#__PURE__*/_react.default.createElement(_Search.default, null);
+    } else if (this.props.id === 'WORK') {
+      return /*#__PURE__*/_react.default.createElement(_Work.default, null);
+    } else if (this.props.id === 'PERSON') {
+      return /*#__PURE__*/_react.default.createElement(_Person.default, null);
     } else if (this.props.id === 'ERROR') {
       return /*#__PURE__*/_react.default.createElement(_Error.default, {
         style: {

package/dist/components/SignaturePanel.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _RestUtils = require("../RestUtils");
+
+var _ServiceCallActionHandler = _interopRequireDefault(require("../event/ServiceCallActionHandler"));
+
+var _DocumentContainer = _interopRequireDefault(require("@agilemotion/signi-vault-ui/dist/DocumentContainer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const SignaturePanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(true),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        initializing = _React$useState2[0],
+        setInitializing = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(null),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        value = _React$useState4[0],
+        setValue = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState({}),
+        _React$useState6 = _slicedToArray(_React$useState5, 1),
+        handle = _React$useState6[0];
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (initializing) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      setInitializing(false);
+
+      if (!_Utils.default.isNull(props.loadCompleteHandler)) {
+        props.loadCompleteHandler(props.config.id);
+      }
+    }
+  });
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      get value() {
+        if (!_Utils.default.isNull(handle.api)) {
+          return handle.api.value;
+        }
+
+        return null;
+      },
+
+      loadData: actionConfig => {
+        let service = !_Utils.default.isNull(props.config.dataService) ? props.config.dataService : actionConfig !== null ? actionConfig.dataService : null;
+
+        if (!_Utils.default.isNull(service)) {
+          if (service.type === 'remoteObjectProxy') {
+            (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
+              setValue(result);
+            }, e => {}, parameter => {});
+          } else {
+            if (_Utils.default.isNull(actionConfig)) {
+              actionConfig = {};
+            }
+
+            actionConfig.service = service;
+
+            _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
+              setValue(data);
+            }, () => {});
+          }
+        }
+      }
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, value !== null ? /*#__PURE__*/_react.default.createElement(_DocumentContainer.default, {
+    handle: handle,
+    config: value
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '32px 0 32px 48px'
+    }
+  }, "Loading..."));
+}));
+
+var _default = SignaturePanel;
+exports.default = _default;