102 lines
3.3 KiB
Vue
102 lines
3.3 KiB
Vue
<template>
|
|
<div class="my-process-designer">
|
|
<div class="my-process-designer__header">
|
|
<slot name="control-header"></slot>
|
|
<template v-if="!$slots['control-header']">
|
|
<div slot="content">
|
|
<a-space>
|
|
<a-tooltip placement="bottom" class="ml-2" title="缩小视图">
|
|
<a-button :disabled="data.defaultZoom <= 0.3" :icon="h(ZoomOutOutlined)" @click="processZoomOut()"></a-button>
|
|
</a-tooltip>
|
|
<a-button>{{ Math.floor(data.defaultZoom * 10 * 10) + "%" }}</a-button>
|
|
<a-tooltip placement="bottom" title="放大视图">
|
|
<a-button :disabled="data.defaultZoom >= 3.9" :icon="h(ZoomInOutlined)" @click="processZoomIn()"></a-button>
|
|
</a-tooltip>
|
|
</a-space>
|
|
</div>
|
|
|
|
</template>
|
|
<div>
|
|
</div>
|
|
</div>
|
|
<div class="my-process-designer__container">
|
|
<div class="my-process-designer__canvas" ref="bpmn-canvas" id="view"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import '@/components/ProcessDesigner/package/theme/index.scss';
|
|
import { h, ref, provide, reactive, onMounted, defineProps, computed, defineEmits, onBeforeMount, watch } from 'vue';
|
|
import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
|
|
import BpmnViewer from 'bpmn-js/lib/Viewer'
|
|
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
|
const data = reactive({
|
|
bpmnModeler: null,
|
|
defaultZoom: 1,
|
|
})
|
|
|
|
const props = defineProps({
|
|
xml: String
|
|
})
|
|
watch(
|
|
() => props.xml,
|
|
(newVal, oldVal) => {
|
|
createDiagram(newVal)
|
|
}
|
|
)
|
|
onMounted(() => {
|
|
initBpmnModeler()
|
|
createDiagram(props.xml)
|
|
})
|
|
function initBpmnModeler() {
|
|
if (data.bpmnModerler) return
|
|
const containerEl = document.getElementById('view')
|
|
data.bpmnModerler && data.bpmnModerler.destroy() // 避免缓存
|
|
data.bpmnModerler = new BpmnViewer({
|
|
container: containerEl,
|
|
additionalModules: [
|
|
// 移动整个画布
|
|
MoveCanvasModule
|
|
],
|
|
})
|
|
}
|
|
async function createDiagram(xml) {
|
|
const viewer = data.bpmnModerler
|
|
try {
|
|
const result = await data.bpmnModerler.importXML(xml)
|
|
const { warnings } = result
|
|
if (warnings && warnings.length) {
|
|
warnings.forEach(warn => console.warn(warn))
|
|
}
|
|
const canvas = viewer.get('canvas')
|
|
canvas.zoom('fit-viewport')
|
|
} catch (err) {
|
|
console.log(err.message, err.warnings)
|
|
}
|
|
}
|
|
function processZoomIn(zoomStep = 0.1) {
|
|
let newZoom = Math.floor(data.defaultZoom * 100 + zoomStep * 100) / 100;
|
|
if (newZoom > 4) {
|
|
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
|
|
}
|
|
data.defaultZoom = newZoom;
|
|
data.bpmnModerler.get("canvas").zoom(data.defaultZoom);
|
|
}
|
|
function processZoomOut(zoomStep = 0.1) {
|
|
let newZoom = Math.floor(data.defaultZoom * 100 - zoomStep * 100) / 100;
|
|
if (newZoom < 0.2) {
|
|
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
|
|
}
|
|
data.defaultZoom = newZoom;
|
|
data.bpmnModerler.get("canvas").zoom(data.defaultZoom);
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.my-process-designer{
|
|
width: 100%;
|
|
}
|
|
::v-deep .bjs-container a {
|
|
visibility: hidden;
|
|
}
|
|
</style> |