@processmaker/modeler 1.30.2 → 1.31.0

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;
@@ -222,8 +225,6 @@ export default {
       if (!store.getters.allowSavingElementPosition) {
         return;
       }
-
-      this.$emit('save-state');
     },
     repositionCrown() {
       const shapeView = this.shape.findView(this.paper);
@@ -235,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/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;

package/src/components/modeler/Modeler.vue

@@ -23,16 +23,10 @@
         :target="getTooltipTarget"
         :title="tooltipTitle"
       />
-
-      <controls
-        :nodeTypes="nodeTypes"
-        :compressed="panelsCompressed"
-        :parent-height="parentHeight"
-        :allowDrop="allowDrop"
-        @drag="validateDropTarget"
-        @handleDrop="handleDrop"
-        class="controls h-100 rounded-0 border-top-0 border-bottom-0 border-left-0"
-        :canvas-drag-position="canvasDragPosition"
+      <explorer-rail
+        :node-types="nodeTypes"
+        @set-cursor="cursor = $event"
+        @onCreateElement="onCreateElementHandler"
       />
       <b-col
         class="paper-container h-100 pr-4"
@@ -44,13 +38,6 @@
         <div ref="paper" data-test="paper" class="main-paper" />
       </b-col>
 
-      <mini-paper
-        :isOpen="miniMapOpen"
-        :paperManager="paperManager"
-        :graph="graph"
-        :class="{ 'expanded' : panelsCompressed }"
-      />
-
       <InspectorPanel
         ref="inspector-panel"
         v-show="!(highlightedNodes.length > 1)"
@@ -111,6 +98,18 @@
         @default-flow="toggleDefaultFlow"
         @shape-resize="shapeResize"
       />
+
+      <RailBottom
+        :nodeTypes="nodeTypes"
+        :paper-manager="paperManager"
+        :graph="graph"
+        :is-rendering="isRendering"
+        @load-xml="loadXML"
+        @clearSelection="clearSelection"
+        @set-cursor="cursor = $event"
+        @onCreateElement="onCreateElementHandler"
+      />
+
       <selection
         v-if="paper"
         ref="selector"
@@ -132,7 +131,7 @@ import _ from 'lodash';
 import { dia } from 'jointjs';
 import boundaryEventConfig from '../nodes/boundaryEvent';
 import BpmnModdle from 'bpmn-moddle';
-import controls from '../controls/controls';
+import ExplorerRail from '../rails/explorer-rail/explorer';
 import pull from 'lodash/pull';
 import remove from 'lodash/remove';
 import store from '@/store';
@@ -144,7 +143,6 @@ import { getNodeIdGenerator } from '../../NodeIdGenerator';
 import Process from '../inspectors/process';
 import runningInCypressTest from '@/runningInCypressTest';
 import getValidationProperties from '@/targetValidationUtils';
-import MiniPaper from '@/components/miniPaper/MiniPaper';
 import { id as laneId } from '@/components/nodes/poolLane/config';
 import { id as processId } from '@/components/inspectors/process';
 import { id as sequenceFlowId } from '../nodes/sequenceFlow';
@@ -176,19 +174,21 @@ import { getInvalidNodes } from '@/components/modeler/modelerUtils';
 import { NodeMigrator } from '@/components/modeler/NodeMigrator';
 import addLoopCharacteristics from '@/setup/addLoopCharacteristics';
 import cloneSelection from '../../mixins/cloneSelection';
+import RailBottom from '@/components/railBottom/RailBottom.vue';
 
 import ProcessmakerModelerGenericFlow from '@/components/nodes/genericFlow/genericFlow';
 
 import Selection from './Selection';
 
+
 export default {
   components: {
     ToolBar,
-    controls,
+    ExplorerRail,
     InspectorPanel,
-    MiniPaper,
     ProcessmakerModelerGenericFlow,
     Selection,
+    RailBottom,
   },
   props: {
     owner: Object,
@@ -872,9 +872,15 @@ export default {
     toXML(cb) {
       this.moddle.toXML(this.definitions, { format: true }, cb);
     },
+    onCreateElementHandler({ event, control }) {
+      this.handleDrop({
+        clientX: event.clientX,
+        clientY: event.clientY,
+        control,
+      });
+    },
     async handleDrop({ clientX, clientY, control, nodeThatWillBeReplaced }) {
       this.validateDropTarget({ clientX, clientY, control });
-
       if (!this.allowDrop) {
         return;
       }
@@ -1190,7 +1196,6 @@ export default {
       if (!this.isDragging && this.dragStart) {
         // is clicked over the shape
         if (cellView) {
-          this.$refs.selector.stopDrag(event);
           this.$refs.selector.selectElement(cellView, event.shiftKey);
         } else {
           this.clearSelection();
@@ -1202,6 +1207,7 @@ export default {
           this.$refs.selector.stopDrag(event);
         }
       }
+      window.ProcessMaker.EventBus.$emit('custom-pointerclick', event);
       this.isDragging = false;
       this.dragStart = null;
       this.isSelecting = false;