mascot-vis 3.0.0 → 3.0.1

package/src-old/renderer/WebGLRenderer.js

@@ -1,1097 +0,0 @@
-import * as PIXI from "pixi.js";
-import { Container, Graphics, TextStyle } from "pixi.js";
-import { ItemType, Errors } from "../util/Constants";
-import * as D3 from "d3";
-
-
-let DEG2RAD = Math.PI / 180;
-export default class WebGLRenderer {
-
-	constructor(canvasId) {
-		this._canvasId = canvasId;
-		this._doesCollectionHaveBounds = false;
-		this._app = new PIXI.Application({
-			antialias: true,    // default: false
-			width: 1600,
-			height: 1000,
-			view: document.getElementById(this._canvasId)
-		});
-		this._app.renderer.autoResize = true;
-	}
-
-	/**
-	 * @param {Scene} scene 
-	 * @param {string} id 
-	 * @param {*} args 
-	 */
-    render(scene, params) {
-		let args = params ? params : {};
-		this._app.renderer.backgroundColor = toHexColor(scene.fillColor ? scene.fillColor : "#fff");
-		this._doesCollectionHaveBounds = !!args.collectionBounds;
-		this._app.stage.removeChildren();
-		this._app.renderer.clear();
-		let final = this._renderItem(scene);
-		this._app.stage.addChild(final);
-	}
-
-	// VM2356:14 Uncaught (in promise) TypeError: renderer.clear is not a function at eval (eval at loadScript (demoLoader.js:25:15), <anonymous>:14:32)
-	clear() {
-	}
-
-	_renderItem(item) {
-		switch (item.type) {
-			case ItemType.Ellipse:
-			case ItemType.LinearGradient:
-				throwError("mark", item, Errors.FEATURE_NOT_IMPLEMENTED);
-				break;
-
-			case ItemType.Circle:
-				return this._renderCircle(item);
-
-			case ItemType.Pie:
-				return this._renderArc(item);
-
-			case ItemType.Area:
-				return this._renderArea(item);
-
-			case ItemType.Polygon:
-				return this._renderPolygon(item);
-
-			case ItemType.Axis:
-				return this._renderAxis(item);
-
-			case ItemType.Collection:
-				return this._renderCollection(item);
-
-			case ItemType.Glyph:
-			case ItemType.Group:
-			case ItemType.Gridlines:
-			case ItemType.Legend: 
-			case ItemType.Scene:
-				return this._renderGroup(item);
-
-			case ItemType.Path:
-				return this._renderPath(item);
-				
-			case ItemType.Line:
-				return this._renderLinearPath(item);
-
-			case ItemType.Rect:
-				return this._renderRectangle(item);
-
-			case ItemType.PointText:
-				return this._renderText(item);
-
-			case ItemType.Arc:
-				return this._renderArc(item);
-
-			case ItemType.Image:
-				return this._renderImage(item);
-
-			case ItemType.Link:
-				return this._renderLink(item);
-
-			case ItemType.Ring:
-				return this._renderRing(item);
-
-			default:
-				console.log(item.type);
-				throw new Error(`Expect: itemType, Actual: ${item}\nWait that's illegal`)
-		}
-	}
-
-	/**
-	 * @param {RectPath} rect 
-	 * @returns {PIXI.Rectangle}
-	 */
-	_renderRectangle(rect) {
-		let rectangle = new Graphics();
-		decorate(rectangle, rect.styles);
-		rectangle.lineStyle(
-			rect.styles["strokeWidth"],
-			toHexColor(rect.styles["strokeColor"])
-		);
-		beginGradientOrColorFill(rect.styles, rectangle, rect.height);
-		rectangle.drawRect(0, 0, rect.width, rect.height);
-		rectangle.x = rect.left;
-		rectangle.y = rect.top;
-		rectangle.endFill();
-		return rectangle;
-	}
-
-	/**
-	 * @param {PointText} pointText
-	 * @returns {PIXI.Text}
-	 */
-	_renderText(pointText) {
-		let style = new TextStyle({
-			fontSize: pointText.styles["fontSize"],
-			fontFamily: pointText.styles["fontFamily"],
-			fontWeight: styleFontWeight2PixiFontWeight(pointText.styles["fontWeight"]),
-			fill: toHexColor(pointText.styles["fillColor"]),
-		})
-
-        //// PIXI.Text converts each 1em into 12px, which is not what we want.
-        // Therefore, here, we convert each 1em into 16px:
-        let fontSize = style.fontSize;
-        if (typeof fontSize === 'string' || fontSize instanceof String) {
-            if ((/^\d+em$/).test(fontSize)) {
-                let number = parseInt(style.fontSize.substring(0, style.fontSize.length - 2));
-                number *= 16 ; // 1em = 16px
-                fontSize = number.toString().concat("px");
-            }
-        }
-        style.fontSize = fontSize;
-		/////
-
-		let pixiText = new PIXI.Text(pointText.text, style);
-		let container = new Container();
-		decorate(pixiText, pointText.styles);
-
-		pixiText.x = pointText.x;
-		pixiText.y = pointText.y;
-
-		pixiText.anchor.set(... styleAnchor2PixiAnchor(pointText.anchor));
-		container.addChild(pixiText);
-
-		let pivot = rotation2PixiPivot(pointText._rotate);
-		container.pivot.set(pivot[0], pivot[1]);
-		container.angle = rotation2PixiAngle(pointText._rotate);
-		container.position.set(pivot[0], pivot[1]);
-
-		return container;
-	} 
-
-	/**
-	 * @param {Group} group
-	 * @returns {Container}
-	 */
-	_renderGroup(group) {
-		let container = new Container();
-		for (const item of group.children) {
-			let t = this._renderItem(item);
-			if (t == undefined) throw new Error();
-			container.addChild(t);
-		}
-
-		return container;
-	}
-
-	/**
-	 * 
-	 * @param {Group} axis 
-	 * @returns 
-	 */
-	_renderAxis(axis) {
-		let container = this._renderGroup(axis);
-		let pivot = rotation2PixiPivot(axis._rotate);
-		container.pivot.set(pivot[0], pivot[1]);
-		container.angle = rotation2PixiAngle(axis._rotate);
-		container.position.set(pivot[0], pivot[1]);
-		return container;
-	}
-
-	/**
-	 * @param {Collection} collection 
-	 * @returns {Container}
-	 */
-	_renderCollection(collection) {
-		let container = new Container();
-		let group = this._renderGroup(collection);
-		container.addChild(group);
-
-		// ------------------ Render Bounds -----------------------------------
-
-		if (!this._doesCollectionHaveBounds) return container;
-
-		let contour = new Graphics();
-		// short for leading dash relative start position
-		let leadDashRelStrtPos = 0;
-		let bounds = collection.bounds;
-		let l = bounds.left;
-		let r = bounds.right;
-		let t = bounds.top;
-		let b = bounds.bottom;
-		let style = { 
-			strokeWidth: 1,
-			color: 0x1ecb40,
-			dashLength: 5,
-			dashSpacing: 5
-		}
-
-		leadDashRelStrtPos = drawDash(l, r,  t, leadDashRelStrtPos, style, contour);
-		leadDashRelStrtPos = drawDash(t, b, -r, leadDashRelStrtPos, style, contour);
-		leadDashRelStrtPos = drawDash(r, l,  b, leadDashRelStrtPos, style, contour);
-							drawDash(b, t, -l, leadDashRelStrtPos, style, contour);
-
-		container.addChild(contour);
-		return container;
-
-		// ------------------ End ---------------------------------------------
-
-		/**
-		 * @param {Graphics} graphics 
-		 * @param {Number} leadDashRelStrtPos the projected start position of a leading dash. 
-		 * for example, if a dash is broken by the end of last edge, 
-		 * the leading dash of next edge is incomplete and thus, the projected start point would be beyond 
-		 * the start point. Therefore, it is marked with a negative value, RELATIVE to the starting point
-		 *        V the starting point of this dash is thus -1
-		 * |---- -|--- ----
-		 * @param {Number} dimensionalConstrain it can be x or y, depends on which dimension remains unchanged
-		 * positive values indicate an horizontal edge
-		 * negative values indicate a vertical edge
-		 * @returns {Number} leading dash start position for next edge
-		 */
-		function drawDash(start, end, dimensionalConstrain, leadDashRelStrtPos, style, graphics) {
-			// if the dash line is going left -> right, then direction = +1. v.v.
-			let dir = start <= end ? 1 : -1;
-
-			// if the dash is a remain of last cut-off dash, it actually starts at the starting point
-			// otherwise just use the start position
-			// note here next.point is a reference, 
-			// it is a hack so that changes to next.point can be reflected to p as well
-			let next = leadDashRelStrtPos >= 0 ?
-					{point: start + leadDashRelStrtPos * dir} :
-					{point: start};
-
-			// p stands for pointer. It's used as an abstraction 
-			// so that this function can be applied to both horizontal and vertical scenarios
-			let p = dimensionalConstrain > 0 ? 
-					[next, { point: dimensionalConstrain }] :
-					[{ point: -dimensionalConstrain }, next];
-
-			graphics.lineStyle({
-				width: style.strokeWidth,
-				color: style.color
-			})
-			// move to the actual start
-			graphics.moveTo(p[0].point, p[1].point);
-			// set the next point to the end of first dash (regardless of whether it's complete)
-			next.point = leadDashRelStrtPos * dir + start + style.dashLength * dir;
-			graphics.lineTo(p[0].point, p[1].point);
-
-			let isDrawing = false;
-			// move next point to (the start position)of the second dash
-			next.point += style.dashLength * dir;
-			// if the next point is with the range from start to end
-			while (next.point * dir <= end * dir) {
-				if (isDrawing) {
-					graphics.lineTo(p[0].point, p[1].point);
-					isDrawing = false;
-					next.point += style.dashSpacing * dir;
-				} else {
-					graphics.moveTo(p[0].point, p[1].point);
-					isDrawing  = true;
-					next.point += style.dashLength * dir;
-				}
-			}
-
-			// finish the last dash
-			// if it's still drawing, cut it off (and continue it in the next edge)
-			if (isDrawing) {
-				// handle the horizontal and vertical cases
-				if (dimensionalConstrain > 0) graphics.lineTo(end, dimensionalConstrain);
-				else graphics.lineTo(-dimensionalConstrain, end);
-				return (end - next.point) * dir;
-			// otherwise it's fine, let the math handle it automagically
-			} else {
-				return (next.point - end) * dir;
-			}
-		}
-	}
-
-	/**
-	 * @param {AreaPath} areaPath 
-	 */
-	_renderArea(areaPath) {
-		switch (areaPath.curveMode) {
-			case "linear":
-				return this._renderPolygon(areaPath);
-
-			case "basis":
-				return this._renderBezierArea(areaPath);
-		
-			default:
-				return throwError("areaPath", areaPath, Errors.FEATURE_NOT_IMPLEMENTED);
-		}
-	}
-
-	_renderBezierArea(areaPath) {
-		let area = new Graphics();
-		decorate(area, areaPath.styles);
-		area.lineStyle({
-			width: areaPath.styles["strokeWidth"],
-			color: toHexColor(areaPath.styles["strokeColor"])
-		})
-		let pathData = areaPath.getSVGPathData();
-		let pathJSON = parseDPath(pathData);
-
-		beginGradientOrColorFill(areaPath.styles, area, areaPath.bounds.height);
-		drawOnGraphicsFromJSONData(area, pathJSON);
-		area.endFill();
-
-		return area;
-	}
-
-	/**
-	 * @param {PolygonPath} polygonPath 
-	 */
-	_renderPolygon(polygonPath) {
-		let container = new PIXI.Container();
-
-		// ------------------ Contour -----------------------------------------
-
-		let contour = this._renderLinearPath(polygonPath);
-		contour.getChildAt(0).lineTo(
-			polygonPath.vertices[0].x, 
-			polygonPath.vertices[0].y
-		);
-
-		// ------------------ Fill --------------------------------------------
-
-		let polygonFill = new PIXI.Graphics();
-		decorate(polygonFill, polygonPath.styles);
-		let path = [];
-		for (const vertex of polygonPath.vertices) {
-			path.push(vertex.x - polygonPath.bounds.left); 
-			path.push(vertex.y - polygonPath.bounds.top);
-		}
-		//polygonFill.beginFill(toHexColor(polygonPath.styles["fillColor"]));
-		beginGradientOrColorFill(polygonPath.styles, polygonFill, polygonPath.bounds.height);
-		polygonFill.drawPolygon(path);
-		polygonFill.x += polygonPath.bounds.left;
-		polygonFill.y += polygonPath.bounds.top;
-		polygonFill.endFill();
-
-		// ------------------ Finalize ----------------------------------------
-		
-		container.addChild(polygonFill);
-		container.addChild(contour);
-		return container;
-	}
-
-	/**
-	 * @param {Path} path 
-	 * @returns {Container}
-	 */
-	_renderPath(path) {
-
-		switch (path.curveMode) {
-			case "linear":
-				return this._renderLinearPath(path);
-
-			case "bumpX":
-			case "natural":
-				return this._renderBezierPath(path);
-		
-			default:
-				throwError("path", path, Errors.FEATURE_NOT_IMPLEMENTED);
-				break;
-		}
-
-		// ------------------ End ---------------------------------------------
-
-	}
-
-	/**
-	 * 
-	 * @param {Path} path 
-	 * @returns 
-	 */
-	_renderLinearPath(path) {
-		let container = new Container();
-		let line = new Graphics();
-		let isContinuous = path.styles["strokeDash"] == "none";
-		decorate(line, path.styles);
-		let vertex0 = path.vertices[0];
-		line.lineStyle({
-			width: path.styles["strokeWidth"],
-			color: toHexColor(path.styles["strokeColor"])
-		})
-
-		line.moveTo(vertex0.x, vertex0.y);
-		if (isContinuous) {
-			for (let i = 1; i < path.vertices.length; i++) {
-				const vertex = path.vertices[i];
-				line.lineTo(vertex.x, vertex.y);
-			}
-		} else {
-			drawDashLine(path.vertices, path.styles["strokeDash"], line);
-		}
-		
-		container.addChild(line);
-
-		// ------------------ Render vertices ---------------------------------
-
-		for (let i = 0; i < path.vertices.length; i++) {
-			let vertex = path.vertices[i];
-			let renderedVertex = this._renderVertex(vertex);
-			if (renderedVertex != null) container.addChild(renderedVertex);
-		}
-
-		return container;
-	}
-
-	/**
-	 * @param {Path} path 
-	 */
-	_renderBezierPath(path) {
-		let container = new Container();
-		let graphics = new Graphics();
-		decorate(graphics, path.styles);
-		graphics.lineStyle({
-			width: path.styles["strokeWidth"],
-			color: toHexColor(path.styles["strokeColor"])
-		})
-		let pathData = path.getSVGPathData();
-		let pathJSON = parseDPath(pathData);
-		drawOnGraphicsFromJSONData(graphics, pathJSON);
-		container.addChild(graphics);
-
-		// ------------------ Render vertices ---------------------------------
-
-		for (let i = 0; i < path.vertices.length; i++) {
-			let vertex = path.vertices[i];
-			let renderedVertex = this._renderVertex(vertex);
-			if (renderedVertex != null) container.addChild(renderedVertex);
-		}
-
-		return container;
-	}
-
-	/**
-	 * NULLABLE!!!
-	 * @param {Vertex} vertex 
-	 * @returns {Container} null if vertex shape is undefined
-	 */
-	_renderVertex(vertex) {
-		switch (vertex.shape) {
-			case "rect":
-				return renderRectVertex(vertex);
-
-			case "circle":
-				return renderCircleVertex(vertex);
-
-			case undefined:
-				return null;
-
-			default:
-				throwError("vertex shape", vertex.shape, Errors.FEATURE_NOT_IMPLEMENTED);
-		}
-
-		function renderRectVertex(vertex) {
-			let rectVertex = new PIXI.Graphics();
-			rectVertex.lineStyle({
-				width: vertex.strokeWidth,
-				color: toHexColor(vertex.strokeColor)
-			})
-			rectVertex.beginFill(toHexColor(vertex.fillColor))
-			rectVertex.drawRect(
-				vertex.x - vertex.width / 2,
-				vertex.y - vertex.height / 2,
-				vertex.width,
-				vertex.height);
-			rectVertex.endFill();
-
-			return rectVertex;
-		}
-
-		function renderCircleVertex(vertex) {
-			let circle = new PIXI.Graphics();
-			circle.lineStyle({
-				width: vertex.strokeWidth,
-				color: toHexColor(vertex.strokeColor)
-			})
-			circle.alpha = vertex.opacity;
-			circle.beginFill(toHexColor(vertex.fillColor));
-			circle.drawCircle(vertex.x, vertex.y, vertex.radius);
-			circle.endFill();
-
-			return circle;
-		}
-	}
-
-	/**
-	 * @param {CirclePath} circPath
-	 * @returns {PIXI.Rectangle}
-	 */
-	_renderCircle(circPath) {
-		let circle = new Graphics();
-		decorate(circle, circPath.styles);
-		circle.lineStyle(
-			circPath.styles["strokeWidth"],
-			toHexColor(circPath.styles["strokeColor"])
-		);
-		beginGradientOrColorFill(circPath.styles, circle, circPath.height);
-		circle.drawCircle(
-			circPath.x, 
-			circPath.y,
-			circPath.radius
-		);
-		circle.endFill();
-		return circle;
-	}
-
-	/**
-	 * @param {RingPath} ringPath
-	 * @returns {PIXI.Rectangle}
-	 */
-	_renderRing(ringPath) {
-		let ring = new Graphics();
-		//decorate(ring, ringPath.styles);
-		ring.lineStyle(
-			(ringPath.outerRadius - ringPath.innerRadius),
-			toHexColor(ringPath.styles["fillColor"])
-		);
-		//beginGradientOrColorFill(ringPath.styles, ring, ringPath.height);
-		ring.drawCircle(
-			ringPath.x, 
-			ringPath.y,
-			(ringPath.innerRadius + ringPath.outerRadius)/2
-		);
-		ring.endFill();
-		return ring;
-	}
-
-	// /**
-	//  * @param {PiePath} piePath 
-	//  */
-	// _renderPiePath(piePath) {
-	// 	let arc = new PIXI.Graphics();
-	// 	arc.lineStyle({
-	// 		color: toHexColor(piePath.styles["strokeColor"]),
-	// 		width: piePath.styles["strokeWidth"]
-	// 	})
-	// 	arc.beginFill(toHexColor(piePath.styles["fillColor"]))
-	// 	arc.moveTo(piePath.x, piePath.y);
-	// 	arc.arc(
-	// 		piePath.x, 
-	// 		piePath.y, 
-	// 		piePath.radius, 
-	// 		-piePath.endAngleRad,
-	// 		-piePath.startAngleRad,
-	// 	);
-		
-	// 	arc.lineTo(piePath.x, piePath.y);
-	// 	arc.endFill();
-
-	// 	return arc;
-	// }
-
-	/**
-	 * @param {ArcPath} arcPath 
-	 */
-	_renderArc(arcPath) {
-		let arc = new Graphics();
-		arc.lineStyle({
-			color: toHexColor(arcPath.styles["strokeColor"]),
-			width: arcPath.styles["strokeWidth"]
-		})
-		arc.beginFill(toHexColor(arcPath.styles["fillColor"]));
-		//arc.moveTo(arcPath.x, arcPath.y);
-		arc.arc(
-			arcPath.x, 
-			arcPath.y, 
-			arcPath.outerRadius,
-			-arcPath.endAngle * DEG2RAD,
-			-arcPath.startAngle * DEG2RAD,
-		);
-
-		arc.arc(
-			arcPath.x, 
-			arcPath.y, 
-			arcPath.innerRadius,
-			-arcPath.startAngle * DEG2RAD,
-			-arcPath.endAngle * DEG2RAD,
-			true
-		);
-
-		//arc.lineTo(arcPath.x, arcPath.y);
-		arc.endFill();
-
-		return arc;
-	}
-
-	/**
-	 * @param {Image} image 
-	 */
-	_renderImage(image) {
-		let sprite = PIXI.Sprite.from(image.src);
-		sprite.x = image.x;
-		sprite.y = image.y;
-		sprite.width = image.width;
-		sprite.height = image.height;
-
-		return sprite;
-	}
-
-	/**
-	 * @param {Link} link 
-	 */
-	_renderLink(link) {
-		switch (link.linkMode) {
-			case "arcClockwise":
-			case "curveVertical":
-			case "arcAntiClockwise":
-			case "linear":
-				return renderLinearLink(link);
-		
-			default:
-				throwError("link", link.curveMode, "unexpected curvemode")
-		}
-
-		/**
-		 * @param {Link} link 
-		 */
-		function renderLinearLink(link) {
-			let graphics = new Graphics();
-			decorate(graphics, link.styles);
-			graphics.lineStyle({
-				color: toHexColor(link.styles["strokeColor"]),
-				width: link.styles["strokeWidth"]
-			})
-			drawOnGraphicsFromJSONData(graphics, parseDPath(link.getSVGPathData()));
-
-			return graphics;
-		}
-	}
-}
-
-/**
- * Set visibility and alpha
- * @param {DisplayObject} displayObject 
- * @param {*} styles 
- */
-function decorate(displayObject, styles) {
-	displayObject.visible = styleVisiblity2PixiVisible(styles["visibility"]);
-	displayObject.alpha = styleOpacity2PixiAlpha(styles["opacity"]);
-}
-
-function styleFontWeight2PixiFontWeight(fontWeight) {
-	switch (fontWeight) {
-		case "regular":
-		case "normal":
-			return "normal";
-
-		case "bold":
-			return "bold";
-
-		default:
-			console.log(fontWeight);
-			throwError("font weight", fontWeight, Errors.FEATURE_NOT_IMPLEMENTED);
-	}
-}
-
-function styleAnchor2PixiAnchor(anchor) {
-	let horizontal, vertical;
-
-	switch (anchor[0]) {
-		case "left":
-			horizontal = 0.0;
-			break;
-
-		case "center":
-			horizontal = 0.5;
-			break;
-
-		case "right":
-			horizontal = 1.0;
-			break;
-
-		default:
-			throwError("x anchor", anchor[0], Errors.UNKNOWN_ANCHOR);
-	}
-
-	switch (anchor[1]) {
-		// TODO: hanging is actually not quite the same as top
-		case "hanging":
-		case "top":
-			vertical = 0.0;
-			break;
-		// TODO: central is not quite the same as middle
-		case "central":
-		case "middle":
-			vertical = 0.5;
-			break;
-		case "bottom":
-			vertical = 1.0;
-			break;
-		default:
-			throwError("y anchor", anchor[1], Errors.UNKNOWN_ANCHOR);
-	}
-
-	return [horizontal, vertical];
-}
-
-/**
- * @param {string} cssColor 
- * @returns {number}
- */
-function toHexColor(cssColor) {
-	let d3Color = D3.color(cssColor);
-	if (d3Color == null) {
-		return null;
-	} else {
-		let hexString = d3Color.formatHex();
-		return PIXI.utils.string2hex(hexString);
-	}
-}
-
-function styleVisiblity2PixiVisible(visibility) {
-	switch (visibility) {
-		case "hidden":
-			return false;
-		case null:
-		case undefined:
-		case "visible":
-		default:
-			return true;		
-	}
-}
-
-function rotation2PixiAngle(rotation) {
-	if (rotation === undefined || typeof rotation[0] != "number") {
-		return 0
-	} else {
-		return rotation[0];
-	}
-}
-
-function rotation2PixiPivot(rotation) {
-	if (rotation === undefined || typeof rotation[0] != "number") {
-		return [0, 0];
-	} else {
-		return rotation.slice(1);
-	}
-}
-
-function styleOpacity2PixiAlpha(opacity) {
-	switch (opacity) {
-		case undefined:
-		case null:
-			return 1;
-	
-		default:
-			return opacity;
-	}
-}
-
-function throwError(name, value, err) {
-	console.log(value);
-	throw new Error(`${err}. Source: ${name}, Actual: `);
-}
-
-/**
- * Can fill graphic with color or linear gradient accordingly. 
- * Can also handle transparency
- * @param {Graphics} graphics 
- */
-function beginGradientOrColorFill(styles, graphics, height) {
-	let fillColor = styles["fillColor"];
-
-	// if no fill color
-	if (fillColor == "none") return;
-
-	let hexColor = toHexColor(fillColor);
-	// if valid color
-	if (hexColor != null) {
-		graphics.beginFill(hexColor);
-	// then it must be texture
-	} else {
-		graphics.beginTextureFill({
-			color: 0xffffff,
-			texture: createLinearGradientTexture(height, fillColor.stops, fillColor.y1 > fillColor.y2)
-		});
-	}
-}
-
-function createLinearGradientTexture(height, stops, isReversed) {
-
-	const canvas = document.createElement("canvas");
-	canvas.height = height;
-	canvas.width = 1;
-    const ctx = canvas.getContext("2d");
-
-    const grd = ctx.createLinearGradient(0, 0, 0, height);
-	for (let i = 0; i < stops.length; i++) {
-		if (isReversed) {
-			grd.addColorStop(1 - stops[i].offset / 100, stops[i].color);
-		} else {
-			grd.addColorStop(stops[i].offset / 100, stops[i].color);
-		}
-	}
-
-    ctx.fillStyle = grd;
-    ctx.fillRect(0, 0, 1, height);
-
-	return PIXI.Texture.from(canvas);
-}
-
-/**
- * @param {Graphics} graphics
- * @param {Array} json
- */
-function drawOnGraphicsFromJSONData(graphics, json) {
-
-	// Draw a closed shape accordingly
-	let last = json.pop();
-	let callBack = () => {};
-	if (last.code.toUpperCase() == "Z") {
-		callBack = () => graphics.lineTo(json[0].end.x, json[0].end.y);
-	} else {
-		json.push(last);
-	}
-
-	// Actual drawing
-	for (const data of json) {
-		draw(data, graphics);
-	}
-
-	callBack();
-}
-
-/**
- * @param {Graphics} graphics 
- * @returns {Graphics}
- */
-function draw(data, graphics) {
-	switch (data.code.toUpperCase()) {
-		case "M":
-			graphics.moveTo(data.end.x, data.end.y);
-			break;
-
-		case "L":
-			graphics.lineTo(data.end.x, data.end.y);
-			break;
-
-		case "Q":
-			graphics.bezierCurveTo(
-				data.cp1.x, 
-				data.cp1.y, 
-				data.cp1.x, 
-				data.cp1.y, 
-				data.end.x, 
-				data.end.y
-			);
-			break;
-
-		case "C":
-			graphics.bezierCurveTo(
-				data.cp1.x, 
-				data.cp1.y, 
-				data.cp2.x, 
-				data.cp2.y, 
-				data.end.x, 
-				data.end.y
-			);
-			break;
-
-		case "Z":
-			throw new Error("Unexpected \"z\" marker. There's something wrong, I can feel it");
-		case "A":
-
-			graphics.endFill(); // to undo moveTo(), to avoid straight lines between vertices
-
-			// the SVG command , like M 250 460 A 7.5 7.5 0 0 1 265 460, has rotation in degrees.
-			// ...converting rotation to radians
-			const degrees = data.rotation; 
-			const radians = degrees * (Math.PI / 180);
-			
-			graphics.arc(data.end.x - data.radii.x, data.end.y, data.radii.y, 0 + radians, Math.PI + radians, data.clockwise);
-			break;		
-		default:
-			return throwError("data", data, Errors.FEATURE_NOT_IMPLEMENTED);
-	}
-}
-
-// Adapted from https://codepen.io/unrealnl/pen/aYaxBW
-function drawDashLine(vertices, strokeDash, graphics) {
-	let i;
-	let p1;
-	let p2;
-	let dashLeft = 0;
-	let gapLeft = 0;
-	let dashAndGap = strokeDash.split(" ");
-	let dash = Number(dashAndGap[0]);
-	let gap = Number(dashAndGap[1]);
-
-	for (i = 0; i < vertices.length; i++) {
-		p1 = vertices[i];
-		if (i == vertices.length - 1) break;
-		else p2 = vertices[i + 1];
-
-		let dx = p2.x - p1.x;
-		let dy = p2.y - p1.y;
-		let len = Math.sqrt(dx * dx + dy * dy);
-		let normal = { x: dx / len, y: dy / len };
-		let progressOnLine = 0;
-		graphics.moveTo(p1.x + gapLeft * normal.x, p1.y + gapLeft * normal.y);
-
-		while (progressOnLine <= len) {
-			progressOnLine += gapLeft;
-			if (dashLeft > 0) progressOnLine += dashLeft;
-			else progressOnLine += dash;
-			if (progressOnLine > len) {
-				dashLeft = progressOnLine - len;
-				progressOnLine = len;
-			} else {
-				dashLeft = 0;
-			}
-			graphics.lineTo(p1.x + progressOnLine * normal.x, p1.y + progressOnLine * normal.y);
-			progressOnLine += gap;
-			if (progressOnLine > len && dashLeft == 0) {
-				gapLeft = progressOnLine - len;
-			} else {
-				gapLeft = 0;
-				graphics.moveTo(p1.x + progressOnLine * normal.x, p1.y + progressOnLine * normal.y);
-			}
-		}
-	}
-}
-
-// Adapted from d-path-parser under MIT license
-// GitHub Repository: https://github.com/MaxArt2501/d-path-parser
-function parseDPath(d) {
-    let re = {
-        command: /\s*([achlmqstvz])/gi,
-        number: /\s*([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/gi,
-        comma: /\s*(?:(,)|\s)/g,
-        flag: /\s*([01])/g
-    };
-    let matchers = {
-        "number": function(must) {
-            return +get("number", must);
-        },
-        "coordinate pair": function(must) {
-            let x = get("number", must);
-            if (x === null && !must) return null;
-            get("comma");
-            let y = get("number", true);
-            return { x: +x, y: +y };
-        },
-        "arc definition": function(must) {
-            let radii = matchers["coordinate pair"](must);
-            if (!radii && !must) return null;
-            get("comma");
-            let rotation = +get("number", true);
-            get("comma", true);
-            let large = !!+get("flag", true);
-            get("comma");
-            let clockwise = !!+get("flag", true);
-            get("comma");
-            let end = matchers["coordinate pair"](true);
-            return {
-                radii: radii,
-                rotation: rotation,
-                large: large,
-                clockwise: clockwise,
-                end: end
-            };
-        }
-    }
-    let index = 0;
-    let commands = [];
-
-    while (index < d.length) {
-        let cmd = get("command");
-        let upcmd = cmd.toUpperCase();
-        let relative = cmd !== upcmd;
-        let sequence;
-        switch (upcmd) {
-            case "M":
-                sequence = getSequence("coordinate pair").map(function(coords, i) {
-                    if (i === 1) cmd = relative ? "l" : "L";
-                    return makeCommand({ end: coords }, cmd, relative);
-                }); 
-                break;
-            case "L":
-            case "T":
-                sequence = getSequence("coordinate pair").map(function(coords) {
-                    return makeCommand({ end: coords }, cmd, relative);
-                });
-                break;
-            case "C":
-                sequence = getSequence("coordinate pair");
-                if (sequence.length % 3)
-                    throw Error("Expected coordinate pair triplet at position " + index);
-
-                sequence = sequence.reduce(function(seq, coords, i) {
-                    let rest = i % 3;
-                    if (!rest) {
-                        seq.push(makeCommand({ cp1: coords }, cmd, relative));
-                    } else {
-                        let last = seq[seq.length - 1];
-                        last[rest === 1 ? "cp2" : "end"] = coords;
-                    }
-                    return seq;
-                }, []);
-
-                break;
-            case "Q":
-            case "S":
-                sequence = getSequence("coordinate pair");
-                if (sequence.length & 1)
-                    throw Error("Expected coordinate pair couple at position " + index);
-
-                sequence = sequence.reduce(function(seq, coords, i) {
-                    let odd = i & 1;
-                    if (!odd) {
-                        seq.push(makeCommand({ cp: coords }, cmd, relative));
-                    } else {
-                        let last = seq[seq.length - 1];
-                        last.end = coords;
-                    }
-                    return seq;
-                }, []);
-
-                break;
-            case "H":
-            case "V":
-                sequence = getSequence("number").map(function(value) {
-                    return makeCommand({ value: value }, cmd, relative);
-                });
-                break;
-            case "A":
-                sequence = getSequence("arc definition");
-				sequence = sequence.map(obj => makeCommand(obj, cmd, relative))
-                break;
-            case "Z":
-                sequence = [ { code: "Z" } ];
-                break;
-        }
-        commands.push.apply(commands, sequence);
-    }
-
-    return commands;
-
-    function makeCommand(obj, cmd, relative) {
-        obj.code = cmd;
-        obj.relative = relative;
-
-        return obj;
-    }
-    function get(what, must) {
-        re[what].lastIndex = index;
-        let res = re[what].exec(d);
-        if (!res || res.index !== index) {
-            if (!must) return null;
-            throw Error("Expected " + what + " at position " + index);
-        }
-
-        index = re[what].lastIndex;
-
-        return res[1];
-    }
-
-    function getSequence(what) {
-        let sequence = [];
-        let matched;
-        let must = true;
-        while ((matched = matchers[what](must)) !== null) {
-            sequence.push(matched);
-            must = !!get("comma");
-        }
-
-        return sequence;
-    }
-}