@processmaker/modeler 1.43.12 → 1.43.13

package/src/components/railBottom/controls/Controls.vue

@@ -8,12 +8,14 @@
       :class="['control-item', {'active': selectedItem && (selectedItem.type === item.type)}]"
       :id="item.id"
       :key="item.id"
-      @click.stop="onClickControlHandler($event, item)"
+      @mousedown.stop="onClickControlHandler($event, item, 'down')"
+      @mouseup.stop="onClickControlHandler($event, item, 'up')"
       :data-test="`${item.type}-main`"
     >
       <SubmenuPopper
         :data="item"
-        @clickToSubmenu="clickToSubmenuHandler"
+        @mouseDownSubmenu="($event, data) => clickToSubmenuHandler($event, data, 'down')"
+        @mouseUpSubmenu="($event, data) => clickToSubmenuHandler($event, data, 'up')"
         :selectedItem="selectedSubmenuItem"
         :popperType="popperType"
       />
@@ -65,22 +67,32 @@ export default ({
     },
   },
   methods: {
-    clickToSubmenuHandler(data){
+    clickToSubmenuHandler(event, data, type){
+      if (type === 'up') {
+        this.cancelDragNewObject();
+        return;
+      }
+
       window.ProcessMaker.EventBus.$off('custom-pointerclick');
       this.wasClicked = false;
       this.parent = this.selectedItem;
       this.selectedSubmenuItem = data.control.type;
-      this.onClickHandler(data.event, data.control);
+      this.startDragNewObject(event, data);
     },
     /**
      * On click on the botton rail control
      * @param {Object} event
      * @param {Object} control
      */
-    onClickControlHandler(event, control) {
+    onClickControlHandler(event, control, type) {
+      if (type === 'up') {
+        this.cancelDragNewObject();
+        return;
+      }
+
       this.selectedSubmenuItem = null;
       this.popperType = this.currentType === control.type ? null : control.type;
-      this.onClickHandler(event, control);
+      this.startDragNewObject(event, control);
       this.currentType = this.popperType;
     },
     toggleExplorer() {

package/src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue

@@ -15,7 +15,8 @@
         <li v-for="(item, key) in data.items"
           :class="['control-submenu-list', {'active': selectedItem === item.type}]"
           :key="key"
-          @click="onClickHandler($event, item)"
+          @mousedown.stop="$emit('mouseDownSubmenu', $event, item)"
+          @mouseup.stop="$emit('mouseUpSubmenu', $event, item)"
           :data-test="item.type"
         >
           <i v-if="!containsSvg(item.icon)" :class="item.icon" class="fa-lg"/>
@@ -74,12 +75,6 @@ export default ({
       wasClicked: false,
     };
   },
-  methods: {
-    onClickHandler(event, control) {
-      event.stopPropagation();
-      this.$emit('clickToSubmenu', { event, control });
-    },
-  },
 });
 
 </script>

package/src/components/railBottom/miniPaperControl/MiniPaperControl.vue

@@ -43,4 +43,4 @@ export default ({
 
 </script>
 
-<style lang="scss" scoped src="./miniPaperControl.scss"></style>
+<style lang="scss" scoped src="../bottomLeftControl.scss"></style>

package/src/components/railBottom/undoRedoControl/UndoRedoControl.vue

@@ -43,6 +43,10 @@ export default ({
       redoIcon: require('@/assets/railBottom/redo.svg'),
     };
   },
+  mounted() {
+    this.$root.$on('undo-keyboard-shortcut', this.undo);
+    this.$root.$on('redo-keyboard-shortcut', this.redo);
+  },
   watch: {
     canUndo(canUndo) {
       if (!canUndo) {

package/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue

@@ -70,7 +70,8 @@ export default {
           :key="object.id"
           @mouseover="showPin = true"
           @mouseleave="showPin = false"
-          @click.self="onClickHandler($event, object)"
+          @mousedown.stop="startDragNewObject($event, object)"
+          @mouseup.stop="cancelDragNewObject()"
         >
           <i v-if="!containsSvg(object.icon)" :class="object.icon" class="fa-lg"/>
           <img v-else class="node-types__item__icon" :src="object.icon" :alt="$t(object.label)">
@@ -81,6 +82,7 @@ export default {
             class="pinIcon"
             alt="Unpin Element"
             @click="unPin(object)"
+            @mousedown.stop="cancelDragNewObject()"
           >
           <img
             v-else
@@ -88,6 +90,7 @@ export default {
             class="pinIcon"
             alt="Pin Element"
             @click="addPin(object)"
+            @mousedown.stop="cancelDragNewObject()"
           >
         </div>
       </template>
@@ -103,7 +106,8 @@ export default {
             :key="pinnedObject.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"
-            @click.stop="onClickHandler($event, pinnedObject)"
+            @mousedown.stop="startDragNewObject($event, pinnedObject)"
+            @mouseup.stop="cancelDragNewObject()"
           >
             <i v-if="!containsSvg(pinnedObject.icon)" :class="pinnedObject.icon" class="fa-lg"/>
             <img v-else class="node-types__item__icon" :src="pinnedObject.icon" :alt="$t(pinnedObject.label)">
@@ -113,6 +117,7 @@ export default {
               class="pinIcon"
               alt="Pin/Unpin Element"
               @click="unPin(pinnedObject)"
+              @mousedown.stop="cancelDragNewObject()"
             >
           </div>
         </template>
@@ -127,7 +132,8 @@ export default {
             :key="nodeType.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"
-            @click.stop="onClickHandler($event, nodeType)"
+            @mousedown.stop="startDragNewObject($event, nodeType)"
+            @mouseup.stop="cancelDragNewObject()"
           >
             <i v-if="!containsSvg(nodeType.icon)" :class="nodeType.icon" class="fa-lg"/>
             <img v-else class="node-types__item__icon" :src="nodeType.icon" :alt="$t(nodeType.label)">
@@ -137,6 +143,7 @@ export default {
               class="pinIcon"
               alt="Pin/Unpin Element"
               @click="addPin(nodeType)"
+              @mousedown.stop="cancelDragNewObject()"
             >
           </div>
         </template>

package/src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue

@@ -69,7 +69,8 @@ export default {
           :key="object.id"
           @mouseover="showPin = true"
           @mouseleave="showPin = false"
-          @click.stop="onClickHandler($event, object)"
+          @mousedown.stop="startDragNewObject($event, object)"
+          @mouseup.stop="cancelDragNewObject()"
         >
           <div class="d-flex">
             <i v-if="!object.svgIcon" class="node-types__item__icon" :class="object.customIcon"/>
@@ -103,7 +104,8 @@ export default {
             :key="pinnedBlock.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"
-            @click.stop="onClickHandler($event, pinnedBlock)"
+            @mousedown.stop="startDragNewObject($event, pinnedBlock)"
+            @mouseup.stop="cancelDragNewObject()"
           >
             <i v-if="!containsSvg(pinnedBlock.icon)" :class="pinnedBlock.customIcon" class="fa-lg"/>
             <img v-else class="node-types__item__icon" :src="pinnedBlock.svgIcon" :alt="$t(pinnedBlock.label)">
@@ -126,7 +128,8 @@ export default {
             :key="nodeType.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"
-            @click.stop="onClickHandler($event, nodeType)"
+            @mousedown.stop="startDragNewObject($event, nodeType)"
+            @mouseup.stop="cancelDragNewObject()"
           >
             <i v-if="!containsSvg(nodeType.icon)" :class="nodeType.customIcon" class="fa-lg"/>
             <img v-else class="node-types__item__icon" :src="nodeType.svgIcon" :alt="$t(nodeType.label)">

package/src/components/topRail/TopRail.vue

@@ -8,6 +8,7 @@
     />
 
     <AiGenerateButton
+      v-if="isPackageAiInstalled"
       v-on="$listeners"
     />
 
@@ -27,6 +28,7 @@ import store from '@/store';
 import { ValidateButton, ValidateIssue, ValidatePanel } from '@/components/topRail/validateControl';
 import MultiplayerViewUsers from '@/components/topRail/multiplayerViewUsers/MultiplayerViewUsers';
 import AiGenerateButton from '../aiMessages/AiGenerateButton.vue';
+
 export default {
   components: {
     ValidateButton,
@@ -71,6 +73,9 @@ export default {
       // Get the number of errors
       return this.errorList.length + this.warnings.length;
     },
+    isPackageAiInstalled() {
+      return window.ProcessMaker?.modeler?.isPackageAiInstalled;
+    },
   },
   watch: {
     numberOfErrors(newValue) {

package/src/mixins/clickAndDrop.js

@@ -38,6 +38,7 @@ export default {
         this.popperType = control.type;
       }
       window.ProcessMaker.EventBus.$on('custom-pointerclick', message => {
+        window.ProcessMaker.EventBus.$emit('capture-hovered-link', message);
         window.ProcessMaker.EventBus.$off('custom-pointerclick');
         document.removeEventListener('mousemove', this.setDraggingPosition);
         if (this.movedElement) {
@@ -109,6 +110,25 @@ export default {
       nodeTypesStore.commit('clearSelectedNode');
       nodeTypesStore.commit('setGhostNode', null);
     },
+    /**
+     * The user mouse-down'd inside the panel so this *might* be a
+     * click-and-drag event. Set mouseDownDrag to true and fire
+     * the onClickHandler (previously, this is what the click event did).
+     */
+    startDragNewObject(e, control) {
+      window.ProcessMaker.mouseDownDrag = true;
+      this.onClickHandler(e, control);
+    },
+    /**
+     * The user mouse-up'd inside the panel so this is a
+     * click-move-click event, not a click-and-drag event.
+     * 
+     * Also used by the Pin buttons so we don't trigger a new element
+     * when they are clicked/dragged.
+     */
+    cancelDragNewObject() {
+      window.ProcessMaker.mouseDownDrag = false;
+    },
   },
   computed: {
     selectedItem() {

package/src/mixins/linkEditing.js

@@ -0,0 +1,393 @@
+import nodeTypesStore from '@/nodeTypesStore';
+import { COLOR_DEFAULT } from '@/components/highlightColors.js';
+import SequenceFlow from '@/components/nodes/genericFlow/SequenceFlow';
+
+const ALLOWED_BPMN_TYPES = [
+  'bpmn:Task',
+  'bpmn:UserTask',
+  'bpmn:GlobalTask',
+  'bpmn:CallActivity',
+  'bpmn:ScriptTask',
+  'bpmn:ServiceTask',
+];
+
+const ALLOWED_ALTERNATE_TYPES = [
+  'processmaker-modeler-task',
+  'processmaker-modeler-manual-task',
+  'processmaker-modeler-script-task',
+  'processmaker-modeler-call-activity',
+  'processmaker-modeler-intermediate-catch-timer-event',
+  'processmaker-modeler-intermediate-signal-catch-event',
+  'processmaker-modeler-intermediate-signal-throw-event',
+  'processmaker-modeler-intermediate-message-catch-event',
+  'processmaker-modeler-intermediate-message-throw-event',
+  'processmaker-modeler-intermediate-conditional-catch-event',
+];
+
+export default {
+  data() {
+    return {
+      linkModel: null,
+      hoveredLinkModel: null,
+      originalHoveredLink: null,
+      originalColor: null,
+      activeElement: null,
+      timeout: null,
+      tooltipEl: null,
+      clickPosition: null,
+      currentMovingModel: null,
+      currentMovingModelCanBisect: null,
+    };
+  },
+  watch: {
+    hoveredLinkModel() {
+      if (this.hoveredLinkModel) {
+        this.originalColor = this.hoveredLinkModel.attr('line/stroke');
+        this.originalHoveredLink = this.hoveredLinkModel;
+        this.hoveredLinkModel.attr('line/stroke', COLOR_DEFAULT);
+        this.addElementTooltip();
+      } else {
+        this.resetLinkColor();
+        this.removeElementTooltip();
+      }
+    },
+  },
+  computed: {
+    ghostNode() {
+      return nodeTypesStore.getters.getGhostNode;
+    },
+  },
+  methods: {
+    linkEditingInit() {
+
+      // Handle hovering a new element on the page
+      this.paperManager.addEventHandler('cell:mouseover', (view) => {
+        if (view?.model?.isLink() && this.addingEligibleItem()) {
+          this.timeout = setTimeout(() => {
+            this.hoveredLinkModel = view.model;
+          }, 1000);
+        }
+      });
+      this.paperManager.addEventHandler('cell:mouseout', () => {
+        clearTimeout(this.timeout);
+        this.timeout = null;
+        if (this.hoveredLinkModel) {
+          this.hoveredLinkModel = null;
+        }
+      });
+      
+      // Handle hovering an existing element on the page
+      this.paperManager.addEventHandler('element:pointermove', (view, evt) => {
+        if (!this.canBisectCached(view.model)) {
+          return;
+        }
+
+        // get any links under the element we're moving
+        const viewFromPoint = this.findViewFromPoint(view, evt);
+        const model = viewFromPoint?.model;
+
+        if (model?.isLink()) {
+          if (this.hoveredLinkModel !== model && !this.timeout) {
+            this.timeout = setTimeout(() => {
+              this.hoveredLinkModel = model;
+              this.linkModel = model;
+              this.activeElement = view.model;
+            }, 1000);
+          }
+        } else {
+          clearTimeout(this.timeout);
+          this.timeout = null;
+          if (this.hoveredLinkModel) {
+            this.hoveredLinkModel = null;
+            this.linkModel = null;
+            this.activeElement = null;
+          }
+        }
+      });
+      
+      // Handle dropping an existing element on the page
+      this.paperManager.addEventHandler('element:pointerup', (view, evt) => {
+        if (this.linkModel && this.canBisect(view.model)) {
+          this.clickPosition = { x: evt.clientX, y: evt.clientY };
+          this.paperManager.performAtomicAction(() => {
+            this.bisectElement(view.model, this.linkModel);
+            this.hoveredLinkModel = null;
+            this.linkModel = null;
+            this.activeElement = null;
+          });
+        }
+      });
+
+      // Handle dropping a new element on the page
+      this.$on('node-added', (newNode) => {
+        this.bisectNode(newNode);
+      });
+
+      // We need to save the hovered link because the mouse could move
+      // before the node is created
+      window.ProcessMaker.EventBus.$on('capture-hovered-link', (evt) => {
+        this.clickPosition = { x: evt.clientX, y: evt.clientY };
+        this.linkModel = this.hoveredLinkModel;
+      });
+    },
+
+    findViewFromPoint(elementView, evt) {
+      const nodesFromPoint = Array.from(
+        document.elementsFromPoint(evt.clientX, evt.clientY),
+      );
+      while (nodesFromPoint.length > 0) {
+        const el = nodesFromPoint.shift();
+        const view = this.paper.findView(el);
+        if (view && view !== elementView) {
+          return view;
+        }
+      }
+      return null;
+    },
+
+    isLink(model) {
+      return model.component && model.attributes.type === 'standard.Link';
+    },
+
+    canBisect(controlOrModel) {
+      const bpmnTypes = this.getBpmnTypes(controlOrModel);
+      const allowedByBpmnType = bpmnTypes.some(type => ALLOWED_BPMN_TYPES.includes(type));
+
+      if (allowedByBpmnType) {
+        return true;
+      }
+
+      // Sometimes the bpmn type is not set, so check for a type in the config 
+      const alternateType = this.getAlternateType(controlOrModel);
+      return ALLOWED_ALTERNATE_TYPES.includes(alternateType);
+    },
+
+    canBisectCached(model) {
+      let canBisect = false;
+      if (this.currentMovingModel === model) {
+        canBisect = this.currentMovingModelCanBisect;
+      } else {
+        canBisect = this.canBisect(model);
+        this.currentMovingModel = model;
+        this.currentMovingModelCanBisect = canBisect;
+      }
+
+      return canBisect;
+    },
+
+    getBpmnTypes(item) {
+      let nodeDefinitionType = item.component?.node?.definition?.$type;
+      let controlTypes = item.bpmnType || [];
+      if (!Array.isArray(controlTypes)) {
+        controlTypes = [controlTypes];
+      }
+      if (nodeDefinitionType) {
+        return [nodeDefinitionType];
+      }
+      return controlTypes;
+    },
+
+    getAlternateType(item) {
+      if (item.type) {
+        return item.type;
+      }
+      return item.component?.node?.type;
+    },
+
+    bisectNode(node) {
+      if (!this.linkModel) {
+        return;
+      }
+
+      const nodeId = node.definition.id;
+      const element = this.getElementByNodeId(nodeId);
+
+      if (!this.canBisect(element)) {
+        return;
+      }
+
+      const size = element.size();
+      this.paperManager.performAtomicAction(() => {
+        element.translate(-Math.round(size.width / 2), -Math.round(size.height / 2));
+        this.bisectElement(element, this.linkModel);
+        this.$refs.selector.updateSelectionBox();
+      });
+
+      this.hoveredLinkModel = null;
+      this.linkModel = null;
+    },
+
+    bisectElement(element, link) {
+      const originalTargetElement = link.getTargetCell();
+
+      // Update target of the existing link in the UI
+      link.component.setTarget(element);
+
+      const linkDefinition = link.component.node.definition;
+      const elementDefinition = element.component.node.definition;
+      const originalTargetDefinition = linkDefinition.get('targetRef');
+      const originalTargetIncomingNodes = originalTargetDefinition.get('incoming');
+
+      // Remove the existing link from the original target in the bpmn definition
+      originalTargetDefinition.set('incoming', originalTargetIncomingNodes.filter(link => link !== linkDefinition));
+
+      // Update the existing link in the bpmn definition to point to our new element
+      linkDefinition.set('targetRef', elementDefinition);
+
+      // Update our new element to have the existing link as a target 
+      elementDefinition.get('incoming').push(linkDefinition);
+
+
+      // Handle splitting vertices
+      let vertices = link.vertices();
+      const linkView = this.paper.findViewByModel(link);
+      const localClick = this.paper.clientToLocalPoint(this.clickPosition);
+      let nearestVertex = linkView.getVertexIndex(localClick.x, localClick.y);
+      if (vertices.length > 0) {
+        nearestVertex--;
+      }
+
+      // Add vertices after the drop point to the new link
+      const newVertices = [];
+      vertices.forEach((vertex, index) => {
+        if (index > nearestVertex) {
+          newVertices.push(vertex);
+        }
+      });
+
+      // Remove new vertices from the existing link
+      let vertexToRemove = nearestVertex + 1;
+      while (vertices.length > vertexToRemove) {
+        link.removeVertex(vertexToRemove);
+        vertices = link.vertices();
+      }
+
+      // Reset the end waypoint for the existing link to the center of the new element in the bpmn definition
+      const linkDiagram = link.component.node.diagram;
+      const waypoints = linkDiagram.get('waypoint');
+
+      // Remove the last waypoint
+      waypoints.pop();
+
+      // Create a new end waypoint for the existing link
+      const newEndWaypoint = this.moddle.create('dc:Point', this.getCenterPosition(element));
+
+      // Add it to the existing link
+      linkDiagram.set('waypoint', [
+        ...waypoints,
+        newEndWaypoint,
+      ]);
+
+      // User helper to add a new link from our new element to the existing links original original target.
+      // This takes care of both the UI and the BPMN definition
+      this.newOutgoingLink(element, originalTargetElement, newVertices);
+    },
+    
+    getCenterPosition(element) {
+      const size = element.size();
+      const position = element.position();
+      return {
+        x: position.x + size.width / 2,
+        y: position.y + size.height / 2,
+      };
+    },
+
+    newOutgoingLink(source, target, newVertices) {
+      const waypointsFromVertices = newVertices.map(vertex => {
+        return {
+          x: vertex.x,
+          y: vertex.y,
+        };
+      });
+      const flow = new SequenceFlow(this.nodeRegistry, this.moddle, this.paper);
+      const waypoints = [
+        this.getCenterPosition(source),
+        ...waypointsFromVertices,
+        this.getCenterPosition(target),
+      ];
+
+      const newFlowNode = flow.makeFlowNode(source, target, waypoints);
+      this.addNode(newFlowNode);
+    },
+
+    resetLinkColor() {
+      if (this.originalHoveredLink) {
+        this.originalHoveredLink.attr('line/stroke', this.originalColor);
+      }
+    },
+
+    addingEligibleItem() {
+      const addingNewElement = nodeTypesStore.getters.getSelectedNode;
+      if (addingNewElement) {
+        if (this.canBisect(addingNewElement)) {
+          return true;
+        }
+      }
+      return false;
+    },
+
+    addElementTooltip() {
+      const el = document.createElement('div');
+      el.innerHTML = this.$t('Drop to add to this flow');
+      el.classList.add('element-tooltip');
+      document.body.appendChild(el);
+      document.addEventListener('mousemove', this.setTooltipPosition);
+
+      el.style.zIndex = '9999';
+
+      this.tooltipEl = el;
+      this.setTooltipPosition();
+    },
+
+    setTooltipPosition() {
+      let left = 0;
+      let top = 0;
+
+      if (this.activeElement) { // Moving an existing element
+
+        const elementPosition = this.activeElement.position();
+        const elementSize = this.activeElement.size();
+        const bottomCenter = {
+          x: elementPosition.x + elementSize.width / 2,
+          y: elementPosition.y + elementSize.height,
+        };
+        const realBottomCenter = this.paper.localToClientPoint(bottomCenter);
+
+        const tooltipTopCenter = {
+          x: realBottomCenter.x - this.tooltipEl.offsetWidth / 2,
+          y: realBottomCenter.y + 10,
+        };
+
+        left = tooltipTopCenter.x;
+        top = tooltipTopCenter.y;
+
+      } else if (this.ghostNode) { // Creating a new element
+
+        const bottomCenter = {
+          x: this.ghostNode.offsetLeft + (this.ghostNode.offsetWidth / 2),
+          y: this.ghostNode.offsetTop + this.ghostNode.offsetHeight,
+        };
+
+        const tooltipTopCenter = {
+          x: bottomCenter.x - this.tooltipEl.offsetWidth / 2,
+          y: bottomCenter.y + 10,
+        };
+
+        left = tooltipTopCenter.x;
+        top = tooltipTopCenter.y;
+
+      }
+
+      this.tooltipEl.style.left = left + 'px';
+      this.tooltipEl.style.top = top + 'px';
+    },
+
+    removeElementTooltip() {
+      if (this.tooltipEl) {
+        document.removeEventListener('mousemove', this.setTooltipPosition);
+        document.body.removeChild(this.tooltipEl);
+        this.tooltipEl = null;
+      }
+    },
+  },
+};

package/src/mixins/transparentDragging.js

@@ -0,0 +1,45 @@
+import { highlighters, dia } from 'jointjs';
+
+export default {
+  data() {
+    return {
+      hasTransparency: {},
+    };
+  },
+  methods: {
+    initTransparentDragging() {
+      this.paperManager.addEventHandler('cell:pointerup blank:pointerup', () => {
+        this.removeTransparency();
+      });
+
+      this.graph.on('change:position', (model) => {
+        this.addTransparency(model);
+      });
+
+      this.$on('node-added', (node) => {
+        const nodeId = node.definition.id;
+        const element = this.getElementByNodeId(nodeId);
+        const view = this.paper.findViewByModel(element);
+        this.removeTransparency(view);
+      });
+    },
+    addTransparency(model) {
+      if (model.id in this.hasTransparency) {
+        return;
+      }
+      const view = this.paper.findViewByModel(model);
+      highlighters.addClass.add(view, 'root', 'transparent-highlighter', { className: 'transparent-cell' });
+      this.hasTransparency[model.id] = view;
+    },
+    removeTransparency() {
+      let atLeastOneRemoved = false;
+      Object.values(this.hasTransparency).forEach((view) => {
+        dia.HighlighterView.remove(view, 'transparent-highlighter');
+        atLeastOneRemoved = true;
+      });
+      if (atLeastOneRemoved) {
+        this.paper.dumpViews();
+      }
+    },
+  },
+};