@processmaker/modeler 1.24.4 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.24.4",
+  "version": "1.26.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",

package/src/components/controls/controls.scss

@@ -3,7 +3,7 @@ $controls-column-compressed-max-width: 95px;
 $controls-transition: 0.3s;
 
 .controls {
-  z-index: 1;
+  z-index: 2;
   padding-bottom: $toolbar-height;
 
   &-column {
@@ -27,8 +27,13 @@ $controls-transition: 0.3s;
   background: #f7f7f7;
 }
 
-.list-group-item:first-child {
-  border-top: 0;
+.list-group-item {
+  &:focus-visible {
+    outline: none;
+  }
+  &:first-child {
+    border-top: 0;
+  }
 }
 
 .tool {

package/src/components/crown/crownConfig/crownConfig.scss

@@ -4,7 +4,7 @@ $crown-left-chevron: 0.3rem;
 .crown-config {
   background-color: $primary-color;
   position: absolute;
-  z-index: 0;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="crown-config" :style="style" v-if="showCrown" role="menu">
+  <div class="crown-config" :style="style" v-if="showCrown && !isMultiselect" role="menu">
     <slot />
 
     <association-flow-button
@@ -168,6 +168,10 @@ export default {
     this.$t = this.$t.bind(this);
   },
   computed: {
+    isMultiselect() {
+      const countSelected = store.getters.highlightedShapes.length;
+      return countSelected > 1;
+    },
     isFlow() {
       return [
         'processmaker-modeler-sequence-flow',

package/src/components/crown/crownMultiselect/crownMultiselect.vue

@@ -0,0 +1,140 @@
+<template>
+  <div
+    class="crown-config crown-multiselect"
+    :style="style"
+    v-if="isMultiSelect"
+    role="menu"
+  >
+    <slot />
+
+    <button
+      v-for="button in buttons"
+      :key="button.label"
+      :aria-label="button.label"
+      class="btn"
+      :title="button.label"
+      :data-test="button.testId"
+      :role="button.role"
+      @mousedown.stop.prevent
+      @click.stop.prevent="button.action"
+    >
+      <i :class="`fa fa-${button.icon} text-white`" />
+    </button>
+  </div>
+</template>
+
+<script>
+import store from '@/store';
+import runningInCypressTest from '@/runningInCypressTest';
+
+export default {
+  props: {
+    paper: Object,
+  },
+  data() {
+    return {
+      runningInCypressTest: runningInCypressTest(),
+      showCrown: false,
+      savePositionOnPointerupEventSet: false,
+      style: null,
+      taskDropdownInitiallyOpen: this.paperNotRendered(),
+      showReplaceModal: false,
+      nodeToReplace: null,
+      buttons: [
+        {
+          label: 'Copy Element',
+          icon: 'copy',
+          testId: 'copy-button',
+          role: 'menuitem',
+          action: this.copyElement,
+        },
+        {
+          label: 'Delete Element',
+          icon: 'trash-alt',
+          testId: 'delete-button',
+          role: 'menuitem',
+          action: this.deleteElement,
+        },
+        // add more buttons as necessary
+      ],
+    };
+  },
+  created() {
+    this.$t = this.$t.bind(this);
+  },
+  computed: {
+    isMultiSelect() {
+      const countSelected = store.getters.highlightedShapes.length;
+      return countSelected > 1;
+    },
+    highlightedShapes: () => store.getters.highlightedShapes,
+  },
+  methods: {
+    copyElement() {
+      // @todo: Implement copyElement
+      this.$emit('copy-nodes');
+    },
+    deleteElement() {
+      this.$emit('remove-nodes');
+    },
+    paperNotRendered() {
+      return !this.isRendering;
+    },
+    setNodePosition() {
+      this.shape.stopListening(
+        this.paper,
+        'element:pointerup',
+        this.setNodePosition
+      );
+      this.savePositionOnPointerupEventSet = false;
+
+      if (!store.getters.allowSavingElementPosition) {
+        return;
+      }
+
+      this.$emit('save-state');
+    },
+    paperDoneRendering() {
+      if (!this.isRendering) {
+        return;
+      }
+
+      return new Promise((resolve) => this.paper.once('render:done', resolve));
+    },
+    setUpCrownConfig() {
+      this.paper.on(
+        'render:done scale:changed translate:changed',
+        this.repositionCrown
+      );
+    },
+    setUpPositionHandling() {},
+  },
+  async mounted() {
+    await this.$nextTick();
+    await this.paperDoneRendering();
+    this.setUpCrownConfig();
+  },
+};
+</script>
+
+<style scoped>
+.crown-multiselect {
+  top: -38px;
+  left: 50%;
+  pointer-events: auto;
+}
+.btn {
+  border: none;
+  padding: 0;
+  margin-top: 0;
+  display: flex;
+}
+img {
+  margin: 0px 10px;
+  height: 15px;
+}
+i {
+  margin: 0px 10px;
+  font-size: 15px;
+}
+</style>

package/src/components/hotkeys/main.js

@@ -0,0 +1,62 @@
+import ZoomInOut from './zoomInOut';
+import store from '@/store';
+import moveShapeByKeypress from './moveWithArrowKeys';
+
+export default {
+  mixins: [ZoomInOut],
+  mounted() {
+    document.addEventListener('keydown', this.keydownListener);
+    document.addEventListener('keyup', this.keyupListener);
+  },
+  methods: {
+    handleHotkeys(event, options) {
+      // Pass event to all handlers
+      this.zoomInOutHandler(event, options);
+    },
+    keyupListener(event) {
+      if (event.code === 'Space') {
+        this.isGrabbing = false;
+        this.paperManager.removeEventHandler('blank:pointermove');
+      }
+    },
+    keydownListener(event) {
+      // Check if either the Control key (Windows/Linux) or the Meta key (macOS) is pressed
+      const isAppleOS = this.isAppleOS();
+      const mod = isAppleOS ? event.metaKey : event.ctrlKey;
+      let options = { mod, isAppleOS, modeler: this };
+      try {
+        this.handleHotkeys(event, options);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+
+      const focusIsOutsideDiagram = !event.target.toString().toLowerCase().includes('body');
+      if (focusIsOutsideDiagram) {
+        return;
+      }
+
+      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.paperManager.translate(
+              event.offsetX - this.canvasDragPosition.x,
+              event.offsetY - this.canvasDragPosition.y
+            );
+          }
+        });
+      }
+
+      moveShapeByKeypress(
+        event.key,
+        store.getters.highlightedShapes,
+        this.pushToUndoStack,
+      );
+    },
+  },
+};

package/src/components/hotkeys/zoomInOut.js

@@ -0,0 +1,29 @@
+export default {
+  methods: {
+    zoomInOutHandler(event, options) {
+      const isPlus = 
+        (event.key === '+' || event.key === 'NumpadAdd')
+        || (event.keyCode === 107 || event.keyCode === 187);
+
+      const isMinus = 
+        (event.key === '-' || event.key === 'NumpadSubtract')
+        || (event.keyCode === 109 || event.keyCode === 189);
+
+
+      if (isPlus && options.mod) {
+        this.zoomIn(event);
+      }
+      if (isMinus && options.mod) {
+        this.zoomOut(event);
+      }
+    },
+    zoomIn(event) {
+      event.preventDefault();
+      this.canvasScale = this.paperManager.scale.sx + this.scaleStep;
+    },
+    zoomOut(event) {
+      event.preventDefault();
+      this.canvasScale = Math.max(this.minimumScale, this.paperManager.scale.sx -= this.scaleStep);
+    },
+  },
+};

package/src/components/inspectors/InspectorPanel.vue

@@ -212,6 +212,7 @@ export default {
       return this.defaultInspectorHandler(omit(value, ['artifacts', 'flowElements', 'laneSets']));
     },
     setNodeProp(node, key, value) {
+      this.$emit('shape-resize');
       store.commit('updateNodeProp', { node, key, value });
     },
     defaultInspectorHandler(value) {

package/src/components/inspectors/inspector.scss

@@ -5,7 +5,7 @@ $inspector-column-max-width: 265px;
 }
 
 .inspector {
-  z-index: 1;
+  z-index: 2;
 
   &-container {
     text-align: left;