bpmn-js，Viewer設定節點顔色（vue）

2021-06-01

package.json依賴：

"dependencies": {
        "axios": "^0.19.0",
        "bpmn-js": "^8.2.0",
        "bpmn-js-properties-panel": "^0.38.1",
        "bpmn-moddle": "^7.0.4",
        "camunda-bpmn-moddle": "^4.0.1",
        "core-js": "^3.4.3",
        "vue": "^2.6.10"
    },
           

1、先添加CSS。

<style >
.containers {
    background-color: #ffffff;
    width: 100%;
    height: calc(100vh);
}

.canvas {
    width: 100%;
    height: 100%;
}

.nodeSuccess:not(.djs-connection) .djs-visual > :nth-child(1) {
    stroke: red !important;
    stroke-width: 3px;
    /* elements as success */
}

.highlight .djs-visual > :nth-child(1) {
    stroke: green !important;
    fill: rgba(0, 80, 0, 0.4) !important;
}

</style>
           

注意：style節點沒有scoped。

2、然後修改節點顔色

var canvas = viewer.get('canvas');
// Activity_0djl6l0為節點元素的ID
canvas.addMarker('Activity_0djl6l0', 'highlight');
           

完整代碼

<template>
    <div class="containers">
        <div class="canvas" ref="canvas"></div>
    </div>
</template>


<script>
// 引入相關的依賴
import BpmnViewer from "bpmn-js/lib/Viewer";
import {xmlStr} from "../mock/xmlStr";

export default {
    name: '',
    components: {},
    // 生命周期 - 建立完成（可以通路目前this執行個體）
    created() {
    },
    // 生命周期 - 載入後, Vue 執行個體挂載到實際的 DOM 操作完成，一般在該過程進行 Ajax 互動
    async mounted() {
        this.initBpmnViewer();
        await this.createNewDiagram(xmlStr)
        // this.showDiagram()
    },
    data() {
        return {
            // bpmn模組化器
            bpmnModeler: null,
            container: null,
            canvas: null
        }
    },
    // 方法集合
    methods: {
        initBpmnViewer() {
            const canvas = this.$refs.canvas
            // 初始時清除圖層
            this.bpmnViewer && this.bpmnViewer.destroy();
            this.$refs.canvas.innerHTML = "";
            this.bpmnViewer = new BpmnViewer({
                container: canvas
            })

        },
        async createNewDiagram(modelXml) {
            try {
                const result = await this.bpmnViewer.importXML(modelXml)
                console.log('result',result)
                // this.$refs.canvas.zoom('fit-viewport', 'auto');
                // 螢幕自适應
                const canvas = this.bpmnViewer.get('canvas')
                canvas.zoom('fit-viewport', 'auto')
                // Activity_0c2cl2b為節點元素的ID
                this.setNodeColor(['Activity_0c2cl2b'],'nodeSuccess',canvas)
            } catch (err) {
                console.log(err.message, err.warnings)
            }
        },
        // 設定高亮顔色的class
        setNodeColor (nodeCodes, colorClass, canvas) {
            for (let i = 0; i < nodeCodes.length; i++) {
                canvas.addMarker(nodeCodes[i], colorClass)
            }
        }
    },
    // 計算屬性
    computed: {}
}
</script>

<style>

.containers {
    background-color: #ffffff;
    width: 100%;
    height: calc(100vh - 52px);
}

.canvas {
    width: 100%;
    height: 100%;
}

.nodeSuccess:not(.djs-connection) .djs-visual > :nth-child(1) {
    stroke: red !important;
    stroke-width: 3px;
    /* elements as success */
}


</style>