Merge branch 'MDL-68454-master' of git://github.com/andrewnicols/moodle
[moodle.git] / question / type / ddmarker / amd / src / shapes.js
1 // This file is part of Moodle - http://moodle.org/
2 //
3 // Moodle is free software: you can redistribute it and/or modify
4 // it under the terms of the GNU General Public License as published by
5 // the Free Software Foundation, either version 3 of the License, or
6 // (at your option) any later version.
7 //
8 // Moodle is distributed in the hope that it will be useful,
9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 // GNU General Public License for more details.
12 //
13 // You should have received a copy of the GNU General Public License
14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 /* eslint max-depth: ["error", 8] */
18 /**
19  * Library of classes for handling simple shapes.
20  *
21  * These classes can represent shapes, let you alter them, can go to and from a string
22  * representation, and can give you an SVG representation.
23  *
24  * @package    qtype_ddmarker
25  * @subpackage shapes
26  * @copyright  2018 The Open University
27  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
28  */
30 define(function() {
32     "use strict";
34     /**
35      * A point, with x and y coordinates.
36      *
37      * @param {int} x centre X.
38      * @param {int} y centre Y.
39      * @constructor
40      */
41     function Point(x, y) {
42         this.x = x;
43         this.y = y;
44     }
46     /**
47      * Standard toString method.
48      * @returns {string} "x;y";
49      */
50     Point.prototype.toString = function() {
51         return this.x + ',' + this.y;
52     };
54     /**
55      * Move a point
56      * @param {int} dx x offset
57      * @param {int} dy y offset
58      */
59     Point.prototype.move = function(dx, dy) {
60         this.x += dx;
61         this.y += dy;
62     };
64     /**
65      * Return a new point that is a certain position relative to this one.
66      *
67      * @param {(int|Point)} offsetX if a point, offset by this points coordinates, else and int x offset.
68      * @param {int} [offsetY] used if offsetX is an int, the corresponding y offset.
69      * @return {Point} the new point.
70      */
71     Point.prototype.offset = function(offsetX, offsetY) {
72         if (offsetX instanceof Point) {
73             offsetY = offsetX.y;
74             offsetX = offsetX.x;
75         }
76         return new Point(this.x + offsetX, this.y + offsetY);
77     };
79     /**
80      * Make a point from the string representation.
81      *
82      * @param {String} coordinates "x,y".
83      * @return {Point} the point. Throws an exception if input is not valid.
84      */
85     Point.parse = function(coordinates) {
86         var bits = coordinates.split(',');
87         if (bits.length !== 2) {
88             throw new Error(coordinates + ' is not a valid point');
89         }
90         return new Point(Math.round(bits[0]), Math.round(bits[1]));
91     };
94     /**
95      * Shape constructor. Abstract class to represent the different types of drop zone shapes.
96      *
97      * @param {String} [label] name of this area.
98      * @param {int} [x] centre X.
99      * @param {int} [y] centre Y.
100      * @constructor
101      */
102     function Shape(label, x, y) {
103         this.label = label;
104         this.centre = new Point(x || 0, y || 0);
105     }
107     /**
108      * Get the type of shape.
109      *
110      * @return {String} 'circle', 'rectangle' or 'polygon';
111      */
112     Shape.prototype.getType = function() {
113         throw new Error('Not implemented.');
114     };
116     /**
117      * Get the string representation of this shape.
118      *
119      * @return {String} coordinates as they need to be typed into the form.
120      */
121     Shape.prototype.getCoordinates = function() {
122         throw new Error('Not implemented.');
123     };
125     /**
126      * Update the shape from the string representation.
127      *
128      * @param {String} coordinates in the form returned by getCoordinates.
129      * @param {number} ratio Ratio to scale.
130      * @return {boolean} true if the string could be parsed and the shape updated, else false.
131      */
132     Shape.prototype.parse = function(coordinates, ratio) {
133         void (coordinates, ratio);
134         throw new Error('Not implemented.');
135     };
137     /**
138      * Move the entire shape by this offset.
139      *
140      * @param {int} dx x offset.
141      * @param {int} dy y offset.
142      * @param {int} maxX ensure that after editing, the shape lies between 0 and maxX on the x-axis.
143      * @param {int} maxY ensure that after editing, the shape lies between 0 and maxX on the y-axis.
144      */
145     Shape.prototype.move = function(dx, dy, maxX, maxY) {
146         void (maxY);
147     };
149     /**
150      * Move one of the edit handles by this offset.
151      *
152      * @param {int} handleIndex which handle was moved.
153      * @param {int} dx x offset.
154      * @param {int} dy y offset.
155      * @param {int} maxX ensure that after editing, the shape lies between 0 and maxX on the x-axis.
156      * @param {int} maxY ensure that after editing, the shape lies between 0 and maxX on the y-axis.
157      */
158     Shape.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
159         void (maxY);
160     };
162     /**
163      * Update the properties of this shape after a sequence of edits.
164      *
165      * For example make sure the circle radius is positive, of the polygon centre is centred.
166      */
167     Shape.prototype.normalizeShape = function() {
168         void (1); // To make CiBoT happy.
169     };
171     /**
172      * Get the string representation of this shape.
173      *
174      * @param {SVGElement} svg the SVG graphic to add this shape to.
175      * @return {SVGElement} SVG representation of this shape.
176      */
177     Shape.prototype.makeSvg = function(svg) {
178         void (svg);
179         throw new Error('Not implemented.');
180     };
182     /**
183      * Update the SVG representation of this shape.
184      *
185      * @param {SVGElement} svgEl the SVG representation of this shape.
186      */
187     Shape.prototype.updateSvg = function(svgEl) {
188         void (svgEl);
189     };
191     /**
192      * Make a circle similar to this shape.
193      *
194      * @return {Circle} a circle that is about the same size and position as this shape.
195      */
196     Shape.prototype.makeSimilarCircle = function() {
197         throw new Error('Not implemented.');
198     };
200     /**
201      * Make a rectangle similar to this shape.
202      *
203      * @return {Rectangle} a rectangle that is about the same size and position as this shape.
204      */
205     Shape.prototype.makeSimilarRectangle = function() {
206         throw new Error('Not implemented.');
207     };
209     /**
210      * Make a polygon similar to this shape.
211      *
212      * @return {Polygon} a polygon that is about the same size and position as this shape.
213      */
214     Shape.prototype.makeSimilarPolygon = function() {
215         throw new Error('Not implemented.');
216     };
218     /**
219      * Get the handles that should be offered to edit this shape, or null if not appropriate.
220      *
221      * @return {[Object]} with properties moveHandle {Point} and editHandles {Point[]}
222      */
223     Shape.prototype.getHandlePositions = function() {
224         return null;
225     };
228     /**
229      * A shape that is a circle.
230      *
231      * @param {String} label name of this area.
232      * @param {int} [x] centre X.
233      * @param {int} [y] centre Y.
234      * @param {int} [radius] radius.
235      * @constructor
236      */
237     function Circle(label, x, y, radius) {
238         x = x || 15;
239         y = y || 15;
240         Shape.call(this, label, x, y);
241         this.radius = radius || 15;
242     }
243     Circle.prototype = new Shape();
245     Circle.prototype.getType = function() {
246         return 'circle';
247     };
249     Circle.prototype.getCoordinates = function() {
250         return this.centre + ';' + Math.abs(this.radius);
251     };
253     Circle.prototype.makeSvg = function(svg) {
254         var svgEl = createSvgShapeGroup(svg, 'circle');
255         this.updateSvg(svgEl);
256         return svgEl;
257     };
259     Circle.prototype.updateSvg = function(svgEl) {
260         svgEl.childNodes[0].setAttribute('cx', this.centre.x);
261         svgEl.childNodes[0].setAttribute('cy', this.centre.y);
262         svgEl.childNodes[0].setAttribute('r', Math.abs(this.radius));
263         svgEl.childNodes[1].setAttribute('x', this.centre.x);
264         svgEl.childNodes[1].setAttribute('y', this.centre.y + 15);
265         svgEl.childNodes[1].textContent = this.label;
266     };
268     Circle.prototype.parse = function(coordinates, ratio) {
269         if (!coordinates.match(/^\d+(\.\d+)?,\d+(\.\d+)?;\d+(\.\d+)?$/)) {
270             return false;
271         }
273         var bits = coordinates.split(';');
274         this.centre = Point.parse(bits[0]);
275         this.centre.x = this.centre.x * parseFloat(ratio);
276         this.centre.y = this.centre.y * parseFloat(ratio);
277         this.radius = Math.round(bits[1]) * parseFloat(ratio);
278         return true;
279     };
281     Circle.prototype.move = function(dx, dy, maxX, maxY) {
282         this.centre.move(dx, dy);
283         if (this.centre.x < this.radius) {
284             this.centre.x = this.radius;
285         }
286         if (this.centre.x > maxX - this.radius) {
287             this.centre.x = maxX - this.radius;
288         }
289         if (this.centre.y < this.radius) {
290             this.centre.y = this.radius;
291         }
292         if (this.centre.y > maxY - this.radius) {
293             this.centre.y = maxY - this.radius;
294         }
295     };
297     Circle.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
298         this.radius += dx;
299         var limit = Math.min(this.centre.x, this.centre.y, maxX - this.centre.x, maxY - this.centre.y);
300         if (this.radius > limit) {
301             this.radius = limit;
302         }
303         if (this.radius < -limit) {
304             this.radius = -limit;
305         }
306     };
308     /**
309      * Update the properties of this shape after a sequence of edits.
310      *
311      * For example make sure the circle radius is positive, of the polygon centre is centred.
312      */
313     Circle.prototype.normalizeShape = function() {
314         this.radius = Math.abs(this.radius);
315     };
317     Circle.prototype.makeSimilarRectangle = function() {
318         return new Rectangle(this.label,
319                 this.centre.x - this.radius, this.centre.y - this.radius,
320                 this.radius * 2, this.radius * 2);
321     };
323     Circle.prototype.makeSimilarPolygon = function() {
324         // We make a similar square, so if you go to and from Rectangle afterwards, it is loss-less.
325         return new Polygon(this.label, [
326                 this.centre.offset(-this.radius, -this.radius), this.centre.offset(-this.radius, this.radius),
327                 this.centre.offset(this.radius, this.radius), this.centre.offset(this.radius, -this.radius)]);
328     };
330     Circle.prototype.getHandlePositions = function() {
331         return {
332             moveHandle: this.centre,
333             editHandles: [this.centre.offset(this.radius, 0)]
334         };
335     };
338     /**
339      * A shape that is a rectangle.
340      *
341      * @param {String} label name of this area.
342      * @param {int} [x] top left X.
343      * @param {int} [y] top left Y.
344      * @param {int} [width] width.
345      * @param {int} [height] height.
346      * @constructor
347      */
348     function Rectangle(label, x, y, width, height) {
349         Shape.call(this, label, x, y);
350         this.width = width || 30;
351         this.height = height || 30;
352     }
353     Rectangle.prototype = new Shape();
355     Rectangle.prototype.getType = function() {
356         return 'rectangle';
357     };
359     Rectangle.prototype.getCoordinates = function() {
360         return this.centre + ';' + this.width + ',' + this.height;
361     };
363     Rectangle.prototype.makeSvg = function(svg) {
364         var svgEl = createSvgShapeGroup(svg, 'rect');
365         this.updateSvg(svgEl);
366         return svgEl;
367     };
369     Rectangle.prototype.updateSvg = function(svgEl) {
370         if (this.width >= 0) {
371             svgEl.childNodes[0].setAttribute('x', this.centre.x);
372             svgEl.childNodes[0].setAttribute('width', this.width);
373         } else {
374             svgEl.childNodes[0].setAttribute('x', this.centre.x + this.width);
375             svgEl.childNodes[0].setAttribute('width', -this.width);
376         }
377         if (this.height >= 0) {
378             svgEl.childNodes[0].setAttribute('y', this.centre.y);
379             svgEl.childNodes[0].setAttribute('height', this.height);
380         } else {
381             svgEl.childNodes[0].setAttribute('y', this.centre.y + this.height);
382             svgEl.childNodes[0].setAttribute('height', -this.height);
383         }
385         svgEl.childNodes[1].setAttribute('x', this.centre.x + this.width / 2);
386         svgEl.childNodes[1].setAttribute('y', this.centre.y + this.height / 2 + 15);
387         svgEl.childNodes[1].textContent = this.label;
388     };
390     Rectangle.prototype.parse = function(coordinates, ratio) {
391         if (!coordinates.match(/^\d+(\.\d+)?,\d+(\.\d+)?;\d+(\.\d+)?,\d+(\.\d+)?$/)) {
392             return false;
393         }
395         var bits = coordinates.split(';');
396         this.centre = Point.parse(bits[0]);
397         this.centre.x = this.centre.x * parseFloat(ratio);
398         this.centre.y = this.centre.y * parseFloat(ratio);
399         var size = Point.parse(bits[1]);
400         this.width = size.x * parseFloat(ratio);
401         this.height = size.y * parseFloat(ratio);
402         return true;
403     };
405     Rectangle.prototype.move = function(dx, dy, maxX, maxY) {
406         this.centre.move(dx, dy);
407         if (this.centre.x < 0) {
408             this.centre.x = 0;
409         }
410         if (this.centre.x > maxX - this.width) {
411             this.centre.x = maxX - this.width;
412         }
413         if (this.centre.y < 0) {
414             this.centre.y = 0;
415         }
416         if (this.centre.y > maxY - this.height) {
417             this.centre.y = maxY - this.height;
418         }
419     };
421     Rectangle.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
422         this.width += dx;
423         this.height += dy;
424         if (this.width < -this.centre.x) {
425             this.width = -this.centre.x;
426         }
427         if (this.width > maxX - this.centre.x) {
428             this.width = maxX - this.centre.x;
429         }
430         if (this.height < -this.centre.y) {
431             this.height = -this.centre.y;
432         }
433         if (this.height > maxY - this.centre.y) {
434             this.height = maxY - this.centre.y;
435         }
436     };
438     /**
439      * Update the properties of this shape after a sequence of edits.
440      *
441      * For example make sure the circle radius is positive, of the polygon centre is centred.
442      */
443     Rectangle.prototype.normalizeShape = function() {
444         if (this.width < 0) {
445             this.centre.x += this.width;
446             this.width = -this.width;
447         }
448         if (this.height < 0) {
449             this.centre.y += this.height;
450             this.height = -this.height;
451         }
452     };
454     Rectangle.prototype.makeSimilarCircle = function() {
455         return new Circle(this.label,
456                 Math.round(this.centre.x + this.width / 2),
457                 Math.round(this.centre.y + this.height / 2),
458                 Math.round((this.width + this.height) / 4));
459     };
461     Rectangle.prototype.makeSimilarPolygon = function() {
462         return new Polygon(this.label, [
463             this.centre, this.centre.offset(0, this.height),
464             this.centre.offset(this.width, this.height), this.centre.offset(this.width, 0)]);
465     };
467     Rectangle.prototype.getHandlePositions = function() {
468         return {
469             moveHandle: this.centre.offset(this.width / 2, this.height / 2),
470             editHandles: [this.centre.offset(this.width, this.height)]
471         };
472     };
475     /**
476      * A shape that is a polygon.
477      *
478      * @param {String} label name of this area.
479      * @param {Point[]} [points] position of the vertices relative to (centreX, centreY).
480      *      each object in the array should have two
481      * @constructor
482      */
483     function Polygon(label, points) {
484         Shape.call(this, label, 0, 0);
485         this.points = points ? points.slice() : [new Point(10, 10), new Point(40, 10), new Point(10, 40)];
486         this.normalizeShape();
487         this.ratio = 1;
488     }
489     Polygon.prototype = new Shape();
491     Polygon.prototype.getType = function() {
492         return 'polygon';
493     };
495     Polygon.prototype.getCoordinates = function() {
496         var coordinates = '';
497         for (var i = 0; i < this.points.length; i++) {
498             coordinates += this.centre.offset(this.points[i]) + ';';
499         }
500         return coordinates.slice(0, coordinates.length - 1); // Strip off the last ';'.
501     };
503     Polygon.prototype.makeSvg = function(svg) {
504         var svgEl = createSvgShapeGroup(svg, 'polygon');
505         this.updateSvg(svgEl);
506         return svgEl;
507     };
509     Polygon.prototype.updateSvg = function(svgEl) {
510         svgEl.childNodes[0].setAttribute('points', this.getCoordinates().replace(/[,;]/g, ' '));
511         svgEl.childNodes[0].setAttribute('transform', 'scale(' + parseFloat(this.ratio) + ')');
512         svgEl.childNodes[1].setAttribute('x', this.centre.x);
513         svgEl.childNodes[1].setAttribute('y', this.centre.y + 15);
514         svgEl.childNodes[1].textContent = this.label;
515     };
517     Polygon.prototype.parse = function(coordinates, ratio) {
518         if (!coordinates.match(/^\d+(\.\d+)?,\d+(\.\d+)?(?:;\d+(\.\d+)?,\d+(\.\d+)?)*$/)) {
519             return false;
520         }
522         var bits = coordinates.split(';');
523         var points = [];
524         for (var i = 0; i < bits.length; i++) {
525             points.push(Point.parse(bits[i]));
526         }
528         this.points = points;
529         this.centre.x = 0;
530         this.centre.y = 0;
531         this.ratio = ratio;
532         this.normalizeShape();
534         return true;
535     };
537     Polygon.prototype.move = function(dx, dy, maxX, maxY) {
538         this.centre.move(dx, dy);
539         var bbXMin = maxX,
540             bbXMax = 0,
541             bbYMin = maxY,
542             bbYMax = 0;
543         // Computer centre.
544         for (var i = 0; i < this.points.length; i++) {
545             bbXMin = Math.min(bbXMin, this.points[i].x);
546             bbXMax = Math.max(bbXMax, this.points[i].x);
547             bbYMin = Math.min(bbYMin, this.points[i].y);
548             bbYMax = Math.max(bbYMax, this.points[i].y);
549         }
550         if (this.centre.x < -bbXMin) {
551             this.centre.x = -bbXMin;
552         }
553         if (this.centre.x > maxX - bbXMax) {
554             this.centre.x = maxX - bbXMax;
555         }
556         if (this.centre.y < -bbYMin) {
557             this.centre.y = -bbYMin;
558         }
559         if (this.centre.y > maxY - bbYMax) {
560             this.centre.y = maxY - bbYMax;
561         }
562     };
564     Polygon.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
565         this.points[handleIndex].move(dx, dy);
566         if (this.points[handleIndex].x < -this.centre.x) {
567             this.points[handleIndex].x = -this.centre.x;
568         }
569         if (this.points[handleIndex].x > maxX - this.centre.x) {
570             this.points[handleIndex].x = maxX - this.centre.x;
571         }
572         if (this.points[handleIndex].y < -this.centre.y) {
573             this.points[handleIndex].y = -this.centre.y;
574         }
575         if (this.points[handleIndex].y > maxY - this.centre.y) {
576             this.points[handleIndex].y = maxY - this.centre.y;
577         }
578     };
580     /**
581      * Add a new point after the given point, with the same co-ordinates.
582      *
583      * This does not automatically normalise.
584      *
585      * @param {int} pointIndex the index of the vertex after which to insert this new one.
586      */
587     Polygon.prototype.addNewPointAfter = function(pointIndex) {
588         this.points.splice(pointIndex, 0,
589                 new Point(this.points[pointIndex].x, this.points[pointIndex].y));
590     };
592     Polygon.prototype.normalizeShape = function() {
593         var i,
594             x = 0,
595             y = 0;
597         if (this.points.length === 0) {
598             return;
599         }
601         // Computer centre.
602         for (i = 0; i < this.points.length; i++) {
603             x += this.points[i].x;
604             y += this.points[i].y;
605         }
606         x = Math.round(x / this.points.length);
607         y = Math.round(y / this.points.length);
609         if (x === 0 && y === 0) {
610             return;
611         }
613         for (i = 0; i < this.points.length; i++) {
614             this.points[i].move(-x, -y);
615         }
616         this.centre.move(x, y);
617     };
619     Polygon.prototype.makeSimilarCircle = function() {
620         return this.makeSimilarRectangle().makeSimilarCircle();
621     };
623     Polygon.prototype.makeSimilarRectangle = function() {
624         var p,
625             minX = 0,
626             maxX = 0,
627             minY = 0,
628             maxY = 0;
629         for (var i = 0; i < this.points.length; i++) {
630             p = this.points[i];
631             minX = Math.min(minX, p.x);
632             maxX = Math.max(maxX, p.x);
633             minY = Math.min(minY, p.y);
634             maxY = Math.max(maxY, p.y);
635         }
636         return new Rectangle(this.label,
637                 this.centre.x + minX, this.centre.y + minY,
638                 Math.max(maxX - minX, 10), Math.max(maxY - minY, 10));
639     };
641     Polygon.prototype.getHandlePositions = function() {
642         var editHandles = [];
643         for (var i = 0; i < this.points.length; i++) {
644             editHandles.push(this.points[i].offset(this.centre.x, this.centre.y));
645         }
647         this.centre.x = this.centre.x * parseFloat(this.ratio);
648         this.centre.y = this.centre.y * parseFloat(this.ratio);
650         return {
651             moveHandle: this.centre,
652             editHandles: editHandles
653         };
654     };
657     /**
658      * Not a shape (null object pattern).
659      *
660      * @param {String} label name of this area.
661      * @constructor
662      */
663     function NullShape(label) {
664         Shape.call(this, label);
665     }
666     NullShape.prototype = new Shape();
668     NullShape.prototype.getType = function() {
669         return 'null';
670     };
672     NullShape.prototype.getCoordinates = function() {
673         return '';
674     };
676     NullShape.prototype.makeSvg = function(svg) {
677         void (svg);
678         return null;
679     };
681     NullShape.prototype.updateSvg = function(svgEl) {
682         void (svgEl);
683     };
685     NullShape.prototype.parse = function(coordinates) {
686         void (coordinates);
687         return false;
688     };
690     NullShape.prototype.makeSimilarCircle = function() {
691         return new Circle(this.label);
692     };
694     NullShape.prototype.makeSimilarRectangle = function() {
695         return new Rectangle(this.label);
696     };
698     NullShape.prototype.makeSimilarPolygon = function() {
699         return new Polygon(this.label);
700     };
703     /**
704      * Make a new SVG DOM element as a child of svg.
705      *
706      * @param {SVGElement} svg the parent node.
707      * @param {String} tagName the tag name.
708      * @return {SVGElement} the newly created node.
709      */
710     function createSvgElement(svg, tagName) {
711         var svgEl = svg.ownerDocument.createElementNS('http://www.w3.org/2000/svg', tagName);
712         svg.appendChild(svgEl);
713         return svgEl;
714     }
716     /**
717      * Make a group SVG DOM elements containing a shape of the given type as first child,
718      * and a text label as the second child.
719      *
720      * @param {SVGElement} svg the parent node.
721      * @param {String} tagName the tag name.
722      * @return {SVGElement} the newly created g element.
723      */
724     function createSvgShapeGroup(svg, tagName) {
725         var svgEl = createSvgElement(svg, 'g');
726         createSvgElement(svgEl, tagName).setAttribute('class', 'shape');
727         createSvgElement(svgEl, 'text').setAttribute('class', 'shapeLabel');
728         return svgEl;
729     }
731     /**
732      * @alias module:qtype_ddmarker/shapes
733      */
734     return {
735         /**
736          * A point, with x and y coordinates.
737          *
738          * @param {int} x centre X.
739          * @param {int} y centre Y.
740          * @constructor
741          */
742         Point: Point,
744         /**
745          * A point, with x and y coordinates.
746          *
747          * @param {int} x centre X.
748          * @param {int} y centre Y.
749          * @constructor
750          */
751         Shape: Shape,
753         /**
754          * A shape that is a circle.
755          *
756          * @param {String} label name of this area.
757          * @param {int} [x] centre X.
758          * @param {int} [y] centre Y.
759          * @param {int} [radius] radius.
760          * @constructor
761          */
762         Circle: Circle,
764         /**
765          * A shape that is a rectangle.
766          *
767          * @param {String} label name of this area.
768          * @param {int} [x] top left X.
769          * @param {int} [y] top left Y.
770          * @param {int} [width] width.
771          * @param {int} [height] height.
772          * @constructor
773          */
774         Rectangle: Rectangle,
776         /**
777          * A shape that is a polygon.
778          *
779          * @param {String} label name of this area.
780          * @param {Point[]} [points] position of the vertices relative to (centreX, centreY).
781          *      each object in the array should have two
782          * @constructor
783          */
784         Polygon: Polygon,
786         /**
787          * Not a shape (null object pattern).
788          *
789          * @param {String} label name of this area.
790          * @constructor
791          */
792         NullShape: NullShape,
794         /**
795          * Make a new SVG DOM element as a child of svg.
796          *
797          * @param {SVGElement} svg the parent node.
798          * @param {String} tagName the tag name.
799          * @return {SVGElement} the newly created node.
800          */
801         createSvgElement: createSvgElement,
803         /**
804          * Make a shape of the given type.
805          *
806          * @param {String} shapeType
807          * @param {String} label
808          * @return {Shape} the requested shape.
809          */
810         make: function(shapeType, label) {
811             switch (shapeType) {
812                 case 'circle':
813                     return new Circle(label);
814                 case 'rectangle':
815                     return new Rectangle(label);
816                 case 'polygon':
817                     return new Polygon(label);
818                 default:
819                     return new NullShape(label);
820             }
821         },
823         /**
824          * Make a shape of the given type that is similar to the shape of the original type.
825          *
826          * @param {String} shapeType the new type of shape to make
827          * @param {Shape} shape the shape to copy
828          * @return {Shape} the similar shape of a different type.
829          */
830         getSimilar: function(shapeType, shape) {
831             if (shapeType === shape.getType()) {
832                 return shape;
833             }
834             switch (shapeType) {
835                 case 'circle':
836                     return shape.makeSimilarCircle();
837                 case 'rectangle':
838                     return shape.makeSimilarRectangle();
839                 case 'polygon':
840                     return shape.makeSimilarPolygon();
841                 default:
842                     return new NullShape(shape.label);
843             }
844         }
845     };
846 });