@kineticdata/react 5.0.16 → 5.1.0

package/lib/components/table/Table.redux.js

@@ -2,11 +2,14 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 var _marked = /*#__PURE__*/_regeneratorRuntime.mark(calculateRowsTask),
-    _marked2 = /*#__PURE__*/_regeneratorRuntime.mark(configureTableTask);
+    _marked2 = /*#__PURE__*/_regeneratorRuntime.mark(configureTableTask),
+    _marked3 = /*#__PURE__*/_regeneratorRuntime.mark(pollingTask),
+    _marked4 = /*#__PURE__*/_regeneratorRuntime.mark(startPollingTask),
+    _marked5 = /*#__PURE__*/_regeneratorRuntime.mark(stopPollingTask);
 
 import { List, Map, fromJS } from 'immutable';
 import isarray from 'isarray';
-import { call, put, select, takeEvery } from 'redux-saga/effects';
+import { call, cancel, delay, fork, put, select, takeEvery } from 'redux-saga/effects';
 import { action, dispatch, regHandlers, regSaga } from '../../store';
 import { mountForm, unmountForm } from '..';
 export var hasData = function hasData(data) {
@@ -28,6 +31,18 @@ export var isClientSide = function isClientSide(tableData) {
   var dataSource = getDataSource(tableData);
   return hasData(data) && (dataSource && (dataSource.clientSideSearch === true || dataSource.clientSide) || !dataSource);
 };
+export var clientSideGotoPage = function clientSideGotoPage(tableData, pageNumber) {
+  var data = tableData.get('data');
+  var pageSize = tableData.get('pageSize');
+  var newOffset = (pageNumber - 1) * pageSize;
+
+  if (typeof pageNumber !== 'number' || pageNumber < 1) {
+    return tableData;
+  }
+
+  if (newOffset > data.size) return tableData;
+  return tableData.set('pageOffset', newOffset);
+};
 
 var clientSideNextPage = function clientSideNextPage(tableData) {
   return tableData.update('pageOffset', function (pageOffset) {
@@ -41,6 +56,21 @@ var clientSidePrevPage = function clientSidePrevPage(tableData) {
   });
 };
 
+export var serverSideGotoPage = function serverSideGotoPage(tableData, pageNumber) {
+  var pageTokens = tableData.get('pageTokens');
+  var tokenLocation = pageNumber - 2;
+
+  if (typeof pageNumber !== 'number' || pageNumber < 1 || pageNumber > pageTokens.size) {
+    return tableData;
+  }
+
+  if (pageNumber === 1) {
+    return tableData.set('loading', true).set('nextPageToken', null).set('pageTokens', List());
+  }
+
+  return tableData.set('loading', true).set('nextPageToken', pageTokens.get(tokenLocation)).set('pageTokens', pageTokens.slice(0, tokenLocation));
+};
+
 var serverSideNextPage = function serverSideNextPage(tableData) {
   return tableData.set('loading', true).set('nextPageToken', tableData.get('currentPageToken')).update('pageTokens', function (pt) {
     return pt.push(tableData.get('currentPageToken'));
@@ -104,7 +134,8 @@ regHandlers({
         defaultSortDirection = _ref3$payload$default2 === void 0 ? 'desc' : _ref3$payload$default2,
         tableOptions = _ref3$payload.tableOptions,
         onValidateFilters = _ref3$payload.onValidateFilters,
-        filterForm = _ref3$payload.filterForm;
+        filterForm = _ref3$payload.filterForm,
+        onFetch = _ref3$payload.onFetch;
     return !state.getIn(['tables', tableKey, 'mounted']) ? state : state.hasIn(['tables', tableKey, 'configured']) ? state.setIn(['tables', tableKey, 'initialize'], false) : state.mergeIn(['tables', tableKey], Map({
       data: hasData(data) ? fromJS(data) : data,
       dataSource: dataSource,
@@ -121,6 +152,7 @@ regHandlers({
       nextPageToken: null,
       pageTokens: List(),
       pageOffset: 0,
+      count: null,
       error: null,
       // Filtering
       filterForm: filterForm,
@@ -128,6 +160,7 @@ regHandlers({
       appliedFilters: generateFilters(tableKey, columns),
       validFilters: true,
       onValidateFilters: onValidateFilters,
+      onFetch: onFetch,
       configured: true,
       initialize: true
     }));
@@ -138,10 +171,11 @@ regHandlers({
         rows = _ref4$payload.rows,
         data = _ref4$payload.data,
         nextPageToken = _ref4$payload.nextPageToken,
+        count = _ref4$payload.count,
         _ref4$payload$error = _ref4$payload.error,
         error = _ref4$payload$error === void 0 ? null : _ref4$payload$error;
     return state.updateIn(['tables', tableKey], function (table) {
-      return table && table.set('rows', rows).set('data', data).set('currentPageToken', nextPageToken).set('nextPageToken', null).set('error', error).set('initializing', false).set('loading', false);
+      return table && table.set('rows', rows).set('data', data).set('currentPageToken', nextPageToken).set('nextPageToken', null).set('count', count).set('error', error).set('initializing', false).set('loading', false);
     });
   },
   NEXT_PAGE: function NEXT_PAGE(state, _ref5) {
@@ -156,10 +190,18 @@ regHandlers({
       return isClientSide(tableData) ? clientSidePrevPage(tableData) : serverSidePrevPage(tableData);
     }).setIn(['tables', tableKey, 'error'], null);
   },
-  SORT_COLUMN: function SORT_COLUMN(state, _ref7) {
+  GOTO_PAGE: function GOTO_PAGE(state, _ref7) {
     var _ref7$payload = _ref7.payload,
         tableKey = _ref7$payload.tableKey,
-        column = _ref7$payload.column;
+        pageNumber = _ref7$payload.pageNumber;
+    return state.updateIn(['tables', tableKey], function (tableData) {
+      return isClientSide(tableData) ? clientSideGotoPage(tableData, pageNumber) : serverSideGotoPage(tableData, pageNumber);
+    }).setIn(['tables', tableKey, 'error'], null);
+  },
+  SORT_COLUMN: function SORT_COLUMN(state, _ref8) {
+    var _ref8$payload = _ref8.payload,
+        tableKey = _ref8$payload.tableKey,
+        column = _ref8$payload.column;
     return state.updateIn(['tables', tableKey], function (t) {
       var sortColumn = t.get('sortColumn');
       var sortDirection = t.get('sortDirection');
@@ -168,52 +210,52 @@ regHandlers({
       .set('sortDirection', sortColumn === column ? sortDirection === 'desc' ? 'asc' : 'desc' : 'asc').set('sortColumn', column).set('error', null);
     });
   },
-  SET_FILTER: function SET_FILTER(state, _ref8) {
-    var _ref8$payload = _ref8.payload,
-        tableKey = _ref8$payload.tableKey,
-        filter = _ref8$payload.filter,
-        value = _ref8$payload.value;
+  SET_FILTER: function SET_FILTER(state, _ref9) {
+    var _ref9$payload = _ref9.payload,
+        tableKey = _ref9$payload.tableKey,
+        filter = _ref9$payload.filter,
+        value = _ref9$payload.value;
     return state.updateIn(['tables', tableKey], function (table) {
       return table.setIn(['filters', filter, 'value'], value).set('validFilters', evaluateValidFilters(table));
     });
   },
-  APPLY_FILTERS: function APPLY_FILTERS(state, _ref9) {
-    var tableKey = _ref9.payload.tableKey;
+  APPLY_FILTERS: function APPLY_FILTERS(state, _ref10) {
+    var tableKey = _ref10.payload.tableKey;
     return state.updateIn(['tables', tableKey], function (table) {
       return table.set('loading', true).set('appliedFilters', state.getIn(['tables', tableKey, 'filters'])).set('pageOffset', 0).set('currentPageToken', null).set('nextPageToken', null).set('pageTokens', List()).set('error', null);
     });
   },
-  APPLY_FILTER_FORM: function APPLY_FILTER_FORM(state, _ref10) {
-    var _ref10$payload = _ref10.payload,
-        tableKey = _ref10$payload.tableKey,
-        appliedFilters = _ref10$payload.appliedFilters;
+  APPLY_FILTER_FORM: function APPLY_FILTER_FORM(state, _ref11) {
+    var _ref11$payload = _ref11.payload,
+        tableKey = _ref11$payload.tableKey,
+        appliedFilters = _ref11$payload.appliedFilters;
     return state.updateIn(['tables', tableKey], function (table) {
       return table.set('loading', true).set('appliedFilters', appliedFilters).set('pageOffset', 0).set('currentPageToken', null).set('nextPageToken', null).set('pageTokens', List()).set('error', null);
     });
   },
-  REFETCH_TABLE_DATA: function REFETCH_TABLE_DATA(state, _ref11) {
-    var tableKey = _ref11.payload.tableKey;
+  REFETCH_TABLE_DATA: function REFETCH_TABLE_DATA(state, _ref12) {
+    var tableKey = _ref12.payload.tableKey;
     return state.hasIn(['tables', tableKey]) ? state.updateIn(['tables', tableKey], function (tableData) {
       return tableData.get('dataSource') ? tableData.set('loading', true).set('pageOffset', 0).set('currentPageToken', null).set('nextPageToken', null).set('pageTokens', List()).set('data', null).set('error', null) : tableData;
     }) : state;
   },
-  CLEAR_TABLE_FILTERS: function CLEAR_TABLE_FILTERS(state, _ref12) {
-    var tableKey = _ref12.payload.tableKey;
+  CLEAR_TABLE_FILTERS: function CLEAR_TABLE_FILTERS(state, _ref13) {
+    var tableKey = _ref13.payload.tableKey;
     return state.setIn(['tables', tableKey, 'filters'], generateFilters(tableKey, state.getIn(['tables', tableKey, 'columns'])));
   },
-  CLEAR_SELECTED_FILTERS: function CLEAR_SELECTED_FILTERS(state, _ref13) {
-    var tableKey = _ref13.payload.tableKey;
+  CLEAR_SELECTED_FILTERS: function CLEAR_SELECTED_FILTERS(state, _ref14) {
+    var tableKey = _ref14.payload.tableKey;
     return state.setIn(['tables', tableKey, 'filters'], state.getIn(['tables', tableKey, 'appliedFilters']));
   }
 });
 
-function calculateRowsTask(_ref14) {
-  var payload, tableKey, tableData, response, rows, data, nextPageToken, error;
+function calculateRowsTask(_ref15) {
+  var payload, tableKey, tableData, response, rows, data, nextPageToken, count, error, onFetch;
   return _regeneratorRuntime.wrap(function calculateRowsTask$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
-          payload = _ref14.payload;
+          payload = _ref15.payload;
           _context.prev = 1;
           tableKey = payload.tableKey;
           _context.next = 5;
@@ -224,7 +266,7 @@ function calculateRowsTask(_ref14) {
         case 5:
           tableData = _context.sent;
 
-          if (!(!tableData || !tableData.get('configured'))) {
+          if (tableData) {
             _context.next = 8;
             break;
           }
@@ -237,14 +279,15 @@ function calculateRowsTask(_ref14) {
 
         case 10:
           response = _context.sent;
-          rows = response.rows, data = response.data, nextPageToken = response.nextPageToken, error = response.error;
+          rows = response.rows, data = response.data, nextPageToken = response.nextPageToken, count = response.count, error = response.error;
+          onFetch = tableData.get('onFetch');
 
           if (!error) {
-            _context.next = 17;
+            _context.next = 18;
             break;
           }
 
-          _context.next = 15;
+          _context.next = 16;
           return put({
             type: 'SET_ROWS',
             payload: {
@@ -252,50 +295,66 @@ function calculateRowsTask(_ref14) {
               error: error,
               rows: List(),
               data: List(),
-              nextPageToken: null
+              nextPageToken: null,
+              count: null
             }
           });
 
-        case 15:
-          _context.next = 19;
+        case 16:
+          _context.next = 20;
           break;
 
-        case 17:
-          _context.next = 19;
+        case 18:
+          _context.next = 20;
           return put({
             type: 'SET_ROWS',
             payload: {
               tableKey: tableKey,
               rows: rows,
               data: data,
-              nextPageToken: nextPageToken
+              nextPageToken: nextPageToken,
+              count: count
             }
           });
 
-        case 19:
-          _context.next = 24;
+        case 20:
+          if (!(typeof onFetch === 'function')) {
+            _context.next = 23;
+            break;
+          }
+
+          _context.next = 23;
+          return call(onFetch, {
+            tableKey: tableKey,
+            rows: rows,
+            count: count,
+            error: error
+          });
+
+        case 23:
+          _context.next = 28;
           break;
 
-        case 21:
-          _context.prev = 21;
+        case 25:
+          _context.prev = 25;
           _context.t0 = _context["catch"](1);
           console.error(_context.t0);
 
-        case 24:
+        case 28:
         case "end":
           return _context.stop();
       }
     }
-  }, _marked, null, [[1, 21]]);
+  }, _marked, null, [[1, 25]]);
 }
 
-function configureTableTask(_ref15) {
+function configureTableTask(_ref16) {
   var payload, filterForm, tableKey, initialFilterValues;
   return _regeneratorRuntime.wrap(function configureTableTask$(_context2) {
     while (1) {
       switch (_context2.prev = _context2.next) {
         case 0:
-          payload = _ref15.payload;
+          payload = _ref16.payload;
           filterForm = payload.filterForm, tableKey = payload.tableKey, initialFilterValues = payload.initialFilterValues;
 
           if (filterForm) {
@@ -327,9 +386,114 @@ function configureTableTask(_ref15) {
   }, _marked2);
 }
 
-regSaga(takeEvery('CONFIGURE_TABLE', configureTableTask));
+var pollerTableKeys = {};
+
+function pollingTask(tableKey) {
+  return _regeneratorRuntime.wrap(function pollingTask$(_context3) {
+    while (1) {
+      switch (_context3.prev = _context3.next) {
+        case 0:
+          if (!true) {
+            _context3.next = 6;
+            break;
+          }
+
+          _context3.next = 3;
+          return delay(10000);
+
+        case 3:
+          refetchTable(tableKey);
+          _context3.next = 0;
+          break;
+
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _marked3);
+}
+
+function startPollingTask(_ref17) {
+  var payload, refreshInterval, tableKey;
+  return _regeneratorRuntime.wrap(function startPollingTask$(_context4) {
+    while (1) {
+      switch (_context4.prev = _context4.next) {
+        case 0:
+          payload = _ref17.payload;
+          refreshInterval = payload.refreshInterval, tableKey = payload.tableKey;
+
+          if (!(refreshInterval && !pollerTableKeys[tableKey])) {
+            _context4.next = 6;
+            break;
+          }
+
+          _context4.next = 5;
+          return fork(pollingTask, tableKey, refreshInterval);
+
+        case 5:
+          pollerTableKeys[tableKey] = _context4.sent;
+
+        case 6:
+        case "end":
+          return _context4.stop();
+      }
+    }
+  }, _marked4);
+}
+
+function stopPollingTask(_ref18) {
+  var payload, tableKey;
+  return _regeneratorRuntime.wrap(function stopPollingTask$(_context5) {
+    while (1) {
+      switch (_context5.prev = _context5.next) {
+        case 0:
+          payload = _ref18.payload;
+          tableKey = payload.tableKey;
+
+          if (!pollerTableKeys[tableKey]) {
+            _context5.next = 6;
+            break;
+          }
+
+          _context5.next = 5;
+          return cancel(pollerTableKeys[tableKey]);
+
+        case 5:
+          pollerTableKeys[tableKey] = null;
+
+        case 6:
+        case "end":
+          return _context5.stop();
+      }
+    }
+  }, _marked5);
+}
+
+regSaga('CONFIGURE_TABLE', /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  return _regeneratorRuntime.wrap(function _callee$(_context6) {
+    while (1) {
+      switch (_context6.prev = _context6.next) {
+        case 0:
+          _context6.next = 2;
+          return takeEvery('CONFIGURE_TABLE', configureTableTask);
+
+        case 2:
+          _context6.next = 4;
+          return takeEvery('CONFIGURE_TABLE', startPollingTask);
+
+        case 4:
+        case "end":
+          return _context6.stop();
+      }
+    }
+  }, _callee);
+})); //
+
+regSaga(takeEvery('UNMOUNT_TABLE', stopPollingTask));
 regSaga(takeEvery('NEXT_PAGE', calculateRowsTask));
 regSaga(takeEvery('PREV_PAGE', calculateRowsTask));
+regSaga(takeEvery('GOTO_PAGE', calculateRowsTask));
 regSaga(takeEvery('SORT_COLUMN', calculateRowsTask));
 regSaga(takeEvery('SORT_DIRECTION', calculateRowsTask));
 regSaga(takeEvery('APPLY_FILTERS', calculateRowsTask));
@@ -459,33 +623,40 @@ var calculateRows = function calculateRows(tableData) {
     var rows = applyClientSideFilters(tableData, data);
     return Promise.resolve({
       rows: rows,
-      data: data
+      data: data,
+      count: rows.size
     });
   } else if (dataSource) {
-    var transform = dataSource.transform || function (result) {
-      return result;
-    };
-
-    var params = dataSource.params({
+    var paramData = {
       pageSize: tableData.get('pageSize'),
       filters: tableData.get('appliedFilters'),
       sortColumn: tableData.getIn(['sortColumn', 'value']),
       sortDirection: tableData.get('sortDirection'),
-      nextPageToken: tableData.get('nextPageToken')
-    });
+      nextPageToken: tableData.get('nextPageToken'),
+      pageTokens: tableData.get('pageTokens')
+    };
+
+    var transform = dataSource.transform || function (result) {
+      return result;
+    };
+
+    var params = dataSource.params(paramData);
     return dataSource.fn.apply(dataSource, _toConsumableArray(params)).then(function (response) {
       if (response.error) return response;
 
-      var _transform = transform(response),
+      var _transform = transform(response, paramData),
           nextPageToken = _transform.nextPageToken,
-          responseData = _transform.data;
+          responseData = _transform.data,
+          count = _transform.count;
 
       var data = fromJS(responseData);
-      var rows = transformData(data, tableData);
+      var transformedRows = transformData(data, tableData);
+      var rows = dataSource.clientSideSearch || dataSource.clientSide ? applyClientSideFilters(tableData, transformedRows) : transformedRows;
       return {
         nextPageToken: nextPageToken,
+        count: dataSource.clientSideSearch || dataSource.clientSide ? rows.size : count,
         data: data,
-        rows: dataSource.clientSideSearch || dataSource.clientSide ? applyClientSideFilters(tableData, rows) : rows
+        rows: rows
       };
     });
   } else {

package/lib/components/table/Table.redux.test.js

@@ -1,5 +1,5 @@
-import { operations, isValueEmpty } from './Table.redux';
-import { List } from 'immutable';
+import { operations, isValueEmpty, clientSideGotoPage, serverSideGotoPage } from './Table.redux';
+import { List, Range, Map } from 'immutable';
 describe('<Table /> redux', function () {
   describe('setup', function () {
     test('true dat', function () {
@@ -86,4 +86,75 @@ describe('<Table /> redux', function () {
       expect(isValueEmpty(a)).toBeFalsy();
     });
   });
+  describe('#clientSideGotoPage', function () {
+    var tableData;
+    beforeEach(function () {
+      tableData = Map({
+        pageSize: 5,
+        pageOffset: 0,
+        data: Range(1, 25).toList()
+      });
+    });
+    describe('when pageNumber is invalid', function () {
+      test('invalid type does not affect tableData', function () {
+        expect(clientSideGotoPage(tableData, 'foo')).toEqualImmutable(tableData);
+      });
+      test('invalid number does not affect tableData', function () {
+        expect(clientSideGotoPage(tableData, -1)).toEqualImmutable(tableData);
+      });
+    });
+    test('pageNumber 1 offset is 0', function () {
+      var newTableData = clientSideGotoPage(tableData.set('pageOffset', 10), 1);
+      expect(newTableData.get('pageOffset')).toBe(0);
+    });
+    test('pageNumber 2 offset is 5', function () {
+      var newTableData = clientSideGotoPage(tableData, 2);
+      expect(newTableData.get('pageOffset')).toBe(5);
+    });
+    test('pageNumber 6 offset is unchanged (past the end of the data)', function () {
+      var newTableData = clientSideGotoPage(tableData, 6);
+      expect(newTableData.get('pageOffset')).toBe(0);
+    });
+    test('pageNumber 5 offset is 20 (last page)', function () {
+      var newTableData = clientSideGotoPage(tableData, 5);
+      expect(newTableData.get('pageOffset')).toBe(20);
+    });
+  });
+  describe('#serverSideGotoPage', function () {
+    var tableData;
+    beforeEach(function () {
+      tableData = Map({
+        loading: false,
+        nextPageToken: 'abc',
+        pageTokens: List([2, 3, 4])
+      });
+    });
+    describe('when pageNumber is invalid', function () {
+      test('invalid type does not affect tableData', function () {
+        expect(serverSideGotoPage(tableData, 'foo')).toEqualImmutable(tableData);
+      });
+      test('invalid number does not affect tableData', function () {
+        expect(serverSideGotoPage(tableData, -1)).toEqualImmutable(tableData);
+      });
+    });
+    test('when there are not enough pageTokens it does not affect tableData', function () {
+      expect(serverSideGotoPage(tableData, 5)).toEqualImmutable(tableData);
+    });
+    test('when going to the first page reset the page tokens', function () {
+      var newTableData = serverSideGotoPage(tableData, 1);
+      expect(newTableData.get('loading')).toBe(true);
+      expect(newTableData.get('nextPageToken')).toBeNull();
+      expect(newTableData.get('pageTokens').size).toBe(0);
+    });
+    test('when going to a valid page use its pageToken and adjust the page tokens', function () {
+      var secondTableData = serverSideGotoPage(tableData, 2);
+      var thirdTableData = serverSideGotoPage(tableData, 3);
+      expect(secondTableData.get('loading')).toBe(true);
+      expect(secondTableData.get('nextPageToken')).toBe(2);
+      expect(secondTableData.get('pageTokens').size).toBe(0);
+      expect(thirdTableData.get('loading')).toBe(true);
+      expect(thirdTableData.get('nextPageToken')).toBe(3);
+      expect(thirdTableData.get('pageTokens').size).toBe(1);
+    });
+  });
 });

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

@@ -73,8 +73,8 @@ export var Connector = /*#__PURE__*/function (_Component) {
         });
       } // when dropping a new connector the `headNode` prop will be undefined
       else if (_this.props.headNode) {
-          _this.setHead(_this.props.headNode.position, false);
-        }
+        _this.setHead(_this.props.headNode.position, false);
+      }
     };
 
     _this.dropTail = function () {
@@ -126,21 +126,32 @@ export var Connector = /*#__PURE__*/function (_Component) {
       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 attribute = isIE11 ? 'transform' : 'style';
-      var connectorValue = isIE11 ? "translate(".concat(x2, " ").concat(y2, ") rotate(").concat(angle, ")") : "transform: translate(".concat(x2, "px, ").concat(y2, "px) rotate(").concat(angle, "deg)");
-      var connectorLabelValue = isIE11 ? "translate(".concat(x1 + dx / 2, " ").concat(y1 + dy / 2, ")") : "transform: translate(".concat(x1 + dx / 2, "px, ").concat(y1 + dy / 2, "px)");
+      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) {
+        _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);
+      _this.connectorBody.current.setAttribute('x2', length); // if (this.connectorLabel.current) {
+      //   this.connectorLabel.current.setAttribute(attribute, connectorLabelValue);
+      // }
 
-      if (_this.connectorLabel.current) {
-        _this.connectorLabel.current.setAttribute(attribute, connectorLabelValue);
-      }
     };
 
     _this.connector = createRef();

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

@@ -72,7 +72,7 @@ var fields = function fields(_ref2) {
 var handleSubmit = function handleSubmit(_ref4) {
   var connector = _ref4.connector;
   return function (values) {
-    return values.toObject();
+    return connector.merge(values);
   };
 };
 

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

@@ -130,9 +130,16 @@ export var Node = /*#__PURE__*/function (_Component) {
   }, {
     key: "draw",
     value: function draw() {
-      var attribute = isIE11 ? 'transform' : 'style';
-      var value = isIE11 ? "translate(".concat(this.position.x, " ").concat(this.position.y, ")") : "transform: translate(".concat(this.position.x, "px,  ").concat(this.position.y, "px)");
-      this.el.current.setAttribute(attribute, value);
+      // const attribute = isIE11 ? 'transform' : 'style';
+      // const value = isIE11
+      //   ? `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) {
+        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)");
+      }
     }
   }, {
     key: "render",