@operato/scene-bpmn 1.1.7 → 1.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/base/bpmn-container-base.js +2 -2
  3. package/dist/base/bpmn-container-base.js.map +1 -1
  4. package/dist/base/bpmn-control-base.js +2 -2
  5. package/dist/base/bpmn-control-base.js.map +1 -1
  6. package/dist/bpmn-event.d.ts +9 -3
  7. package/dist/bpmn-event.js +28 -7
  8. package/dist/bpmn-event.js.map +1 -1
  9. package/dist/bpmn-expanded-subprocess.d.ts +13 -2
  10. package/dist/bpmn-expanded-subprocess.js +91 -3
  11. package/dist/bpmn-expanded-subprocess.js.map +1 -1
  12. package/dist/bpmn-flow.d.ts +8 -2
  13. package/dist/bpmn-flow.js +8 -0
  14. package/dist/bpmn-flow.js.map +1 -1
  15. package/dist/bpmn-lane.js +5 -5
  16. package/dist/bpmn-lane.js.map +1 -1
  17. package/dist/bpmn-subprocess.d.ts +13 -2
  18. package/dist/bpmn-subprocess.js +91 -3
  19. package/dist/bpmn-subprocess.js.map +1 -1
  20. package/dist/bpmn-task.js +14 -2
  21. package/dist/bpmn-task.js.map +1 -1
  22. package/dist/templates/bpmn-flow.d.ts +11 -4
  23. package/dist/templates/bpmn-flow.js +11 -4
  24. package/dist/templates/bpmn-flow.js.map +1 -1
  25. package/dist/templates/index.d.ts +24 -2
  26. package/icons/icon-bpmn-message.png +0 -0
  27. package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json +20 -5
  28. package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json +20 -0
  29. package/logs/application-2022-11-05-20.log +6 -0
  30. package/logs/application-2022-11-05-23.log +6 -0
  31. package/logs/application-2022-11-06-00.log +6 -0
  32. package/logs/application-2022-11-06-12.log +6 -0
  33. package/logs/connections-2022-11-05-20.log +35 -0
  34. package/logs/connections-2022-11-05-23.log +35 -0
  35. package/logs/connections-2022-11-06-00.log +35 -0
  36. package/logs/connections-2022-11-06-12.log +35 -0
  37. package/package.json +2 -2
  38. package/src/base/bpmn-container-base.ts +3 -3
  39. package/src/base/bpmn-control-base.ts +3 -3
  40. package/src/bpmn-event.ts +36 -10
  41. package/src/bpmn-expanded-subprocess.ts +94 -3
  42. package/src/bpmn-flow.ts +9 -0
  43. package/src/bpmn-lane.ts +8 -8
  44. package/src/bpmn-subprocess.ts +93 -3
  45. package/src/bpmn-task.ts +13 -2
  46. package/src/templates/bpmn-flow.ts +11 -4
  47. package/translations/en.json +5 -1
  48. package/translations/ko.json +5 -1
  49. package/translations/ms.json +5 -1
  50. package/translations/zh.json +5 -1
  51. package/tsconfig.tsbuildinfo +1 -1
  52. package/logs/application-2022-11-04-11.log +0 -6
@@ -0,0 +1,35 @@
1
+ 2022-11-05T23:31:02+09:00 info: Initializing ConnectionManager...
2
+ 2022-11-05T23:31:02+09:00 info: Connector 'echo-back-server' started to ready
3
+ 2022-11-05T23:31:02+09:00 info: Connector 'echo-back' started to ready
4
+ 2022-11-05T23:31:02+09:00 info: Connector 'http-connector' started to ready
5
+ 2022-11-05T23:31:02+09:00 info: Connector 'graphql-connector' started to ready
6
+ 2022-11-05T23:31:02+09:00 info: Connector 'sqlite-connector' started to ready
7
+ 2022-11-05T23:31:02+09:00 info: Connector 'postgresql-connector' started to ready
8
+ 2022-11-05T23:31:02+09:00 info: Connector 'mqtt-connector' started to ready
9
+ 2022-11-05T23:31:02+09:00 info: Connector 'mssql-connector' started to ready
10
+ 2022-11-05T23:31:02+09:00 info: Connector 'oracle-connector' started to ready
11
+ 2022-11-05T23:31:02+09:00 info: Connector 'mysql-connector' started to ready
12
+ 2022-11-05T23:31:02+09:00 info: Connector 'socket-server' started to ready
13
+ 2022-11-05T23:31:02+09:00 info: echo-back-servers are ready
14
+ 2022-11-05T23:31:02+09:00 info: echo-back connections are ready
15
+ 2022-11-05T23:31:02+09:00 info: http-connector connections are ready
16
+ 2022-11-05T23:31:02+09:00 info: graphql-connector connections are ready
17
+ 2022-11-05T23:31:02+09:00 info: sqlite-connector connections are ready
18
+ 2022-11-05T23:31:02+09:00 info: postgresql-connector connections are ready
19
+ 2022-11-05T23:31:02+09:00 info: mqtt-connector connections are ready
20
+ 2022-11-05T23:31:02+09:00 info: mssql-connector connections are ready
21
+ 2022-11-05T23:31:02+09:00 info: oracle-connector connections are ready
22
+ 2022-11-05T23:31:02+09:00 info: mysql-connector connections are ready
23
+ 2022-11-05T23:31:02+09:00 info: socket servers are ready
24
+ 2022-11-05T23:31:02+09:00 info: All connector for 'echo-back-server' ready
25
+ 2022-11-05T23:31:02+09:00 info: All connector for 'echo-back' ready
26
+ 2022-11-05T23:31:02+09:00 info: All connector for 'http-connector' ready
27
+ 2022-11-05T23:31:02+09:00 info: All connector for 'graphql-connector' ready
28
+ 2022-11-05T23:31:02+09:00 info: All connector for 'sqlite-connector' ready
29
+ 2022-11-05T23:31:02+09:00 info: All connector for 'postgresql-connector' ready
30
+ 2022-11-05T23:31:02+09:00 info: All connector for 'mqtt-connector' ready
31
+ 2022-11-05T23:31:02+09:00 info: All connector for 'mssql-connector' ready
32
+ 2022-11-05T23:31:02+09:00 info: All connector for 'oracle-connector' ready
33
+ 2022-11-05T23:31:02+09:00 info: All connector for 'mysql-connector' ready
34
+ 2022-11-05T23:31:02+09:00 info: All connector for 'socket-server' ready
35
+ 2022-11-05T23:31:02+09:00 info: ConnectionManager initialization done:
@@ -0,0 +1,35 @@
1
+ 2022-11-06T00:46:28+09:00 info: Initializing ConnectionManager...
2
+ 2022-11-06T00:46:28+09:00 info: Connector 'echo-back-server' started to ready
3
+ 2022-11-06T00:46:28+09:00 info: Connector 'echo-back' started to ready
4
+ 2022-11-06T00:46:28+09:00 info: Connector 'http-connector' started to ready
5
+ 2022-11-06T00:46:28+09:00 info: Connector 'graphql-connector' started to ready
6
+ 2022-11-06T00:46:28+09:00 info: Connector 'sqlite-connector' started to ready
7
+ 2022-11-06T00:46:28+09:00 info: Connector 'postgresql-connector' started to ready
8
+ 2022-11-06T00:46:28+09:00 info: Connector 'mqtt-connector' started to ready
9
+ 2022-11-06T00:46:28+09:00 info: Connector 'mssql-connector' started to ready
10
+ 2022-11-06T00:46:28+09:00 info: Connector 'oracle-connector' started to ready
11
+ 2022-11-06T00:46:28+09:00 info: Connector 'mysql-connector' started to ready
12
+ 2022-11-06T00:46:28+09:00 info: Connector 'socket-server' started to ready
13
+ 2022-11-06T00:46:28+09:00 info: echo-back-servers are ready
14
+ 2022-11-06T00:46:28+09:00 info: echo-back connections are ready
15
+ 2022-11-06T00:46:28+09:00 info: http-connector connections are ready
16
+ 2022-11-06T00:46:28+09:00 info: graphql-connector connections are ready
17
+ 2022-11-06T00:46:28+09:00 info: sqlite-connector connections are ready
18
+ 2022-11-06T00:46:28+09:00 info: postgresql-connector connections are ready
19
+ 2022-11-06T00:46:28+09:00 info: mqtt-connector connections are ready
20
+ 2022-11-06T00:46:28+09:00 info: mssql-connector connections are ready
21
+ 2022-11-06T00:46:28+09:00 info: oracle-connector connections are ready
22
+ 2022-11-06T00:46:28+09:00 info: mysql-connector connections are ready
23
+ 2022-11-06T00:46:28+09:00 info: socket servers are ready
24
+ 2022-11-06T00:46:28+09:00 info: All connector for 'echo-back-server' ready
25
+ 2022-11-06T00:46:28+09:00 info: All connector for 'echo-back' ready
26
+ 2022-11-06T00:46:28+09:00 info: All connector for 'http-connector' ready
27
+ 2022-11-06T00:46:28+09:00 info: All connector for 'graphql-connector' ready
28
+ 2022-11-06T00:46:28+09:00 info: All connector for 'sqlite-connector' ready
29
+ 2022-11-06T00:46:28+09:00 info: All connector for 'postgresql-connector' ready
30
+ 2022-11-06T00:46:28+09:00 info: All connector for 'mqtt-connector' ready
31
+ 2022-11-06T00:46:28+09:00 info: All connector for 'mssql-connector' ready
32
+ 2022-11-06T00:46:28+09:00 info: All connector for 'oracle-connector' ready
33
+ 2022-11-06T00:46:28+09:00 info: All connector for 'mysql-connector' ready
34
+ 2022-11-06T00:46:28+09:00 info: All connector for 'socket-server' ready
35
+ 2022-11-06T00:46:28+09:00 info: ConnectionManager initialization done:
@@ -0,0 +1,35 @@
1
+ 2022-11-06T12:47:58+09:00 info: Initializing ConnectionManager...
2
+ 2022-11-06T12:47:58+09:00 info: Connector 'echo-back-server' started to ready
3
+ 2022-11-06T12:47:58+09:00 info: Connector 'echo-back' started to ready
4
+ 2022-11-06T12:47:58+09:00 info: Connector 'http-connector' started to ready
5
+ 2022-11-06T12:47:58+09:00 info: Connector 'graphql-connector' started to ready
6
+ 2022-11-06T12:47:58+09:00 info: Connector 'sqlite-connector' started to ready
7
+ 2022-11-06T12:47:58+09:00 info: Connector 'postgresql-connector' started to ready
8
+ 2022-11-06T12:47:58+09:00 info: Connector 'mqtt-connector' started to ready
9
+ 2022-11-06T12:47:58+09:00 info: Connector 'mssql-connector' started to ready
10
+ 2022-11-06T12:47:58+09:00 info: Connector 'oracle-connector' started to ready
11
+ 2022-11-06T12:47:58+09:00 info: Connector 'mysql-connector' started to ready
12
+ 2022-11-06T12:47:58+09:00 info: Connector 'socket-server' started to ready
13
+ 2022-11-06T12:47:58+09:00 info: echo-back-servers are ready
14
+ 2022-11-06T12:47:58+09:00 info: echo-back connections are ready
15
+ 2022-11-06T12:47:58+09:00 info: http-connector connections are ready
16
+ 2022-11-06T12:47:58+09:00 info: graphql-connector connections are ready
17
+ 2022-11-06T12:47:58+09:00 info: sqlite-connector connections are ready
18
+ 2022-11-06T12:47:58+09:00 info: postgresql-connector connections are ready
19
+ 2022-11-06T12:47:58+09:00 info: mqtt-connector connections are ready
20
+ 2022-11-06T12:47:58+09:00 info: mssql-connector connections are ready
21
+ 2022-11-06T12:47:58+09:00 info: oracle-connector connections are ready
22
+ 2022-11-06T12:47:58+09:00 info: mysql-connector connections are ready
23
+ 2022-11-06T12:47:58+09:00 info: socket servers are ready
24
+ 2022-11-06T12:47:58+09:00 info: All connector for 'echo-back-server' ready
25
+ 2022-11-06T12:47:58+09:00 info: All connector for 'echo-back' ready
26
+ 2022-11-06T12:47:58+09:00 info: All connector for 'http-connector' ready
27
+ 2022-11-06T12:47:58+09:00 info: All connector for 'graphql-connector' ready
28
+ 2022-11-06T12:47:58+09:00 info: All connector for 'sqlite-connector' ready
29
+ 2022-11-06T12:47:58+09:00 info: All connector for 'postgresql-connector' ready
30
+ 2022-11-06T12:47:58+09:00 info: All connector for 'mqtt-connector' ready
31
+ 2022-11-06T12:47:58+09:00 info: All connector for 'mssql-connector' ready
32
+ 2022-11-06T12:47:58+09:00 info: All connector for 'oracle-connector' ready
33
+ 2022-11-06T12:47:58+09:00 info: All connector for 'mysql-connector' ready
34
+ 2022-11-06T12:47:58+09:00 info: All connector for 'socket-server' ready
35
+ 2022-11-06T12:47:58+09:00 info: ConnectionManager initialization done:
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "bpmn components for things-scene",
4
4
  "license": "MIT",
5
5
  "author": "heartyoh",
6
- "version": "1.1.7",
6
+ "version": "1.1.9",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.js",
9
9
  "things-scene": true,
@@ -57,5 +57,5 @@
57
57
  "prettier --write"
58
58
  ]
59
59
  },
60
- "gitHead": "5bf36c7b5b092753228d712a78946ccac8346957"
60
+ "gitHead": "57be850ad2f3d257cecadb5e956b542d1c10a9aa"
61
61
  }
@@ -1,4 +1,4 @@
1
- import { Anchor, Container, Connectable, LinkEnd } from '@hatiolab/things-scene'
1
+ import { Anchor, Container, Connectable, LinkEnd, Properties } from '@hatiolab/things-scene'
2
2
 
3
3
  export enum DIRECTION {
4
4
  NORTH = 'N',
@@ -30,8 +30,8 @@ export type NODE = {
30
30
 
31
31
  const STYLE_MAP = {
32
32
  message: {
33
- strokeStyle: 'navy',
34
- fillStyle: 'navy'
33
+ strokeStyle: 'black',
34
+ fillStyle: 'black'
35
35
  },
36
36
  sequence: {
37
37
  strokeStyle: 'red',
@@ -1,4 +1,4 @@
1
- import { Anchor, BOUNDS, Component, Connectable, LinkEnd, RectPath, Shape } from '@hatiolab/things-scene'
1
+ import { Anchor, BOUNDS, Component, Connectable, LinkEnd, Properties, RectPath, Shape } from '@hatiolab/things-scene'
2
2
 
3
3
  export enum DIRECTION {
4
4
  NORTH = 'N',
@@ -30,8 +30,8 @@ export type NODE = {
30
30
 
31
31
  const STYLE_MAP = {
32
32
  message: {
33
- strokeStyle: 'navy',
34
- fillStyle: 'navy'
33
+ strokeStyle: 'black',
34
+ fillStyle: 'black'
35
35
  },
36
36
  sequence: {
37
37
  strokeStyle: 'red',
package/src/bpmn-event.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, Properties } from '@hatiolab/things-scene'
1
+ import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
2
2
 
3
3
  import BPMNControlBase from './base/bpmn-control-base'
4
4
 
@@ -89,6 +89,11 @@ const NATURE = {
89
89
  }
90
90
  ]
91
91
  }
92
+ },
93
+ {
94
+ type: 'checkbox',
95
+ label: 'interrupting',
96
+ name: 'interrupting'
92
97
  }
93
98
  ],
94
99
  help: '/bpmn/event/event'
@@ -101,41 +106,60 @@ export default class BPMNEvent extends BPMNControlBase {
101
106
  return NATURE
102
107
  }
103
108
 
109
+ get textBounds(): BOUNDS {
110
+ var { left, top, width, height } = this.bounds
111
+ var { paddingTop, paddingLeft, paddingRight } = this.state
112
+
113
+ paddingTop ||= 0
114
+ paddingLeft ||= 0
115
+ paddingRight ||= 0
116
+
117
+ return {
118
+ left: left + paddingLeft,
119
+ top: top + paddingTop + height + 10,
120
+ width: Math.max(width - paddingLeft - paddingRight, 0),
121
+ height: 0
122
+ }
123
+ }
124
+
104
125
  render(ctx: CanvasRenderingContext2D) {
105
126
  const { left, top, width, height } = this.bounds
106
- const { lineWidth } = this.state
107
- const { eventType } = this.state
127
+ const { eventType, interrupting } = this.state
108
128
  const cx = width / 2
109
129
  const cy = height / 2
110
130
 
111
131
  ctx.translate(left, top)
112
132
  ctx.beginPath()
113
133
 
134
+ var lineWidth = 2
135
+
114
136
  switch (eventType) {
115
137
  case 'intermediate':
116
- this.setState('lineWidth', 2)
117
-
138
+ lineWidth = 1
118
139
  ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI)
119
140
  ctx.moveTo(width / 2 + width / 2.5, height / 2)
120
141
  ctx.ellipse(cx, cy, width / 2.5, height / 2.5, 0, 0, 2 * Math.PI)
121
142
  break
143
+
122
144
  case 'end':
123
- this.setState('lineWidth', 6)
145
+ lineWidth = 5
124
146
  ctx.ellipse(cx, cy, width / 2 - 1.5, height / 2 - 1.5, 0, 0, 2 * Math.PI)
125
147
  break
148
+
126
149
  case 'start':
127
150
  default:
128
- this.setState('lineWidth', 2)
129
151
  ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI)
130
152
  break
131
153
  }
132
154
 
133
155
  this.drawFill(ctx)
134
- this.drawStroke(ctx)
135
156
 
136
- ctx.beginPath()
157
+ this.drawStroke(ctx, {
158
+ lineWidth,
159
+ lineDash: interrupting ? 'round-dot' : 'solid'
160
+ })
137
161
 
138
- this.setState('lineWidth', lineWidth)
162
+ ctx.beginPath()
139
163
 
140
164
  const image = this.getImageElement()
141
165
  if (image) {
@@ -147,7 +171,9 @@ export default class BPMNEvent extends BPMNControlBase {
147
171
 
148
172
  onchange(after: Properties, before: Properties) {
149
173
  if ('marker' in after || 'strokeStyle' in after) {
174
+ // Since strokeStyle affects the image, the image is redrawn according to the change of strokeStyle.
150
175
  delete this.imageElement
176
+ this.invalidate()
151
177
  }
152
178
  }
153
179
 
@@ -1,4 +1,5 @@
1
1
  import { Component } from '@hatiolab/things-scene'
2
+ import { over } from 'lodash'
2
3
 
3
4
  import BPMNContainerBase, { DIRECTION, INOUT, NODE, FLOW } from './base/bpmn-container-base'
4
5
 
@@ -16,6 +17,77 @@ const NATURE = {
16
17
  type: 'checkbox',
17
18
  label: 'call-activity',
18
19
  name: 'callActivity'
20
+ },
21
+ {
22
+ type: 'checkbox',
23
+ label: 'transaction',
24
+ name: 'transaction'
25
+ },
26
+ {
27
+ type: 'checkbox',
28
+ label: 'interrupting',
29
+ name: 'interrupting'
30
+ },
31
+ {
32
+ type: 'select',
33
+ label: 'event',
34
+ name: 'event',
35
+ property: {
36
+ options: [
37
+ {
38
+ display: '',
39
+ value: ''
40
+ },
41
+ {
42
+ display: 'message',
43
+ value: 'message'
44
+ },
45
+ {
46
+ display: 'timer',
47
+ value: 'timer'
48
+ },
49
+ {
50
+ display: 'error',
51
+ value: 'error'
52
+ },
53
+ {
54
+ display: 'escalation',
55
+ value: 'escalation'
56
+ },
57
+ {
58
+ display: 'cancel',
59
+ value: 'cancel'
60
+ },
61
+ {
62
+ display: 'compensation',
63
+ value: 'compensation'
64
+ },
65
+ {
66
+ display: 'conditional',
67
+ value: 'conditional'
68
+ },
69
+ {
70
+ display: 'link',
71
+ value: 'link'
72
+ },
73
+ {
74
+ display: 'signal',
75
+ value: 'signal'
76
+ },
77
+ {
78
+ display: 'terminate',
79
+ value: 'terminate'
80
+ },
81
+ {
82
+ display: 'multiple',
83
+ value: 'multiple'
84
+ },
85
+ {
86
+ display: 'parallel multiple',
87
+ value: 'parallel-multiple'
88
+ }
89
+ ]
90
+ }
19
91
  }
20
92
  ],
21
93
  help: '/bpmn/expanded-subprocess/expanded-subprocess'
@@ -28,8 +100,8 @@ export default class BPMNExpandedSubprocess extends BPMNContainerBase {
28
100
 
29
101
  render(ctx: CanvasRenderingContext2D) {
30
102
  const { left, top, width, height } = this.bounds
31
- const { callActivity } = this.state
32
- const radius = 9
103
+ const { callActivity, interrupting, transaction } = this.state
104
+ var radius = 9
33
105
 
34
106
  ctx.translate(left, top)
35
107
  ctx.beginPath()
@@ -40,8 +112,27 @@ export default class BPMNExpandedSubprocess extends BPMNContainerBase {
40
112
  ctx.arcTo(0, height, 0, 0, radius)
41
113
  ctx.arcTo(0, 0, width, 0, radius)
42
114
 
115
+ if (transaction) {
116
+ const LINEGAP = 3
117
+ radius -= LINEGAP
118
+
119
+ ctx.moveTo(radius + LINEGAP, LINEGAP)
120
+ ctx.arcTo(width - LINEGAP, LINEGAP, width - LINEGAP, height - LINEGAP, radius)
121
+ ctx.arcTo(width - LINEGAP, height - LINEGAP, LINEGAP, height, radius)
122
+ ctx.arcTo(LINEGAP, height - LINEGAP, LINEGAP, LINEGAP, radius)
123
+ ctx.arcTo(LINEGAP, LINEGAP, width - LINEGAP, LINEGAP, radius)
124
+ }
125
+
43
126
  this.drawFill(ctx)
44
- this.drawStroke(ctx, callActivity ? { lineWidth: 5 } : undefined)
127
+
128
+ if (callActivity) {
129
+ this.drawStroke(ctx, { lineWidth: 5 })
130
+ } else {
131
+ this.drawStroke(ctx, {
132
+ lineWidth: transaction ? 1 : 2,
133
+ lineDash: interrupting ? 'dash' : 'solid'
134
+ })
135
+ }
45
136
 
46
137
  ctx.translate(-left, -top)
47
138
  }
package/src/bpmn-flow.ts CHANGED
@@ -14,6 +14,11 @@ const NATURE = {
14
14
  max: 100,
15
15
  step: 1
16
16
  }
17
+ },
18
+ {
19
+ type: 'checkbox',
20
+ label: 'default',
21
+ name: 'default'
17
22
  }
18
23
  ],
19
24
  help: 'bpmn/flow/flow'
@@ -23,6 +28,10 @@ export default class BPMNFlow extends OrthoLine {
23
28
  get nature() {
24
29
  return NATURE
25
30
  }
31
+
32
+ get pathExtendable() {
33
+ return false
34
+ }
26
35
  }
27
36
 
28
37
  Component.register('bpmn-flow', BPMNFlow)
package/src/bpmn-lane.ts CHANGED
@@ -50,10 +50,10 @@ export default class BPMNLane extends BPMNContainerBase {
50
50
  textAlign,
51
51
  textBaseline,
52
52
 
53
- paddingTop = 0,
54
- paddingBottom = 0,
55
- paddingLeft = 0,
56
- paddingRight = 0,
53
+ paddingTop,
54
+ paddingBottom,
55
+ paddingLeft,
56
+ paddingRight,
57
57
 
58
58
  fontSize = 20,
59
59
  fontColor,
@@ -62,10 +62,10 @@ export default class BPMNLane extends BPMNContainerBase {
62
62
  name
63
63
  } = this.state
64
64
 
65
- paddingBottom = paddingBottom || 0
66
- paddingTop = paddingTop || 0
67
- paddingLeft = paddingLeft || 0
68
- paddingRight = paddingRight || 0
65
+ paddingBottom ||= 0
66
+ paddingTop ||= 0
67
+ paddingLeft ||= 0
68
+ paddingRight ||= 0
69
69
 
70
70
  var { width, height } = this.bounds
71
71
  const vertical = height > width
@@ -31,6 +31,77 @@ const NATURE = {
31
31
  type: 'checkbox',
32
32
  label: 'call-activity',
33
33
  name: 'callActivity'
34
+ },
35
+ {
36
+ type: 'checkbox',
37
+ label: 'transaction',
38
+ name: 'transaction'
39
+ },
40
+ {
41
+ type: 'checkbox',
42
+ label: 'interrupting',
43
+ name: 'interrupting'
44
+ },
45
+ {
46
+ type: 'select',
47
+ label: 'event',
48
+ name: 'event',
49
+ property: {
50
+ options: [
51
+ {
52
+ display: '',
53
+ value: ''
54
+ },
55
+ {
56
+ display: 'message',
57
+ value: 'message'
58
+ },
59
+ {
60
+ display: 'timer',
61
+ value: 'timer'
62
+ },
63
+ {
64
+ display: 'error',
65
+ value: 'error'
66
+ },
67
+ {
68
+ display: 'escalation',
69
+ value: 'escalation'
70
+ },
71
+ {
72
+ display: 'cancel',
73
+ value: 'cancel'
74
+ },
75
+ {
76
+ display: 'compensation',
77
+ value: 'compensation'
78
+ },
79
+ {
80
+ display: 'conditional',
81
+ value: 'conditional'
82
+ },
83
+ {
84
+ display: 'link',
85
+ value: 'link'
86
+ },
87
+ {
88
+ display: 'signal',
89
+ value: 'signal'
90
+ },
91
+ {
92
+ display: 'terminate',
93
+ value: 'terminate'
94
+ },
95
+ {
96
+ display: 'multiple',
97
+ value: 'multiple'
98
+ },
99
+ {
100
+ display: 'parallel multiple',
101
+ value: 'parallel-multiple'
102
+ }
103
+ ]
104
+ }
34
105
  }
35
106
  ],
36
107
  help: '/bpmn/subprocess/subprocess'
@@ -45,12 +116,12 @@ export default class BPMNSubprocess extends BPMNControlBase {
45
116
 
46
117
  render(ctx: CanvasRenderingContext2D) {
47
118
  var { left, top, width, height } = this.bounds
48
- const { callActivity } = this.state
119
+ const { callActivity, interrupting, transaction } = this.state
49
120
 
50
121
  ctx.translate(left, top)
51
122
  ctx.beginPath()
52
123
 
53
- var radius = 9
124
+ var radius = 10
54
125
 
55
126
  ctx.moveTo(radius, 0)
56
127
  ctx.arcTo(width, 0, width, height, radius)
@@ -58,8 +129,27 @@ export default class BPMNSubprocess extends BPMNControlBase {
58
129
  ctx.arcTo(0, height, 0, 0, radius)
59
130
  ctx.arcTo(0, 0, width, 0, radius)
60
131
 
132
+ if (transaction) {
133
+ const LINEGAP = 3
134
+ radius -= LINEGAP
135
+
136
+ ctx.moveTo(radius + LINEGAP, LINEGAP)
137
+ ctx.arcTo(width - LINEGAP, LINEGAP, width - LINEGAP, height - LINEGAP, radius)
138
+ ctx.arcTo(width - LINEGAP, height - LINEGAP, LINEGAP, height, radius)
139
+ ctx.arcTo(LINEGAP, height - LINEGAP, LINEGAP, LINEGAP, radius)
140
+ ctx.arcTo(LINEGAP, LINEGAP, width - LINEGAP, LINEGAP, radius)
141
+ }
142
+
61
143
  this.drawFill(ctx)
62
- this.drawStroke(ctx, callActivity ? { lineWidth: 5 } : undefined)
144
+
145
+ if (callActivity) {
146
+ this.drawStroke(ctx, { lineWidth: 5 })
147
+ } else {
148
+ this.drawStroke(ctx, {
149
+ lineWidth: transaction ? 1 : 2,
150
+ lineDash: interrupting ? 'dash' : 'solid'
151
+ })
152
+ }
63
153
 
64
154
  ctx.beginPath()
65
155
 
package/src/bpmn-task.ts CHANGED
@@ -78,6 +78,11 @@ const NATURE = {
78
78
  type: 'checkbox',
79
79
  label: 'call-activity',
80
80
  name: 'callActivity'
81
+ },
82
+ {
83
+ type: 'checkbox',
84
+ label: 'interrupting',
85
+ name: 'interrupting'
81
86
  }
82
87
  ],
83
88
  help: '/bpmn/task/task'
@@ -93,7 +98,7 @@ export default class BPMNTask extends BPMNControlBase {
93
98
 
94
99
  render(ctx: CanvasRenderingContext2D) {
95
100
  const { left, top, width, height } = this.bounds
96
- const { callActivity } = this.state
101
+ const { callActivity, interrupting } = this.state
97
102
  const radius = 9
98
103
 
99
104
  ctx.translate(left, top)
@@ -106,7 +111,13 @@ export default class BPMNTask extends BPMNControlBase {
106
111
  ctx.arcTo(0, 0, width, 0, radius)
107
112
 
108
113
  this.drawFill(ctx)
109
- this.drawStroke(ctx, callActivity ? { lineWidth: 5 } : undefined)
114
+ if (callActivity) {
115
+ this.drawStroke(ctx, { lineWidth: 5 })
116
+ } else {
117
+ this.drawStroke(ctx, {
118
+ lineDash: interrupting ? 'dash' : 'solid'
119
+ })
120
+ }
110
121
 
111
122
  ctx.beginPath()
112
123
 
@@ -7,10 +7,17 @@ export default {
7
7
  icon,
8
8
  model: {
9
9
  type: 'bpmn-flow',
10
- left: 10,
11
- top: 10,
12
- width: 80,
13
- height: 50
10
+ x1: 100,
11
+ y1: 100,
12
+ x2: 200,
13
+ y2: 200,
14
+ strokeStyle: 'black',
15
+ lineWidth: 2,
16
+ round: 10,
17
+ begin: 'none',
18
+ beginSize: 'size1',
19
+ end: 'arrow',
20
+ endSize: 'size9'
14
21
  },
15
22
  about: '/helps/bpmn/flow/flow.md'
16
23
  }
@@ -9,5 +9,9 @@
9
9
  "label.multi-instance": "multi-instance",
10
10
  "label.task-type": "task type",
11
11
  "label.collection": "collection",
12
- "label.call-activity": "call activity"
12
+ "label.call-activity": "call activity",
13
+ "label.transaction": "transaction",
14
+ "label.interrupting": "interrupting",
15
+ "label.default": "default",
16
+ "label.event": "event"
13
17
  }
@@ -9,5 +9,9 @@
9
9
  "label.multi-instance": "멀티 인스턴스",
10
10
  "label.task-type": "태스크 종류",
11
11
  "label.collection": "컬렉션",
12
- "label.call-activity": "call activity"
12
+ "label.call-activity": "호출액티비티",
13
+ "label.transaction": "트랜잭션",
14
+ "label.interrupting": "인터럽팅",
15
+ "label.default": "디폴트",
16
+ "label.event": "이벤트"
13
17
  }
@@ -9,5 +9,9 @@
9
9
  "label.multi-instance": "multi-instance",
10
10
  "label.task-type": "task type",
11
11
  "label.collection": "collection",
12
- "label.call-activity": "call activity"
12
+ "label.call-activity": "call activity",
13
+ "label.transaction": "transaction",
14
+ "label.interrupting": "interrupting",
15
+ "label.default": "default",
16
+ "label.event": "event"
13
17
  }
@@ -9,5 +9,9 @@
9
9
  "label.multi-instance": "multi-instance",
10
10
  "label.task-type": "task type",
11
11
  "label.collection": "collection",
12
- "label.call-activity": "call activity"
12
+ "label.call-activity": "call activity",
13
+ "label.transaction": "transaction",
14
+ "label.interrupting": "interrupting",
15
+ "label.default": "default",
16
+ "label.event": "event"
13
17
  }