equal
deleted
inserted
replaced
4 <path v-bind:id="annotationHref" ref="path" v-bind:d="path" class="path"></path> |
4 <path v-bind:id="annotationHref" ref="path" v-bind:d="path" class="path"></path> |
5 </defs> |
5 </defs> |
6 <g ref="g"> |
6 <g ref="g"> |
7 <use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="strokeWidth * 2" class="stroke-bg" filter="url(#shadow)" /> |
7 <use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="strokeWidth * 2" class="stroke-bg" filter="url(#shadow)" /> |
8 <use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="strokeWidth" class="stroke-fg" /> |
8 <use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="strokeWidth" class="stroke-fg" /> |
|
9 <use v-bind:xlink:href="annotationSelector" class="overlay" v-bind:class="{ active: !originalAnnotation }" /> |
9 <circle ref="handlers" |
10 <circle ref="handlers" |
10 v-for="(point, key) in points" |
11 v-for="(point, key) in points" |
11 :key="key" |
12 :key="key" |
12 v-show="!readonly" |
13 v-show="!readonly" |
13 v-bind:data-key="key" |
14 v-bind:data-key="key" |
14 v-bind:cx="point.x" |
15 v-bind:cx="point.x" |
15 v-bind:cy="point.y" |
16 v-bind:cy="point.y" |
16 v-bind:r="strokeWidth * 2" |
17 v-bind:r="strokeWidth * 2" |
17 v-bind:stroke-width="strokeWidth" |
18 v-bind:stroke-width="strokeWidth" |
18 v-bind:class="{ handler: true, 'handler--first': key === 0 && !closed }"></circle> |
19 v-bind:class="{ handler: true, 'handler--first': key === 0 && !closed }"></circle> |
|
20 <text ref="text" |
|
21 v-if="!originalAnnotation && !closed && points.length > 3" |
|
22 v-bind:x="text.x" v-bind:y="text.y" |
|
23 font-family="Verdana" |
|
24 v-bind:font-size="strokeWidth * 4" |
|
25 class="text"> |
|
26 Double-cliquez pour fermer la zone |
|
27 </text> |
19 <g> |
28 <g> |
20 </svg> |
29 </svg> |
21 </template> |
30 </template> |
22 |
31 |
23 <script> |
32 <script> |
38 data() { |
47 data() { |
39 return { |
48 return { |
40 path: '', |
49 path: '', |
41 closed: false, |
50 closed: false, |
42 points: [], |
51 points: [], |
|
52 text: { x: 0, y: 0 } |
43 } |
53 } |
44 }, |
54 }, |
45 computed: { |
55 computed: { |
46 annotationHref: function() { |
56 annotationHref: function() { |
47 if (this.originalAnnotation) { |
57 if (this.originalAnnotation) { |
89 } |
99 } |
90 |
100 |
91 if (this.closed) { path += ' Z'; } |
101 if (this.closed) { path += ' Z'; } |
92 |
102 |
93 this.path = path; |
103 this.path = path; |
|
104 |
|
105 this.$nextTick(() => { |
|
106 var group = new Snap(this.$refs.g); |
|
107 var text = new Snap(this.$refs.text); |
|
108 this.text = { |
|
109 x: group.getBBox().x + (group.getBBox().width / 2) - (text.getBBox().width / 2), |
|
110 y: group.getBBox().y + (group.getBBox().height / 2) - (text.getBBox().height / 2) |
|
111 } |
|
112 }); |
94 } |
113 } |
95 }, |
114 }, |
96 methods: { |
115 methods: { |
97 |
116 |
98 addPoint: function(x, y) { |
117 addPoint: function(x, y) { |
172 } |
191 } |
173 }); |
192 }); |
174 |
193 |
175 // Remove point on double click |
194 // Remove point on double click |
176 circle.dblclick((e) => { |
195 circle.dblclick((e) => { |
|
196 e.preventDefault(); |
|
197 e.stopPropagation(); |
177 var circle = new Snap(e.target); |
198 var circle = new Snap(e.target); |
178 var key = parseInt(circle.attr('data-key'), 10); |
199 var key = parseInt(circle.attr('data-key'), 10); |
179 this.points.splice(key, 1); |
200 this.points.splice(key, 1); |
180 }); |
201 }); |
181 |
202 |
222 stroke: inherit; |
243 stroke: inherit; |
223 stroke-width: inherit; |
244 stroke-width: inherit; |
224 fill: inherit; |
245 fill: inherit; |
225 transform: inherit; |
246 transform: inherit; |
226 } |
247 } |
|
248 .text { |
|
249 |
|
250 } |
227 .stroke-fg { |
251 .stroke-fg { |
228 stroke: #000; |
252 stroke: #000; |
229 fill: transparent; |
253 fill: transparent; |
230 } |
254 } |
231 .stroke-fg:hover { |
255 .overlay { |
|
256 fill: transparent; |
|
257 } |
|
258 .overlay.active, |
|
259 .overlay:hover { |
232 cursor: pointer; |
260 cursor: pointer; |
233 fill: #c5f2ff; |
261 fill: #c5f2ff; |
234 opacity: 0.25; |
262 opacity: 0.25; |
235 stroke-opacity: 1; |
263 stroke-opacity: 1; |
236 } |
264 } |