├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── image
    │   └── screencCapture.png
    └── index.html
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        ├── custom-color.vue
        ├── custom-properties-panel.vue
        ├── custom-properties-panel
        │   ├── PropertiesView.vue
        │   └── index.js
        ├── custom
        │   ├── CustomRenderer.js
        │   └── index.js
        ├── properties-panel-extension.vue
        └── properties-panel-extension
        │   ├── descriptors
        │       └── authority.json
        │   └── provider
        │       └── authority
        │           ├── AuthorityPropertiesProvider.js
        │           ├── index.js
        │           └── parts
        │               └── TitleProps.js
    ├── main.js
    ├── mock
        ├── xmlStr.bpmn
        └── xmlStr.js
    ├── router
        └── index.js
    └── styles
        ├── bpmn-custom-color.css
        ├── bpmn-properties-theme-black.css
        ├── bpmn-properties-theme-blue.css
        └── bpmn-properties-theme-red.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bpmn-vue-properties-panel
 2 | 
 3 | ## 项目描述
 4 | 
 5 | 此项目为以下教材中的教材案例.
 6 | 
 7 | - [《properties篇》](https://github.com/LinDaiDai/bpmn-chinese-document/tree/master/LinDaiDai/全网最详bpmn.js教材-properties篇.md)🔥🔥🔥
 8 | 
 9 | - [《properties-panel篇(上)》](https://github.com/LinDaiDai/bpmn-chinese-document/tree/master/LinDaiDai/全网最详bpmn.js教材-properties-panel篇(上).md)🔥🔥🔥
10 | 
11 | - [《properties-panel篇(下)》](https://github.com/LinDaiDai/bpmn-chinese-document/tree/master/LinDaiDai/全网最详bpmn.js教材-properties-panel篇(下).md)🔥🔥🔥
12 | 
13 | - [《Color篇》](https://github.com/LinDaiDai/bpmn-chinese-document/tree/master/LinDaiDai/全网最详bpmn.js教材-Color篇.md)🔥🔥🔥
14 | 
15 | 
16 | ## 项目截图:
17 | 
18 | ![screencCapture](./public/image/screencCapture.png)
19 | 
20 | 
21 | 
22 | ## 如何使用
23 | 
24 | 将项目克隆至本地:
25 | 
26 | ```
27 | git clone git@github.com:LinDaiDai/bpmn-vue-properties-panel.git
28 | ```
29 | 
30 | 安装依赖:
31 | 
32 | ```
33 | npm install
34 | ```
35 | 
36 | 本地启动项目:
37 | 
38 | ```
39 | npm run serve
40 | ```
41 | 
42 | 打包发布至生成环境:
43 | 
44 | ```
45 | npm run build
46 | ```
47 | 
48 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bpmn-vue-basic",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.0",
12 |     "bpmn-js-in-color": "bpmn-io/bpmn-js-in-color",
13 |     "bpmn-js-properties-panel": "^0.33.0",
14 |     "camunda-bpmn-moddle": "^4.3.0",
15 |     "core-js": "^3.4.3",
16 |     "vue": "^2.6.10"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "^4.1.0",
20 |     "@vue/cli-plugin-eslint": "^4.1.0",
21 |     "@vue/cli-service": "^4.1.0",
22 |     "babel-eslint": "^10.0.3",
23 |     "bpmn-js": "^6.0.4",
24 |     "eslint": "^5.16.0",
25 |     "eslint-plugin-vue": "^5.0.0",
26 |     "vue-router": "^3.1.3",
27 |     "vue-template-compiler": "^2.6.10"
28 |   },
29 |   "eslintConfig": {
30 |     "root": true,
31 |     "env": {
32 |       "node": true
33 |     },
34 |     "extends": [
35 |       "plugin:vue/essential",
36 |       "eslint:recommended"
37 |     ],
38 |     "rules": {
39 |       "no-console": "off",
40 |       "no-unused-vars": "off"
41 |     },
42 |     "parserOptions": {
43 |       "parser": "babel-eslint"
44 |     }
45 |   },
46 |   "browserslist": [
47 |     "> 1%",
48 |     "last 2 versions"
49 |   ]
50 | }
51 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinDaiDai/bpmn-vue-properties-panel/1679d1546c18c661369f19c6a7c462abd890ea8b/public/favicon.ico


--------------------------------------------------------------------------------
/public/image/screencCapture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinDaiDai/bpmn-vue-properties-panel/1679d1546c18c661369f19c6a7c462abd890ea8b/public/image/screencCapture.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>bpmn-vue-basic</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but bpmn-vue-basic doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div class="content">
 4 |       <ul class="router_ul">
 5 |         <router-link
 6 |           v-for="link in links"
 7 |           :key="link.to"
 8 |           tag="li"
 9 |           active-class="activeClass"
10 |           :to="link.to"
11 |         >{{ link.title }}</router-link>
12 |       </ul>
13 |       <router-view></router-view>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   name: 'app',
21 |   components: {},
22 |   data() {
23 |     return {
24 |       links: [
25 |         { to: '/properties-panel-extension', title: 'properties-panel-extension' },
26 |         { to: '/custom-properties-panel', title: 'custom-properties-panel' },
27 |         { to: '/custom-color', title: 'custom-color' }
28 |       ]
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <style>
35 | #app {
36 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
37 |   -webkit-font-smoothing: antialiased;
38 |   -moz-osx-font-smoothing: grayscale;
39 |   text-align: center;
40 |   color: #2c3e50;
41 | }
42 | body {
43 |   margin: 0;
44 | }
45 | .router_ul {
46 |   display: flex;
47 |   justify-content: center;
48 |   margin: 0;
49 |   list-style: none;
50 |   padding: 10px 0;
51 | }
52 | .router_ul li {
53 |   margin-left: 10px;
54 |   padding: 5px 10px;
55 |   font-size: 14px;
56 |   border-radius: 5px;
57 |   border: 1px solid #ccc;
58 |   cursor: pointer;
59 |   transition: all 0.3s;
60 | }
61 | .router_ul li.activeClass {
62 |   background: #4d90fe;
63 |   color: #fff;
64 |   border: none;
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinDaiDai/bpmn-vue-properties-panel/1679d1546c18c661369f19c6a7c462abd890ea8b/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/custom-color.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="containers bpmn-color" ref="content">
  3 |     <div class="canvas" ref="canvas"></div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | // 引入相关的依赖
  9 | import BpmnModeler from 'bpmn-js/lib/Modeler'
 10 | import { xmlStr } from '../mock/xmlStr'
 11 | // 引入自定义的一些module
 12 | import customModule from './custom'
 13 | export default {
 14 |   name: '',
 15 |   components: {},
 16 |   // 生命周期 - 创建完成（可以访问当前this实例）
 17 |   created() {},
 18 |   // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
 19 |   mounted() {
 20 |     this.init()
 21 |   },
 22 |   data() {
 23 |     return {
 24 |       // bpmn建模器
 25 |       bpmnModeler: null,
 26 |       container: null,
 27 |       canvas: null
 28 |     }
 29 |   },
 30 |   // 方法集合
 31 |   methods: {
 32 |     init() {
 33 |       // 获取到属性ref为“content”的dom节点
 34 |       this.container = this.$refs.content
 35 |       // 获取到属性ref为“canvas”的dom节点
 36 |       const canvas = this.$refs.canvas
 37 |       // 建模
 38 |       this.bpmnModeler = new BpmnModeler({
 39 |         container: canvas,
 40 |         //添加控制板
 41 |         propertiesPanel: {
 42 |           parent: '#js-properties-panel'
 43 |         },
 44 |         additionalModules: [
 45 |           customModule
 46 |         ]
 47 |       })
 48 |       this.createNewDiagram()
 49 |     },
 50 |     createNewDiagram() {
 51 |       // 将字符串转换成图显示出来
 52 |       this.bpmnModeler.importXML(xmlStr, err => {
 53 |         if (err) {
 54 |           // console.error(err)
 55 |         } else {
 56 |           // 这里是成功之后的回调, 可以在这里做一系列事情
 57 |           this.success()
 58 |         }
 59 |       })
 60 |     },
 61 |     success() {
 62 |       // 给图绑定事件，当图有发生改变就会触发这个事件
 63 |       const that = this
 64 |       this.bpmnModeler.on('commandStack.changed', function() {
 65 |         that.saveDiagram(function(err, xml) {
 66 |           console.log(xml)
 67 |         })
 68 |       })
 69 |     },
 70 |     // 下载为bpmn格式,done是个函数，调用的时候传入的
 71 |     saveDiagram(done) {
 72 |       // 把传入的done再传给bpmn原型的saveXML函数调用
 73 |       this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
 74 |         done(err, xml)
 75 |       })
 76 |     }
 77 |   },
 78 |   // 计算属性
 79 |   computed: {}
 80 | }
 81 | </script>
 82 | 
 83 | <style scoped>
 84 | .containers {
 85 |   background-color: #ffffff;
 86 |   width: 100%;
 87 |   height: calc(100vh - 52px);
 88 | }
 89 | .canvas {
 90 |   width: 100%;
 91 |   height: 100%;
 92 | }
 93 | .panel {
 94 |   position: absolute;
 95 |   right: 0;
 96 |   top: 0;
 97 |   width: 300px;
 98 | }
 99 | .bpmn-icon-start-event-none:before {
100 |   color: red;
101 | }
102 | </style>


--------------------------------------------------------------------------------
/src/components/custom-properties-panel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="containers" ref="content">
 3 |     <div class="canvas" ref="canvas"></div>
 4 |     <properties-view v-if="bpmnModeler" :modeler="bpmnModeler"></properties-view>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // 引入相关的依赖
10 | // import BpmnViewer from 'bpmn-js'
11 | import BpmnModeler from 'bpmn-js/lib/Modeler'
12 | import PropertiesView from './custom-properties-panel/PropertiesView'
13 | 
14 | import { xmlStr } from '../mock/xmlStr'
15 | export default {
16 |   name: '',
17 |   components: {
18 |     PropertiesView
19 |   },
20 |   // 生命周期 - 创建完成（可以访问当前this实例）
21 |   created() {},
22 |   // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
23 |   mounted() {
24 |     this.init()
25 |   },
26 |   data() {
27 |     return {
28 |       // bpmn建模器
29 |       bpmnModeler: null,
30 |       container: null,
31 |       canvas: null
32 |     }
33 |   },
34 |   // 方法集合
35 |   methods: {
36 |     init() {
37 |       // 获取到属性ref为“content”的dom节点
38 |       this.container = this.$refs.content
39 |       // 获取到属性ref为“canvas”的dom节点
40 |       const canvas = this.$refs.canvas
41 |       // 建模
42 |       this.bpmnModeler = new BpmnModeler({
43 |         container: canvas
44 |       })
45 |       this.createNewDiagram()
46 |     },
47 |     createNewDiagram() {
48 |       // 将字符串转换成图显示出来
49 |       this.bpmnModeler.importXML(xmlStr, err => {
50 |         if (err) {
51 |           // console.error(err)
52 |         } else {
53 |           // 这里是成功之后的回调, 可以在这里做一系列事情
54 |           this.success()
55 |         }
56 |       })
57 |     },
58 |     success() {
59 |       // 给图绑定事件，当图有发生改变就会触发这个事件
60 |       const that = this
61 |       this.bpmnModeler.on('commandStack.changed', function() {
62 |         that.saveDiagram(function(err, xml) {
63 |           console.log(xml)
64 |         })
65 |       })
66 |     },
67 |     // 下载为bpmn格式,done是个函数，调用的时候传入的
68 |     saveDiagram(done) {
69 |       // 把传入的done再传给bpmn原型的saveXML函数调用
70 |       this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
71 |         done(err, xml)
72 |       })
73 |     }
74 |   },
75 |   // 计算属性
76 |   computed: {}
77 | }
78 | </script>
79 | 
80 | <style scoped>
81 | .containers {
82 |   background-color: #ffffff;
83 |   width: 100%;
84 |   height: calc(100vh - 52px);
85 | }
86 | .canvas {
87 |   width: 100%;
88 |   height: 100%;
89 | }
90 | .panel {
91 |   position: absolute;
92 |   right: 0;
93 |   top: 0;
94 |   width: 300px;
95 | }
96 | </style>


--------------------------------------------------------------------------------
/src/components/custom-properties-panel/PropertiesView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="custom-properties-panel">
  3 |     <div class="empty" v-if="selectedElements.length <= 0">请选择一个元素</div>
  4 |     <div class="empty" v-else-if="selectedElements.length > 1">只能选择一个元素</div>
  5 |     <div v-else>
  6 |       <fieldset class="element-item">
  7 |         <label>id</label>
  8 |         <span>{{ element.id }}</span>
  9 |       </fieldset>
 10 |       <fieldset class="element-item">
 11 |         <label>name</label>
 12 |         <input :value="element.name" @change="event => changeField(event, 'name')" />
 13 |       </fieldset>
 14 |       <fieldset class="element-item">
 15 |         <label>customProps</label>
 16 |         <input :value="element.customProps" @change="event => changeField(event, 'customProps')" />
 17 |       </fieldset>
 18 |       <fieldset class="element-item">
 19 |         <label>节点颜色</label>
 20 |         <input type="color" :value="element.color" @change="event => changeField(event, 'color')" />
 21 |       </fieldset>
 22 |       <fieldset class="element-item" v-if="isEvent">
 23 |         <label>修改event节点类型</label>
 24 |         <select @change="changeEventType" :value="eventType">
 25 |           <option v-for="option in eventTypes" :key="option.value" :value="option.value">{{ option.label }}</option>
 26 |         </select>
 27 |       </fieldset>
 28 |       <fieldset class="element-item" v-if="isTask">
 29 |         <label>修改Task节点类型</label>
 30 |         <select @change="changeTaskType" :value="taskType">
 31 |           <option v-for="option in taskTypes" :key="option.value" :value="option.value">{{ option.label }}</option>
 32 |         </select>
 33 |       </fieldset>
 34 |     </div>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script>
 39 | import { START_EVENT } from 'bpmn-js/lib/features/replace/ReplaceOptions.js'
 40 | export default {
 41 |   name: 'PropertiesView',
 42 |   props: {
 43 |     modeler: {
 44 |       type: Object,
 45 |       default: () => ({})
 46 |     }
 47 |   },
 48 |   data() {
 49 |     return {
 50 |       selectedElements: [],
 51 |       element: null,
 52 |       eventTypes: [
 53 |         { label: '默认', value: '' },
 54 |         { label: 'MessageEventDefinition', value: 'bpmn:MessageEventDefinition' },
 55 |         { label: 'TimerEventDefinition', value: 'bpmn:TimerEventDefinition' },
 56 |         { label: 'ConditionalEventDefinition', value: 'bpmn:ConditionalEventDefinition' }
 57 |       ],
 58 |       eventType: '',
 59 |       taskTypes: [
 60 |         { label: 'Task', value: 'bpmn:Task' },
 61 |         { label: 'ServiceTask', value: 'bpmn:ServiceTask' },
 62 |         { label: 'SendTask', value: 'bpmn:SendTask' },
 63 |         { label: 'UserTask', value: 'bpmn:UserTask' }
 64 |       ],
 65 |       taskType: ''
 66 |     }
 67 |   },
 68 |   created() {
 69 |     this.init()
 70 |   },
 71 |   methods: {
 72 |     init() {
 73 |       const { modeler } = this
 74 |       console.log(modeler)
 75 |       console.log(START_EVENT)
 76 |       modeler.on('selection.changed', e => {
 77 |         this.selectedElements = e.newSelection
 78 |         this.element = e.newSelection[0]
 79 |         console.log(this.element)
 80 |         this.setDefaultProperties()
 81 |       })
 82 |       modeler.on('element.changed', e => {
 83 |         const { element } = e
 84 |         const { element: currentElement } = this
 85 |         if (!currentElement) {
 86 |           return
 87 |         }
 88 |         // update panel, if currently selected element changed
 89 |         if (element.id === currentElement.id) {
 90 |           this.element = element
 91 |         }
 92 |       })
 93 |     },
 94 |     setDefaultProperties() {
 95 |       const { element } = this
 96 |       if (element) {
 97 |         const { type, businessObject } = element
 98 |         const { name } = businessObject
 99 |         if (this.verifyIsEvent(type)) {
100 |           this.eventType = businessObject.eventDefinitions ? businessObject.eventDefinitions[0]['$type'] : ''
101 |           console.log(this.eventType)
102 |         } else if (this.verifyIsTask(type)) {
103 |           this.taskType = type
104 |         }
105 |         element['name'] = name
106 |       }
107 |     },
108 |     verifyIsEvent(type) {
109 |       return type.includes('Event')
110 |     },
111 |     verifyIsTask(type) {
112 |       return type.includes('Task')
113 |     },
114 |     /**
115 |      * 改变控件触发的事件
116 |      * @param { Object } input的Event
117 |      * @param { String } 要修改的属性的名称
118 |      */
119 |     changeField(event, type) {
120 |       console.log(event)
121 |       console.log(type)
122 |       const value = event.target.value
123 |       this.element[type] = value
124 |       let properties = {}
125 |       properties[type] = value
126 |       if (type === 'color') {
127 |         this.onChangeColor(value)
128 |       }
129 |       this.updateProperties(properties)
130 |     },
131 |     updateName(name) {
132 |       const { modeler, element } = this
133 |       const modeling = modeler.get('modeling')
134 |       modeling.updateLabel(element, name)
135 |     },
136 |     onChangeColor(color) {
137 |       console.log(color)
138 |       const { modeler, element } = this
139 |       const modeling = this.modeler.get('modeling')
140 |       modeling.setColor(element, {
141 |         fill: null,
142 |         stroke: color
143 |       })
144 |     },
145 |     changeEventType(event) {
146 |       console.log(event)
147 |       const { modeler, element } = this
148 |       const value = event.target.value
149 |       const bpmnReplace = modeler.get('bpmnReplace')
150 |       this.eventType = value
151 |       bpmnReplace.replaceElement(element, {
152 |         type: element.businessObject.$type,
153 |         eventDefinitionType: value
154 |       })
155 |     },
156 |     changeTaskType(event) {
157 |       console.log(event)
158 |       const { modeler, element } = this
159 |       const value = event.target.value
160 |       const bpmnReplace = modeler.get('bpmnReplace')
161 |       bpmnReplace.replaceElement(element, {
162 |         type: value
163 |       })
164 |     },
165 |     /**
166 |      * 更新元素属性
167 |      * @param { Object } 要更新的属性, 例如 { name: '' }
168 |      */
169 |     updateProperties(properties) {
170 |       const { modeler, element } = this
171 |       const modeling = modeler.get('modeling')
172 |       modeling.updateProperties(element, properties)
173 |     }
174 |   },
175 |   computed: {
176 |     isEvent() {
177 |       const { element } = this
178 |       return this.verifyIsEvent(element.type)
179 |     },
180 |     isTask() {
181 |       const { element } = this
182 |       return this.verifyIsTask(element.type)
183 |     }
184 |   }
185 | }
186 | </script>
187 | 
188 | <style scoped>
189 | .custom-properties-panel {
190 |   position: absolute;
191 |   right: 0;
192 |   top: 0;
193 |   width: 300px;
194 |   background-color: #fff9f9;
195 |   border-color: rgba(0, 0, 0, 0.09);
196 |   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
197 |   padding: 20px;
198 | }
199 | .empty {
200 |   height: 200px;
201 |   line-height: 200px;
202 |   font-weight: 700;
203 | }
204 | .element-item {
205 |   padding: 10px;
206 |   margin-top: 5px;
207 |   border: 1px solid;
208 |   border-color: darkorange;
209 |   border-radius: 8px;
210 | }
211 | .element-item:first-child {
212 |   margin-top: 0;
213 | }
214 | .custom-properties-panel input,
215 | .custom-properties-panel textarea {
216 |   padding: 4px 11px;
217 |   color: rgba(0, 0, 0, 0.65);
218 |   font-size: 14px;
219 |   background-color: #fff;
220 |   background-image: none;
221 |   border: 1px solid #d9d9d9;
222 |   border-radius: 4px;
223 |   transition: all 0.3s;
224 |   outline: none;
225 | }
226 | .custom-properties-panel input:focus,
227 | .custom-properties-panel button:focus,
228 | .custom-properties-panel textarea:focus,
229 | .custom-properties-panel [contenteditable]:focus {
230 |   border-color: rgb(239, 112, 96);
231 |   box-shadow: 0 0 1px 2px rgb(239, 112, 96, 0.2);
232 | }
233 | .custom-properties-panel label {
234 |   font-weight: bold;
235 | }
236 | 
237 | .custom-properties-panel label:after {
238 |   content: ': ';
239 | }
240 | 
241 | .custom-properties-panel button + button {
242 |   margin-left: 10px;
243 | }
244 | </style>
245 | 


--------------------------------------------------------------------------------
/src/components/custom-properties-panel/index.js:
--------------------------------------------------------------------------------
1 | import PropertiesView from './PropertiesView';
2 | 
3 | export { PropertiesView }


--------------------------------------------------------------------------------
/src/components/custom/CustomRenderer.js:
--------------------------------------------------------------------------------
 1 | import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
 2 | 
 3 | const HIGH_PRIORITY = 1500
 4 | 
 5 | const propertiesConfig = {
 6 |   'bpmn:StartEvent': {
 7 |     fill: '#12c2e9'
 8 |   },
 9 |   'bpmn:Task': {
10 |     stroke: '#c471ed',
11 |     strokeWidth: 2,
12 |   },
13 |   'bpmn:EndEvent': {
14 |     stroke: '#f64f59',
15 |     fill: '#f64f59'
16 |   }
17 | }
18 | 
19 | export default class CustomRenderer extends BaseRenderer {
20 |     constructor(eventBus, bpmnRenderer) {
21 |         super(eventBus, HIGH_PRIORITY);
22 | 
23 |         this.bpmnRenderer = bpmnRenderer;
24 |     }
25 | 
26 |     canRender(element) {
27 |         // ignore labels
28 |         return !element.labelTarget;
29 |     }
30 |     drawShape(parentNode, element) {
31 |         let shape = this.bpmnRenderer.drawShape(parentNode, element)
32 |         setShapeProperties(shape, element) // 在此修改shape
33 |         return shape
34 |     }
35 | 
36 |     getShapePath(shape) {
37 |       return this.bpmnRenderer.getShapePath(shape);
38 |     }
39 | }
40 | 
41 | function setShapeProperties (shape, element) {
42 |   const type = element.type // 获取到的类型
43 |   if (propertiesConfig[type]) {
44 |     const properties = propertiesConfig[type]
45 |     Object.keys(properties).forEach(prop => {
46 |       shape.style.setProperty(prop, properties[prop])
47 |     })
48 |   }
49 | }
50 | 
51 | CustomRenderer.$inject = ['eventBus', 'bpmnRenderer'];


--------------------------------------------------------------------------------
/src/components/custom/index.js:
--------------------------------------------------------------------------------
1 | import CustomRenderer from './CustomRenderer.js'
2 | 
3 | export default {
4 |   __init__: ['customRenderer'],
5 |   customRenderer: ['type', CustomRenderer]
6 | }


--------------------------------------------------------------------------------
/src/components/properties-panel-extension.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="containers" ref="content">
  3 |     <div class="canvas" ref="canvas"></div>
  4 |     <div id="js-properties-panel" class="panel"></div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | // 引入相关的依赖
 10 | // import BpmnViewer from 'bpmn-js'
 11 | import BpmnModeler from 'bpmn-js/lib/Modeler'
 12 | // 原有的 properties-panel 这个框
 13 | import propertiesPanelModule from 'bpmn-js-properties-panel'
 14 | import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
 15 | // 自定义的 properties-panel内容
 16 | import propertiesProviderModule from './properties-panel-extension/provider/authority'
 17 | import authorityModdleDescriptor from './properties-panel-extension/descriptors/authority'
 18 | 
 19 | import { xmlStr } from '../mock/xmlStr'
 20 | export default {
 21 |   name: '',
 22 |   components: {},
 23 |   // 生命周期 - 创建完成（可以访问当前this实例）
 24 |   created() {},
 25 |   // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
 26 |   mounted() {
 27 |     this.init()
 28 |   },
 29 |   data() {
 30 |     return {
 31 |       // bpmn建模器
 32 |       bpmnModeler: null,
 33 |       container: null,
 34 |       canvas: null
 35 |     }
 36 |   },
 37 |   // 方法集合
 38 |   methods: {
 39 |     init() {
 40 |       // 获取到属性ref为“content”的dom节点
 41 |       this.container = this.$refs.content
 42 |       // 获取到属性ref为“canvas”的dom节点
 43 |       const canvas = this.$refs.canvas
 44 |       // 建模
 45 |       this.bpmnModeler = new BpmnModeler({
 46 |         container: canvas,
 47 |         //添加控制板
 48 |         propertiesPanel: {
 49 |           parent: '#js-properties-panel'
 50 |         },
 51 |         additionalModules: [
 52 |           // 右边的工具栏(固定引入)
 53 |           propertiesPanelModule,
 54 |           // 自定义右边工作栏的内容
 55 |           propertiesProviderModule
 56 |         ],
 57 |         moddleExtensions: {
 58 |           // camunda: camundaModdleDescriptor,
 59 |           authority: authorityModdleDescriptor
 60 |         }
 61 |       })
 62 |       this.createNewDiagram()
 63 |     },
 64 |     createNewDiagram() {
 65 |       // 将字符串转换成图显示出来
 66 |       this.bpmnModeler.importXML(xmlStr, err => {
 67 |         if (err) {
 68 |           // console.error(err)
 69 |         } else {
 70 |           // 这里是成功之后的回调, 可以在这里做一系列事情
 71 |           this.success()
 72 |         }
 73 |       })
 74 |     },
 75 |     success() {
 76 |       // 给图绑定事件，当图有发生改变就会触发这个事件
 77 |       const that = this
 78 |       this.bpmnModeler.on('commandStack.changed', function() {
 79 |         that.saveDiagram(function(err, xml) {
 80 |           console.log(xml)
 81 |         })
 82 |       })
 83 |     },
 84 |     // 下载为bpmn格式,done是个函数，调用的时候传入的
 85 |     saveDiagram(done) {
 86 |       // 把传入的done再传给bpmn原型的saveXML函数调用
 87 |       this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
 88 |         done(err, xml)
 89 |       })
 90 |     }
 91 |   },
 92 |   // 计算属性
 93 |   computed: {}
 94 | }
 95 | </script>
 96 | 
 97 | <style scoped>
 98 | .containers {
 99 |   background-color: #ffffff;
100 |   width: 100%;
101 |   height: calc(100vh - 52px);
102 | }
103 | .canvas {
104 |   width: 100%;
105 |   height: 100%;
106 | }
107 | .panel {
108 |   position: absolute;
109 |   right: 0;
110 |   top: 0;
111 |   width: 300px;
112 | }
113 | </style>


--------------------------------------------------------------------------------
/src/components/properties-panel-extension/descriptors/authority.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Authority",
 3 |     "prefix": "authority",
 4 |     "uri": "http://authority",
 5 |     "xml": {
 6 |       "tagAlias": "lowerCase"
 7 |     },
 8 |     "associations": [],
 9 |     "types": [
10 |       {
11 |         "name": "LinDaiDaiStartEvent",
12 |         "extends": [
13 |           "bpmn:StartEvent"
14 |         ],
15 |         "properties": [
16 |           {
17 |             "name": "title",
18 |             "isAttr": true,
19 |             "type": "String"
20 |           }
21 |         ]
22 |       }
23 |     ]
24 |   }


--------------------------------------------------------------------------------
/src/components/properties-panel-extension/provider/authority/AuthorityPropertiesProvider.js:
--------------------------------------------------------------------------------
 1 | import inherits from 'inherits';
 2 | 
 3 | import PropertiesActivator from 'bpmn-js-properties-panel/lib/PropertiesActivator';
 4 | 
 5 | 
 6 | import idProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps';
 7 | import nameProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps';
 8 | import processProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps';
 9 | import linkProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/LinkProps';
10 | import eventProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/EventProps';
11 | import documentationProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/DocumentationProps';
12 | 
13 | import TitleProps from './parts/TitleProps';
14 | 
15 | function createGeneralTabGroups(element, bpmnFactory, canvas, elementRegistry, translate) {
16 | 
17 |     var generalGroup = {
18 |         id: 'general',
19 |         label: 'General',
20 |         entries: []
21 |     };
22 |     idProps(generalGroup, element, translate);
23 |     nameProps(generalGroup, element, bpmnFactory, canvas, translate);
24 |     processProps(generalGroup, element, translate);
25 | 
26 |     var detailsGroup = {
27 |         id: 'details',
28 |         label: 'Details',
29 |         entries: []
30 |     };
31 |     linkProps(detailsGroup, element, translate);
32 |     eventProps(detailsGroup, element, bpmnFactory, elementRegistry, translate);
33 | 
34 |     var documentationGroup = {
35 |         id: 'documentation',
36 |         label: 'Documentation',
37 |         entries: []
38 |     };
39 | 
40 |     documentationProps(documentationGroup, element, bpmnFactory, translate);
41 | 
42 |     return [
43 |         generalGroup,
44 |         detailsGroup,
45 |         documentationGroup
46 |     ];
47 | }
48 | 
49 | function createAuthorityTabGroups(element) {
50 |     var editAuthorityGroup = {
51 |         id: 'edit-authority',
52 |         label: '编辑权限',
53 |         entries: []
54 |     }
55 | 
56 |     // 每个属性都有自己的props方法
57 |     TitleProps(editAuthorityGroup, element);
58 |     // OtherProps1(editAuthorityGroup, element);
59 |     // OtherProps2(editAuthorityGroup, element);
60 | 
61 |     return [
62 |         editAuthorityGroup
63 |     ];
64 | }
65 | // 这里是要用到什么就引入什么
66 | export default function AuthorityPropertiesProvider(
67 |     eventBus, bpmnFactory, canvas,
68 |     elementRegistry, translate
69 | ) {
70 |     PropertiesActivator.call(this, eventBus);
71 | 
72 |     this.getTabs = function(element) {
73 |         var generalTab = {
74 |             id: 'general',
75 |             label: 'General',
76 |             groups: createGeneralTabGroups(element, bpmnFactory, canvas, elementRegistry, translate)
77 |         };
78 | 
79 |         var authorityTab = {
80 |             id: 'authority',
81 |             label: '权限',
82 |             groups: createAuthorityTabGroups(element)
83 |         };
84 |         return [
85 |             generalTab,
86 |             authorityTab
87 |         ];
88 |     }
89 | }
90 | 
91 | inherits(AuthorityPropertiesProvider, PropertiesActivator);


--------------------------------------------------------------------------------
/src/components/properties-panel-extension/provider/authority/index.js:
--------------------------------------------------------------------------------
1 | import AuthorityPropertiesProvider from './AuthorityPropertiesProvider';
2 | 
3 | export default {
4 |   __init__: [ 'propertiesProvider' ],
5 |   propertiesProvider: [ 'type', AuthorityPropertiesProvider ]
6 | };


--------------------------------------------------------------------------------
/src/components/properties-panel-extension/provider/authority/parts/TitleProps.js:
--------------------------------------------------------------------------------
 1 | import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
 2 | 
 3 | import {
 4 |     is
 5 | } from 'bpmn-js/lib/util/ModelUtil';
 6 | 
 7 | 
 8 | export default function(group, element) {
 9 |     if (is(element, 'bpmn:StartEvent')) { // 可以在这里做类型判断
10 |         group.entries.push(entryFactory.textField({
11 |             id: 'title',
12 |             description: '权限的标题',
13 |             label: '标题',
14 |             modelProperty: 'title'
15 |         }));
16 |     }
17 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | Vue.config.productionTip = false
 5 |     // 以下为bpmn工作流绘图工具的样式
 6 | import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
 7 | import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
 8 | import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
 9 | import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
10 | import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右边工具栏样式
11 | // import 'bpmn-js-in-color/colors/color-picker.css'
12 | import './styles/bpmn-properties-theme-red.css'
13 | // import './styles/bpmn-properties-theme-blue.css'
14 | // import './styles/bpmn-properties-theme-black.css'
15 | import './styles/bpmn-custom-color.css'
16 | 
17 | 
18 | new Vue({
19 |     router,
20 |     render: h => h(App),
21 | }).$mount('#app')


--------------------------------------------------------------------------------
/src/mock/xmlStr.bpmn:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="5.1.2">
 3 |   <process id="Process_1" isExecutable="false">
 4 |     <startEvent id="StartEvent_1y45yut" name="开始" camunda:initiator="dd">
 5 |       <outgoing>SequenceFlow_0h21x7r</outgoing>
 6 |     </startEvent>
 7 |     <task id="Task_1hcentk">
 8 |       <incoming>SequenceFlow_0h21x7r</incoming>
 9 |     </task>
10 |     <sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
11 |   </process>
12 |   <bpmndi:BPMNDiagram id="BpmnDiagram_1">
13 |     <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
14 |       <bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
15 |         <omgdc:Bounds x="152" y="102" width="36" height="36" />
16 |         <bpmndi:BPMNLabel>
17 |           <omgdc:Bounds x="160" y="145" width="22" height="14" />
18 |         </bpmndi:BPMNLabel>
19 |       </bpmndi:BPMNShape>
20 |       <bpmndi:BPMNShape id="Task_1hcentk_di" bpmnElement="Task_1hcentk">
21 |         <omgdc:Bounds x="240" y="80" width="100" height="80" />
22 |       </bpmndi:BPMNShape>
23 |       <bpmndi:BPMNEdge id="SequenceFlow_0h21x7r_di" bpmnElement="SequenceFlow_0h21x7r">
24 |         <omgdi:waypoint x="188" y="120" />
25 |         <omgdi:waypoint x="240" y="120" />
26 |       </bpmndi:BPMNEdge>
27 |     </bpmndi:BPMNPlane>
28 |   </bpmndi:BPMNDiagram>
29 | </definitions>


--------------------------------------------------------------------------------
/src/mock/xmlStr.js:
--------------------------------------------------------------------------------
 1 | export var xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
 2 | <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="5.1.2">
 3 | <process id="Process_1" isExecutable="false">
 4 |     <startEvent id="StartEvent_1y45yut" name="开始">
 5 |     <outgoing>SequenceFlow_0h21x7r</outgoing>
 6 |     </startEvent>
 7 |     <task id="Task_1hcentk">
 8 |     <incoming>SequenceFlow_0h21x7r</incoming>
 9 |     </task>
10 |     <sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
11 | </process>
12 | <bpmndi:BPMNDiagram id="BpmnDiagram_1">
13 |     <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
14 |     <bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
15 |         <omgdc:Bounds x="152" y="102" width="36" height="36" />
16 |         <bpmndi:BPMNLabel>
17 |         <omgdc:Bounds x="160" y="145" width="22" height="14" />
18 |         </bpmndi:BPMNLabel>
19 |     </bpmndi:BPMNShape>
20 |     <bpmndi:BPMNShape id="Task_1hcentk_di" bpmnElement="Task_1hcentk">
21 |         <omgdc:Bounds x="240" y="80" width="100" height="80" />
22 |     </bpmndi:BPMNShape>
23 |     <bpmndi:BPMNEdge id="SequenceFlow_0h21x7r_di" bpmnElement="SequenceFlow_0h21x7r">
24 |         <omgdi:waypoint x="188" y="120" />
25 |         <omgdi:waypoint x="240" y="120" />
26 |     </bpmndi:BPMNEdge>
27 |     </bpmndi:BPMNPlane>
28 | </bpmndi:BPMNDiagram>
29 | </definitions>`


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | Vue.use(Router)
 4 | 
 5 | const routes = [{
 6 |         path: '/',
 7 |         redirect: '/properties-panel-extension'
 8 |     },
 9 |     {
10 |         path: '/properties-panel-extension',
11 |         component: () =>
12 |             import ('./../components/properties-panel-extension')
13 |     },
14 |     {
15 |         path: '/custom-properties-panel',
16 |         component: () =>
17 |             import ('./../components/custom-properties-panel')
18 |     },
19 |     {
20 |         path: '/custom-color',
21 |         component: () =>
22 |             import ('./../components/custom-color')
23 |     }
24 | ]
25 | 
26 | export default new Router({
27 |     mode: 'history',
28 |     routes
29 | })


--------------------------------------------------------------------------------
/src/styles/bpmn-custom-color.css:
--------------------------------------------------------------------------------
 1 | .bpmn-color .bpmn-icon-start-event-none:before {
 2 |   color: #12c2e9;
 3 | }
 4 | .bpmn-color .bpmn-icon-task:before {
 5 |   color: #c471ed;
 6 | }
 7 | .bpmn-color .bpmn-icon-end-event-none:before {
 8 |   color: #f64f59;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/styles/bpmn-properties-theme-black.css:
--------------------------------------------------------------------------------
 1 | .bpp-properties-panel {
 2 |     background-color: #fff;
 3 |     border-color: rgba(0, 0, 0, 0.09);
 4 |     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
 5 | }
 6 | 
 7 | .bpp-properties-panel label {
 8 |     color: #000;
 9 | }
10 | 
11 | .bpp-properties-header {
12 |     color: #000;
13 | }
14 | 
15 | .bpp-properties-header>.label {
16 |     color: #000;
17 |     font-size: 16px;
18 | }
19 | 
20 | .bpp-field-description {
21 |     font-size: 12px;
22 | }
23 | 
24 | ul.bpp-properties-tabs-links>li.bpp-active a {
25 |     border-top: 2px solid #000;
26 |     color: #000;
27 | }
28 | 
29 | ul.bpp-properties-tabs-links>li>a {
30 |     border: 1px solid #000;
31 |     border-radius: 2px 2px 0 0;
32 | }
33 | 
34 | .bpp-properties-group:hover>.group-toggle {
35 |     background-color: #000;
36 | }
37 | 
38 | .bpp-properties-group>.group-label {
39 |     font-size: 16px;
40 |     color: #000;
41 |     border-bottom: 2px solid #000;
42 |     font-style: normal;
43 | }
44 | 
45 | .bpp-properties-panel [type=text],
46 | .bpp-properties-panel [contenteditable],
47 | .bpp-properties-panel textarea,
48 | .bpp-properties-panel select {
49 |     width: 85%;
50 |     padding: 4px 11px;
51 |     color: rgba(0, 0, 0, 0.65);
52 |     font-size: 14px;
53 |     background-color: #fff;
54 |     background-image: none;
55 |     border: 1px solid #d9d9d9;
56 |     border-radius: 4px;
57 |     transition: all 0.3s;
58 | }
59 | 
60 | .bpp-properties-panel input:focus,
61 | .bpp-properties-panel button:focus,
62 | .bpp-properties-panel textarea:focus,
63 | .bpp-properties-panel [contenteditable]:focus {
64 |     border-color: #000;
65 |     box-shadow: 0 0 1px 2px #f8f8f8;
66 | }
67 | 
68 | .bpp-properties-panel [contenteditable] {
69 |     margin: 0 auto;
70 | }
71 | 
72 | .bpp-properties-panel button {
73 |     height: 15px;
74 |     width: 14px;
75 |     text-align: center;
76 |     border-radius: 50%;
77 |     padding: 0;
78 |     color: #000;
79 | }
80 | 
81 | .bpp-textfield .clear {
82 |     top: 50%;
83 |     right: 11px;
84 |     transform: translateY(-50%);
85 |     background-color: #ccc;
86 | }
87 | 
88 | .bpp-properties-panel button:hover {
89 |     background: #000;
90 |     color: #fff;
91 | }
92 | 
93 | .bpp-properties-tab-bar {
94 |     border-color: #000;
95 | }
96 | 
97 | .bpp-properties-group+.bpp-properties-group {
98 |     border-top: 1px dotted #000;
99 | }


--------------------------------------------------------------------------------
/src/styles/bpmn-properties-theme-blue.css:
--------------------------------------------------------------------------------
 1 | .bpp-properties-panel {
 2 |     background-color: rgba(27, 31, 35, .05);
 3 |     border-color: rgba(0, 0, 0, 0.09);
 4 |     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
 5 | }
 6 | 
 7 | .bpp-properties-panel label {
 8 |     color: #0e88eb;
 9 | }
10 | 
11 | .bpp-properties-header {
12 |     color: #fff;
13 | }
14 | 
15 | .bpp-properties-header>.label {
16 |     color: #0e88eb;
17 |     font-size: 16px;
18 | }
19 | 
20 | .bpp-field-description {
21 |     font-size: 12px;
22 | }
23 | 
24 | ul.bpp-properties-tabs-links>li.bpp-active a {
25 |     border-top: 2px solid #0e88eb;
26 |     color: #0e88eb;
27 | }
28 | 
29 | ul.bpp-properties-tabs-links>li>a {
30 |     border: 1px solid #0e88eb;
31 |     border-radius: 2px 2px 0 0;
32 | }
33 | 
34 | .bpp-properties-group:hover>.group-toggle {
35 |     background-color: #0e88eb;
36 | }
37 | 
38 | .bpp-properties-group>.group-label {
39 |     font-size: 16px;
40 |     color: #0e88eb;
41 |     border-bottom: 2px solid #0e88eb;
42 |     font-style: normal;
43 | }
44 | 
45 | .bpp-properties-panel [type=text],
46 | .bpp-properties-panel [contenteditable],
47 | .bpp-properties-panel textarea,
48 | .bpp-properties-panel select {
49 |     width: 85%;
50 |     padding: 4px 11px;
51 |     color: rgba(0, 0, 0, 0.65);
52 |     font-size: 14px;
53 |     background-color: #fff;
54 |     background-image: none;
55 |     border: 1px solid #d9d9d9;
56 |     border-radius: 4px;
57 |     transition: all 0.3s;
58 | }
59 | 
60 | .bpp-properties-panel input:focus,
61 | .bpp-properties-panel button:focus,
62 | .bpp-properties-panel textarea:focus,
63 | .bpp-properties-panel [contenteditable]:focus {
64 |     border-color: #0e88eb;
65 |     box-shadow: 0 0 1px 2px #4d90fe45;
66 | }
67 | 
68 | .bpp-properties-panel [contenteditable] {
69 |     margin: 0 auto;
70 | }
71 | 
72 | .bpp-properties-panel button {
73 |     height: 15px;
74 |     width: 14px;
75 |     text-align: center;
76 |     border-radius: 50%;
77 |     padding: 0;
78 |     color: #fff;
79 | }
80 | 
81 | .bpp-textfield .clear {
82 |     top: 50%;
83 |     right: 11px;
84 |     transform: translateY(-50%);
85 |     background-color: #ccc;
86 | }
87 | 
88 | .bpp-properties-panel button:hover {
89 |     background: #0e88eb;
90 |     color: #fff;
91 | }
92 | 
93 | .bpp-properties-tab-bar {
94 |     border-color: #0e88eb;
95 | }
96 | 
97 | .bpp-properties-group+.bpp-properties-group {
98 |     border-top: 1px dotted #0e88eb;
99 | }


--------------------------------------------------------------------------------
/src/styles/bpmn-properties-theme-red.css:
--------------------------------------------------------------------------------
 1 | .bpp-properties-panel {
 2 |     background-color: #fff9f9;
 3 |     border-color: rgba(0, 0, 0, 0.09);
 4 |     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
 5 | }
 6 | 
 7 | .bpp-properties-panel label {
 8 |     color: rgb(239, 112, 96);
 9 | }
10 | 
11 | .bpp-properties-header {
12 |     color: #fff;
13 | }
14 | 
15 | .bpp-properties-header>.label {
16 |     color: rgb(239, 112, 96);
17 |     font-size: 16px;
18 | }
19 | 
20 | .bpp-field-description {
21 |     font-size: 12px;
22 | }
23 | 
24 | ul.bpp-properties-tabs-links>li.bpp-active a {
25 |     border-top: 2px solid rgb(239, 112, 96);
26 |     color: rgb(239, 112, 96);
27 | }
28 | 
29 | ul.bpp-properties-tabs-links>li>a {
30 |     border: 1px solid rgb(239, 112, 96);
31 |     border-radius: 2px 2px 0 0;
32 | }
33 | 
34 | .bpp-properties-group:hover>.group-toggle {
35 |     background-color: rgb(239, 112, 96);
36 | }
37 | 
38 | .bpp-properties-group>.group-label {
39 |     font-size: 16px;
40 |     color: rgb(239, 112, 96);
41 |     border-bottom: 2px solid rgb(239, 112, 96);
42 |     font-style: normal;
43 | }
44 | 
45 | .bpp-properties-panel [type=text],
46 | .bpp-properties-panel [contenteditable],
47 | .bpp-properties-panel textarea,
48 | .bpp-properties-panel select {
49 |     width: 85%;
50 |     padding: 4px 11px;
51 |     color: rgba(0, 0, 0, 0.65);
52 |     font-size: 14px;
53 |     background-color: #fff;
54 |     background-image: none;
55 |     border: 1px solid #d9d9d9;
56 |     border-radius: 4px;
57 |     transition: all 0.3s;
58 | }
59 | 
60 | .bpp-properties-panel input:focus,
61 | .bpp-properties-panel button:focus,
62 | .bpp-properties-panel textarea:focus,
63 | .bpp-properties-panel [contenteditable]:focus {
64 |     border-color: rgb(239, 112, 96);
65 |     box-shadow: 0 0 1px 2px rgb(239, 112, 96, 0.2);
66 | }
67 | 
68 | .bpp-properties-panel [contenteditable] {
69 |     margin: 0 auto;
70 | }
71 | 
72 | .bpp-properties-panel button {
73 |     height: 15px;
74 |     width: 14px;
75 |     text-align: center;
76 |     border-radius: 50%;
77 |     padding: 0;
78 |     color: #fff;
79 | }
80 | 
81 | .bpp-textfield .clear {
82 |     top: 50%;
83 |     right: 11px;
84 |     transform: translateY(-50%);
85 |     background-color: #ccc;
86 | }
87 | 
88 | .bpp-properties-panel button:hover {
89 |     background: rgb(239, 112, 96);
90 |     color: #fff;
91 | }
92 | 
93 | .bpp-properties-tab-bar {
94 |     border-color: rgb(239, 112, 96);
95 | }
96 | 
97 | .bpp-properties-group+.bpp-properties-group {
98 |     border-top: 1px dotted rgb(239, 112, 96);
99 | }


--------------------------------------------------------------------------------