js-draw 0.23.0 → 0.24.0

package/dist/cjs/toolbar/IconProvider.js

@@ -0,0 +1,274 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Color4_1 = require("../Color4");
+var Vec2_1 = require("../math/Vec2");
+var SVGRenderer_1 = require("../rendering/renderers/SVGRenderer");
+var Viewport_1 = require("../Viewport");
+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 checkerboardPatternDef = "\n\t<pattern\n\t\tid='checkerboard'\n\t\tviewBox='0,0,10,10'\n\t\twidth='20%'\n\t\theight='20%'\n\t\tpatternUnits='userSpaceOnUse'\n\t>\n\t\t<rect x=0 y=0 width=10 height=10 fill='white'/>\n\t\t<rect x=0 y=0 width=5 height=5 fill='gray'/>\n\t\t<rect x=5 y=5 width=5 height=5 fill='gray'/>\n\t</pattern>\n";
+var checkerboardPatternRef = 'url(#checkerboard)';
+/**
+ * Provides icons that can be used in the toolbar, etc.
+ * Extend this class and override methods to customize icons.
+ *
+ * @example
+ * ```ts
+ * class CustomIconProvider extends jsdraw.IconProvider {
+ *     // Use '☺' instead of the default dropdown symbol.
+ *     public makeDropdownIcon() {
+ *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ *         icon.innerHTML = `
+ *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
+ *         `;
+ *         icon.setAttribute('viewBox', '0 0 100 100');
+ *         return icon;
+ *     }
+ * }
+ *
+ * const icons = new CustomIconProvider();
+ * const editor = new jsdraw.Editor(document.body, {
+ *     iconProvider: icons,
+ * });
+ *
+ * // Add a toolbar that uses these icons
+ * editor.addToolbar();
+ * ```
+ */
+var IconProvider = /** @class */ (function () {
+    function IconProvider() {
+    }
+    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');
+        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';
+        // 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.setAttribute('viewBox', '0 0 120 120');
+        return icon;
+    };
+    IconProvider.prototype.makeSelectionIcon = function () {
+        var 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.setAttribute('viewBox', '0 0 100 100');
+        return icon;
+    };
+    IconProvider.prototype.makeHandToolIcon = function () {
+        var fill = 'none';
+        var strokeColor = 'var(--icon-color)';
+        var 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');
+        icon.setAttribute('viewBox', '0 0 100 100');
+        var addTextNode = function (text, x, y) {
+            var textNode = document.createElementNS(svgNamespace, 'text');
+            textNode.appendChild(document.createTextNode(text));
+            textNode.setAttribute('x', x.toString());
+            textNode.setAttribute('y', y.toString());
+            textNode.style.textAlign = 'center';
+            textNode.style.textAnchor = 'middle';
+            textNode.style.fontSize = '55px';
+            textNode.style.fill = 'var(--icon-color)';
+            textNode.style.fontFamily = 'monospace';
+            icon.appendChild(textNode);
+        };
+        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");
+        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');
+        icon.setAttribute('viewBox', '0 0 100 100');
+        var 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.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))';
+        icon.appendChild(textNode);
+        return icon;
+    };
+    IconProvider.prototype.makePenIcon = function (strokeSize, color, rounded) {
+        if (color instanceof Color4_1.default) {
+            color = color.toHexString();
+        }
+        var 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';
+        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_1.default.fromHex('#f4d7d7');
+        var tipColor = pencilTipColor.mix(Color4_1.default.fromString(color), tipThickness / 40 - 0.1).toHexString();
+        var ink = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPatternRef, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPatternRef, "\"\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(checkerboardPatternRef, "\"\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(checkerboardPatternRef, "\"\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(checkerboardPatternDef, "\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");
+        return icon;
+    };
+    IconProvider.prototype.makeIconFromFactory = function (pen, factory) {
+        // 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 = {
+            pos: Vec2_1.Vec2.of(10, 10),
+            width: thickness,
+            color: pen.getColor(),
+            time: nowTime - 100,
+        };
+        var endPoint = {
+            pos: Vec2_1.Vec2.of(90, 90),
+            width: thickness,
+            color: pen.getColor(),
+            time: nowTime,
+        };
+        var viewport = new Viewport_1.default(function () { });
+        var builder = factory(startPoint, viewport);
+        builder.addPoint(endPoint);
+        var icon = document.createElementNS(svgNamespace, 'svg');
+        icon.setAttribute('viewBox', '0 0 100 100');
+        viewport.updateScreenSize(Vec2_1.Vec2.of(100, 100));
+        var renderer = new SVGRenderer_1.default(icon, viewport);
+        builder.preview(renderer);
+        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)';
+        if (color) {
+            var defs = document.createElementNS(svgNamespace, 'defs');
+            defs.innerHTML = checkerboardPatternDef;
+            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";
+            fluid.setAttribute('d', fluidPathData);
+            fluidBackground.setAttribute('d', fluidPathData);
+            fluid.style.fill = color.toHexString();
+            fluidBackground.style.fill = checkerboardPatternRef;
+            icon.appendChild(fluidBackground);
+            icon.appendChild(fluid);
+        }
+        icon.appendChild(pipette);
+        icon.setAttribute('viewBox', '0 0 100 100');
+        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");
+        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";
+        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";
+        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;
+}());
+exports.default = IconProvider;

package/dist/cjs/toolbar/lib.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconProvider = void 0;
+__exportStar(require("./widgets/lib"), exports);
+__exportStar(require("./makeColorInput"), exports);
+var IconProvider_1 = require("./IconProvider");
+Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return IconProvider_1.default; } });

package/dist/cjs/toolbar/localization.d.ts

@@ -0,0 +1,52 @@
+export interface ToolbarLocalization {
+    fontLabel: string;
+    textSize: string;
+    touchPanning: string;
+    lockRotation: string;
+    outlinedRectanglePen: string;
+    outlinedCirclePen: string;
+    filledRectanglePen: string;
+    linePen: string;
+    arrowPen: string;
+    image: string;
+    inputAltText: string;
+    chooseFile: string;
+    cancel: string;
+    submit: string;
+    freehandPen: string;
+    pressureSensitiveFreehandPen: string;
+    selectPenType: string;
+    colorLabel: string;
+    pen: string;
+    eraser: string;
+    select: string;
+    handTool: string;
+    thicknessLabel: string;
+    resizeImageToSelection: string;
+    deleteSelection: string;
+    duplicateSelection: string;
+    pickColorFromScreen: string;
+    clickToPickColorAnnouncement: string;
+    colorSelectionCanceledAnnouncement: string;
+    reformatSelection: string;
+    undo: string;
+    redo: string;
+    zoom: string;
+    resetView: string;
+    selectionToolKeyboardShortcuts: string;
+    paste: string;
+    documentProperties: string;
+    backgroundColor: string;
+    imageWidthOption: string;
+    imageHeightOption: string;
+    useGridOption: string;
+    toggleOverflow: string;
+    errorImageHasZeroSize: string;
+    dropdownShown: (toolName: string) => string;
+    dropdownHidden: (toolName: string) => string;
+    zoomLevel: (zoomPercentage: number) => string;
+    colorChangedAnnouncement: (color: string) => string;
+    imageSize: (size: number, units: string) => string;
+    imageLoadError: (message: string) => string;
+}
+export declare const defaultToolbarLocalization: ToolbarLocalization;

package/dist/cjs/toolbar/localization.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultToolbarLocalization = void 0;
+exports.defaultToolbarLocalization = {
+    pen: 'Pen',
+    eraser: 'Eraser',
+    select: 'Select',
+    handTool: 'Pan',
+    zoom: 'Zoom',
+    image: 'Image',
+    reformatSelection: 'Format selection',
+    inputAltText: 'Alt text: ',
+    chooseFile: 'Choose file: ',
+    submit: 'Submit',
+    cancel: 'Cancel',
+    resetView: 'Reset view',
+    thicknessLabel: 'Thickness: ',
+    colorLabel: 'Color: ',
+    fontLabel: 'Font: ',
+    textSize: 'Size: ',
+    resizeImageToSelection: 'Resize image to selection',
+    deleteSelection: 'Delete selection',
+    duplicateSelection: 'Duplicate selection',
+    undo: 'Undo',
+    redo: 'Redo',
+    selectPenType: 'Pen type: ',
+    pickColorFromScreen: 'Pick color from screen',
+    clickToPickColorAnnouncement: 'Click on the screen to pick a color',
+    colorSelectionCanceledAnnouncement: 'Color selection canceled',
+    selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
+    documentProperties: 'Page',
+    backgroundColor: 'Background Color: ',
+    imageWidthOption: 'Width: ',
+    imageHeightOption: 'Height: ',
+    useGridOption: 'Grid: ',
+    toggleOverflow: 'More',
+    touchPanning: 'Touchscreen panning',
+    freehandPen: 'Freehand',
+    pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
+    arrowPen: 'Arrow',
+    linePen: 'Line',
+    outlinedRectanglePen: 'Outlined rectangle',
+    filledRectanglePen: 'Filled rectangle',
+    outlinedCirclePen: 'Outlined circle',
+    lockRotation: 'Lock rotation',
+    paste: 'Paste',
+    dropdownShown: function (toolName) { return "Dropdown for ".concat(toolName, " shown"); },
+    dropdownHidden: function (toolName) { return "Dropdown for ".concat(toolName, " hidden"); },
+    zoomLevel: function (zoomPercent) { return "Zoom: ".concat(zoomPercent, "%"); },
+    colorChangedAnnouncement: function (color) { return "Color changed to ".concat(color); },
+    imageSize: function (size, units) { return "Image size: ".concat(size, " ").concat(units); },
+    errorImageHasZeroSize: 'Error: Image has zero size',
+    imageLoadError: function (message) { return "Error loading image: ".concat(message); },
+};

package/dist/cjs/toolbar/makeColorInput.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeColorInput = void 0;
+var Color4_1 = require("../Color4");
+var PipetteTool_1 = require("../tools/PipetteTool");
+var types_1 = require("../types");
+// Returns [ color input, input container, callback to change the color value ].
+var makeColorInput = function (editor, onColorChange) {
+    var colorInputContainer = document.createElement('span');
+    var colorInput = document.createElement('input');
+    colorInput.type = 'button';
+    colorInput.classList.add('coloris_input');
+    colorInputContainer.classList.add('color-input-container');
+    colorInputContainer.appendChild(colorInput);
+    var pipetteController = addPipetteTool(editor, colorInputContainer, function (color) {
+        colorInput.value = color.toHexString();
+        onInputEnd();
+        // Update the color preview, if it exists (may be managed by Coloris).
+        var parentElem = colorInput.parentElement;
+        if (parentElem && parentElem.classList.contains('clr-field')) {
+            parentElem.style.color = colorInput.value;
+        }
+    });
+    var currentColor;
+    var handleColorInput = function () {
+        currentColor = Color4_1.default.fromHex(colorInput.value);
+    };
+    // Only change the pen color when we finish sending input (this limits the number of
+    // editor events triggered and accessibility announcements).
+    var onInputEnd = function () {
+        handleColorInput();
+        if (currentColor) {
+            editor.announceForAccessibility(editor.localization.colorChangedAnnouncement(currentColor.toHexString()));
+            onColorChange(currentColor);
+            editor.notifier.dispatch(types_1.EditorEventType.ColorPickerColorSelected, {
+                kind: types_1.EditorEventType.ColorPickerColorSelected,
+                color: currentColor,
+            });
+        }
+    };
+    colorInput.oninput = handleColorInput;
+    colorInput.addEventListener('open', function () {
+        editor.notifier.dispatch(types_1.EditorEventType.ColorPickerToggled, {
+            kind: types_1.EditorEventType.ColorPickerToggled,
+            open: true,
+        });
+        pipetteController.cancel();
+        // Focus the Coloris color picker, if it exists.
+        // Don't focus the text input within the color picker, however,
+        // as this displays a keyboard on mobile devices.
+        var colorPickerElem = document.querySelector('#clr-picker #clr-hue-slider');
+        colorPickerElem === null || colorPickerElem === void 0 ? void 0 : colorPickerElem.focus();
+    });
+    colorInput.addEventListener('close', function () {
+        editor.notifier.dispatch(types_1.EditorEventType.ColorPickerToggled, {
+            kind: types_1.EditorEventType.ColorPickerToggled,
+            open: false,
+        });
+        onInputEnd();
+        // Restore focus to the input that opened the color picker
+        colorInput.focus();
+    });
+    var setColorInputValue = function (color) {
+        if (typeof color === 'object') {
+            color = color.toHexString();
+        }
+        colorInput.value = color;
+        // Fire all color event listeners. See
+        // https://github.com/mdbassit/Coloris#manually-updating-the-thumbnail
+        colorInput.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    return [colorInput, colorInputContainer, setColorInputValue];
+};
+exports.makeColorInput = makeColorInput;
+var addPipetteTool = function (editor, container, onColorChange) {
+    var pipetteButton = document.createElement('button');
+    pipetteButton.classList.add('pipetteButton');
+    pipetteButton.title = editor.localization.pickColorFromScreen;
+    pipetteButton.setAttribute('alt', pipetteButton.title);
+    var updatePipetteIcon = function (color) {
+        pipetteButton.replaceChildren(editor.icons.makePipetteIcon(color));
+    };
+    updatePipetteIcon();
+    var pipetteTool = editor.toolController.getMatchingTools(PipetteTool_1.default)[0];
+    var endColorSelectMode = function () {
+        pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.clearColorListener();
+        updatePipetteIcon();
+        pipetteButton.classList.remove('active');
+    };
+    var pipetteColorSelect = function (color) {
+        endColorSelectMode();
+        if (color) {
+            onColorChange(color);
+        }
+    };
+    var pipetteColorPreview = function (color) {
+        if (color) {
+            updatePipetteIcon(color);
+        }
+        else {
+            updatePipetteIcon();
+        }
+    };
+    pipetteButton.onclick = function () {
+        // If already picking, cancel it.
+        if (pipetteButton.classList.contains('active')) {
+            endColorSelectMode();
+            editor.announceForAccessibility(editor.localization.colorSelectionCanceledAnnouncement);
+            return;
+        }
+        pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.setColorListener(pipetteColorPreview, pipetteColorSelect);
+        if (pipetteTool) {
+            pipetteButton.classList.add('active');
+            editor.announceForAccessibility(editor.localization.clickToPickColorAnnouncement);
+        }
+    };
+    container.appendChild(pipetteButton);
+    return {
+        // Cancel a pipette color selection if one is in progress.
+        cancel: function () {
+            endColorSelectMode();
+        },
+    };
+};
+exports.default = exports.makeColorInput;

package/dist/cjs/toolbar/widgets/ActionButtonWidget.js

@@ -0,0 +1,47 @@
+"use strict";
+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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var BaseWidget_1 = require("./BaseWidget");
+var ActionButtonWidget = /** @class */ (function (_super) {
+    __extends(ActionButtonWidget, _super);
+    function ActionButtonWidget(editor, id, makeIcon, title, clickAction, localizationTable, mustBeToplevel) {
+        if (mustBeToplevel === void 0) { mustBeToplevel = false; }
+        var _this = _super.call(this, editor, id, localizationTable) || this;
+        _this.makeIcon = makeIcon;
+        _this.title = title;
+        _this.clickAction = clickAction;
+        _this.mustBeToplevel = mustBeToplevel;
+        return _this;
+    }
+    ActionButtonWidget.prototype.handleClick = function () {
+        this.clickAction();
+    };
+    ActionButtonWidget.prototype.getTitle = function () {
+        return this.title;
+    };
+    ActionButtonWidget.prototype.createIcon = function () {
+        return this.makeIcon();
+    };
+    ActionButtonWidget.prototype.fillDropdown = function (_dropdown) {
+        return false;
+    };
+    ActionButtonWidget.prototype.canBeInOverflowMenu = function () {
+        return !this.mustBeToplevel;
+    };
+    return ActionButtonWidget;
+}(BaseWidget_1.default));
+exports.default = ActionButtonWidget;

package/dist/cjs/toolbar/widgets/BaseToolWidget.js

@@ -0,0 +1,64 @@
+"use strict";
+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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var types_1 = require("../../types");
+var BaseWidget_1 = require("./BaseWidget");
+var BaseToolWidget = /** @class */ (function (_super) {
+    __extends(BaseToolWidget, _super);
+    function BaseToolWidget(editor, targetTool, id, localizationTable) {
+        var _this = _super.call(this, editor, id, localizationTable) || this;
+        _this.targetTool = targetTool;
+        editor.notifier.on(types_1.EditorEventType.ToolEnabled, function (toolEvt) {
+            if (toolEvt.kind !== types_1.EditorEventType.ToolEnabled) {
+                throw new Error('Incorrect event type! (Expected ToolEnabled)');
+            }
+            if (toolEvt.tool === targetTool) {
+                _this.setSelected(true);
+            }
+        });
+        editor.notifier.on(types_1.EditorEventType.ToolDisabled, function (toolEvt) {
+            if (toolEvt.kind !== types_1.EditorEventType.ToolDisabled) {
+                throw new Error('Incorrect event type! (Expected ToolDisabled)');
+            }
+            if (toolEvt.tool === targetTool) {
+                _this.setSelected(false);
+                _this.setDropdownVisible(false);
+            }
+        });
+        return _this;
+    }
+    BaseToolWidget.prototype.handleClick = function () {
+        if (this.hasDropdown) {
+            if (!this.targetTool.isEnabled()) {
+                this.targetTool.setEnabled(true);
+            }
+            else {
+                this.setDropdownVisible(!this.isDropdownVisible());
+            }
+        }
+        else {
+            this.targetTool.setEnabled(!this.targetTool.isEnabled());
+        }
+    };
+    BaseToolWidget.prototype.addTo = function (parent) {
+        var result = _super.prototype.addTo.call(this, parent);
+        this.setSelected(this.targetTool.isEnabled());
+        return result;
+    };
+    return BaseToolWidget;
+}(BaseWidget_1.default));
+exports.default = BaseToolWidget;