|
1 <script> |
|
2 |
|
3 import svgboard from './svgboard' |
|
4 import Typeahead from '../typeahead/Typeahead.vue' |
|
5 import Zoomview from '../zoomview/Zoomview.vue' |
|
6 |
|
7 export default { |
|
8 |
|
9 el: '#drawing-zone', |
|
10 MODE_RECT: 'RECT', |
|
11 MODE_FREE: 'FREE', |
|
12 ZOOM_IN: 'in', |
|
13 ZOOM_OUT: 'out', |
|
14 |
|
15 components: {typeahead: Typeahead, zoomview: Zoomview}, |
|
16 data: { |
|
17 mode:"", |
|
18 isRect: true, |
|
19 normalizePath: "", |
|
20 readOnly: false, |
|
21 formView: true, |
|
22 useClipPath: false, |
|
23 transformMatrix: "", |
|
24 fragmentPath: "", |
|
25 canZoom: true, |
|
26 displayMask: false |
|
27 }, |
|
28 |
|
29 mounted () { |
|
30 var self = this; |
|
31 this.initialDrawingMode = null; |
|
32 this.drawingComponent = svgboard.init({ |
|
33 wrapperId: '#iconolab-image-wrapper', |
|
34 actionWrapper: '#action-wrapper', |
|
35 readOnly: false, |
|
36 onDrawingModeChange: function (mode) { |
|
37 self.setDrawingMode(mode, false); |
|
38 } |
|
39 }); |
|
40 this.$refs.zoomview.setZoomTarget(this.drawingComponent.getPaper()); |
|
41 this.showEditor(); |
|
42 this.drawingComponent.createTestHandler(10,20, 50); |
|
43 }, |
|
44 |
|
45 methods: { |
|
46 |
|
47 computeCentreredViewBox: function () { |
|
48 var zoomSvg = this.$refs.zoomSvg; |
|
49 var viewBox = []; |
|
50 var imageWidth = zoomSvg.getAttribute("width"); |
|
51 var imageHeight = zoomSvg.getAttribute("height"); |
|
52 |
|
53 /* normalize */ |
|
54 var xRatio = imageWidth / 100 ; |
|
55 var yRatio = imageHeight / 100; |
|
56 |
|
57 var zTarget = this.drawingComponent.getShapeBBox(); |
|
58 viewBox = [(zTarget.x - 1) * xRatio, (zTarget.y - 1) * yRatio, (zTarget.w + 2) * xRatio, (zTarget.h + 2) * yRatio]; |
|
59 return viewBox.join(" "); |
|
60 |
|
61 }, |
|
62 |
|
63 computeZoomedViewBox: function () { |
|
64 var viewBoxArray = []; |
|
65 var zoomSvg = this.$refs.zoomSvg; |
|
66 var shapeBBox = this.drawingComponent.getShapeBBox(); |
|
67 var imageWidth = zoomSvg.getAttribute("width"); |
|
68 var imageHeight = zoomSvg.getAttribute("height"); |
|
69 var xRatio = imageWidth / 100; |
|
70 var yRatio = imageHeight / 100; |
|
71 /* denormalize coordonate, max is imageX * 100x = imageHeigth*/ |
|
72 shapeBBox.x = shapeBBox.x * xRatio; |
|
73 shapeBBox.y = shapeBBox.y * yRatio; |
|
74 |
|
75 shapeBBox.w = shapeBBox.w * xRatio; |
|
76 shapeBBox.h = shapeBBox.h * yRatio; |
|
77 |
|
78 var imgRatio = imageWidth / imageHeight; |
|
79 if (shapeBBox.w > shapeBBox.h) { |
|
80 shapeBBox.y = Math.max(0, shapeBBox.y - (((shapeBBox.w * imgRatio) - shapeBBox.h) / 2)); |
|
81 shapeBBox.h = shapeBBox.w * imgRatio; |
|
82 } |
|
83 else { |
|
84 shapeBBox.x = Math.max(0, shapeBBox.x - (((shapeBBox.h / imgRatio) - shapeBBox.w) / 2)); |
|
85 shapeBBox.w = shapeBBox.h / imgRatio; |
|
86 } |
|
87 viewBoxArray = [shapeBBox.x, shapeBBox.y, shapeBBox.w, shapeBBox.h]; |
|
88 |
|
89 if (!shapeBBox) { return false; } |
|
90 |
|
91 return viewBoxArray.join(" "); |
|
92 }, |
|
93 |
|
94 zoom: function (direction) { |
|
95 |
|
96 var mainSvgWrapper = this.$refs.smallSvgWrapper; |
|
97 if (this.$options.ZOOM_OUT === direction) { |
|
98 var defaultViewBox = [0, 0, mainSvgWrapper.getAttribute("width"), mainSvgWrapper.getAttribute("height")]; |
|
99 mainSvgWrapper.setAttribute("viewBox", defaultViewBox.join(" ")); |
|
100 this.canZoom = true; |
|
101 } |
|
102 |
|
103 if (this.$options.ZOOM_IN === direction) { |
|
104 mainSvgWrapper.setAttribute("viewBox", this.computeCentreredViewBox());//this.computeZoomedViewBox());// |
|
105 this.canZoom = false; |
|
106 } |
|
107 }, |
|
108 |
|
109 setDrawingMode: function (mode, updateComponent) { |
|
110 if (!this.initialDrawingMode) { |
|
111 this.initialDrawingMode = mode;//useful for cancel |
|
112 } |
|
113 var updateComponent = (typeof updateComponent === "boolean") ? updateComponent: true; |
|
114 this.mode = this.$options['MODE_' + mode]; |
|
115 this.isRect = (this.mode === this.$options.MODE_RECT) ? true: false; |
|
116 if (updateComponent) { |
|
117 this.drawingComponent.setDrawingMode(this.mode); |
|
118 } |
|
119 }, |
|
120 |
|
121 cancel: function () { |
|
122 this.formView = true; |
|
123 var currentPath = this.$refs.currentPath.getAttribute("d"); |
|
124 if (!currentPath.length || !this.initialDrawingMode) { return; } { |
|
125 currentPath += ";" + this.initialDrawingMode; |
|
126 this.drawingComponent.setPath(currentPath); |
|
127 } |
|
128 }, |
|
129 |
|
130 highLightZone: function () { |
|
131 if (!this.displayMask) { |
|
132 this.displayMask = true; |
|
133 } |
|
134 else { |
|
135 this.displayMask = false; |
|
136 } |
|
137 }, |
|
138 |
|
139 displayEditedPath: function () { |
|
140 var normalizePath = this.drawingComponent.getPath(); |
|
141 }, |
|
142 |
|
143 resetZoom: function () { |
|
144 this.zoom(this.$options.ZOOM_OUT); |
|
145 }, |
|
146 |
|
147 showEditor: function () { |
|
148 this.formView = true; |
|
149 this.resetZoom(); |
|
150 /* on edit mode reset*/ |
|
151 }, |
|
152 |
|
153 showForm: function () { |
|
154 this.normalizePath = this.drawingComponent.getPath(); |
|
155 var smallImage = this.$refs.smallImage; |
|
156 this.formView = true; |
|
157 var xRatio = smallImage.getAttribute("width") / 100; |
|
158 var yRatio = smallImage.getAttribute("height") / 100; |
|
159 var transformMatrix = [xRatio, 0, 0, yRatio, 0, 0].join(','); |
|
160 this.transformMatrix ="matrix(" + transformMatrix + ")"; |
|
161 this.fragmentPath = this.normalizePath.split(';')[0]; |
|
162 }, |
|
163 |
|
164 clear: function () { |
|
165 this.drawingComponent.clear(); |
|
166 } |
|
167 } |
|
168 } |
|
169 </script> |
|
170 |