@processmaker/modeler 1.33.0 → 1.35.0
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.
- package/cypress.json +1 -1
- package/dist/modeler.common.js +846 -2162
- package/dist/modeler.common.js.map +1 -1
- package/dist/modeler.umd.js +846 -2162
- package/dist/modeler.umd.js.map +1 -1
- package/dist/modeler.umd.min.js +4 -4
- package/dist/modeler.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/.DS_Store +0 -0
- package/src/ModelerApp.vue +0 -13
- package/src/components/crown/crownButtons/icons/faAlignBottom.js +3 -3
- package/src/components/crown/crownButtons/icons/faAlignLeft.js +3 -3
- package/src/components/crown/crownButtons/icons/faAlignRight.js +3 -3
- package/src/components/crown/crownButtons/icons/faAlignTop.js +3 -3
- package/src/components/crown/crownButtons/icons/faCenterHorizontally.js +3 -3
- package/src/components/crown/crownButtons/icons/faCenterVertically.js +3 -3
- package/src/components/crown/crownButtons/icons/faDistributeHorizontally.js +3 -3
- package/src/components/crown/crownButtons/icons/faDistributeVertically.js +3 -3
- package/src/components/crown/crownMultiselect/crownMultiselect.vue +3 -3
- package/src/components/highlightColors.js +8 -0
- package/src/components/inspectors/inspectorButton/inspectorButton.scss +1 -0
- package/src/components/modeler/Modeler.vue +46 -3
- package/src/components/nodes/index.js +0 -1
- package/src/components/railBottom/RailBottom.vue +9 -0
- package/src/components/railBottom/controls/Controls.vue +14 -2
- package/src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue +6 -4
- package/src/components/railBottom/controls/controls.scss +2 -0
- package/src/components/railBottom/miniPaperControl/miniPaperControl.scss +1 -0
- package/src/components/railBottom/railBottom.scss +2 -0
- package/src/components/railBottom/zoomControl/ZoomControl.vue +1 -3
- package/src/components/rails/explorer-rail/explorer.vue +3 -3
- package/src/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue +3 -0
- package/src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue +19 -9
- package/src/components/toolbar/ToolBar.vue +21 -5
- package/src/components/toolbar/toolbar.scss +23 -0
- package/src/components/topRail/validateControl/validateButton/ValidateButton.vue +2 -0
- package/src/mixins/highlightConfig.js +15 -12
- package/src/mixins/linkConfig.js +15 -8
- package/src/nodeTypesStore.js +2 -0
- package/src/store.js +1 -0
- package/src/components/modeler/ModelerReadonly.vue +0 -1042
package/package.json
CHANGED
package/src/.DS_Store
CHANGED
|
Binary file
|
package/src/ModelerApp.vue
CHANGED
|
@@ -2,19 +2,6 @@
|
|
|
2
2
|
<b-container fluid id="modeler-app" class="h-100 position-relative p-0">
|
|
3
3
|
|
|
4
4
|
<b-card no-body class="h-100 rounded-0">
|
|
5
|
-
<!-- TODO Remove me when the time comes -->
|
|
6
|
-
<!-- <b-card-header class="d-flex align-items-center header">-->
|
|
7
|
-
<!-- <b-card-text class="m-0 font-weight-bolder">-->
|
|
8
|
-
<!-- {{ $t('ProcessMaker Modeler') }}-->
|
|
9
|
-
<!-- </b-card-text>-->
|
|
10
|
-
|
|
11
|
-
<!-- <div class="ml-auto">-->
|
|
12
|
-
<!-- <b-btn variant="secondary" size="sm" v-b-modal="'uploadmodal'" class="mr-2">-->
|
|
13
|
-
<!-- <i class="fas fa-upload mr-1"/>-->
|
|
14
|
-
<!-- {{ $t('Upload XML') }}-->
|
|
15
|
-
<!-- </b-btn>-->
|
|
16
|
-
<!-- </div>-->
|
|
17
|
-
<!-- </b-card-header>-->
|
|
18
5
|
<b-card-body class="overflow-hidden position-relative p-0 vh-100">
|
|
19
6
|
<modeler ref="modeler" @set-xml-manager="xmlManager = $event" @validate="validationErrors = $event" @warnings="warnings = $event" :decorations="decorations" />
|
|
20
7
|
</b-card-body>
|
|
@@ -2,10 +2,10 @@ export const faAlignBottom = {
|
|
|
2
2
|
prefix: 'fpm',
|
|
3
3
|
iconName: 'fa-align-bottom',
|
|
4
4
|
icon: [
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
24,
|
|
6
|
+
24,
|
|
7
7
|
[],
|
|
8
8
|
'e001',
|
|
9
|
-
'
|
|
9
|
+
'M4 12.32v9.32h1V3H4v9.32m2.28-3.6v1.96h8.52V6.76H6.28v1.96m0 7.2v1.96h13.08v-3.92H6.28v1.96',
|
|
10
10
|
],
|
|
11
11
|
};
|
|
@@ -2,10 +2,10 @@ export const faAlignLeft = {
|
|
|
2
2
|
prefix: 'fpm',
|
|
3
3
|
iconName: 'fa-align-left',
|
|
4
4
|
icon: [
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
24,
|
|
6
|
+
24,
|
|
7
7
|
[],
|
|
8
8
|
'e001',
|
|
9
|
-
'
|
|
9
|
+
'M4 12.32v9.32h1V3H4v9.32m2.28-3.6v1.96h8.52V6.76H6.28v1.96m0 7.2v1.96h13.08v-3.92H6.28v1.96',
|
|
10
10
|
],
|
|
11
11
|
};
|
|
@@ -2,10 +2,10 @@ export const faAlignRight = {
|
|
|
2
2
|
prefix: 'fpm',
|
|
3
3
|
iconName: 'fa-align-right',
|
|
4
4
|
icon: [
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
24,
|
|
6
|
+
24,
|
|
7
7
|
[],
|
|
8
8
|
'e001',
|
|
9
|
-
'
|
|
9
|
+
'M18.4 12.32v9.32h1V3h-1v9.32m-9.8-3.6v1.96h8.48V6.76H8.6v1.96M4 15.92v1.96h13.08v-3.92H4v1.96',
|
|
10
10
|
],
|
|
11
11
|
};
|
|
@@ -2,10 +2,10 @@ export const faAlignTop = {
|
|
|
2
2
|
prefix: 'fpm',
|
|
3
3
|
iconName: 'fa-align-top',
|
|
4
4
|
icon: [
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
24,
|
|
6
|
+
24,
|
|
7
7
|
[],
|
|
8
8
|
'e001',
|
|
9
|
-
'
|
|
9
|
+
'M3 4.5V5h18.64V4H3v.5m3.76 8.32v6.54h3.92V6.28H6.76v6.54m7.2-2.28v4.26h3.92V6.28h-3.92v4.26',
|
|
10
10
|
],
|
|
11
11
|
};
|
|
@@ -2,10 +2,10 @@ export const faCenterHorizontally = {
|
|
|
2
2
|
prefix: 'fpm',
|
|
3
3
|
iconName: 'fa-center-horizontally',
|
|
4
4
|
icon: [
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
24,
|
|
6
|
+
24,
|
|
7
7
|
[],
|
|
8
8
|
'e001',
|
|
9
|
-
'
|
|
9
|
+
'M6.76 8.04v3.04H3v.96h3.76v6.04h3.92v-6.04h3.28v3.76h3.92v-3.76h3.76v-.959l-1.87-.011-1.87-.01-.01-1.89-.011-1.89H13.96v3.801l-1.63-.011-1.63-.01-.01-3.03L10.679 5H6.76v3.04',
|
|
10
10
|
],
|
|
11
11
|
};
|
|
@@ -2,10 +2,10 @@ export const faCenterVertically = {
|
|
|
2
2
|
prefix: 'fpm',
|
|
3
3
|
iconName: 'fa-center-vertically',
|
|
4
4
|
icon: [
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
24,
|
|
6
|
+
24,
|
|
7
7
|
[],
|
|
8
8
|
'e001',
|
|
9
|
-
'
|
|
9
|
+
'M11.04 4.88v1.88H7.28v3.92h3.76v3.28H5v3.92h6.04v3.76h1v-3.76h6.04v-3.92h-6.04v-3.28h3.76V6.76h-3.76V3h-1v1.88',
|
|
10
10
|
],
|
|
11
11
|
};
|
|
@@ -2,10 +2,10 @@ export const faDistributeHorizontally = {
|
|
|
2
2
|
prefix: 'fpm',
|
|
3
3
|
iconName: 'fa-distribute-horizontally',
|
|
4
4
|
icon: [
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
24,
|
|
6
|
+
24,
|
|
7
7
|
[],
|
|
8
8
|
'e001',
|
|
9
|
-
'
|
|
9
|
+
'M3 12.32v9.32h.96V3H3v9.32m17 0v9.32h1V3h-1v9.32m-10.44.02v6.54h4.88V5.8H9.56v6.54',
|
|
10
10
|
],
|
|
11
11
|
};
|
|
@@ -2,10 +2,10 @@ export const faDistributeVertically = {
|
|
|
2
2
|
prefix: 'fpm',
|
|
3
3
|
iconName: 'fa-distribute-vertically',
|
|
4
4
|
icon: [
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
24,
|
|
6
|
+
24,
|
|
7
7
|
[],
|
|
8
8
|
'e001',
|
|
9
|
-
'
|
|
9
|
+
'M3 3.5V4h18.64V3H3v.5M5.8 12v2.44h13.08V9.56H5.8V12M3 20.52V21h18.64v-.96H3v.48',
|
|
10
10
|
],
|
|
11
11
|
};
|
|
@@ -29,7 +29,7 @@ import store from '@/store';
|
|
|
29
29
|
import runningInCypressTest from '@/runningInCypressTest';
|
|
30
30
|
import crownAlign from './crownAlign';
|
|
31
31
|
import { library } from '@fortawesome/fontawesome-svg-core';
|
|
32
|
-
import {
|
|
32
|
+
import { faAlignLeft } from '../crownButtons/icons';
|
|
33
33
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
|
34
34
|
|
|
35
35
|
|
|
@@ -69,7 +69,7 @@ export default {
|
|
|
69
69
|
{
|
|
70
70
|
label: 'Align',
|
|
71
71
|
iconPrefix: 'fpm',
|
|
72
|
-
icon: '
|
|
72
|
+
icon: 'align-left',
|
|
73
73
|
testId: 'align',
|
|
74
74
|
role: 'menuitem',
|
|
75
75
|
action: this.showAlign,
|
|
@@ -88,7 +88,7 @@ export default {
|
|
|
88
88
|
},
|
|
89
89
|
created() {
|
|
90
90
|
this.$t = this.$t.bind(this);
|
|
91
|
-
library.add(
|
|
91
|
+
library.add(faAlignLeft);
|
|
92
92
|
},
|
|
93
93
|
computed: {
|
|
94
94
|
isMultiSelect() {
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export const COLOR_DEFAULT = '#5096db';
|
|
2
|
+
export const COLOR_ERROR = '#FF0000';
|
|
3
|
+
export const COLOR_IN_PROGRESS = '#3FA6FF';
|
|
4
|
+
export const COLOR_IN_PROGRESS_FILL = '#DCF2FF';
|
|
5
|
+
export const COLOR_IDLE = '#CCCCCC';
|
|
6
|
+
export const COLOR_IDLE_FILL = '#F5F5F5';
|
|
7
|
+
export const COLOR_COMPLETED = '#00BA7C';
|
|
8
|
+
export const COLOR_COMPLETED_FILL = '#D6FFE6';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<span data-test="body-container">
|
|
3
3
|
<tool-bar
|
|
4
|
+
v-if="showComponent"
|
|
4
5
|
:canvas-drag-position="canvasDragPosition"
|
|
5
6
|
:cursor="cursor"
|
|
6
7
|
:is-rendering="isRendering"
|
|
@@ -29,6 +30,7 @@
|
|
|
29
30
|
:title="tooltipTitle"
|
|
30
31
|
/>
|
|
31
32
|
<explorer-rail
|
|
33
|
+
v-if="showComponent"
|
|
32
34
|
:node-types="nodeTypes"
|
|
33
35
|
:pm-block-nodes="pmBlockNodes"
|
|
34
36
|
@set-cursor="cursor = $event"
|
|
@@ -45,11 +47,13 @@
|
|
|
45
47
|
</b-col>
|
|
46
48
|
|
|
47
49
|
<InspectorButton
|
|
50
|
+
v-if="showComponent"
|
|
48
51
|
:showInspector="isOpenInspector"
|
|
49
52
|
@toggleInspector="handleToggleInspector"
|
|
50
53
|
/>
|
|
51
54
|
|
|
52
55
|
<InspectorPanel
|
|
56
|
+
v-if="showComponent"
|
|
53
57
|
ref="inspector-panel"
|
|
54
58
|
v-show="isOpenInspector && !(highlightedNodes.length > 1)"
|
|
55
59
|
:style="{ height: parentHeight }"
|
|
@@ -87,8 +91,11 @@
|
|
|
87
91
|
:isRendering="isRendering"
|
|
88
92
|
:paperManager="paperManager"
|
|
89
93
|
:auto-validate="autoValidate"
|
|
90
|
-
:is-active="node === activeNode"
|
|
91
94
|
:node-id-generator="nodeIdGenerator"
|
|
95
|
+
:is-active="node === activeNode"
|
|
96
|
+
:is-completed="requestCompletedNodes.includes(node.definition.id)"
|
|
97
|
+
:is-in-progress="requestInProgressNodes.includes(node.definition.id)"
|
|
98
|
+
:is-idle="requestIdleNodes.includes(node.definition.id)"
|
|
92
99
|
@add-node="addNode"
|
|
93
100
|
@remove-node="removeNode"
|
|
94
101
|
@set-cursor="cursor = $event"
|
|
@@ -212,7 +219,25 @@ export default {
|
|
|
212
219
|
return {};
|
|
213
220
|
},
|
|
214
221
|
},
|
|
222
|
+
readOnly: {
|
|
223
|
+
type: Boolean,
|
|
224
|
+
default() {
|
|
225
|
+
return false;
|
|
226
|
+
},
|
|
227
|
+
},
|
|
215
228
|
validationBar: Array,
|
|
229
|
+
requestIdleNodes: {
|
|
230
|
+
type: Array,
|
|
231
|
+
default: () => [],
|
|
232
|
+
},
|
|
233
|
+
requestCompletedNodes: {
|
|
234
|
+
type: Array,
|
|
235
|
+
default: () => [],
|
|
236
|
+
},
|
|
237
|
+
requestInProgressNodes: {
|
|
238
|
+
type: Array,
|
|
239
|
+
default: () => [],
|
|
240
|
+
},
|
|
216
241
|
},
|
|
217
242
|
mixins: [hotkeys, cloneSelection],
|
|
218
243
|
data() {
|
|
@@ -326,6 +351,7 @@ export default {
|
|
|
326
351
|
invalidNodes() {
|
|
327
352
|
return getInvalidNodes(this.validationErrors, this.nodes);
|
|
328
353
|
},
|
|
354
|
+
showComponent: () => store.getters.showComponent,
|
|
329
355
|
},
|
|
330
356
|
methods: {
|
|
331
357
|
handleToggleInspector(value) {
|
|
@@ -1054,7 +1080,6 @@ export default {
|
|
|
1054
1080
|
this.planeElements.find(diagram => diagram.bpmnElement.id === this.processes[0].id),
|
|
1055
1081
|
);
|
|
1056
1082
|
}
|
|
1057
|
-
|
|
1058
1083
|
},
|
|
1059
1084
|
async removeNodes() {
|
|
1060
1085
|
await this.performSingleUndoRedoTransaction(async() => {
|
|
@@ -1233,6 +1258,15 @@ export default {
|
|
|
1233
1258
|
},
|
|
1234
1259
|
pointerMoveHandler(event) {
|
|
1235
1260
|
const { clientX: x, clientY: y } = event;
|
|
1261
|
+
if (store.getters.isReadOnly) {
|
|
1262
|
+
if (this.canvasDragPosition) {
|
|
1263
|
+
this.paperManager.translate(
|
|
1264
|
+
event.offsetX - this.canvasDragPosition.x,
|
|
1265
|
+
event.offsetY - this.canvasDragPosition.y,
|
|
1266
|
+
);
|
|
1267
|
+
}
|
|
1268
|
+
return;
|
|
1269
|
+
}
|
|
1236
1270
|
if (this.isGrabbing) return;
|
|
1237
1271
|
if (this.dragStart && (Math.abs(x - this.dragStart.x) > 5 || Math.abs(y - this.dragStart.y) > 5)) {
|
|
1238
1272
|
this.isDragging = true;
|
|
@@ -1302,6 +1336,7 @@ export default {
|
|
|
1302
1336
|
this.$emit('set-xml-manager', this.xmlManager);
|
|
1303
1337
|
},
|
|
1304
1338
|
mounted() {
|
|
1339
|
+
store.commit('setReadOnly', this.readOnly);
|
|
1305
1340
|
this.graph = new dia.Graph();
|
|
1306
1341
|
store.commit('setGraph', this.graph);
|
|
1307
1342
|
this.graph.set('interactiveFunc', cellView => {
|
|
@@ -1326,6 +1361,9 @@ export default {
|
|
|
1326
1361
|
|
|
1327
1362
|
this.paperManager.addEventHandler('blank:pointerdown', (event, x, y) => {
|
|
1328
1363
|
if (this.isGrabbing) return;
|
|
1364
|
+
if (store.getters.isReadOnly) {
|
|
1365
|
+
this.isGrabbing = true;
|
|
1366
|
+
}
|
|
1329
1367
|
const scale = this.paperManager.scale;
|
|
1330
1368
|
this.canvasDragPosition = { x: x * scale.sx, y: y * scale.sy };
|
|
1331
1369
|
this.isOverShape = false;
|
|
@@ -1342,6 +1380,7 @@ export default {
|
|
|
1342
1380
|
}
|
|
1343
1381
|
});
|
|
1344
1382
|
this.paperManager.addEventHandler('blank:pointerup', (event) => {
|
|
1383
|
+
this.isGrabbing = false;
|
|
1345
1384
|
this.canvasDragPosition = null;
|
|
1346
1385
|
this.activeNode = null;
|
|
1347
1386
|
this.pointerUpHandler(event);
|
|
@@ -1381,6 +1420,10 @@ export default {
|
|
|
1381
1420
|
if (this.isGrabbing) return;
|
|
1382
1421
|
|
|
1383
1422
|
shape.component.$emit('click', event);
|
|
1423
|
+
this.$emit('click', {
|
|
1424
|
+
event,
|
|
1425
|
+
node: this.highlightedNode.definition,
|
|
1426
|
+
});
|
|
1384
1427
|
});
|
|
1385
1428
|
|
|
1386
1429
|
this.paperManager.addEventHandler('cell:pointerdown', ({ model: shape }, event) => {
|
|
@@ -1424,4 +1467,4 @@ export default {
|
|
|
1424
1467
|
},
|
|
1425
1468
|
};
|
|
1426
1469
|
</script>
|
|
1427
|
-
<style lang="scss" src="./modeler.scss" />
|
|
1470
|
+
<style lang="scss" src="./modeler.scss" />
|
|
@@ -31,7 +31,6 @@ export { default as pool } from './pool';
|
|
|
31
31
|
export { default as poolLane } from './poolLane';
|
|
32
32
|
export { default as ValidationStatus } from '../validationStatus/ValidationStatus';
|
|
33
33
|
export { default as Modeler } from '../modeler/Modeler';
|
|
34
|
-
export { default as ModelerReadonly } from '../modeler/ModelerReadonly';
|
|
35
34
|
export { default as manualTask } from './manualTask';
|
|
36
35
|
export { default as boundaryTimerEvent } from './boundaryTimerEvent';
|
|
37
36
|
export { default as boundaryMessageEvent } from './boundaryMessageEvent';
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
ref="railLeftBox"
|
|
7
7
|
>
|
|
8
8
|
<MiniPaperControl
|
|
9
|
+
v-show="showComponent"
|
|
9
10
|
:paper-manager="paperManager"
|
|
10
11
|
:graph="graph"
|
|
11
12
|
/>
|
|
@@ -21,6 +22,7 @@
|
|
|
21
22
|
:style="[overlap ? { width: 'auto'} : { width: '100%'}]"
|
|
22
23
|
>
|
|
23
24
|
<UndoRedoControl
|
|
25
|
+
v-show="showComponent"
|
|
24
26
|
:is-rendering="isRendering"
|
|
25
27
|
@load-xml="$emit('load-xml')"
|
|
26
28
|
@clearSelection="$emit('clearSelection')"
|
|
@@ -28,6 +30,7 @@
|
|
|
28
30
|
/>
|
|
29
31
|
|
|
30
32
|
<Controls
|
|
33
|
+
v-show="showComponent"
|
|
31
34
|
:nodeTypes="nodeTypes"
|
|
32
35
|
@onCreateElement="onCreateElementHandler"
|
|
33
36
|
@onSetCursor="onSetCursorHandler"
|
|
@@ -43,6 +46,7 @@ import MiniPaperControl from '@/components/railBottom/miniPaperControl/MiniPaper
|
|
|
43
46
|
import ZoomControl from '@/components/railBottom/zoomControl/ZoomControl.vue';
|
|
44
47
|
import UndoRedoControl from '@/components/railBottom/undoRedoControl/UndoRedoControl.vue';
|
|
45
48
|
import Controls from '@/components/railBottom/controls/Controls.vue';
|
|
49
|
+
import store from '@/store';
|
|
46
50
|
|
|
47
51
|
export default {
|
|
48
52
|
components: {
|
|
@@ -109,6 +113,11 @@ export default {
|
|
|
109
113
|
}
|
|
110
114
|
},
|
|
111
115
|
},
|
|
116
|
+
computed: {
|
|
117
|
+
showComponent() {
|
|
118
|
+
return store.getters.showComponent;
|
|
119
|
+
},
|
|
120
|
+
},
|
|
112
121
|
async mounted() {
|
|
113
122
|
await nextTick();
|
|
114
123
|
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
:class="['control-item', {'active': selectedItem && (selectedItem.type === item.type)}]"
|
|
9
9
|
:id="item.id"
|
|
10
10
|
:key="item.id"
|
|
11
|
-
@click.stop="
|
|
11
|
+
@click.stop="onClickControlHandler($event, item)"
|
|
12
12
|
:data-test="`${item.type}-main`"
|
|
13
13
|
>
|
|
14
14
|
<SubmenuPopper
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<div
|
|
24
24
|
:class="{'control-add': true, 'control-active': explorerOpen}"
|
|
25
25
|
:title="$t('Add')"
|
|
26
|
-
v-b-tooltip.hover
|
|
26
|
+
v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
|
|
27
27
|
@click="toggleExplorer"
|
|
28
28
|
>
|
|
29
29
|
<inline-svg :src="plusIcon" />
|
|
@@ -50,6 +50,7 @@ export default ({
|
|
|
50
50
|
data() {
|
|
51
51
|
return {
|
|
52
52
|
plusIcon: require('@/assets/railBottom/plus.svg'),
|
|
53
|
+
currentType: null,
|
|
53
54
|
};
|
|
54
55
|
},
|
|
55
56
|
created() {
|
|
@@ -71,6 +72,17 @@ export default ({
|
|
|
71
72
|
this.selectedSubmenuItem = data.control.type;
|
|
72
73
|
this.onClickHandler(data.event, data.control);
|
|
73
74
|
},
|
|
75
|
+
/**
|
|
76
|
+
* On click on the botton rail control
|
|
77
|
+
* @param {Object} event
|
|
78
|
+
* @param {Object} control
|
|
79
|
+
*/
|
|
80
|
+
onClickControlHandler(event, control) {
|
|
81
|
+
this.selectedSubmenuItem = null;
|
|
82
|
+
this.popperType = this.currentType === control.type ? null : control.type;
|
|
83
|
+
this.onClickHandler(event, control);
|
|
84
|
+
this.currentType = this.popperType;
|
|
85
|
+
},
|
|
74
86
|
toggleExplorer() {
|
|
75
87
|
// Remove control click & drop selection when the Add button is clicked
|
|
76
88
|
this.deselect();
|
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
trigger="clickToOpen"
|
|
5
5
|
:options="{
|
|
6
6
|
placement: 'top',
|
|
7
|
-
modifiers: { offset: { offset: '0,
|
|
7
|
+
modifiers: { offset: { offset: '0,5px' }, preventOverflow: { escapeWithReference: true } }
|
|
8
8
|
}"
|
|
9
|
+
:append-to-body=true
|
|
9
10
|
:visible-arrow=false
|
|
10
11
|
:force-show="popperType === data.type"
|
|
11
12
|
>
|
|
@@ -29,7 +30,7 @@
|
|
|
29
30
|
slot="reference"
|
|
30
31
|
:alt=data.label
|
|
31
32
|
:title="$t(data.label)"
|
|
32
|
-
v-b-tooltip.hover
|
|
33
|
+
v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
|
|
33
34
|
>
|
|
34
35
|
<div class="control-submenu-options">
|
|
35
36
|
<span />
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
<a v-else class="control-submenu-item"
|
|
42
43
|
:alt=data.label
|
|
43
44
|
:title="$t(data.label)"
|
|
44
|
-
v-b-tooltip.hover
|
|
45
|
+
v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
|
|
45
46
|
>
|
|
46
47
|
<inline-svg :src=data.icon />
|
|
47
48
|
</a>
|
|
@@ -85,7 +86,7 @@ export default ({
|
|
|
85
86
|
flex-direction: column;
|
|
86
87
|
align-items: flex-start;
|
|
87
88
|
padding: 10px;
|
|
88
|
-
width:
|
|
89
|
+
width: 255px;
|
|
89
90
|
left: 616px;
|
|
90
91
|
background: #FFFFFF;
|
|
91
92
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
|
@@ -112,6 +113,7 @@ export default ({
|
|
|
112
113
|
align-self: stretch;
|
|
113
114
|
flex-grow: 0;
|
|
114
115
|
border-radius: 4px;
|
|
116
|
+
cursor: pointer;
|
|
115
117
|
|
|
116
118
|
&.active {
|
|
117
119
|
background-color: #DEEBFF;
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
|
10
10
|
border-radius: 8px;
|
|
11
11
|
list-style: none;
|
|
12
|
+
overflow-x: auto;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
&-item {
|
|
@@ -17,6 +18,7 @@
|
|
|
17
18
|
flex-direction: column;
|
|
18
19
|
justify-content: center;
|
|
19
20
|
align-items: center;
|
|
21
|
+
min-width: 40px;
|
|
20
22
|
width: 40px;
|
|
21
23
|
height: 40px;
|
|
22
24
|
margin-right: 12px;
|
|
@@ -71,7 +71,7 @@ export default {
|
|
|
71
71
|
</script>
|
|
72
72
|
|
|
73
73
|
<template>
|
|
74
|
-
<div id="explorer-rail" data-test="explorer-rail" v-
|
|
74
|
+
<div id="explorer-rail" data-test="explorer-rail" v-show="explorerOpen">
|
|
75
75
|
<div class="rail-menu">
|
|
76
76
|
<b-tabs class="tabs--container" :no-nav-style="true">
|
|
77
77
|
<template v-for="tab in tabs">
|
|
@@ -84,13 +84,13 @@ export default {
|
|
|
84
84
|
<font-awesome-icon :icon="faTimes()"/>
|
|
85
85
|
</div>
|
|
86
86
|
</div>
|
|
87
|
-
<div class="node-types__container" v-
|
|
87
|
+
<div class="node-types__container" v-show="tabIndex === 0">
|
|
88
88
|
<filter-node-types :type="'object'"/>
|
|
89
89
|
<node-types-loop
|
|
90
90
|
v-on="$listeners"
|
|
91
91
|
/>
|
|
92
92
|
</div>
|
|
93
|
-
<div class="pm-blocks__container"
|
|
93
|
+
<div class="pm-blocks__container" v-show="tabIndex === 1">
|
|
94
94
|
<filter-node-types :type="'pmBlock'"/>
|
|
95
95
|
<pm-blocks-loop
|
|
96
96
|
v-on="$listeners"
|
|
@@ -28,8 +28,11 @@ export default {
|
|
|
28
28
|
:key="object.id"
|
|
29
29
|
@click.stop="onClickHandler($event, object)"
|
|
30
30
|
>
|
|
31
|
-
<
|
|
32
|
-
|
|
31
|
+
<div class="d-flex">
|
|
32
|
+
<i v-if="!object.svgIcon" class="node-types__item__icon" :class="object.customIcon"/>
|
|
33
|
+
<img v-else class="node-types__item__icon" :src="object.svgIcon" :alt="$t(object.label)">
|
|
34
|
+
<label>{{ $t(object.label) }}</label>
|
|
35
|
+
</div>
|
|
33
36
|
</div>
|
|
34
37
|
</template>
|
|
35
38
|
</div>
|
|
@@ -41,8 +44,11 @@ export default {
|
|
|
41
44
|
:key="nodeType.id"
|
|
42
45
|
@click.stop="onClickHandler($event, nodeType)"
|
|
43
46
|
>
|
|
44
|
-
<
|
|
45
|
-
|
|
47
|
+
<div class="d-flex">
|
|
48
|
+
<i v-if="!nodeType.svgIcon" class="node-types__item__icon" :class="nodeType.customIcon"/>
|
|
49
|
+
<img v-else class="node-types__item__icon" :src="nodeType.svgIcon" :alt="$t(nodeType.label)">
|
|
50
|
+
<label>{{ $t(nodeType.label) }}</label>
|
|
51
|
+
</div>
|
|
46
52
|
</div>
|
|
47
53
|
</template>
|
|
48
54
|
</div>
|
|
@@ -54,21 +60,25 @@ export default {
|
|
|
54
60
|
.pm-block-node-types {
|
|
55
61
|
&__item {
|
|
56
62
|
display: block;
|
|
63
|
+
padding: 0.5rem 0.3rem;
|
|
57
64
|
border-radius: 4px;
|
|
58
65
|
user-select: none;
|
|
59
66
|
margin-bottom: 8px;
|
|
60
|
-
border: 1px solid #b6bfc6;
|
|
61
67
|
&:hover {
|
|
62
68
|
background-color: #EBEEF2;
|
|
63
69
|
}
|
|
70
|
+
&__icon {
|
|
71
|
+
width: 1.5rem;
|
|
72
|
+
height: 1.5rem;
|
|
73
|
+
}
|
|
64
74
|
label {
|
|
75
|
+
max-width: 225px;
|
|
65
76
|
font-size: 14px;
|
|
66
|
-
line-height:
|
|
67
|
-
font-weight: 600;
|
|
68
|
-
color: #104A75;
|
|
77
|
+
line-height: 15px;
|
|
69
78
|
}
|
|
70
79
|
span {
|
|
71
|
-
|
|
80
|
+
margin-left: 1.6rem;
|
|
81
|
+
font-size: 13px;
|
|
72
82
|
color:#6C757D;
|
|
73
83
|
}
|
|
74
84
|
}
|