js-draw 0.16.0 → 0.17.0

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/HTMLToolbar.ts

@@ -43,6 +43,9 @@ export default class HTMLToolbar {
 	private resizeObserver: ResizeObserver;
 	private listeners: DispatcherEventListener[] = [];
 
+	// Flex-order of the next widget to be added.
+	private widgetOrderCounter: number = 0;
+
 	private widgetsById: Record<string, BaseWidget> = {};
 	private widgetList: Array<BaseWidget> = [];
 
@@ -240,6 +243,7 @@ export default class HTMLToolbar {
 		}
 	}
 
+
 	/**
 	 * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
 	 * (i.e. its `addTo` method should not have been called).
@@ -265,7 +269,7 @@ export default class HTMLToolbar {
 
 		// Ensure that the widget gets displayed in the correct
 		// place in the toolbar, even if it's removed and re-added.
-		container.style.order = `${this.widgetList.length}`;
+		container.style.order = `${this.widgetOrderCounter++}`;
 
 		this.queueReLayout();
 	}
@@ -307,6 +311,7 @@ export default class HTMLToolbar {
 			spacer.style.maxWidth = options.maxSize;
 		}
 
+		spacer.style.order = `${this.widgetOrderCounter++}`;
 		this.container.appendChild(spacer);
 	}
 

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/tools/SelectionTool/SelectionTool.ts

@@ -353,7 +353,7 @@ export default class SelectionTool extends BaseTool {
 				return true;
 			}
 
-			if (evt.key === 'a') {
+			if (evt.key === 'a' || evt.key === 'r') {
 				// Selected all in onKeyDown. Don't finalizeTransform.
 				return true;
 			}

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 {