@processmaker/modeler 1.24.3 → 1.25.0

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.24.3",
+  "version": "1.25.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",
+    "run-cypress": "TZ=UTC cypress run",
     "lint": "vue-cli-service lint --no-fix",
     "build-bundle": "vue-cli-service build --target lib --name modeler ./src/components/nodes/index.js",
     "bundle-analyze": "npm run build-bundle -- --analyze",
@@ -75,7 +76,7 @@
     "@types/jest": "^24.9.1",
     "@vue/babel-preset-app": "^5.0.4",
     "@vue/cli-plugin-babel": "^4.5.9",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.9",
+    "@vue/cli-plugin-e2e-cypress": "5.0.0",
     "@vue/cli-plugin-eslint": "^4.5.9",
     "@vue/cli-plugin-unit-jest": "^4.5.9",
     "@vue/cli-service": "^4.5.9",
@@ -100,9 +101,9 @@
     "nyc": "^14.1.1",
     "sass": "^1.51.0",
     "sass-loader": "^8.0.2",
-    "stylelint": "^11.1.1",
-    "stylelint-config-recommended-scss": "^4.2.0",
-    "stylelint-scss": "^3.18.0",
+    "stylelint": "^15.2.0",
+    "stylelint-config-recommended-scss": "^9.0.1",
+    "stylelint-scss": "4.4.0",
     "vue-color": "^2.7.1",
     "vue-jest": "^3.0.5",
     "vue-loader": "latest",

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;