@agilemotion/oui-react-js 1.3.0 → 1.3.1

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);
     });
@@ -36,15 +63,16 @@ class Graph {
       let nextNodeName = this.current.getNextNode(event);
 
       if (!_Utils.default.isNull(nextNodeName)) {
-        var _iterator = _createForOfIteratorHelper(this.config.nodes),
-            _step;
+        var _iterator2 = _createForOfIteratorHelper(this.config.nodes),
+            _step2;
 
         try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            const node = _step.value;
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            const node = _step2.value;
 
             if (node.name === nextNodeName) {
               this.current = new _GraphNode.default(node);
+              this.addNodeToPath(this.current);
 
               _ActionHandlers.default.invokeHandler(node.action, null, null, this.config.id);
 
@@ -52,9 +80,9 @@ class Graph {
             }
           }
         } catch (err) {
-          _iterator.e(err);
+          _iterator2.e(err);
         } finally {
-          _iterator.f();
+          _iterator2.f();
         }
       }
 
@@ -63,9 +91,77 @@ class Graph {
       }
     });
 
+    _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 (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() {

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/StepperTitleBar.css

@@ -0,0 +1,85 @@
+.stepDot,
+.stepDotActive,
+.stepDotVisited,
+.stepDotBox,
+.stepDotBoxActive {
+    border-radius: 100px;
+    display: inline-block;
+    text-align: center;
+    font-size: 18px;
+    color: #888888;
+    border: 1px solid #888888;
+}
+
+.stepDotBox,
+.stepDotBoxActive {
+    border: none;
+}
+
+.stepDotVisited,
+.stepDotActive {
+    color: #ffffff;
+    border: 1px solid #ffffff;
+    font-weight: 600;
+}
+
+.stepDotVisited {
+    border: none;
+}
+
+.stepTitle{
+    color: #ffffff;
+    font-size: 16px;
+    height: 30px;
+    float: right;
+    border-top-right-radius: 100px;
+    border-bottom-right-radius: 100px;
+    padding: 2px 8px;
+    font-weight: 600;
+}
+
+@media screen and (min-width:3480px) {
+    .stepTitle {
+        padding: 2px 0;
+    }
+}
+
+.stepDot,
+.stepDotVisited,
+.stepDotActive {
+    float: left;
+    width: 30px;
+    height: 30px;
+}
+
+.stepperLine {
+    width: calc(100% - 30px);
+    float: left;
+    border-top: 1px solid #888888;
+    margin: 14px 0 0 0;
+    padding: 0;
+}
+
+@media screen and (min-width:732px) {
+    .stepperLine {
+        width: calc(100% - 30.3px);
+    }
+}
+
+@media screen and (min-width:1176px) {
+    .stepperLine {
+        width: calc(100% - 30.4px);
+    }
+}
+
+@media screen and (min-width:2200px) {
+    .stepperLine {
+        width: calc(100% - 30.7px);
+    }
+}
+
+@media screen and (min-width:7320px) {
+    .stepperLine {
+        width: calc(100% - 32px);
+    }
+}