@kineticdata/react 5.1.2 → 6.0.0

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

@@ -1,42 +1,39 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { Component, createRef } from 'react';
-import { isArray, isFunction } from 'lodash-es';
-import classNames from 'classnames';
-import { dispatch } from '../../../store';
-import * as constants from './constants';
-import { addNewTask, getNewNodePosition, getNodeType, isIE11 } from './helpers';
-import { Point } from './models';
-import { SvgText } from './SvgText';
-import plusIcon from '../../../../assets/task/icons/plus_small.svg';
-export var Node = /*#__PURE__*/function (_Component) {
-  _inherits(Node, _Component);
-
-  var _super = _createSuper(Node);
-
+"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.Node = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+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 _classnames = _interopRequireDefault(require("classnames"));
+var _store = require("../../../store");
+var constants = _interopRequireWildcard(require("./constants"));
+var _helpers = require("./helpers");
+var _models = require("./models");
+var _SvgText = require("./SvgText");
+var _plus_small = _interopRequireDefault(require("../../../../assets/task/icons/plus_small.svg"));
+var _dragHandle = _interopRequireDefault(require("../../../../assets/task/icons/drag-handle.svg"));
+var Node = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(Node, _Component);
+  var _super = (0, _createSuper2["default"])(Node);
   function Node(props) {
     var _this;
-
-    _classCallCheck(this, Node);
-
+    (0, _classCallCheck2["default"])(this, Node);
     _this = _super.call(this, props);
-
-    _this.addNewNode = function () {
-      if (isFunction(_this.props.onNew)) {
-        _this.props.onNew(addNewTask(_this.props.treeKey, _this.props.tree, _this.props.node, getNewNodePosition(_this.props.node, _this.treeBuilder.getChildNodes(_this.props.node.id))));
-      }
-    };
-
     _this.onSelect = function (shiftKey) {
       return function () {
-        if (isFunction(_this.props.onSelect)) {
+        if ((0, _lodashEs.isFunction)(_this.props.onSelect)) {
           _this.props.onSelect(_this.props.node, shiftKey);
         }
       };
     };
-
     _this.drag = function (event) {
       _this.treeBuilder.watchDrag({
         event: event,
@@ -45,67 +42,63 @@ export var Node = /*#__PURE__*/function (_Component) {
         onClick: _this.onSelect(event.shiftKey)
       });
     };
-
     _this.dragPlus = function (event) {
       _this.treeBuilder.watchDrag({
         event: event,
         relative: false,
         onMove: _this.treeBuilder.dragNewConnector(_this.props.node),
         onDrop: _this.treeBuilder.dropNewConnector,
-        onClick: _this.addNewNode
+        onClick: _this.treeBuilder.addNewNode(_this.props.node, event.nativeEvent, (0, _helpers.getNodeType)(_this.props.node) === 'start' ? constants.NODE_START_RADIUS * 2 - 18 : constants.NODE_WIDTH - 18, (0, _helpers.getNodeType)(_this.props.node) === 'start' ? (constants.NODE_START_RADIUS * 2 - constants.NODE_HEIGHT) / 2 : 0)
       });
     };
-
     _this.drop = function () {
-      dispatch('TREE_UPDATE_NODE_POSITION', {
+      (0, _store.dispatch)('TREE_UPDATE_NODE_POSITION', {
         treeKey: _this.props.treeKey,
         id: _this.props.node.id,
         position: _this.position
       });
     };
-
     _this.move = function (_ref) {
       var dx = _ref.dx,
-          dy = _ref.dy;
-      _this.position = Point({
+        dy = _ref.dy;
+      _this.position = (0, _models.Point)({
         x: _this.position.x + dx,
         y: _this.position.y + dy
       });
-
       _this.treeBuilder.getConnectorsByHead(_this.props.node.id).forEach(function (connector) {
         return connector.setHead(_this.position, false);
       });
-
       _this.treeBuilder.getConnectorsByTail(_this.props.node.id).forEach(function (connector) {
         return connector.setTail(_this.position, false);
       });
-
+      if (!_this.props.id && _this.treeBuilder.newConnector.current) {
+        _this.treeBuilder.newConnector.current.setHead(_this.position, false);
+      }
       _this.draw();
     };
-
-    _this.el = createRef();
+    _this.el = /*#__PURE__*/(0, _react.createRef)();
     return _this;
   }
-
-  _createClass(Node, [{
+  (0, _createClass2["default"])(Node, [{
     key: "setTreeBuilder",
     value: function setTreeBuilder(treeBuilder) {
       this.treeBuilder = treeBuilder;
     }
+
     /*****************************************************************************
      * Click handlers                                                            *
      ****************************************************************************/
-
   }, {
     key: "shouldComponentUpdate",
-
+    value:
     /*****************************************************************************
      * React lifecycle                                                           *
      * Check the `node` prop for change, which should be an immutable record.    *
      * If that prop changes we need to sync the instance's `position` value and  *
      * call `draw`.                                                              *
      ****************************************************************************/
-    value: function shouldComponentUpdate(nextProps) {
+
+    function shouldComponentUpdate(nextProps) {
       return !this.props.node.equals(nextProps.node) || this.props.primary !== nextProps.primary || this.props.selected !== nextProps.selected || this.props.highlighted !== nextProps.highlighted;
     }
   }, {
@@ -120,13 +113,13 @@ export var Node = /*#__PURE__*/function (_Component) {
       this.position = this.props.node.position;
       this.draw();
     }
+
     /*****************************************************************************
      * Rendering                                                                 *
      * To make the drag-and-drop perform as fast as possible we manually         *
      * manipulate some DOM elements in the `draw` method below. Anything that    *
      * changes the instance's `position` property should also call `draw`        *
      ****************************************************************************/
-
   }, {
     key: "draw",
     value: function draw() {
@@ -135,7 +128,8 @@ export var Node = /*#__PURE__*/function (_Component) {
       //   ? `translate(${this.position.x} ${this.position.y})`
       //   : `transform: translate(${this.position.x}px,  ${this.position.y}px)`;
       // this.el.current.setAttribute(attribute, value);
-      if (isIE11) {
+
+      if (_helpers.isIE11) {
         this.el.current.transform = "translate(".concat(this.position.x, " ").concat(this.position.y, ")");
       } else {
         this.el.current.style.transform = "translate(".concat(this.position.x, "px,  ").concat(this.position.y, "px)");
@@ -145,26 +139,28 @@ export var Node = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          node = _this$props.node,
-          highlighted = _this$props.highlighted,
-          primary = _this$props.primary,
-          selected = _this$props.selected,
-          tasks = _this$props.tasks;
+        node = _this$props.node,
+        highlighted = _this$props.highlighted,
+        primary = _this$props.primary,
+        selected = _this$props.selected,
+        tasks = _this$props.tasks;
       var defers = node.defers,
-          definitionId = node.definitionId,
-          name = node.name;
-      var missing = !tasks.has(node.definitionId) && !node.definitionId.startsWith('system_tree_return_v') && !node.definitionId.startsWith('system_start_v');
-      var invalid = missing || !name || node.parameters.some(function (parameter) {
+        definitionId = node.definitionId,
+        id = node.id,
+        name = node.name;
+      var tempNode = typeof id !== 'number';
+      var missing = !tempNode && !tasks.has(node.definitionId) && !node.definitionId.startsWith('system_tree_return_v') && !node.definitionId.startsWith('system_start_v');
+      var invalid = missing || !tempNode && !name || node.parameters.some(function (parameter) {
         return parameter.required && parameter.value === '';
       });
-      var isRoutine = tasks.get(definitionId) && isArray(tasks.get(definitionId).inputs);
-      var type = getNodeType(node);
+      var isRoutine = tasks.get(definitionId) && (0, _lodashEs.isArray)(tasks.get(definitionId).inputs);
+      var type = (0, _helpers.getNodeType)(node);
       var height = type === 'join' || type === 'junction' ? constants.NODE_JOIN_JUNCTION_HEIGHT : type === 'start' ? constants.NODE_START_RADIUS * 2 : constants.NODE_HEIGHT;
       var width = type === 'start' ? constants.NODE_START_RADIUS * 2 : constants.NODE_WIDTH;
-      return /*#__PURE__*/React.createElement("g", {
+      return /*#__PURE__*/_react["default"].createElement("g", {
         ref: this.el
-      }, type === 'start' ? /*#__PURE__*/React.createElement("circle", {
-        className: classNames('node', type, {
+      }, type === 'start' ? /*#__PURE__*/_react["default"].createElement("circle", {
+        className: (0, _classnames["default"])('node', type, {
           highlighted: highlighted,
           invalid: invalid,
           primary: primary,
@@ -175,50 +171,72 @@ export var Node = /*#__PURE__*/function (_Component) {
         r: constants.NODE_START_RADIUS,
         strokeWidth: constants.NODE_STROKE_WIDTH,
         onMouseDown: this.drag
-      }) : /*#__PURE__*/React.createElement("rect", {
-        className: classNames('node', type, {
+      }) : /*#__PURE__*/_react["default"].createElement("rect", {
+        className: (0, _classnames["default"])('node', type, {
           highlighted: highlighted,
           invalid: invalid,
           primary: primary,
           selected: selected,
-          missing: missing
+          missing: missing,
+          positioning: tempNode
         }),
         height: height,
         width: constants.NODE_WIDTH,
         rx: constants.NODE_RADIUS,
         ry: constants.NODE_RADIUS,
         strokeWidth: constants.NODE_STROKE_WIDTH,
-        onMouseDown: this.drag
-      }), /*#__PURE__*/React.createElement(SvgText, {
-        className: classNames('node-name med-detail', type),
+        onMouseDown: tempNode ? undefined : this.drag
+      }), type !== 'start' && /*#__PURE__*/_react["default"].createElement("rect", {
+        className: "node-text-skeleton low-detail-only",
+        height: 12,
+        width: 150,
+        x: (constants.NODE_WIDTH - 150) / 2,
+        y: (constants.NODE_HEIGHT - 12) / 2,
+        rx: 4,
+        ry: 4
+      }), "/>", /*#__PURE__*/_react["default"].createElement(_SvgText.SvgText, {
+        className: (0, _classnames["default"])('node-name med-detail', type),
         x: 0,
         y: 0,
         height: height,
         width: width,
         padding: constants.NODE_NAME_PADDING
-      }, type === 'junction' ? 'Junction' : type === 'join' ? 'Join' : name), isRoutine && /*#__PURE__*/React.createElement("path", {
+      }, type === 'junction' ? 'Junction' : type === 'join' ? 'Join' : tempNode ? 'Drag new node' : name), isRoutine && /*#__PURE__*/_react["default"].createElement("path", {
         d: constants.NODE_LEFT_BAR_PATH,
-        className: "routine-bar"
-      }), type === 'loop-head' && /*#__PURE__*/React.createElement("path", {
+        className: "routine-bar",
+        strokeWidth: constants.NODE_DECORATION_STROKE_WIDTH
+      }), type === 'loop-head' && /*#__PURE__*/_react["default"].createElement("path", {
         d: constants.NODE_BOTTOM_BAR_PATH,
-        className: "loop-bar"
-      }), type === 'loop-tail' && /*#__PURE__*/React.createElement("path", {
+        className: "loop-bar",
+        strokeWidth: constants.NODE_DECORATION_STROKE_WIDTH
+      }), type === 'loop-tail' && /*#__PURE__*/_react["default"].createElement("path", {
         d: constants.NODE_TOP_BAR_PATH,
-        className: "loop-bar"
-      }), defers && /*#__PURE__*/React.createElement("path", {
+        className: "loop-bar",
+        strokeWidth: constants.NODE_DECORATION_STROKE_WIDTH
+      }), defers && /*#__PURE__*/_react["default"].createElement("path", {
         d: constants.NODE_CORNER_TAB_PATH,
-        className: "defers-tab"
-      }), /*#__PURE__*/React.createElement("image", {
+        className: "defers-tab",
+        strokeWidth: constants.NODE_DECORATION_STROKE_WIDTH
+      }), !tempNode && /*#__PURE__*/_react["default"].createElement("image", {
         className: "high-detail",
-        xlinkHref: plusIcon,
+        xlinkHref: _plus_small["default"],
         height: constants.ICON_SIZE,
         width: constants.ICON_SIZE,
-        x: (type === 'start' ? constants.NODE_START_RADIUS : constants.NODE_CENTER_X) - constants.ICON_CENTER,
-        y: height - constants.ICON_CENTER,
+        x: width - constants.ICON_CENTER,
+        y: (type === 'start' ? constants.NODE_START_RADIUS : constants.NODE_CENTER_Y) - constants.ICON_CENTER,
         onMouseDown: this.dragPlus
+      }), tempNode && /*#__PURE__*/_react["default"].createElement("image", {
+        xlinkHref: _dragHandle["default"],
+        height: 24,
+        width: 24,
+        x: 12,
+        y: constants.NODE_CENTER_Y - 12,
+        style: {
+          cursor: 'grabbing'
+        }
       }));
     }
   }]);
-
   return Node;
-}(Component);
+}(_react.Component);
+exports.Node = Node;

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

@@ -1,18 +1,24 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { List } from 'immutable';
-import { generateForm } from '../../form/Form';
-import { NodeMessage } from './models';
-import { buildBindings } from './helpers';
-import { fetchForm } from '../../../apis';
-import { checkOmittedParameters, generateTaskDefinition } from './TaskDefinitionConfigForm';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NodeForm = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _immutable = require("immutable");
+var _Form = require("../../form/Form");
+var _models = require("./models");
+var _helpers = require("./helpers");
+var _apis = require("../../../apis");
+var _TaskDefinitionConfigForm = require("./TaskDefinitionConfigForm");
 var dataSources = function dataSources(_ref) {
   var tasks = _ref.tasks,
-      tree = _ref.tree,
-      node = _ref.node;
+    tree = _ref.tree,
+    node = _ref.node;
   return {
     bindings: {
-      fn: buildBindings,
+      fn: _helpers.buildBindings,
       params: [tree, tasks, node]
     },
     parameters: {
@@ -23,7 +29,7 @@ var dataSources = function dataSources(_ref) {
     },
     form: {
       fn: function fn(node) {
-        return fetchForm({
+        return (0, _apis.fetchForm)({
           kappSlug: node.parameters.find(function (parameter) {
             return parameter.id === 'kappSlug';
           }).value,
@@ -35,22 +41,21 @@ var dataSources = function dataSources(_ref) {
           return data.form;
         });
       },
-      params: generateTaskDefinition(tasks.get(node.definitionId)) ? [node] : null
+      params: (0, _TaskDefinitionConfigForm.generateTaskDefinition)(tasks.get(node.definitionId)) ? [node] : null
     },
     task: {
       fn: function fn(node, form) {
-        return form ? generateTaskDefinition(tasks.get(node.definitionId))({
+        return form ? (0, _TaskDefinitionConfigForm.generateTaskDefinition)(tasks.get(node.definitionId))({
           form: form.toJS()
         }) : tasks.get(node.definitionId);
       },
       params: function params(_ref2) {
         var form = _ref2.form;
-        return generateTaskDefinition(tasks.get(node.definitionId)) ? form ? [node, form] : null : [node, null];
+        return (0, _TaskDefinitionConfigForm.generateTaskDefinition)(tasks.get(node.definitionId)) ? form ? [node, form] : null : [node, null];
       }
     }
   };
 };
-
 var getOptions = function getOptions(menu) {
   return menu.split(',').filter(function (value) {
     return !!value;
@@ -61,18 +66,16 @@ var getOptions = function getOptions(menu) {
     };
   });
 };
-
 var checkDependsOn = function checkDependsOn(parameter) {
   return !parameter.dependsOnId || function (_ref3) {
     var values = _ref3.values;
     return values.get("parameter_".concat(parameter.dependsOnId)) === parameter.dependsOnValue;
   };
 };
-
 var fields = function fields(_ref4) {
   var tasks = _ref4.tasks,
-      tree = _ref4.tree,
-      node = _ref4.node;
+    tree = _ref4.tree,
+    node = _ref4.node;
   return function (_ref5) {
     var bindings = _ref5.bindings;
     return bindings && [{
@@ -117,7 +120,7 @@ var fields = function fields(_ref4) {
       type: 'text',
       enabled: false,
       initialValue: node.id
-    }].concat(_toConsumableArray(node.parameters.map(function (parameter) {
+    }].concat((0, _toConsumableArray2["default"])(node.parameters.map(function (parameter) {
       return {
         name: "parameter_".concat(parameter.id),
         label: parameter.label,
@@ -127,7 +130,7 @@ var fields = function fields(_ref4) {
         initialValue: parameter.value,
         options: parameter.menu ? getOptions(parameter.menu) : bindings,
         "transient": true,
-        visible: checkDependsOn(parameter) && checkOmittedParameters(node, parameter)
+        visible: checkDependsOn(parameter) && (0, _TaskDefinitionConfigForm.checkOmittedParameters)(node, parameter)
       };
     })), [{
       name: 'parameters',
@@ -189,12 +192,13 @@ var fields = function fields(_ref4) {
       visible: false,
       serialize: function serialize(_ref10) {
         var values = _ref10.values;
-        return List(values.get('defers') ? ['Create', 'Update', 'Complete'] : ['Complete']).map(function (type) {
-          return NodeMessage({
+        return (0, _immutable.List)(values.get('defers') ? ['Create', 'Update', 'Complete'] : ['Complete']).map(function (type) {
+          return (0, _models.NodeMessage)({
             type: type,
             value: values.get("message_".concat(type))
           });
-        }) // Do not serialize empty messages.
+        })
+        // Do not serialize empty messages.
         .filter(function (message) {
           return !!message.value;
         });
@@ -202,18 +206,17 @@ var fields = function fields(_ref4) {
     }]);
   };
 };
-
 var handleSubmit = function handleSubmit(_ref11) {
   var node = _ref11.node;
   return function (values) {
     return node.merge(values);
   };
 };
-
-export var NodeForm = generateForm({
+var NodeForm = (0, _Form.generateForm)({
   formOptions: ['node', 'tasks', 'tree'],
   dataSources: dataSources,
   fields: fields,
   handleSubmit: handleSubmit
 });
+exports.NodeForm = NodeForm;
 NodeForm.displayName = 'NodeForm';

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

@@ -1,9 +1,15 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { generateForm } from '../../form/Form';
-import { buildBindings, normalizeParameter } from './helpers';
-import { NodeParameter } from './models';
-import { checkOmittedParameters } from './TaskDefinitionConfigForm';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NodeParametersForm = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _Form = require("../../form/Form");
+var _helpers = require("./helpers");
+var _models = require("./models");
+var _TaskDefinitionConfigForm = require("./TaskDefinitionConfigForm");
 var getOptions = function getOptions(menu) {
   return menu.split(',').filter(function (value) {
     return !!value;
@@ -14,15 +20,14 @@ var getOptions = function getOptions(menu) {
     };
   });
 };
-
 var dataSources = function dataSources(_ref) {
   var task = _ref.task,
-      tasks = _ref.tasks,
-      tree = _ref.tree,
-      node = _ref.node;
+    tasks = _ref.tasks,
+    tree = _ref.tree,
+    node = _ref.node;
   return {
     bindings: {
-      fn: buildBindings,
+      fn: _helpers.buildBindings,
       params: [tree, tasks, node]
     },
     parameters: {
@@ -31,21 +36,20 @@ var dataSources = function dataSources(_ref) {
       },
       params: [],
       transform: function transform(result) {
-        return result.map(normalizeParameter).map(NodeParameter);
+        return result.map(_helpers.normalizeParameter).map(_models.NodeParameter);
       }
     }
   };
 };
-
 var fields = function fields(_ref2) {
   var node = _ref2.node,
-      task = _ref2.task,
-      tasks = _ref2.tasks,
-      tree = _ref2.tree;
+    task = _ref2.task,
+    tasks = _ref2.tasks,
+    tree = _ref2.tree;
   return function (_ref3) {
     var bindings = _ref3.bindings,
-        parameters = _ref3.parameters;
-    return bindings && parameters && [].concat(_toConsumableArray(node.parameters.map(function (parameter) {
+      parameters = _ref3.parameters;
+    return bindings && parameters && [].concat((0, _toConsumableArray2["default"])(node.parameters.map(function (parameter) {
       return {
         name: "oldParameter_".concat(parameter.id),
         label: parameter.label,
@@ -56,9 +60,9 @@ var fields = function fields(_ref2) {
         options: parameter.menu ? getOptions(parameter.menu) : bindings,
         "transient": true,
         enabled: false,
-        visible: checkOmittedParameters(node, parameter)
+        visible: (0, _TaskDefinitionConfigForm.checkOmittedParameters)(node, parameter)
       };
-    })), _toConsumableArray(parameters.map(function (parameter) {
+    })), (0, _toConsumableArray2["default"])(parameters.map(function (parameter) {
       var matchingParameter = node.parameters.find(function (oldParameter) {
         return oldParameter.id === parameter.id;
       });
@@ -71,7 +75,7 @@ var fields = function fields(_ref2) {
         initialValue: matchingParameter ? matchingParameter.value : parameter.defaultValue,
         options: parameter.menu ? getOptions(parameter.menu) : bindings,
         "transient": true,
-        visible: checkOmittedParameters(node, parameter)
+        visible: (0, _TaskDefinitionConfigForm.checkOmittedParameters)(node, parameter)
       };
     })), [{
       name: 'parameters',
@@ -79,7 +83,7 @@ var fields = function fields(_ref2) {
       visible: false,
       serialize: function serialize(_ref4) {
         var parameters = _ref4.parameters,
-            values = _ref4.values;
+          values = _ref4.values;
         return parameters.map(function (parameter) {
           return parameter.set('value', values.get("parameter_".concat(parameter.id)));
         });
@@ -124,18 +128,17 @@ var fields = function fields(_ref2) {
     }]);
   };
 };
-
 var handleSubmit = function handleSubmit(_ref5) {
   var node = _ref5.node;
   return function (values) {
     return values;
   };
 };
-
-export var NodeParametersForm = generateForm({
+var NodeParametersForm = (0, _Form.generateForm)({
   formOptions: ['node', 'task', 'tasks', 'tree'],
   dataSources: dataSources,
   fields: fields,
   handleSubmit: handleSubmit
 });
+exports.NodeParametersForm = NodeParametersForm;
 NodeParametersForm.displayName = 'NodeParametersForm';