js-draw 0.1.9 → 0.1.12

package/src/rendering/caching/RenderingCacheNode.ts

@@ -3,7 +3,7 @@
 
 import Color4 from '../../Color4';
 import { ImageNode, sortLeavesByZIndex } from '../../EditorImage';
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import CacheRecord from './CacheRecord';
@@ -151,12 +151,15 @@ export default class RenderingCacheNode {
 		return result;
 	}
 
-	private renderingIsUpToDate(sortedIds: number[]) {
-		if (this.cachedRenderer === null || sortedIds.length !== this.renderedIds.length) {
+	// Returns true iff all elems of this.renderedIds are in sortedIds.
+	// sortedIds should be sorted by z-index (or some other order, so long as they are
+	// sorted by the same thing as this.renderedIds.)
+	private allRenderedIdsIn(sortedIds: number[]) {
+		if (this.renderedIds.length > sortedIds.length) {
 			return false;
 		}
 
-		for (let i = 0; i < sortedIds.length; i++) {
+		for (let i = 0; i < this.renderedIds.length; i++) {
 			if (sortedIds[i] !== this.renderedIds[i]) {
 				return false;
 			}
@@ -165,6 +168,14 @@ export default class RenderingCacheNode {
 		return true;
 	}
 
+	private renderingIsUpToDate(sortedIds: number[]) {
+		if (this.cachedRenderer === null || sortedIds.length !== this.renderedIds.length) {
+			return false;
+		}
+
+		return this.allRenderedIdsIn(sortedIds);
+	}
+
 	// Render all [items] within [viewport]
 	public renderItems(screenRenderer: AbstractRenderer, items: ImageNode[], viewport: Viewport) {
 		if (
@@ -238,8 +249,7 @@ export default class RenderingCacheNode {
 				}
 
 				// Is it worth it to render the items?
-				// TODO: Replace this with something performace based.
-				// TODO: Determine whether it is 'worth it' to cache this depending on rendering time.
+				// TODO: Consider replacing this with something performace based.
 				if (leavesByIds.length > this.cacheState.props.minComponentsPerCache) {
 					let fullRerenderNeeded = true;
 					if (!this.cachedRenderer) {
@@ -247,7 +257,7 @@ export default class RenderingCacheNode {
 							this.region,
 							() => this.onRegionDealloc()
 						);
-					} else if (leavesByIds.length > this.renderedIds.length && this.renderedMaxZIndex !== null) {
+					} else if (leavesByIds.length > this.renderedIds.length && this.allRenderedIdsIn(leafIds) && this.renderedMaxZIndex !== null) {
 						// We often don't need to do a full re-render even if something's changed.
 						// Check whether we can just draw on top of the existing cache.
 						const newLeaves = [];
@@ -287,6 +297,12 @@ export default class RenderingCacheNode {
 								screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.clay });
 							}
 						}
+					} else if (debugMode) {
+						console.log('Decided on a full re-render. Reason: At least one of the following is false:',
+							'\n leafIds.length > this.renderedIds.length: ', leafIds.length > this.renderedIds.length,
+							'\n this.allRenderedIdsIn(leafIds): ', this.allRenderedIdsIn(leafIds),
+							'\n this.renderedMaxZIndex !== null: ', this.renderedMaxZIndex !== null,
+							'\n\nthis.rerenderedIds: ', this.renderedIds, ', leafIds: ', leafIds);
 					}
 
 					if (fullRerenderNeeded) {

package/src/rendering/caching/testUtils.ts

@@ -1,4 +1,4 @@
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import DummyRenderer from '../renderers/DummyRenderer';
 import createEditor from '../../testing/createEditor';
 import AbstractRenderer from '../renderers/AbstractRenderer';

package/src/rendering/caching/types.ts

@@ -1,4 +1,4 @@
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheRecordManager } from './CacheRecordManager';
 

package/src/rendering/localization.ts

@@ -1,10 +1,14 @@
 
 export interface TextRendererLocalization {
+	pathNodeCount(pathCount: number): string;
+	textNodeCount(nodeCount: number): string;
     textNode(content: string): string;
     rerenderAsText: string;
 }
 
 export const defaultTextRendererLocalization: TextRendererLocalization = {
+	pathNodeCount: (count: number) => `There are ${count} visible path objects.`,
+	textNodeCount: (count: number) => `There are ${count} visible text nodes.`,
 	textNode: (content: string) => `Text: ${content}`,
 	rerenderAsText: 'Re-render as text',
 };

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,9 +1,9 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import Path, { PathCommand, PathCommandType } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle, { stylesEqual } from '../RenderingStyle';
 

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,9 +1,9 @@
 import Color4 from '../../Color4';
 import Text, { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';

package/src/rendering/renderers/DummyRenderer.test.ts

@@ -1,7 +1,7 @@
 
 import EventDispatcher from '../../EventDispatcher';
-import Mat33 from '../../geometry/Mat33';
-import { Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import { Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import DummyRenderer from './DummyRenderer';
 

package/src/rendering/renderers/DummyRenderer.ts

@@ -1,10 +1,10 @@
 // Renderer that outputs nothing. Useful for automated tests.
 
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer from './AbstractRenderer';

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,10 +1,11 @@
 
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import Path, { PathCommand, PathCommandType } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
+import { toRoundedString } from '../../math/rounding';
+import { Point2, Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
@@ -113,6 +114,9 @@ export default class SVGRenderer extends AbstractRenderer {
 	public drawText(text: string, transform: Mat33, style: TextStyle): void {
 		transform = this.getCanvasToScreenTransform().rightMul(transform);
 
+		const translation = transform.transformVec2(Vec2.zero);
+		transform = transform.rightMul(Mat33.translation(translation.times(-1)));
+
 		const textElem = document.createElementNS(svgNameSpace, 'text');
 		textElem.appendChild(document.createTextNode(text));
 		textElem.style.transform = `matrix(
@@ -125,6 +129,8 @@ export default class SVGRenderer extends AbstractRenderer {
 		textElem.style.fontWeight = style.fontWeight ?? '';
 		textElem.style.fontSize = style.size + 'px';
 		textElem.style.fill = style.renderingStyle.fill.toHexString();
+		textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
+		textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
 
 		if (style.renderingStyle.stroke) {
 			const strokeStyle = style.renderingStyle.stroke;

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -1,8 +1,8 @@
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Vec2 } from '../../geometry/Vec2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
@@ -12,6 +12,9 @@ import AbstractRenderer from './AbstractRenderer';
 
 export default class TextOnlyRenderer extends AbstractRenderer {
 	private descriptionBuilder: string[] = [];
+	private pathCount: number = 0;
+	private textNodeCount: number = 0;
+
 	public constructor(viewport: Viewport, private localizationTable: TextRendererLocalization) {
 		super(viewport);
 	}
@@ -23,15 +26,22 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 
 	public clear(): void {
 		this.descriptionBuilder = [];
+		this.pathCount = 0;
+		this.textNodeCount = 0;
 	}
 
 	public getDescription(): string {
-		return this.descriptionBuilder.join('\n');
+		return [
+			this.localizationTable.pathNodeCount(this.pathCount),
+			this.localizationTable.textNodeCount(this.textNodeCount),
+			...this.descriptionBuilder
+		].join('\n');
 	}
 
 	protected beginPath(_startPoint: Vec3): void {
 	}
 	protected endPath(_style: RenderingStyle): void {
+		this.pathCount ++;
 	}
 	protected lineTo(_point: Vec3): void {
 	}
@@ -43,9 +53,10 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	}
 	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
 		this.descriptionBuilder.push(this.localizationTable.textNode(text));
+		this.textNodeCount ++;
 	}
 	public isTooSmallToRender(rect: Rect2): boolean {
-		return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+		return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
 	}
 	public drawPoints(..._points: Vec3[]): void {
 	}

package/src/toolbar/HTMLToolbar.ts

@@ -138,13 +138,13 @@ export default class HTMLToolbar {
 		undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
 
 		const undoButton = this.addActionButton({
-			label: 'Undo',
+			label: this.localizationTable.undo,
 			icon: makeUndoIcon()
 		}, () => {
 			this.editor.history.undo();
 		}, undoRedoGroup);
 		const redoButton = this.addActionButton({
-			label: 'Redo',
+			label: this.localizationTable.redo,
 			icon: makeRedoIcon(),
 		}, () => {
 			this.editor.history.redo();
@@ -200,12 +200,9 @@ export default class HTMLToolbar {
 			(new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
 		}
 
-		for (const tool of toolController.getMatchingTools(ToolType.PanZoom)) {
-			if (!(tool instanceof PanZoom)) {
-				throw new Error('All SelectionTools must have kind === ToolType.PanZoom');
-			}
-	
-			(new HandToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		const panZoomTool = toolController.getMatchingTools(ToolType.PanZoom)[0];
+		if (panZoomTool && panZoomTool instanceof PanZoom) {
+			(new HandToolWidget(this.editor, panZoomTool, this.localizationTable)).addTo(this.container);
 		}
 
 		this.setupColorPickers();

package/src/toolbar/icons.ts

@@ -2,18 +2,18 @@ import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
 import { TextStyle } from '../components/Text';
 import EventDispatcher from '../EventDispatcher';
-import { Vec2 } from '../geometry/Vec2';
+import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Pen from '../tools/Pen';
 import { StrokeDataPoint } from '../types';
 import Viewport from '../Viewport';
 
 const svgNamespace = 'http://www.w3.org/2000/svg';
-const primaryForegroundFill = `
-	style='fill: var(--primary-foreground-color);'
+const iconColorFill = `
+	style='fill: var(--icon-color);'
 `;
-const primaryForegroundStrokeFill = `
-	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
+const iconColorStrokeFill = `
+	style='fill: var(--icon-color); stroke: var(--icon-color);'
 `;
 const checkerboardPatternDef = `
 	<pattern
@@ -39,7 +39,7 @@ export const makeRedoIcon = (mirror: boolean = false) => {
 	icon.innerHTML = `
 		<style>
 			.toolbar-svg-undo-redo-icon {
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 12;
 				stroke-linejoin: round;
 				stroke-linecap: round;
@@ -63,7 +63,7 @@ export const makeDropdownIcon = () => {
 	<g>
 		<path
 			d='M5,10 L50,90 L95,10 Z'
-			${primaryForegroundFill}
+			${iconColorFill}
 		/>
 	</g>
 	`;
@@ -80,7 +80,7 @@ export const makeEraserIcon = () => {
 		<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
 		<rect
 			x=10 y=10 width=80 height=50
-			${primaryForegroundFill}
+			${iconColorFill}
 		/>
 	</g>
 	`;
@@ -103,152 +103,141 @@ export const makeSelectionIcon = () => {
 	return icon;
 };
 
-export const makeHandToolIcon = () => {
+const pathIcon = (
+	pathData: string,
+	fill: string = 'var(--icon-color)', 
+	strokeColor: string = 'none',
+	strokeWidth: string = '0px',
+) => {
 	const icon = document.createElementNS(svgNamespace, 'svg');
-
-	// Draw a cursor-like shape (like some of the other icons, made with Inkscape)
-	icon.innerHTML = `
-	<g>
-		<path d='
-			m 10,60
-			  5,30
-			H 90
-			V 30
-			C 90,20 75,20 75,30
-			V 60
-			  20
-			C 75,10 60,10 60,20
-			V 60
-			  15
-			C 60,5 45,5 45,15
-			V 60
-			  25
-			C 45,15 30,15 30,25
-			V 60
-			  75
-			L 25,60
-			C 20,45 10,50 10,60 
-			Z'
-			
-			fill='none'
-			style='
-				stroke: var(--primary-foreground-color);
-				stroke-width: 2;
-			'
-		/>
-	</g>
-	`;
+	const path = document.createElementNS(svgNamespace, 'path');
+	path.setAttribute('d', pathData);
+	path.style.fill = fill;
+	path.style.stroke = strokeColor;
+	path.style.strokeWidth = strokeWidth;
+	icon.appendChild(path);
 	icon.setAttribute('viewBox', '0 0 100 100');
+
 	return icon;
 };
 
+export const makeHandToolIcon = () => {
+	const fill = 'none';
+	const strokeColor = 'var(--icon-color)';
+	const strokeWidth = '3';
+
+	// Draw a cursor-like shape (like some of the other icons, made with Inkscape)
+	return pathIcon(`
+		m 10,60
+			5,30
+		H 90
+		V 30
+		C 90,20 75,20 75,30
+		V 60
+			20
+		C 75,10 60,10 60,20
+		V 60
+			15
+		C 60,5 45,5 45,15
+		V 60
+			25
+		C 45,15 30,15 30,25
+		V 60
+			75
+		L 25,60
+		C 20,45 10,50 10,60
+		Z
+	`, fill, strokeColor, strokeWidth);
+};
+
 export const makeTouchPanningIcon = () => {
-	const icon = document.createElementNS(svgNamespace, 'svg');
-	icon.innerHTML = `
-		<path
-			d='
-				M 5,5.5
-				V 17.2
-				L 16.25,5.46
-				Z
-
-				m 33.75,0
-				L 50,17
-				V 5.5
-				Z
-
-				M 5,40.7
-				v 11.7
-				h 11.25
-				z
-				
-				M 26,19
-				C 19.8,19.4 17.65,30.4 21.9,34.8
-				L 50,70
-				H 27.5
-				c -11.25,0 -11.25,17.6 0,17.6
-				H 61.25
-				C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
-				L 33.1,23
-				C 30.3125,20.128192 27.9,19 25.830078,19.119756
-				Z
-			'
-			fill='none'
-			style='
-				stroke: var(--primary-foreground-color);
-				stroke-width: 2;
-			'
-		/>
-	`;
+	const fill = 'none';
+	const strokeColor = 'var(--icon-color)';
+	const strokeWidth = '3';
+
+	return pathIcon(`
+		M 5,5.5
+		V 17.2
+		L 16.25,5.46
+		Z
 
-	icon.setAttribute('viewBox', '0 0 100 100');
-	return icon;
+		m 33.75,0
+		L 50,17
+		V 5.5
+		Z
+
+		M 5,40.7
+		v 11.7
+		h 11.25
+		z
+
+		M 26,19
+		C 19.8,19.4 17.65,30.4 21.9,34.8
+		L 50,70
+		H 27.5
+		c -11.25,0 -11.25,17.6 0,17.6
+		H 61.25
+		C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
+		L 33.1,23
+		C 30.3125,20.128192 27.9,19 25.830078,19.119756
+		Z
+	`, fill, strokeColor, strokeWidth);
 };
 
 export const makeAllDevicePanningIcon = () => {
-	const icon = document.createElementNS(svgNamespace, 'svg');
-	icon.innerHTML = `
-		<path
-			d='
-				M 5 5
-				L 5 17.5
-				  17.5 5
-				  5 5
-				z
-				
-				M 42.5 5
-				L 55 17.5
-				  55 5
-				  42.5 5
-				z
-				
-				M 70 10
-				L 70 21
-				  61 15
-			      55.5 23
-			      66 30
-				  56 37
-				  61 45
-				  70 39
-				  70 50
-				  80 50
-				  80 39
-				  89 45
-				  95 36
-				  84 30
-				  95 23
-				  89 15
-				  80 21
-				  80 10
-				  70 10
-				z
-
-				M 27.5 26.25
-				L 27.5 91.25
-				L 43.75 83.125
-				L 52 99
-				L 68 91
-				L 60 75
-				L 76.25 66.875
-				L 27.5 26.25
-				z
-				
-				M 5 42.5
-				L 5 55
-				L 17.5 55
-				L 5 42.5
-				z 
-			'
-			fill='none'
-			style='
-				stroke: var(--primary-foreground-color);
-				stroke-width: 2;
-			'
-		/>
-	`;
-
-	icon.setAttribute('viewBox', '0 0 100 100');
-	return icon;
+	const fill = 'none';
+	const strokeColor = 'var(--icon-color)';
+	const strokeWidth = '3';
+	return pathIcon(`
+		M 5 5
+		L 5 17.5
+			17.5 5
+			5 5
+		z
+
+		M 42.5 5
+		L 55 17.5
+			55 5
+			42.5 5
+		z
+
+		M 70 10
+		L 70 21
+			61 15
+			55.5 23
+			66 30
+			56 37
+			61 45
+			70 39
+			70 50
+			80 50
+			80 39
+			89 45
+			95 36
+			84 30
+			95 23
+			89 15
+			80 21
+			80 10
+			70 10
+		z
+
+		M 27.5 26.25
+		L 27.5 91.25
+		L 43.75 83.125
+		L 52 99
+		L 68 91
+		L 60 75
+		L 76.25 66.875
+		L 27.5 26.25
+		z
+
+		M 5 42.5
+		L 5 55
+		L 17.5 55
+		L 5 42.5
+		z
+	`, fill, strokeColor, strokeWidth);
 };
 
 export const makeZoomIcon = () => {
@@ -263,7 +252,7 @@ export const makeZoomIcon = () => {
 		textNode.style.textAlign = 'center';
 		textNode.style.textAnchor = 'middle';
 		textNode.style.fontSize = '55px';
-		textNode.style.fill = 'var(--primary-foreground-color)';
+		textNode.style.fill = 'var(--icon-color)';
 		textNode.style.fontFamily = 'monospace';
 
 		icon.appendChild(textNode);
@@ -315,7 +304,7 @@ export const makePenIcon = (tipThickness: number, color: string) => {
 		<!-- Pen grip -->
 		<path
 			d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
-			${primaryForegroundStrokeFill}
+			${iconColorStrokeFill}
 		/>
 	</g>
 	<g>
@@ -389,7 +378,7 @@ export const makePipetteIcon = (color?: Color4) => {
 			65,15 65,5      47,6
 		Z
 	`);
-	pipette.style.fill = 'var(--primary-foreground-color)';
+	pipette.style.fill = 'var(--icon-color)';
 
 	if (color) {
 		const defs = document.createElementNS(svgNamespace, 'defs');
@@ -417,3 +406,34 @@ export const makePipetteIcon = (color?: Color4) => {
 	icon.setAttribute('viewBox', '0 0 100 100');
 	return icon;
 };
+
+export const makeResizeViewportIcon = () => {
+	return pathIcon(`
+		M 75 5 75 10 90 10 90 25 95 25 95 5 75 5 z
+		M 15 15 15 30 20 30 20 20 30 20 30 15 15 15 z
+        M 84 15 82 17 81 16 81 20 85 20 84 19 86 17 84 15 z
+        M 26 24 24 26 26 28 25 29 29 29 29 25 28 26 26 24 z
+        M 25 71 26 72 24 74 26 76 28 74 29 75 29 71 25 71 z
+        M 15 75 15 85 25 85 25 80 20 80 20 75 15 75 z
+        M 90 75 90 90 75 90 75 95 95 95 95 75 90 75 z
+        M 81 81 81 85 82 84 84 86 86 84 84 82 85 81 81 81 z
+	`);
+};
+
+export const makeDuplicateSelectionIcon = () => {
+	return pathIcon(`
+		M 45,10 45,55 90,55 90,10 45,10 z
+		M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
+	`);
+};
+
+export const makeDeleteSelectionIcon = () => {
+	const strokeWidth = '5px';
+	const strokeColor = 'var(--icon-color)';
+	const fillColor = 'none';
+
+	return pathIcon(`
+		M 10,10 90,90
+		M 10,90 90,10
+	`, fillColor, strokeColor, strokeWidth);
+};