FOUR-18752: Change blue circle indicators for documantation to be visible always

src/components/modeler/Modeler.vue

@@ -343,6 +343,12 @@
         return false;
       },
     },
+    forPrinting: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
   },
   mixins: [hotkeys, cloneSelection, linkEditing, transparentDragging],
   data() {
@@ -540,9 +546,19 @@
     },
   },
   methods: {
+    getSvg() {
+      const svg = document.querySelector('.mini-paper svg');
+      const css = 'text { font-family: sans-serif; }';
+      const style = document.createElement('style');
+      style.appendChild(document.createTextNode(css));
+      svg.appendChild(style);
+      const svgString = (new XMLSerializer()).serializeToString(svg);
+      return svgString;
+    },
     mountedInit() {
       store.commit('setReadOnly', this.readOnly);
       store.commit('setForDocumenting', this.forDocumenting);
+      store.commit('setForPrinting', this.forPrinting);
       this.graph = new dia.Graph();
       store.commit('setGraph', this.graph);
       this.graph.set('interactiveFunc', cellView => {
@@ -599,7 +615,7 @@
                   fill:  '#1572C2',
                   strokeWidth: 0,
                 },
                 text: { text: event.number , fill: 'white', fontSize: 20, fontWeight: 'bold'},
               },
             });
 
@@ -1128,7 +1144,7 @@
       }
     },
     registerStatusBar(component) {
       this.owner.validationBar.push(component);
     },
     /**
      * Register a mixin into a node component.
@@ -1466,6 +1482,7 @@
       if (emitChangeEvent) {
         window.ProcessMaker.EventBus.$emit('modeler-change');
       }
+      window.ProcessMaker.EventBus.$emit('modeler-xml-loaded');
     },
     getBoundaryEvents(process) {
       return process.get('flowElements').filter(({ $type }) => $type === 'bpmn:BoundaryEvent');

src/mixins/documentingIcons.js

@@ -24,11 +24,13 @@ export function docIconMarkup(selector) {
 }
 
 export function docIconAttrs(selector, customValues) {
+  const geometry = labelGeometry();
   const attrs = [
     {
       selector: 'doclabel',
       attributes: {
-        'ref-x': 26, 'ref-y': -4, ref: 'circle', fontSize: 20, fontWeight: 'bold',
+        'ref-x': geometry['ref-x'], 'ref-y': geometry['ref-y'], ref: 'circle',
+        fontSize: geometry.fontSize, fontWeight: 'bold',
         width: 16, height: 16, 'data-test': 'nodeDocLabel', 'text':'',
         fill: 'white', display: 'none',
       },
@@ -79,14 +81,17 @@ export default {
 
       const interval = window.setInterval(() => {
         if (view.$('circle').length > 0 && store.getters.isForDocumenting) {
+          const nodeId = this?.node?.definition?.id;
+          const nodeNumber = this.getNodeNumber(nodeId) + 1;
+
           view.model.attr({
             doccircle: {
               display:(doc ? 'block' : 'none'),
             },
             doclabel: {
-              display: 'none',
+              display: (store.getters.isForPrinting && doc ? 'block' : 'none'),
               style: `text-anchor: middle; transform: translate(${params.labelX}, ${params.labelY});`,
-              text: null,
+              text: (store.getters.isForPrinting ? nodeNumber : ''),
             },
           });
           clearInterval(interval);
@@ -95,27 +100,109 @@ export default {
     },
 
     initDocumentingIconsForFlow() {
-
       if (!(store.getters.isForDocumenting ?? false)) {
         return;
       }
+
       const docElement = this.node?.definition?.documentation;
       const doc = Array.isArray(docElement)
         ? (docElement[0].text ?? '').trim()
         : (docElement ?? '').trim();
 
-      if (doc && store.getters.isForDocumenting) {
-        this.shape.attr('line', {
-          sourceMarker: {
-            'type': 'circle',
-            'fill': '#8DC8FF',
-            'r': 10,
-            'cx': 20,
-            'stroke': '#2B9DFF',
-            'stroke-width': 3,
-          },
-        });
-      }
+      const geometry = labelGeometry();
+
+      const interval = window.setInterval(() => {
+        if (doc && store.getters.isForDocumenting) {
+          const nodeId = this?.node?.definition?.id;
+          const nodeNumber = this.getNodeNumber(nodeId) + 1;
+          this.shape.attr('line', {
+            sourceMarker: {
+              'type': 'circle',
+              'fill': '#8DC8FF',
+              'r': 10,
+              'cx': 20,
+              'stroke': '#2B9DFF',
+              'stroke-width': 3,
+            },
+          });
+
+          // add the node number when printing
+          if (store.getters.isForPrinting) {
+            this.shape.appendLabel({
+              attrs: {
+                rect: {
+                  fill: 'none',
+                  stroke: 'none',
+                },
+                text: {
+                  text: nodeNumber,
+                  fill: 'white',
+                  fontSize: geometry.fontSize,
+                  fontWeight: 'bold',
+                  'font-size': geometry.fontSize,
+                  'text-anchor': 'middle',
+                  'y-alignment': 'middle',
+                },
+              },
+              position: {
+                distance: 40,
+                offset: {
+                  x: -20,
+                  y: 1,
+                },
+              },
+            });
+          }
+
+          clearInterval(interval);
+        }
+      }, 200);
+    },
+
+    getNodeNumber(nodeId) {
+      const xmlString = window.ProcessMaker.$modeler.currentXML;
+
+      const extractIds = (xml) => {
+        const idRegex = /id="([^"]*)"/g;
+        const ids = [];
+        let match;
+        while ((match = idRegex.exec(xml)) !== null) {
+          ids.push(match[1]);
+        }
+        return ids;
+      };
+
+      const ids = extractIds(xmlString);
+
+      return ids.indexOf(nodeId);
     },
   },
-};
+};
+
+function labelGeometry() {
+  if (store.getters.isForDocumenting && store.getters.isForPrinting) {
+    return {
+      fontSize: 12,
+      forLink: {
+        distance: 40,
+        offset: { x: -10, y: 1 },
+      },
+      forGeneralShape : {
+        'ref-x': 26,
+        'ref-y': 0,
+      },
+    };
+  }
+
+  return {
+    fontSize: 20,
+    forLink: {
+      distance: 40,
+      offset: { x: -10, y: 1 },
+    },
+    forGeneralShape : {
+      'ref-x': 26,
+      'ref-y': -4,
+    },
+  };
+}

src/store.js

@@ -39,6 +39,7 @@ export default new Vuex.Store({
     clientLeftPaper: false,
     readOnly: false,
     forDocumenting: false,
+    forPrinting: false,
     isMultiplayer: false,
   },
   getters: {
@@ -62,6 +63,7 @@ export default new Vuex.Store({
     clientLeftPaper: state => state.clientLeftPaper,
     isReadOnly: state => state.readOnly,
     isForDocumenting: state => state.forDocumenting,
+    isForPrinting: state => state.forPrinting,
     showComponent: state => !state.readOnly,
     showPanTool: state => state.forDocumenting,
     isMultiplayer: state => state.isMultiplayer,
@@ -73,6 +75,9 @@ export default new Vuex.Store({
     setForDocumenting(state, value) {
       state.forDocumenting = value;
     },
+    setForPrinting(state, value) {
+      state.forPrinting = value;
+    },
     preventSavingElementPosition(state) {
       state.allowSavingElementPosition = false;
     },