equal
deleted
inserted
replaced
4 ref="shape" |
4 ref="shape" |
5 x="0" y="0" |
5 x="0" y="0" |
6 v-bind:width="width" v-bind:height="height" |
6 v-bind:width="width" v-bind:height="height" |
7 v-bind:stroke-width="handlerSize / 5" |
7 v-bind:stroke-width="handlerSize / 5" |
8 class="shape" |
8 class="shape" |
9 v-bind:class="{ 'shape--draggable': !readonly }"></rect> |
9 v-bind:class="{ 'shape--draggable': !readonly }" |
|
10 v-bind:style="{ 'outline-width': (handlerSize / 5) + 'px' }"></rect> |
10 <rect |
11 <rect |
11 ref="topLeft" |
12 ref="topLeft" |
12 v-show="showResizeHandlers" |
13 v-show="showResizeHandlers" |
13 v-bind:x="(handlerSize / 2) * -1" v-bind:y="(handlerSize / 2) * -1" |
14 v-bind:x="(handlerSize / 2) * -1" v-bind:y="(handlerSize / 2) * -1" |
14 v-bind:width="handlerSize" v-bind:height="handlerSize" |
15 v-bind:width="handlerSize" v-bind:height="handlerSize" |
35 props: [ |
36 props: [ |
36 'paper', |
37 'paper', |
37 'original-annotation', |
38 'original-annotation', |
38 'tooltip', |
39 'tooltip', |
39 'readonly', |
40 'readonly', |
|
41 'original-path', |
40 ], |
42 ], |
41 data() { |
43 data() { |
42 return { |
44 return { |
43 transform: 'translate(0, 0)', |
45 transform: 'translate(0, 0)', |
44 isResizing: false, |
46 isResizing: false, |
77 onEnd: () => self.$emit('drag:end') |
79 onEnd: () => self.$emit('drag:end') |
78 } |
80 } |
79 |
81 |
80 var g = new Snap(this.$refs.g); |
82 var g = new Snap(this.$refs.g); |
81 g.drag(groupEvents.onMove, groupEvents.onStart, groupEvents.onEnd); |
83 g.drag(groupEvents.onMove, groupEvents.onStart, groupEvents.onEnd); |
|
84 |
|
85 if (this.originalPath) { |
|
86 this.fromSVGPath(this.originalPath, false); |
|
87 g.click(() => this.$emit('click')) |
|
88 } |
82 }, |
89 }, |
83 watch: { |
90 watch: { |
84 x: function (val, oldVal) { |
91 x: function (val, oldVal) { |
85 this.transform = 'translate(' + this.x + ', ' + this.y + ')'; |
92 this.transform = 'translate(' + this.x + ', ' + this.y + ')'; |
86 }, |
93 }, |
206 </script> |
213 </script> |
207 |
214 |
208 <style scoped> |
215 <style scoped> |
209 .shape { |
216 .shape { |
210 fill: transparent; |
217 fill: transparent; |
211 stroke: #000; |
218 stroke: #fff; |
212 opacity: 0.6; |
219 outline-color: #000; |
|
220 outline-style: solid; |
|
221 } |
|
222 .shape:hover, |
|
223 .shape.active { |
|
224 cursor: pointer; |
|
225 fill: #333; |
|
226 opacity: 0.5; |
213 } |
227 } |
214 .shape--draggable:hover { |
228 .shape--draggable:hover { |
215 cursor: move; |
229 cursor: move; |
216 } |
230 } |
217 .handler-top-left:hover { |
231 .handler-top-left:hover { |