js-draw 0.9.3 → 0.10.0

package/dist/src/Color4.d.ts

@@ -30,6 +30,7 @@ export default class Color4 {
      * ```
      */
     toHexString(): string;
+    toString(): string;
     static transparent: Color4;
     static red: Color4;
     static green: Color4;

package/dist/src/Color4.js

@@ -63,24 +63,40 @@ export default class Color4 {
         if (text.startsWith('#')) {
             return Color4.fromHex(text);
         }
-        else if (text === 'none' || text === 'transparent') {
+        if (text === 'none' || text === 'transparent') {
             return Color4.transparent;
         }
-        else {
-            // Otherwise, try to use an HTML5Canvas to determine the color
-            const canvas = document.createElement('canvas');
-            canvas.width = 1;
-            canvas.height = 1;
-            const ctx = canvas.getContext('2d');
-            ctx.fillStyle = text;
-            ctx.fillRect(0, 0, 1, 1);
-            const data = ctx.getImageData(0, 0, 1, 1);
-            const red = data.data[0] / 255;
-            const green = data.data[1] / 255;
-            const blue = data.data[2] / 255;
-            const alpha = data.data[3] / 255;
-            return Color4.ofRGBA(red, green, blue, alpha);
+        // rgba?: Match both rgb and rgba strings.
+        // ([,0-9.]+): Match any string of only numeric, '.' and ',' characters.
+        const rgbRegex = /^rgba?\(([,0-9.]+)\)$/i;
+        const rgbMatch = text.replace(/\s*/g, '').match(rgbRegex);
+        if (rgbMatch) {
+            const componentsListStr = rgbMatch[1];
+            const componentsList = JSON.parse(`[ ${componentsListStr} ]`);
+            if (componentsList.length === 3) {
+                return Color4.ofRGB(componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255);
+            }
+            else if (componentsList.length === 4) {
+                return Color4.ofRGBA(componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255, componentsList[3]);
+            }
+            else {
+                throw new Error(`RGB string, ${text}, has wrong number of components: ${componentsList.length}`);
+            }
         }
+        // Otherwise, try to use an HTMLCanvasElement to determine the color.
+        // Note: We may be unable to create an HTMLCanvasElement if running as a unit test.
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = text;
+        ctx.fillRect(0, 0, 1, 1);
+        const data = ctx.getImageData(0, 0, 1, 1);
+        const red = data.data[0] / 255;
+        const green = data.data[1] / 255;
+        const blue = data.data[2] / 255;
+        const alpha = data.data[3] / 255;
+        return Color4.ofRGBA(red, green, blue, alpha);
     }
     /** @returns true if `this` and `other` are approximately equal. */
     eq(other) {
@@ -118,6 +134,9 @@ export default class Color4 {
         this.hexString = `#${red}${green}${blue}${alpha}`;
         return this.hexString;
     }
+    toString() {
+        return this.toHexString();
+    }
 }
 Color4.transparent = Color4.ofRGBA(0, 0, 0, 0);
 Color4.red = Color4.ofRGB(1.0, 0.0, 0.0);

package/dist/src/Editor.d.ts

@@ -29,8 +29,8 @@ import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
-type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
-type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
+declare type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+declare type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;

package/dist/src/Editor.js

@@ -44,6 +44,7 @@ import getLocalizationTable from './localizations/getLocalizationTable';
 import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
 import CanvasRenderer from './rendering/renderers/CanvasRenderer';
+import untilNextAnimationFrame from './util/untilNextAnimationFrame';
 // { @inheritDoc Editor! }
 export class Editor {
     /**
@@ -676,9 +677,7 @@ export class Editor {
                 if (countProcessed % 500 === 0) {
                     this.showLoadingWarning(countProcessed / totalToProcess);
                     this.rerender();
-                    return new Promise(resolve => {
-                        requestAnimationFrame(() => resolve());
-                    });
+                    return untilNextAnimationFrame();
                 }
                 return null;
             }, (importExportRect) => {

package/dist/src/EditorImage.d.ts

@@ -27,7 +27,7 @@ export default class EditorImage {
     static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
     private static AddElementCommand;
 }
-type TooSmallToRenderCheck = (rect: Rect2) => boolean;
+declare type TooSmallToRenderCheck = (rect: Rect2) => boolean;
 /** Part of the Editor's image. @internal */
 export declare class ImageNode {
     private parent;

package/dist/src/EventDispatcher.d.ts

@@ -15,7 +15,7 @@
  *
  * @packageDocumentation
  */
-type CallbackHandler<EventType> = (data: EventType) => void;
+declare type CallbackHandler<EventType> = (data: EventType) => void;
 export default class EventDispatcher<EventKeyType extends string | symbol | number, EventMessageType> {
     private listeners;
     constructor();

package/dist/src/SVGLoader.d.ts

@@ -3,8 +3,8 @@ import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnP
 export declare const defaultSVGViewRect: Rect2;
 export declare const svgAttributesDataKey = "svgAttrs";
 export declare const svgStyleAttributesDataKey = "svgStyleAttrs";
-export type SVGLoaderUnknownAttribute = [string, string];
-export type SVGLoaderUnknownStyleAttribute = {
+export declare type SVGLoaderUnknownAttribute = [string, string];
+export declare type SVGLoaderUnknownStyleAttribute = {
     key: string;
     value: string;
     priority?: string;

package/dist/src/SVGLoader.js

@@ -34,12 +34,14 @@ export default class SVGLoader {
         this.processedCount = 0;
         this.totalToProcess = 0;
     }
-    getStyle(node) {
-        var _a, _b, _c;
+    // If [computedStyles] is given, it is preferred to directly accessing node's style object.
+    getStyle(node, computedStyles) {
+        var _a, _b, _c, _d, _f, _g;
         const style = {
             fill: Color4.transparent,
         };
-        const fillAttribute = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : node.style.fill;
+        // If possible, use computedStyles (allows property inheritance).
+        const fillAttribute = (_b = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.fill) !== null && _b !== void 0 ? _b : node.style.fill;
         if (fillAttribute) {
             try {
                 style.fill = Color4.fromString(fillAttribute);
@@ -48,18 +50,21 @@ export default class SVGLoader {
                 console.error('Unknown fill color,', fillAttribute);
             }
         }
-        const strokeAttribute = (_b = node.getAttribute('stroke')) !== null && _b !== void 0 ? _b : node.style.stroke;
-        const strokeWidthAttr = (_c = node.getAttribute('stroke-width')) !== null && _c !== void 0 ? _c : node.style.strokeWidth;
-        if (strokeAttribute) {
+        const strokeAttribute = (_d = (_c = node.getAttribute('stroke')) !== null && _c !== void 0 ? _c : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.stroke) !== null && _d !== void 0 ? _d : node.style.stroke;
+        const strokeWidthAttr = (_g = (_f = node.getAttribute('stroke-width')) !== null && _f !== void 0 ? _f : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.strokeWidth) !== null && _g !== void 0 ? _g : node.style.strokeWidth;
+        if (strokeAttribute && strokeWidthAttr) {
             try {
                 let width = parseFloat(strokeWidthAttr !== null && strokeWidthAttr !== void 0 ? strokeWidthAttr : '1');
                 if (!isFinite(width)) {
                     width = 0;
                 }
-                style.stroke = {
-                    width,
-                    color: Color4.fromString(strokeAttribute),
-                };
+                const strokeColor = Color4.fromString(strokeAttribute);
+                if (strokeColor.a > 0) {
+                    style.stroke = {
+                        width,
+                        color: strokeColor,
+                    };
+                }
             }
             catch (e) {
                 console.error('Error parsing stroke data:', e);
@@ -188,6 +193,10 @@ export default class SVGLoader {
                 throw new Error(`Unrecognized text child node: ${child}.`);
             }
         }
+        // If no content, the content is an empty string.
+        if (contentList.length === 0) {
+            contentList.push('');
+        }
         // Compute styles.
         const computedStyles = window.getComputedStyle(elem);
         const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
@@ -204,7 +213,7 @@ export default class SVGLoader {
         const style = {
             size: fontSize,
             fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
-            renderingStyle: this.getStyle(elem),
+            renderingStyle: this.getStyle(elem, computedStyles),
         };
         const supportedAttrs = [];
         const transform = this.getTransform(elem, supportedAttrs, computedStyles);
@@ -297,6 +306,9 @@ export default class SVGLoader {
                     this.updateViewBox(node);
                     this.updateSVGAttrs(node);
                     break;
+                case 'style':
+                    this.addUnknownNode(node);
+                    break;
                 default:
                     console.warn('Unknown SVG element,', node);
                     if (!(node instanceof SVGElement)) {
@@ -361,6 +373,8 @@ export default class SVGLoader {
 			<html>
 				<head>
 					<title>SVG Loading Sandbox</title>
+					<meta name='viewport' conent='width=device-width,initial-scale=1.0'/>
+					<meta charset='utf-8'/>
 				</head>
 				<body>
 					<script>

package/dist/src/UndoRedoHistory.d.ts

@@ -1,7 +1,7 @@
 import Editor from './Editor';
 import Command from './commands/Command';
-type AnnounceRedoCallback = (command: Command) => void;
-type AnnounceUndoCallback = (command: Command) => void;
+declare type AnnounceRedoCallback = (command: Command) => void;
+declare type AnnounceUndoCallback = (command: Command) => void;
 declare class UndoRedoHistory {
     private readonly editor;
     private announceRedoCallback;

package/dist/src/Viewport.d.ts

@@ -4,7 +4,7 @@ import Rect2 from './math/Rect2';
 import { Point2, Vec2 } from './math/Vec2';
 import { StrokeDataPoint } from './types';
 import { EditorNotifier } from './types';
-type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
+declare type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
 export declare abstract class ViewportTransform extends Command {
     abstract readonly transform: Mat33;
 }

package/dist/src/commands/SerializableCommand.d.ts

@@ -1,6 +1,6 @@
 import Editor from '../Editor';
 import Command from './Command';
-export type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
+export declare type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
 export default abstract class SerializableCommand extends Command {
     private commandTypeId;
     constructor(commandTypeId: string);

package/dist/src/components/AbstractComponent.d.ts

@@ -4,9 +4,9 @@ import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
-export type LoadSaveData = (string[] | Record<symbol, string | number>);
-export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
-export type DeserializeCallback = (data: string) => AbstractComponent;
+export declare type LoadSaveData = (string[] | Record<symbol, string | number>);
+export declare type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
+export declare type DeserializeCallback = (data: string) => AbstractComponent;
 export default abstract class AbstractComponent {
     private readonly componentKind;
     protected lastChangedTime: number;

package/dist/src/components/SVGGlobalAttributesObject.d.ts

@@ -4,7 +4,7 @@ import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
-type GlobalAttrsList = Array<[string, string | null]>;
+declare type GlobalAttrsList = Array<[string, string | null]>;
 export default class SVGGlobalAttributesObject extends AbstractComponent {
     private readonly attrs;
     protected contentBBox: Rect2;

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -33,7 +33,7 @@ export default class FreehandLineBuilder {
             fill: Color4.transparent,
             stroke: {
                 color: this.startPoint.color,
-                width: this.roundDistance(this.averageWidth),
+                width: this.roundDistance(this.averageWidth / 2),
             }
         };
     }
@@ -77,7 +77,7 @@ export default class FreehandLineBuilder {
         return this.previewStroke();
     }
     getMinFit() {
-        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
+        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 5);
         if (minFit < 1e-10) {
             minFit = this.minFitAllowed;
         }
@@ -98,7 +98,7 @@ export default class FreehandLineBuilder {
             if (!this.isFirstSegment) {
                 return [];
             }
-            const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+            const width = Viewport.roundPoint(this.startPoint.width / 9, Math.min(this.minFitAllowed, this.startPoint.width / 5));
             const center = this.roundPoint(this.startPoint.pos);
             // Start on the right, cycle clockwise:
             //    |

package/dist/src/components/builders/PressureSensitiveFreehandLineBuilder.js

@@ -141,7 +141,7 @@ export default class PressureSensitiveFreehandLineBuilder {
         return this.previewStroke();
     }
     roundPoint(point) {
-        let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 2);
+        let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
         if (minFit < 1e-10) {
             minFit = this.minFitAllowed;
         }

package/dist/src/components/builders/types.d.ts

@@ -9,4 +9,4 @@ export interface ComponentBuilder {
     preview(renderer: AbstractRenderer): void;
     addPoint(point: StrokeDataPoint): void;
 }
-export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;
+export declare type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;

package/dist/src/components/util/StrokeSmoother.d.ts

@@ -8,7 +8,7 @@ export interface Curve {
     endWidth: number;
     endPoint: Vec2;
 }
-type OnCurveAddedCallback = (curve: Curve | null) => void;
+declare type OnCurveAddedCallback = (curve: Curve | null) => void;
 export declare class StrokeSmoother {
     private startPoint;
     private minFitAllowed;

package/dist/src/math/Mat33.d.ts

@@ -1,6 +1,6 @@
 import { Point2, Vec2 } from './Vec2';
 import Vec3 from './Vec3';
-export type Mat33Array = [
+export declare type Mat33Array = [
     number,
     number,
     number,

package/dist/src/math/Path.d.ts

@@ -30,7 +30,7 @@ export interface MoveToPathCommand {
     kind: PathCommandType.MoveTo;
     point: Point2;
 }
-export type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
+export declare type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
 interface IntersectionResult {
     curve: LineSegment2 | Bezier;
     parameterValue: number;

package/dist/src/math/Vec2.d.ts

@@ -9,5 +9,5 @@ export declare namespace Vec2 {
     const unitY: Vec3;
     const zero: Vec3;
 }
-export type Point2 = Vec3;
-export type Vec2 = Vec3;
+export declare type Point2 = Vec3;
+export declare type Vec2 = Vec3;

package/dist/src/rendering/caching/testUtils.d.ts

@@ -1,7 +1,7 @@
 import DummyRenderer from '../renderers/DummyRenderer';
 import RenderingCache from './RenderingCache';
 import { CacheProps } from './types';
-type RenderAllocCallback = (renderer: DummyRenderer) => void;
+declare type RenderAllocCallback = (renderer: DummyRenderer) => void;
 export declare const createCache: (onRenderAlloc?: RenderAllocCallback, cacheOptions?: Partial<CacheProps>) => {
     cache: RenderingCache;
     editor: import("../../Editor").Editor;

package/dist/src/rendering/caching/types.d.ts

@@ -1,8 +1,8 @@
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheRecordManager } from './CacheRecordManager';
-export type CacheAddress = number;
-export type BeforeDeallocCallback = () => void;
+export declare type CacheAddress = number;
+export declare type BeforeDeallocCallback = () => void;
 export interface CacheProps {
     createRenderer(): AbstractRenderer;
     isOfCorrectType(renderer: AbstractRenderer): boolean;

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -24,6 +24,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private transformFrom;
     private textContainer;
     private textContainerTransform;
+    private textParentStyle;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -18,6 +18,7 @@ export default class SVGRenderer extends AbstractRenderer {
         this.overwrittenAttrs = {};
         this.textContainer = null;
         this.textContainerTransform = null;
+        this.textParentStyle = null;
         this.clear();
         this.addStyleSheet();
     }
@@ -130,12 +131,26 @@ export default class SVGRenderer extends AbstractRenderer {
     drawText(text, transform, style) {
         var _a;
         const applyTextStyles = (elem, style) => {
-            var _a, _b;
-            elem.style.fontFamily = style.fontFamily;
-            elem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
-            elem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
-            elem.style.fontSize = style.size + 'px';
-            elem.style.fill = style.renderingStyle.fill.toHexString();
+            var _a, _b, _c, _d, _e, _f;
+            if (style.fontFamily !== ((_a = this.textParentStyle) === null || _a === void 0 ? void 0 : _a.fontFamily)) {
+                elem.style.fontFamily = style.fontFamily;
+            }
+            if (style.fontVariant !== ((_b = this.textParentStyle) === null || _b === void 0 ? void 0 : _b.fontVariant)) {
+                elem.style.fontVariant = (_c = style.fontVariant) !== null && _c !== void 0 ? _c : '';
+            }
+            if (style.fontWeight !== ((_d = this.textParentStyle) === null || _d === void 0 ? void 0 : _d.fontWeight)) {
+                elem.style.fontWeight = (_e = style.fontWeight) !== null && _e !== void 0 ? _e : '';
+            }
+            if (style.size !== ((_f = this.textParentStyle) === null || _f === void 0 ? void 0 : _f.size)) {
+                elem.style.fontSize = style.size + 'px';
+            }
+            const fillString = style.renderingStyle.fill.toHexString();
+            // TODO: Uncomment at some future major version release --- currently causes incompatibility due
+            //       to an SVG parsing bug in older versions.
+            //const parentFillString = this.textParentStyle?.renderingStyle?.fill?.toHexString();
+            //if (fillString !== parentFillString) {
+            elem.style.fill = fillString;
+            //}
             if (style.renderingStyle.stroke) {
                 const strokeStyle = style.renderingStyle.stroke;
                 elem.style.stroke = strokeStyle.color.toHexString();
@@ -156,6 +171,7 @@ export default class SVGRenderer extends AbstractRenderer {
             if (this.objectLevel > 0) {
                 this.textContainer = container;
                 this.textContainerTransform = transform;
+                this.textParentStyle = style;
             }
         }
         else {
@@ -188,6 +204,7 @@ export default class SVGRenderer extends AbstractRenderer {
         this.lastPathString = [];
         this.lastPathStyle = null;
         this.textContainer = null;
+        this.textParentStyle = null;
         this.objectElems = [];
     }
     endObject(loaderData) {

package/dist/src/toolbar/HTMLToolbar.d.ts

@@ -16,7 +16,12 @@ export default class HTMLToolbar {
     addWidget(widget: BaseWidget): void;
     serializeState(): string;
     deserializeState(state: string): void;
-    addActionButton(title: string | ActionButtonIcon, command: () => void, parent?: Element): HTMLButtonElement;
+    /**
+     * Adds an action button with `title` to this toolbar (or to the given `parent` element).
+     *
+     * @return The added button.
+     */
+    addActionButton(title: string | ActionButtonIcon, command: () => void): BaseWidget;
     addUndoRedoButtons(): void;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;

package/dist/src/toolbar/HTMLToolbar.js

@@ -12,6 +12,7 @@ import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
+import { ActionButtonWidget } from './lib';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
@@ -122,49 +123,45 @@ export default class HTMLToolbar {
             this.widgets[widgetId].deserializeFrom(data[widgetId]);
         }
     }
-    addActionButton(title, command, parent) {
-        const button = document.createElement('button');
-        button.classList.add(`${toolbarCSSPrefix}button`);
-        if (typeof title === 'string') {
-            button.innerText = title;
-        }
-        else {
-            const iconElem = title.icon.cloneNode(true);
-            const labelElem = document.createElement('label');
-            // Use the label to describe the icon -- no additional description should be necessary.
-            iconElem.setAttribute('alt', '');
-            labelElem.innerText = title.label;
-            iconElem.classList.add('toolbar-icon');
-            button.replaceChildren(iconElem, labelElem);
-        }
-        button.onclick = command;
-        (parent !== null && parent !== void 0 ? parent : this.container).appendChild(button);
-        return button;
+    /**
+     * Adds an action button with `title` to this toolbar (or to the given `parent` element).
+     *
+     * @return The added button.
+     */
+    addActionButton(title, command) {
+        const titleString = typeof title === 'string' ? title : title.label;
+        const widgetId = 'action-button';
+        const makeIcon = () => {
+            if (typeof title === 'string') {
+                return null;
+            }
+            return title.icon;
+        };
+        const widget = new ActionButtonWidget(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization);
+        this.addWidget(widget);
+        return widget;
     }
     addUndoRedoButtons() {
-        const undoRedoGroup = document.createElement('div');
-        undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
         const undoButton = this.addActionButton({
             label: this.localizationTable.undo,
             icon: this.editor.icons.makeUndoIcon()
         }, () => {
             this.editor.history.undo();
-        }, undoRedoGroup);
+        });
         const redoButton = this.addActionButton({
             label: this.localizationTable.redo,
             icon: this.editor.icons.makeRedoIcon(),
         }, () => {
             this.editor.history.redo();
-        }, undoRedoGroup);
-        this.container.appendChild(undoRedoGroup);
-        undoButton.disabled = true;
-        redoButton.disabled = true;
+        });
+        undoButton.setDisabled(true);
+        redoButton.setDisabled(true);
         this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, event => {
             if (event.kind !== EditorEventType.UndoRedoStackUpdated) {
                 throw new Error('Wrong event type!');
             }
-            undoButton.disabled = event.undoStackSize === 0;
-            redoButton.disabled = event.redoStackSize === 0;
+            undoButton.setDisabled(event.undoStackSize === 0);
+            redoButton.setDisabled(event.redoStackSize === 0);
         });
     }
     addDefaultToolWidgets() {

package/dist/src/toolbar/IconProvider.d.ts

@@ -2,7 +2,7 @@ import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
 import { TextStyle } from '../components/TextComponent';
 import Pen from '../tools/Pen';
-type IconType = SVGSVGElement | HTMLImageElement;
+declare type IconType = SVGSVGElement | HTMLImageElement;
 export default class IconProvider {
     makeUndoIcon(): IconType;
     makeRedoIcon(mirror?: boolean): IconType;

package/dist/src/toolbar/makeColorInput.d.ts

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
-type OnColorChangeListener = (color: Color4) => void;
-type SetColorCallback = (color: Color4 | string) => void;
+declare type OnColorChangeListener = (color: Color4) => void;
+declare type SetColorCallback = (color: Color4 | string) => void;
 export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement, SetColorCallback];
 export default makeColorInput;

package/dist/src/toolbar/widgets/ActionButtonWidget.d.ts

@@ -2,12 +2,12 @@ import Editor from '../../Editor';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default class ActionButtonWidget extends BaseWidget {
-    protected makeIcon: () => Element;
+    protected makeIcon: () => Element | null;
     protected title: string;
     protected clickAction: () => void;
-    constructor(editor: Editor, id: string, makeIcon: () => Element, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization);
+    constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization);
     protected handleClick(): void;
     protected getTitle(): string;
-    protected createIcon(): Element;
+    protected createIcon(): Element | null;
     protected fillDropdown(_dropdown: HTMLElement): boolean;
 }

package/dist/src/toolbar/widgets/BaseWidget.d.ts

@@ -1,7 +1,7 @@
 import Editor from '../../Editor';
 import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
-export type SavedToolbuttonState = Record<string, any>;
+export declare type SavedToolbuttonState = Record<string, any>;
 export default abstract class BaseWidget {
     #private;
     protected editor: Editor;
@@ -29,7 +29,7 @@ export default abstract class BaseWidget {
      */
     getUniqueIdIn(container: Record<string, BaseWidget>): string;
     protected abstract getTitle(): string;
-    protected abstract createIcon(): Element;
+    protected abstract createIcon(): Element | null;
     protected fillDropdown(dropdown: HTMLElement): boolean;
     protected setupActionBtnClickListener(button: HTMLElement): void;
     protected onKeyPress(_event: KeyPressEvent): boolean;

package/dist/src/toolbar/widgets/BaseWidget.js

@@ -156,11 +156,16 @@ export default class BaseWidget {
         parent.appendChild(this.container);
     }
     updateIcon() {
-        var _a;
+        var _a, _b;
         const newIcon = this.createIcon();
-        (_a = this.icon) === null || _a === void 0 ? void 0 : _a.replaceWith(newIcon);
-        this.icon = newIcon;
-        this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+        if (newIcon) {
+            (_a = this.icon) === null || _a === void 0 ? void 0 : _a.replaceWith(newIcon);
+            this.icon = newIcon;
+            this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+        }
+        else {
+            (_b = this.icon) === null || _b === void 0 ? void 0 : _b.remove();
+        }
     }
     setDisabled(disabled) {
         this.disabled = disabled;