10 v-bind:stroke-dasharray="(handlerSize / 5) + ',' + (handlerSize / 5)" |
10 v-bind:stroke-dasharray="(handlerSize / 5) + ',' + (handlerSize / 5)" |
11 style="opacity: 0.6;" |
11 style="opacity: 0.6;" |
12 class="shape"></rect> |
12 class="shape"></rect> |
13 <rect |
13 <rect |
14 ref="topLeft" |
14 ref="topLeft" |
15 v-show="width > 0 && height > 0" |
15 v-show="showResizeHandlers" |
16 v-bind:x="(handlerSize / 2) * -1" v-bind:y="(handlerSize / 2) * -1" |
16 v-bind:x="(handlerSize / 2) * -1" v-bind:y="(handlerSize / 2) * -1" |
17 v-bind:width="handlerSize" v-bind:height="handlerSize" |
17 v-bind:width="handlerSize" v-bind:height="handlerSize" |
18 fill="#ffffff" |
18 fill="#ffffff" |
19 stroke="#000000" v-bind:stroke-width="handlerSize / 5" class="handler-rect handler-top-left"></rect> |
19 stroke="#000000" v-bind:stroke-width="handlerSize / 5" class="handler-rect handler-top-left"></rect> |
20 <rect |
20 <rect |
21 ref="bottomRight" |
21 ref="bottomRight" |
22 v-show="width > 0 && height > 0" |
22 v-show="showResizeHandlers" |
23 v-bind:x="width - (handlerSize / 2)" v-bind:y="height - (handlerSize / 2)" |
23 v-bind:x="width - (handlerSize / 2)" v-bind:y="height - (handlerSize / 2)" |
24 v-bind:width="handlerSize" v-bind:height="handlerSize" |
24 v-bind:width="handlerSize" v-bind:height="handlerSize" |
25 fill="#ffffff" |
25 fill="#ffffff" |
26 stroke="#000000" v-bind:stroke-width="handlerSize / 5" class="handler-rect handler-bottom-right"></rect> |
26 stroke="#000000" v-bind:stroke-width="handlerSize / 5" class="handler-rect handler-bottom-right"></rect> |
27 </g> |
27 </g> |
36 export default { |
36 export default { |
37 mixins: [ tooltip, save ], |
37 mixins: [ tooltip, save ], |
38 props: [ |
38 props: [ |
39 'paper', |
39 'paper', |
40 'original-annotation', |
40 'original-annotation', |
41 'tooltip' |
41 'tooltip', |
|
42 'readonly', |
42 ], |
43 ], |
43 data() { |
44 data() { |
44 return { |
45 return { |
45 transform: 'translate(0, 0)', |
46 transform: 'translate(0, 0)', |
46 isResizing: false, |
47 isResizing: false, |
47 x: 0, y: 0, |
48 x: 0, y: 0, |
48 width: 0, height: 0, |
49 width: 0, height: 0, |
49 handlerSize: 60 |
50 handlerSize: 60 |
50 } |
51 } |
51 }, |
52 }, |
|
53 computed: { |
|
54 showResizeHandlers: function() { |
|
55 return !this.readonly && (this.width > 0 && this.height > 0); |
|
56 } |
|
57 }, |
52 mounted() { |
58 mounted() { |
53 |
59 |
54 var self = this; |
60 var self = this; |
55 |
61 |
56 var groupEvents = { |
62 var groupEvents = { |
57 onMove: function(dx, dy) { |
63 onMove: function(dx, dy) { |
58 if (self.isResizing) { return; } |
64 if (self.isResizing || self.readonly) { return; } |
59 |
65 |
60 var snapInvMatrix = this.transform().diffMatrix.invert(); |
66 var snapInvMatrix = this.transform().diffMatrix.invert(); |
61 snapInvMatrix.e = snapInvMatrix.f = 0; |
67 snapInvMatrix.e = snapInvMatrix.f = 0; |
62 var tdx = snapInvMatrix.x(dx, dy); |
68 var tdx = snapInvMatrix.x(dx, dy); |
63 var tdy = snapInvMatrix.y(dx, dy); |
69 var tdy = snapInvMatrix.y(dx, dy); |
64 |
70 |
65 var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [tdx, tdy]; |
71 var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [tdx, tdy]; |
66 this.transform(transformValue); |
72 this.transform(transformValue); |
67 }, |
73 }, |
68 onStart: function() { |
74 onStart: function() { |
|
75 if (self.readonly) { return; } |
|
76 |
69 this.data('origTransform', this.transform().local); |
77 this.data('origTransform', this.transform().local); |
70 self.$emit('drag:start'); |
78 self.$emit('drag:start'); |
71 }, |
79 }, |
72 onEnd: () => self.$emit('drag:end') |
80 onEnd: () => self.$emit('drag:end') |
73 } |
81 } |