source: main/trunk/greenstone3/web/interfaces/default/js/map-scripts-shapes-util.js@ 32850

Last change on this file since 32850 was 32850, checked in by ak19, 5 years ago
  1. Zeddy introduces suppressUndo and cleaned up lots of CloneShape sectionst that were commented out. 2. Zeddy and Dr Bainbridge solved the issue whereby shapes loaded from archives_metadata were not selectable and needed a deleteAllShapes followed by Undo to make them selectable. These steps are no longer needed now, as it's solved more efficiently.
File size: 12.1 KB
Line 
1
2
3function ShapesUtil() {
4}
5
6ShapesUtil.mvcClonePath = function (path) {
7 var clone_path = new google.maps.MVCArray();
8
9 for (var i = 0; i < path.length; i++) {
10 var lat_lng = path.getAt(i);
11 var lat = lat_lng.lat();
12 var lng = lat_lng.lng();
13 var clone_lat_lng = new google.maps.LatLng(lat,lng);
14
15 clone_path.push(clone_lat_lng);
16 }
17
18 return clone_path;
19}
20
21ShapesUtil.arrayPathToMVCArrayPath = function (array_path) {
22
23 var mvc_array_path = new google.maps.MVCArray();
24
25 for (var i=0; i<array_path.length; i++) {
26 var array_lat_lng = array_path[i];
27 var array_lat = array_lat_lng.lat;
28 var array_lng = array_lat_lng.lng;
29 var lat_lng = new google.maps.LatLng(array_lat,array_lng);
30
31 mvc_array_path.push(lat_lng);
32 }
33
34 return mvc_array_path;
35}
36
37ShapesUtil.mvcArrayPathToArrayPath = function (mvc_array_path) {
38
39 var array_path = [];
40
41 for (var i=0; i<mvc_array_path.length; i++) {
42 var lat_lng = mvc_array_path.getAt(i);
43 var lat = lat_lng.lat();
44 var lng = lat_lng.lng();
45
46 var rec_lat_lng = { lat: lat, lng: lng };
47 array_path.push(rec_lat_lng);
48 }
49
50 return array_path;
51}
52
53ShapesUtil._createPoly = function (type,poly,path) {
54 var geodesic = poly.geodesic;
55 var strokeColor = poly.strokeColor;
56 var strokeOpacity = poly.strokeOpacity;
57 var strokeWeight = poly.strokeWeight;
58
59 clone_path = ShapesUtil.mvcClonePath(path);
60
61 var clone_poly = null;
62
63 if (type == google.maps.drawing.OverlayType.POLYLINE) {
64
65 clone_poly = new google.maps.Polyline({
66 suppressUndo: true,
67 geodesic: geodesic,
68 strokeColor: strokeColor,
69 strokeOpacity: strokeOpacity,
70 strokeWeight: strokeWeight,
71 path: clone_path,
72 draggable: true,
73 editable: false,
74 type: type
75 });
76 }
77 else {
78 // Polygon
79 var fillColor = poly.fillColor;
80 var fillOpacity = poly.fillOpacity;
81
82 clone_poly = new google.maps.Polygon({
83 suppressUndo: true,
84 geodesic: geodesic,
85 strokeColor: strokeColor,
86 strokeOpacity: strokeOpacity,
87 strokeWeight: strokeWeight,
88 fillColor: fillColor,
89 fillOpacity: fillOpacity,
90 path: clone_path,
91 draggable: true,
92 editable: false,
93 type: type
94 });
95 }
96
97 return clone_poly;
98}
99
100
101ShapesUtil._polyToJSON = function (type,poly) {
102
103 var geodesic = poly.geodesic;
104 var strokeColor = poly.strokeColor;
105 var strokeOpacity = poly.strokeOpacity;
106 var strokeWeight = poly.strokeWeight;
107
108 var type = poly.type;
109
110 var mvc_path = poly.getPath();
111 var array_path = ShapesUtil.mvcArrayPathToArrayPath(mvc_path);
112
113 var json_poly =
114 {
115 geodesic: geodesic,
116 strokeColor: strokeColor,
117 strokeOpacity: strokeOpacity,
118 strokeWeight: strokeWeight,
119 path: array_path,
120 type: type
121 };
122
123 if (type == google.maps.drawing.OverlayType.POLYGON) {
124 var fillColor = poly.fillColor;
125 var fillOpacity = poly.fillOpacity;
126
127 json_poly.fillColor = fillColor;
128 json_poly.fillOpacity = fillOpacity;
129 }
130
131 return json_poly;
132}
133
134
135ShapesUtil.clonePolyline = function (polyline) {
136
137 var path = polyline.getPath();
138 var clone_polyline = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYLINE,polyline,path);
139 return clone_polyline;
140}
141
142ShapesUtil.JSONToPolyline = function (json_polyline) {
143
144 var json_path = json_polyline.path;
145 var mvc_path = ShapesUtil.arrayPathToMVCArrayPath(json_path);
146
147 var polyline = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYLINE,json_polyline,mvc_path);
148 return polyline;
149}
150
151ShapesUtil.PolylineToJSON = function (polyline) {
152
153 var json_polyline_str = ShapesUtil._polyToJSON(google.maps.drawing.OverlayType.POLYLINE, polyline);
154 return json_polyline_str;
155
156}
157
158
159ShapesUtil.clonePolygon = function (polygon) {
160 var mvc_path = polygon.getPath();
161 var clone_polygon = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYGON,polygon,mvc_path);
162 return clone_polygon;
163}
164
165ShapesUtil.JSONToPolygon = function (json_polygon) {
166
167 var array_path = json_polygon.path;
168 var mvc_path = ShapesUtil.arrayPathToMVCArrayPath(array_path);
169
170 var polygon = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYGON,json_polygon,mvc_path);
171 return polygon;
172}
173
174ShapesUtil.PolygonToJSON = function (polygon) {
175
176 var json_polygon = ShapesUtil._polyToJSON(google.maps.drawing.OverlayType.POLYGON, polygon);
177 return json_polygon;
178}
179
180
181ShapesUtil._createRectangle = function (rect,bounds) {
182 var strokeColor = rect.strokeColor;
183 var strokeOpacity = rect.strokeOpacity;
184 var strokeWeight = rect.strokeWeight;
185 var fillColor = rect.fillColor;
186 var fillOpacity = rect.fillOpacity;
187 var type = rect.type;
188
189 var clone_rect = new google.maps.Rectangle({
190 suppressUndo: true,
191 strokeColor: strokeColor,
192 strokeOpacity: strokeOpacity,
193 strokeWeight: strokeWeight,
194 fillColor: fillColor,
195 fillOpacity: fillOpacity,
196 bounds: bounds,
197 draggable: true,
198 editable: false,
199 type: type
200 });
201 return clone_rect;
202}
203
204ShapesUtil.cloneRectangle = function (rect) {
205
206 var bounds = rect.getBounds();
207 var clone_rect = ShapesUtil._createRectangle(rect,bounds);
208 return clone_rect;
209}
210
211ShapesUtil.JSONToRectangle = function (json_rect) {
212
213 var bounds = json_rect.bounds;
214 var north = bounds.north;
215 var south = bounds.south;
216 var east = bounds.east;
217 var west = bounds.west;
218
219 var NE = new google.maps.LatLng(north, east);
220 var SW = new google.maps.LatLng(south, west);
221 bounds = new google.maps.LatLngBounds(SW, NE);
222
223 var rect = ShapesUtil._createRectangle(json_rect,bounds);
224 return rect;
225}
226
227ShapesUtil.RectangleToJSON = function (rect) {
228
229 var strokeColor = rect.strokeColor;
230 var strokeOpacity = rect.strokeOpacity;
231 var strokeWeight = rect.strokeWeight;
232 var fillColor = rect.fillColor;
233 var fillOpacity = rect.fillOpacity;
234 var type = rect.type;
235
236 var bounds = rect.getBounds();
237 var north_east = bounds.getNorthEast();
238 var south_west = bounds.getSouthWest();
239
240 var north = north_east.lat();
241 var east = north_east.lng();
242 var south = south_west.lat();
243 var west = south_west.lng();
244
245 var json_rect =
246 {
247 strokeColor: strokeColor,
248 strokeOpacity: strokeOpacity,
249 strokeWeight: strokeWeight,
250 fillColor: fillColor,
251 fillOpacity: fillOpacity,
252 bounds: { north: north, south: south, east: east, west: west },
253 type: type
254 }
255
256 return json_rect;
257}
258
259
260
261ShapesUtil._createCircle = function (circ) {
262 var strokeColor = circ.strokeColor;
263 var strokeOpacity = circ.strokeOpacity;
264 var strokeWeight = circ.strokeWeight;
265 var fillColor = circ.fillColor;
266 var fillOpacity = circ.fillOpacity;
267 var center = circ.center;
268 var radius = circ.radius;
269 var type = circ.type;
270
271 var clone_circ = new google.maps.Circle({
272 suppressUndo: true,
273 strokeColor: strokeColor,
274 strokeOpacity: strokeOpacity,
275 strokeWeight: strokeWeight,
276 fillColor: fillColor,
277 fillOpacity: fillOpacity,
278 center: center,
279 radius: radius,
280 draggable: true,
281 editable: false,
282 type: type
283 });
284 return clone_circ;
285}
286
287ShapesUtil.cloneCircle = function (circ) {
288 return ShapesUtil._createCircle(circ);
289}
290
291ShapesUtil.JSONToCircle = function (json_circ) {
292
293 var circ = ShapesUtil._createCircle(json_circ);
294 return circ;
295}
296
297ShapesUtil.CircleToJSON = function (circ) {
298 var strokeColor = circ.strokeColor;
299 var strokeOpacity = circ.strokeOpacity;
300 var strokeWeight = circ.strokeWeight;
301 var fillColor = circ.fillColor;
302 var fillOpacity = circ.fillOpacity;
303 var center = circ.center;
304 var radius = circ.radius;
305 var type = circ.type;
306
307
308 var json_circ =
309 {
310 strokeColor: strokeColor,
311 strokeOpacity: strokeOpacity,
312 strokeWeight: strokeWeight,
313 fillColor: fillColor,
314 fillOpacity: fillOpacity,
315 center: center,
316 radius: radius,
317 type: type
318 };
319
320 return json_circ;
321}
322
323ShapesUtil._createMarker = function (position) {
324
325 var clone_marker = new google.maps.Marker({
326 suppressUndo: true,
327 position: position,
328 clickable: true,
329 draggable: true,
330 editable: true,
331 type: google.maps.drawing.OverlayType.MARKER
332 })
333 return clone_marker;
334}
335
336ShapesUtil.cloneMarker = function (marker) {
337
338 var position = marker.getPosition();
339 var clone_marker = ShapesUtil._createMarker(position);
340 return clone_marker;
341}
342
343
344ShapesUtil.JSONToMarker = function (json_marker) {
345
346 var json_position = json_marker.position;
347 var lat = json_position.lat;
348 var lng = json_position.lng;
349 var position = new google.maps.LatLng(lat, lng);
350
351 var marker = ShapesUtil._createMarker(position);
352 return marker;
353}
354
355ShapesUtil.MarkerToJSON = function (marker) {
356
357 var position = marker.getPosition();
358 var lat = position.lat();
359 var lng = position.lng();
360
361 var json_marker =
362 {
363 position: { lat: lat, lng: lng },
364 type: google.maps.drawing.OverlayType.MARKER
365 };
366
367 return json_marker;
368}
369
370
371ShapesUtil.cloneShape = function (shape) {
372 if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
373 var clone_polyline = ShapesUtil.clonePolyline(shape);
374 return clone_polyline;
375 } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
376 var clone_polygon = ShapesUtil.clonePolygon(shape);
377 return clone_polygon;
378 } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
379 var clone_rect = ShapesUtil.cloneRectangle(shape);
380 return clone_rect;
381
382 } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
383 var clone_circ = ShapesUtil.cloneCircle(shape);
384 return clone_circ;
385
386 } else {
387 var clone_marker = ShapesUtil.cloneMarker(shape);
388 return clone_marker;
389 }
390}
391
392ShapesUtil.overlayItemIsShape = function (overlay_item) {
393 var type = overlay_item.type;
394
395 is_shape = (type === google.maps.drawing.OverlayType.POLYLINE)
396 || (type === google.maps.drawing.OverlayType.POLYGON)
397 || (type === google.maps.drawing.OverlayType.RECTANGLE)
398 || (type === google.maps.drawing.OverlayType.CIRCLE);
399
400 return is_shape;
401}
402
403
404ShapesUtil.shapeToJSON = function(shape) {
405
406 var json_shape = null;
407
408 if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
409 json_shape = ShapesUtil.PolylineToJSON(shape);
410 } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
411 json_shape = ShapesUtil.PolygonToJSON(shape);
412 } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
413 json_shape = ShapesUtil.RectangleToJSON(shape);
414 } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
415 json_shape = ShapesUtil.CircleToJSON(shape);
416 } else if (shape.type === google.maps.drawing.OverlayType.MARKER){
417 json_shape = ShapesUtil.MarkerToJSON(shape);
418 }
419 else {
420 console.error("*** shapeToJSON() Unrecognized shape type: " + shape.type);
421 }
422
423 return json_shape;
424}
425
426ShapesUtil.overlayToJSON = function (overlays) {
427
428 var json_overlays = [];
429
430 for (var i=0; i<overlays.length; i++) {
431
432 var shape = overlays[i];
433 var json_shape = ShapesUtil.shapeToJSON(shape);
434
435 json_overlays.push(json_shape);
436 }
437
438 return json_overlays;
439
440}
441
442ShapesUtil.JSONToShape = function(json_shape) {
443
444 var shape = null;
445
446 if (json_shape.type === google.maps.drawing.OverlayType.POLYLINE) {
447 shape = ShapesUtil.JSONToPolyline(json_shape);
448 } else if (json_shape.type === google.maps.drawing.OverlayType.POLYGON) {
449 shape = ShapesUtil.JSONToPolygon(json_shape);
450 } else if (json_shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
451 shape = ShapesUtil.JSONToRectangle(json_shape);
452 } else if (json_shape.type === google.maps.drawing.OverlayType.CIRCLE) {
453 shape = ShapesUtil.JSONToCircle(json_shape);
454 } else if (json_shape.type === google.maps.drawing.OverlayType.MARKER){
455 shape = ShapesUtil.JSONToMarker(json_shape);
456 }
457 else {
458 console.error("*** JSONToShape() Unrecognized shape type: " +json_shape.type);
459 }
460
461 return shape;
462}
463
464ShapesUtil.JSONToOverlays = function (json_shapes_str) {
465 var json_shapes = JSON.parse(json_shapes_str);
466
467 var overlays = [];
468
469 for (var i=0; i<json_shapes.length; i++) {
470 var json_shape = json_shapes[i];
471 var shape = ShapesUtil.JSONToShape(json_shape);
472
473 overlays.push(shape);
474 }
475
476 return overlays;
477
478}
479
480
Note: See TracBrowser for help on using the repository browser.