forked from opentiny/tiny-vue
feat: 增加bpmn-container组件
This commit is contained in:
junyu
parent
a2b3c6a859
commit
7486cf652b
|
|
@ -0,0 +1,13 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
export default {}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
@import '../custom.less';
|
||||
@import './vars.less';
|
||||
|
||||
@bpmn-prefix-cls: ~'@{css-prefix}bpmn-container';
|
||||
|
||||
.@{bpmn-prefix-cls} {
|
||||
.component-css-vars-bpmn-container();
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
||||
&-canvas {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-properties {
|
||||
width: 300px;
|
||||
z-index: 10;
|
||||
border-left: 1px solid #ccc;
|
||||
overflow: auto;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .djs-properties-panel {
|
||||
padding-bottom: 70px;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
.component-css-vars-bpmn-container {
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
@import './autocomplete/index.less';
|
||||
@import './badge/index.less';
|
||||
@import './base/index.less';
|
||||
@import './bpmn-container/index.less';
|
||||
@import './breadcrumb/index.less';
|
||||
@import './breadcrumb-item/index.less';
|
||||
@import './bulletin-board/index.less';
|
||||
|
|
@ -174,4 +175,4 @@
|
|||
@import './user-link/index.less';
|
||||
@import './watermark/index.less';
|
||||
@import './wizard/index.less';
|
||||
@import './year-table/index.less';
|
||||
@import './year-table/index.less';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import BpmnContainer from './src/bpmn-container.vue'
|
||||
import { version } from './package.json'
|
||||
|
||||
BpmnContainer.install = function (Vue: any) {
|
||||
Vue.component(BpmnContainer.name, BpmnContainer)
|
||||
}
|
||||
|
||||
BpmnContainer.version = version
|
||||
|
||||
if (process.env.BUILD_TARGET === 'runtime') {
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
BpmnContainer.install(window.Vue)
|
||||
}
|
||||
}
|
||||
|
||||
export default BpmnContainer
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "@opentiny/vue-bpmn-container",
|
||||
"version": "3.17.0",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "index.ts",
|
||||
"files": [
|
||||
"index.js",
|
||||
"lib",
|
||||
"index.d.ts",
|
||||
"src"
|
||||
],
|
||||
"sideEffects": false,
|
||||
"type": "module",
|
||||
"devDependencies": {
|
||||
"@opentiny-internal/vue-test-utils": "workspace:*",
|
||||
"vitest": "^0.31.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "pnpm -w build:ui $npm_package_name",
|
||||
"//postversion": "pnpm build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@opentiny/vue-common": "workspace:~",
|
||||
"@opentiny/vue-locale": "workspace:~",
|
||||
"@opentiny/vue-theme": "workspace:~",
|
||||
"@bpmn-io/properties-panel": "3.23.0",
|
||||
"bpmn-js": "17.11.1",
|
||||
"bpmn-js-properties-panel": "5.23.2"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div class="tiny-bpmn-container">
|
||||
<div ref="canvasRef" class="tiny-bpmn-container-canvas"></div>
|
||||
<div ref="propertiesRef" class="tiny-bpmn-container-properties">
|
||||
<slot name="propertiesPanel" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { $prefix } from '@opentiny/vue-common'
|
||||
|
||||
import BpmnModeler from 'bpmn-js/lib/Modeler'
|
||||
import BpmnViewer from 'bpmn-js/lib/Viewer'
|
||||
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel'
|
||||
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
|
||||
import 'bpmn-js/dist/assets/diagram-js.css'
|
||||
import 'bpmn-js/dist/assets/bpmn-js.css'
|
||||
import '@bpmn-io/properties-panel/assets/properties-panel.css'
|
||||
|
||||
const initialXml = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
|
||||
<bpmn:process id="Process_1" isExecutable="false">
|
||||
</bpmn:process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn:definitions>`
|
||||
|
||||
export default {
|
||||
name: `${$prefix}BpmnContainer`,
|
||||
emits: ['ready'],
|
||||
props: {
|
||||
xml: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
keyboardBind: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
propertiesPanel: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
overwriteOptions: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
createDiagram() {
|
||||
const options = {
|
||||
container: this.$refs.canvasRef,
|
||||
additionalModules: []
|
||||
}
|
||||
|
||||
if (this.keyboardBind) {
|
||||
Object.assign(options, {
|
||||
keyboard: {
|
||||
bindTo: document
|
||||
}
|
||||
})
|
||||
}
|
||||
if (this.propertiesPanel && !this.$slots.propertiesPanel) {
|
||||
Object.assign(options, {
|
||||
propertiesPanel: {
|
||||
parent: this.$refs.propertiesRef
|
||||
}
|
||||
})
|
||||
|
||||
options.additionalModules.push(BpmnPropertiesPanelModule, BpmnPropertiesProviderModule)
|
||||
}
|
||||
if (this.overwriteOptions) {
|
||||
Object.assign(options, this.overwriteOptions)
|
||||
}
|
||||
|
||||
return this.readonly ? new BpmnViewer(options) : new BpmnModeler(options)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$data._instance = this.createDiagram()
|
||||
|
||||
this.$watch(
|
||||
'xml',
|
||||
function (xml) {
|
||||
this.$data._instance && this.$data._instance.importXML(xml || initialXml)
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
this.$emit('ready', this.$data._instance)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue