From 055d5113a6ad6b57dfa2fcf46a7c19c84d9887fc Mon Sep 17 00:00:00 2001 From: danloa Date: Wed, 16 Oct 2024 14:37:20 -0400 Subject: [PATCH 1/5] Show doc. labels when in printing mode --- src/components/modeler/Modeler.vue | 17 ++++ src/mixins/documentingIcons.js | 121 +++++++++++++++++++++++++---- src/store.js | 5 ++ 3 files changed, 126 insertions(+), 17 deletions(-) diff --git a/src/components/modeler/Modeler.vue b/src/components/modeler/Modeler.vue index dcab037e0..025bf6010 100644 --- a/src/components/modeler/Modeler.vue +++ b/src/components/modeler/Modeler.vue @@ -343,6 +343,12 @@ export default { return false; }, }, + forPrinting: { + type: Boolean, + default() { + return false; + }, + }, }, mixins: [hotkeys, cloneSelection, linkEditing, transparentDragging], data() { @@ -540,9 +546,19 @@ export default { }, }, 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 => { @@ -1466,6 +1482,7 @@ export default { 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'); diff --git a/src/mixins/documentingIcons.js b/src/mixins/documentingIcons.js index 4a8f1351f..a3c565a4a 100644 --- a/src/mixins/documentingIcons.js +++ b/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); }, }, -}; \ No newline at end of file +}; + +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, + }, + }; +} \ No newline at end of file diff --git a/src/store.js b/src/store.js index 0a131a6a9..be4c8ce3d 100644 --- a/src/store.js +++ b/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; }, From e42ce934a8bf5dc25f17e2b5530a55c2e933002e Mon Sep 17 00:00:00 2001 From: danloa Date: Fri, 18 Oct 2024 15:15:00 -0400 Subject: [PATCH 2/5] Verify that window content is visible --- tests/e2e/support/utils.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/e2e/support/utils.js b/tests/e2e/support/utils.js index cdbf5fb6e..360794a8c 100644 --- a/tests/e2e/support/utils.js +++ b/tests/e2e/support/utils.js @@ -464,6 +464,7 @@ export function selectComponentType(component, type) { } export function clickAndDropElement(node, position) { + cy.get('body').should('be.visible') cy.window().its('store.state.paper').then(paper => { const { tx, ty } = paper.translate(); From f4f9581144bbc392469a8b1307e629f701094a9f Mon Sep 17 00:00:00 2001 From: danloa Date: Fri, 18 Oct 2024 15:15:59 -0400 Subject: [PATCH 3/5] fix typo --- tests/e2e/support/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/support/utils.js b/tests/e2e/support/utils.js index 360794a8c..b2b71d2b0 100644 --- a/tests/e2e/support/utils.js +++ b/tests/e2e/support/utils.js @@ -464,7 +464,7 @@ export function selectComponentType(component, type) { } export function clickAndDropElement(node, position) { - cy.get('body').should('be.visible') + cy.get('body').should('be.visible'); cy.window().its('store.state.paper').then(paper => { const { tx, ty } = paper.translate(); From 3376faa54f0f4464438264ad82708ad20ed55ecf Mon Sep 17 00:00:00 2001 From: danloa Date: Fri, 18 Oct 2024 15:27:41 -0400 Subject: [PATCH 4/5] Increment time out --- tests/e2e/support/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/support/utils.js b/tests/e2e/support/utils.js index b2b71d2b0..6d7b52857 100644 --- a/tests/e2e/support/utils.js +++ b/tests/e2e/support/utils.js @@ -465,7 +465,7 @@ export function selectComponentType(component, type) { export function clickAndDropElement(node, position) { cy.get('body').should('be.visible'); - cy.window().its('store.state.paper').then(paper => { + cy.window().its('store.state.paper', { timeout: 60000 }).then(paper => { const { tx, ty } = paper.translate(); cy.get('.main-paper').then($paperContainer => { From d5ff8d4049ee3a908b7906c28bfd7eeb8c6117fb Mon Sep 17 00:00:00 2001 From: danloa Date: Fri, 18 Oct 2024 16:52:32 -0400 Subject: [PATCH 5/5] Remove timeout --- tests/e2e/support/utils.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tests/e2e/support/utils.js b/tests/e2e/support/utils.js index 6d7b52857..cdbf5fb6e 100644 --- a/tests/e2e/support/utils.js +++ b/tests/e2e/support/utils.js @@ -464,8 +464,7 @@ export function selectComponentType(component, type) { } export function clickAndDropElement(node, position) { - cy.get('body').should('be.visible'); - cy.window().its('store.state.paper', { timeout: 60000 }).then(paper => { + cy.window().its('store.state.paper').then(paper => { const { tx, ty } = paper.translate(); cy.get('.main-paper').then($paperContainer => {