js-draw 0.25.0 → 1.0.0

package/dist/mjs/toolbar/IconProvider.mjs

@@ -1,38 +1,69 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import  Color4  from '../Color4.mjs';
-import  { Vec2 }  from '../math/Vec2.mjs';
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _IconProvider_instances, _IconProvider_makeXIcon;
+import { Vec2, Color4 } from '@js-draw/math';
 import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
 import  Viewport  from '../Viewport.mjs';
-var svgNamespace = 'http://www.w3.org/2000/svg';
-var iconColorFill = "\n\tstyle='fill: var(--icon-color);'\n";
-var iconColorStrokeFill = "\n\tstyle='fill: var(--icon-color); stroke: var(--icon-color);'\n";
-var checkerboardIdCounter = 0;
-var makeCheckerboardPattern = function () {
-    var id = "checkerboard-".concat(checkerboardIdCounter++);
-    var patternDef = "\n\t\t<pattern\n\t\t\tid='".concat(id, "'\n\t\t\tviewBox='0,0,10,10'\n\t\t\twidth='20%'\n\t\t\theight='20%'\n\t\t\tpatternUnits='userSpaceOnUse'\n\t\t>\n\t\t\t<rect x=0 y=0 width=10 height=10 fill='white'/>\n\t\t\t<rect x=0 y=0 width=5 height=5 fill='gray'/>\n\t\t\t<rect x=5 y=5 width=5 height=5 fill='gray'/>\n\t\t</pattern>\n\t");
-    var patternRef = "url(#".concat(id, ")");
-    return { patternDef: patternDef, patternRef: patternRef };
+import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBuilder.mjs';
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const iconColorFill = `
+	style='fill: var(--icon-color);'
+`;
+const iconColorStrokeFill = `
+	style='fill: var(--icon-color); stroke: var(--icon-color);'
+`;
+let checkerboardIdCounter = 0;
+const makeCheckerboardPattern = () => {
+    const id = `checkerboard-${checkerboardIdCounter++}`;
+    const patternDef = `
+		<pattern
+			id='${id}'
+			viewBox='0,0,10,10'
+			width='20%'
+			height='20%'
+			patternUnits='userSpaceOnUse'
+		>
+			<rect x='0' y='0' width='10' height='10' fill='white'/>
+			<rect x='0' y='0' width='5' height='5' fill='gray'/>
+			<rect x='5' y='5' width='5' height='5' fill='gray'/>
+		</pattern>
+	`;
+    const patternRef = `url(#${id})`;
+    return { patternDef, patternRef };
+};
+const makeRedoIcon = (mirror) => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.innerHTML = `
+		<style>
+			.toolbar-svg-undo-redo-icon {
+				stroke: var(--icon-color);
+				stroke-width: 12;
+				stroke-linejoin: round;
+				stroke-linecap: round;
+				fill: none;
+
+				transform-origin: center;
+			}
+		</style>
+		<path
+			d='M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80'
+			class='toolbar-svg-undo-redo-icon'
+			style='${mirror ? 'transform: scale(-1, 1);' : ''}'/>
+	`;
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
 };
 /**
  * Provides icons that can be used in the toolbar, etc.
  * Extend this class and override methods to customize icons.
  *
  * @example
- * ```ts
+ * ```ts,runnable
+ * import * as jsdraw from 'js-draw';
+ *
  * class CustomIconProvider extends jsdraw.IconProvider {
  *     // Use '☺' instead of the default dropdown symbol.
  *     public makeDropdownIcon() {
@@ -51,89 +82,208 @@ var makeCheckerboardPattern = function () {
  * });
  *
  * // Add a toolbar that uses these icons
- * editor.addToolbar();
+ * jsdraw.makeDropdownToolbar(editor).addDefaults();
  * ```
  */
-var IconProvider = /** @class */ (function () {
-    function IconProvider() {
+class IconProvider {
+    constructor() {
+        _IconProvider_instances.add(this);
+    }
+    makeUndoIcon() {
+        return makeRedoIcon(true);
     }
-    IconProvider.prototype.makeUndoIcon = function () {
-        return this.makeRedoIcon(true);
-    };
     // @param mirror - reflect across the x-axis. This parameter is internal.
     // @returns a redo icon.
-    IconProvider.prototype.makeRedoIcon = function (mirror) {
-        if (mirror === void 0) { mirror = false; }
-        var icon = document.createElementNS(svgNamespace, 'svg');
-        icon.innerHTML = "\n\t\t\t<style>\n\t\t\t\t.toolbar-svg-undo-redo-icon {\n\t\t\t\t\tstroke: var(--icon-color);\n\t\t\t\t\tstroke-width: 12;\n\t\t\t\t\tstroke-linejoin: round;\n\t\t\t\t\tstroke-linecap: round;\n\t\t\t\t\tfill: none;\n\t\n\t\t\t\t\ttransform-origin: center;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<path\n\t\t\t\td='M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80'\n\t\t\t\tclass='toolbar-svg-undo-redo-icon'\n\t\t\t\tstyle='".concat(mirror ? 'transform: scale(-1, 1);' : '', "'/>\n\t\t");
-        icon.setAttribute('viewBox', '0 0 100 100');
-        return icon;
-    };
-    IconProvider.prototype.makeDropdownIcon = function () {
-        var icon = document.createElementNS(svgNamespace, 'svg');
-        icon.innerHTML = "\n\t\t<g>\n\t\t\t<path\n\t\t\t\td='M5,10 L50,90 L95,10 Z'\n\t\t\t\t".concat(iconColorFill, "\n\t\t\t/>\n\t\t</g>\n\t\t");
-        icon.setAttribute('viewBox', '0 0 100 100');
+    makeRedoIcon() {
+        return makeRedoIcon(false);
+    }
+    makeDropdownIcon() {
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        icon.innerHTML = `
+		<g>
+			<path
+				d='M5,10 L50,90 L95,10 Z'
+				${iconColorFill}
+			/>
+		</g>
+		`;
+        icon.setAttribute('viewBox', '-10 -10 110 110');
         return icon;
-    };
-    IconProvider.prototype.makeEraserIcon = function (eraserSize) {
-        var icon = document.createElementNS(svgNamespace, 'svg');
-        eraserSize !== null && eraserSize !== void 0 ? eraserSize : (eraserSize = 10);
-        var scaledSize = eraserSize / 4;
-        var eraserColor = '#ff70af';
+    }
+    makeEraserIcon(eraserSize) {
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        eraserSize ??= 10;
+        const scaledSize = eraserSize / 4;
+        const eraserColor = '#ff70af';
         // Draw an eraser-like shape. Created with Inkscape
-        icon.innerHTML = "\n\t\t<g>\n\t\t\t<path\n\t\t\t\tstyle=\"fill:".concat(eraserColor, "\"\n\t\t\t\tstroke=\"black\"\n\t\t\t\ttransform=\"rotate(41.35)\"\n\t\t\t\td=\"M 52.5 27\n\t\t\t\t\tC 50 28.9 48.9 31.7 48.9 34.8\n\t\t\t\t\tL 48.9 39.8\n\t\t\t\t\tC 48.9 45.3 53.4 49.8 58.9 49.8\n\t\t\t\t\tL 103.9 49.8\n\t\t\t\t\tC 105.8 49.8 107.6 49.2 109.1 48.3\n\t\t\t\t\tL 110.2 ").concat(scaledSize + 49.5, " L 159.7 ").concat(scaledSize + 5, "\n\t\t\t\t\tL 157.7 ").concat(-scaledSize + 5.2, " L 112.4 ").concat(49.5 - scaledSize, "\n\t\t\t\t\tC 113.4 43.5 113.9 41.7 113.9 39.8\n\t\t\t\t\tL 113.9 34.8\n\t\t\t\t\tC 113.9 29.3 109.4 24.8 103.9 24.8\n\t\t\t\t\tL 58.9 24.8\n\t\t\t\t\tC 56.5 24.8 54.3 25.7 52.5 27\n\t\t\t\t\tz \"\n\t\t\t\tid=\"path438\" />\n\n\t\t\t<rect\n\t\t\t\tstroke=\"#cc8077\"\n\t\t\t\t").concat(iconColorFill, "\n\t\t\t\tid=\"rect218\"\n\t\t\t\twidth=\"65\"\n\t\t\t\theight=\"75\"\n\t\t\t\tx=\"48.9\"\n\t\t\t\ty=\"-38.7\"\n\t\t\t\ttransform=\"rotate(41.35)\" />\n\t\t</g>\n\t\t");
+        icon.innerHTML = `
+		<g>
+			<path
+				style="fill:${eraserColor}"
+				stroke="black"
+				transform="rotate(41.35)"
+				d="M 52.5 27
+					C 50 28.9 48.9 31.7 48.9 34.8
+					L 48.9 39.8
+					C 48.9 45.3 53.4 49.8 58.9 49.8
+					L 103.9 49.8
+					C 105.8 49.8 107.6 49.2 109.1 48.3
+					L 110.2 ${scaledSize + 49.5} L 159.7 ${scaledSize + 5}
+					L 157.7 ${-scaledSize + 5.2} L 112.4 ${49.5 - scaledSize}
+					C 113.4 43.5 113.9 41.7 113.9 39.8
+					L 113.9 34.8
+					C 113.9 29.3 109.4 24.8 103.9 24.8
+					L 58.9 24.8
+					C 56.5 24.8 54.3 25.7 52.5 27
+					z "
+				id="path438" />
+
+			<rect
+				stroke="#cc8077"
+				${iconColorFill}
+				id="rect218"
+				width="65"
+				height="75"
+				x="48.9"
+				y="-38.7"
+				transform="rotate(41.35)" />
+		</g>
+		`;
         icon.setAttribute('viewBox', '0 0 120 120');
         return icon;
-    };
-    IconProvider.prototype.makeSelectionIcon = function () {
-        var icon = document.createElementNS(svgNamespace, 'svg');
+    }
+    makeSelectionIcon() {
+        const icon = document.createElementNS(svgNamespace, 'svg');
         // Draw a cursor-like shape
-        icon.innerHTML = "\n\t\t<g>\n\t\t\t<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>\n\t\t\t<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>\n\t\t</g>\n\t\t";
-        icon.setAttribute('viewBox', '0 0 100 100');
-        return icon;
-    };
-    /**
-     * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
-     * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
-     */
-    IconProvider.prototype.makeIconFromPath = function (pathData, fill, strokeColor, strokeWidth) {
-        if (fill === void 0) { fill = 'var(--icon-color)'; }
-        if (strokeColor === void 0) { strokeColor = 'none'; }
-        if (strokeWidth === void 0) { strokeWidth = '0px'; }
-        var icon = document.createElementNS(svgNamespace, 'svg');
-        var 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.innerHTML = `
+		<g>
+			<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
+			<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
+		</g>
+		`;
         icon.setAttribute('viewBox', '0 0 100 100');
         return icon;
-    };
-    IconProvider.prototype.makeHandToolIcon = function () {
-        var fill = 'none';
-        var strokeColor = 'var(--icon-color)';
-        var strokeWidth = '3';
+    }
+    makeHandToolIcon() {
+        const fill = 'none';
+        const strokeColor = 'var(--icon-color)';
+        const strokeWidth = '3';
         // Draw a cursor-like shape
-        return this.makeIconFromPath("\n\t\t\tm 10,60\n\t\t\t\t5,30\n\t\t\tH 90\n\t\t\tV 30\n\t\t\tC 90,20 75,20 75,30\n\t\t\tV 60\n\t\t\t\t20\n\t\t\tC 75,10 60,10 60,20\n\t\t\tV 60\n\t\t\t\t15\n\t\t\tC 60,5 45,5 45,15\n\t\t\tV 60\n\t\t\t\t25\n\t\t\tC 45,15 30,15 30,25\n\t\t\tV 60\n\t\t\t\t75\n\t\t\tL 25,60\n\t\t\tC 20,45 10,50 10,60\n\t\t\tZ\n\t\t", fill, strokeColor, strokeWidth);
-    };
-    IconProvider.prototype.makeTouchPanningIcon = function () {
-        var fill = 'none';
-        var strokeColor = 'var(--icon-color)';
-        var strokeWidth = '3';
-        return this.makeIconFromPath("\n\t\t\tM 5,5.5\n\t\t\tV 17.2\n\t\t\tL 16.25,5.46\n\t\t\tZ\n\t\n\t\t\tm 33.75,0\n\t\t\tL 50,17\n\t\t\tV 5.5\n\t\t\tZ\n\t\n\t\t\tM 5,40.7\n\t\t\tv 11.7\n\t\t\th 11.25\n\t\t\tz\n\t\n\t\t\tM 26,19\n\t\t\tC 19.8,19.4 17.65,30.4 21.9,34.8\n\t\t\tL 50,70\n\t\t\tH 27.5\n\t\t\tc -11.25,0 -11.25,17.6 0,17.6\n\t\t\tH 61.25\n\t\t\tC 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5\n\t\t\tL 33.1,23\n\t\t\tC 30.3125,20.128192 27.9,19 25.830078,19.119756\n\t\t\tZ\n\t\t", fill, strokeColor, strokeWidth);
-    };
-    IconProvider.prototype.makeAllDevicePanningIcon = function () {
-        var fill = 'none';
-        var strokeColor = 'var(--icon-color)';
-        var strokeWidth = '3';
-        return this.makeIconFromPath("\n\t\t\tM 5 5\n\t\t\tL 5 17.5\n\t\t\t\t17.5 5\n\t\t\t\t5 5\n\t\t\tz\n\t\n\t\t\tM 42.5 5\n\t\t\tL 55 17.5\n\t\t\t\t55 5\n\t\t\t\t42.5 5\n\t\t\tz\n\t\n\t\t\tM 70 10\n\t\t\tL 70 21\n\t\t\t\t61 15\n\t\t\t\t55.5 23\n\t\t\t\t66 30\n\t\t\t\t56 37\n\t\t\t\t61 45\n\t\t\t\t70 39\n\t\t\t\t70 50\n\t\t\t\t80 50\n\t\t\t\t80 39\n\t\t\t\t89 45\n\t\t\t\t95 36\n\t\t\t\t84 30\n\t\t\t\t95 23\n\t\t\t\t89 15\n\t\t\t\t80 21\n\t\t\t\t80 10\n\t\t\t\t70 10\n\t\t\tz\n\t\n\t\t\tM 27.5 26.25\n\t\t\tL 27.5 91.25\n\t\t\tL 43.75 83.125\n\t\t\tL 52 99\n\t\t\tL 68 91\n\t\t\tL 60 75\n\t\t\tL 76.25 66.875\n\t\t\tL 27.5 26.25\n\t\t\tz\n\t\n\t\t\tM 5 42.5\n\t\t\tL 5 55\n\t\t\tL 17.5 55\n\t\t\tL 5 42.5\n\t\t\tz\n\t\t", fill, strokeColor, strokeWidth);
-    };
-    IconProvider.prototype.makeZoomIcon = function () {
-        var icon = document.createElementNS(svgNamespace, 'svg');
+        return this.makeIconFromPath(`
+			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);
+    }
+    makeTouchPanningIcon() {
+        const fill = 'none';
+        const strokeColor = 'var(--icon-color)';
+        const strokeWidth = '3';
+        return this.makeIconFromPath(`
+			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, strokeColor, strokeWidth);
+    }
+    /** Unused by js-draw. @deprecated */
+    makeAllDevicePanningIcon() {
+        const fill = 'none';
+        const strokeColor = 'var(--icon-color)';
+        const strokeWidth = '3';
+        return this.makeIconFromPath(`
+			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);
+    }
+    makeZoomIcon() {
+        const icon = document.createElementNS(svgNamespace, 'svg');
         icon.setAttribute('viewBox', '0 0 100 100');
-        var addTextNode = function (text, x, y) {
-            var textNode = document.createElementNS(svgNamespace, 'text');
+        const addTextNode = (text, x, y) => {
+            const textNode = document.createElementNS(svgNamespace, 'text');
             textNode.appendChild(document.createTextNode(text));
             textNode.setAttribute('x', x.toString());
             textNode.setAttribute('y', y.toString());
@@ -147,122 +297,244 @@ var IconProvider = /** @class */ (function () {
         addTextNode('+', 40, 45);
         addTextNode('-', 70, 75);
         return icon;
-    };
-    IconProvider.prototype.makeRotationLockIcon = function () {
-        var icon = this.makeIconFromPath("\n\t\t\tM 40.1 25.1 \n\t\t\tC 32.5 25 27.9 34.1 27.9 34.1 \n\t\t\tL 25.7 30 \n\t\t\tL 28 44.7 \n\t\t\tL 36.6 40.3 \n\t\t\tL 32.3 38.3 \n\t\t\tC 33.6 28 38.1 25.2 45.1 31.8 \n\t\t\tL 49.4 29.6 \n\t\t\tC 45.9 26.3 42.8 25.1 40.1 25.1 \n\t\t\tz\n\n\t\t\tM 51.7 34.2 \n\t\t\tL 43.5 39.1 \n\t\t\tL 48 40.8 \n\t\t\tC 47.4 51.1 43.1 54.3 35.7 48.2 \n\t\t\tL 31.6 50.7 \n\t\t\tC 45.5 62.1 52.6 44.6 52.6 44.6 \n\t\t\tL 55.1 48.6 \n\t\t\tL 51.7 34.2 \n\t\t\tz\n\n\t\t\tM 56.9 49.9 \n\t\t\tC 49.8 49.9 49.2 57.3 49.3 60.9 \n\t\t\tL 47.6 60.9 \n\t\t\tL 47.6 73.7 \n\t\t\tL 66.1 73.7 \n\t\t\tL 66.1 60.9 \n\t\t\tL 64.4 60.9 \n\t\t\tC 64.5 57.3 63.9 49.9 56.9 49.9 \n\t\t\tz\n\n\t\t\tM 56.9 53.5 \n\t\t\tC 60.8 53.5 61 58.2 60.8 60.9 \n\t\t\tL 52.9 60.9 \n\t\t\tC 52.7 58.2 52.9 53.5 56.9 53.5 \n\t\t\tz\n\t\t");
+    }
+    makeRotationLockIcon() {
+        const icon = this.makeIconFromPath(`
+			M 40.1 25.1 
+			C 32.5 25 27.9 34.1 27.9 34.1 
+			L 25.7 30 
+			L 28 44.7 
+			L 36.6 40.3 
+			L 32.3 38.3 
+			C 33.6 28 38.1 25.2 45.1 31.8 
+			L 49.4 29.6 
+			C 45.9 26.3 42.8 25.1 40.1 25.1 
+			z
+
+			M 51.7 34.2 
+			L 43.5 39.1 
+			L 48 40.8 
+			C 47.4 51.1 43.1 54.3 35.7 48.2 
+			L 31.6 50.7 
+			C 45.5 62.1 52.6 44.6 52.6 44.6 
+			L 55.1 48.6 
+			L 51.7 34.2 
+			z
+
+			M 56.9 49.9 
+			C 49.8 49.9 49.2 57.3 49.3 60.9 
+			L 47.6 60.9 
+			L 47.6 73.7 
+			L 66.1 73.7 
+			L 66.1 60.9 
+			L 64.4 60.9 
+			C 64.5 57.3 63.9 49.9 56.9 49.9 
+			z
+
+			M 56.9 53.5 
+			C 60.8 53.5 61 58.2 60.8 60.9 
+			L 52.9 60.9 
+			C 52.7 58.2 52.9 53.5 56.9 53.5 
+			z
+		`);
         icon.setAttribute('viewBox', '10 10 70 70');
         return icon;
-    };
-    IconProvider.prototype.makeInsertImageIcon = function () {
-        return this.makeIconFromPath("\n\t\t\tM 5 10 L 5 90 L 95 90 L 95 10 L 5 10 z\n\t\t\tM 10 15 L 90 15 L 90 50 L 70 75 L 40 50 L 10 75 L 10 15 z\n\t\t\tM 22.5 25 A 7.5 7.5 0 0 0 15 32.5 A 7.5 7.5 0 0 0 22.5 40 A 7.5 7.5 0 0 0 30 32.5 A 7.5 7.5 0 0 0 22.5 25 z \n\t\t");
-    };
-    IconProvider.prototype.makeTextIcon = function (textStyle) {
-        var _a, _b;
-        var icon = document.createElementNS(svgNamespace, 'svg');
+    }
+    makeInsertImageIcon() {
+        return this.makeIconFromPath(`
+			M 5 10 L 5 90 L 95 90 L 95 10 L 5 10 z
+			M 10 15 L 90 15 L 90 50 L 70 75 L 40 50 L 10 75 L 10 15 z
+			M 22.5 25 A 7.5 7.5 0 0 0 15 32.5 A 7.5 7.5 0 0 0 22.5 40 A 7.5 7.5 0 0 0 30 32.5 A 7.5 7.5 0 0 0 22.5 25 z 
+		`);
+    }
+    makeUploadFileIcon() {
+        return this.makeIconFromPath(`
+			M 48,10 32,34 43,33 42,68
+			H 54
+			L 53,33 64,34 Z
+	
+			M 8,66 V 86 H 88 V 66 H 78 V 76 H 18 V 66 Z
+		`);
+    }
+    makeTextIcon(textStyle) {
+        const icon = document.createElementNS(svgNamespace, 'svg');
         icon.setAttribute('viewBox', '0 0 100 100');
-        var textNode = document.createElementNS(svgNamespace, 'text');
+        const textNode = document.createElementNS(svgNamespace, 'text');
         textNode.appendChild(document.createTextNode('T'));
         textNode.style.fontFamily = textStyle.fontFamily;
-        textNode.style.fontWeight = (_a = textStyle.fontWeight) !== null && _a !== void 0 ? _a : '';
-        textNode.style.fontVariant = (_b = textStyle.fontVariant) !== null && _b !== void 0 ? _b : '';
+        textNode.style.fontWeight = textStyle.fontWeight ?? '';
+        textNode.style.fontVariant = textStyle.fontVariant ?? '';
         textNode.style.fill = textStyle.renderingStyle.fill.toHexString();
         textNode.style.textAnchor = 'middle';
         textNode.setAttribute('x', '50');
         textNode.setAttribute('y', '75');
         textNode.style.fontSize = '65px';
-        textNode.style.filter = 'drop-shadow(0px 0px 10px var(--primary-shadow-color))';
+        textNode.style.filter = 'drop-shadow(0px 0px 10px var(--shadow-color))';
         icon.appendChild(textNode);
         return icon;
-    };
-    IconProvider.prototype.makePenIcon = function (strokeSize, color, rounded) {
-        if (color instanceof Color4) {
-            color = color.toHexString();
-        }
-        var icon = document.createElementNS(svgNamespace, 'svg');
+    }
+    makePenIcon(penStyle) {
+        // Use a square-root scale to prevent the pen's tip from overflowing.
+        const strokeSize = Math.round(Math.sqrt(penStyle.thickness) * 4);
+        const color = penStyle.color;
+        const rounded = this.isRoundedTipPen(penStyle);
+        const icon = document.createElementNS(svgNamespace, 'svg');
         icon.setAttribute('viewBox', '0 0 100 100');
-        var tipThickness = strokeSize / 2;
-        var inkTipPath = "\n\t\t\tM ".concat(15 - tipThickness, ",").concat(80 - tipThickness, "\n\t\t\t  ").concat(15 - tipThickness, ",").concat(80 + tipThickness, "\n\t\t\t  30,83\n\t\t\t  15,65\n\t\t\tZ\n\t\t");
-        var trailStartEndY = 80 + tipThickness;
-        var inkTrailPath = "\n\t\t\tm ".concat(15 - tipThickness * 1.1, ",").concat(trailStartEndY, "\n\t\t\tc 35,10 55,15 60,30\n\t\t\tl ").concat(35 + tipThickness * 1.2, ",").concat(-10 - tipThickness, "\n\t\t\tC 80.47,98.32 50.5,").concat(90 + tipThickness, " 20,").concat(trailStartEndY, " Z\n\t\t");
-        var colorBubblePath = "\n\t\t\tM 72.45,35.67\n\t\t\tA 10,15 41.8 0 1 55,40.2 10,15 41.8 0 1 57.55,22.3 10,15 41.8 0 1 75,17.8 10,15 41.8 0 1 72.5,35.67\n\t\t\tZ\n\t\t";
-        var gripMainPath = 'M 85,-25 25,35 h 10 v 10 h 10 v 10 h 10 v 10 h 10 l -5,10 60,-60 z';
-        var gripShadow1Path = 'M 25,35 H 35 L 90,-15 85,-25 Z';
-        var gripShadow2Path = 'M 60,75 65,65 H 55 l 55,-55 10,5 z';
+        const tipThickness = strokeSize / 2;
+        const inkTipPath = `
+			M ${15 - tipThickness},${80 - tipThickness}
+			  ${15 - tipThickness},${80 + tipThickness}
+			  30,83
+			  15,65
+			Z
+		`;
+        const trailStartEndY = 80 + tipThickness;
+        const inkTrailPath = `
+			m ${15 - tipThickness * 1.1},${trailStartEndY}
+			c 35,10 55,15 60,30
+			l ${35 + tipThickness * 1.2},${-10 - tipThickness}
+			C 80.47,98.32 50.5,${90 + tipThickness} 20,${trailStartEndY} Z
+		`;
+        const colorBubblePath = `
+			M 72.45,35.67
+			A 10,15 41.8 0 1 55,40.2 10,15 41.8 0 1 57.55,22.3 10,15 41.8 0 1 75,17.8 10,15 41.8 0 1 72.5,35.67
+			Z
+		`;
+        let gripMainPath = 'M 85,-25 25,35 h 10 v 10 h 10 v 10 h 10 v 10 h 10 l -5,10 60,-60 z';
+        let gripShadow1Path = 'M 25,35 H 35 L 90,-15 85,-25 Z';
+        let gripShadow2Path = 'M 60,75 65,65 H 55 l 55,-55 10,5 z';
         if (rounded) {
             gripMainPath = 'M 85,-25 25,35 c 15,0 40,30 35,40 l 60,-60 z';
             gripShadow1Path = 'm 25,35 c 3.92361,0.384473 7.644275,0.980572 10,3 l 55,-53 -5,-10 z';
             gripShadow2Path = 'M 60,75 C 61,66 59,65 56,59 l 54,-54 10,10 z';
         }
-        var penTipPath = "M 25,35 ".concat(10 - tipThickness / 4, ",").concat(70 - tipThickness / 2, " 20,75 25,85 60,75 70,55 45,25 Z");
-        var pencilTipColor = Color4.fromHex('#f4d7d7');
-        var tipColor = pencilTipColor.mix(Color4.fromString(color), tipThickness / 40 - 0.1).toHexString();
-        var checkerboardPattern = makeCheckerboardPattern();
-        var ink = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(inkTrailPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(inkTrailPath, "\"\n\t\t\t/>\n\t\t");
-        var penTip = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(penTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(tipColor, "\"\n\t\t\t\tstroke=\"").concat(color, "\"\n\t\t\t\td=\"").concat(penTipPath, "\"\n\t\t\t/>\n\t\t");
-        var grip = "\n\t\t\t<path\n\t\t\t\t".concat(iconColorStrokeFill, "\n\t\t\t\td=\"").concat(gripMainPath, "\"\n\t\t\t/>\n\n\t\t\t<!-- shadows -->\n\t\t\t<path\n\t\t\t\tfill=\"rgba(150, 150, 150, 0.3)\"\n\t\t\t\td=\"").concat(gripShadow1Path, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"rgba(100, 100, 100, 0.2)\"\n\t\t\t\td=\"").concat(gripShadow2Path, "\"\n\t\t\t/>\n\n\t\t\t<!-- color bubble -->\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(colorBubblePath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(colorBubblePath, "\"\n\t\t\t/>\n\t\t");
-        icon.innerHTML = "\n\t\t<defs>\n\t\t\t".concat(checkerboardPattern.patternDef, "\n\t\t</defs>\n\t\t<g>\n\t\t\t").concat(ink, "\n\t\t\t").concat(penTip, "\n\t\t\t").concat(grip, "\n\t\t</g>\n\t\t");
+        const penTipPath = `M 25,35 ${10 - tipThickness / 4},${70 - tipThickness / 2} 20,75 25,85 60,75 70,55 45,25 Z`;
+        const pencilTipColor = Color4.fromHex('#f4d7d7');
+        const tipColor = pencilTipColor.mix(color, tipThickness / 40 - 0.1).toHexString();
+        const checkerboardPattern = makeCheckerboardPattern();
+        const ink = `
+			<path
+				fill="${checkerboardPattern.patternRef}"
+				d="${inkTipPath}"
+			/>
+			<path
+				fill="${checkerboardPattern.patternRef}"
+				d="${inkTrailPath}"
+			/>
+			<path
+				fill="${color}"
+				d="${inkTipPath}"
+			/>
+			<path
+				fill="${color}"
+				d="${inkTrailPath}"
+			/>
+		`;
+        const penTip = `
+			<path
+				fill="${checkerboardPattern.patternRef}"
+				d="${penTipPath}"
+			/>
+			<path
+				fill="${tipColor}"
+				stroke="${color}"
+				d="${penTipPath}"
+			/>
+		`;
+        const grip = `
+			<path
+				${iconColorStrokeFill}
+				d="${gripMainPath}"
+			/>
+
+			<!-- shadows -->
+			<path
+				fill="rgba(150, 150, 150, 0.3)"
+				d="${gripShadow1Path}"
+			/>
+			<path
+				fill="rgba(100, 100, 100, 0.2)"
+				d="${gripShadow2Path}"
+			/>
+
+			<!-- color bubble -->
+			<path
+				fill="${checkerboardPattern.patternRef}"
+				d="${colorBubblePath}"
+			/>
+			<path
+				fill="${color}"
+				d="${colorBubblePath}"
+			/>
+		`;
+        icon.innerHTML = `
+		<defs>
+			${checkerboardPattern.patternDef}
+		</defs>
+		<g>
+			${ink}
+			${penTip}
+			${grip}
+		</g>
+		`;
         return icon;
-    };
-    IconProvider.prototype.makeIconFromFactory = function (pen, factory, 
-    // If true, attempts to guess the location of a transparency grid
-    includeTransparencyGrid) {
-        if (includeTransparencyGrid === void 0) { includeTransparencyGrid = false; }
+    }
+    makeIconFromFactory(penStyle) {
         // Increase the thickness we use to generate the icon less with larger actual thicknesses.
         // We want the icon to be recognisable with a large range of thicknesses.
-        var thickness = Math.sqrt(pen.getThickness()) * 3;
-        var nowTime = (new Date()).getTime();
-        var startPoint = {
+        const thickness = Math.sqrt(penStyle.thickness) * 3;
+        const nowTime = performance.now();
+        const startPoint = {
             pos: Vec2.of(10, 10),
             width: thickness,
-            color: pen.getColor(),
+            color: penStyle.color,
             time: nowTime - 100,
         };
-        var endPoint = {
+        const endPoint = {
             pos: Vec2.of(90, 90),
             width: thickness,
-            color: pen.getColor(),
+            color: penStyle.color,
             time: nowTime,
         };
-        var viewport = new Viewport(function () { });
-        var builder = factory(startPoint, viewport);
+        const viewport = new Viewport(() => { });
+        const builder = penStyle.factory(startPoint, viewport);
         builder.addPoint(endPoint);
-        var icon = document.createElementNS(svgNamespace, 'svg');
+        const icon = document.createElementNS(svgNamespace, 'svg');
         icon.setAttribute('viewBox', '0 0 100 100');
         viewport.updateScreenSize(Vec2.of(100, 100));
-        var renderer;
+        let renderer;
+        // Any transparency? Include a checkerboard grid.
+        const includeTransparencyGrid = penStyle.color.a < 1;
         if (includeTransparencyGrid) {
-            var checkerboardPattern_1 = makeCheckerboardPattern();
-            var defs = document.createElementNS(svgNamespace, 'defs');
-            defs.innerHTML = checkerboardPattern_1.patternDef;
+            const checkerboardPattern = makeCheckerboardPattern();
+            const defs = document.createElementNS(svgNamespace, 'defs');
+            defs.innerHTML = checkerboardPattern.patternDef;
             icon.appendChild(defs);
-            var background_1 = document.createElementNS(svgNamespace, 'g');
-            icon.appendChild(background_1);
-            renderer = new /** @class */ (function (_super) {
-                __extends(class_1, _super);
-                function class_1() {
-                    return _super.call(this, icon, viewport) || this;
+            const background = document.createElementNS(svgNamespace, 'g');
+            icon.appendChild(background);
+            renderer = new class extends SVGRenderer {
+                constructor() {
+                    super(icon, viewport);
                 }
-                class_1.prototype.addPathToSVG = function () {
-                    var addedPath = _super.prototype.addPathToSVG.call(this);
+                addPathToSVG() {
+                    const addedPath = super.addPathToSVG();
                     if (addedPath) {
                         // Add a copy of the path on the background
-                        var copy = addedPath.cloneNode(true);
+                        const copy = addedPath.cloneNode(true);
                         copy.style.zIndex = '-1';
-                        // Make the
-                        if (copy.hasAttribute('fill')
-                            && copy.getAttribute('fill') !== 'transparent'
-                            && copy.getAttribute('fill') !== 'none') {
-                            copy.setAttribute('fill', checkerboardPattern_1.patternRef);
-                        }
                         if (copy.hasAttribute('stroke')) {
-                            copy.setAttribute('stroke', checkerboardPattern_1.patternRef);
+                            copy.setAttribute('stroke', checkerboardPattern.patternRef);
                         }
-                        background_1.appendChild(copy);
+                        // Note: Assumes that the component wouldn't normally be both stroked
+                        // and filled.
+                        else if (copy.hasAttribute('fill')) {
+                            copy.setAttribute('fill', checkerboardPattern.patternRef);
+                        }
+                        background.appendChild(copy);
                     }
                     return addedPath;
-                };
-                return class_1;
-            }(SVGRenderer))();
+                }
+            }();
         }
         else {
             renderer = new SVGRenderer(icon, viewport);
@@ -270,69 +542,222 @@ var IconProvider = /** @class */ (function () {
         builder.preview(renderer);
         // If only a single path was rendered, try to give it a checkerboard background to
         // emphasize transparency. TODO: This is very fragile
-        var bbox = builder.getBBox();
-        icon.setAttribute('viewBox', "".concat(bbox.x, " ").concat(bbox.y, " ").concat(bbox.w, " ").concat(bbox.h));
+        const bbox = builder.getBBox();
+        icon.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.w} ${bbox.h}`);
         return icon;
-    };
-    IconProvider.prototype.makePipetteIcon = function (color) {
-        var icon = document.createElementNS(svgNamespace, 'svg');
-        var pipette = document.createElementNS(svgNamespace, 'path');
-        pipette.setAttribute('d', "\n\t\t\tM 47,6\n\t\t\tC 35,5 25,15 35,30\n\t\t\tc -9.2,1.3 -15,0 -15,3\n\t\t\t\t0,2 5,5 15,7\n\t\t\tV 81\n\t\t\tL 40,90\n\t\t\th 6\n\t\t\tL 40,80\n\t\t\tV 40\n\t\t\th 15\n\t\t\tv 40\n\t\t\tl -6,10\n\t\t\th 6\n\t\t\tl 5,-9.2\n\t\t\tV 40\n\t\t\tC 70,38 75,35 75,33\n\t\t\t\t75,30 69.2,31.2 60,30\n\t\t\t\t65,15 65,5      47,6\n\t\t\tZ\n\t\t");
-        pipette.style.fill = 'var(--icon-color)';
+    }
+    makePipetteIcon(color) {
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        const mainGroup = document.createElementNS(svgNamespace, 'g');
+        mainGroup.style.rotate = '45deg';
+        mainGroup.style.transformOrigin = 'center';
+        const pipette = document.createElementNS(svgNamespace, 'g');
+        pipette.innerHTML = `
+		<path
+			style="fill: var(--icon-color); stroke-linecap:round; stroke-linejoin:round;"
+			d="
+				m 32,12 v 68
+				c 0,1 0.5,2 1.33,2.5 1.67,1.15 3.67,2.1 5.17,3.2 1.4,1.1 2.3,2.1 2.5,3.1 0.6,2.1 1,4.6 1,6.2 0,3.7 5.45,4.1 6,0.4 l 0.9,-6.8
+				c 0.3,-0.9 1.1,-1.9 2.6,-2.9 1.5,-1.1 3.4,-2 5.1,-3.2
+				C 57.5,82 58,81 58,80
+				V 12 Z m 20,25 v 41.3
+				c 0,1.7 -2.5,1.6 -4,2.7 -1,0.76 -2.1,1.5 -3,2.6
+				C 44,82.5 43.02,81.75 42,81 40.51,79.92 38,80 38,78.34
+				V 51 Z
+			"
+		/>
+		<rect
+			style="fill: var(--icon-color);"
+			width="32"
+			height="9"
+			x="29"
+			y="2"
+			ry="4.5"
+		/>
+		<path
+			style="fill: var(--icon-color);"
+			d="m 45,-25 c -5.54,0 -11,4.26 -11,9 V 0 h 22 v -16 c 0,-4.74 -5.46,-9 -11,-9 z"
+		/>
+		`;
         if (color) {
-            var checkerboardPattern = makeCheckerboardPattern();
-            var defs = document.createElementNS(svgNamespace, 'defs');
+            const checkerboardPattern = makeCheckerboardPattern();
+            const defs = document.createElementNS(svgNamespace, 'defs');
             defs.innerHTML = checkerboardPattern.patternDef;
             icon.appendChild(defs);
-            var fluidBackground = document.createElementNS(svgNamespace, 'path');
-            var fluid = document.createElementNS(svgNamespace, 'path');
-            var fluidPathData = "\n\t\t\t\tm 40,50 c 5,5 10,0 15,-5 V 80 L 50,90 H 45 L 40,80 Z\n\t\t\t";
+            const fluidBackground = document.createElementNS(svgNamespace, 'path');
+            const fluid = document.createElementNS(svgNamespace, 'path');
+            const fluidPathData = `
+				M 35,36 H 55 V 78.678012 83 L 45,87 35,83 Z
+			`;
             fluid.setAttribute('d', fluidPathData);
             fluidBackground.setAttribute('d', fluidPathData);
             fluid.style.fill = color.toHexString();
             fluidBackground.style.fill = checkerboardPattern.patternRef;
-            icon.appendChild(fluidBackground);
-            icon.appendChild(fluid);
+            mainGroup.appendChild(fluidBackground);
+            mainGroup.appendChild(fluid);
         }
-        icon.appendChild(pipette);
-        icon.setAttribute('viewBox', '0 0 100 100');
+        mainGroup.appendChild(pipette);
+        icon.appendChild(mainGroup);
+        icon.setAttribute('viewBox', '5 -40 140 140');
         return icon;
-    };
-    IconProvider.prototype.makeFormatSelectionIcon = function () {
-        return this.makeIconFromPath("\n\t\t\tM 5 10\n\t\t\tL 5 20 L 10 20 L 10 15 L 20 15 L 20 40 L 15 40 L 15 45 L 35 45 L 35 40 L 30 40 L 30 15 L 40 15 L 40 20 L 45 20 L 45 15 L 45 10 L 5 10 z\n\t\t\tM 90 10 C 90 10 86.5 13.8 86 14 C 86 14 76.2 24.8 76 25 L 60 25 L 60 65 C 75 70 85 70 90 65 L 90 25 L 80 25 L 76.7 25 L 90 10 z\n\t\t\tM 60 25 L 55 25 L 50 30 L 60 25 z\n\t\t\tM 10 55 L 10 90 L 41 90 L 41 86 L 45 86 L 45 55 L 10 55 z\n\t\t\tM 42 87 L 42 93 L 48 93 L 48 87 L 42 87 z \n\t\t");
-    };
-    IconProvider.prototype.makeResizeViewportIcon = function () {
-        return this.makeIconFromPath("\n\t\t\tM 75 5 75 10 90 10 90 25 95 25 95 5 75 5 z\n\t\t\tM 15 15 15 30 20 30 20 20 30 20 30 15 15 15 z\n\t\t\tM 84 15 82 17 81 16 81 20 85 20 84 19 86 17 84 15 z\n\t\t\tM 26 24 24 26 26 28 25 29 29 29 29 25 28 26 26 24 z\n\t\t\tM 25 71 26 72 24 74 26 76 28 74 29 75 29 71 25 71 z\n\t\t\tM 15 75 15 85 25 85 25 80 20 80 20 75 15 75 z\n\t\t\tM 90 75 90 90 75 90 75 95 95 95 95 75 90 75 z\n\t\t\tM 81 81 81 85 82 84 84 86 86 84 84 82 85 81 81 81 z\n\t\t");
-    };
-    IconProvider.prototype.makeDuplicateSelectionIcon = function () {
-        return this.makeIconFromPath("\n\t\t\tM 45,10 45,55 90,55 90,10 45,10 z\n\t\t\tM 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z \n\t\t");
-    };
-    IconProvider.prototype.makePasteIcon = function () {
-        var icon = this.makeIconFromPath("\n\t\t\tM 50 0 L 50 5 L 35 5 L 40 24.75 L 20 25 L 20 100 L 85 100 L 100 90 L 100 24 L 75.1 24.3 L 80 5 L 65 5 L 65 0 L 50 0 z\n\t\t\tM 10 15 L 10 115 L 110 115 L 110 15 L 85 15 L 83 20 L 105 20 L 105 110 L 15 110 L 15 20 L 32 20 L 30 15 L 10 15 z\n\t\t\tM 25 35 L 90 35 L 90 40 L 25 40 L 25 35 z\n\t\t\tM 25 45 L 90 45 L 90 50 L 25 50 L 25 45 z\n\t\t\tM 25 55 L 85 55 L 85 60 L 25 60 L 25 55 z\n\t\t\tM 25 65 L 90 65 L 90 70 L 25 70 L 25 65 z \n\t\t");
+    }
+    /** Unused. @deprecated */
+    makeFormatSelectionIcon() {
+        return this.makeIconFromPath(`
+			M 5 10
+			L 5 20 L 10 20 L 10 15 L 20 15 L 20 40 L 15 40 L 15 45 L 35 45 L 35 40 L 30 40 L 30 15 L 40 15 L 40 20 L 45 20 L 45 15 L 45 10 L 5 10 z
+			M 90 10 C 90 10 86.5 13.8 86 14 C 86 14 76.2 24.8 76 25 L 60 25 L 60 65 C 75 70 85 70 90 65 L 90 25 L 80 25 L 76.7 25 L 90 10 z
+			M 60 25 L 55 25 L 50 30 L 60 25 z
+			M 10 55 L 10 90 L 41 90 L 41 86 L 45 86 L 45 55 L 10 55 z
+			M 42 87 L 42 93 L 48 93 L 48 87 L 42 87 z 
+		`);
+    }
+    makeResizeImageToSelectionIcon() {
+        return this.makeIconFromPath(`
+			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
+		`);
+    }
+    /** Renamed to {@link makeResizeImageToSelectionIcon} @deprecated */
+    makeResizeViewportIcon() {
+        return this.makeResizeImageToSelectionIcon();
+    }
+    makeDuplicateSelectionIcon() {
+        return this.makeIconFromPath(`
+			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 
+		`);
+    }
+    /** Unused. @deprecated */
+    makePasteIcon() {
+        const icon = this.makeIconFromPath(`
+			M 50 0 L 50 5 L 35 5 L 40 24.75 L 20 25 L 20 100 L 85 100 L 100 90 L 100 24 L 75.1 24.3 L 80 5 L 65 5 L 65 0 L 50 0 z
+			M 10 15 L 10 115 L 110 115 L 110 15 L 85 15 L 83 20 L 105 20 L 105 110 L 15 110 L 15 20 L 32 20 L 30 15 L 10 15 z
+			M 25 35 L 90 35 L 90 40 L 25 40 L 25 35 z
+			M 25 45 L 90 45 L 90 50 L 25 50 L 25 45 z
+			M 25 55 L 85 55 L 85 60 L 25 60 L 25 55 z
+			M 25 65 L 90 65 L 90 70 L 25 70 L 25 65 z 
+		`);
         icon.setAttribute('viewBox', '0 0 120 120');
         return icon;
-    };
-    IconProvider.prototype.makeDeleteSelectionIcon = function () {
-        var strokeWidth = '5px';
-        var strokeColor = 'var(--icon-color)';
-        var fillColor = 'none';
-        return this.makeIconFromPath("\n\t\t\tM 10,10 90,90\n\t\t\tM 10,90 90,10\n\t\t", fillColor, strokeColor, strokeWidth);
-    };
-    IconProvider.prototype.makeSaveIcon = function () {
-        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.innerHTML = "\n\t\t\t<style>\n\t\t\t\t.toolbar-save-icon {\n\t\t\t\t\tstroke: var(--icon-color);\n\t\t\t\t\tstroke-width: 10;\n\t\t\t\t\tstroke-linejoin: round;\n\t\t\t\t\tstroke-linecap: round;\n\t\t\t\t\tfill: none;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<path\n\t\t\t\td='\n\t\t\t\t\tM 15,55 30,70 85,20\n\t\t\t\t'\n\t\t\t\tclass='toolbar-save-icon'\n\t\t\t/>\n\t\t";
+    }
+    makeDeleteSelectionIcon() {
+        return __classPrivateFieldGet(this, _IconProvider_instances, "m", _IconProvider_makeXIcon).call(this);
+    }
+    makeCloseIcon() {
+        return __classPrivateFieldGet(this, _IconProvider_instances, "m", _IconProvider_makeXIcon).call(this);
+    }
+    makeSaveIcon() {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.innerHTML = `
+			<style>
+				.toolbar-save-icon {
+					stroke: var(--icon-color);
+					stroke-width: 6;
+					stroke-linejoin: round;
+					stroke-linecap: round;
+					fill: none;
+				}
+			</style>
+			<path
+				d='
+					M 15,55 30,70 85,20
+				'
+				class='toolbar-save-icon'
+			/>
+		`;
         svg.setAttribute('viewBox', '0 0 100 100');
         return svg;
-    };
-    IconProvider.prototype.makeConfigureDocumentIcon = function () {
-        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.innerHTML = "\n\t\t\t<path\n\t\t\t\td='\n\t\t\t\t\tM 5,5 V 95 H 95 V 5 Z m 5,5 H 90 V 90 H 10 Z\n\t\t\t\t\tm 5,10 V 30 H 50 V 25 H 20 v -5 z\n\t\t\t\t\tm 40,0 V 50 H 85 V 20 Z\n\t\t\t\t\tm 2,2 H 83 V 39 L 77,28 70,42 64,35 57,45 Z\n\t\t\t\t\tm 8.5,5 C 64.67,27 64,27.67 64,28.5 64,29.33 64.67,30 65.5,30 66.33,30 67,29.33 67,28.5 67,27.67 66.33,27 65.5,27 Z\n\t\t\t\t\tM 15,40 v 5 h 35 v -5 z\n\t\t\t\t\tm 0,15 v 5 h 70 v -5 z\n\t\t\t\t\tm 0,15 v 5 h 70 v -5 z\n\t\t\t\t'\n\t\t\t\tstyle='fill: var(--icon-color);'\n\t\t\t/>\n\t\t";
+    }
+    makeConfigureDocumentIcon() {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.innerHTML = `
+			<path
+				d='
+					M 5,5 V 95 H 95 V 5 Z m 5,5 H 90 V 90 H 10 Z
+					m 5,10 V 30 H 50 V 25 H 20 v -5 z
+					m 40,0 V 50 H 85 V 20 Z
+					m 2,2 H 83 V 39 L 77,28 70,42 64,35 57,45 Z
+					m 8.5,5 C 64.67,27 64,27.67 64,28.5 64,29.33 64.67,30 65.5,30 66.33,30 67,29.33 67,28.5 67,27.67 66.33,27 65.5,27 Z
+					M 15,40 v 5 h 35 v -5 z
+					m 0,15 v 5 h 70 v -5 z
+					m 0,15 v 5 h 70 v -5 z
+				'
+				style='fill: var(--icon-color);'
+			/>
+		`;
         svg.setAttribute('viewBox', '0 0 100 100');
         return svg;
-    };
-    IconProvider.prototype.makeOverflowIcon = function () {
-        return this.makeIconFromPath("\n\t\t\tM 15 40\n\t\t\tA 12.5 12.5 0 0 0 2.5 52.5\n\t\t\tA 12.5 12.5 0 0 0 15 65\n\t\t\tA 12.5 12.5 0 0 0 27.5 52.5\n\t\t\tA 12.5 12.5 0 0 0 15 40\n\t\t\tz\n\t\n\t\t\tM 50 40\n\t\t\tA 12.5 12.5 0 0 0 37.5 52.5\n\t\t\tA 12.5 12.5 0 0 0 50 65\n\t\t\tA 12.5 12.5 0 0 0 62.5 52.5\n\t\t\tA 12.5 12.5 0 0 0 50 40\n\t\t\tz\n\t\t\t\n\t\t\tM 85 40\n\t\t\tA 12.5 12.5 0 0 0 72.5 52.5\n\t\t\tA 12.5 12.5 0 0 0 85 65\n\t\t\tA 12.5 12.5 0 0 0 97.5 52.5\n\t\t\tA 12.5 12.5 0 0 0 85 40\n\t\t\tz\n\t\t");
-    };
-    return IconProvider;
-}());
+    }
+    makeOverflowIcon() {
+        return this.makeIconFromPath(`
+			M 15 40
+			A 12.5 12.5 0 0 0 2.5 52.5
+			A 12.5 12.5 0 0 0 15 65
+			A 12.5 12.5 0 0 0 27.5 52.5
+			A 12.5 12.5 0 0 0 15 40
+			z
+	
+			M 50 40
+			A 12.5 12.5 0 0 0 37.5 52.5
+			A 12.5 12.5 0 0 0 50 65
+			A 12.5 12.5 0 0 0 62.5 52.5
+			A 12.5 12.5 0 0 0 50 40
+			z
+			
+			M 85 40
+			A 12.5 12.5 0 0 0 72.5 52.5
+			A 12.5 12.5 0 0 0 85 65
+			A 12.5 12.5 0 0 0 97.5 52.5
+			A 12.5 12.5 0 0 0 85 40
+			z
+		`);
+    }
+    /**
+     * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
+     * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
+     */
+    makeIconFromPath(pathData, fill = 'var(--icon-color)', strokeColor = 'none', strokeWidth = '0px') {
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        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;
+    }
+    /**
+     * @returns An object with both the definition of a checkerboard pattern and the syntax to
+     * reference that pattern. The defs provided by this function should be wrapped within a
+     * `<defs></defs>` element.
+     */
+    makeCheckerboardPattern() {
+        return makeCheckerboardPattern();
+    }
+    /**
+     * @returns true if the given `penStyle` is known to match a rounded tip type of pen.
+     */
+    isRoundedTipPen(penStyle) {
+        return penStyle.factory === makeFreehandLineBuilder;
+    }
+    /** Must be overridden by icon packs that need attribution. */
+    licenseInfo() { return null; }
+}
+_IconProvider_instances = new WeakSet(), _IconProvider_makeXIcon = function _IconProvider_makeXIcon() {
+    const strokeWidth = '6px';
+    const strokeColor = 'var(--icon-color)';
+    const fillColor = 'none';
+    return this.makeIconFromPath(`
+			M 15,15 85,85
+			M 15,85 85,15
+		`, fillColor, strokeColor, strokeWidth);
+};
 export default IconProvider;