@processmaker/modeler 1.30.3 → 1.32.0

package/src/components/crown/crownButtons/icons/index.js

@@ -0,0 +1,12 @@
+export { faBoundaryEvent } from './faBoundaryEvent.js';
+export { faConnectElements } from './faConnectElements';
+export { faLaneAbove } from './faLaneAbove';
+export { faLaneBelow } from './faLaneBelow';
+export { faCenterHorizontally } from './faCenterHorizontally';
+export { faCenterVertically } from './faCenterVertically';
+export { faAlignLeft } from './faAlignLeft';
+export { faAlignRight } from './faAlignRight';
+export { faAlignBottom } from './faAlignBottom';
+export { faAlignTop } from './faAlignTop';
+export { faDistributeHorizontally } from './faDistributeHorizontally';
+export { faDistributeVertically } from './faDistributeVertically';

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

@@ -2,18 +2,19 @@ $crown-top-chevron: 0.8rem;
 $crown-left-chevron: 0.3rem;
 
 .crown-config {
-  background-color: $primary-color;
+  background-color: $primary-white;
   position: absolute;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: auto;
-  height: 1.85rem;
+  padding: 0 3px 0 3px;
+  height: 2.5rem;
   border-radius: 5px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
 
   &::after {
     @include chevron($crown-top-chevron, $crown-left-chevron);
   }
-}
-
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="crown-config" :style="style" v-if="showCrown && !isMultiselect" role="menu">
+  <div class="crown-config" :style="style" v-if="showCrownConfig" role="menu">
     <slot />
 
     <association-flow-button
@@ -174,6 +174,9 @@ export default {
     this.$t = this.$t.bind(this);
   },
   computed: {
+    showCrownConfig() {
+      return this.showCrown && !this.isMultiselect && store.getters.isReadOnly === false;
+    },
     isMultiselect() {
       const countSelected = store.getters.highlightedShapes.length;
       return countSelected > 1;
@@ -233,7 +236,7 @@ export default {
       const { x, y, width } = shapeView.getBBox({ useModelGeometry: !this.isTextAnnotation && !this.isFlow });
 
       this.style = {
-        top: `${y - 45}px`,
+        top: `${y - 52}px`,
         left: `${x + width - 20}px`,
         cursor: 'pointer',
       };

package/src/components/crown/crownMultiselect/crownAlign.scss

@@ -0,0 +1,20 @@
+$crown-top-chevron: 1.8rem;
+$crown-right-chevron: 8.1rem;
+
+.crown-align {
+  background-color: $primary-white;
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  padding: 0 3px 0 3px;
+  height: 2.5rem;
+  border-radius: 5px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+
+  &::after {
+    @include chevron($crown-top-chevron, $crown-right-chevron);
+  }
+}

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

@@ -0,0 +1,302 @@
+<template>
+  <div
+    class="crown-config crown-align"
+    :style="style"
+    v-if="isMultiSelect" role="menu"
+  >
+    <slot />
+
+    <button
+      v-for="button in availableButtons"
+      :key="button.label"
+      :aria-label="button.label"
+      class="crown-button"
+      :title="button.label"
+      :data-test="button.testId"
+      :role="button.role"
+      :disabled="button.disabled"
+      @mousedown.stop.prevent
+      @click.stop.prevent="button.action"
+    >
+      <font-awesome-icon :icon="['fpm', `fa-${button.icon}`]"/>
+    </button>
+  </div>
+</template>
+
+<script>
+import store from '@/store';
+import runningInCypressTest from '@/runningInCypressTest';
+import { getShapesOptions } from '@/components/nodes/utilities/shapeGroup';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faAlignBottom,
+  faAlignTop,
+  faAlignRight,
+  faAlignLeft,
+  faCenterHorizontally,
+  faCenterVertically,
+  faDistributeVertically,
+  faDistributeHorizontally,
+} from '../crownButtons/icons';
+import { get } from 'lodash';
+
+export default {
+  props: {
+    paper: Object,
+    hasPools: Boolean,
+  },
+  data() {
+    return {
+      runningInCypressTest: runningInCypressTest(),
+      showCrown: false,
+      savePositionOnPointerupEventSet: false,
+      style: null,
+      taskDropdownInitiallyOpen: this.paperNotRendered(),
+      showReplaceModal: false,
+      nodeToReplace: null,
+      buttons: [
+        {
+          label: this.$t('Align Left'),
+          icon: 'align-left',
+          testId: 'align-left',
+          role: 'menuitem',
+          action: this.alignLeft,
+          condition: 'align.left',
+          disabled: false,
+        },
+        {
+          label: this.$t('Center Horizontally'),
+          icon: 'center-horizontally',
+          testId: 'align-horizontally',
+          role: 'menuitem',
+          action: this.centerHorizontally,
+          condition: 'align.horizontalCenter',
+          disabled: false,
+        },
+        {
+          label: this.$t('Align Right'),
+          icon: 'align-right',
+          testId: 'align-right',
+          role: 'menuitem',
+          action: this.alignRight,
+          condition: 'align.right',
+          disabled: false,
+        },
+        {
+          label: this.$t('Align Bottom'),
+          icon: 'align-bottom',
+          testId: 'align-bottom',
+          role: 'menuitem',
+          action: this.alignBottom,
+          condition: 'align.bottom',
+          disabled: false,
+        },
+        {
+          label: this.$t('Center Vertically'),
+          icon: 'center-vertically',
+          testId: 'center-vertically',
+          role: 'menuitem',
+          action: this.centerVertically,
+          condition: 'align.verticalCenter',
+          disabled: false,
+        },
+        {
+          label: this.$t('Align Top'),
+          icon: 'align-top',
+          testId: 'align-top',
+          role: 'menuitem',
+          action: this.alignTop,
+          condition: 'align.top',
+          disabled: false,
+        },
+        {
+          label: this.$t('Distribute Horizontally'),
+          icon: 'distribute-horizontally',
+          testId: 'distribute-horizontally',
+          role: 'menuitem',
+          action: this.distributeHorizontally,
+          condition: 'distribute.horizontally',
+          disabled: false,
+        },
+        {
+          label: this.$t('Distribute Vertically'),
+          icon: 'distribute-vertically',
+          testId: 'distribute-vertically',
+          role: 'menuitem',
+          action: this.distributeVertically,
+          condition: 'distribute.vertically',
+          disabled: false,
+        },
+        // add more buttons as necessary
+      ],
+    };
+  },
+  created() {
+    this.$t = this.$t.bind(this);
+    library.add(faAlignRight);
+    library.add(faAlignLeft);
+    library.add(faAlignBottom);
+    library.add(faAlignTop);
+    library.add(faCenterVertically);
+    library.add(faCenterHorizontally);
+    library.add(faDistributeVertically);
+    library.add(faDistributeHorizontally);
+  },
+  watch: {
+    selectedShapes() {
+      this.$root.$emit('bv::hide::tooltip');
+    },
+  },
+  computed: {
+    selectedShapes() {
+      this.disableButtons();
+      return getShapesOptions(store.getters.highlightedShapes);
+    },
+    isMultiSelect() {
+      const countSelected = store.getters.highlightedShapes.length;
+      return countSelected > 1;
+    },
+    highlightedShapes: () => store.getters.highlightedShapes,
+    availableButtons() {
+      const hasPoolsSelected = this.hasPools;
+      return this.buttons.filter(button => {
+        if (button.testId === 'copy-button') {
+          return !hasPoolsSelected;
+        }
+        if (button.testId === 'clone-button') {
+          return !hasPoolsSelected;
+        }
+        return true;
+      });
+    },
+  },
+  methods: {
+    disableButtons() {
+      let shapes = getShapesOptions(store.getters.highlightedShapes);
+      this.buttons.forEach(button => {
+        button.disabled = !get(shapes.can, button.condition, true);
+      });
+    },
+    alignLeft() {
+      this.undoableAction(this.selectedShapes.align.left);
+    },
+    centerHorizontally() {
+      this.undoableAction(this.selectedShapes.align.horizontalCenter);
+    },
+    alignRight() {
+      this.undoableAction(this.selectedShapes.align.right);
+    },
+    alignBottom() {
+      this.undoableAction(this.selectedShapes.align.bottom);
+    },
+    centerVertically() {
+      this.undoableAction(this.selectedShapes.align.verticalCenter);
+    },
+    alignTop() {
+      this.undoableAction(this.selectedShapes.align.top);
+    },
+    distributeHorizontally() {
+      this.undoableAction(this.selectedShapes.distribute.horizontally);
+    },
+    distributeVertically() {
+      this.undoableAction(this.selectedShapes.distribute.vertically);
+    },
+
+    undoableAction(actionFn) {
+      actionFn();
+      this.$emit('save-state');
+      this.disableButtons();
+    },
+
+    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 lang="scss" scoped>
+.crown-align {
+  top: -58px;
+  left: -35%;
+  pointer-events: auto;
+}
+.crown-button {
+  border:none;
+  display: flex;
+  background-color: $primary-white;
+  border-radius: 4px;
+  color: $crown-icon-neutral;
+  width: 35px;
+  height: 35px;
+  font-size: 20px;
+  padding: 4px;
+}
+.crown-button:hover {
+  background-color: $crown-icon-hover-bg;
+  color: $crown-icon-neutral;
+}
+.crown-button:active {
+  background-color: $cronw-icon-active-bg;
+  color: $crown-icon-active;
+}
+
+.crown-button:disabled {
+  background-color: #eaeaea;
+  color: $crown-icon-active;
+}
+
+.crown-button:focus {
+  background-color: #DEEBFF;
+  color: $crown-icon-active;
+}
+
+img {
+  margin: 0px 5px;
+  height: 20px;
+  width: 20px;
+  padding:2px;
+  fill: #5faaee;
+}
+.crown-button svg {
+  margin:auto;
+}
+.crown-button i {
+  margin:auto;
+}
+</style>
+
+<style lang="scss" src="./crownAlign.scss" />

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

@@ -11,29 +11,35 @@
       v-for="button in availableButtons"
       :key="button.label"
       :aria-label="button.label"
-      class="btn"
+      class="crown-button"
       :title="button.label"
       :data-test="button.testId"
       :role="button.role"
-      @mousedown.stop.prevent
-      @click.stop.prevent="button.action"
+      @click="button.action"
     >
-      <i :class="`fa fa-${button.icon} text-white`" />
+      <font-awesome-icon v-if="button.iconPrefix === 'fpm'" :icon="[button.iconPrefix, `fa-${button.icon}`]"/>
+      <i v-else :class="`${button.iconPrefix} fa-${button.icon} text-dark`" />
     </button>
+    <crown-align v-show="showAlignmentButtons" :paper="paper"/>
   </div>
 </template>
 
 <script>
 import store from '@/store';
 import runningInCypressTest from '@/runningInCypressTest';
+import crownAlign from './crownAlign';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCenterVertically } from '../crownButtons/icons';
 
 export default {
   props: {
     paper: Object,
     hasPools: Boolean,
   },
+  components:{ crownAlign },
   data() {
     return {
+      showAlignmentButtons: false,
       runningInCypressTest: runningInCypressTest(),
       showCrown: false,
       savePositionOnPointerupEventSet: false,
@@ -44,6 +50,7 @@ export default {
       buttons: [
         {
           label: 'Copy Selection',
+          iconPrefix: 'fa',
           icon: 'clipboard',
           testId: 'copy-button',
           role: 'menuitem',
@@ -51,13 +58,23 @@ export default {
         },
         {
           label: 'Clone Selection',
+          iconPrefix: 'fa',
           icon: 'copy',
           testId: 'clone-button',
           role: 'menuitem',
           action: this.cloneSelection,
         },
+        {
+          label: 'Align',
+          iconPrefix: 'fpm',
+          icon: 'center-vertically',
+          testId: 'align',
+          role: 'menuitem',
+          action: this.showAlign,
+        },
         {
           label: 'Delete Element',
+          iconPrefix: 'fa',
           icon: 'trash-alt',
           testId: 'delete-button',
           role: 'menuitem',
@@ -69,6 +86,7 @@ export default {
   },
   created() {
     this.$t = this.$t.bind(this);
+    library.add(faCenterVertically);
   },
   computed: {
     isMultiSelect() {
@@ -90,6 +108,9 @@ export default {
     },
   },
   methods: {
+    showAlign() {
+      this.showAlignmentButtons = !this.showAlignmentButtons;
+    },
     copySelection() {
       this.$emit('copy-selection');
     },
@@ -139,24 +160,49 @@ export default {
 };
 </script>
 
-<style scoped>
+
+<style lang="scss" scoped>
 .crown-multiselect {
   top: -38px;
   left: 50%;
   pointer-events: auto;
 }
-.btn {
-  border: none;
-  padding: 0;
-  margin-top: 0;
+.crown-button {
+  border:none;
   display: flex;
+  background-color: $primary-white;
+  border-radius: 4px;
+  color: $crown-icon-neutral;
+  width: 35px;
+  height: 35px;
+  font-size: 20px;
+  padding: 4px;
+}
+.crown-button:hover {
+  background-color: $crown-icon-hover-bg;
+  color: $crown-icon-neutral;
 }
+.crown-button:active {
+  background-color: $cronw-icon-active-bg;
+  color: $crown-icon-active;
+}
+
+.crown-button:focus {
+  background-color: #DEEBFF;
+  color: $crown-icon-active;
+}
+
 img {
-  margin: 0px 10px;
-  height: 15px;
+  margin: 0px 5px;
+  height: 20px;
+  width: 20px;
+  padding:2px;
+  fill: #5faaee;
+}
+.crown-button svg {
+  margin:auto;
 }
-i {
-  margin: 0px 10px;
-  font-size: 15px;
+.crown-button i {
+  margin:auto;
 }
 </style>

package/src/components/hotkeys/escKey.js

@@ -0,0 +1,20 @@
+import nodeTypesStore from '@/nodeTypesStore';
+
+export default {
+  methods: {
+    escapeKeyHandler(event) {
+      if (this.selectedNode) {
+        event.preventDefault();
+        window.ProcessMaker.EventBus.$emit('custom-pointerclick', event);
+      }
+    },
+  },
+  computed: {
+    selectedNode() {
+      return nodeTypesStore.getters.getSelectedNode;
+    },
+    movedElement() {
+      return nodeTypesStore.getters.getGhostNode;
+    },
+  },
+};

package/src/components/hotkeys/main.js

@@ -1,10 +1,11 @@
 import ZoomInOut from './zoomInOut';
 import CopyPaste from './copyPaste.js';
-import store from '@/store';
 import moveShapeByKeypress from './moveWithArrowKeys';
+import EscKey from './escKey';
+import store from '@/store';
 
 export default {
-  mixins: [ZoomInOut, CopyPaste],
+  mixins: [ZoomInOut, CopyPaste, EscKey],
   computed: {
     clientLeftPaper() {
       return store.getters.clientLeftPaper;
@@ -19,6 +20,7 @@ export default {
       // Pass event to all handlers
       this.zoomInOutHandler(event, options);
       this.copyPasteHandler(event, options);
+      this.escapeKeyHandler(event);
     },
     keyupListener(event) {
       if (event.code === 'Space') {

package/src/components/miniPaper/MiniPaper.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="mini-paper-container position-absolute" @click="movePaper" :class="isOpen ? 'opened' : 'closed'">
+  <div
+    class="mini-paper-container"
+    @click="movePaper"
+    :class="isOpen ? 'opened' : 'closed'"
+    data-cy="mini-map-box"
+  >
     <div ref="miniPaper" class="mini-paper" />
   </div>
 </template>
@@ -11,6 +16,8 @@ export default {
   data() {
     return {
       miniMapManager: null,
+      newX: 0,
+      newY: 0,
     };
   },
   props: {
@@ -35,10 +42,17 @@ export default {
       const { sx: scaleX, sy: scaleY } = this.paperManager.scale;
       const { clientWidth, clientHeight } = this.paperManager.paper.el;
       const { newX, newY } = this.miniMapManager.calculateNewPaperPosition(offsetX, offsetY, scaleX, scaleY, clientWidth, clientHeight);
-      this.paperManager.translate(newX, newY);
+      this.newX = newX;
+      this.newY = newY;
+
+      this.paperManager.translate(this.newX, this.newY);
     },
   },
   async mounted() {
+    if (window.Cypress) {
+      window.MiniPaper = this;
+    }
+
     await this.$nextTick();
 
     this.miniMapManager = MiniMapManager.factory(this.graph, this.$refs.miniPaper);

package/src/components/miniPaper/miniPaper.scss

@@ -1,13 +1,11 @@
-$mini-paper-container-top-position: 4.75rem;
-$mini-paper-container-right-position: 17.5rem;
-$mini-paper-container-right-expanded-position: 2rem;
-$transition: 0.3s;
+$transition: 0.1s;
 
 .mini-paper-container {
-  top: $mini-paper-container-top-position;
-  right: $mini-paper-container-right-position;
-  z-index: 2;
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  position: absolute;
+  bottom: 60px;
+  left: 0;
+  display: flex;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border: 1px solid $border-color;
   cursor: pointer;
 
@@ -15,10 +13,6 @@ $transition: 0.3s;
     pointer-events: none;
   }
 
-  &.expanded {
-    right: $mini-paper-container-right-expanded-position;
-  }
-
   &.closed {
     opacity: 0;
     visibility: hidden;