plotboilerplate
Version:
A simple javascript plotting boilerplate for 2d stuff.
1,050 lines • 78.6 kB
JavaScript
"use strict";
/**
* Draws elements into an SVG node.
*
* Note that this library uses buffers and draw cycles. To draw onto an SVG canvas, do this:
* const drawLib = new drawutilssvg( svgNode, ... );
* const fillLib = drawLib.copyInstance(true);
* // Begin draw cycle
* drawLib.beginDrawCycle(time);
* // ... draw or fill your stuff ...
* drawLib.endDrawCycle(time); // Here the elements become visible
*
* @author Ikaros Kappler
* @date 2021-01-03
* @modified 2021-01-24 Fixed the `fillShapes` attribute in the copyInstance function.
* @modified 2021-01-26 Changed the `isPrimary` (default true) attribute to `isSecondary` (default false).
* @modified 2021-02-03 Added the static `createSvg` function.
* @modified 2021-02-03 Fixed the currentId='background' bug on the clear() function.
* @modified 2021-02-03 Fixed CSSProperty `stroke-width` (was line-width before, which is wrong).
* @modified 2021-02-03 Added the static `HEAD_XML` attribute.
* @modified 2021-02-19 Added the static helper function `transformPathData(...)` for svg path transformations (scale and translate).
* @modified 2021-02-22 Added the static helper function `copyPathData(...)`.
* @modified 2021-02-22 Added the `path` drawing function to draw SVG path data.
* @modified 2021-03-01 Fixed a bug in the `clear` function (curClassName was not cleared).
* @modified 2021-03-29 Fixed a bug in the `text` function (second y param was wrong, used x here).
* @modified 2021-03-29 Moved this file from `src/ts/utils/helpers/` to `src/ts/`.
* @modified 2021-03-31 Added 'ellipseSector' the the class names.
* @modified 2021-03-31 Implemented buffering using a buffer <g> node and the beginDrawCycle and endDrawCycle methods.
* @modified 2021-05-31 Added the `setConfiguration` function from `DrawLib`.
* @modified 2021-11-15 Adding more parameters tot the `text()` function: fontSize, textAlign, fontFamily, lineHeight.
* @modified 2021-11-19 Fixing the `label(text,x,y)` position.
* @modified 2021-11-19 Added the `color` param to the `label(...)` function.
* @modified 2022-02-03 Added the `lineWidth` param to the `crosshair` function.
* @modified 2022-02-03 Added the `cross(...)` function.
* @modified 2022-03-26 Added the private `nodeDefs` and `bufferedNodeDefs` attributes.
* @modified 2022-03-26 Added the `texturedPoly` function to draw textures polygons.
* @modified 2022-07-26 Adding `alpha` to the `image(...)` function.
* @modified 2022-11-10 Tweaking some type issues.
* @modified 2023-02-04 Fixed a typo in the CSS classname for cubic Bézier paths: cubicBezier (was cubierBezier).
* @modified 2023-02-10 The methods `setCurrentClassName` and `setCurrentId` also accept `null` now.
* @modified 2023-09-29 Added initialization checks for null parameters.
* @modified 2023-09-29 Added a missing implementation to the `drawurilssvg.do(XYCoords,string)` function. Didn't draw anything.
* @modified 2023-09-29 Downgrading all `Vertex` param type to the more generic `XYCoords` type in these render functions: line, arrow, texturedPoly, cubicBezier, cubicBezierPath, handle, handleLine, dot, point, circle, circleArc, ellipse, grid, raster.
* @modified 2023-09-29 Added the `headLength` parameter to the 'DrawLib.arrow()` function.
* @modified 2023-09-29 Added the `arrowHead(...)` function to the 'DrawLib.arrow()` interface.
* @modified 2023-09-29 Added the `cubicBezierArrow(...)` function to the 'DrawLib.arrow()` interface.
* @modified 2023-10-04 Adding `strokeOptions` param to these draw function: line, arrow, cubicBezierArrow, cubicBezier, cubicBezierPath, circle, circleArc, ellipse, square, rect, polygon, polyline.
* @modified 2024-01-30 Fixing an issue with immutable style sets; changes to the global draw config did not reflect here (do now).
* @modified 2024-03-10 Fixing some types for Typescript 5 compatibility.
* @modified 2024-07-24 Caching custom style defs in a private buffer variable.
* @version 1.6.10
**/
Object.defineProperty(exports, "__esModule", { value: true });
exports.drawutilssvg = void 0;
var CircleSector_1 = require("./CircleSector");
var CubicBezierCurve_1 = require("./CubicBezierCurve");
var Vertex_1 = require("./Vertex");
var UIDGenerator_1 = require("./UIDGenerator");
var Vector_1 = require("./Vector");
var RAD_TO_DEG = 180 / Math.PI;
/**
* @classdesc A helper class for basic SVG drawing operations. This class should
* be compatible to the default 'draw' class.
*
* @requires CubicBzierCurvce
* @requires Polygon
* @requires Vertex
* @requires XYCoords
*/
var drawutilssvg = /** @class */ (function () {
/**
* Passed from primary to secondary instance.
*/
//private nodeStyle: SVGStyleElement;
/**
* The constructor.
*
* @constructor
* @name drawutilssvg
* @param {SVGElement} svgNode - The SVG node to use.
* @param {XYCoords} offset - The draw offset to use.
* @param {XYCoords} scale - The scale factors to use.
* @param {XYDimension} canvasSize - The initial canvas size (use setSize to change).
* @param {boolean} fillShapes - Indicates if the constructed drawutils should fill all drawn shapes (if possible).
* @param {DrawConfig} drawConfig - The default draw config to use for CSS fallback styles.
* @param {boolean=} isSecondary - (optional) Indicates if this is the primary or secondary instance. Only primary instances manage child nodes.
* @param {SVGGElement=} gNode - (optional) Primary and seconday instances share the same <g> node.
**/
function drawutilssvg(svgNode, offset, scale, canvasSize, fillShapes, drawConfig, isSecondary, gNode, bufferGNode, nodeDefs, bufferNodeDefs, nodeStyle) {
this.svgNode = svgNode;
this.offset = new Vertex_1.Vertex(0, 0).set(offset);
this.scale = new Vertex_1.Vertex(1, 1).set(scale);
this.fillShapes = fillShapes;
this.isSecondary = Boolean(isSecondary);
this.drawConfig = drawConfig;
this.drawlibConfiguration = {};
this.cache = new Map();
this.setSize(canvasSize);
if (isSecondary) {
if (!gNode || !bufferGNode || !nodeDefs || !bufferNodeDefs) {
throw "Cannot create secondary svg draw lib with undefinde gNode|bufferGNode|nodeDefs|bufferNodeDefs.";
}
this.gNode = gNode;
this.bufferGNode = bufferGNode;
this.nodeDefs = nodeDefs;
this.bufferedNodeDefs = bufferNodeDefs;
if (nodeStyle) {
this.nodeStyle = nodeStyle;
}
}
else {
this.addStyleDefs(drawConfig);
this.addDefsNode();
this.gNode = this.createSVGNode("g");
this.bufferGNode = this.createSVGNode("g");
this.svgNode.appendChild(this.gNode);
}
}
/**
* Adds a default style defintion based on the passed DrawConfig.
* Twaek the draw config to change default colors or line thicknesses.
*
* @param {DrawConfig} drawConfig
*/
drawutilssvg.prototype.addStyleDefs = function (drawConfig) {
this.nodeStyle = this.createSVGNode("style");
this.svgNode.appendChild(this.nodeStyle);
this.rebuildStyleDefs(drawConfig);
};
/**
* This method is required to re-define the global style defs. It is needed
* if any value in the DrawConfig changed in the meantime.
* @param drawConfig
*/
drawutilssvg.prototype.rebuildStyleDefs = function (drawConfig) {
// Which default styles to add? -> All from the DrawConfig.
// Compare with DrawConfig interface
var keys = {
"bezier": "CubicBezierCurve",
//"bezierPath": "BezierPath", // TODO: is this correct?
"polygon": "Polygon",
"triangle": "Triangle",
"ellipse": "Ellipse",
"ellipseSector": "EllipseSector",
"circle": "Circle",
"circleSector": "CircleSector",
"vertex": "Vertex",
"line": "Line",
"vector": "Vector",
"image": "Image",
"text": "Text"
};
// Question: why isn't this working if the svgNode is created dynamically? (nodeStyle.sheet is null)
var rules = [];
// console.log("drawConfig", drawConfig);
for (var k in keys) {
var className = keys[k];
var drawSettings = drawConfig[k];
if (drawSettings) {
rules.push(".".concat(className, " { fill : none; stroke: ").concat(drawSettings.color, "; stroke-width: ").concat(drawSettings.lineWidth, "px }"));
}
else {
console.warn("Warning: your draw config is missing the key '".concat(k, "' which is required."));
}
}
if (this.customStyleDefs) {
rules.push("\n/* Custom styles */\n");
this.customStyleDefs.forEach(function (value, key) {
rules.push(key + " { " + value + " }");
});
// this.nodeStyle.innerHTML += "\n/* Custom styles */\n" + rules.join("\n");
}
this.nodeStyle.innerHTML = rules.join("\n");
};
/**
* Adds the internal <defs> node.
*/
drawutilssvg.prototype.addDefsNode = function () {
this.nodeDefs = this.createSVGNode("defs");
// this.svgNode.appendChild(this.nodeDefs);
this.bufferedNodeDefs = this.createSVGNode("defs");
this.svgNode.appendChild(this.nodeDefs);
};
/**
* This is a simple way to include custom CSS class mappings to the style defs of the generated SVG.
*
* The mapping should be of the form
* [style-class] -> [style-def-string]
*
* Example:
* "rect.red" -> "fill: #ff0000; border: 1px solid red"
*
* @param {Map<string,string>} defs
*/
drawutilssvg.prototype.addCustomStyleDefs = function (defs) {
this.customStyleDefs = defs;
};
/**
* Retieve an old (cached) element.
* Only if both – key and nodeName – match, the element will be returned (null otherwise).
*
* @method findElement
* @private
* @memberof drawutilssvg
* @instance
* @param {UID} key - The key of the desired element (used when re-drawing).
* @param {string} nodeName - The expected node name.
*/
drawutilssvg.prototype.findElement = function (key, nodeName) {
if (!key) {
return null;
}
var node = this.cache.get(key);
if (node && node.nodeName.toUpperCase() === nodeName.toUpperCase()) {
this.cache.delete(key);
return node;
}
return null;
};
/**
* Create a new DOM node <svg> in the SVG namespace.
*
* @method createSVGNode
* @private
* @memberof drawutilssvg
* @instance
* @param {string} nodeName - The node name (tag-name).
* @return {SVGElement} A new element in the SVG namespace with the given node name.
*/
drawutilssvg.prototype.createSVGNode = function (nodeName) {
return document.createElementNS("http://www.w3.org/2000/svg", nodeName);
};
/**
* Make a new SVG node (or recycle an old one) with the given node name (circle, path, line, rect, ...).
*
* This function is used in draw cycles to re-use old DOM nodes (in hope to boost performance).
*
* @method makeNode
* @private
* @instance
* @memberof drawutilssvg
* @param {string} nodeName - The node name.
* @return {SVGElement} The new node, which is not yet added to any document.
*/
drawutilssvg.prototype.makeNode = function (nodeName) {
// Try to find node in current DOM cache.
// Unique node keys are strictly necessary.
// Try to recycle an old element from cache.
var node = this.findElement(this.curId, nodeName);
if (!node) {
// If no such old elements exists (key not found, tag name not matching),
// then create a new one.
node = this.createSVGNode(nodeName);
}
if (this.drawlibConfiguration.blendMode) {
// node.style["mix-blend-mode"] = this.drawlibConfiguration.blendMode;
node.style["mix-blend-mode"](this.drawlibConfiguration.blendMode);
}
// if (this.lineDashEnabled && this.lineDash && this.lineDash.length > 0 && drawutilssvg.nodeSupportsLineDash(nodeName)) {
// node.setAttribute("stroke-dasharray", this.lineDash.join(" "));
// }
return node;
};
/**
* This is the final helper function for drawing and filling stuff and binding new
* nodes to the SVG document.
* It is not intended to be used from the outside.
*
* When in draw mode it draws the current shape.
* When in fill mode it fills the current shape.
*
* This function is usually only called internally.
*
* @method _bindFillDraw
* @private
* @instance
* @memberof drawutilssvg
* @param {SVGElement} node - The node to draw/fill and bind.
* @param {string} className - The class name(s) to use.
* @param {string} color - A stroke/fill color to use.
* @param {number=1} lineWidth - (optional) A line width to use for drawing (default is 1).
* @return {SVGElement} The node itself (for chaining).
*/
drawutilssvg.prototype._bindFillDraw = function (node, className, color, lineWidth, strokeOptions) {
this._configureNode(node, className, this.fillShapes, color, lineWidth, strokeOptions);
return this._bindNode(node, undefined);
};
/**
* Bind this given node to a parent. If no parent is passed then the global
* node buffer will be used.
*
* @method _bindNode
* @private
* @instance
* @memberof drawutilssvg
* @param {SVGElement} node - The SVG node to bind.
* @param {SVGElement=} bindingParent - (optional) You may pass node other than the glober buffer node.
* @returns {SVGElement} The passed node itself.
*/
drawutilssvg.prototype._bindNode = function (node, bindingParent) {
if (!node.parentNode) {
// Attach to DOM only if not already attached
(bindingParent !== null && bindingParent !== void 0 ? bindingParent : this.bufferGNode).appendChild(node);
}
return node;
};
/**
* Add custom CSS class names and the globally defined CSS classname to the
* given node.
*
* @method addCSSClasses
* @private
* @instance
* @memberof drawutilssvg
* @param {SVGElement} node - The SVG node to bind.
* @param {string} className - The additional custom classname to add.
* @returns {void}
*/
drawutilssvg.prototype._addCSSClasses = function (node, className) {
if (this.curClassName) {
node.setAttribute("class", "".concat(className, " ").concat(this.curClassName));
}
else {
node.setAttribute("class", className);
}
};
drawutilssvg.prototype._configureNode = function (node, className, fillMode, color, lineWidth, strokeOptions) {
this._addCSSClasses(node, className);
node.setAttribute("fill", fillMode && color ? color : "none");
node.setAttribute("stroke", fillMode ? "none" : color || "none");
node.setAttribute("stroke-width", "".concat(lineWidth || 1));
if (this.curId) {
node.setAttribute("id", "".concat(this.curId)); // Maybe React-style 'key' would be better?
}
this.applyStrokeOpts(node, strokeOptions);
return node;
};
/**
* Sets the size and view box of the document. Call this if canvas size changes.
*
* @method setSize
* @instance
* @memberof drawutilssvg
* @param {XYDimension} canvasSize - The new canvas size.
*/
drawutilssvg.prototype.setSize = function (canvasSize) {
this.canvasSize = canvasSize;
this.svgNode.setAttribute("viewBox", "0 0 ".concat(this.canvasSize.width, " ").concat(this.canvasSize.height));
this.svgNode.setAttribute("width", "".concat(this.canvasSize.width));
this.svgNode.setAttribute("height", "".concat(this.canvasSize.height));
};
/**
* Creates a 'shallow' (non deep) copy of this instance. This implies
* that under the hood the same gl context and gl program will be used.
*/
drawutilssvg.prototype.copyInstance = function (fillShapes) {
var copy = new drawutilssvg(this.svgNode, this.offset, this.scale, this.canvasSize, fillShapes, this.drawConfig, // null as any as DrawConfig, // no DrawConfig – this will work as long as `isSecondary===true`
true, // isSecondary
this.gNode, this.bufferGNode, this.nodeDefs, this.bufferedNodeDefs, this.nodeStyle);
return copy;
};
/**
* Set the current drawlib configuration.
*
* @name setConfiguration
* @method
* @param {DrawLibConfiguration} configuration - The new configuration settings to use for the next render methods.
*/
drawutilssvg.prototype.setConfiguration = function (configuration) {
this.drawlibConfiguration = configuration;
};
/**
* This method shouled be called each time the currently drawn `Drawable` changes.
* It is used by some libraries for identifying elemente on re-renders.
*
* @name setCurrentId
* @method
* @param {UID|null} uid - A UID identifying the currently drawn element(s).
* @instance
* @memberof drawutilssvg
**/
drawutilssvg.prototype.setCurrentId = function (uid) {
this.curId = uid;
};
/**
* This method shouled be called each time the currently drawn `Drawable` changes.
* Determine the class name for further usage here.
*
* @name setCurrentClassName
* @method
* @param {string|null} className - A class name for further custom use cases.
* @instance
* @memberof drawutilssvg
**/
drawutilssvg.prototype.setCurrentClassName = function (className) {
this.curClassName = className;
};
/**
* Called before each draw cycle.
* This is required for compatibility with other draw classes in the library.
*
* @name beginDrawCycle
* @method
* @param {UID=} uid - (optional) A UID identifying the currently drawn element(s).
* @instance
* @memberof drawutilssvg
**/
drawutilssvg.prototype.beginDrawCycle = function (renderTime) {
// Clear non-recycable elements from last draw cycle.
this.cache.clear();
// Clearing an SVG is equivalent to removing all its child elements.
for (var i = 0; i < this.bufferGNode.childNodes.length; i++) {
// Hide all nodes here. Don't throw them away.
// We can probably re-use them in the next draw cycle.
var child = this.bufferGNode.childNodes[i];
this.cache.set(child.getAttribute("id"), child);
}
this.removeAllChildNodes();
};
/**
* Called after each draw cycle.
*
* This is required for compatibility with other draw classes in the library (like drawgl).
*
* @name endDrawCycle
* @method
* @param {number} renderTime
* @instance
**/
drawutilssvg.prototype.endDrawCycle = function (renderTime) {
this.rebuildStyleDefs(this.drawConfig);
if (!this.isSecondary) {
// All elements are drawn into the buffer; they are NOT yet visible, not did the browser perform any
// layout updates.
// Replace the old <g>-node with the buffer node.
// https://stackoverflow.com/questions/27442464/how-to-update-a-svg-image-without-seeing-a-blinking
this.svgNode.replaceChild(this.bufferedNodeDefs, this.nodeDefs);
this.svgNode.replaceChild(this.bufferGNode, this.gNode);
}
var tmpGNode = this.gNode;
this.gNode = this.bufferGNode;
this.bufferGNode = tmpGNode;
var tmpDefsNode = this.nodeDefs;
this.nodeDefs = this.bufferedNodeDefs;
this.bufferedNodeDefs = tmpDefsNode;
};
/**
* A private helper method to apply stroke options to the current
* context.
* @param {StrokeOptions=} strokeOptions -
*/
drawutilssvg.prototype.applyStrokeOpts = function (node, strokeOptions) {
var _this = this;
if (strokeOptions &&
strokeOptions.dashArray &&
strokeOptions.dashArray.length > 0 &&
drawutilssvg.nodeSupportsLineDash(node.tagName)) {
node.setAttribute("stroke-dasharray", strokeOptions.dashArray
.map(function (dashArayElem) {
return dashArayElem * _this.scale.x;
})
.join(" "));
if (strokeOptions.dashOffset) {
node.setAttribute("stroke-dashoffset", "".concat(strokeOptions.dashOffset * this.scale.x));
}
}
};
drawutilssvg.prototype._x = function (x) {
return this.offset.x + this.scale.x * x;
};
drawutilssvg.prototype._y = function (y) {
return this.offset.y + this.scale.y * y;
};
/**
* Draw the line between the given two points with the specified (CSS-) color.
*
* @method line
* @param {XYCoords} zA - The start point of the line.
* @param {XYCoords} zB - The end point of the line.
* @param {string} color - Any valid CSS color string.
* @param {number=1} lineWidth? - [optional] The line's width.
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {void}
* @instance
* @memberof drawutilssvg
**/
drawutilssvg.prototype.line = function (zA, zB, color, lineWidth, strokeOptions) {
// const line: SVGElement = this.makeNode("line");
// this.applyStrokeOpts(line, strokeOptions);
// line.setAttribute("x1", `${this._x(zA.x)}`);
// line.setAttribute("y1", `${this._y(zA.y)}`);
// line.setAttribute("x2", `${this._x(zB.x)}`);
// line.setAttribute("y2", `${this._y(zB.y)}`);
var line = this.makeLineNode(zA, zB, color, lineWidth, strokeOptions);
return this._bindFillDraw(line, "line", color, lineWidth || 1, strokeOptions);
};
/**
* Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
*
* @method arrow
* @param {XYCoords} zA - The start point of the arrow-line.
* @param {XYCoords} zB - The end point of the arrow-line.
* @param {string} color - Any valid CSS color string.
* @param {number=} lineWidth - (optional) The line width to use; default is 1.
* @param {headLength=8} headLength - (optional) The length of the arrow head (default is 8 units).
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {void}
* @instance
* @memberof drawutilssvg
**/
drawutilssvg.prototype.arrow = function (zA, zB, color, lineWidth, headLength, strokeOptions) {
if (headLength === void 0) { headLength = 8; }
var group = this.makeNode("g");
var arrowHeadBasePosition = { x: 0, y: 0 };
// Just create the child nodes, don't bind them to the root node.
var arrowHead = this.makeArrowHeadNode(zA, zB, color, lineWidth, headLength, undefined, arrowHeadBasePosition);
var line = this.makeLineNode(zA, arrowHeadBasePosition, color, lineWidth, strokeOptions);
group.appendChild(line);
group.appendChild(arrowHead);
this._addCSSClasses(group, "linear-arrow");
this._bindNode(group, undefined);
return group;
};
/**
* Draw a cubic Bézier curve and and an arrow at the end (endControlPoint) of the given line width the specified (CSS-) color and arrow size.
*
* @method cubicBezierArrow
* @param {XYCoords} startPoint - The start point of the cubic Bézier curve
* @param {XYCoords} endPoint - The end point the cubic Bézier curve.
* @param {XYCoords} startControlPoint - The start control point the cubic Bézier curve.
* @param {XYCoords} endControlPoint - The end control point the cubic Bézier curve.
* @param {string} color - The CSS color to draw the curve with.
* @param {number} lineWidth - (optional) The line width to use.
* @param {headLength=8} headLength - (optional) The length of the arrow head (default is 8 units).
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {void}
* @instance
* @memberof DrawLib
*/
drawutilssvg.prototype.cubicBezierArrow = function (startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth, headLength, strokeOptions) {
if (headLength === void 0) { headLength = 8; }
var group = this.makeNode("g");
// Just create the child nodes, don't bind them to the root node.
var arrowHeadBasePosition = new Vertex_1.Vertex(0, 0);
var arrowHead = this.makeArrowHeadNode(endControlPoint, endPoint, color, lineWidth, headLength, undefined, arrowHeadBasePosition);
var diff = arrowHeadBasePosition.difference(endPoint);
var bezier = this.makeCubicBezierNode(startPoint, { x: endPoint.x - diff.x, y: endPoint.y - diff.y }, startControlPoint, { x: endControlPoint.x - diff.x, y: endControlPoint.y - diff.y }, color, lineWidth, strokeOptions);
group.appendChild(bezier);
group.appendChild(arrowHead);
this._addCSSClasses(group, "cubicbezier-arrow");
this._bindNode(group, undefined);
return group;
};
/**
* Draw just an arrow head a the end of an imaginary line (zB) of the given line width the specified (CSS-) color and size.
*
* @method arrow
* @param {XYCoords} zA - The start point of the arrow-line.
* @param {XYCoords} zB - The end point of the arrow-line.
* @param {string} color - Any valid CSS color string.
* @param {number=1} lineWidth - (optional) The line width to use; default is 1.
* @param {number=8} headLength - (optional) The length of the arrow head (default is 8 pixels).
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {void}
* @instance
* @memberof DrawLib
**/
drawutilssvg.prototype.arrowHead = function (zA, zB, color, lineWidth, headLength, strokeOptions) {
if (headLength === void 0) { headLength = 8; }
var node = this.makeArrowHeadNode(zA, zB, color, lineWidth, headLength, strokeOptions);
return this._bindFillDraw(node, "arrowhead", color, lineWidth || 1, strokeOptions);
};
/**
* Draw an image at the given position with the given size.<br>
* <br>
* 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.
*
* @method image
* @param {Image} image - The image object to draw.
* @param {XYCoords} position - The position to draw the the upper left corner at.
* @param {XYCoords} size - The x/y-size to draw the image with.
* @param {number=0.0} alpha - (optional, default=0.0) The transparency (1.0=opaque, 0.0=transparent).
* @return {void}
* @instance
* @memberof drawutilssvg
**/
drawutilssvg.prototype.image = function (image, position, size, alpha) {
var _this = this;
if (alpha === void 0) { alpha = 1.0; }
var node = this.makeNode("image");
// We need to re-adjust the image if it was not yet fully loaded before.
var setImageSize = function (image) {
if (image.naturalWidth) {
var ratioX = size.x / image.naturalWidth;
var ratioY = size.y / image.naturalHeight;
node.setAttribute("width", "".concat(image.naturalWidth * _this.scale.x));
node.setAttribute("height", "".concat(image.naturalHeight * _this.scale.y));
node.setAttribute("display", null); // Dislay when loaded
// if (alpha) {
node.setAttribute("opacity", "".concat(alpha));
// }
node.setAttribute("transform", "translate(".concat(_this._x(position.x), " ").concat(_this._y(position.y), ") scale(").concat(ratioX, " ").concat(ratioY, ")"));
}
};
image.addEventListener("load", function (event) {
setImageSize(image);
});
// Safari has a transform-origin bug.
// Use x=0, y=0 and translate/scale instead (see above)
node.setAttribute("x", "".concat(0));
node.setAttribute("y", "".concat(0));
node.setAttribute("display", "none"); // Hide before loaded
setImageSize(image);
node.setAttribute("href", image.src);
return this._bindFillDraw(node, "image", null, null);
};
/**
* Draw an image at the given position with the given size.<br>
* <br>
* 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.
*
* @method texturedPoly
* @param {Image} textureImage - The image object to draw.
* @param {Bounds} textureSize - The texture size to use; these are the original bounds to map the polygon vertices to.
* @param {Polygon} polygon - The polygon to use as clip path.
* @param {XYCoords} polygonPosition - The polygon's position (relative), measured at the bounding box's center.
* @param {number} rotation - The rotation to use for the polygon (and for the texture).
* @return {void}
* @instance
* @memberof drawutilssvg
**/
drawutilssvg.prototype.texturedPoly = function (textureImage, textureSize, polygon, polygonPosition, rotation) {
// const basePolygonBounds: Bounds = polygon.getBounds();
var rotatedScalingOrigin = new Vertex_1.Vertex(textureSize.min).clone().rotate(rotation, polygonPosition);
// const rotationCenter = polygonPosition.clone().add(rotatedScalingOrigin.difference(textureSize.min).inv());
// Create something like this
// ...
// <defs>
// <clipPath id="shape">
// <path fill="none" d="..."/>
// </clipPath>
// </defs>
// ...
// <g clip-path="url(#shape)">
// <g transform="scale(...)">
// <image width="643" height="643" transform="rotate(...)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
// </g>
// </g>
// </image>
// ...
var clipPathNode = this.makeNode("clipPath");
var clipPathId = "clippath_".concat(UIDGenerator_1.UIDGenerator.next()); // TODO: use a better UUID generator here?
clipPathNode.setAttribute("id", clipPathId);
var gNode = this.makeNode("g");
var imageNode = this.makeNode("image");
imageNode.setAttribute("x", "".concat(this._x(rotatedScalingOrigin.x)));
imageNode.setAttribute("y", "".concat(this._y(rotatedScalingOrigin.y)));
imageNode.setAttribute("width", "".concat(textureSize.width));
imageNode.setAttribute("height", "".concat(textureSize.height));
imageNode.setAttribute("href", textureImage.src);
// imageNode.setAttribute("opacity", "0.5");
// SVG rotations in degrees
imageNode.setAttribute("transform", "rotate(".concat(rotation * RAD_TO_DEG, ", ").concat(this._x(rotatedScalingOrigin.x), ", ").concat(this._y(rotatedScalingOrigin.y), ")"));
var pathNode = this.makeNode("path");
var pathData = [];
if (polygon.vertices.length > 0) {
var self_1 = this;
pathData.push("M", "".concat(this._x(polygon.vertices[0].x)), "".concat(this._y(polygon.vertices[0].y)));
for (var i = 1; i < polygon.vertices.length; i++) {
pathData.push("L", "".concat(this._x(polygon.vertices[i].x)), "".concat(this._y(polygon.vertices[i].y)));
}
}
pathNode.setAttribute("d", pathData.join(" "));
clipPathNode.appendChild(pathNode);
this.bufferedNodeDefs.appendChild(clipPathNode);
gNode.appendChild(imageNode);
gNode.setAttribute("transform-origin", "".concat(this._x(rotatedScalingOrigin.x), " ").concat(this._y(rotatedScalingOrigin.y)));
gNode.setAttribute("transform", "scale(".concat(this.scale.x, ", ").concat(this.scale.y, ")"));
var clipNode = this.makeNode("g");
clipNode.appendChild(gNode);
clipNode.setAttribute("clip-path", "url(#".concat(clipPathId, ")"));
// TODO: check if the image class is correct here or if we should use a 'clippedImage' class here
this._bindFillDraw(clipNode, "image", null, null); // No color, no lineWidth
return clipNode;
};
/**
* Draw the given (cubic) bézier curve.
*
* @method cubicBezier
* @param {XYCoords} startPoint - The start point of the cubic Bézier curve
* @param {XYCoords} endPoint - The end point the cubic Bézier curve.
* @param {XYCoords} startControlPoint - The start control point the cubic Bézier curve.
* @param {XYCoords} endControlPoint - The end control point the cubic Bézier curve.
* @param {string} color - The CSS color to draw the curve with.
* @param {number} lineWidth - (optional) The line width to use.
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.cubicBezier = function (startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth, strokeOptions) {
var node = this.makeCubicBezierNode(startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth, strokeOptions);
return this._bindNode(node, undefined);
};
/**
* Draw the given (cubic) Bézier path.
*
* The given path must be an array with n*3+1 vertices, where n is the number of
* curves in the path:
* <pre> [ point1, point1_startControl, point2_endControl, point2, point2_startControl, point3_endControl, point3, ... pointN_endControl, pointN ]</pre>
*
* @method cubicBezierPath
* @param {XYCoords[]} path - The cubic bezier path as described above.
* @param {string} color - The CSS colot to draw the path with.
* @param {number=1} lineWidth - (optional) The line width to use.
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.cubicBezierPath = function (path, color, lineWidth, strokeOptions) {
var node = this.makeNode("path");
this.applyStrokeOpts(node, strokeOptions);
if (!path || path.length == 0) {
return node;
}
// Draw curve
var d = ["M", this._x(path[0].x), this._y(path[0].y)];
// Draw curve path
var endPoint;
var startControlPoint;
var endControlPoint;
for (var i = 1; i < path.length; i += 3) {
startControlPoint = path[i];
endControlPoint = path[i + 1];
endPoint = path[i + 2];
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));
}
node.setAttribute("d", d.join(" "));
return this._bindFillDraw(node, "cubicBezierPath", color, lineWidth || 1);
};
/**
* Draw the given handle and handle point (used to draw interactive Bézier curves).
*
* The colors for this are fixed and cannot be specified.
*
* @method handle
* @param {Vertex} startPoint - The start of the handle.
* @param {Vertex} endPoint - The end point of the handle.
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.handle = function (startPoint, endPoint) {
// TODO: redefine methods like these into an abstract class?
this.point(startPoint, "rgb(0,32,192)");
this.square(endPoint, 5, "rgba(0,128,192,0.5)");
};
/**
* Draw a handle line (with a light grey).
*
* @method handleLine
* @param {XYCoords} startPoint - The start point to draw the handle at.
* @param {XYCoords} endPoint - The end point to draw the handle at.
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.handleLine = function (startPoint, endPoint) {
this.line(startPoint, endPoint, "rgb(128,128,128,0.5)");
};
/**
* Draw a 1x1 dot with the specified (CSS-) color.
*
* @method dot
* @param {XYCoords} p - The position to draw the dot at.
* @param {string} color - The CSS color to draw the dot with.
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.dot = function (p, color) {
var node = this.makeNode("line");
node.setAttribute("x1", "".concat(this._x(p.x)));
node.setAttribute("y1", "".concat(this._y(p.y)));
node.setAttribute("x2", "".concat(this._x(p.x)));
node.setAttribute("y2", "".concat(this._y(p.y)));
return this._bindFillDraw(node, "dot", color, 1);
};
/**
* Draw the given point with the specified (CSS-) color and radius 3.
*
* @method point
* @param {XYCoords} p - The position to draw the point at.
* @param {string} color - The CSS color to draw the point with.
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.point = function (p, color) {
var radius = 3;
var node = this.makeNode("circle");
node.setAttribute("cx", "".concat(this._x(p.x)));
node.setAttribute("cy", "".concat(this._y(p.y)));
node.setAttribute("r", "".concat(radius));
return this._bindFillDraw(node, "point", color, 1);
};
/**
* Draw a circle with the specified (CSS-) color and radius.<br>
* <br>
* Note that if the x- and y- scales are different the result will be an ellipse rather than a circle.
*
* @method circle
* @param {XYCoords} center - The center of the circle.
* @param {number} radius - The radius of the circle.
* @param {string} color - The CSS color to draw the circle with.
* @param {number=} lineWidth - (optional) The line width to use; default is 1.
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.circle = function (center, radius, color, lineWidth, strokeOptions) {
// Todo: draw ellipse when scalex!=scaley
var node = this.makeNode("circle");
this.applyStrokeOpts(node, strokeOptions);
node.setAttribute("cx", "".concat(this._x(center.x)));
node.setAttribute("cy", "".concat(this._y(center.y)));
node.setAttribute("r", "".concat(radius * this.scale.x)); // y?
return this._bindFillDraw(node, "circle", color, lineWidth || 1);
};
/**
* Draw a circular arc (section of a circle) with the given CSS color.
*
* @method circleArc
* @param {XYCoords} center - The center of the circle.
* @param {number} radius - The radius of the circle.
* @param {number} startAngle - The angle to start at.
* @param {number} endAngle - The angle to end at.
* @param {string} color - The CSS color to draw the circle with.
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.circleArc = function (center, radius, startAngle, endAngle, color, lineWidth, strokeOptions) {
var node = this.makeNode("path");
this.applyStrokeOpts(node, strokeOptions);
var arcData = CircleSector_1.CircleSector.circleSectorUtils.describeSVGArc(this._x(center.x), this._y(center.y), radius * this.scale.x, // y?
startAngle, endAngle);
node.setAttribute("d", arcData.join(" "));
return this._bindFillDraw(node, "circleArc", color, lineWidth || 1);
};
/**
* Draw an ellipse with the specified (CSS-) color and thw two radii.
*
* @method ellipse
* @param {XYCoords} center - The center of the ellipse.
* @param {number} radiusX - The radius of the ellipse.
* @param {number} radiusY - The radius of the ellipse.
* @param {string} color - The CSS color to draw the ellipse with.
* @param {number=} lineWidth - (optional) The line width to use; default is 1.
* @param {number=} rotation - (optional, default=0) The rotation of the ellipse.
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.ellipse = function (center, radiusX, radiusY, color, lineWidth, rotation, strokeOptions) {
if (typeof rotation === "undefined") {
rotation = 0.0;
}
var node = this.makeNode("ellipse");
this.applyStrokeOpts(node, strokeOptions);
node.setAttribute("cx", "".concat(this._x(center.x)));
node.setAttribute("cy", "".concat(this._y(center.y)));
node.setAttribute("rx", "".concat(radiusX * this.scale.x));
node.setAttribute("ry", "".concat(radiusY * this.scale.y));
// node.setAttribute( 'style', `transform: rotate(${rotation} ${center.x} ${center.y})` );
node.setAttribute("transform", "rotate(".concat((rotation * 180) / Math.PI, " ").concat(this._x(center.x), " ").concat(this._y(center.y), ")"));
return this._bindFillDraw(node, "ellipse", color, lineWidth || 1);
};
/**
* Draw square at the given center, size and with the specified (CSS-) color.<br>
* <br>
* Note that if the x-scale and the y-scale are different the result will be a rectangle rather than a square.
*
* @method square
* @param {XYCoords} center - The center of the square.
* @param {number} size - The size of the square.
* @param {string} color - The CSS color to draw the square with.
* @param {number=} lineWidth - (optional) The line width to use; default is 1.
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {SVGElement}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.square = function (center, size, color, lineWidth, strokeOptions) {
var node = this.makeNode("rectangle");
this.applyStrokeOpts(node, strokeOptions);
node.setAttribute("x", "".concat(this._x(center.x - size / 2.0)));
node.setAttribute("y", "".concat(this._y(center.y - size / 2.0)));
node.setAttribute("width", "".concat(size * this.scale.x));
node.setAttribute("height", "".concat(size * this.scale.y));
return this._bindFillDraw(node, "square", color, lineWidth || 1);
};
/**
* Draw a rectangle.
*
* @param {XYCoords} position - The upper left corner of the rectangle.
* @param {number} width - The width of the rectangle.
* @param {number} height - The height of the rectangle.
* @param {string} color - The color to use.
* @param {number=1} lineWidth - (optional) The line with to use (default is 1).
* @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
*
* @return {SVGElement}
* @instance
* @memberof drawutilssvg
**/
drawutilssvg.prototype.rect = function (position, width, height, color, lineWidth, strokeOptions) {
var node = this.makeNode("rect");
this.applyStrokeOpts(node, strokeOptions);
node.setAttribute("x", "".concat(this._x(position.x)));
node.setAttribute("y", "".concat(this._y(position.y)));
node.setAttribute("width", "".concat(width * this.scale.x));
node.setAttribute("height", "".concat(height * this.scale.y));
return this._bindFillDraw(node, "rect", color, lineWidth || 1);
};
/**
* Draw a grid of horizontal and vertical lines with the given (CSS-) color.
*
* @method grid
* @param {XYCoords} center - The center of the grid.
* @param {number} width - The total width of the grid (width/2 each to the left and to the right).
* @param {number} height - The total height of the grid (height/2 each to the top and to the bottom).
* @param {number} sizeX - The horizontal grid size.
* @param {number} sizeY - The vertical grid size.
* @param {string} color - The CSS color to draw the grid with.
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.grid = function (center, width, height, sizeX, sizeY, color) {
// console.log("grid");
// const node: SVGElement = this.makeNode("pattern");
// var patternId = "pattern_id_" + Math.floor(Math.random() * 65365);
// node.setAttribute("id", patternId);
// node.setAttribute("viewBox", `0,0,${sizeX},${sizeY}`);
// node.setAttribute("width", `${sizeX}`);
// node.setAttribute("height", `${sizeX}`);
// var pattern: SVGElement = this.makeNode("path");
// const d: SVGPathParams = [];
// d.push("M", sizeX / 2.0, 0);
// d.push("L", sizeX / 2.0, sizeY);
// d.push("M", 0, sizeY / 2.0);
// d.push("L", sizeX, sizeY / 2.0);
// node.setAttribute("d", d.join(" "));
// this.bufferedNodeDefs.append(pattern);
// const fillNode: SVGElement = this.makeNode("rect");
// // For some strange reason SVG rotation transforms use degrees instead of radians
// // Note that the background does not scale with the zoom level (always covers full element)
// fillNode.setAttribute("x", "0");
// fillNode.setAttribute("y", "0");
// fillNode.setAttribute("width", `${this.canvasSize.width}`);
// fillNode.setAttribute("height", `${this.canvasSize.height}`);
// fillNode.setAttribute("fill", `url(#${patternId})`);
// return this._bindFillDraw(fillNode, "grid", "red", 1);
var node = this.makeNode("path");
var d = [];
var yMin = -Math.ceil((height * 0.5) / sizeY) * sizeY;
var yMax = height / 2;
for (var x = -Math.ceil((width * 0.5) / sizeX) * sizeX; x < width / 2; x += sizeX) {
d.push("M", this._x(center.x + x), this._y(center.y + yMin));
d.push("L", this._x(center.x + x), this._y(center.y + yMax));
}
var xMin = -Math.ceil((width * 0.5) / sizeX) * sizeX;
var xMax = width / 2;
for (var y = -Math.ceil((height * 0.5) / sizeY) * sizeY; y < height / 2; y += sizeY) {
d.push("M", this._x(center.x + xMin), this._y(center.y + y));
d.push("L", this._x(center.x + xMax), this._y(center.y + y));
}
node.setAttribute("d", d.join(" "));
return this._bindFillDraw(node, "grid", color, 1);
};
/**
* Draw a raster of crosshairs in the given grid.<br>
*
* This works analogue to the grid() function
*
* @method raster
* @param {XYCoords} center - The center of the raster.
* @param {number} width - The total width of the raster (width/2 each to the left and to the right).
* @param {number} height - The total height of the raster (height/2 each to the top and to the bottom).
* @param {number} sizeX - The horizontal raster size.
* @param {number} sizeY - The vertical raster size.
* @param {string} color - The CSS color to draw the raster with.
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.raster = function (center, width, height, sizeX, sizeY, color) {
var node = this.makeNode("path");
var d = [];
for (var x = -Math.ceil((width * 0.5) / sizeX) * sizeX; x < width / 2; x += sizeX) {
for (var y = -Math.ceil((height * 0.5) / sizeY) * sizeY; y < height / 2; y += sizeY) {
// Draw a crosshair
d.push("M", this._x(center.x + x) - 4, this._y(center.y + y));
d.push("L", this._x(center.x + x) + 4, this._y(center.y + y));
d.push("M", this._x(center.x + x), this._y(center.y + y) - 4);
d.push("L", this._x(center.x + x), this._y(center.y + y) + 4);
}
}
node.setAttribute("d", d.join(" "));
return this._bindFillDraw(node, "raster", color, 1);
};
/**
* Draw a diamond handle (square rotated by 45°) with the given CSS color.
*
* It is an inherent featur of the handle functions that the drawn elements are not scaled and not
* distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn
* as even shaped diamonds.
*
* @method diamondHandle
* @param {XYCoords} center - The center of the diamond.
* @param {number} size - The x/y-size of the diamond.
* @param {string} color - The CSS color to draw the diamond with.
* @return {void}
* @instance
* @memberof drawutilssvg
*/
drawutilssvg.prototype.diamondHandle = function (center, size, color) {
var node = this.makeNode("path");
var d = [
"M",
this._x(center.x) - size / 2.0,
this._y(center.y),
"L",
this._x(center.x),
this._y(ce