js-draw 0.16.1 → 0.17.0

package/dist/src/Editor.js

@@ -503,11 +503,12 @@ export class Editor {
      * ```
      */
     dispatchNoAnnounce(command, addToHistory = false) {
+        const result = command.apply(this);
         if (addToHistory) {
             const apply = false; // Don't double-apply
             this.history.push(command, apply);
         }
-        return command.apply(this);
+        return result;
     }
     /**
      * Apply a large transformation in chunks.

package/dist/src/EditorImage.js

@@ -172,9 +172,13 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             super('add-element');
             this.element = element;
             this.applyByFlattening = applyByFlattening;
-            // Store the element's serialization --- .serializeToJSON may be called on this
-            // even when this is not at the top of the undo/redo stack.
-            this.serializedElem = element.serialize();
+            this.serializedElem = null;
+            // FIXME: The serialized version of this command may be inaccurate if this is
+            //        serialized when this command is not on the top of the undo stack.
+            //
+            // Caching the element's serialized data leads to additional memory usage *and*
+            // sometimes incorrect behavior in collaborative editing.
+            this.serializedElem = null;
             if (isNaN(element.getBBox().area)) {
                 throw new Error('Elements in the image cannot have NaN bounding boxes');
             }
@@ -197,8 +201,9 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             return localization.addElementAction(this.element.description(localization));
         }
         serializeToJSON() {
+            var _a;
             return {
-                elemData: this.serializedElem,
+                elemData: (_a = this.serializedElem) !== null && _a !== void 0 ? _a : this.element.serialize(),
             };
         }
     },
@@ -207,7 +212,9 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             const id = json.elemData.id;
             const foundElem = editor.image.lookupElement(id);
             const elem = foundElem !== null && foundElem !== void 0 ? foundElem : AbstractComponent.deserialize(json.elemData);
-            return new EditorImage.AddElementCommand(elem);
+            const result = new EditorImage.AddElementCommand(elem);
+            result.serializedElem = json.elemData;
+            return result;
         });
     })(),
     _a);

package/dist/src/UndoRedoHistory.d.ts

@@ -3,12 +3,11 @@ import Command from './commands/Command';
 type AnnounceRedoCallback = (command: Command) => void;
 type AnnounceUndoCallback = (command: Command) => void;
 declare class UndoRedoHistory {
+    #private;
     private readonly editor;
     private announceRedoCallback;
     private announceUndoCallback;
-    private undoStack;
-    private redoStack;
-    private maxUndoRedoStackSize;
+    private readonly maxUndoRedoStackSize;
     constructor(editor: Editor, announceRedoCallback: AnnounceRedoCallback, announceUndoCallback: AnnounceUndoCallback);
     private fireUpdateEvent;
     push(command: Command, apply?: boolean): void;

package/dist/src/UndoRedoHistory.js

@@ -1,19 +1,35 @@
-import { EditorEventType } from './types';
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+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 _UndoRedoHistory_undoStack, _UndoRedoHistory_redoStack;
+import { EditorEventType, UndoEventType } from './types';
 class UndoRedoHistory {
     // @internal
     constructor(editor, announceRedoCallback, announceUndoCallback) {
         this.editor = editor;
         this.announceRedoCallback = announceRedoCallback;
         this.announceUndoCallback = announceUndoCallback;
+        _UndoRedoHistory_undoStack.set(this, void 0);
+        _UndoRedoHistory_redoStack.set(this, void 0);
         this.maxUndoRedoStackSize = 700;
-        this.undoStack = [];
-        this.redoStack = [];
+        __classPrivateFieldSet(this, _UndoRedoHistory_undoStack, [], "f");
+        __classPrivateFieldSet(this, _UndoRedoHistory_redoStack, [], "f");
     }
-    fireUpdateEvent() {
+    fireUpdateEvent(stackUpdateType, triggeringCommand) {
         this.editor.notifier.dispatch(EditorEventType.UndoRedoStackUpdated, {
             kind: EditorEventType.UndoRedoStackUpdated,
-            undoStackSize: this.undoStack.length,
-            redoStackSize: this.redoStack.length,
+            undoStackSize: __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length,
+            redoStackSize: __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length,
+            command: triggeringCommand,
+            stackUpdateType,
         });
     }
     // Adds the given command to this and applies it to the editor.
@@ -21,17 +37,17 @@ class UndoRedoHistory {
         if (apply) {
             command.apply(this.editor);
         }
-        this.undoStack.push(command);
-        for (const elem of this.redoStack) {
+        __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").push(command);
+        for (const elem of __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f")) {
             elem.onDrop(this.editor);
         }
-        this.redoStack = [];
-        if (this.undoStack.length > this.maxUndoRedoStackSize) {
+        __classPrivateFieldSet(this, _UndoRedoHistory_redoStack, [], "f");
+        if (__classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length > this.maxUndoRedoStackSize) {
             const removeAtOnceCount = 10;
-            const removedElements = this.undoStack.splice(0, removeAtOnceCount);
+            const removedElements = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").splice(0, removeAtOnceCount);
             removedElements.forEach(elem => elem.onDrop(this.editor));
         }
-        this.fireUpdateEvent();
+        this.fireUpdateEvent(UndoEventType.CommandDone, command);
         this.editor.notifier.dispatch(EditorEventType.CommandDone, {
             kind: EditorEventType.CommandDone,
             command,
@@ -39,12 +55,12 @@ class UndoRedoHistory {
     }
     // Remove the last command from this' undo stack and apply it.
     undo() {
-        const command = this.undoStack.pop();
+        const command = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").pop();
         if (command) {
-            this.redoStack.push(command);
+            __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").push(command);
             command.unapply(this.editor);
             this.announceUndoCallback(command);
-            this.fireUpdateEvent();
+            this.fireUpdateEvent(UndoEventType.CommandUndone, command);
             this.editor.notifier.dispatch(EditorEventType.CommandUndone, {
                 kind: EditorEventType.CommandUndone,
                 command,
@@ -52,12 +68,12 @@ class UndoRedoHistory {
         }
     }
     redo() {
-        const command = this.redoStack.pop();
+        const command = __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").pop();
         if (command) {
-            this.undoStack.push(command);
+            __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").push(command);
             command.apply(this.editor);
             this.announceRedoCallback(command);
-            this.fireUpdateEvent();
+            this.fireUpdateEvent(UndoEventType.CommandRedone, command);
             this.editor.notifier.dispatch(EditorEventType.CommandDone, {
                 kind: EditorEventType.CommandDone,
                 command,
@@ -65,10 +81,11 @@ class UndoRedoHistory {
         }
     }
     get undoStackSize() {
-        return this.undoStack.length;
+        return __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length;
     }
     get redoStackSize() {
-        return this.redoStack.length;
+        return __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length;
     }
 }
+_UndoRedoHistory_undoStack = new WeakMap(), _UndoRedoHistory_redoStack = new WeakMap();
 export default UndoRedoHistory;

package/dist/src/components/RestylableComponent.js

@@ -56,8 +56,8 @@ class DefaultRestyleComponentCommand extends UnresolvedSerializableCommand {
     unapply(editor) {
         this.getComponent(editor).forceStyle(this.originalStyle, editor);
     }
-    description(_editor, localizationTable) {
-        return localizationTable.restyledElements;
+    description(editor, localizationTable) {
+        return localizationTable.restyledElement(this.getComponent(editor).description(localizationTable));
     }
     serializeToJSON() {
         return {

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

@@ -6,6 +6,6 @@ export interface ImageComponentLocalization {
     svgObject: string;
     emptyBackground: string;
     filledBackgroundWithColor: (color: string) => string;
-    restyledElements: string;
+    restyledElement: (elementDescription: string) => string;
 }
 export declare const defaultComponentLocalization: ImageComponentLocalization;

package/dist/src/components/localization.js

@@ -2,9 +2,9 @@ export const defaultComponentLocalization = {
     unlabeledImageNode: 'Unlabeled image node',
     stroke: 'Stroke',
     svgObject: 'SVG Object',
-    restyledElements: 'Restyled elements',
     emptyBackground: 'Empty background',
     filledBackgroundWithColor: (color) => `Filled background (${color})`,
     text: (text) => `Text object: ${text}`,
     imageNode: (description) => `Image: ${description}`,
+    restyledElement: (elementDescription) => `Restyled ${elementDescription}`,
 };

package/dist/src/lib.d.ts

@@ -28,5 +28,6 @@ export * from './toolbar/lib';
 export * from './rendering/lib';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
+export { default as UndoRedoHistory } from './UndoRedoHistory';
 export { Editor, EditorSettings };
 export default Editor;

package/dist/src/lib.js

@@ -28,5 +28,6 @@ export * from './toolbar/lib';
 export * from './rendering/lib';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
+export { default as UndoRedoHistory } from './UndoRedoHistory';
 export { Editor };
 export default Editor;

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

@@ -4,6 +4,7 @@ export default class OverflowWidget extends BaseWidget {
         var _a;
         super(editor, 'overflow-widget', localizationTable);
         this.overflowChildren = [];
+        this.container.classList.add('toolbar-overflow-widget');
         // Make the dropdown openable
         this.container.classList.add('dropdownShowable');
         (_a = this.overflowContainer) !== null && _a !== void 0 ? _a : (this.overflowContainer = document.createElement('div'));
@@ -32,6 +33,7 @@ export default class OverflowWidget extends BaseWidget {
      */
     clearChildren() {
         this.overflowContainer.replaceChildren();
+        this.container.classList.remove('horizontal');
         const overflowChildren = this.overflowChildren;
         this.overflowChildren = [];
         return overflowChildren;
@@ -56,6 +58,10 @@ export default class OverflowWidget extends BaseWidget {
         this.overflowChildren.push(widget);
         widget.addTo(this.overflowContainer);
         widget.setIsToplevel(false);
+        // Switch to a horizontal layout if enough children
+        if (this.overflowChildren.length > 2) {
+            this.container.classList.add('horizontal');
+        }
     }
     // This always returns false.
     // Don't try to move the overflow menu to itself.

package/dist/src/types.d.ts

@@ -85,6 +85,11 @@ export declare enum EditorEventType {
     ColorPickerColorSelected = 10,
     ToolbarDropdownShown = 11
 }
+export declare enum UndoEventType {
+    CommandDone = 0,
+    CommandUndone = 1,
+    CommandRedone = 2
+}
 type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
     readonly kind: EditorToolEventType;
@@ -107,6 +112,8 @@ export interface EditorUndoStackUpdated {
     readonly kind: EditorEventType.UndoRedoStackUpdated;
     readonly undoStackSize: number;
     readonly redoStackSize: number;
+    readonly command?: Command;
+    readonly stackUpdateType: UndoEventType;
 }
 export interface CommandDoneEvent {
     readonly kind: EditorEventType.CommandDone;

package/dist/src/types.js

@@ -26,3 +26,10 @@ export var EditorEventType;
     EditorEventType[EditorEventType["ColorPickerColorSelected"] = 10] = "ColorPickerColorSelected";
     EditorEventType[EditorEventType["ToolbarDropdownShown"] = 11] = "ToolbarDropdownShown";
 })(EditorEventType || (EditorEventType = {}));
+// Types of `EditorUndoStackUpdated` events.
+export var UndoEventType;
+(function (UndoEventType) {
+    UndoEventType[UndoEventType["CommandDone"] = 0] = "CommandDone";
+    UndoEventType[UndoEventType["CommandUndone"] = 1] = "CommandUndone";
+    UndoEventType[UndoEventType["CommandRedone"] = 2] = "CommandRedone";
+})(UndoEventType || (UndoEventType = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.16.1",
+	"version": "0.17.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Editor.ts

@@ -663,12 +663,14 @@ export class Editor {
 	 * ```
 	 */
 	public dispatchNoAnnounce(command: Command, addToHistory: boolean = false) {
+		const result = command.apply(this);
+
 		if (addToHistory) {
 			const apply = false; // Don't double-apply
 			this.history.push(command, apply);
 		}
 
-		return command.apply(this);
+		return result;
 	}
 
 	/**

package/src/EditorImage.ts

@@ -211,7 +211,7 @@ export default class EditorImage {
 
 	// A Command that can access private [EditorImage] functionality
 	private static AddElementCommand = class extends SerializableCommand {
-		private serializedElem: any;
+		private serializedElem: any|null = null;
 
 		// If [applyByFlattening], then the rendered content of this element
 		// is present on the display's wet ink canvas. As such, no re-render is necessary
@@ -222,9 +222,12 @@ export default class EditorImage {
 		) {
 			super('add-element');
 
-			// Store the element's serialization --- .serializeToJSON may be called on this
-			// even when this is not at the top of the undo/redo stack.
-			this.serializedElem = element.serialize();
+			// FIXME: The serialized version of this command may be inaccurate if this is
+			//        serialized when this command is not on the top of the undo stack.
+			//
+			// Caching the element's serialized data leads to additional memory usage *and*
+			// sometimes incorrect behavior in collaborative editing.
+			this.serializedElem = null;
 
 			if (isNaN(element.getBBox().area)) {
 				throw new Error('Elements in the image cannot have NaN bounding boxes');
@@ -253,7 +256,7 @@ export default class EditorImage {
 
 		protected serializeToJSON() {
 			return {
-				elemData: this.serializedElem,
+				elemData: this.serializedElem ?? this.element.serialize(),
 			};
 		}
 
@@ -262,7 +265,9 @@ export default class EditorImage {
 				const id = json.elemData.id;
 				const foundElem = editor.image.lookupElement(id);
 				const elem = foundElem ?? AbstractComponent.deserialize(json.elemData);
-				return new EditorImage.AddElementCommand(elem);
+				const result = new EditorImage.AddElementCommand(elem);
+				result.serializedElem = json.elemData;
+				return result;
 			});
 		}
 	};

package/src/UndoRedoHistory.ts

@@ -1,15 +1,15 @@
 import Editor from './Editor';
 import Command from './commands/Command';
-import { EditorEventType } from './types';
+import { EditorEventType, UndoEventType } from './types';
 
 type AnnounceRedoCallback = (command: Command)=>void;
 type AnnounceUndoCallback = (command: Command)=>void;
 
 class UndoRedoHistory {
-	private undoStack: Command[];
-	private redoStack: Command[];
+	#undoStack: Command[];
+	#redoStack: Command[];
 
-	private maxUndoRedoStackSize: number = 700;
+	private readonly maxUndoRedoStackSize: number = 700;
 
 	// @internal
 	public constructor(
@@ -17,15 +17,20 @@ class UndoRedoHistory {
 		private announceRedoCallback: AnnounceRedoCallback,
 		private announceUndoCallback: AnnounceUndoCallback,
 	) {
-		this.undoStack = [];
-		this.redoStack = [];
+		this.#undoStack = [];
+		this.#redoStack = [];
 	}
 
-	private fireUpdateEvent() {
+	private fireUpdateEvent(
+		stackUpdateType: UndoEventType, triggeringCommand: Command
+	) {
 		this.editor.notifier.dispatch(EditorEventType.UndoRedoStackUpdated, {
 			kind: EditorEventType.UndoRedoStackUpdated,
-			undoStackSize: this.undoStack.length,
-			redoStackSize: this.redoStack.length,
+			undoStackSize: this.#undoStack.length,
+			redoStackSize: this.#redoStack.length,
+
+			command: triggeringCommand,
+			stackUpdateType,
 		});
 	}
 
@@ -34,20 +39,20 @@ class UndoRedoHistory {
 		if (apply) {
 			command.apply(this.editor);
 		}
-		this.undoStack.push(command);
+		this.#undoStack.push(command);
 
-		for (const elem of this.redoStack) {
+		for (const elem of this.#redoStack) {
 			elem.onDrop(this.editor);
 		}
-		this.redoStack = [];
+		this.#redoStack = [];
 
-		if (this.undoStack.length > this.maxUndoRedoStackSize) {
+		if (this.#undoStack.length > this.maxUndoRedoStackSize) {
 			const removeAtOnceCount = 10;
-			const removedElements = this.undoStack.splice(0, removeAtOnceCount);
+			const removedElements = this.#undoStack.splice(0, removeAtOnceCount);
 			removedElements.forEach(elem => elem.onDrop(this.editor));
 		}
 
-		this.fireUpdateEvent();
+		this.fireUpdateEvent(UndoEventType.CommandDone, command);
 		this.editor.notifier.dispatch(EditorEventType.CommandDone, {
 			kind: EditorEventType.CommandDone,
 			command,
@@ -56,13 +61,13 @@ class UndoRedoHistory {
 
 	// Remove the last command from this' undo stack and apply it.
 	public undo() {
-		const command = this.undoStack.pop();
+		const command = this.#undoStack.pop();
 		if (command) {
-			this.redoStack.push(command);
+			this.#redoStack.push(command);
 			command.unapply(this.editor);
 			this.announceUndoCallback(command);
 
-			this.fireUpdateEvent();
+			this.fireUpdateEvent(UndoEventType.CommandUndone, command);
 			this.editor.notifier.dispatch(EditorEventType.CommandUndone, {
 				kind: EditorEventType.CommandUndone,
 				command,
@@ -71,13 +76,13 @@ class UndoRedoHistory {
 	}
 
 	public redo() {
-		const command = this.redoStack.pop();
+		const command = this.#redoStack.pop();
 		if (command) {
-			this.undoStack.push(command);
+			this.#undoStack.push(command);
 			command.apply(this.editor);
 			this.announceRedoCallback(command);
 
-			this.fireUpdateEvent();
+			this.fireUpdateEvent(UndoEventType.CommandRedone, command);
 			this.editor.notifier.dispatch(EditorEventType.CommandDone, {
 				kind: EditorEventType.CommandDone,
 				command,
@@ -86,11 +91,11 @@ class UndoRedoHistory {
 	}
 
 	public get undoStackSize(): number {
-		return this.undoStack.length;
+		return this.#undoStack.length;
 	}
 
 	public get redoStackSize(): number {
-		return this.redoStack.length;
+		return this.#redoStack.length;
 	}
 }
 

package/src/components/RestylableComponent.ts

@@ -111,8 +111,8 @@ class DefaultRestyleComponentCommand extends UnresolvedSerializableCommand {
 		this.getComponent(editor).forceStyle(this.originalStyle, editor);
 	}
 
-	public description(_editor: Editor, localizationTable: EditorLocalization): string {
-		return localizationTable.restyledElements;
+	public description(editor: Editor, localizationTable: EditorLocalization): string {
+		return localizationTable.restyledElement(this.getComponent(editor).description(localizationTable));
 	}
 
 	protected serializeToJSON() {

package/src/components/localization.ts

@@ -7,16 +7,16 @@ export interface ImageComponentLocalization {
 	emptyBackground: string;
 	filledBackgroundWithColor: (color: string)=> string;
 
-	restyledElements: string;
+	restyledElement: (elementDescription: string) => string;
 }
 
 export const defaultComponentLocalization: ImageComponentLocalization = {
 	unlabeledImageNode: 'Unlabeled image node',
 	stroke: 'Stroke',
 	svgObject: 'SVG Object',
-	restyledElements: 'Restyled elements',
 	emptyBackground: 'Empty background',
 	filledBackgroundWithColor: (color) => `Filled background (${color})`,
 	text: (text) => `Text object: ${text}`,
 	imageNode: (description: string) => `Image: ${description}`,
+	restyledElement: (elementDescription: string) => `Restyled ${elementDescription}`,
 };

package/src/lib.ts

@@ -30,6 +30,7 @@ export * from './toolbar/lib';
 export * from './rendering/lib';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
+export { default as UndoRedoHistory } from './UndoRedoHistory';
 
 export { Editor, EditorSettings };
 export default Editor;

package/src/toolbar/toolbar.css

@@ -18,6 +18,8 @@
 	flex-direction: row;
 	justify-content: center;
 
+	--toolbar-button-height: min(20vh, 60px);
+
 	/* Display above selection dialogs, etc. */
 	z-index: 2;
 
@@ -30,7 +32,7 @@
 .toolbar-root > .toolbar-button {
 	width: min-content;
 	white-space: pre;
-	height: min(20vh, 60px);
+	height: var(--toolbar-button-height);
 }
 
 .toolbar-dropdown .toolbar-button > .toolbar-icon {
@@ -76,6 +78,10 @@
 	font-size: 1em;
 }
 
+.toolbar-button > label {
+	cursor: inherit;
+}
+
 .toolbar-dropdown > .toolbar-toolContainer > button,
 .toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {
 	width: 6em;

package/src/toolbar/widgets/OverflowWidget.css

@@ -3,7 +3,25 @@
 	display: flex;
 	flex-direction: column;
 	flex-wrap: wrap;
+	justify-content: center;
+}
 
-	overflow-x: auto;
-	max-height: 100%;
+.toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {
+	height: var(--toolbar-button-height);
+}
+
+.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {
+	flex-direction: row;
+}
+
+.toolbar-overflow-widget.horizontal > .toolbar-dropdown {
+	max-width: 100%;
+	left: 15px;
+	right: 15px;
+
+	/* Override the default transform and margin-left */
+	margin-left: 0 !important;
+	transform: none !important;
+
+	padding: 4px;
 }

package/src/toolbar/widgets/OverflowWidget.ts

@@ -10,6 +10,9 @@ export default class OverflowWidget extends BaseWidget {
 	public constructor(editor: Editor, localizationTable?: ToolbarLocalization) {
 		super(editor, 'overflow-widget', localizationTable);
 
+
+		this.container.classList.add('toolbar-overflow-widget');
+
 		// Make the dropdown openable
 		this.container.classList.add('dropdownShowable');
 		this.overflowContainer ??= document.createElement('div');
@@ -44,6 +47,7 @@ export default class OverflowWidget extends BaseWidget {
 	 */
 	public clearChildren(): BaseWidget[] {
 		this.overflowContainer.replaceChildren();
+		this.container.classList.remove('horizontal');
 
 		const overflowChildren = this.overflowChildren;
 		this.overflowChildren = [];
@@ -73,6 +77,11 @@ export default class OverflowWidget extends BaseWidget {
 		this.overflowChildren.push(widget);
 		widget.addTo(this.overflowContainer);
 		widget.setIsToplevel(false);
+
+		// Switch to a horizontal layout if enough children
+		if (this.overflowChildren.length > 2) {
+			this.container.classList.add('horizontal');
+		}
 	}
 
 	// This always returns false.

package/src/types.ts

@@ -111,7 +111,6 @@ export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt
 
 export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 
-
 export enum EditorEventType {
 	ToolEnabled,
 	ToolDisabled,
@@ -130,6 +129,13 @@ export enum EditorEventType {
 	ToolbarDropdownShown,
 }
 
+// Types of `EditorUndoStackUpdated` events.
+export enum UndoEventType {
+	CommandDone,
+	CommandUndone,
+	CommandRedone,
+}
+
 type EditorToolEventType = EditorEventType.ToolEnabled
 	| EditorEventType.ToolDisabled
 	| EditorEventType.ToolUpdated;
@@ -159,8 +165,12 @@ export interface DisplayResizedEvent {
 
 export interface EditorUndoStackUpdated {
 	readonly kind: EditorEventType.UndoRedoStackUpdated;
+
 	readonly undoStackSize: number;
 	readonly redoStackSize: number;
+
+	readonly command?: Command;
+	readonly stackUpdateType: UndoEventType;
 }
 
 export interface CommandDoneEvent {