Merge pull request #1758 from ProcessMaker/epic/FOUR-11573

Modeler Updates V2

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;

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,
     };

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;
+    },
   },
 };

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');
+    },
+  },
+};