@processmaker/modeler 1.43.11 → 1.43.12

package/dist/modeler.umd.js

@@ -77250,11 +77250,13 @@ var ColorUtil = /*#__PURE__*/function () {
 
 
 
+
 
 
 var _nodeIdGenerator = /*#__PURE__*/new WeakMap();
 var Multiplayer = /*#__PURE__*/function () {
   function Multiplayer(modeler) {
+    var _this = this;
     _classCallCheck(this, Multiplayer);
     _defineProperty(this, "clientIO", null);
     _defineProperty(this, "yDoc", null);
@@ -77268,6 +77270,15 @@ var Multiplayer = /*#__PURE__*/function () {
     _defineProperty(this, "inspector", null);
     _defineProperty(this, "deletedItem", null);
     _defineProperty(this, "colorUtil", null);
+    /**
+     * Debounces the updatedSelectedNodes function to avoid triggering multiple times
+     * the update
+     *
+     * @param {Object} payload
+     */
+    _defineProperty(this, "debouncedUpdateSelectedNodes", (0,external_lodash_.debounce)(function (data) {
+      _this.updateSelectedNodes(data);
+    }, 400));
     // define document
     this.yDoc = new Doc();
     // Create a shared array
@@ -77301,42 +77312,42 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "webSocketEvents",
     value: function webSocketEvents() {
-      var _this = this;
+      var _this2 = this;
       this.clientIO.on('connect', function () {
         var _window$ProcessMaker$2, _window$ProcessMaker$3, _window$ProcessMaker$4, _window$ProcessMaker$5;
         // Join the room
-        _this.modeler.emptyPlayers();
-        _this.clientIO.emit('joinRoom', {
-          roomName: _this.room.getRoom(),
+        _this2.modeler.emptyPlayers();
+        _this2.clientIO.emit('joinRoom', {
+          roomName: _this2.room.getRoom(),
           clientName: (_window$ProcessMaker$2 = window.ProcessMaker.user) === null || _window$ProcessMaker$2 === void 0 ? void 0 : _window$ProcessMaker$2.fullName,
           clientAvatar: (_window$ProcessMaker$3 = window.ProcessMaker.user) === null || _window$ProcessMaker$3 === void 0 ? void 0 : _window$ProcessMaker$3.avatar,
-          clientColor: ((_window$ProcessMaker$4 = window.ProcessMaker.user) === null || _window$ProcessMaker$4 === void 0 ? void 0 : _window$ProcessMaker$4.color) || _this.colorUtil.randomColor((_window$ProcessMaker$5 = window.ProcessMaker.user) === null || _window$ProcessMaker$5 === void 0 ? void 0 : _window$ProcessMaker$5.fullName),
+          clientColor: ((_window$ProcessMaker$4 = window.ProcessMaker.user) === null || _window$ProcessMaker$4 === void 0 ? void 0 : _window$ProcessMaker$4.color) || _this2.colorUtil.randomColor((_window$ProcessMaker$5 = window.ProcessMaker.user) === null || _window$ProcessMaker$5 === void 0 ? void 0 : _window$ProcessMaker$5.fullName),
           clientCursor: {
             coordinates: {
               clientX: 300,
               clientY: 300
             },
-            paperTranslate: _this.modeler.paper.translate(),
-            paperScale: _this.modeler.paper.scale()
+            paperTranslate: _this2.modeler.paper.translate(),
+            paperScale: _this2.modeler.paper.scale()
           }
         });
       });
       this.clientIO.on('clientJoined', function (payload) {
-        _this.modeler.enableMultiplayer(payload.isMultiplayer);
-        _this.addPlayers(payload);
+        _this2.modeler.enableMultiplayer(payload.isMultiplayer);
+        _this2.addPlayers(payload);
       });
       this.clientIO.on('clientLeft', function (payload) {
         // Unhighlight nodes
-        _this.modeler.unhightligtNodes(payload.clientId);
+        _this2.modeler.unhightligtNodes(payload.clientId);
         // Remove the player from the multiplayer list
-        _this.modeler.removePlayer(payload.clientId);
-        _this.modeler.enableMultiplayer(payload.isMultiplayer);
+        _this2.modeler.removePlayer(payload.clientId);
+        _this2.modeler.enableMultiplayer(payload.isMultiplayer);
       });
       this.clientIO.on('requestProcess', function (payload) {
         var clientId = payload.clientId;
         // Sync the local Nodes
         if (clientId) {
-          _this.syncLocalNodes(clientId);
+          _this2.syncLocalNodes(clientId);
         }
       });
 
@@ -77346,7 +77357,7 @@ var Multiplayer = /*#__PURE__*/function () {
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                _this.updateClientCursor(payload);
+                _this2.updateClientCursor(payload);
               case 1:
               case "end":
                 return _context.stop();
@@ -77364,7 +77375,7 @@ var Multiplayer = /*#__PURE__*/function () {
           return _regeneratorRuntime().wrap(function _callee2$(_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                _this.updateHightligtedNodes(payload);
+                _this2.updateHightligtedNodes(payload);
               case 1:
               case "end":
                 return _context2.stop();
@@ -77383,10 +77394,10 @@ var Multiplayer = /*#__PURE__*/function () {
             while (1) switch (_context3.prev = _context3.next) {
               case 0:
                 _context3.next = 2;
-                return _this.createRemoteShape(payload.changes);
+                return _this2.createRemoteShape(payload.changes);
               case 2:
                 // Add the new element to the shared array
-                applyUpdate(_this.yDoc, new Uint8Array(payload.updateDoc));
+                applyUpdate(_this2.yDoc, new Uint8Array(payload.updateDoc));
               case 3:
               case "end":
                 return _context3.stop();
@@ -77404,15 +77415,15 @@ var Multiplayer = /*#__PURE__*/function () {
           return _regeneratorRuntime().wrap(function _callee4$(_context4) {
             while (1) switch (_context4.prev = _context4.next) {
               case 0:
-                if (!(payload.clientId === _this.clientIO.id)) {
+                if (!(payload.clientId === _this2.clientIO.id)) {
                   _context4.next = 4;
                   break;
                 }
                 _context4.next = 3;
-                return _this.createRemoteShape(payload.changes);
+                return _this2.createRemoteShape(payload.changes);
               case 3:
                 // Add the new element to the shared array
-                applyUpdate(_this.yDoc, new Uint8Array(payload.updateDoc));
+                applyUpdate(_this2.yDoc, new Uint8Array(payload.updateDoc));
               case 4:
               case "end":
                 return _context4.stop();
@@ -77428,12 +77439,12 @@ var Multiplayer = /*#__PURE__*/function () {
       this.clientIO.on('removeElement', function (payload) {
         payload.deletedNodes.forEach(function (nodeId) {
           // Get the node id
-          var node = _this.getNodeById(nodeId);
+          var node = _this2.getNodeById(nodeId);
           // Remove the element from the process
-          _this.removeShape(node);
+          _this2.removeShape(node);
         });
         // Remove the element from the shared array
-        applyUpdate(_this.yDoc, new Uint8Array(payload.updateDoc));
+        applyUpdate(_this2.yDoc, new Uint8Array(payload.updateDoc));
       });
 
       // Listen for updates when a element is updated
@@ -77443,16 +77454,16 @@ var Multiplayer = /*#__PURE__*/function () {
           isReplaced = payload.isReplaced;
         if (isReplaced) {
           // Replace the element in the process
-          _this.replaceShape(updatedNodes[0]);
+          _this2.replaceShape(updatedNodes[0]);
         } else {
           // Update the elements in the process
           updatedNodes.forEach(function (data) {
-            _this.updateShapes(data);
+            _this2.updateShapes(data);
           });
         }
 
         // Update the element in the shared array
-        applyUpdate(_this.yDoc, new Uint8Array(updateDoc));
+        applyUpdate(_this2.yDoc, new Uint8Array(updateDoc));
       });
       this.clientIO.on('updateInspector', function (payload) {
         var updateDoc = payload.updateDoc,
@@ -77460,70 +77471,70 @@ var Multiplayer = /*#__PURE__*/function () {
 
         // Update the elements in the process
         updatedNodes.forEach(function (data) {
-          _this.updateShapeFromInspector(data);
+          _this2.updateShapeFromInspector(data);
         });
 
         // Update the element in the shared array
-        applyUpdate(_this.yDoc, new Uint8Array(updateDoc));
+        applyUpdate(_this2.yDoc, new Uint8Array(updateDoc));
       });
       this.clientIO.on('updateFlows', function (payload) {
         var updateDoc = payload.updateDoc,
           updatedNodes = payload.updatedNodes;
         // Update the elements in the process
         updatedNodes.forEach(function (data) {
-          _this.updateFlowClient(data);
+          _this2.updateFlowClient(data);
         });
         // Update the element in the shared array
-        applyUpdate(_this.yDoc, new Uint8Array(updateDoc));
+        applyUpdate(_this2.yDoc, new Uint8Array(updateDoc));
       });
     }
   }, {
     key: "multiplayerEvents",
     value: function multiplayerEvents() {
-      var _this2 = this;
+      var _this3 = this;
       window.ProcessMaker.EventBus.$on('multiplayer-addNode', function (data) {
-        _this2.addNode(data);
+        _this3.addNode(data);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-removeNode', function (data) {
-        _this2.removeNode(data);
+        _this3.removeNode(data);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-updateNodes', function (data) {
-        if (_this2.modeler.isMultiplayer) {
-          _this2.updateNodes(data);
+        if (_this3.modeler.isMultiplayer) {
+          _this3.updateNodes(data);
         }
       });
       window.ProcessMaker.EventBus.$on('multiplayer-replaceNode', function (_ref5) {
         var nodeData = _ref5.nodeData,
           newControl = _ref5.newControl;
-        _this2.replaceNode(nodeData, newControl);
+        _this3.replaceNode(nodeData, newControl);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-addFlow', function (data) {
-        _this2.addCommonElement(data);
+        _this3.addCommonElement(data);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-addBoundaryEvent', function (data) {
-        _this2.addCommonElement(data);
+        _this3.addCommonElement(data);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-addLanes', function (lanes) {
-        _this2.addLaneNodes(lanes);
+        _this3.addLaneNodes(lanes);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-updateInspectorProperty', function (data) {
-        if (_this2.modeler.isMultiplayer) {
-          _this2.updateInspectorProperty(data);
+        if (_this3.modeler.isMultiplayer) {
+          _this3.updateInspectorProperty(data);
         }
       });
       window.ProcessMaker.EventBus.$on('multiplayer-updateFlows', function (data) {
-        if (_this2.modeler.isMultiplayer) {
-          _this2.updateFlows(data);
+        if (_this3.modeler.isMultiplayer) {
+          _this3.updateFlows(data);
         }
       });
       window.ProcessMaker.EventBus.$on('multiplayer-updateSelectedNodes', function (data) {
-        if (_this2.modeler.isMultiplayer) {
-          _this2.updateSelectedNodes(data);
+        if (_this3.modeler.isMultiplayer) {
+          _this3.debouncedUpdateSelectedNodes(data);
         }
       });
       window.ProcessMaker.EventBus.$on('multiplayer-updateMousePosition', function (data) {
-        if (_this2.modeler.isMultiplayer) {
-          _this2.updateMousePosition(data);
+        if (_this3.modeler.isMultiplayer) {
+          _this3.updateMousePosition(data);
         }
       });
     }
@@ -77534,7 +77545,7 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "addPlayers",
     value: function addPlayers(payload) {
-      var _this3 = this;
+      var _this4 = this;
       if (payload.isMultiplayer) {
         payload.clients.map(function (client) {
           var newPlayer = {
@@ -77544,7 +77555,7 @@ var Multiplayer = /*#__PURE__*/function () {
             avatar: client.avatar,
             cursor: client.cursor
           };
-          _this3.modeler.addPlayer(newPlayer);
+          _this4.modeler.addPlayer(newPlayer);
         });
       }
     }
@@ -77568,18 +77579,19 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateClientCursor",
     value: function updateClientCursor(payload) {
-      var _this4 = this;
+      var _this5 = this;
       payload.clients.map(function (client) {
-        _this4.modeler.updateClientCursor(client);
+        _this5.modeler.updateClientCursor(client);
       });
     }
+  }, {
+    key: "updateSelectedNodes",
+    value:
     /**
      * Updates the selected nodes by the user
      * @param {Object} data
      */
-  }, {
-    key: "updateSelectedNodes",
-    value: function updateSelectedNodes(data) {
+    function updateSelectedNodes(data) {
       var warningMessage = 'Another user is working on this object, wait until they finish making changes.';
       if (this.modeler.isMultiplayerSelected(data)) {
         window.ProcessMaker.alert(warningMessage, 'warning');
@@ -77597,9 +77609,9 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateHightligtedNodes",
     value: function updateHightligtedNodes(payload) {
-      var _this5 = this;
+      var _this6 = this;
       payload.clients.map(function (client) {
-        _this5.modeler.updateHightligtedNodes(client);
+        _this6.modeler.updateHightligtedNodes(client);
       });
     }
 
@@ -77610,25 +77622,25 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "syncLocalNodes",
     value: function syncLocalNodes(clientId) {
-      var _this6 = this;
+      var _this7 = this;
       // Get the process definition
       var nodes = this.modeler.nodes.map(function (node) {
         if (node.definition.$type === 'bpmn:BoundaryEvent') {
           return getBoundaryEventData(node);
         }
         if (node.definition.$type === 'bpmn:Lane') {
-          return _this6.prepareLaneData(node);
+          return _this7.prepareLaneData(node);
         }
-        return _this6.modeler.multiplayerHook(node, false, true);
+        return _this7.modeler.multiplayerHook(node, false, true);
       });
       nodes.forEach(function (node) {
         var yMapNested = new YMap();
-        _this6.doTransact(yMapNested, node);
-        _this6.yArray.push([yMapNested]);
+        _this7.doTransact(yMapNested, node);
+        _this7.yArray.push([yMapNested]);
         // Encode the state as an update and send it to the server
-        var stateUpdate = encodeStateAsUpdate(_this6.yDoc);
+        var stateUpdate = encodeStateAsUpdate(_this7.yDoc);
         // Send the update to the web socket server
-        _this6.clientIO.emit('createElement', {
+        _this7.clientIO.emit('createElement', {
           updateDoc: stateUpdate,
           clientId: clientId
         });
@@ -77667,10 +77679,10 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "createRemoteShape",
     value: function createRemoteShape(changes) {
-      var _this7 = this;
+      var _this8 = this;
       return new Promise(function (resolve) {
         changes.map(function (data) {
-          _this7.createShape(data);
+          _this8.createShape(data);
         });
         resolve();
       });
@@ -77737,14 +77749,14 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateNodes",
     value: function updateNodes(data) {
-      var _this8 = this;
+      var _this9 = this;
       data.forEach(function (value) {
-        var index = _this8.getIndex(value.id);
-        var nodeToUpdate = _this8.yArray.get(index);
+        var index = _this9.getIndex(value.id);
+        var nodeToUpdate = _this9.yArray.get(index);
         var updateData = value.poolId ? _objectSpread2(_objectSpread2({}, value.properties), {
           poolId: value.poolId
         }) : value.properties;
-        _this8.doTransact(nodeToUpdate, updateData);
+        _this9.doTransact(nodeToUpdate, updateData);
       });
     }
   }, {
@@ -77926,7 +77938,7 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateMovedWaypoint",
     value: function updateMovedWaypoint(element, data) {
-      var _this9 = this;
+      var _this10 = this;
       var waypoint = data.waypoint;
       var paper = this.modeler.paper;
       // Update the element's waypoints
@@ -77939,14 +77951,14 @@ var Multiplayer = /*#__PURE__*/function () {
       element.vertices(waypoint);
       // update bpmn waypoints
       element.component.node.diagram.waypoint = waypoint.map(function (point) {
-        return _this9.modeler.moddle.create('dc:Point', point);
+        return _this10.modeler.moddle.create('dc:Point', point);
       });
       // Force Remount Flow
       element.component.node._modelerId += '_replaced';
       // Update the element's source anchor
       element.source(sourceElem, {
         anchor: function anchor() {
-          return getDefaultAnchorPoint(_this9.getConnectionPoint(sourceElem, startWaypoint), sourceElem.findView(paper));
+          return getDefaultAnchorPoint(_this10.getConnectionPoint(sourceElem, startWaypoint), sourceElem.findView(paper));
         },
         connectionPoint: {
           name: 'boundary'
@@ -77956,7 +77968,7 @@ var Multiplayer = /*#__PURE__*/function () {
       // Update the element's target anchor
       element.target(targetElem, {
         anchor: function anchor() {
-          return getDefaultAnchorPoint(_this9.getConnectionPoint(targetElem, endWaypoint), targetElem.findView(paper));
+          return getDefaultAnchorPoint(_this10.getConnectionPoint(targetElem, endWaypoint), targetElem.findView(paper));
         },
         connectionPoint: {
           name: 'boundary'
@@ -77999,7 +78011,7 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "addLaneNodes",
     value: function addLaneNodes(lanes) {
-      var _this10 = this;
+      var _this11 = this;
       var pool = this.getPool(lanes);
       var defaultPoolData = {
         id: pool.component.node.definition.id,
@@ -78015,11 +78027,11 @@ var Multiplayer = /*#__PURE__*/function () {
       this.yDoc.transact(function () {
         lanes.forEach(function (lane) {
           var yMapNested = new YMap();
-          var data = _this10.prepareLaneData(lane);
-          _this10.doTransact(yMapNested, data);
-          _this10.yArray.push([yMapNested]);
-          var stateUpdate = encodeStateAsUpdate(_this10.yDoc);
-          _this10.clientIO.emit('createElement', {
+          var data = _this11.prepareLaneData(lane);
+          _this11.doTransact(yMapNested, data);
+          _this11.yArray.push([yMapNested]);
+          var stateUpdate = encodeStateAsUpdate(_this11.yDoc);
+          _this11.clientIO.emit('createElement', {
             updateDoc: stateUpdate
           });
         });
@@ -78159,11 +78171,11 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateFlows",
     value: function updateFlows(data) {
-      var _this11 = this;
+      var _this12 = this;
       data.forEach(function (value) {
-        var index = _this11.getIndex(value.id);
-        var nodeToUpdate = _this11.yArray.get(index);
-        _this11.yDoc.transact(function () {
+        var index = _this12.getIndex(value.id);
+        var nodeToUpdate = _this12.yArray.get(index);
+        _this12.yDoc.transact(function () {
           for (var key in value) {
             if (Object.hasOwn(value, key)) {
               nodeToUpdate.set(key, value[key]);
@@ -78226,12 +78238,12 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "refreshNodeWaypoint",
     value: function refreshNodeWaypoint(element) {
-      var _this12 = this;
+      var _this13 = this;
       var linkView = this.modeler.paper.findViewByModel(element);
       var start = linkView.sourceAnchor;
       var end = linkView.targetAnchor;
       element.component.node.diagram.waypoint = [start].concat(_toConsumableArray(element.component.shape.vertices()), [end]).map(function (point) {
-        return _this12.modeler.moddle.create('dc:Point', point);
+        return _this13.modeler.moddle.create('dc:Point', point);
       });
     }
   }]);