@processmaker/modeler 1.36.6 → 1.36.8

package/jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
     'json',
     'vue',
   ],
+
   transform: {
     '^.+\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
@@ -12,23 +13,31 @@ module.exports = {
     '\\.svg$': '<rootDir>/fileTransformer.js',
     '\\.yml$': '<rootDir>/fileTransformer.js',
   },
+
   transformIgnorePatterns: [
     '/node_modules/((?!@fortawesome).)*/',
   ],
+
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
     '^js-yaml-loader\\!@fortawesome/(.*)\\.yml$': '<rootDir>/node_modules/@fortawesome/$1.yml',
   },
+
   snapshotSerializers: [
     'jest-serializer-vue',
   ],
+
   testMatch: [
     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)',
   ],
+
   watchPlugins: [
     'jest-watch-typeahead/filename',
     'jest-watch-typeahead/testname',
   ],
+
   collectCoverage: true,
   coverageDirectory: 'jest-coverage',
+  testEnvironment: 'jsdom',
+  preset: '@vue/cli-plugin-unit-jest',
 };

package/package.json

@@ -1,30 +1,31 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.36.6",
+  "version": "1.36.8",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "open-cypress": "TZ=UTC cypress open",
-    "run-cypress": "TZ=UTC cypress run",
+    "test:unit": "vue-cli-service test:unit",
     "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",
     "bundle-link": "npm run build-bundle",
-    "postbundle-link": "npm link",
+    "check-peer-deps": "npm ls --depth=0",
+    "combine:reports": "nyc merge reports && mv coverage.json .nyc_output/out.json",
+    "copy:reports": "cp cypress-coverage/coverage-final.json reports/from-cypress.json && cp jest-coverage/coverage-final.json reports/from-jest.json",
     "lint-fix": "vue-cli-service lint",
+    "mkdir:reports": "mkdir reports || true",
+    "open-cypress": "TZ=UTC cypress open",
+    "postbundle-link": "npm link",
+    "posttest": "npm run report:combined",
+    "precombine:reports": "npm run copy:reports && mkdir .nyc_output || true",
+    "precopy:reports": "npm run mkdir:reports",
+    "prereport:combined": "npm run combine:reports",
     "pretest": "npm run check-peer-deps",
     "pretest-unit": "rm -rf .nyc_output || true",
+    "report:combined": "nyc report --reporter lcov --report-dir coverage",
+    "run-cypress": "TZ=UTC cypress run",
     "test": "npm run test-unit && npm run test-ci",
-    "check-peer-deps": "npm ls --depth=0",
-    "posttest": "npm run report:combined",
-    "test-unit": "JEST_JUNIT_OUTPUT_DIR=test_summary_reports/jest/ vue-cli-service test:unit --ci --runInBand --reporters=default --reporters=jest-junit",
     "test-ci": "TZ=UTC vue-cli-service test:e2e --mode test --headless --browser chrome -- --reporter mocha-junit-reporter --reporter-options mochaFile=reports/mocha/test-results.xml",
-    "mkdir:reports": "mkdir reports || true",
-    "precopy:reports": "npm run mkdir:reports",
-    "copy:reports": "cp cypress-coverage/coverage-final.json reports/from-cypress.json && cp jest-coverage/coverage-final.json reports/from-jest.json",
-    "precombine:reports": "npm run copy:reports && mkdir .nyc_output || true",
-    "combine:reports": "nyc merge reports && mv coverage.json .nyc_output/out.json",
-    "prereport:combined": "npm run combine:reports",
-    "report:combined": "nyc report --reporter lcov --report-dir coverage"
+    "test-unit": "JEST_JUNIT_OUTPUT_DIR=test_summary_reports/jest/ vue-cli-service test:unit --ci --runInBand --reporters=default --reporters=jest-junit"
   },
   "main": "./dist/modeler.common.js",
   "files": [
@@ -44,13 +45,12 @@
     "@processmaker/screen-builder": "2.70.0",
     "@processmaker/vue-form-elements": "0.45.0",
     "@processmaker/vue-multiselect": "^2.2.0",
-    "acorn": "^6.4.2",
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.0.4",
     "bpmn-moddle": "^6.0.0",
     "bpmnlint": "^6.4.0",
     "bpmnlint-plugin-processmaker": "1.5.0",
-    "core-js": "^3.7.0",
+    "core-js": "^3.8.3",
     "file-saver": "^2.0.5",
     "jest-junit": "^12.0.0",
     "jointjs": "^3.1.1",
@@ -71,35 +71,37 @@
     "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.7",
-    "@cypress/code-coverage": "^1.14.0",
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@cypress/code-coverage": "^3.11.0",
     "@panter/vue-i18next": "^0.15.2",
     "@processmaker/processmaker-bpmn-moddle": "0.14.0",
     "@types/jest": "^24.9.1",
     "@vue/babel-preset-app": "^5.0.4",
-    "@vue/cli-plugin-babel": "^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",
-    "@vue/test-utils": "^1.0.0-beta.29",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.0",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/test-utils": "^1.3.6",
+    "@vue/vue2-jest": "^27.0.0-alpha.2",
     "axios": "^0.21.0",
     "axios-mock-adapter": "^1.19.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^24.9.0",
-    "babel-plugin-istanbul": "^5.2.0",
+    "babel-jest": "^27.0.6",
     "bpmnlint-loader": "^0.1.4",
     "circular-dependency-plugin": "^5.2.2",
     "copy-webpack-plugin": "^5.1.1",
-    "cypress": "6.2.0",
-    "cypress-vue-unit-test": "^1.11.7",
-    "eslint": "^5.16.0",
+    "cypress": "10.3.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-vue": "^5.2.3",
+    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-vue": "^8.0.3",
     "husky": "^4.3.5",
     "i18next": "^15.0.8",
-    "istanbul-lib-coverage": "^2.0.5",
+    "jest": "^27.1.0",
+    "jest-environment-jsdom": "^27.5.1",
     "nyc": "^14.1.1",
     "sass": "^1.51.0",
     "sass-loader": "^8.0.2",
@@ -111,7 +113,6 @@
     "vue-loader": "latest",
     "vue-template-compiler": "^2.6.12",
     "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.12",
     "yargs": "^14.2.3"
   },
   "peerDependencies": {
@@ -141,6 +142,16 @@
     "not ie <= 8",
     "chrome >= 69"
   ],
+  "engines": {
+    "npm": ">=8",
+    "node": ">=16 <18"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "./checkForOnly.sh",
+      "pre-push": "npm run lint && npm run test-unit"
+    }
+  },
   "nyc": {
     "extension": [
       ".js",
@@ -150,15 +161,5 @@
       "tests/**/*.js"
     ],
     "report-dir": "cypress-coverage"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "./checkForOnly.sh",
-      "pre-push": "npm run lint && npm run test-unit"
-    }
-  },
-  "engines": {
-    "npm": ">=8",
-    "node": ">=16 <18"
   }
 }

package/src/components/IconSelector.vue

@@ -150,8 +150,8 @@ export default {
           this.$emit(
             'error',
             this.$t(
-              'The custom icon file is too large. File size must be less than 2KB.'
-            )
+              'The custom icon file is too large. File size must be less than 2KB.',
+            ),
           );
         } else {
           this.file = value;

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

@@ -218,7 +218,7 @@ export default {
       this.shape.stopListening(
         this.paper,
         'element:pointerup',
-        this.setNodePosition
+        this.setNodePosition,
       );
       this.savePositionOnPointerupEventSet = false;
 
@@ -238,7 +238,7 @@ export default {
     setUpCrownConfig() {
       this.paper.on(
         'render:done scale:changed translate:changed',
-        this.repositionCrown
+        this.repositionCrown,
       );
     },
     setUpPositionHandling() {},

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

@@ -129,7 +129,7 @@ export default {
       this.shape.stopListening(
         this.paper,
         'element:pointerup',
-        this.setNodePosition
+        this.setNodePosition,
       );
       this.savePositionOnPointerupEventSet = false;
 
@@ -149,7 +149,7 @@ export default {
     setUpCrownConfig() {
       this.paper.on(
         'render:done scale:changed translate:changed',
-        this.repositionCrown
+        this.repositionCrown,
       );
     },
     setUpPositionHandling() {},

package/src/components/crown/utils.js

@@ -177,7 +177,7 @@ export function findIOSpecificationOwner(ioSpec, modeler) {
   const owner = ioSpec.$parent;
   if (!owner) {
     return modeler.nodes.find(node => node.definition.ioSpecification === ioSpec ||
-      node.definition.ioSpecification?.id === ioSpec.id
+      node.definition.ioSpecification?.id === ioSpec.id,
     )?.definition;
   }
   return owner;

package/src/components/hotkeys/main.js

@@ -55,7 +55,7 @@ export default {
           if (this.canvasDragPosition && !this.clientLeftPaper) {
             this.paperManager.translate(
               event.offsetX - this.canvasDragPosition.x,
-              event.offsetY - this.canvasDragPosition.y
+              event.offsetY - this.canvasDragPosition.y,
             );
           }
         });

package/src/components/inspectors/LoopCharacteristics.vue

@@ -198,7 +198,6 @@ export default {
       this.previous.inputData = this.inputData;
       this.previous.outputData = this.outputData;
       this.previous.loopCardinality = this.loopCardinality;
-      this.completionCondition = this.completionCondition;
       this.loopMaximum = this.getLoopMaximum();
       this.loopCondition = this.getLoopCondition();
     },

package/src/components/inspectors/WeekdaySelect.vue

@@ -107,7 +107,7 @@ export default {
           selected: false,
         },
       ],
-      cycleManager: new CycleManager(this.startDate, this.repeat, this.periodicityValue, this.selectedWeekdays, this.endDate, this.ends, this.times),
+      cycleManager: null,
     };
   },
   watch: {
@@ -143,6 +143,7 @@ export default {
         foundDay.selected = true;
       }
     });
+    this.cycleManager = new CycleManager(this.startDate, this.repeat, this.periodicityValue, this.selectedWeekdays, this.endDate, this.ends, this.times);
   },
   computed: {
     repeatOnValidationError() {

package/src/components/modeler/Modeler.vue

@@ -1086,7 +1086,7 @@ export default {
         await this.paperManager.performAtomicAction(async() => {
           const waitPromises = [];
           this.highlightedNodes.forEach((node) =>
-            waitPromises.push(this.removeNode(node, { removeRelationships: true }))
+            waitPromises.push(this.removeNode(node, { removeRelationships: true })),
           );
           await Promise.all(waitPromises);
           store.commit('highlightNode');
@@ -1449,7 +1449,7 @@ export default {
         if (this.canvasDragPosition && !this.clientLeftPaper) {
           this.paperManager.translate(
             event.offsetX - this.canvasDragPosition.x,
-            event.offsetY - this.canvasDragPosition.y
+            event.offsetY - this.canvasDragPosition.y,
           );
         }
       }

package/src/components/nodes/association/association.vue

@@ -19,7 +19,7 @@
 import { shapes } from 'jointjs';
 import linkConfig from '@/mixins/linkConfig';
 import get from 'lodash/get';
-import associationHead from '!!url-loader!@/assets/association-head.svg';
+import associationHead from '@/assets/association-head.svg';
 import { direction } from './associationConfig';
 import CrownConfig from '@/components/crown/crownConfig/crownConfig';
 

package/src/components/nodes/boundaryEscalationEvent/boundaryEscalationEvent.vue

@@ -1,6 +1,6 @@
 <script>
 import BoundaryEvent from '@/components/nodes/boundaryEvent/boundaryEvent';
-import escalationIcon from '!!url-loader!@/assets/boundary-escalation-icon.svg';
+import escalationIcon from '@/assets/boundary-escalation-icon.svg';
 import { isValidBoundaryEscalationEvent } from '@/boundaryEventValidation';
 
 export default {

package/src/components/nodes/boundaryTimerEvent/boundaryTimerEvent.vue

@@ -11,5 +11,14 @@ export default {
       nodeIcon: timerEventIcon,
     };
   },
+  methods: {
+    addTimerEventDefinitionId() {
+      const id = `${this.id}_timer_event_definition`;
+      this.node.definition.get('eventDefinitions')[0].id = id;
+    },
+  },
+  mounted() {
+    this.addTimerEventDefinitionId();
+  },
 };
 </script>

package/src/components/nodes/dataInputAssociation/dataInputAssociation.vue

@@ -19,7 +19,7 @@
 import { shapes } from 'jointjs';
 import linkConfig from '@/mixins/linkConfig';
 import get from 'lodash/get';
-import associationHead from '!!url-loader!@/assets/association-head.svg';
+import associationHead from '@/assets/association-head.svg';
 import CrownConfig from '@/components/crown/crownConfig/crownConfig';
 import { getOrFindDataInput, removeDataInput, findIOSpecificationOwner } from '@/components/crown/utils';
 import { pull } from 'lodash';

package/src/components/nodes/dataOutputAssociation/dataOutputAssociation.vue

@@ -19,7 +19,7 @@
 import { shapes } from 'jointjs';
 import linkConfig from '@/mixins/linkConfig';
 import get from 'lodash/get';
-import associationHead from '!!url-loader!@/assets/association-head.svg';
+import associationHead from '@/assets/association-head.svg';
 import CrownConfig from '@/components/crown/crownConfig/crownConfig';
 import { pull } from 'lodash';
 

package/src/components/nodes/node.js

@@ -172,8 +172,8 @@ export default class Node {
     Node.eventDefinitionPropertiesToNotCopy.forEach(
       prop => clonedNode.definition.eventDefinitions &&
         clonedNode.definition.eventDefinitions[0] &&
-        clonedNode.definition.eventDefinitions[0].hasOwnProperty(prop) &&
-        clonedNode.definition.eventDefinitions[0].set(prop, null)
+        Object.hasOwn(clonedNode.definition.eventDefinitions[0], prop) &&
+        clonedNode.definition.eventDefinitions[0].set(prop, null),
     );
 
     return clonedNode;
@@ -217,8 +217,8 @@ export default class Node {
     Node.eventDefinitionPropertiesToNotCopy.forEach(
       prop => clonedFlow.definition.eventDefinitions &&
         clonedFlow.definition.eventDefinitions[0] &&
-        clonedFlow.definition.eventDefinitions[0].hasOwnProperty(prop) &&
-        clonedFlow.definition.eventDefinitions[0].set(prop, null)
+        Object.hasOwn(clonedFlow.definition.eventDefinitions[0], prop) &&
+        clonedFlow.definition.eventDefinitions[0].set(prop, null),
     );
 
     return clonedFlow;

package/src/components/nodes/pool/pool.vue

@@ -445,7 +445,7 @@ export default {
         .getEmbeddedCells()
         .filter(element =>
           elementShouldHaveFlowNodeRef(element) &&
-            element.component.node.pool === this.shape
+            element.component.node.pool === this.shape,
         )
         .forEach(element => {
           const lane = this.graph

package/src/components/railBottom/zoomControl/ZoomControl.vue

@@ -61,7 +61,7 @@ export default ({
     onClickZoomOut() {
       this.paperManager.scale = Math.max(
         this.minimumScale,
-        this.paperManager.scale.sx -= this.scaleStep
+        this.paperManager.scale.sx -= this.scaleStep,
       );
     },
     onClickZoomIn() {

package/src/mixins/linkConfig.js

@@ -139,6 +139,8 @@ export default {
       resetShapeColor(targetShape);
 
       this.shape.on('change:vertices', this.onChangeVertices);
+      this.shape.on('change:source', this.onChangeVertices);
+      this.shape.on('change:target', this.onChangeVertices);
       this.shape.listenTo(this.sourceShape, 'change:position', this.updateWaypoints);
       this.shape.listenTo(targetShape, 'change:position', this.updateWaypoints);
 
@@ -146,6 +148,13 @@ export default {
       sourceShape.embed(this.shape);
       this.$emit('set-shape-stacking', sourceShape);
     },
+    waitForUpdateWaypoints() {
+      return new Promise(resolve => {
+        this.updateWaypoints();
+        this.updateWaypoints.flush();
+        resolve();
+      });
+    },
     /**
       * On Change vertices handler
       * @param {Object} link
@@ -154,7 +163,8 @@ export default {
       */
     async onChangeVertices(link, vertices, options){
       if (options && options.ui) {
-        this.updateWaypoints();
+        await this.$nextTick();
+        await this.waitForUpdateWaypoints();
         await this.$nextTick();
         this.$emit('save-state');
       }

package/src/mixins/resizeConfig.js

@@ -151,11 +151,11 @@ export default {
 
       this.poolComponent.shape.resize(
         Math.round(width),
-        Math.round(height)
+        Math.round(height),
       );
       this.poolComponent.shape.position(
         Math.round(x),
-        Math.round(y)
+        Math.round(y),
       );
     },
     resizeUpdate() {
@@ -200,21 +200,21 @@ export default {
       const maxPoolWidth = Math.max(
         (poolX + poolWidth) - (x + this.pointWidth),
         (poolX + poolWidth) - this.elementLeftX + labelWidth,
-        minPoolWidth
+        minPoolWidth,
       );
       const maxPoolHeight = Math.max(
         (poolY + poolHeight) - (y + this.pointWidth),
         poolY + poolHeight - this.elementTopY,
-        this.poolComponent.laneSet ? minHeight : minPoolHeight
+        this.poolComponent.laneSet ? minHeight : minPoolHeight,
       );
       const maxLaneWidth = Math.max(
         (laneX + laneWidth) - (x + this.pointWidth),
         (laneX + laneWidth) - this.elementLeftX + poolPadding + labelWidth,
-        minLaneWidth
+        minLaneWidth,
       );
       const maxLaneHeight = Math.max(
         (laneY + laneHeight) - (y + this.pointHeight),
-        minLaneHeight
+        minLaneHeight,
       );
 
       if (this.isLane) {
@@ -224,7 +224,7 @@ export default {
           const maxPoolWidthLane = Math.max(
             (poolX + poolWidth) - (x + this.pointWidth) + labelWidth,
             (poolX + poolWidth) - this.elementLeftX + labelWidth,
-            minPoolWidth
+            minPoolWidth,
           );
 
           this.poolComponent.shape.resize(maxPoolWidthLane, maxPoolHeight, { direction });
@@ -272,21 +272,21 @@ export default {
       const maxPoolWidth = Math.max(
         x - poolX,
         this.elementRightX - poolX,
-        minPoolWidth
+        minPoolWidth,
       );
       const maxPoolHeight = Math.max(
         (poolY + poolHeight) - (y + this.pointWidth),
         poolY + poolHeight - this.elementTopY,
-        this.poolComponent.laneSet ? minHeight : minPoolHeight
+        this.poolComponent.laneSet ? minHeight : minPoolHeight,
       );
       const maxLaneWidth = Math.max(
         x - laneX,
         this.elementRightX - laneX,
-        minLaneWidth
+        minLaneWidth,
       );
       const maxLaneHeight = Math.max(
         (laneY + laneHeight) - (y + this.pointHeight),
-        minLaneHeight
+        minLaneHeight,
       );
 
       if (this.isLane) {
@@ -340,21 +340,21 @@ export default {
       const maxPoolWidth = Math.max(
         (poolX + poolWidth) - (x + this.pointWidth),
         (poolX + poolWidth) - this.elementLeftX + labelWidth,
-        minPoolWidth
+        minPoolWidth,
       );
       const maxPoolHeight = Math.max(
         y - poolY,
         this.elementBottomY - poolY,
-        this.poolComponent.laneSet ? minHeight : minPoolHeight
+        this.poolComponent.laneSet ? minHeight : minPoolHeight,
       );
       const maxLaneWidth = Math.max(
         (laneX + laneWidth) - (x + this.pointWidth),
         (laneX + laneWidth) - this.elementLeftX + poolPadding + labelWidth,
-        minLaneWidth
+        minLaneWidth,
       );
       const maxLaneHeight = Math.max(
         y - laneY,
-        minLaneHeight
+        minLaneHeight,
       );
 
       if (this.isLane) {
@@ -365,7 +365,7 @@ export default {
           const maxPoolWidthLane = Math.max(
             (poolX + poolWidth) - (x + this.pointWidth) + labelWidth,
             (poolX + poolWidth) - this.elementLeftX + labelWidth,
-            minPoolWidth
+            minPoolWidth,
           );
 
           this.poolComponent.shape.resize(maxPoolWidthLane, maxPoolHeight, { direction });
@@ -414,16 +414,16 @@ export default {
       const maxPoolHeight = Math.max(
         y - poolY,
         this.elementBottomY - poolY,
-        this.poolComponent.laneSet ? minHeight : minPoolHeight
+        this.poolComponent.laneSet ? minHeight : minPoolHeight,
       );
       const maxLaneWidth = Math.max(
         x - laneX,
         this.elementRightX - laneX,
-        minLaneWidth
+        minLaneWidth,
       );
       const maxLaneHeight = Math.max(
         y - laneY,
-        minLaneHeight
+        minLaneHeight,
       );
 
       if (this.isLane) {

package/src/setup/extensions/customMarker.js

@@ -1,7 +1,7 @@
 import Task from '@/components/nodes/task/task';
 import idConfigSettings from '@/components/inspectors/idConfigSettings';
-import bookIcon from '!!url-loader!@/assets/book.svg';
-import clockIcon from '!!url-loader!@/assets/clock.svg';
+import bookIcon from '@/assets/book.svg';
+import clockIcon from '@/assets/clock.svg';
 
 window.ProcessMaker.EventBus.$on('modeler-init', ({ registerNode }) => {
   /* Add a custom node example */

package/src/store.js

@@ -6,7 +6,7 @@ import uniq from 'lodash/uniq';
 Vue.use(Vuex);
 
 function setDefinitionPropertyReactive(definition, key, value) {
-  if (definition.hasOwnProperty(key)) {
+  if (Object.hasOwn(definition, key)) {
     definition.set(key, value);
     return;
   }

package/cypress.json

@@ -1,6 +0,0 @@
-{
-  "pluginsFile": "tests/e2e/plugins/index.js",
-  "baseUrl": "http://localhost:8080",
-  "video": false,
-  "screenshotOnRunFailure": true
-}