@processmaker/modeler 1.43.12 → 1.43.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.43.12",
+  "version": "1.43.13",
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
     "test:unit": "vue-cli-service test:unit",
@@ -91,7 +91,7 @@
     "@vue/cli-service": "~5.0.8",
     "@vue/test-utils": "^1.3.6",
     "@vue/vue2-jest": "^27.0.0-alpha.2",
-    "axios": "^0.21.0",
+    "axios": "1.6.0",
     "axios-mock-adapter": "^1.19.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",

package/src/ModelerApp.vue

@@ -3,7 +3,7 @@
 
     <b-card no-body class="h-100 rounded-0">
       <b-card-body class="overflow-hidden position-relative p-0 vh-100">
-        <modeler ref="modeler" @set-xml-manager="xmlManager = $event" @validate="validationErrors = $event" @warnings="warnings = $event" :decorations="decorations" />
+        <modeler ref="modeler" @saveBpmn="saveBpmn" @set-xml-manager="xmlManager = $event" @validate="validationErrors = $event" @warnings="warnings = $event" :decorations="decorations" />
       </b-card-body>
     </b-card>
 
@@ -72,6 +72,10 @@ export default {
     setUploadedXml(event) {
       this.uploadedXml = event.target.result;
     },
+    saveBpmn(payload) {
+      // save into browser storage
+      localStorage.setItem('bpmn', payload.xml);
+    },
   },
   created() {
     reader.onload = this.setUploadedXml;

package/src/assets/railBottom/pan-icon.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="25" viewBox="0 0 21 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9382 3.53434C17.4842 3.5337 17.0358 3.63595 16.6261 3.83356V3.0927C16.6263 2.35587 16.366 1.64317 15.8919 1.08302C15.4178 0.522879 14.7611 0.152131 14.0403 0.0375892C13.3194 -0.0769526 12.5817 0.0722438 11.9602 0.458293C11.3386 0.844342 10.874 1.44186 10.6502 2.14316C10.1839 1.8878 9.65994 1.75913 9.12962 1.76976C8.59929 1.78038 8.0808 1.92994 7.62494 2.20378C7.16908 2.47761 6.7915 2.86633 6.52919 3.33185C6.26688 3.79736 6.12884 4.3237 6.12861 4.85928V11.9256L5.71089 11.2488C5.30517 10.5418 4.63876 10.0258 3.85733 9.81346C3.0759 9.60115 2.24301 9.70983 1.54071 10.1158C0.838404 10.5217 0.323815 11.1918 0.109419 11.9797C-0.104977 12.7676 -0.00174257 13.6092 0.396557 14.3204C2.14613 18.049 3.56001 20.6934 5.17727 22.3462C6.81094 24.0201 8.66549 24.7333 11.3773 24.7333C13.9285 24.7304 16.3744 23.7058 18.1784 21.8843C19.9824 20.0628 20.9971 17.5931 21 15.0171V6.62586C21 5.80594 20.6774 5.0196 20.1032 4.43983C19.529 3.86006 18.7503 3.53434 17.9382 3.53434ZM19.2504 15.0171C19.2481 17.1248 18.4179 19.1454 16.9419 20.6358C15.4659 22.1261 13.4647 22.9644 11.3773 22.9668C9.14881 22.9668 7.71306 22.4279 6.42057 21.1063C4.97389 19.6257 3.64202 17.1149 1.96243 13.5354C1.95259 13.5135 1.94164 13.4921 1.92962 13.4714C1.75562 13.167 1.70849 12.8053 1.79862 12.4658C1.88875 12.1263 2.10874 11.8369 2.41021 11.6612C2.71168 11.4855 3.06992 11.4379 3.40613 11.5289C3.74234 11.6199 4.02897 11.842 4.20298 12.1464C4.20743 12.1553 4.21255 12.1638 4.21829 12.1718L6.25982 15.4842C6.36011 15.6476 6.51046 15.7735 6.68804 15.8428C6.86562 15.9121 7.06074 15.921 7.24379 15.8682C7.42685 15.8153 7.58783 15.7036 7.70232 15.5501C7.81681 15.3965 7.87856 15.2094 7.87818 15.0171V4.85928C7.87818 4.50789 8.01643 4.17088 8.26251 3.92241C8.50859 3.67394 8.84235 3.53434 9.19036 3.53434C9.53838 3.53434 9.87213 3.67394 10.1182 3.92241C10.3643 4.17088 10.5025 4.50789 10.5025 4.85928V11.484C10.5025 11.7182 10.5947 11.9429 10.7588 12.1085C10.9228 12.2742 11.1453 12.3673 11.3773 12.3673C11.6093 12.3673 11.8318 12.2742 11.9959 12.1085C12.16 11.9429 12.2521 11.7182 12.2521 11.484V3.0927C12.2521 2.7413 12.3904 2.4043 12.6365 2.15583C12.8825 1.90735 13.2163 1.76776 13.5643 1.76776C13.9123 1.76776 14.2461 1.90735 14.4922 2.15583C14.7382 2.4043 14.8765 2.7413 14.8765 3.0927V11.484C14.8765 11.7182 14.9686 11.9429 15.1327 12.1085C15.2968 12.2742 15.5193 12.3673 15.7513 12.3673C15.9833 12.3673 16.2058 12.2742 16.3698 12.1085C16.5339 11.9429 16.6261 11.7182 16.6261 11.484V6.62586C16.6261 6.27447 16.7643 5.93747 17.0104 5.68899C17.2565 5.44052 17.5902 5.30093 17.9382 5.30093C18.2863 5.30093 18.62 5.44052 18.8661 5.68899C19.1122 5.93747 19.2504 6.27447 19.2504 6.62586V15.0171Z" fill="#44494E"/>
+</svg>

package/src/components/crown/crownConfig/crownConfig.vue

@@ -162,11 +162,6 @@ export default {
 
       this.showCrown = this.highlightedShapes[0] === this.shape;
     },
-    highlighted(highlighted) {
-      if (!highlighted) {
-        this.taskDropdownInitiallyOpen = false;
-      }
-    },
     shape() {
       if (this.highlighted) {
         this.showCrown = true;
@@ -179,7 +174,7 @@ export default {
       showCrown: false,
       savePositionOnPointerupEventSet: false,
       style: null,
-      taskDropdownInitiallyOpen: this.paperNotRendered(),
+      taskDropdownInitiallyOpen: false,
       showReplaceModal: false,
       nodeToReplace: null,
     };

package/src/components/hotkeys/main.js

@@ -1,11 +1,12 @@
 import ZoomInOut from './zoomInOut';
+import UndoRedo from './undoRedo';
 import CopyPaste from './copyPaste.js';
 import moveShapeByKeypress from './moveWithArrowKeys';
 import EscKey from './escKey';
 import store from '@/store';
 
 export default {
-  mixins: [ZoomInOut, CopyPaste, EscKey],
+  mixins: [ZoomInOut, CopyPaste, EscKey, UndoRedo],
   computed: {
     clientLeftPaper() {
       return store.getters.clientLeftPaper;
@@ -19,13 +20,13 @@ export default {
     handleHotkeys(event, options) {
       // Pass event to all handlers
       this.zoomInOutHandler(event, options);
+      this.undoRedoHandler(event, options);
       this.copyPasteHandler(event, options);
       this.escapeKeyHandler(event);
     },
     keyupListener(event) {
       if (event.code === 'Space') {
-        this.isGrabbing = false;
-        this.paperManager.removeEventHandler('blank:pointermove');
+        this.panMode = false;
       }
     },
     keydownListener(event) {
@@ -46,19 +47,10 @@ export default {
       }
 
       if (event.code === 'Space') {
-        this.isGrabbing = true;
-        this.paperManager.addEventHandler('blank:pointermove', (event, x, y) => {
-          if (!this.canvasDragPosition) {
-            const scale = this.paperManager.scale;
-            this.canvasDragPosition = { x: x * scale.sx, y: y * scale.sy };
-          }
-          if (this.canvasDragPosition && !this.clientLeftPaper) {
-            this.paperManager.translate(
-              event.offsetX - this.canvasDragPosition.x,
-              event.offsetY - this.canvasDragPosition.y,
-            );
-          }
-        });
+        if (this.panMode) {
+          return;
+        }
+        this.panMode = true;
       }
 
       moveShapeByKeypress(
@@ -67,5 +59,38 @@ export default {
         this.pushToUndoStack,
       );
     },
+    startPanning() {
+      this.panning = true;
+      this.paperManager.addEventHandler('blank:pointermove', this.blankMoveHandler);
+      this.paperManager.addEventHandler('cell:pointermove', this.cellMoveHandler);
+    },
+    blankMoveHandler(event, x, y) {
+      this.checkCanvasDragPosition(x, y);
+      this.translatePaper(event);
+    },
+    cellMoveHandler(shape, event, x, y) {
+      this.checkCanvasDragPosition(x, y);
+      this.translatePaper(event);
+    },
+    checkCanvasDragPosition(x, y) {
+      if (!this.canvasDragPosition) {
+        const scale = this.paperManager.scale;
+        this.canvasDragPosition = { x: x * scale.sx, y: y * scale.sy };
+      }
+    },
+    translatePaper(event) {
+      if (this.clientLeftPaper) {
+        return;
+      }
+      this.paperManager.translate(
+        event.offsetX - this.canvasDragPosition.x,
+        event.offsetY - this.canvasDragPosition.y,
+      );
+    },
+    stopPanning() {
+      this.paperManager.removeEventHandler('blank:pointermove', this.blankMoveHandler);
+      this.paperManager.removeEventHandler('cell:pointermove', this.cellMoveHandler);
+      this.panning = false;
+    },
   },
 };

package/src/components/hotkeys/undoRedo.js

@@ -0,0 +1,24 @@
+export default {
+  methods: {
+    undoRedoHandler(event, options) {
+      const key = event.key.toLowerCase();
+      const isRedo = key === 'y';
+      const isUndo= key === 'z';
+
+      if (isUndo && options.mod) {
+        this.undo(event);
+      }
+      if (isRedo && options.mod) {
+        this.redo(event);
+      }
+    },
+    undo(event) {
+      event.preventDefault();
+      this.$root.$emit('undo-keyboard-shortcut');
+    },
+    redo(event) {
+      event.preventDefault();
+      this.$root.$emit('redo-keyboard-shortcut');
+    },
+  },
+};