@kineticdata/react 5.1.2 → 6.0.0

package/lib/components/task/builder/TreeBuilder.js

@@ -1,53 +1,52 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { createRef, Component, Fragment } from 'react';
-import { pick } from 'lodash-es';
-import { connect, dispatch } from '../../../store';
-import { configureTreeBuilder } from './builder.redux';
-import * as constants from './constants';
-import { isPointInNode } from './helpers';
-import { Connector as ConnectorModel } from './models';
-import { SvgCanvas } from './SvgCanvas';
-import { Node } from './Node';
-import { Connector } from './Connector';
-import { is } from 'immutable';
-export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
-  _inherits(TreeBuilderComponent, _Component);
-
-  var _super = _createSuper(TreeBuilderComponent);
-
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeBuilderComponent = exports.TreeBuilder = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodashEs = require("lodash-es");
+var _store = require("../../../store");
+var _builder = require("./builder.redux");
+var constants = _interopRequireWildcard(require("./constants"));
+var _helpers = require("./helpers");
+var _models = require("./models");
+var _SvgCanvas = require("./SvgCanvas");
+var _Node = require("./Node");
+var _Connector = require("./Connector");
+var _immutable = require("immutable");
+var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(TreeBuilderComponent, _Component);
+  var _super = (0, _createSuper2["default"])(TreeBuilderComponent);
   function TreeBuilderComponent(props) {
     var _this;
-
-    _classCallCheck(this, TreeBuilderComponent);
-
+    (0, _classCallCheck2["default"])(this, TreeBuilderComponent);
     _this = _super.call(this, props);
-
     _this.findNodeByPoint = function (point) {
-      return _this.props.tree.nodes.find(isPointInNode(point));
+      return _this.props.tree.nodes.find((0, _helpers.isPointInNode)(point));
     };
-
     _this.findDuplicateConnector = function (nodeId1, nodeId2) {
       return _this.props.tree.connectors.some(function (connector) {
         return connector.headId === nodeId1 && connector.tailId === nodeId2 || connector.headId === nodeId2 && connector.tailId === nodeId1;
       });
     };
-
     _this.panTo = function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-          type = _ref2[0],
-          id = _ref2[1];
-
+      var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        type = _ref2[0],
+        id = _ref2[1];
       if (type === 'node') {
         var node = _this.props.tree.nodes.find(function (node) {
           return node.name === id;
         });
-
         if (node) {
           _this.canvasRef.current.focusPoint({
             x: node.position.x + constants.NODE_CENTER_X,
@@ -58,26 +57,20 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
         var connector = _this.props.tree.connectors.find(function (connector) {
           return connector.id === id;
         });
-
         var headPosition = _this.props.tree.nodes.get(connector.headId).position;
-
         var tailPosition = _this.props.tree.nodes.get(connector.tailId).position;
-
         _this.canvasRef.current.focusPoint({
           x: (headPosition.x + tailPosition.x + constants.NODE_WIDTH) / 2,
           y: (headPosition.y + tailPosition.y + constants.NODE_HEIGHT) / 2
         }, _this.sidebarRef.current);
       }
     };
-
     _this.getConnectorsByHead = function (nodeId) {
       return Object.values(_this.connectorMap.byHead[nodeId] || {});
     };
-
     _this.getConnectorsByTail = function (nodeId) {
       return Object.values(_this.connectorMap.byTail[nodeId] || {});
     };
-
     _this.getChildNodes = function (nodeId) {
       return Object.keys(_this.connectorMap.byTail[nodeId] || {}).map(function (connectorId) {
         return _this.props.tree.connectors.get(parseInt(connectorId));
@@ -85,47 +78,84 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
         return _this.props.tree.nodes.get(connector.headId);
       });
     };
-
     _this.dragNewConnector = function (node) {
       return function (position) {
         if (!_this.state.newConnector) {
           _this.setState(function (state) {
             return {
-              newConnector: state.newConnector || ConnectorModel({
+              newConnector: state.newConnector || (0, _models.Connector)({
                 tailId: node.id
               })
             };
           });
         }
-
         if (_this.newConnector.current) {
-          _this.newConnector.current.setTreeBuilder(_assertThisInitialized(_this));
-
+          _this.newConnector.current.setTreeBuilder((0, _assertThisInitialized2["default"])(_this));
           _this.newConnector.current.setHead(position, true);
         }
       };
     };
-
     _this.dropNewConnector = function () {
       if (_this.newConnector.current) {
         _this.newConnector.current.dropHead();
       }
-
       _this.setState({
         newConnector: null
       });
     };
-
+    _this.addNewNode = function (parentNode, nativeEvent, dx, dy) {
+      return function () {
+        var newNode = (0, _models.Node)({
+          position: parentNode.position.update('x', function (x) {
+            return x + dx;
+          }).update('y', function (y) {
+            return y + dy;
+          })
+        });
+        var newConnector = (0, _models.Connector)({
+          tailId: parentNode.id,
+          headId: newNode.id
+        });
+        _this.setState({
+          newConnector: newConnector,
+          newNode: newNode,
+          newNodeParent: parentNode
+        });
+        _this.watchDrag({
+          nativeEvent: nativeEvent,
+          onMove: _this.dragNewNode,
+          onDrop: _this.confirmNewNode,
+          onClick: _this.confirmNewNode
+        });
+      };
+    };
+    _this.dragNewNode = function (position) {
+      if (_this.newNode.current) {
+        _this.newNode.current.setTreeBuilder((0, _assertThisInitialized2["default"])(_this));
+        _this.newNode.current.move(position);
+      }
+    };
+    _this.confirmNewNode = function () {
+      if ((0, _lodashEs.isFunction)(_this.props.onNew)) {
+        setTimeout(function () {
+          _this.props.onNew((0, _helpers.addNewTask)(_this.props.treeKey, _this.props.treeBuilderState.tree, _this.state.newNodeParent, _this.newNode.current.position, function () {
+            return _this.setState({
+              newConnector: null,
+              newNode: null
+            });
+          }));
+        }, 500);
+      }
+    };
     _this.registerConnector = function (connector) {
       return function (connectorInstance) {
         var headId = connector.headId,
-            id = connector.id,
-            tailId = connector.tailId;
+          id = connector.id,
+          tailId = connector.tailId;
         _this.connectorMap.byHead[headId] = _this.connectorMap.byHead[headId] || {};
         _this.connectorMap.byTail[tailId] = _this.connectorMap.byTail[tailId] || {};
-
         if (connectorInstance) {
-          connectorInstance.setTreeBuilder(_assertThisInitialized(_this));
+          connectorInstance.setTreeBuilder((0, _assertThisInitialized2["default"])(_this));
           _this.connectorMap.byHead[headId][id] = connectorInstance;
           _this.connectorMap.byTail[tailId][id] = connectorInstance;
         } else {
@@ -134,45 +164,40 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
         }
       };
     };
-
     _this.registerNode = function (node) {
       return function (nodeInstance) {
         var id = node.id;
-
         if (nodeInstance) {
-          nodeInstance.setTreeBuilder(_assertThisInitialized(_this));
+          nodeInstance.setTreeBuilder((0, _assertThisInitialized2["default"])(_this));
           _this.nodeMap[id] = nodeInstance;
         } else {
           delete _this.nodeMap[id];
         }
       };
     };
-
     _this.watchDrag = function () {
       var _this$canvasRef$curre;
-
       return (_this$canvasRef$curre = _this.canvasRef.current).watchDrag.apply(_this$canvasRef$curre, arguments);
     };
-
     _this.isDirty = function (treeBuilderState) {
-      return treeBuilderState && (!is(treeBuilderState.lastSave, treeBuilderState.tree) || !is(treeBuilderState.lastWebApi, treeBuilderState.webApi));
+      return treeBuilderState && (!(0, _immutable.is)(treeBuilderState.lastSave, treeBuilderState.tree) || !(0, _immutable.is)(treeBuilderState.lastWebApi, treeBuilderState.webApi));
     };
-
     _this.state = {
-      newConnector: null
+      newConnector: null,
+      newNode: null
     };
-    _this.newConnector = createRef();
-    _this.canvasRef = createRef();
+    _this.newConnector = /*#__PURE__*/(0, _react.createRef)();
+    _this.newNode = /*#__PURE__*/(0, _react.createRef)();
+    _this.canvasRef = /*#__PURE__*/(0, _react.createRef)();
     _this.connectorMap = {
       byHead: {},
       byTail: {}
     };
     _this.nodeMap = {};
-    _this.sidebarRef = createRef();
+    _this.sidebarRef = /*#__PURE__*/(0, _react.createRef)();
     return _this;
   }
-
-  _createClass(TreeBuilderComponent, [{
+  (0, _createClass2["default"])(TreeBuilderComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.checkConfig();
@@ -202,20 +227,20 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
       // placeholder then we will call configureTreeBuilder with the component's
       // props at that time
       if (this.props.treeBuilderState === null) {
-        configureTreeBuilder(pick(this.props, ['treeKey', 'sourceName', 'sourceGroup', 'name', 'platformSourceName']));
+        (0, _builder.configureTreeBuilder)((0, _lodashEs.pick)(this.props, ['treeKey', 'sourceName', 'sourceGroup', 'name', 'platformSourceName']));
       }
     }
   }, {
     key: "checkHighlight",
     value: function checkHighlight() {
       var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
       if (this.props.treeBuilderState && !this.props.treeBuilderState.loading) {
         // one the first "real" render of the tree builder check for the highlight
         // node and focus if one is specified
         if ((!prevProps.treeBuilderState || prevProps.treeBuilderState.loading) && this.props.highlight) {
           this.panTo(this.props.highlight);
-        } // otherwise check for changes to the highlight prop and focus if it changes
+        }
+        // otherwise check for changes to the highlight prop and focus if it changes
         // and its a truthy value
         else if (this.props.highlight && !this.props.highlight.equals(prevProps.highlight)) {
           this.panTo(this.props.highlight);
@@ -226,75 +251,72 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          highlight = _this$props.highlight,
-          selected = _this$props.selected,
-          treeBuilderState = _this$props.treeBuilderState,
-          treeKey = _this$props.treeKey;
-
+        highlight = _this$props.highlight,
+        selected = _this$props.selected,
+        treeBuilderState = _this$props.treeBuilderState,
+        treeKey = _this$props.treeKey;
       var _ref3 = highlight || [],
-          _ref4 = _slicedToArray(_ref3, 2),
-          highlightType = _ref4[0],
-          highlightId = _ref4[1];
-
+        _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+        highlightType = _ref4[0],
+        highlightId = _ref4[1];
       if (treeBuilderState) {
         var lastSave = treeBuilderState.lastSave,
-            lastWebApi = treeBuilderState.lastWebApi,
-            redoStack = treeBuilderState.redoStack,
-            saving = treeBuilderState.saving,
-            tasks = treeBuilderState.tasks,
-            tree = treeBuilderState.tree,
-            undoStack = treeBuilderState.undoStack,
-            webApi = treeBuilderState.webApi;
+          lastWebApi = treeBuilderState.lastWebApi,
+          redoStack = treeBuilderState.redoStack,
+          saving = treeBuilderState.saving,
+          tasks = treeBuilderState.tasks,
+          tree = treeBuilderState.tree,
+          undoStack = treeBuilderState.undoStack,
+          webApi = treeBuilderState.webApi;
         return this.props.children({
           actions: {
             deleteConnector: function deleteConnector(id) {
-              return dispatch('TREE_REMOVE_CONNECTOR', {
+              return (0, _store.dispatch)('TREE_REMOVE_CONNECTOR', {
                 treeKey: treeKey,
                 id: id
               });
             },
             deleteNode: function deleteNode(id) {
-              return dispatch('TREE_REMOVE_NODE', {
+              return (0, _store.dispatch)('TREE_REMOVE_NODE', {
                 treeKey: treeKey,
                 id: id
               });
             },
             updateConnector: function updateConnector(values) {
-              return dispatch('TREE_UPDATE_CONNECTOR', _objectSpread({
+              return (0, _store.dispatch)('TREE_UPDATE_CONNECTOR', (0, _objectSpread2["default"])({
                 treeKey: treeKey
               }, values));
             },
             updateNode: function updateNode(values, dependencies) {
-              return dispatch('TREE_UPDATE_NODE', _objectSpread(_objectSpread({
+              return (0, _store.dispatch)('TREE_UPDATE_NODE', (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
                 treeKey: treeKey
               }, values), {}, {
                 dependencies: dependencies
               }));
             },
             updateSettings: function updateSettings(values) {
-              return dispatch('TREE_UPDATE_SETTINGS', {
+              return (0, _store.dispatch)('TREE_UPDATE_SETTINGS', {
                 treeKey: treeKey,
                 values: values
               });
             },
             updateWebApi: function updateWebApi(values) {
-              return dispatch('TREE_UPDATE_WEB_API', {
+              return (0, _store.dispatch)('TREE_UPDATE_WEB_API', {
                 treeKey: treeKey,
                 values: values
               });
             },
             save: function save(_ref5) {
               var _ref5$overwrite = _ref5.overwrite,
-                  overwrite = _ref5$overwrite === void 0 ? false : _ref5$overwrite,
-                  _ref5$newName = _ref5.newName,
-                  newName = _ref5$newName === void 0 ? '' : _ref5$newName,
-                  _ref5$onError = _ref5.onError,
-                  onError = _ref5$onError === void 0 ? _this2.props.onError : _ref5$onError,
-                  _ref5$onSave = _ref5.onSave,
-                  onSave = _ref5$onSave === void 0 ? _this2.props.onSave : _ref5$onSave;
-              dispatch('TREE_SAVE', {
+                overwrite = _ref5$overwrite === void 0 ? false : _ref5$overwrite,
+                _ref5$newName = _ref5.newName,
+                newName = _ref5$newName === void 0 ? '' : _ref5$newName,
+                _ref5$onError = _ref5.onError,
+                onError = _ref5$onError === void 0 ? _this2.props.onError : _ref5$onError,
+                _ref5$onSave = _ref5.onSave,
+                onSave = _ref5$onSave === void 0 ? _this2.props.onSave : _ref5$onSave;
+              (0, _store.dispatch)('TREE_SAVE', {
                 newName: newName,
                 overwrite: overwrite,
                 onError: onError,
@@ -303,12 +325,12 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
               });
             },
             undo: !undoStack.isEmpty() ? function () {
-              return dispatch('TREE_UNDO', {
+              return (0, _store.dispatch)('TREE_UNDO', {
                 treeKey: treeKey
               });
             } : null,
             redo: !redoStack.isEmpty() ? function () {
-              return dispatch('TREE_REDO', {
+              return (0, _store.dispatch)('TREE_REDO', {
                 treeKey: treeKey
               });
             } : null,
@@ -327,10 +349,10 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
           sidebarRef: this.sidebarRef,
           tasks: tasks,
           tree: tree,
-          treeBuilder: tree && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SvgCanvas, {
+          treeBuilder: tree && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_SvgCanvas.SvgCanvas, {
             ref: this.canvasRef
           }, tree.connectors.map(function (connector) {
-            return /*#__PURE__*/React.createElement(Connector, {
+            return /*#__PURE__*/_react["default"].createElement(_Connector.Connector, {
               key: connector.id,
               ref: _this2.registerConnector(connector),
               treeKey: treeKey,
@@ -345,13 +367,13 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
               }),
               onSelect: _this2.props.onSelectConnector
             });
-          }).toList(), this.state.newConnector && /*#__PURE__*/React.createElement(Connector, {
+          }).toList(), this.state.newConnector && /*#__PURE__*/_react["default"].createElement(_Connector.Connector, {
             ref: this.newConnector,
             treeKey: treeKey,
             connector: this.state.newConnector,
             tailNode: tree.nodes.get(this.state.newConnector.tailId)
           }), tree.nodes.map(function (node) {
-            return /*#__PURE__*/React.createElement(Node, {
+            return /*#__PURE__*/_react["default"].createElement(_Node.Node, {
               key: node.id,
               ref: _this2.registerNode(node),
               treeKey: treeKey,
@@ -362,28 +384,31 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
                 var nodeId = _ref7.nodeId;
                 return nodeId === node.id;
               }),
-              onNew: _this2.props.onNew,
               onSelect: _this2.props.onSelectNode,
               tasks: tasks,
               tree: tree
             });
-          }).toList())),
+          }).toList(), this.state.newNode && /*#__PURE__*/_react["default"].createElement(_Node.Node, {
+            ref: this.newNode,
+            treeKey: treeKey,
+            node: this.state.newNode,
+            tasks: tasks,
+            tree: tree
+          }))),
           webApi: webApi
         });
       }
-
       return null;
     }
   }]);
-
   return TreeBuilderComponent;
-}(Component);
-
+}(_react.Component);
+exports.TreeBuilderComponent = TreeBuilderComponent;
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     treeBuilderState: state.getIn(['trees', props.treeKey]),
     tree: state.getIn(['trees', props.treeKey, 'tree'])
   };
 };
-
-export var TreeBuilder = connect(mapStateToProps)(TreeBuilderComponent);
+var TreeBuilder = (0, _store.connect)(mapStateToProps)(TreeBuilderComponent);
+exports.TreeBuilder = TreeBuilder;