= Vertex.utils.buildArrowHead( zA, zB, headlen, this.scale.x, this.scale.y );\n this.ctx.save();\n this.ctx.beginPath();\n var vertices = Vertex_1.Vertex.utils.buildArrowHead(zA, zB, headlen, this.scale.x, this.scale.y);\n this.ctx.moveTo(this.offset.x + zA.x * this.scale.x, this.offset.y + zA.y * this.scale.y);\n for (var i = 0; i < vertices.length; i++) {\n this.ctx.lineTo(this.offset.x + vertices[i].x, this.offset.y + vertices[i].y);\n }\n this.ctx.lineTo(this.offset.x + vertices[0].x, this.offset.y + vertices[0].y);\n this.ctx.lineWidth = lineWidth || 1;\n this._fillOrDraw(color);\n this.ctx.restore();\n };\n ;\n /**\n * Draw an image at the given position with the given size.
\n *
\n * Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.\n *\n * @method image\n * @param {Image} image - The image object to draw.\n * @param {Vertex} position - The position to draw the the upper left corner at.\n * @param {Vertex} size - The x/y-size to draw the image with.\n * @return {void}\n * @instance\n * @memberof drawutils\n **/\n drawutils.prototype.image = function (image, position, size) {\n if (!image.complete || !image.naturalWidth) {\n // Avoid drawing un-unloaded or broken images\n return;\n }\n this.ctx.save();\n // Note that there is a Safari bug with the 3 or 5 params variant.\n // Only the 9-param varaint works.\n this.ctx.drawImage(image, 0, 0, image.naturalWidth - 1, // There is this horrible Safari bug (fixed in newer versions)\n image.naturalHeight - 1, // To avoid errors substract 1 here.\n this.offset.x + position.x * this.scale.x, this.offset.y + position.y * this.scale.y, size.x * this.scale.x, size.y * this.scale.y);\n this.ctx.restore();\n };\n ;\n /**\n * Draw a rectangle.\n *\n * @param {Vertex} position - The upper left corner of the rectangle.\n * @param {number} width - The width of the rectangle.\n * @param {number} height - The height of the rectangle.\n * @param {string} color - The color to use.\n * @param {number=1} lineWidth - (optional) The line with to use (default is 1).\n **/\n drawutils.prototype.rect = function (position, width, height, color, lineWidth) {\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.moveTo(this.offset.x + position.x * this.scale.x, this.offset.y + position.y * this.scale.y);\n this.ctx.lineTo(this.offset.x + (position.x + width) * this.scale.x, this.offset.y + position.y * this.scale.y);\n this.ctx.lineTo(this.offset.x + (position.x + width) * this.scale.x, this.offset.y + (position.y + height) * this.scale.y);\n this.ctx.lineTo(this.offset.x + position.x * this.scale.x, this.offset.y + (position.y + height) * this.scale.y);\n // this.ctx.lineTo( this.offset.x+position.x*this.scale.x, this.offset.y+position.y*this.scale.y );\n this.ctx.closePath();\n this.ctx.lineWidth = lineWidth || 1;\n this._fillOrDraw(color);\n this.ctx.restore();\n };\n ;\n // +---------------------------------------------------------------------------------\n // | This is the final helper function for drawing and filling stuff. It is not\n // | intended to be used from the outside.\n // |\n // | When in draw mode it draws the current shape.\n // | When in fill mode it fills the current shape.\n // |\n // | This function is usually only called internally.\n // |\n // | @param color A stroke/fill color to use.\n // +-------------------------------\n // TODO: convert this to a STATIC function.\n drawutils.prototype._fillOrDraw = function (color) {\n if (this.fillShapes) {\n this.ctx.fillStyle = color;\n this.ctx.fill();\n }\n else {\n this.ctx.strokeStyle = color;\n this.ctx.stroke();\n }\n };\n ;\n /**\n * Draw the given (cubic) bézier curve.\n *\n * @method cubicBezier\n * @param {Vertex} startPoint - The start point of the cubic Bézier curve\n * @param {Vertex} endPoint - The end point the cubic Bézier curve.\n * @param {Vertex} startControlPoint - The start control point the cubic Bézier curve.\n * @param {Vertex} endControlPoint - The end control point the cubic Bézier curve.\n * @param {string} color - The CSS color to draw the curve with.\n * @param {number} lineWidth - (optional) The line width to use.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.cubicBezier = function (startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth) {\n if (startPoint instanceof CubicBezierCurve_1.CubicBezierCurve) {\n this.cubicBezier(startPoint.startPoint, startPoint.endPoint, startPoint.startControlPoint, startPoint.endControlPoint, color, lineWidth);\n return;\n }\n // Draw curve\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.moveTo(this.offset.x + startPoint.x * this.scale.x, this.offset.y + startPoint.y * this.scale.y);\n this.ctx.bezierCurveTo(this.offset.x + startControlPoint.x * this.scale.x, this.offset.y + startControlPoint.y * this.scale.y, this.offset.x + endControlPoint.x * this.scale.x, this.offset.y + endControlPoint.y * this.scale.y, this.offset.x + endPoint.x * this.scale.x, this.offset.y + endPoint.y * this.scale.y);\n //this.ctx.closePath();\n this.ctx.lineWidth = lineWidth || 2;\n this._fillOrDraw(color);\n this.ctx.restore();\n };\n ;\n /**\n * Draw the given (quadratic) bézier curve.\n *\n * @method quadraticBezier\n * @param {Vertex} startPoint - The start point of the cubic Bézier curve\n * @param {Vertex} controlPoint - The control point the cubic Bézier curve.\n * @param {Vertex} endPoint - The end control point the cubic Bézier curve.\n * @param {string} color - The CSS color to draw the curve with.\n * @param {number|string} lineWidth - (optional) The line width to use.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.quadraticBezier = function (startPoint, controlPoint, endPoint, color, lineWidth) {\n // Draw curve\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.moveTo(this.offset.x + startPoint.x * this.scale.x, this.offset.y + startPoint.y * this.scale.y);\n this.ctx.quadraticCurveTo(this.offset.x + controlPoint.x * this.scale.x, this.offset.y + controlPoint.y * this.scale.y, this.offset.x + endPoint.x * this.scale.x, this.offset.y + endPoint.y * this.scale.y);\n this.ctx.lineWidth = lineWidth || 2;\n this._fillOrDraw(color);\n this.ctx.restore();\n };\n ;\n /**\n * Draw the given (cubic) Bézier path.\n *\n * The given path must be an array with n*3+1 vertices, where n is the number of\n * curves in the path:\n * [ point1, point1_startControl, point2_endControl, point2, point2_startControl, point3_endControl, point3, ... pointN_endControl, pointN ]
\n *\n * @method cubicBezierPath\n * @param {Vertex[]} path - The cubic bezier path as described above.\n * @param {string} color - The CSS colot to draw the path with.\n * @param {number=1} lineWidth - (optional) The line width to use.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.cubicBezierPath = function (path, color, lineWidth) {\n if (!path || path.length == 0)\n return;\n // Draw curve\n this.ctx.save();\n this.ctx.beginPath();\n var curve, startPoint, endPoint, startControlPoint, endControlPoint;\n this.ctx.moveTo(this.offset.x + path[0].x * this.scale.x, this.offset.y + path[0].y * this.scale.y);\n for (var i = 1; i < path.length; i += 3) {\n startControlPoint = path[i];\n endControlPoint = path[i + 1];\n endPoint = path[i + 2];\n this.ctx.bezierCurveTo(this.offset.x + startControlPoint.x * this.scale.x, this.offset.y + startControlPoint.y * this.scale.y, this.offset.x + endControlPoint.x * this.scale.x, this.offset.y + endControlPoint.y * this.scale.y, this.offset.x + endPoint.x * this.scale.x, this.offset.y + endPoint.y * this.scale.y);\n }\n this.ctx.closePath();\n this.ctx.lineWidth = lineWidth || 1;\n this._fillOrDraw(color);\n this.ctx.restore();\n };\n ;\n /**\n * Draw the given handle and handle point (used to draw interactive Bézier curves).\n *\n * The colors for this are fixed and cannot be specified.\n *\n * @method handle\n * @param {Vertex} startPoint - The start of the handle.\n * @param {Vertex} endPoint - The end point of the handle.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.handle = function (startPoint, endPoint) {\n // Draw handles\n // (No need to save and restore here)\n this.point(startPoint, 'rgb(0,32,192)');\n this.square(endPoint, 5, 'rgba(0,128,192,0.5)');\n };\n ;\n /**\n * Draw a handle line (with a light grey).\n *\n * @method handleLine\n * @param {Vertex} startPoint - The start point to draw the handle at.\n * @param {Vertex} endPoint - The end point to draw the handle at.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.handleLine = function (startPoint, endPoint) {\n // Draw handle lines\n this.line(startPoint, endPoint, 'rgb(192,192,192)');\n };\n ;\n /**\n * Draw a 1x1 dot with the specified (CSS-) color.\n *\n * @method dot\n * @param {Vertex} p - The position to draw the dot at.\n * @param {string} color - The CSS color to draw the dot with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.dot = function (p, color) {\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.moveTo(Math.round(this.offset.x + this.scale.x * p.x), Math.round(this.offset.y + this.scale.y * p.y));\n this.ctx.lineTo(Math.round(this.offset.x + this.scale.x * p.x + 1), Math.round(this.offset.y + this.scale.y * p.y + 1));\n this.ctx.closePath();\n this.ctx.lineWidth = 1;\n this._fillOrDraw(color);\n this.ctx.restore();\n };\n ;\n /**\n * Draw the given point with the specified (CSS-) color and radius 3.\n *\n * @method point\n * @param {Vertex} p - The position to draw the point at.\n * @param {string} color - The CSS color to draw the point with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.point = function (p, color) {\n var radius = 3;\n this.ctx.beginPath();\n this.ctx.arc(this.offset.x + p.x * this.scale.x, this.offset.y + p.y * this.scale.y, radius, 0, 2 * Math.PI, false);\n this.ctx.closePath();\n this.ctx.lineWidth = 1;\n this._fillOrDraw(color);\n };\n ;\n /**\n * Draw a circle with the specified (CSS-) color and radius.
\n *
\n * Note that if the x- and y- scales are different the result will be an ellipse rather than a circle.\n *\n * @method circle\n * @param {Vertex} center - The center of the circle.\n * @param {number} radius - The radius of the circle.\n * @param {string} color - The CSS color to draw the circle with.\n * @param {number} lineWidth - The line width (optional, default=1).\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.circle = function (center, radius, color, lineWidth) {\n this.ctx.beginPath();\n this.ctx.ellipse(this.offset.x + center.x * this.scale.x, this.offset.y + center.y * this.scale.y, radius * this.scale.x, radius * this.scale.y, 0.0, 0.0, Math.PI * 2);\n this.ctx.closePath();\n this.ctx.lineWidth = lineWidth || 1;\n this._fillOrDraw(color);\n };\n ;\n /**\n * Draw a circular arc (section of a circle) with the given CSS color.\n *\n * @method circleArc\n * @param {Vertex} center - The center of the circle.\n * @param {number} radius - The radius of the circle.\n * @param {number} startAngle - The angle to start at.\n * @param {number} endAngle - The angle to end at.\n * @param {string=#000000} color - The CSS color to draw the circle with.\n * @param {number=1} lineWidth - The line width to use\n // * @param {boolean=false} options.asSegment - If `true` then no beginPath and no draw will be applied (as part of larger path).\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.circleArc = function (center, radius, startAngle, endAngle, color, lineWidth, options) {\n if (!options || !options.asSegment) {\n this.ctx.beginPath();\n }\n this.ctx.ellipse(this.offset.x + center.x * this.scale.x, this.offset.y + center.y * this.scale.y, radius * this.scale.x, radius * this.scale.y, 0.0, startAngle, endAngle, false);\n if (!options || !options.asSegment) {\n // this.ctx.closePath();\n this.ctx.lineWidth = lineWidth || 1;\n this._fillOrDraw(color || '#000000');\n }\n };\n ;\n /**\n * Draw an ellipse with the specified (CSS-) color and thw two radii.\n *\n * @method ellipse\n * @param {Vertex} center - The center of the ellipse.\n * @param {number} radiusX - The radius of the ellipse.\n * @param {number} radiusY - The radius of the ellipse.\n * @param {string} color - The CSS color to draw the ellipse with.\n * @param {number} lineWidth=1 - An optional line width param (default is 1).\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.ellipse = function (center, radiusX, radiusY, color, lineWidth) {\n this.ctx.beginPath();\n this.ctx.ellipse(this.offset.x + center.x * this.scale.x, this.offset.y + center.y * this.scale.y, radiusX * this.scale.x, radiusY * this.scale.y, 0.0, 0.0, Math.PI * 2);\n this.ctx.closePath();\n this.ctx.lineWidth = lineWidth || 1;\n this._fillOrDraw(color);\n };\n ;\n /**\n * Draw square at the given center, size and with the specified (CSS-) color.
\n *
\n * Note that if the x-scale and the y-scale are different the result will be a rectangle rather than a square.\n *\n * @method square\n * @param {Vertex} center - The center of the square.\n * @param {Vertex} size - The size of the square.\n * @param {string} color - The CSS color to draw the square with.\n * @param {number} lineWidth - The line with to use (optional, default is 1).\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.square = function (center, size, color, lineWidth) {\n this.ctx.beginPath();\n this.ctx.rect(this.offset.x + (center.x - size / 2.0) * this.scale.x, this.offset.y + (center.y - size / 2.0) * this.scale.y, size * this.scale.x, size * this.scale.y);\n this.ctx.closePath();\n this.ctx.lineWidth = lineWidth || 1;\n this._fillOrDraw(color);\n };\n ;\n /**\n * Draw a grid of horizontal and vertical lines with the given (CSS-) color.\n *\n * @method grid\n * @param {Vertex} center - The center of the grid.\n * @param {number} width - The total width of the grid (width/2 each to the left and to the right).\n * @param {number} height - The total height of the grid (height/2 each to the top and to the bottom).\n * @param {number} sizeX - The horizontal grid size.\n * @param {number} sizeY - The vertical grid size.\n * @param {string} color - The CSS color to draw the grid with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.grid = function (center, width, height, sizeX, sizeY, color) {\n this.ctx.beginPath();\n var yMin = -Math.ceil((height * 0.5) / sizeY) * sizeY;\n var yMax = height / 2;\n for (var x = -Math.ceil((width * 0.5) / sizeX) * sizeX; x < width / 2; x += sizeX) {\n this.ctx.moveTo(this.offset.x + (center.x + x) * this.scale.x, this.offset.y + (center.y + yMin) * this.scale.y);\n this.ctx.lineTo(this.offset.x + (center.x + x) * this.scale.x, this.offset.y + (center.y + yMax) * this.scale.y);\n }\n var xMin = -Math.ceil((width * 0.5) / sizeX) * sizeX; // -Math.ceil((height*0.5)/sizeY)*sizeY;\n var xMax = width / 2; // height/2;\n for (var y = -Math.ceil((height * 0.5) / sizeY) * sizeY; y < height / 2; y += sizeY) {\n this.ctx.moveTo(this.offset.x + (center.x + xMin) * this.scale.x - 4, this.offset.y + (center.y + y) * this.scale.y);\n this.ctx.lineTo(this.offset.x + (center.x + xMax) * this.scale.x + 4, this.offset.y + (center.y + y) * this.scale.y);\n }\n this.ctx.strokeStyle = color;\n this.ctx.lineWidth = 1.0;\n this.ctx.stroke();\n this.ctx.closePath();\n };\n ;\n /**\n * Draw a raster of crosshairs in the given grid.
\n *\n * This works analogue to the grid() function\n *\n * @method raster\n * @param {Vertex} center - The center of the raster.\n * @param {number} width - The total width of the raster (width/2 each to the left and to the right).\n * @param {number} height - The total height of the raster (height/2 each to the top and to the bottom).\n * @param {number} sizeX - The horizontal raster size.\n * @param {number} sizeY - The vertical raster size.\n * @param {string} color - The CSS color to draw the raster with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.raster = function (center, width, height, sizeX, sizeY, color) {\n this.ctx.save();\n this.ctx.beginPath();\n var cx = 0, cy = 0;\n for (var x = -Math.ceil((width * 0.5) / sizeX) * sizeX; x < width / 2; x += sizeX) {\n cx++;\n for (var y = -Math.ceil((height * 0.5) / sizeY) * sizeY; y < height / 2; y += sizeY) {\n if (cx == 1)\n cy++;\n // Draw a crosshair\n this.ctx.moveTo(this.offset.x + (center.x + x) * this.scale.x - 4, this.offset.y + (center.y + y) * this.scale.y);\n this.ctx.lineTo(this.offset.x + (center.x + x) * this.scale.x + 4, this.offset.y + (center.y + y) * this.scale.y);\n this.ctx.moveTo(this.offset.x + (center.x + x) * this.scale.x, this.offset.y + (center.y + y) * this.scale.y - 4);\n this.ctx.lineTo(this.offset.x + (center.x + x) * this.scale.x, this.offset.y + (center.y + y) * this.scale.y + 4);\n }\n }\n this.ctx.strokeStyle = color;\n this.ctx.lineWidth = 1.0;\n this.ctx.stroke();\n this.ctx.closePath();\n this.ctx.restore();\n };\n ;\n /**\n * Draw a diamond handle (square rotated by 45°) with the given CSS color.\n *\n * It is an inherent feature of the handle functions that the drawn elements are not scaled and not\n * distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn\n * as even shaped diamonds.\n *\n * @method diamondHandle\n * @param {Vertex} center - The center of the diamond.\n * @param {Vertex} size - The x/y-size of the diamond.\n * @param {string} color - The CSS color to draw the diamond with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.diamondHandle = function (center, size, color) {\n this.ctx.beginPath();\n this.ctx.moveTo(this.offset.x + center.x * this.scale.x - size / 2.0, this.offset.y + center.y * this.scale.y);\n this.ctx.lineTo(this.offset.x + center.x * this.scale.x, this.offset.y + center.y * this.scale.y - size / 2.0);\n this.ctx.lineTo(this.offset.x + center.x * this.scale.x + size / 2.0, this.offset.y + center.y * this.scale.y);\n this.ctx.lineTo(this.offset.x + center.x * this.scale.x, this.offset.y + center.y * this.scale.y + size / 2.0);\n this.ctx.closePath();\n this.ctx.lineWidth = 1;\n this._fillOrDraw(color);\n };\n ;\n /**\n * Draw a square handle with the given CSS color.
\n *
\n * It is an inherent feature of the handle functions that the drawn elements are not scaled and not\n * distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn\n * as even shaped squares.\n *\n * @method squareHandle\n * @param {Vertex} center - The center of the square.\n * @param {Vertex} size - The x/y-size of the square.\n * @param {string} color - The CSS color to draw the square with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.squareHandle = function (center, size, color) {\n this.ctx.beginPath();\n this.ctx.rect(this.offset.x + center.x * this.scale.x - size / 2.0, this.offset.y + center.y * this.scale.y - size / 2.0, size, size);\n this.ctx.closePath();\n this.ctx.lineWidth = 1;\n this._fillOrDraw(color);\n };\n ;\n /**\n * Draw a circle handle with the given CSS color.
\n *
\n * It is an inherent feature of the handle functions that the drawn elements are not scaled and not\n * distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn\n * as even shaped circles.\n *\n * @method circleHandle\n * @param {Vertex} center - The center of the circle.\n * @param {number} radius - The radius of the circle.\n * @param {string} color - The CSS color to draw the circle with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.circleHandle = function (center, radius, color) {\n radius = radius || 3;\n this.ctx.beginPath();\n this.ctx.arc(this.offset.x + center.x * this.scale.x, this.offset.y + center.y * this.scale.y, radius, 0, 2 * Math.PI, false);\n this.ctx.closePath();\n this.ctx.lineWidth = 1;\n this._fillOrDraw(color);\n };\n ;\n /**\n * Draw a crosshair with given radius and color at the given position.
\n *
\n * Note that the crosshair radius will not be affected by scaling.\n *\n * @method crosshair\n * @param {XYCoords} center - The center of the crosshair.\n * @param {number} radius - The radius of the crosshair.\n * @param {string} color - The CSS color to draw the crosshair with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.crosshair = function (center, radius, color) {\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.moveTo(this.offset.x + center.x * this.scale.x - radius, this.offset.y + center.y * this.scale.y);\n this.ctx.lineTo(this.offset.x + center.x * this.scale.x + radius, this.offset.y + center.y * this.scale.y);\n this.ctx.moveTo(this.offset.x + center.x * this.scale.x, this.offset.y + center.y * this.scale.y - radius);\n this.ctx.lineTo(this.offset.x + center.x * this.scale.x, this.offset.y + center.y * this.scale.y + radius);\n this.ctx.strokeStyle = color;\n this.ctx.lineWidth = 0.5;\n this.ctx.stroke();\n this.ctx.closePath();\n this.ctx.restore();\n };\n ;\n /**\n * Draw a polygon.\n *\n * @method polygon\n * @param {Polygon} polygon - The polygon to draw.\n * @param {string} color - The CSS color to draw the polygon with.\n * @param {string} lineWidth - The line width to use.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.polygon = function (polygon, color, lineWidth) {\n this.polyline(polygon.vertices, polygon.isOpen, color, lineWidth);\n };\n ;\n /**\n * Draw a polygon line (alternative function to the polygon).\n *\n * @method polyline\n * @param {Vertex[]} vertices - The polygon vertices to draw.\n * @param {boolan} isOpen - If true the polyline will not be closed at its end.\n * @param {string} color - The CSS color to draw the polygon with.\n * @param {number} lineWidth - The line width (default is 1.0);\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.polyline = function (vertices, isOpen, color, lineWidth) {\n if (vertices.length <= 1)\n return;\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.lineWidth = lineWidth || 1.0;\n this.ctx.moveTo(this.offset.x + vertices[0].x * this.scale.x, this.offset.y + vertices[0].y * this.scale.y);\n for (var i = 0; i < vertices.length; i++) {\n this.ctx.lineTo(this.offset.x + vertices[i].x * this.scale.x, this.offset.y + vertices[i].y * this.scale.y);\n }\n if (!isOpen) // && vertices.length > 2 )\n this.ctx.closePath();\n this._fillOrDraw(color);\n this.ctx.closePath();\n this.ctx.setLineDash([]);\n this.ctx.restore();\n };\n ;\n drawutils.prototype.text = function (text, x, y, options) {\n options = options || {};\n this.ctx.save();\n x = this.offset.x + x * this.scale.x;\n y = this.offset.y + y * this.scale.y;\n var color = options.color || 'black';\n if (this.fillShapes) {\n this.ctx.fillStyle = color;\n this.ctx.fillText(text, x, y);\n }\n else {\n this.ctx.strokeStyle = color;\n this.ctx.strokeText(text, x, y);\n }\n this.ctx.restore();\n };\n ;\n /**\n * Draw a non-scaling text label at the given position.\n *\n * Note that these are absolute label positions, they are not affected by offset or scale.\n *\n * @method label\n * @param {string} text - The text to draw.\n * @param {number} x - The x-position to draw the text at.\n * @param {number} y - The y-position to draw the text at.\n * @param {number=} rotation - The (optional) rotation in radians (default=0).\n * @param {string=} color - The color to render the text with (default=black).\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutils.prototype.label = function (text, x, y, rotation, color) {\n this.ctx.save();\n this.ctx.translate(x, y);\n if (typeof rotation != 'undefined')\n this.ctx.rotate(rotation);\n this.ctx.fillStyle = color || 'black';\n if (this.fillShapes) {\n this.ctx.fillText(text, 0, 0);\n }\n else {\n this.ctx.strokeText(text, 0, 0);\n }\n this.ctx.restore();\n };\n ;\n /**\n * Due to gl compatibility there is a generic 'clear' function required\n * to avoid accessing the context object itself directly.\n *\n * This function just fills the whole canvas with a single color.\n *\n * @param {string} color - The color to clear with.\n **/\n drawutils.prototype.clear = function (color) {\n this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);\n this.ctx.fillStyle = color;\n this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);\n };\n ;\n return drawutils;\n}());\nexports.drawutils = drawutils;\n//# sourceMappingURL=draw.js.map","\"use strict\";\n/**\n * @author Ikaros Kappler\n * @date 2019-09-18\n * @modified 2019-10-03 Added the beginDrawCycle hook.\n * @modified 2020-03-25 Ported stub to Typescript.\n * @modified 2020-10-15 Re-added the text() function.\n * @modified 2021-01-24 Added the `setCurrentId` function.\n * @version 0.0.5\n **/\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.drawutilsgl = void 0;\nvar Vertex_1 = require(\"./Vertex\");\n/**\n * @classdesc A wrapper class for basic drawing operations. This is the WebGL\n * implementation whih sould work with shaders.\n *\n * @requires CubicBzierCurvce\n * @requires Polygon\n * @requires SVGSerializable\n * @requires Vertex\n * @requires XYCoords\n */\nvar drawutilsgl = /** @class */ (function () {\n /**\n * The constructor.\n *\n * @constructor\n * @name drawutils\n * @param {WebGLRenderingContext} context - The drawing context.\n * @param {boolean} fillShaped - Indicates if the constructed drawutils should fill all drawn shapes (if possible).\n **/\n function drawutilsgl(context, fillShapes) {\n this.gl = context;\n this.offset = new Vertex_1.Vertex(0, 0);\n this.scale = new Vertex_1.Vertex(1, 1);\n this.fillShapes = fillShapes;\n this._zindex = 0.0;\n if (context == null || typeof context === 'undefined')\n return;\n this.glutils = new GLU(context);\n // PROBLEM: CANNOT USE MULTIPLE SHADER PROGRAM INSTANCES ON THE SAME CONTEXT!\n // SOLUTION: USE SHARED SHADER PROGRAM!!! ... somehow ...\n // This needs to be considered in the overlying component; both draw-instances need to\n // share their gl context.\n // That's what the copyInstace(boolean) method is good for.\n this._vertShader = this.glutils.compileShader(drawutilsgl.vertCode, this.gl.VERTEX_SHADER);\n this._fragShader = this.glutils.compileShader(drawutilsgl.fragCode, this.gl.FRAGMENT_SHADER);\n this._program = this.glutils.makeProgram(this._vertShader, this._fragShader);\n // Create an empty buffer object\n this.vertex_buffer = this.gl.createBuffer();\n // Bind appropriate array buffer to it\n // this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertex_buffer);\n console.log('gl initialized');\n }\n ;\n drawutilsgl.prototype._x2rel = function (x) { return (this.scale.x * x + this.offset.x) / this.gl.canvas.width * 2.0 - 1.0; };\n ;\n drawutilsgl.prototype._y2rel = function (y) { return (this.offset.y - this.scale.y * y) / this.gl.canvas.height * 2.0 - 1.0; };\n ;\n /**\n * Creates a 'shallow' (non deep) copy of this instance. This implies\n * that under the hood the same gl context and gl program will be used.\n */\n drawutilsgl.prototype.copyInstance = function (fillShapes) {\n var copy = new drawutilsgl(null, fillShapes);\n copy.gl = this.gl;\n copy.glutils = this.glutils;\n copy._vertShader = this._vertShader;\n copy._fragShader = this._fragShader;\n copy._program = this._program;\n return copy;\n };\n ;\n /**\n * Called before each draw cycle.\n * @param {number} renderTime\n **/\n drawutilsgl.prototype.beginDrawCycle = function (renderTime) {\n this._zindex = 0.0;\n this.renderTime = renderTime;\n };\n ;\n /**\n * This method shouled be called each time the currently drawn `Drawable` changes.\n * It is used by some libraries for identifying elemente on re-renders.\n *\n * @name setCurrentId\n * @method\n * @param {UID} uid - A UID identifying the currently drawn element(s).es.\n **/\n drawutilsgl.prototype.setCurrentId = function (uid) {\n // NOOP\n this.curId = uid;\n };\n ;\n /**\n * This method shouled be called each time the currently drawn `Drawable` changes.\n * Determine the class name for further usage here.\n *\n * @name setCurrentClassName\n * @method\n * @param {string} className - A class name for further custom use cases.\n **/\n drawutilsgl.prototype.setCurrentClassName = function (className) {\n // NOOP\n };\n ;\n /**\n * Draw the line between the given two points with the specified (CSS-) color.\n *\n * @method line\n * @param {Vertex} zA - The start point of the line.\n * @param {Vertex} zB - The end point of the line.\n * @param {string} color - Any valid CSS color string.\n * @return {void}\n * @instance\n * @memberof drawutils\n **/\n drawutilsgl.prototype.line = function (zA, zB, color) {\n var vertices = new Float32Array(6);\n vertices[0] = this._x2rel(zA.x);\n vertices[1] = this._y2rel(zA.y);\n vertices[2] = this._zindex;\n vertices[3] = this._x2rel(zB.x);\n vertices[4] = this._y2rel(zB.y);\n vertices[5] = this._zindex;\n this._zindex += 0.001;\n // Create an empty buffer object\n // const vertex_buffer = this.gl.createBuffer();\n // Bind appropriate array buffer to it\n this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertex_buffer);\n // Pass the vertex data to the buffer\n this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);\n // Bind vertex buffer object\n // this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertex_buffer);\n // Get the attribute location\n var coord = this.gl.getAttribLocation(this._program, \"position\");\n // Point an attribute to the currently bound VBO\n this.gl.vertexAttribPointer(coord, 3, this.gl.FLOAT, false, 0, 0);\n // Enable the attribute\n this.gl.enableVertexAttribArray(coord);\n // Unbind the buffer?\n //this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n // Set the view port\n this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);\n var uRotationVector = this.gl.getUniformLocation(this._program, \"uRotationVector\");\n // let radians = currentAngle * Math.PI / 180.0;\n var currentRotation = [0.0, 1.0];\n //currentRotation[0] = Math.sin(radians);\n //currentRotation[1] = Math.cos(radians);\n this.gl.uniform2fv(uRotationVector, currentRotation);\n this.gl.lineWidth(5);\n // Draw the line\n this.gl.drawArrays(this.gl.LINES, 0, vertices.length / 3);\n // POINTS, LINE_STRIP, LINE_LOOP, LINES,\n // TRIANGLE_STRIP,TRIANGLE_FAN, TRIANGLES\n };\n ;\n /**\n * Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.\n *\n * @method arrow\n * @param {Vertex} zA - The start point of the arrow-line.\n * @param {Vertex} zB - The end point of the arrow-line.\n * @param {string} color - Any valid CSS color string.\n * @return {void}\n * @instance\n * @memberof drawutils\n **/\n drawutilsgl.prototype.arrow = function (zA, zB, color) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw an image at the given position with the given size.
\n *
\n * Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.\n *\n * @method image\n * @param {Image} image - The image object to draw.\n * @param {Vertex} position - The position to draw the the upper left corner at.\n * @param {Vertex} size - The x/y-size to draw the image with.\n * @return {void}\n * @instance\n * @memberof drawutils\n **/\n drawutilsgl.prototype.image = function (image, position, size) {\n // NOT YET IMPLEMENTED\n };\n ;\n // +---------------------------------------------------------------------------------\n // | This is the final helper function for drawing and filling stuff. It is not\n // | intended to be used from the outside.\n // |\n // | When in draw mode it draws the current shape.\n // | When in fill mode it fills the current shape.\n // |\n // | This function is usually only called internally.\n // |\n // | @param color A stroke/fill color to use.\n // +-------------------------------\n drawutilsgl.prototype._fillOrDraw = function (color) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw the given (cubic) bézier curve.\n *\n * @method cubicBezier\n * @param {Vertex} startPoint - The start point of the cubic Bézier curve\n * @param {Vertex} endPoint - The end point the cubic Bézier curve.\n * @param {Vertex} startControlPoint - The start control point the cubic Bézier curve.\n * @param {Vertex} endControlPoint - The end control point the cubic Bézier curve.\n * @param {string} color - The CSS color to draw the curve with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.cubicBezier = function (startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw the given (cubic) Bézier path.\n *\n * The given path must be an array with n*3+1 vertices, where n is the number of\n * curves in the path:\n * [ point1, point1_startControl, point2_endControl, point2, point2_startControl, point3_endControl, point3, ... pointN_endControl, pointN ]
\n *\n * @method cubicBezierPath\n * @param {Vertex[]} path - The cubic bezier path as described above.\n * @param {string} color - The CSS colot to draw the path with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.cubicBezierPath = function (path, color, lineWidth) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw the given handle and handle point (used to draw interactive Bézier curves).\n *\n * The colors for this are fixed and cannot be specified.\n *\n * @method handle\n * @param {Vertex} startPoint - The start of the handle.\n * @param {Vertex} endPoint - The end point of the handle.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.handle = function (startPoint, endPoint) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a handle line (with a light grey).\n *\n * @method handleLine\n * @param {Vertex} startPoint - The start point to draw the handle at.\n * @param {Vertex} endPoint - The end point to draw the handle at.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.handleLine = function (startPoint, endPoint) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a 1x1 dot with the specified (CSS-) color.\n *\n * @method dot\n * @param {Vertex} p - The position to draw the dot at.\n * @param {string} color - The CSS color to draw the dot with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.dot = function (p, color) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw the given point with the specified (CSS-) color and radius 3.\n *\n * @method point\n * @param {Vertex} p - The position to draw the point at.\n * @param {string} color - The CSS color to draw the point with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.point = function (p, color) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a circle with the specified (CSS-) color and radius.
\n *
\n * Note that if the x- and y- scales are different the result will be an ellipse rather than a circle.\n *\n * @method circle\n * @param {Vertex} center - The center of the circle.\n * @param {number} radius - The radius of the circle.\n * @param {string} color - The CSS color to draw the circle with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.circle = function (center, radius, color, lineWidth) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a circular arc (section of a circle) with the given CSS color.\n *\n * @method circleArc\n * @param {Vertex} center - The center of the circle.\n * @param {number} radius - The radius of the circle.\n * @param {number} startAngle - The angle to start at.\n * @param {number} endAngle - The angle to end at.\n * @param {string} color - The CSS color to draw the circle with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.circleArc = function (center, radius, startAngle, endAngle, color, lineWidth) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw an ellipse with the specified (CSS-) color and thw two radii.\n *\n * @method ellipse\n * @param {Vertex} center - The center of the ellipse.\n * @param {number} radiusX - The radius of the ellipse.\n * @param {number} radiusY - The radius of the ellipse.\n * @param {string} color - The CSS color to draw the ellipse with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.ellipse = function (center, radiusX, radiusY, color, lineWidth) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw square at the given center, size and with the specified (CSS-) color.
\n *
\n * Note that if the x-scale and the y-scale are different the result will be a rectangle rather than a square.\n *\n * @method square\n * @param {Vertex} center - The center of the square.\n * @param {Vertex} size - The size of the square.\n * @param {string} color - The CSS color to draw the square with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.square = function (center, size, color, lineWidth) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a grid of horizontal and vertical lines with the given (CSS-) color.\n *\n * @method grid\n * @param {Vertex} center - The center of the grid.\n * @param {number} width - The total width of the grid (width/2 each to the left and to the right).\n * @param {number} height - The total height of the grid (height/2 each to the top and to the bottom).\n * @param {number} sizeX - The horizontal grid size.\n * @param {number} sizeY - The vertical grid size.\n * @param {string} color - The CSS color to draw the grid with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.grid = function (center, width, height, sizeX, sizeY, color) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a raster of crosshairs in the given grid.
\n *\n * This works analogue to the grid() function\n *\n * @method raster\n * @param {Vertex} center - The center of the raster.\n * @param {number} width - The total width of the raster (width/2 each to the left and to the right).\n * @param {number} height - The total height of the raster (height/2 each to the top and to the bottom).\n * @param {number} sizeX - The horizontal raster size.\n * @param {number} sizeY - The vertical raster size.\n * @param {string} color - The CSS color to draw the raster with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.raster = function (center, width, height, sizeX, sizeY, color) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a diamond handle (square rotated by 45°) with the given CSS color.\n *\n * It is an inherent featur of the handle functions that the drawn elements are not scaled and not\n * distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn\n * as even shaped diamonds.\n *\n * @method diamondHandle\n * @param {Vertex} center - The center of the diamond.\n * @param {Vertex} size - The x/y-size of the diamond.\n * @param {string} color - The CSS color to draw the diamond with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.diamondHandle = function (center, size, color) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a square handle with the given CSS color.
\n *
\n * It is an inherent featur of the handle functions that the drawn elements are not scaled and not\n * distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn\n * as even shaped squares.\n *\n * @method squareHandle\n * @param {Vertex} center - The center of the square.\n * @param {Vertex} size - The x/y-size of the square.\n * @param {string} color - The CSS color to draw the square with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.squareHandle = function (center, size, color) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a circle handle with the given CSS color.
\n *
\n * It is an inherent featur of the handle functions that the drawn elements are not scaled and not\n * distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn\n * as even shaped circles.\n *\n * @method circleHandle\n * @param {Vertex} center - The center of the circle.\n * @param {number} radius - The radius of the circle.\n * @param {string} color - The CSS color to draw the circle with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.circleHandle = function (center, size, color) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a crosshair with given radius and color at the given position.
\n *
\n * Note that the crosshair radius will not be affected by scaling.\n *\n * @method crosshair\n * @param {XYCoords} center - The center of the crosshair.\n * @param {number} radius - The radius of the crosshair.\n * @param {string} color - The CSS color to draw the crosshair with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.crosshair = function (center, radius, color) {\n // NOT YET IMPLEMENTED\t\n };\n ;\n /**\n * Draw a polygon.\n *\n * @method polygon\n * @param {Polygon} polygon - The polygon to draw.\n * @param {string} color - The CSS color to draw the polygon with.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.polygon = function (polygon, color, lineWidth) {\n var vertices = new Float32Array(polygon.vertices.length * 3);\n for (var i = 0; i < polygon.vertices.length; i++) {\n vertices[i * 3 + 0] = this._x2rel(polygon.vertices[i].x);\n vertices[i * 3 + 1] = this._y2rel(polygon.vertices[i].y);\n vertices[i * 3 + 2] = this._zindex;\n }\n this._zindex += 0.001;\n //console.log( vertices );\n // Create an empty buffer object\n // const vertex_buffer = this.gl.createBuffer();\n // Bind appropriate array buffer to it\n this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertex_buffer);\n // Pass the vertex data to the buffer\n this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);\n // Bind vertex buffer object\n // this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertex_buffer);\n // Get the attribute location\n var coord = this.gl.getAttribLocation(this._program, \"position\");\n // Point an attribute to the currently bound VBO\n this.gl.vertexAttribPointer(coord, 3, this.gl.FLOAT, false, 0, 0);\n // Enable the attribute\n this.gl.enableVertexAttribArray(coord);\n // Unbind the buffer?\n this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n // Set the view port\n this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);\n var uRotationVector = this.gl.getUniformLocation(this._program, \"uRotationVector\");\n // let radians = currentAngle * Math.PI / 180.0;\n var currentRotation = [0.0, 1.0];\n //currentRotation[0] = Math.sin(radians);\n //currentRotation[1] = Math.cos(radians);\n this.gl.uniform2fv(uRotationVector, currentRotation);\n // Draw the polygon\n this.gl.drawArrays(this.gl.TRIANGLE_FAN, 0, vertices.length / 3);\n // POINTS, LINE_STRIP, LINE_LOOP, LINES,\n // TRIANGLE_STRIP,TRIANGLE_FAN, TRIANGLES\n };\n ;\n /**\n * Draw a polygon line (alternative function to the polygon).\n *\n * @method polyline\n * @param {Vertex[]} vertices - The polygon vertices to draw.\n * @param {boolan} isOpen - If true the polyline will not be closed at its end.\n * @param {string} color - The CSS color to draw the polygon with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n drawutilsgl.prototype.polyline = function (vertices, isOpen, color, lineWidth) {\n // NOT YET IMPLEMENTED\n };\n ;\n drawutilsgl.prototype.text = function (text, x, y, options) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Draw a non-scaling text label at the given position.\n *\n * @method label\n * @param {string} text - The text to draw.\n * @param {number} x - The x-position to draw the text at.\n * @param {number} y - The y-position to draw the text at.\n * @param {number=} rotation - The (aoptional) rotation in radians.\n * @return {void}\n * @instance\n * @memberof drawutils\n */\n // +---------------------------------------------------------------------------------\n // | Draw a non-scaling text label at the given position.\n // +-------------------------------\n drawutilsgl.prototype.label = function (text, x, y, rotation) {\n // NOT YET IMPLEMENTED\n };\n ;\n /**\n * Due to gl compatibility there is a generic 'clear' function required\n * to avoid accessing the context object itself directly.\n *\n * This function just fills the whole canvas with a single color.\n *\n * @param {string} color - The color to clear with.\n **/\n drawutilsgl.prototype.clear = function (color) {\n // NOT YET IMPLEMENTED\n // if( typeof color == 'string' )\n // color = Color.parse(color); // Color class does not yet exist in TS\n // Clear the canvas\n this.gl.clearColor(1.0, 1.0, 1.0, 1.0);\n // Enable the depth test\n this.gl.enable(this.gl.DEPTH_TEST);\n // Clear the color and depth buffer\n this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);\n };\n ;\n // Vertex shader source code\n drawutilsgl.vertCode = \"\\n precision mediump float;\\n\\n attribute vec3 position;\\n\\n uniform vec2 uRotationVector;\\n\\n void main(void) {\\n\\tvec2 rotatedPosition = vec2(\\n\\t position.x * uRotationVector.y +\\n\\t\\tposition.y * uRotationVector.x,\\n\\t position.y * uRotationVector.y -\\n\\t\\tposition.x * uRotationVector.x\\n\\t);\\n\\n\\tgl_Position = vec4(rotatedPosition, position.z, 1.0);\\n }\";\n // Fragment shader source code\n drawutilsgl.fragCode = \"\\n precision highp float;\\n\\n void main(void) {\\n\\tgl_FragColor = vec4(0.0,0.75,1.0,1.0);\\n }\";\n return drawutilsgl;\n}());\nexports.drawutilsgl = drawutilsgl;\n/**\n * Some GL helper utils.\n **/\nvar GLU = /** @class */ (function () {\n function GLU(gl) {\n this.gl = gl;\n }\n ;\n GLU.prototype.bufferData = function (verts) {\n // Create an empty buffer object\n var vbuffer = this.gl.createBuffer();\n // Bind appropriate array buffer to it\n this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vbuffer);\n // Pass the vertex data to the buffer\n this.gl.bufferData(this.gl.ARRAY_BUFFER, verts, this.gl.STATIC_DRAW);\n // Unbind the buffer\n this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n return vbuffer;\n };\n ;\n /*=================== Shaders ====================*/\n GLU.prototype.compileShader = function (shaderCode, shaderType) {\n // Create a vertex shader object\n var shader = this.gl.createShader(shaderType);\n // Attach vertex shader source code\n this.gl.shaderSource(shader, shaderCode);\n // Compile the vertex shader\n this.gl.compileShader(shader);\n var vertStatus = this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS);\n if (!vertStatus) {\n console.warn(\"Error in shader:\" + this.gl.getShaderInfoLog(shader));\n this.gl.deleteShader(shader);\n return null;\n }\n return shader;\n };\n ;\n GLU.prototype.makeProgram = function (vertShader, fragShader) {\n // Create a shader program object to store\n // the combined shader program\n var program = this.gl.createProgram();\n // Attach a vertex shader\n this.gl.attachShader(program, vertShader);\n // Attach a fragment shader\n this.gl.attachShader(program, fragShader);\n // Link both the programs\n this.gl.linkProgram(program);\n // Use the combined shader program object\n this.gl.useProgram(program);\n /*======= Do some cleanup ======*/\n this.gl.detachShader(program, vertShader);\n this.gl.detachShader(program, fragShader);\n this.gl.deleteShader(vertShader);\n this.gl.deleteShader(fragShader);\n return program;\n };\n ;\n return GLU;\n}());\n//# sourceMappingURL=drawgl.js.map","\"use strict\";\n/**\n * @author Ikaros Kappler\n * @date 2019-02-03\n * @version 1.0.0\n **/\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.geomutils = void 0;\nvar Line_1 = require(\"./Line\");\nvar Triangle_1 = require(\"./Triangle\");\n/**\n * A collection of usefull geometry utilities.\n *\n * @global\n **/\nexports.geomutils = {\n /**\n * Compute the n-section of the angle – described as a triangle (A,B,C) – in point A.\n *\n * @param {Vertex} pA - The first triangle point.\n * @param {Vertex} pB - The second triangle point.\n * @param {Vertex} pC - The third triangle point.\n * @param {number} n - The number of desired angle sections (example: 2 means the angle will be divided into two sections,\n * means an returned array with length 1, the middle line).\n *\n * @return {Line[]} An array of n-1 lines secting the given angle in point A into n equal sized angle sections. The lines' first vertex is A.\n */\n nsectAngle: function (pA, pB, pC, n) {\n var triangle = new Triangle_1.Triangle(pA, pB, pC);\n var lineAB = new Line_1.Line(pA, pB);\n var lineAC = new Line_1.Line(pA, pC);\n // Compute the slope (theta) of line AB and line AC\n var thetaAB = lineAB.angle();\n var thetaAC = lineAC.angle();\n // Compute the difference; this is the angle between AB and AC\n var insideAngle = lineAB.angle(lineAC);\n // We want the inner angles of the triangle, not the outer angle;\n // which one is which depends on the triangle 'direction'\n var clockwise = triangle.determinant() > 0;\n // For convenience convert the angle [-PI,PI] to [0,2*PI]\n if (insideAngle < 0)\n insideAngle = 2 * Math.PI + insideAngle;\n if (!clockwise)\n insideAngle = (2 * Math.PI - insideAngle) * (-1);\n // Scale the rotated lines to the max leg length (looks better)\n var lineLength = Math.max(lineAB.length(), lineAC.length());\n var scaleFactor = lineLength / lineAB.length();\n var result = [];\n for (var i = 1; i < n; i++) {\n // Compute the i-th inner sector line\n result.push(new Line_1.Line(pA, pB.clone().rotate((-i * (insideAngle / n)), pA)).scale(scaleFactor));\n }\n return result;\n }\n};\n//# sourceMappingURL=geomutils.js.map","\"use strict\";\n/**\n * Draws elements into an SVG node.\n *\n * @author Ikaros Kappler\n * @date 2021-01-03\n * @modified 2021-01-24 Fixed the `fillShapes` attribute in the copyInstance function.\n * @modified 2021-01-26 Changed the `isPrimary` (default true) attribute to `isSecondary` (default false).\n * @modified 2021-02-03 Added the static `createSvg` function.\n * @modified 2021-02-03 Fixed the currentId='background' bug on the clear() function.\n * @modified 2021-02-03 Fixed CSSProperty `stroke-width` (was line-width before, which is wrong).\n * @modified 2021-02-03 Added the static `HEAD_XML` attribute.\n * @version 1.0.0\n **/\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.drawutilssvg = void 0;\nvar CircleSector_1 = require(\"../../CircleSector\");\nvar CubicBezierCurve_1 = require(\"../../CubicBezierCurve\");\nvar Vertex_1 = require(\"../../Vertex\");\n/**\n * @classdesc A helper class for basic SVG drawing operations. This class should\n * be compatible to the default 'draw' class.\n *\n * @requires CubicBzierCurvce\n * @requires Polygon\n * @requires SVGSerializable\n * @requires Vertex\n * @requires XYCoords\n */\nvar drawutilssvg = /** @class */ (function () {\n /**\n * The constructor.\n *\n * @constructor\n * @name drawutilssvg\n * @param {SVGElement} svgNode - The SVG node to use.\n * @param {XYCoords} offset - The draw offset to use.\n * @param {XYCoords} scale - The scale factors to use.\n * @param {XYDimension} canvasSize - The initial canvas size (use setSize to change).\n * @param {boolean} fillShapes - Indicates if the constructed drawutils should fill all drawn shapes (if possible).\n * @param {DrawConfig} drawConfig - The default draw config to use for CSS fallback styles.\n * @param {boolean=} isSecondary - (optional) Indicates if this is the primary or secondary instance. Only primary instances manage child nodes.\n * @param {SVGElement=} gNode - (optional) Primary and seconday instances share the same <g> node.\n **/\n function drawutilssvg(svgNode, offset, scale, canvasSize, fillShapes, drawConfig, isSecondary, gNode) {\n this.svgNode = svgNode;\n this.offset = new Vertex_1.Vertex(0, 0).set(offset);\n this.scale = new Vertex_1.Vertex(1, 1).set(scale);\n this.fillShapes = fillShapes;\n this.isSecondary = isSecondary;\n this.cache = new Map();\n this.setSize(canvasSize);\n if (isSecondary) {\n this.gNode = gNode;\n }\n else {\n this.addStyleDefs(drawConfig);\n this.gNode = this.createSVGNode('g');\n this.svgNode.appendChild(this.gNode);\n }\n }\n ;\n drawutilssvg.prototype.addStyleDefs = function (drawConfig) {\n var nodeStyle = this.createSVGNode('style');\n this.svgNode.appendChild(nodeStyle); // nodeDef);\n // Which default styles to add? -> All from the DrawConfig.\n // Compare with DrawConfig interface\n var keys = {\n 'polygon': 'Polygon',\n 'triangle': 'Triangle',\n 'ellipse': 'Ellipse',\n 'circle': 'Circle',\n 'circleSector': 'CircleSector',\n 'vertex': 'Vertex',\n 'line': 'Line',\n 'vector': 'Vector',\n 'image': 'Image'\n };\n // Question: why isn't this working if the svgNode is created dynamically? (nodeStyle.sheet is null)\n var rules = [];\n for (var k in keys) {\n var className = keys[k];\n var drawSettings = drawConfig[k];\n rules.push(\".\" + className + \" { fill : none; stroke: \" + drawSettings.color + \"; stroke-width: \" + drawSettings.lineWidth + \"px }\");\n }\n nodeStyle.innerHTML = rules.join(\"\\n\");\n };\n ;\n /**\n * Retieve an old (cached) element.\n * Only if both – key and nodeName – match, the element will be returned (null otherwise).\n *\n * @method findElement\n * @private\n * @memberof drawutilssvg\n * @instance\n * @param {UID} key - The key of the desired element (used when re-drawing).\n * @param {string} nodeName - The expected node name.\n */\n drawutilssvg.prototype.findElement = function (key, nodeName) {\n var node = this.cache.get(key);\n if (node && node.nodeName.toUpperCase() === nodeName.toUpperCase()) {\n this.cache.delete(key);\n return node;\n }\n return null;\n };\n /**\n * Create a new DOM node <svg> in the SVG namespace.\n *\n * @method createSVGNode\n * @private\n * @memberof drawutilssvg\n * @instance\n * @param {string} nodeName - The node name (tag-name).\n * @return {SVGElement} A new element in the SVG namespace with the given node name.\n */\n drawutilssvg.prototype.createSVGNode = function (nodeName) {\n return document.createElementNS(\"http://www.w3.org/2000/svg\", nodeName);\n };\n ;\n /**\n * Make a new SVG node (or recycle an old one) with the given node name (circle, path, line, rect, ...).\n *\n * This function is used in draw cycles to re-use old DOM nodes (in hope to boost performance).\n *\n * @method makeNode\n * @private\n * @instance\n * @memberof drawutilssvg\n * @param {string} nodeName - The node name.\n * @return {SVGElement} The new node, which is not yet added to any document.\n */\n drawutilssvg.prototype.makeNode = function (nodeName) {\n // Try to find node in current DOM cache.\n // Unique node keys are strictly necessary.\n // Try to recycle an old element from cache.\n var node = this.findElement(this.curId, nodeName);\n if (!node) {\n // If no such old elements exists (key not found, tag name not matching),\n // then create a new one.\n node = this.createSVGNode(nodeName);\n }\n return node;\n };\n ;\n /**\n * This is the final helper function for drawing and filling stuff and binding new\n * nodes to the SVG document.\n * It is not intended to be used from the outside.\n *\n * When in draw mode it draws the current shape.\n * When in fill mode it fills the current shape.\n *\n * This function is usually only called internally.\n *\n * @method _bindFillDraw\n * @private\n * @instance\n * @memberof drawutilssvg\n * @param {SVGElement} node - The node to draw/fill and bind.\n * @param {string} className - The class name(s) to use.\n * @param {string} color - A stroke/fill color to use.\n * @param {number=1} lineWidth - (optional) A line width to use for drawing (default is 1).\n * @return {SVGElement} The node itself (for chaining).\n */\n drawutilssvg.prototype._bindFillDraw = function (node, className, color, lineWidth) {\n if (this.curClassName) {\n node.setAttribute('class', this.curClassName + \" \" + className);\n }\n else {\n node.setAttribute('class', className);\n }\n node.setAttribute('fill', this.fillShapes ? color : 'none');\n node.setAttribute('stroke', this.fillShapes ? 'none' : color);\n node.setAttribute('stroke-width', \"\" + (lineWidth || 1));\n if (this.curId) {\n node.setAttribute('id', \"\" + this.curId); // Maybe React-style 'key' would be better?\n }\n if (!node.parentNode) {\n // Attach to DOM only if not already attached\n this.gNode.appendChild(node);\n }\n return node;\n };\n ;\n /**\n * Sets the size and view box of the document. Call this if canvas size changes.\n *\n * @method setSize\n * @instance\n * @memberof drawutilssvg\n * @param {XYDimension} canvasSize - The new canvas size.\n */\n drawutilssvg.prototype.setSize = function (canvasSize) {\n this.canvasSize = canvasSize;\n this.svgNode.setAttribute('viewBox', \"0 0 \" + this.canvasSize.width + \" \" + this.canvasSize.height);\n this.svgNode.setAttribute('width', \"\" + this.canvasSize.width);\n this.svgNode.setAttribute('height', \"\" + this.canvasSize.height);\n };\n ;\n /**\n * Creates a 'shallow' (non deep) copy of this instance. This implies\n * that under the hood the same gl context and gl program will be used.\n */\n drawutilssvg.prototype.copyInstance = function (fillShapes) {\n var copy = new drawutilssvg(this.svgNode, this.offset, this.scale, this.canvasSize, fillShapes, null, // no DrawConfig\n true, // isSecondary\n this.gNode);\n return copy;\n };\n ;\n /**\n * This method shouled be called each time the currently drawn `Drawable` changes.\n * It is used by some libraries for identifying elemente on re-renders.\n *\n * @name setCurrentId\n * @method\n * @param {UID} uid - A UID identifying the currently drawn element(s).\n * @instance\n * @memberof drawutilssvg\n **/\n drawutilssvg.prototype.setCurrentId = function (uid) {\n this.curId = uid;\n };\n ;\n /**\n * This method shouled be called each time the currently drawn `Drawable` changes.\n * Determine the class name for further usage here.\n *\n * @name setCurrentClassName\n * @method\n * @param {string} className - A class name for further custom use cases.\n * @instance\n * @memberof drawutilssvg\n **/\n drawutilssvg.prototype.setCurrentClassName = function (className) {\n this.curClassName = className;\n };\n ;\n /**\n * Called before each draw cycle.\n * This is required for compatibility with other draw classes in the library.\n *\n * @name beginDrawCycle\n * @method\n * @param {UID=} uid - (optional) A UID identifying the currently drawn element(s).\n * @instance\n * @memberof drawutilssvg\n **/\n drawutilssvg.prototype.beginDrawCycle = function (renderTime) {\n // Clear non-recycable elements from last draw cycle.\n this.cache.clear();\n };\n ;\n drawutilssvg.prototype._x = function (x) { return this.offset.x + this.scale.x * x; };\n drawutilssvg.prototype._y = function (y) { return this.offset.y + this.scale.y * y; };\n /**\n * Draw the line between the given two points with the specified (CSS-) color.\n *\n * @method line\n * @param {Vertex} zA - The start point of the line.\n * @param {Vertex} zB - The end point of the line.\n * @param {string} color - Any valid CSS color string.\n * @param {number=1} lineWidth? - [optional] The line's width.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n **/\n drawutilssvg.prototype.line = function (zA, zB, color, lineWidth) {\n var line = this.makeNode('line');\n line.setAttribute('x1', \"\" + this._x(zA.x));\n line.setAttribute('y1', \"\" + this._y(zA.y));\n line.setAttribute('x2', \"\" + this._x(zB.x));\n line.setAttribute('y2', \"\" + this._y(zB.y));\n return this._bindFillDraw(line, 'line', color, lineWidth || 1);\n };\n ;\n /**\n * Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.\n *\n * @method arrow\n * @param {Vertex} zA - The start point of the arrow-line.\n * @param {Vertex} zB - The end point of the arrow-line.\n * @param {string} color - Any valid CSS color string.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n **/\n drawutilssvg.prototype.arrow = function (zA, zB, color, lineWidth) {\n var node = this.makeNode('path');\n var headlen = 8; // length of head in pixels\n var vertices = Vertex_1.Vertex.utils.buildArrowHead(zA, zB, headlen, this.scale.x, this.scale.y);\n var d = [\n 'M', this._x(zA.x), this._y(zA.y)\n ];\n for (var i = 0; i <= vertices.length; i++) {\n d.push('L');\n // Note: only use offset here (the vertices are already scaled)\n d.push(this.offset.x + vertices[i % vertices.length].x);\n d.push(this.offset.y + vertices[i % vertices.length].y);\n }\n node.setAttribute('d', d.join(' '));\n return this._bindFillDraw(node, 'arrow', color, lineWidth || 1);\n };\n ;\n /**\n * Draw an image at the given position with the given size.
\n *
\n * Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.\n *\n * @method image\n * @param {Image} image - The image object to draw.\n * @param {Vertex} position - The position to draw the the upper left corner at.\n * @param {Vertex} size - The x/y-size to draw the image with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n **/\n drawutilssvg.prototype.image = function (image, position, size) {\n var _this = this;\n var node = this.makeNode('image');\n // We need to re-adjust the image if it was not yet fully loaded before.\n var setImageSize = function (image) {\n if (image.naturalWidth) {\n var ratioX = size.x / image.naturalWidth;\n var ratioY = size.y / image.naturalHeight;\n node.setAttribute('width', \"\" + image.naturalWidth * _this.scale.x);\n node.setAttribute('height', \"\" + image.naturalHeight * _this.scale.y);\n node.setAttribute('display', null); // Dislay when loaded\n node.setAttribute('transform', \"translate(\" + _this._x(position.x) + \" \" + _this._y(position.y) + \") scale(\" + (ratioX) + \" \" + (ratioY) + \")\");\n }\n };\n image.addEventListener('load', function (event) { setImageSize(image); });\n // Safari has a transform-origin bug.\n // Use x=0, y=0 and translate/scale instead (see above)\n node.setAttribute('x', \"\" + 0);\n node.setAttribute('y', \"\" + 0);\n node.setAttribute('display', 'none'); // Hide before loaded\n setImageSize(image);\n node.setAttribute('href', image.src);\n return this._bindFillDraw(node, 'image', null, null);\n };\n ;\n /**\n * Draw the given (cubic) bézier curve.\n *\n * @method cubicBezier\n * @param {Vertex} startPoint - The start point of the cubic Bézier curve\n * @param {Vertex} endPoint - The end point the cubic Bézier curve.\n * @param {Vertex} startControlPoint - The start control point the cubic Bézier curve.\n * @param {Vertex} endControlPoint - The end control point the cubic Bézier curve.\n * @param {string} color - The CSS color to draw the curve with.\n * @param {number} lineWidth - (optional) The line width to use.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.cubicBezier = function (startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth) {\n if (startPoint instanceof CubicBezierCurve_1.CubicBezierCurve) {\n return this.cubicBezier(startPoint.startPoint, startPoint.endPoint, startPoint.startControlPoint, startPoint.endControlPoint, color, lineWidth);\n }\n var node = this.makeNode('path');\n // Draw curve\n var d = [\n 'M', this._x(startPoint.x), this._y(startPoint.y),\n 'C', this._x(startControlPoint.x), this._y(startControlPoint.y), this._x(endControlPoint.x), this._y(endControlPoint.y), this._x(endPoint.x), this._y(endPoint.y)\n ];\n node.setAttribute('d', d.join(' '));\n return this._bindFillDraw(node, 'cubierBezier', color, lineWidth);\n };\n ;\n /**\n * Draw the given (cubic) Bézier path.\n *\n * The given path must be an array with n*3+1 vertices, where n is the number of\n * curves in the path:\n * [ point1, point1_startControl, point2_endControl, point2, point2_startControl, point3_endControl, point3, ... pointN_endControl, pointN ]
\n *\n * @method cubicBezierPath\n * @param {Vertex[]} path - The cubic bezier path as described above.\n * @param {string} color - The CSS colot to draw the path with.\n * @param {number=1} lineWidth - (optional) The line width to use.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.cubicBezierPath = function (path, color, lineWidth) {\n var node = this.makeNode('path');\n if (!path || path.length == 0)\n return node;\n // Draw curve\n var d = [\n 'M', this._x(path[0].x), this._y(path[0].y)\n ];\n // Draw curve path\n var startPoint, endPoint, startControlPoint, endControlPoint;\n for (var i = 1; i < path.length; i += 3) {\n startControlPoint = path[i];\n endControlPoint = path[i + 1];\n endPoint = path[i + 2];\n d.push('C', this._x(startControlPoint.x), this._y(startControlPoint.y), this._x(endControlPoint.x), this._y(endControlPoint.y), this._x(endPoint.x), this._y(endPoint.y));\n }\n node.setAttribute('d', d.join(' '));\n return this._bindFillDraw(node, 'cubicBezierPath', color, lineWidth || 1);\n };\n ;\n /**\n * Draw the given handle and handle point (used to draw interactive Bézier curves).\n *\n * The colors for this are fixed and cannot be specified.\n *\n * @method handle\n * @param {Vertex} startPoint - The start of the handle.\n * @param {Vertex} endPoint - The end point of the handle.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.handle = function (startPoint, endPoint) {\n // TODO: redefine methods like these into an abstract class?\n this.point(startPoint, 'rgb(0,32,192)');\n this.square(endPoint, 5, 'rgba(0,128,192,0.5)');\n };\n ;\n /**\n * Draw a handle line (with a light grey).\n *\n * @method handleLine\n * @param {Vertex} startPoint - The start point to draw the handle at.\n * @param {Vertex} endPoint - The end point to draw the handle at.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.handleLine = function (startPoint, endPoint) {\n this.line(startPoint, endPoint, 'rgb(192,192,192)');\n };\n ;\n /**\n * Draw a 1x1 dot with the specified (CSS-) color.\n *\n * @method dot\n * @param {Vertex} p - The position to draw the dot at.\n * @param {string} color - The CSS color to draw the dot with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.dot = function (p, color) {\n var node = this.makeNode('line');\n var d = [\n 'M', this._x(p.x), this._y(p.y),\n 'L', this._x(p.x + 1), this._y(p.y + 1)\n ];\n return this._bindFillDraw(node, 'dot', color, 1);\n };\n ;\n /**\n * Draw the given point with the specified (CSS-) color and radius 3.\n *\n * @method point\n * @param {Vertex} p - The position to draw the point at.\n * @param {string} color - The CSS color to draw the point with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.point = function (p, color) {\n var radius = 3;\n var node = this.makeNode('circle');\n node.setAttribute('cx', \"\" + this._x(p.x));\n node.setAttribute('cy', \"\" + this._y(p.y));\n node.setAttribute('r', \"\" + radius);\n return this._bindFillDraw(node, 'point', color, 1);\n };\n ;\n /**\n * Draw a circle with the specified (CSS-) color and radius.
\n *
\n * Note that if the x- and y- scales are different the result will be an ellipse rather than a circle.\n *\n * @method circle\n * @param {Vertex} center - The center of the circle.\n * @param {number} radius - The radius of the circle.\n * @param {string} color - The CSS color to draw the circle with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.circle = function (center, radius, color, lineWidth) {\n var node = this.makeNode('circle');\n node.setAttribute('cx', \"\" + this._x(center.x));\n node.setAttribute('cy', \"\" + this._y(center.y));\n node.setAttribute('r', \"\" + radius * this.scale.x); // y?\n return this._bindFillDraw(node, 'circle', color, lineWidth || 1);\n };\n ;\n /**\n * Draw a circular arc (section of a circle) with the given CSS color.\n *\n * @method circleArc\n * @param {Vertex} center - The center of the circle.\n * @param {number} radius - The radius of the circle.\n * @param {number} startAngle - The angle to start at.\n * @param {number} endAngle - The angle to end at.\n * @param {string} color - The CSS color to draw the circle with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.circleArc = function (center, radius, startAngle, endAngle, color, lineWidth) {\n var node = this.makeNode('path');\n var arcData = CircleSector_1.CircleSector.circleSectorUtils.describeSVGArc(this._x(center.x), this._y(center.y), radius * this.scale.x, // y?\n startAngle, endAngle);\n node.setAttribute('d', arcData.join(' '));\n return this._bindFillDraw(node, 'circleArc', color, lineWidth || 1);\n };\n ;\n /**\n * Draw an ellipse with the specified (CSS-) color and thw two radii.\n *\n * @method ellipse\n * @param {Vertex} center - The center of the ellipse.\n * @param {number} radiusX - The radius of the ellipse.\n * @param {number} radiusY - The radius of the ellipse.\n * @param {string} color - The CSS color to draw the ellipse with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.ellipse = function (center, radiusX, radiusY, color, lineWidth) {\n var node = this.makeNode('ellipse');\n node.setAttribute('cx', \"\" + this._x(center.x));\n node.setAttribute('cy', \"\" + this._y(center.y));\n node.setAttribute('rx', \"\" + radiusX * this.scale.x);\n node.setAttribute('ry', \"\" + radiusY * this.scale.y);\n return this._bindFillDraw(node, 'ellipse', color, lineWidth || 1);\n };\n ;\n /**\n * Draw square at the given center, size and with the specified (CSS-) color.
\n *
\n * Note that if the x-scale and the y-scale are different the result will be a rectangle rather than a square.\n *\n * @method square\n * @param {Vertex} center - The center of the square.\n * @param {Vertex} size - The size of the square.\n * @param {string} color - The CSS color to draw the square with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.square = function (center, size, color, lineWidth) {\n var node = this.makeNode('rectangle');\n node.setAttribute('x', \"\" + this._x(center.x - size / 2.0));\n node.setAttribute('y', \"\" + this._y(center.y - size / 2.0));\n node.setAttribute('width', \"\" + size * this.scale.x);\n node.setAttribute('height', \"\" + size * this.scale.y);\n return this._bindFillDraw(node, 'square', color, lineWidth || 1);\n };\n ;\n /**\n * Draw a grid of horizontal and vertical lines with the given (CSS-) color.\n *\n * @method grid\n * @param {Vertex} center - The center of the grid.\n * @param {number} width - The total width of the grid (width/2 each to the left and to the right).\n * @param {number} height - The total height of the grid (height/2 each to the top and to the bottom).\n * @param {number} sizeX - The horizontal grid size.\n * @param {number} sizeY - The vertical grid size.\n * @param {string} color - The CSS color to draw the grid with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.grid = function (center, width, height, sizeX, sizeY, color) {\n var node = this.makeNode('path');\n var d = [];\n var yMin = -Math.ceil((height * 0.5) / sizeY) * sizeY;\n var yMax = height / 2;\n for (var x = -Math.ceil((width * 0.5) / sizeX) * sizeX; x < width / 2; x += sizeX) {\n d.push('M', this._x(center.x + x), this._y(center.y + yMin));\n d.push('L', this._x(center.x + x), this._y(center.y + yMax));\n }\n var xMin = -Math.ceil((width * 0.5) / sizeX) * sizeX;\n var xMax = width / 2;\n for (var y = -Math.ceil((height * 0.5) / sizeY) * sizeY; y < height / 2; y += sizeY) {\n d.push('M', this._x(center.x + xMin), this._y(center.y + y));\n d.push('L', this._x(center.x + xMax), this._y(center.y + y));\n }\n node.setAttribute('d', d.join(' '));\n return this._bindFillDraw(node, 'grid', color, 1);\n };\n ;\n /**\n * Draw a raster of crosshairs in the given grid.
\n *\n * This works analogue to the grid() function\n *\n * @method raster\n * @param {Vertex} center - The center of the raster.\n * @param {number} width - The total width of the raster (width/2 each to the left and to the right).\n * @param {number} height - The total height of the raster (height/2 each to the top and to the bottom).\n * @param {number} sizeX - The horizontal raster size.\n * @param {number} sizeY - The vertical raster size.\n * @param {string} color - The CSS color to draw the raster with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.raster = function (center, width, height, sizeX, sizeY, color) {\n var node = this.makeNode('path');\n var d = [];\n var cx = 0, cy = 0;\n for (var x = -Math.ceil((width * 0.5) / sizeX) * sizeX; x < width / 2; x += sizeX) {\n cx++;\n for (var y = -Math.ceil((height * 0.5) / sizeY) * sizeY; y < height / 2; y += sizeY) {\n if (cx == 1)\n cy++;\n // Draw a crosshair\n d.push('M', this._x(center.x + x) - 4, this._y(center.y + y));\n d.push('L', this._x(center.x + x) + 4, this._y(center.y + y));\n d.push('M', this._x(center.x + x), this._y(center.y + y) - 4);\n d.push('L', this._x(center.x + x), this._y(center.y + y) + 4);\n }\n }\n node.setAttribute('d', d.join(' '));\n return this._bindFillDraw(node, 'raster', color, 1);\n };\n ;\n /**\n * Draw a diamond handle (square rotated by 45°) with the given CSS color.\n *\n * It is an inherent featur of the handle functions that the drawn elements are not scaled and not\n * distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn\n * as even shaped diamonds.\n *\n * @method diamondHandle\n * @param {Vertex} center - The center of the diamond.\n * @param {Vertex} size - The x/y-size of the diamond.\n * @param {string} color - The CSS color to draw the diamond with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.diamondHandle = function (center, size, color) {\n var node = this.makeNode('path');\n var d = [\n 'M', this._x(center.x) - size / 2.0, this._y(center.y),\n 'L', this._x(center.x), this._y(center.y) - size / 2.0,\n 'L', this._x(center.x) + size / 2.0, this._y(center.y),\n 'L', this._x(center.x), this._y(center.y) + size / 2.0,\n 'Z'\n ];\n ;\n node.setAttribute('d', d.join(' '));\n return this._bindFillDraw(node, 'diamondHandle', color, 1);\n };\n ;\n /**\n * Draw a square handle with the given CSS color.
\n *
\n * It is an inherent featur of the handle functions that the drawn elements are not scaled and not\n * distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn\n * as even shaped squares.\n *\n * @method squareHandle\n * @param {Vertex} center - The center of the square.\n * @param {Vertex} size - The x/y-size of the square.\n * @param {string} color - The CSS color to draw the square with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.squareHandle = function (center, size, color) {\n var node = this.makeNode('rect');\n node.setAttribute('x', \"\" + (this._x(center.x) - size / 2.0));\n node.setAttribute('y', \"\" + (this._y(center.y) - size / 2.0));\n node.setAttribute('width', \"\" + size);\n node.setAttribute('height', \"\" + size);\n return this._bindFillDraw(node, 'squareHandle', color, 1);\n };\n ;\n /**\n * Draw a circle handle with the given CSS color.
\n *
\n * It is an inherent featur of the handle functions that the drawn elements are not scaled and not\n * distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn\n * as even shaped circles.\n *\n * @method circleHandle\n * @param {Vertex} center - The center of the circle.\n * @param {number} radius - The radius of the circle.\n * @param {string} color - The CSS color to draw the circle with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.circleHandle = function (center, radius, color) {\n radius = radius || 3;\n var node = this.makeNode('circle');\n node.setAttribute('cx', \"\" + this._x(center.x));\n node.setAttribute('cy', \"\" + this._y(center.y));\n node.setAttribute('r', \"\" + radius);\n return this._bindFillDraw(node, 'circleHandle', color, 1);\n };\n ;\n /**\n * Draw a crosshair with given radius and color at the given position.
\n *
\n * Note that the crosshair radius will not be affected by scaling.\n *\n * @method crosshair\n * @param {XYCoords} center - The center of the crosshair.\n * @param {number} radius - The radius of the crosshair.\n * @param {string} color - The CSS color to draw the crosshair with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.crosshair = function (center, radius, color) {\n var node = this.makeNode('path');\n var d = [\n 'M', this._x(center.x) - radius, this._y(center.y),\n 'L', this._x(center.x) + radius, this._y(center.y),\n 'M', this._x(center.x), this._y(center.y) - radius,\n 'L', this._x(center.x), this._y(center.y) + radius\n ];\n node.setAttribute('d', d.join(' '));\n return this._bindFillDraw(node, 'crosshair', color, 0.5);\n };\n ;\n /**\n * Draw a polygon.\n *\n * @method polygon\n * @param {Polygon} polygon - The polygon to draw.\n * @param {string} color - The CSS color to draw the polygon with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.polygon = function (polygon, color, lineWidth) {\n return this.polyline(polygon.vertices, polygon.isOpen, color, lineWidth);\n };\n ;\n /**\n * Draw a polygon line (alternative function to the polygon).\n *\n * @method polyline\n * @param {Vertex[]} vertices - The polygon vertices to draw.\n * @param {boolan} isOpen - If true the polyline will not be closed at its end.\n * @param {string} color - The CSS color to draw the polygon with.\n * @param {number=} lineWidth - (optional) The line width to use; default is 1.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.polyline = function (vertices, isOpen, color, lineWidth) {\n var node = this.makeNode('path');\n if (vertices.length == 0)\n return node;\n // Draw curve\n var d = [\n 'M', this._x(vertices[0].x), this._y(vertices[0].y)\n ];\n var n = vertices.length;\n for (var i = 1; i < n; i++) {\n d.push('L', this._x(vertices[i].x), this._y(vertices[i].y));\n }\n if (!isOpen)\n d.push('Z');\n node.setAttribute('d', d.join(' '));\n return this._bindFillDraw(node, 'polyline', color, lineWidth || 1);\n };\n ;\n /**\n * Draw a text label at the given relative position.\n *\n * @method label\n * @param {string} text - The text to draw.\n * @param {number} x - The x-position to draw the text at.\n * @param {number} y - The y-position to draw the text at.\n * @param {number=} rotation - The (optional) rotation in radians.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.text = function (text, x, y, options) {\n options = options || {};\n var color = options.color || 'black';\n var node = this.makeNode('text');\n node.setAttribute('x', \"\" + this._x(x));\n node.setAttribute('y', \"\" + this._x(y));\n node.innerHTML = text;\n return this._bindFillDraw(node, 'text', color, 1);\n };\n ;\n /**\n * Draw a non-scaling text label at the given position.\n *\n * @method label\n * @param {string} text - The text to draw.\n * @param {number} x - The x-position to draw the text at.\n * @param {number} y - The y-position to draw the text at.\n * @param {number=} rotation - The (optional) rotation in radians.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n */\n drawutilssvg.prototype.label = function (text, x, y, rotation) {\n var node = this.makeNode('text');\n // For some strange reason SVG rotation transforms use degrees instead of radians\n node.setAttribute('transform', \"translate(\" + this.offset.x + \",\" + this.offset.y + \"), rotate(\" + rotation / Math.PI * 180 + \")\");\n node.innerHTML = text;\n return this._bindFillDraw(node, 'label', 'black', null);\n };\n ;\n /**\n * Due to gl compatibility there is a generic 'clear' function required\n * to avoid accessing the context object itself directly.\n *\n * This function just fills the whole canvas with a single color.\n *\n * @param {string} color - The color to clear with.\n * @return {void}\n * @instance\n * @memberof drawutilssvg\n **/\n drawutilssvg.prototype.clear = function (color) {\n // If this isn't the primary handler then do not remove anything here.\n // The primary handler will do that (no double work).\n if (this.isSecondary) {\n return;\n }\n // Clearing an SVG is equivalent to removing all its child elements.\n for (var i = 0; i < this.gNode.childNodes.length; i++) {\n // Hide all nodes here. Don't throw them away.\n // We can probably re-use them in the next draw cycle.\n var child = this.gNode.childNodes[i];\n this.cache.set(child.getAttribute('id'), child);\n }\n this.removeAllChildNodes();\n // Add a covering rect with the given background color\n this.curId = 'background';\n var node = this.makeNode('rect');\n // For some strange reason SVG rotation transforms use degrees instead of radians\n // Note that the background does not scale with the zoom level (always covers full element)\n node.setAttribute('x', '0');\n node.setAttribute('y', '0');\n node.setAttribute('width', \"\" + this.canvasSize.width);\n node.setAttribute('height', \"\" + this.canvasSize.height);\n // Bind this special element into the document\n this._bindFillDraw(node, this.curId, null, null);\n node.setAttribute('fill', typeof color === \"undefined\" ? 'none' : color);\n // Clear the current ID again\n this.curId = null;\n return node;\n };\n ;\n /**\n * A private helper function to clear all SVG nodes from the >g> node.\n *\n * @private\n */\n drawutilssvg.prototype.removeAllChildNodes = function () {\n while (this.gNode.firstChild) {\n this.gNode.removeChild(this.gNode.lastChild);\n }\n };\n ;\n /**\n * Create a new and empty `SVGElement` <svg> in the svg-namespace.\n *\n * @name createSvg\n * @static\n * @memberof drawutilssvg\n * @return SVGElement\n */\n drawutilssvg.createSvg = function () {\n return document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n };\n ;\n drawutilssvg.HEAD_XML = [\n '',\n '',\n ''\n ].join(\"\\n\");\n return drawutilssvg;\n}());\nexports.drawutilssvg = drawutilssvg;\n//# sourceMappingURL=drawutilssvg.js.map","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tif(__webpack_module_cache__[moduleId]) {\n\t\treturn __webpack_module_cache__[moduleId].exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n/* Imports for webpack */\n\nglobalThis.UIDGenerator = require(\"./UIDGenerator.js\").geomutils;\nglobalThis.VertexAttr = require(\"./VertexAttr.js\").VertexAttr;\nglobalThis.VertexListeners = require(\"./VertexListeners.js\").VertexListeners;\nglobalThis.Vertex = require(\"./Vertex.js\").Vertex;\n\nglobalThis.Bounds = require(\"./Bounds.js\").Bounds;\nglobalThis.Grid = require(\"./Grid.js\").Grid;\nglobalThis.Line = require(\"./Line.js\").Line;\nglobalThis.Vector = require(\"./Vector.js\").Vector;\nglobalThis.CubicBezierCurve = require(\"./CubicBezierCurve.js\").CubicBezierCurve;\nglobalThis.BezierPath = require(\"./BezierPath.js\").BezierPath;\nglobalThis.Polygon = require(\"./Polygon.js\").Polygon;\nglobalThis.Triangle = require(\"./Triangle.js\").Triangle;\nglobalThis.VEllipse = require(\"./VEllipse.js\").VEllipse;\nglobalThis.Circle = require(\"./Circle.js\").Circle;\nglobalThis.CircleSector = require(\"./CircleSector.js\").CircleSector;\nglobalThis.PBImage = require(\"./PBImage.js\").PBImage;\nglobalThis.MouseHandler = require(\"./MouseHandler.js\").MouseHandler;\nglobalThis.KeyHandler = require(\"./KeyHandler.js\").KeyHandler;\nglobalThis.drawutils = require(\"./draw.js\").drawutils;\n// globalThis.drawutilsgl = require(\"./drawgl.js\").drawutilsgl;\n// globalThis.drawutilsgl = {};\nglobalThis.drawutilssvg = require(\"./utils/helpers/drawutilssvg.js\").drawutilssvg;\nglobalThis.geomutils = require(\"./geomutils.js\").geomutils;\nglobalThis.PlotBoilerplate = require(\"./PlotBoilerplate.js\").PlotBoilerplate;\n\n"],"sourceRoot":""}