// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/* eslint max-depth: ["error", 8] */
/**
* Library of classes for handling simple shapes.
*
* These classes can represent shapes, let you alter them, can go to and from a string
* representation, and can give you an SVG representation.
*
* @module qtype_ddmarker/shapes
* @copyright 2018 The Open University
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(function() {
"use strict";
/**
* A point, with x and y coordinates.
*
* @param {int} x centre X.
* @param {int} y centre Y.
* @constructor
*/
function Point(x, y) {
this.x = x;
this.y = y;
}
/**
* Standard toString method.
* @returns {string} "x;y";
*/
Point.prototype.toString = function() {
return this.x + ',' + this.y;
};
/**
* Move a point
* @param {int} dx x offset
* @param {int} dy y offset
*/
Point.prototype.move = function(dx, dy) {
this.x += dx;
this.y += dy;
};
/**
* Return a new point that is a certain position relative to this one.
*
* @param {(int|Point)} offsetX if a point, offset by this points coordinates, else and int x offset.
* @param {int} [offsetY] used if offsetX is an int, the corresponding y offset.
* @return {Point} the new point.
*/
Point.prototype.offset = function(offsetX, offsetY) {
if (offsetX instanceof Point) {
offsetY = offsetX.y;
offsetX = offsetX.x;
}
return new Point(this.x + offsetX, this.y + offsetY);
};
/**
* Make a point from the string representation.
*
* @param {String} coordinates "x,y".
* @return {Point} the point. Throws an exception if input is not valid.
*/
Point.parse = function(coordinates) {
var bits = coordinates.split(',');
if (bits.length !== 2) {
throw new Error(coordinates + ' is not a valid point');
}
return new Point(Math.round(bits[0]), Math.round(bits[1]));
};
/**
* Shape constructor. Abstract class to represent the different types of drop zone shapes.
*
* @param {String} [label] name of this area.
* @param {int} [x] centre X.
* @param {int} [y] centre Y.
* @constructor
*/
function Shape(label, x, y) {
this.label = label;
this.centre = new Point(x || 0, y || 0);
}
/**
* Get the type of shape.
*
* @return {String} 'circle', 'rectangle' or 'polygon';
*/
Shape.prototype.getType = function() {
throw new Error('Not implemented.');
};
/**
* Get the string representation of this shape.
*
* @return {String} coordinates as they need to be typed into the form.
*/
Shape.prototype.getCoordinates = function() {
throw new Error('Not implemented.');
};
/**
* Update the shape from the string representation.
*
* @param {String} coordinates in the form returned by getCoordinates.
* @param {number} ratio Ratio to scale.
* @return {boolean} true if the string could be parsed and the shape updated, else false.
*/
Shape.prototype.parse = function(coordinates, ratio) {
void (coordinates, ratio);
throw new Error('Not implemented.');
};
/**
* Move the entire shape by this offset.
*
* @param {int} dx x offset.
* @param {int} dy y offset.
* @param {int} maxX ensure that after editing, the shape lies between 0 and maxX on the x-axis.
* @param {int} maxY ensure that after editing, the shape lies between 0 and maxX on the y-axis.
*/
Shape.prototype.move = function(dx, dy, maxX, maxY) {
void (maxY);
};
/**
* Move one of the edit handles by this offset.
*
* @param {int} handleIndex which handle was moved.
* @param {int} dx x offset.
* @param {int} dy y offset.
* @param {int} maxX ensure that after editing, the shape lies between 0 and maxX on the x-axis.
* @param {int} maxY ensure that after editing, the shape lies between 0 and maxX on the y-axis.
*/
Shape.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
void (maxY);
};
/**
* Update the properties of this shape after a sequence of edits.
*
* For example make sure the circle radius is positive, of the polygon centre is centred.
*/
Shape.prototype.normalizeShape = function() {
void (1); // To make CiBoT happy.
};
/**
* Get the string representation of this shape.
*
* @param {SVGElement} svg the SVG graphic to add this shape to.
* @return {SVGElement} SVG representation of this shape.
*/
Shape.prototype.makeSvg = function(svg) {
void (svg);
throw new Error('Not implemented.');
};
/**
* Update the SVG representation of this shape.
*
* @param {SVGElement} svgEl the SVG representation of this shape.
*/
Shape.prototype.updateSvg = function(svgEl) {
void (svgEl);
};
/**
* Make a circle similar to this shape.
*
* @return {Circle} a circle that is about the same size and position as this shape.
*/
Shape.prototype.makeSimilarCircle = function() {
throw new Error('Not implemented.');
};
/**
* Make a rectangle similar to this shape.
*
* @return {Rectangle} a rectangle that is about the same size and position as this shape.
*/
Shape.prototype.makeSimilarRectangle = function() {
throw new Error('Not implemented.');
};
/**
* Make a polygon similar to this shape.
*
* @return {Polygon} a polygon that is about the same size and position as this shape.
*/
Shape.prototype.makeSimilarPolygon = function() {
throw new Error('Not implemented.');
};
/**
* Get the handles that should be offered to edit this shape, or null if not appropriate.
*
* @return {Object[]} with properties moveHandle {Point} and editHandles {Point[]}
*/
Shape.prototype.getHandlePositions = function() {
return null;
};
/**
* A shape that is a circle.
*
* @param {String} label name of this area.
* @param {int} [x] centre X.
* @param {int} [y] centre Y.
* @param {int} [radius] radius.
* @constructor
*/
function Circle(label, x, y, radius) {
x = x || 15;
y = y || 15;
Shape.call(this, label, x, y);
this.radius = radius || 15;
}
Circle.prototype = new Shape();
Circle.prototype.getType = function() {
return 'circle';
};
Circle.prototype.getCoordinates = function() {
return this.centre + ';' + Math.abs(this.radius);
};
Circle.prototype.makeSvg = function(svg) {
var svgEl = createSvgShapeGroup(svg, 'circle');
this.updateSvg(svgEl);
return svgEl;
};
Circle.prototype.updateSvg = function(svgEl) {
svgEl.childNodes[0].setAttribute('cx', this.centre.x);
svgEl.childNodes[0].setAttribute('cy', this.centre.y);
svgEl.childNodes[0].setAttribute('r', Math.abs(this.radius));
svgEl.childNodes[1].setAttribute('x', this.centre.x);
svgEl.childNodes[1].setAttribute('y', this.centre.y + 15);
svgEl.childNodes[1].textContent = this.label;
};
Circle.prototype.parse = function(coordinates, ratio) {
if (!coordinates.match(/^\d+(\.\d+)?,\d+(\.\d+)?;\d+(\.\d+)?$/)) {
return false;
}
var bits = coordinates.split(';');
this.centre = Point.parse(bits[0]);
this.centre.x = this.centre.x * parseFloat(ratio);
this.centre.y = this.centre.y * parseFloat(ratio);
this.radius = Math.round(bits[1]) * parseFloat(ratio);
return true;
};
Circle.prototype.move = function(dx, dy, maxX, maxY) {
this.centre.move(dx, dy);
if (this.centre.x < this.radius) {
this.centre.x = this.radius;
}
if (this.centre.x > maxX - this.radius) {
this.centre.x = maxX - this.radius;
}
if (this.centre.y < this.radius) {
this.centre.y = this.radius;
}
if (this.centre.y > maxY - this.radius) {
this.centre.y = maxY - this.radius;
}
};
Circle.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
this.radius += dx;
var limit = Math.min(this.centre.x, this.centre.y, maxX - this.centre.x, maxY - this.centre.y);
if (this.radius > limit) {
this.radius = limit;
}
if (this.radius < -limit) {
this.radius = -limit;
}
};
/**
* Update the properties of this shape after a sequence of edits.
*
* For example make sure the circle radius is positive, of the polygon centre is centred.
*/
Circle.prototype.normalizeShape = function() {
this.radius = Math.abs(this.radius);
};
Circle.prototype.makeSimilarRectangle = function() {
return new Rectangle(this.label,
this.centre.x - this.radius, this.centre.y - this.radius,
this.radius * 2, this.radius * 2);
};
Circle.prototype.makeSimilarPolygon = function() {
// We make a similar square, so if you go to and from Rectangle afterwards, it is loss-less.
return new Polygon(this.label, [
this.centre.offset(-this.radius, -this.radius), this.centre.offset(-this.radius, this.radius),
this.centre.offset(this.radius, this.radius), this.centre.offset(this.radius, -this.radius)]);
};
Circle.prototype.getHandlePositions = function() {
return {
moveHandle: this.centre,
editHandles: [this.centre.offset(this.radius, 0)]
};
};
/**
* A shape that is a rectangle.
*
* @param {String} label name of this area.
* @param {int} [x] top left X.
* @param {int} [y] top left Y.
* @param {int} [width] width.
* @param {int} [height] height.
* @constructor
*/
function Rectangle(label, x, y, width, height) {
Shape.call(this, label, x, y);
this.width = width || 30;
this.height = height || 30;
}
Rectangle.prototype = new Shape();
Rectangle.prototype.getType = function() {
return 'rectangle';
};
Rectangle.prototype.getCoordinates = function() {
return this.centre + ';' + this.width + ',' + this.height;
};
Rectangle.prototype.makeSvg = function(svg) {
var svgEl = createSvgShapeGroup(svg, 'rect');
this.updateSvg(svgEl);
return svgEl;
};
Rectangle.prototype.updateSvg = function(svgEl) {
if (this.width >= 0) {
svgEl.childNodes[0].setAttribute('x', this.centre.x);
svgEl.childNodes[0].setAttribute('width', this.width);
} else {
svgEl.childNodes[0].setAttribute('x', this.centre.x + this.width);
svgEl.childNodes[0].setAttribute('width', -this.width);
}
if (this.height >= 0) {
svgEl.childNodes[0].setAttribute('y', this.centre.y);
svgEl.childNodes[0].setAttribute('height', this.height);
} else {
svgEl.childNodes[0].setAttribute('y', this.centre.y + this.height);
svgEl.childNodes[0].setAttribute('height', -this.height);
}
svgEl.childNodes[1].setAttribute('x', this.centre.x + this.width / 2);
svgEl.childNodes[1].setAttribute('y', this.centre.y + this.height / 2 + 15);
svgEl.childNodes[1].textContent = this.label;
};
Rectangle.prototype.parse = function(coordinates, ratio) {
if (!coordinates.match(/^\d+(\.\d+)?,\d+(\.\d+)?;\d+(\.\d+)?,\d+(\.\d+)?$/)) {
return false;
}
var bits = coordinates.split(';');
this.centre = Point.parse(bits[0]);
this.centre.x = this.centre.x * parseFloat(ratio);
this.centre.y = this.centre.y * parseFloat(ratio);
var size = Point.parse(bits[1]);
this.width = size.x * parseFloat(ratio);
this.height = size.y * parseFloat(ratio);
return true;
};
Rectangle.prototype.move = function(dx, dy, maxX, maxY) {
this.centre.move(dx, dy);
if (this.centre.x < 0) {
this.centre.x = 0;
}
if (this.centre.x > maxX - this.width) {
this.centre.x = maxX - this.width;
}
if (this.centre.y < 0) {
this.centre.y = 0;
}
if (this.centre.y > maxY - this.height) {
this.centre.y = maxY - this.height;
}
};
Rectangle.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
this.width += dx;
this.height += dy;
if (this.width < -this.centre.x) {
this.width = -this.centre.x;
}
if (this.width > maxX - this.centre.x) {
this.width = maxX - this.centre.x;
}
if (this.height < -this.centre.y) {
this.height = -this.centre.y;
}
if (this.height > maxY - this.centre.y) {
this.height = maxY - this.centre.y;
}
};
/**
* Update the properties of this shape after a sequence of edits.
*
* For example make sure the circle radius is positive, of the polygon centre is centred.
*/
Rectangle.prototype.normalizeShape = function() {
if (this.width < 0) {
this.centre.x += this.width;
this.width = -this.width;
}
if (this.height < 0) {
this.centre.y += this.height;
this.height = -this.height;
}
};
Rectangle.prototype.makeSimilarCircle = function() {
return new Circle(this.label,
Math.round(this.centre.x + this.width / 2),
Math.round(this.centre.y + this.height / 2),
Math.round((this.width + this.height) / 4));
};
Rectangle.prototype.makeSimilarPolygon = function() {
return new Polygon(this.label, [
this.centre, this.centre.offset(0, this.height),
this.centre.offset(this.width, this.height), this.centre.offset(this.width, 0)]);
};
Rectangle.prototype.getHandlePositions = function() {
return {
moveHandle: this.centre.offset(this.width / 2, this.height / 2),
editHandles: [this.centre.offset(this.width, this.height)]
};
};
/**
* A shape that is a polygon.
*
* @param {String} label name of this area.
* @param {Point[]} [points] position of the vertices relative to (centreX, centreY).
* each object in the array should have two
* @constructor
*/
function Polygon(label, points) {
Shape.call(this, label, 0, 0);
this.points = points ? points.slice() : [new Point(10, 10), new Point(40, 10), new Point(10, 40)];
this.normalizeShape();
this.ratio = 1;
}
Polygon.prototype = new Shape();
Polygon.prototype.getType = function() {
return 'polygon';
};
Polygon.prototype.getCoordinates = function() {
var coordinates = '';
for (var i = 0; i < this.points.length; i++) {
coordinates += this.centre.offset(this.points[i]) + ';';
}
return coordinates.slice(0, coordinates.length - 1); // Strip off the last ';'.
};
Polygon.prototype.makeSvg = function(svg) {
var svgEl = createSvgShapeGroup(svg, 'polygon');
this.updateSvg(svgEl);
return svgEl;
};
Polygon.prototype.updateSvg = function(svgEl) {
svgEl.childNodes[0].setAttribute('points', this.getCoordinates().replace(/[,;]/g, ' '));
svgEl.childNodes[0].setAttribute('transform', 'scale(' + parseFloat(this.ratio) + ')');
svgEl.childNodes[1].setAttribute('x', this.centre.x);
svgEl.childNodes[1].setAttribute('y', this.centre.y + 15);
svgEl.childNodes[1].textContent = this.label;
};
Polygon.prototype.parse = function(coordinates, ratio) {
if (!coordinates.match(/^\d+(\.\d+)?,\d+(\.\d+)?(?:;\d+(\.\d+)?,\d+(\.\d+)?)*$/)) {
return false;
}
var bits = coordinates.split(';');
var points = [];
for (var i = 0; i < bits.length; i++) {
points.push(Point.parse(bits[i]));
}
this.points = points;
this.centre.x = 0;
this.centre.y = 0;
this.ratio = ratio;
this.normalizeShape();
return true;
};
Polygon.prototype.move = function(dx, dy, maxX, maxY) {
this.centre.move(dx, dy);
var bbXMin = maxX,
bbXMax = 0,
bbYMin = maxY,
bbYMax = 0;
// Computer centre.
for (var i = 0; i < this.points.length; i++) {
bbXMin = Math.min(bbXMin, this.points[i].x);
bbXMax = Math.max(bbXMax, this.points[i].x);
bbYMin = Math.min(bbYMin, this.points[i].y);
bbYMax = Math.max(bbYMax, this.points[i].y);
}
if (this.centre.x < -bbXMin) {
this.centre.x = -bbXMin;
}
if (this.centre.x > maxX - bbXMax) {
this.centre.x = maxX - bbXMax;
}
if (this.centre.y < -bbYMin) {
this.centre.y = -bbYMin;
}
if (this.centre.y > maxY - bbYMax) {
this.centre.y = maxY - bbYMax;
}
};
Polygon.prototype.edit = function(handleIndex, dx, dy, maxX, maxY) {
this.points[handleIndex].move(dx, dy);
if (this.points[handleIndex].x < -this.centre.x) {
this.points[handleIndex].x = -this.centre.x;
}
if (this.points[handleIndex].x > maxX - this.centre.x) {
this.points[handleIndex].x = maxX - this.centre.x;
}
if (this.points[handleIndex].y < -this.centre.y) {
this.points[handleIndex].y = -this.centre.y;
}
if (this.points[handleIndex].y > maxY - this.centre.y) {
this.points[handleIndex].y = maxY - this.centre.y;
}
};
/**
* Add a new point after the given point, with the same co-ordinates.
*
* This does not automatically normalise.
*
* @param {int} pointIndex the index of the vertex after which to insert this new one.
*/
Polygon.prototype.addNewPointAfter = function(pointIndex) {
this.points.splice(pointIndex, 0,
new Point(this.points[pointIndex].x, this.points[pointIndex].y));
};
Polygon.prototype.normalizeShape = function() {
var i,
x = 0,
y = 0;
if (this.points.length === 0) {
return;
}
// Computer centre.
for (i = 0; i < this.points.length; i++) {
x += this.points[i].x;
y += this.points[i].y;
}
x = Math.round(x / this.points.length);
y = Math.round(y / this.points.length);
if (x === 0 && y === 0) {
return;
}
for (i = 0; i < this.points.length; i++) {
this.points[i].move(-x, -y);
}
this.centre.move(x, y);
};
Polygon.prototype.makeSimilarCircle = function() {
return this.makeSimilarRectangle().makeSimilarCircle();
};
Polygon.prototype.makeSimilarRectangle = function() {
var p,
minX = 0,
maxX = 0,
minY = 0,
maxY = 0;
for (var i = 0; i < this.points.length; i++) {
p = this.points[i];
minX = Math.min(minX, p.x);
maxX = Math.max(maxX, p.x);
minY = Math.min(minY, p.y);
maxY = Math.max(maxY, p.y);
}
return new Rectangle(this.label,
this.centre.x + minX, this.centre.y + minY,
Math.max(maxX - minX, 10), Math.max(maxY - minY, 10));
};
Polygon.prototype.getHandlePositions = function() {
var editHandles = [];
for (var i = 0; i < this.points.length; i++) {
editHandles.push(this.points[i].offset(this.centre.x, this.centre.y));
}
this.centre.x = this.centre.x * parseFloat(this.ratio);
this.centre.y = this.centre.y * parseFloat(this.ratio);
return {
moveHandle: this.centre,
editHandles: editHandles
};
};
/**
* Not a shape (null object pattern).
*
* @param {String} label name of this area.
* @constructor
*/
function NullShape(label) {
Shape.call(this, label);
}
NullShape.prototype = new Shape();
NullShape.prototype.getType = function() {
return 'null';
};
NullShape.prototype.getCoordinates = function() {
return '';
};
NullShape.prototype.makeSvg = function(svg) {
void (svg);
return null;
};
NullShape.prototype.updateSvg = function(svgEl) {
void (svgEl);
};
NullShape.prototype.parse = function(coordinates) {
void (coordinates);
return false;
};
NullShape.prototype.makeSimilarCircle = function() {
return new Circle(this.label);
};
NullShape.prototype.makeSimilarRectangle = function() {
return new Rectangle(this.label);
};
NullShape.prototype.makeSimilarPolygon = function() {
return new Polygon(this.label);
};
/**
* Make a new SVG DOM element as a child of svg.
*
* @param {SVGElement} svg the parent node.
* @param {String} tagName the tag name.
* @return {SVGElement} the newly created node.
*/
function createSvgElement(svg, tagName) {
var svgEl = svg.ownerDocument.createElementNS('http://www.w3.org/2000/svg', tagName);
svg.appendChild(svgEl);
return svgEl;
}
/**
* Make a group SVG DOM elements containing a shape of the given type as first child,
* and a text label as the second child.
*
* @param {SVGElement} svg the parent node.
* @param {String} tagName the tag name.
* @return {SVGElement} the newly created g element.
*/
function createSvgShapeGroup(svg, tagName) {
var svgEl = createSvgElement(svg, 'g');
createSvgElement(svgEl, tagName).setAttribute('class', 'shape');
createSvgElement(svgEl, 'text').setAttribute('class', 'shapeLabel');
return svgEl;
}
/**
* @alias module:qtype_ddmarker/shapes
*/
return {
/**
* A point, with x and y coordinates.
*
* @param {int} x centre X.
* @param {int} y centre Y.
* @constructor
*/
Point: Point,
/**
* A point, with x and y coordinates.
*
* @param {int} x centre X.
* @param {int} y centre Y.
* @constructor
*/
Shape: Shape,
/**
* A shape that is a circle.
*
* @param {String} label name of this area.
* @param {int} [x] centre X.
* @param {int} [y] centre Y.
* @param {int} [radius] radius.
* @constructor
*/
Circle: Circle,
/**
* A shape that is a rectangle.
*
* @param {String} label name of this area.
* @param {int} [x] top left X.
* @param {int} [y] top left Y.
* @param {int} [width] width.
* @param {int} [height] height.
* @constructor
*/
Rectangle: Rectangle,
/**
* A shape that is a polygon.
*
* @param {String} label name of this area.
* @param {Point[]} [points] position of the vertices relative to (centreX, centreY).
* each object in the array should have two
* @constructor
*/
Polygon: Polygon,
/**
* Not a shape (null object pattern).
*
* @param {String} label name of this area.
* @constructor
*/
NullShape: NullShape,
/**
* Make a new SVG DOM element as a child of svg.
*
* @param {SVGElement} svg the parent node.
* @param {String} tagName the tag name.
* @return {SVGElement} the newly created node.
*/
createSvgElement: createSvgElement,
/**
* Make a shape of the given type.
*
* @param {String} shapeType
* @param {String} label
* @return {Shape} the requested shape.
*/
make: function(shapeType, label) {
switch (shapeType) {
case 'circle':
return new Circle(label);
case 'rectangle':
return new Rectangle(label);
case 'polygon':
return new Polygon(label);
default:
return new NullShape(label);
}
},
/**
* Make a shape of the given type that is similar to the shape of the original type.
*
* @param {String} shapeType the new type of shape to make
* @param {Shape} shape the shape to copy
* @return {Shape} the similar shape of a different type.
*/
getSimilar: function(shapeType, shape) {
if (shapeType === shape.getType()) {
return shape;
}
switch (shapeType) {
case 'circle':
return shape.makeSimilarCircle();
case 'rectangle':
return shape.makeSimilarRectangle();
case 'polygon':
return shape.makeSimilarPolygon();
default:
return new NullShape(shape.label);
}
}
};
});