@kineticdata/react 5.1.1 → 6.0.0

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

@@ -1,40 +1,41 @@
-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, { Component, createRef, Fragment } from 'react';
-import classNames from 'classnames';
-import { is } from 'immutable';
-import { dispatch } from '../../../store';
-import * as constants from './constants';
-import { getNodeType, getRectIntersections, isIE11 } from './helpers';
-import { SvgText } from './SvgText';
-import filter from '../../../../assets/task/icons/filter.svg';
-import { isNumber } from 'lodash-es';
-export var Connector = /*#__PURE__*/function (_Component) {
-  _inherits(Connector, _Component);
-
-  var _super = _createSuper(Connector);
-
+"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.Connector = void 0;
+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 _classnames = _interopRequireDefault(require("classnames"));
+var _immutable = require("immutable");
+var _store = require("../../../store");
+var constants = _interopRequireWildcard(require("./constants"));
+var _helpers = require("./helpers");
+var _SvgText = require("./SvgText");
+var _filter = _interopRequireDefault(require("../../../../assets/task/icons/filter.svg"));
+var _lodashEs = require("lodash-es");
+var Connector = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(Connector, _Component);
+  var _super = (0, _createSuper2["default"])(Connector);
   function Connector(props) {
     var _this;
-
-    _classCallCheck(this, Connector);
-
+    (0, _classCallCheck2["default"])(this, Connector);
     _this = _super.call(this, props);
-
     _this.setTreeBuilder = function (treeBuilder) {
       _this.treeBuilder = treeBuilder;
     };
-
     _this.onSelect = function (event) {
       if (typeof _this.props.onSelect === 'function') {
         _this.props.onSelect(_this.props.connector, event.shiftKey);
       }
     };
-
     _this.dragHead = function (event) {
       _this.treeBuilder.watchDrag({
         relative: false,
@@ -43,7 +44,6 @@ export var Connector = /*#__PURE__*/function (_Component) {
         onDrop: _this.dropHead
       });
     };
-
     _this.dragTail = function (event) {
       _this.treeBuilder.watchDrag({
         relative: false,
@@ -52,41 +52,36 @@ export var Connector = /*#__PURE__*/function (_Component) {
         onDrop: _this.dropTail
       });
     };
-
     _this.dropHead = function () {
       var node = _this.treeBuilder.findNodeByPoint(_this.head);
-
       var _this$props$connector = _this.props.connector,
-          headId = _this$props$connector.headId,
-          id = _this$props$connector.id,
-          tailId = _this$props$connector.tailId;
-
+        headId = _this$props$connector.headId,
+        id = _this$props$connector.id,
+        tailId = _this$props$connector.tailId;
       if (node && node.id !== headId && node.id !== tailId && !_this.treeBuilder.findDuplicateConnector(node.id, tailId)) {
-        isNumber(id) ? dispatch('TREE_UPDATE_CONNECTOR_HEAD', {
+        (0, _lodashEs.isNumber)(id) ? (0, _store.dispatch)('TREE_UPDATE_CONNECTOR_HEAD', {
           treeKey: _this.props.treeKey,
           id: id,
           nodeId: node.id
-        }) : dispatch('TREE_ADD_CONNECTOR', {
+        }) : (0, _store.dispatch)('TREE_ADD_CONNECTOR', {
           treeKey: _this.props.treeKey,
           tailId: _this.props.connector.tailId,
           headId: node.id
         });
-      } // when dropping a new connector the `headNode` prop will be undefined
+      }
+      // when dropping a new connector the `headNode` prop will be undefined
       else if (_this.props.headNode) {
         _this.setHead(_this.props.headNode.position, false);
       }
     };
-
     _this.dropTail = function () {
       var node = _this.treeBuilder.findNodeByPoint(_this.tail);
-
       var _this$props$connector2 = _this.props.connector,
-          headId = _this$props$connector2.headId,
-          id = _this$props$connector2.id,
-          tailId = _this$props$connector2.tailId;
-
+        headId = _this$props$connector2.headId,
+        id = _this$props$connector2.id,
+        tailId = _this$props$connector2.tailId;
       if (node && node.id !== headId && node.id !== tailId && !_this.treeBuilder.findDuplicateConnector(node.id, headId)) {
-        dispatch('TREE_UPDATE_CONNECTOR_TAIL', {
+        (0, _store.dispatch)('TREE_UPDATE_CONNECTOR_TAIL', {
           treeKey: _this.props.treeKey,
           id: id,
           nodeId: node.id
@@ -95,83 +90,73 @@ export var Connector = /*#__PURE__*/function (_Component) {
         _this.setTail(_this.props.tailNode.position, false);
       }
     };
-
     _this.setHead = function (point) {
       var dragging = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       _this.dragging = dragging ? 'head' : null;
       _this.head = point;
-
       _this.draw();
     };
-
     _this.setTail = function (point) {
       var dragging = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       _this.dragging = dragging ? 'tail' : null;
       _this.tail = point;
-
       _this.draw();
     };
-
     _this.draw = function () {
-      var _getRectIntersections = getRectIntersections(_assertThisInitialized(_this)),
-          _getRectIntersections2 = _slicedToArray(_getRectIntersections, 2),
-          _getRectIntersections3 = _getRectIntersections2[0],
-          x1 = _getRectIntersections3.x,
-          y1 = _getRectIntersections3.y,
-          _getRectIntersections4 = _getRectIntersections2[1],
-          x2 = _getRectIntersections4.x,
-          y2 = _getRectIntersections4.y;
-
+      _this.connector.current.parentElement.style.display = '';
+      var _getRectIntersections = (0, _helpers.getRectIntersections)((0, _assertThisInitialized2["default"])(_this)),
+        _getRectIntersections2 = (0, _slicedToArray2["default"])(_getRectIntersections, 2),
+        _getRectIntersections3 = _getRectIntersections2[0],
+        x1 = _getRectIntersections3.x,
+        y1 = _getRectIntersections3.y,
+        _getRectIntersections4 = _getRectIntersections2[1],
+        x2 = _getRectIntersections4.x,
+        y2 = _getRectIntersections4.y;
       var dx = x2 - x1;
       var dy = y2 - y1;
       var length = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
       var angle = Math.atan2(dy, dx) * 180 / Math.PI + 180;
-      var connectorValue = isIE11 ? "translate(".concat(x2, " ").concat(y2, ") rotate(").concat(angle, ")") : "translate(".concat(x2, "px, ").concat(y2, "px) rotate(").concat(angle, "deg)");
-      var connectorLabelValue = isIE11 ? "translate(".concat(x1 + dx / 2, " ").concat(y1 + dy / 2, ")") : "translate(".concat(x1 + dx / 2, "px, ").concat(y1 + dy / 2, "px)");
-
-      if (isIE11) {
+      var connectorValue = _helpers.isIE11 ? "translate(".concat(x2, " ").concat(y2, ") rotate(").concat(angle, ")") : "translate(".concat(x2, "px, ").concat(y2, "px) rotate(").concat(angle, "deg)");
+      var connectorLabelValue = _helpers.isIE11 ? "translate(".concat(x1 + dx / 2, " ").concat(y1 + dy / 2, ")") : "translate(".concat(x1 + dx / 2, "px, ").concat(y1 + dy / 2, "px)");
+      if (_helpers.isIE11) {
         _this.connector.current.transform = connectorValue;
-
         if (_this.connectorLabel.current) {
           _this.connectorLabel.current.transform = connectorLabelValue;
         }
       } else {
         _this.connector.current.style.transform = connectorValue;
-
         if (_this.connectorLabel.current) {
           _this.connectorLabel.current.style.transform = connectorLabelValue;
         }
-      } // this.connector.current.setAttribute(attribute, connectorValue);
-
+      }
 
+      // this.connector.current.setAttribute(attribute, connectorValue);
       if (_this.connectorTail.current) {
         _this.connectorTail.current.setAttribute('cx', length);
       }
-
-      _this.connectorBody.current.setAttribute('x2', length); // if (this.connectorLabel.current) {
+      _this.connectorBody.current.setAttribute('x2', length);
+      // if (this.connectorLabel.current) {
       //   this.connectorLabel.current.setAttribute(attribute, connectorLabelValue);
       // }
-
     };
-
-    _this.connector = createRef();
-    _this.connectorBody = createRef();
-    _this.connectorTail = createRef();
-    _this.connectorLabel = createRef();
+    _this.connector = /*#__PURE__*/(0, _react.createRef)();
+    _this.connectorBody = /*#__PURE__*/(0, _react.createRef)();
+    _this.connectorTail = /*#__PURE__*/(0, _react.createRef)();
+    _this.connectorLabel = /*#__PURE__*/(0, _react.createRef)();
     return _this;
   }
-
-  _createClass(Connector, [{
+  (0, _createClass2["default"])(Connector, [{
     key: "shouldComponentUpdate",
-
+    value:
     /*****************************************************************************
      * React lifecycle                                                           *
      * Check the `connector` prop for change, which should be an immutable       *
      * record. If that prop changes we need to sync the instance's `head` and    *
      * `tail` values and call `draw`.                                            *
      ****************************************************************************/
-    value: function shouldComponentUpdate(nextProps) {
-      return !is(this.props.connector, nextProps.connector) || !is(this.props.headNode, nextProps.headNode) || !is(this.props.tailNode, nextProps.tailNode) || this.props.highlighted !== nextProps.highlighted || this.props.primary !== nextProps.primary || this.props.selected !== nextProps.selected;
+
+    function shouldComponentUpdate(nextProps) {
+      return !(0, _immutable.is)(this.props.connector, nextProps.connector) || !(0, _immutable.is)(this.props.headNode, nextProps.headNode) || !(0, _immutable.is)(this.props.tailNode, nextProps.tailNode) || this.props.highlighted !== nextProps.highlighted || this.props.primary !== nextProps.primary || this.props.selected !== nextProps.selected;
     }
   }, {
     key: "componentDidMount",
@@ -188,16 +173,17 @@ export var Connector = /*#__PURE__*/function (_Component) {
     value: function sync() {
       this.dragging = null;
       this.tail = this.props.tailNode.position;
-      this.tailType = getNodeType(this.props.tailNode); // when dragging a new connector, there will not be a `headNode` prop passed
+      this.tailType = (0, _helpers.getNodeType)(this.props.tailNode);
+      // when dragging a new connector, there will not be a `headNode` prop passed
       // so in that case do not want to call draw until `this.head` is set after
       // mouse move
-
       if (this.props.headNode) {
         this.head = this.props.headNode.position;
-        this.headType = getNodeType(this.props.headNode);
+        this.headType = (0, _helpers.getNodeType)(this.props.headNode);
         this.draw();
       }
     }
+
     /*****************************************************************************
      * Rendering                                                                 *
      * To make the drag-and-drop perform as fast as possible we manually         *
@@ -205,25 +191,24 @@ export var Connector = /*#__PURE__*/function (_Component) {
      * changes the instance's `head` or `tail` properties should also call       *
      * `draw`                                                                    *
      ****************************************************************************/
-
   }, {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          connector = _this$props.connector,
-          headNode = _this$props.headNode,
-          highlighted = _this$props.highlighted,
-          primary = _this$props.primary,
-          selected = _this$props.selected,
-          tailNode = _this$props.tailNode;
+        connector = _this$props.connector,
+        headNode = _this$props.headNode,
+        highlighted = _this$props.highlighted,
+        primary = _this$props.primary,
+        selected = _this$props.selected,
+        tailNode = _this$props.tailNode;
       var condition = connector.condition,
-          id = connector.id,
-          label = connector.label,
-          type = connector.type;
+        id = connector.id,
+        label = connector.label,
+        type = connector.type;
       var invalid = condition && !label;
-      var loop = getNodeType(tailNode) === 'loop-head' && getNodeType(headNode) === 'loop-tail';
-      return /*#__PURE__*/React.createElement("g", {
-        className: classNames('connector', {
+      var loop = (0, _helpers.getNodeType)(tailNode) === 'loop-head' && (0, _helpers.getNodeType)(headNode) === 'loop-tail';
+      return /*#__PURE__*/_react["default"].createElement("g", {
+        className: (0, _classnames["default"])('connector', {
           highlighted: highlighted,
           invalid: invalid,
           loop: loop,
@@ -232,40 +217,44 @@ export var Connector = /*#__PURE__*/function (_Component) {
           complete: type === 'Complete',
           create: type === 'Create',
           update: type === 'Update'
-        })
-      }, /*#__PURE__*/React.createElement("g", {
+        }),
+        style: {
+          display: 'none'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("g", {
         ref: this.connector
-      }, /*#__PURE__*/React.createElement("line", {
+      }, /*#__PURE__*/_react["default"].createElement("line", {
         ref: this.connectorBody,
         className: "connector-body",
         x1: "0",
         y1: "0",
         y2: "0",
         strokeWidth: constants.CONNECTOR_STROKE_WIDTH
-      }), !loop && /*#__PURE__*/React.createElement("circle", {
+      }), !loop && /*#__PURE__*/_react["default"].createElement("circle", {
         ref: this.connectorTail,
         className: "connector-tail high-detail",
         r: constants.CONNECTOR_TAIL_RADIUS,
         cy: "0",
         onMouseDown: this.dragTail
-      }), !loop && /*#__PURE__*/React.createElement("polygon", {
+      }), !loop && /*#__PURE__*/_react["default"].createElement("polygon", {
         className: "connector-head high-detail",
         points: constants.CONNECTOR_HEAD_POINTS,
         onMouseDown: this.dragHead
-      })), id !== null && /*#__PURE__*/React.createElement("g", {
+      })), id !== null && /*#__PURE__*/_react["default"].createElement("g", {
         ref: this.connectorLabel,
         className: "connector-button",
         onClick: this.onSelect
-      }, loop ? /*#__PURE__*/React.createElement("g", {
+      }, loop ? /*#__PURE__*/_react["default"].createElement("g", {
         transform: "rotate(45)"
-      }, /*#__PURE__*/React.createElement("rect", {
+      }, /*#__PURE__*/_react["default"].createElement("rect", {
         x: -constants.ICON_CENTER,
         y: -constants.ICON_CENTER,
         height: constants.ICON_SIZE,
         width: constants.ICON_SIZE,
         rx: constants.CONNECTOR_LABEL_RADIUS,
-        ry: constants.CONNECTOR_LABEL_RADIUS
-      })) : label ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("rect", {
+        ry: constants.CONNECTOR_LABEL_RADIUS,
+        strokeWidth: constants.NODE_DECORATION_STROKE_WIDTH
+      })) : label ? /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("rect", {
         className: "high-detail",
         x: -constants.CONNECTOR_LABEL_CENTER_X,
         y: -constants.CONNECTOR_LABEL_CENTER_Y,
@@ -273,14 +262,14 @@ export var Connector = /*#__PURE__*/function (_Component) {
         width: constants.CONNECTOR_LABEL_WIDTH,
         rx: constants.CONNECTOR_LABEL_RADIUS,
         ry: constants.CONNECTOR_LABEL_RADIUS
-      }), /*#__PURE__*/React.createElement(SvgText, {
-        className: "connector-label med-detail",
+      }), /*#__PURE__*/_react["default"].createElement(_SvgText.SvgText, {
+        className: "connector-label high-detail",
         x: -constants.CONNECTOR_LABEL_CENTER_X,
         y: -constants.CONNECTOR_LABEL_CENTER_Y,
         width: constants.CONNECTOR_LABEL_WIDTH,
         height: constants.CONNECTOR_LABEL_HEIGHT,
         padding: constants.CONNECTOR_LABEL_PADDING
-      }, label)) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("rect", {
+      }, label)) : /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("rect", {
         className: "high-detail",
         x: -constants.ICON_CENTER,
         y: -constants.ICON_CENTER,
@@ -288,9 +277,9 @@ export var Connector = /*#__PURE__*/function (_Component) {
         width: constants.ICON_SIZE,
         rx: constants.CONNECTOR_LABEL_RADIUS,
         ry: constants.CONNECTOR_LABEL_RADIUS
-      }), /*#__PURE__*/React.createElement("image", {
+      }), /*#__PURE__*/_react["default"].createElement("image", {
         className: "high-detail",
-        xlinkHref: filter,
+        xlinkHref: _filter["default"],
         x: -constants.ICON_CENTER,
         y: -constants.ICON_CENTER,
         height: constants.ICON_SIZE,
@@ -298,6 +287,6 @@ export var Connector = /*#__PURE__*/function (_Component) {
       }))));
     }
   }]);
-
   return Connector;
-}(Component);
+}(_react.Component);
+exports.Connector = Connector;

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

@@ -1,22 +1,26 @@
-import { generateForm } from '../../form/Form';
-import { buildBindings } from './helpers';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConnectorForm = void 0;
+var _Form = require("../../form/Form");
+var _helpers = require("./helpers");
 var dataSources = function dataSources(_ref) {
   var tasks = _ref.tasks,
-      tree = _ref.tree,
-      connector = _ref.connector;
+    tree = _ref.tree,
+    connector = _ref.connector;
   return {
     bindings: {
-      fn: buildBindings,
+      fn: _helpers.buildBindings,
       params: [tree, tasks, tree.nodes.get(connector.headId)]
     }
   };
 };
-
 var fields = function fields(_ref2) {
   var connector = _ref2.connector,
-      tasks = _ref2.tasks,
-      tree = _ref2.tree;
+    tasks = _ref2.tasks,
+    tree = _ref2.tree;
   return function (_ref3) {
     var bindings = _ref3.bindings;
     return bindings && [{
@@ -52,34 +56,36 @@ var fields = function fields(_ref2) {
       label: 'From Node',
       type: 'text',
       enabled: false,
+      visible: false,
       initialValue: connector.tailId
     }, {
       name: 'to',
       label: 'To Node',
       type: 'text',
       enabled: false,
+      visible: false,
       initialValue: connector.headId
     }, {
       name: 'id',
       label: 'Id',
       type: 'text',
       enabled: false,
+      visible: false,
       initialValue: connector.id
     }];
   };
 };
-
 var handleSubmit = function handleSubmit(_ref4) {
   var connector = _ref4.connector;
   return function (values) {
     return connector.merge(values);
   };
 };
-
-export var ConnectorForm = generateForm({
+var ConnectorForm = (0, _Form.generateForm)({
   formOptions: ['connector', 'tasks', 'tree'],
   dataSources: dataSources,
   fields: fields,
   handleSubmit: handleSubmit
 });
+exports.ConnectorForm = ConnectorForm;
 ConnectorForm.displayName = 'ConnectorForm';