@processmaker/modeler 1.24.4 → 1.26.0

package/src/components/nodes/boundaryEvent/boundaryEvent.vue

@@ -143,6 +143,7 @@ export default {
     resetToInitialPosition() {
       this.shape.position(this.validPosition.x, this.validPosition.y);
       store.commit('allowSavingElementPosition');
+      this.$emit('shape-resize');
     },
     moveBoundaryEventIfOverTask() {
       const task = this.getTaskUnderShape();
@@ -154,11 +155,13 @@ export default {
 
       this.attachBoundaryEventToTask(task);
       this.updateShapePosition(task);
+      this.$emit('shape-resize');
     },
     resetInvalidTarget() {
       if (this.invalidTargetElement) {
         resetShapeColor(this.invalidTargetElement);
         this.invalidTargetElement = null;
+        this.$emit('shape-resize');
       }
     },
     attachToValidTarget(cellView) {

package/src/components/nodes/pool/poolEventHandlers.js

@@ -25,6 +25,7 @@ export default class PoolEventHandlers {
 
   onPointerDown(cellView) {
     if (this.isNotPoolChild(cellView.model)) {
+      this.component.$emit('select-pool');
       return;
     }
 

package/src/components/paperManager.js

@@ -21,6 +21,8 @@ export default class PaperManager {
       sorting: 'sorting-approximate',
       gridSize: PaperManager.gridSize,
       drawGrid: true,
+      snapLinks: false, // disable snapping of links
+      snapElements: false, // disable snapping of elements
       clickThreshold: 10,
       perpendicularLinks: true,
       interactive: interactiveFunc,

package/src/components/toolbar/ToolBar.vue

@@ -34,7 +34,7 @@
         <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Zoom controls">
           <b-button
             class="btn btn-sm btn-secondary"
-            @click="scale += scaleStep"
+            @click="paperManager.scale = paperManager.scale.sx + scaleStep"
             data-test="zoom-in"
             v-b-tooltip.hover
             :title="$t('Zoom In')"
@@ -43,7 +43,7 @@
           </b-button>
           <b-button
             class="btn btn-sm btn-secondary"
-            @click="scale = Math.max(minimumScale, scale -= scaleStep)"
+            @click="paperManager.scale = Math.max(minimumScale, paperManager.scale.sx -= scaleStep)"
             data-test="zoom-out"
             v-b-tooltip.hover
             :title="$t('Zoom Out')"
@@ -51,16 +51,17 @@
             <font-awesome-icon :icon="minusIcon" />
           </b-button>
           <b-button
+            v-if="paperManager"
             class="btn btn-sm btn-secondary"
-            @click="scale = initialScale"
-            :disabled="scale === initialScale"
+            @click="paperManager.scale = initialScale"
+            :disabled="paperManager.scale.sx === initialScale"
             data-test="zoom-reset"
             v-b-tooltip.hover
             :title="$t('Reset to initial scale')"
           >
             {{ $t('Reset') }}
           </b-button>
-          <span class="btn btn-sm btn-secondary scale-value">{{ Math.round(scale*100) }}%</span>
+          <span v-if="paperManager" class="btn btn-sm btn-secondary scale-value">{{ Math.round(paperManager.scale.sx*100) }}%</span>
         </div>
 
         <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Additional controls">
@@ -84,23 +85,61 @@
             <font-awesome-icon :icon="miniMapOpen ? minusIcon : mapIcon" />
           </b-button>
         </div>
-
-        <b-button
-          class="btn btn-sm btn-secondary mini-map-btn ml-auto"
-          data-test="mini-map-btn"
-          @click="$emit('saveBpmn')"
-          v-b-tooltip.hover
-          :title="$t('Save')"
-        >
-          <font-awesome-icon :icon="saveIcon" />
-        </b-button>
+        <div class="btn-group btn-group-sm" role="group" aria-label="Publish controls">
+          <template v-if="isVersionsInstalled">
+            <div class="d-flex justify-content-center align-items-center text-black text-capitalize" :style="{ width: '65px' }">
+              <span class="toolbar-item mr-1" :style="{ fontWeight: 600 }">
+                {{ versionStatus }}
+              </span>
+            </div>
+            <div class="d-flex justify-content-center align-items-center text-black text-capitalize mx-2" :style="{ width: '60px' }">
+              <span class="toolbar-item mr-1" :style="{ fontWeight: 400 }">
+                {{ loadingStatus }}
+              </span>
+              <span>
+                <font-awesome-icon class="text-success" :icon="loadingIcon" :spin="isLoading" />
+              </span>
+            </div>
+            <a
+              class="btn btn-sm btn-primary mini-map-btn text-uppercase mx-2"
+              data-test="publish-btn"
+              :title="$t('Publish')"
+              @click="$emit('saveBpmn')"
+            >
+              {{ $t('Publish') }}
+            </a>
+            <a
+              class="btn btn-sm btn-link toolbar-item mini-map-btn text-black text-uppercase"
+              data-test="close-btn"
+              :title="$t('Close')"
+              @click="$emit('close')"
+            >
+              {{ $t('Close') }}
+            </a>
+            <EllipsisMenu
+              @navigate="onNavigate"
+              :actions="ellipsisMenuActions"
+              :divider="false"
+            />
+          </template>
+          <b-button
+            v-else
+            class="btn btn-sm btn-secondary mini-map-btn mx-1"
+            data-test="mini-map-btn"
+            v-b-tooltip.hover
+            :title="$t('Save')"
+            @click="$emit('saveBpmn')"
+          >
+            <font-awesome-icon :icon="saveIcon" />
+          </b-button>
+        </div>
       </div>
     </div>
   </b-row>
 </template>
 <script>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { faCompress, faExpand, faMapMarked, faMinus, faPlus, faRedo, faSave, faUndo } from '@fortawesome/free-solid-svg-icons';
+import { faCompress, faExpand, faMapMarked, faMinus, faPlus, faRedo, faUndo, faSave, faCheckCircle, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import undoRedoStore from '@/undoRedoStore';
 import Breadcrumb from '@/components/toolbar/breadcrumb/Breadcrumb';
 import AlignButtons from '@/components/toolbar/alignButtons/AlignButtons';
@@ -121,12 +160,6 @@ export default {
     panelsCompressed: Boolean,
   },
   watch: {
-    scale(scale) {
-      this.paperManager.scale = scale;
-      if (scale === this.initialScale) {
-        this.$root.$emit('bv::hide::tooltip');
-      }
-    },
     miniMapOpen(isOpen) {
       this.$emit('toggle-mini-map-open', isOpen);
     },
@@ -148,6 +181,26 @@ export default {
     canRedo() {
       return undoRedoStore.getters.canRedo;
     },
+    saved() {
+      return undoRedoStore.getters.saved;
+    },
+    versionStatus() {
+      const status = undoRedoStore.getters.isDraft ? 'Draft' : 'Published';
+      return this.$t(status);
+    },
+    isVersionsInstalled() {
+      return undoRedoStore.getters.isVersionsInstalled;
+    },
+    isLoading() {
+      return undoRedoStore.getters.isLoading;
+    },
+    loadingStatus() {
+      const status = this.isLoading ? 'Saving' : 'Saved';
+      return this.$t(status);
+    },
+    loadingIcon() {
+      return this.isLoading ? this.spinner : this.savedIcon;
+    },
   },
   data() {
     return {
@@ -164,10 +217,20 @@ export default {
       undoIcon: faUndo,
       redoIcon: faRedo,
       saveIcon: faSave,
+      savedIcon: faCheckCircle,
+      spinner: faSpinner,
+      ellipsisMenuActions: [
+        {
+          value: 'discard-draft',
+          content: this.$t('Discard Draft'),
+          icon: '',
+        },
+      ],
     };
   },
   methods: {
     undo() {
+      this.$emit('clearSelection');
       if (this.isRendering) {
         return;
       }
@@ -177,6 +240,7 @@ export default {
         .then(() => window.ProcessMaker.EventBus.$emit('modeler-change'));
     },
     redo() {
+      this.$emit('clearSelection');
       if (this.isRendering) {
         return;
       }
@@ -185,6 +249,15 @@ export default {
         .then(() => this.$emit('load-xml'))
         .then(() => window.ProcessMaker.EventBus.$emit('modeler-change'));
     },
+    onNavigate(action) {
+      switch (action.value) {
+        case 'discard-draft':
+          window.ProcessMaker.EventBus.$emit('open-versions-discard-modal');
+          break;
+        default:
+          break;
+      }
+    },
   },
 };
 </script>

package/src/components/toolbar/toolbar.scss

@@ -1,7 +1,7 @@
-$toolbar-background-color: #FFF;
+$toolbar-background-color: #fff;
 
 .toolbar {
-  z-index: 1;
+  z-index: 2;
   height: $toolbar-height;
   cursor: auto;
   width: 100%;
@@ -11,3 +11,19 @@ $toolbar-background-color: #FFF;
     cursor: pointer;
   }
 }
+
+.toolbar-item {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-size: 14px;
+  letter-spacing: -0.02em;
+  line-height: 21px;
+}
+
+.text-black {
+  color: #000000 !important;
+}
+
+.cursor-default {
+  cursor: default !important;
+}

package/src/mixins/highlightConfig.js

@@ -21,6 +21,7 @@ const defaultHighlighter = {
       attrs: {
         stroke: '#5096db',
         'stroke-width': 3,
+        'data-cy': 'selected',
       },
     },
   },
@@ -96,6 +97,7 @@ export default {
           this.setShapeHighlight();
           this.shape.on('change:size', () => {
             this.paperManager.awaitScheduledUpdates().then(this.setShapeHighlight);
+            this.$emit('shape-resize', this.shape);
           });
         });
     });

package/src/mixins/linkConfig.js

@@ -302,6 +302,9 @@ export default {
     }
 
     this.updateRouter();
+    this.shape.on('change:vertices', function() {
+      this.component.$emit('shape-resize');
+    });
   },
   beforeDestroy() {
     document.removeEventListener('mouseup', this.emitSave);

package/src/store.js

@@ -94,7 +94,18 @@ export default new Vuex.Store({
       state.highlightedNodes = node ? [node] : [];
     },
     addToHighlightedNodes(state, nodes) {
-      state.highlightedNodes = uniq([...state.highlightedNodes, ...nodes]);
+      const highlightedNodes = uniq([...state.highlightedNodes, ...nodes]);
+      const selectedPoolsIds = highlightedNodes
+        .filter(node => node.type === 'processmaker-modeler-pool')
+        .map(node => node.id);
+      state.highlightedNodes = highlightedNodes
+        // remove from selection the selected child nodes in the pool
+        .filter(node => {
+          if (node.pool && node.pool.component.node.id) {
+            return !selectedPoolsIds.includes(node.pool.component.node.id);
+          }
+          return true;
+        });
     },
     addNode(state, node) {
       /* Add an unchanging ID that Vue can use to track the component

package/src/undoRedoStore.js

@@ -8,6 +8,10 @@ export default new Vuex.Store({
     stack: [],
     position: null,
     disabled: false,
+    saved: false,
+    isVersionsInstalled: false,
+    isDraft: false,
+    isLoading: false,
   },
   getters: {
     canUndo(state) {
@@ -19,6 +23,18 @@ export default new Vuex.Store({
     currentState(state) {
       return state.stack[state.position];
     },
+    saved(state) {
+      return state.saved;
+    },
+    isVersionsInstalled(state) {
+      return state.isVersionsInstalled;
+    },
+    isDraft(state) {
+      return state.isDraft;
+    },
+    isLoading(state) {
+      return state.isLoading;
+    },
   },
   mutations: {
     setPosition(state, position) {
@@ -37,6 +53,18 @@ export default new Vuex.Store({
     enableSavingState(state) {
       state.disabled = false;
     },
+    savedState(state, payload) {
+      state.saved = payload;
+    },
+    isVersionsInstalled(state, payload) {
+      state.isVersionsInstalled = payload;
+    },
+    isDraft(state, payload) {
+      state.isDraft = payload;
+    },
+    isLoading(state, payload) {
+      state.isLoading = payload;
+    },
   },
   actions: {
     pushState({ state, getters, commit }, newState) {
@@ -61,5 +89,22 @@ export default new Vuex.Store({
 
       commit('setPosition', state.position + 1);
     },
+    saved({ commit }) {
+      commit('savedState', true);
+
+      // Automatically remove the notification after 2 seconds.
+      setTimeout(() => {
+        commit('savedState', false);
+      }, 2000);
+    },
+    enableVersions({ commit }) {
+      commit('isVersionsInstalled', true);
+    },
+    setVersionIndicator({ commit }, newState) {
+      commit('isDraft', newState);
+    },
+    setLoadingState({ commit }, newState) {
+      commit('isLoading', newState);
+    },
   },
 });