-
Notifications
You must be signed in to change notification settings - Fork 43
/
textAnnotation.vue
128 lines (122 loc) · 3.2 KB
/
textAnnotation.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<template>
<crown-config
:highlighted="highlighted"
:paper="paper"
:graph="graph"
:shape="shape"
:node="node"
:nodeRegistry="nodeRegistry"
:moddle="moddle"
:collaboration="collaboration"
:process-node="processNode"
:plane-elements="planeElements"
:is-rendering="isRendering"
@remove-node="$emit('remove-node', $event)"
@add-node="$emit('add-node', $event)"
@save-state="$emit('save-state', $event)"
/>
</template>
<script>
import { shapes, util } from 'jointjs';
import portsConfig from '@/mixins/portsConfig';
import CrownConfig from '@/components/crown/crownConfig/crownConfig';
import highlightConfig from '@/mixins/highlightConfig';
export const maxTextAnnotationWidth = 160;
export default {
components: {
CrownConfig,
},
props: [
'graph',
'node',
'id',
'highlighted',
'nodeRegistry',
'moddle',
'paper',
'paperManager',
'collaboration',
'processNode',
'planeElements',
'isRendering',
],
mixins: [highlightConfig, portsConfig],
data() {
return {
shape: null,
definition: null,
nodeWidth: 10,
};
},
watch: {
'node.definition.text'(text) {
this.updateNodeText(text);
},
},
methods: {
getLabelHeight(labelPadding) {
return this.shape
.findView(this.paperManager.paper)
.selectors
.label
.getBBox()
.height + labelPadding;
},
calculateNewHeight(previousHeight, labelText, currentBoundsHeight) {
const defaultPadding = 3;
const labelPadding = 15;
const newLabelHeight = this.getLabelHeight(labelPadding);
if (newLabelHeight !== previousHeight) {
return newLabelHeight - defaultPadding;
}
if (labelText.length === 0) {
return currentBoundsHeight - defaultPadding;
}
return previousHeight - defaultPadding;
},
updateNodeText(text) {
const { height } = this.shape.findView(this.paperManager.paper).getBBox();
const refPoints = `25 ${height} 3 ${height} 3 3 25 3`;
const bounds = this.node.diagram.bounds;
this.shape.position(bounds.x, bounds.y);
this.shape.attr({
body: { refPoints },
label: {
text: util.breakText(text, {
width: maxTextAnnotationWidth,
}),
fill: 'black',
textAnchor: 'left',
},
});
this.paperManager.awaitScheduledUpdates()
.then(() => {
this.shape.resize(this.nodeWidth, this.calculateNewHeight(height, text, bounds.height));
this.setShapeHighlight();
});
},
},
mounted() {
const bounds = this.node.diagram.bounds;
this.shape = new shapes.standard.Polyline();
this.shape.set('type', 'textAnnotation');
this.shape.position(bounds.x, bounds.y);
this.shape.resize(this.nodeWidth, bounds.height);
this.shape.attr({
body: {
refPoints: '25 10 3 10 3 3 25 3',
},
label: {
fill: 'black',
yAlignment: 'left',
xAlignment: 'left',
refX: '5',
refY: '5',
},
});
this.shape.addTo(this.graph);
this.shape.component = this;
this.updateNodeText(this.node.definition.get('text'));
},
};
</script>