js-draw 0.15.2 → 0.16.0

package/src/toolbar/HTMLToolbar.ts

@@ -18,6 +18,9 @@ import HandToolWidget from './widgets/HandToolWidget';
 import BaseWidget from './widgets/BaseWidget';
 import ActionButtonWidget from './widgets/ActionButtonWidget';
 import InsertImageWidget from './widgets/InsertImageWidget';
+import DocumentPropertiesWidget from './widgets/DocumentPropertiesWidget';
+import OverflowWidget from './widgets/OverflowWidget';
+import { DispatcherEventListener } from '../EventDispatcher';
 
 export const toolbarCSSPrefix = 'toolbar-';
 
@@ -37,8 +40,14 @@ interface SpacerOptions {
 
 export default class HTMLToolbar {
 	private container: HTMLElement;
+	private resizeObserver: ResizeObserver;
+	private listeners: DispatcherEventListener[] = [];
 
-	private widgets: Record<string, BaseWidget> = {};
+	private widgetsById: Record<string, BaseWidget> = {};
+	private widgetList: Array<BaseWidget> = [];
+
+	// Widget to toggle overflow menu.
+	private overflowWidget: OverflowWidget|null = null;
 
 	private static colorisStarted: boolean = false;
 	private updateColoris: UpdateColorisCallback|null = null;
@@ -58,6 +67,15 @@ export default class HTMLToolbar {
 			HTMLToolbar.colorisStarted = true;
 		}
 		this.setupColorPickers();
+
+		if ('ResizeObserver' in window) {
+			this.resizeObserver = new ResizeObserver((_entries) => {
+				this.reLayout();
+			});
+			this.resizeObserver.observe(this.container);
+		} else {
+			console.warn('ResizeObserver not supported. Toolbar will not resize.');
+		}
 	}
 
 	// @internal
@@ -116,7 +134,7 @@ export default class HTMLToolbar {
 			}
 		};
 
-		this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
+		this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
 			if (event.kind !== EditorEventType.ColorPickerToggled) {
 				return;
 			}
@@ -124,14 +142,102 @@ export default class HTMLToolbar {
 			// Show/hide the overlay. Making the overlay visible gives users a surface to click
 			// on that shows/hides the color picker.
 			closePickerOverlay.style.display = event.open ? 'block' : 'none';
-		});
+		}));
 
 		// Add newly-selected colors to the swatch.
-		this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
+		this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
 			if (event.kind === EditorEventType.ColorPickerColorSelected) {
 				addColorToSwatch(event.color.toHexString());
 			}
-		});
+		}));
+	}
+
+	private reLayoutQueued: boolean = false;
+	private queueReLayout() {
+		if (!this.reLayoutQueued) {
+			this.reLayoutQueued = true;
+			requestAnimationFrame(() => this.reLayout());
+		}
+	}
+
+	private reLayout() {
+		this.reLayoutQueued = false;
+
+		if (!this.overflowWidget) {
+			return;
+		}
+
+		const getTotalWidth = (widgetList: Array<BaseWidget>) => {
+			let totalWidth = 0;
+			for (const widget of widgetList) {
+				if (!widget.isHidden()) {
+					totalWidth += widget.getButtonWidth();
+				}
+			}
+
+			return totalWidth;
+		};
+
+		let overflowWidgetsWidth = getTotalWidth(this.overflowWidget.getChildWidgets());
+		let shownWidgetWidth = getTotalWidth(this.widgetList) - overflowWidgetsWidth;
+		let availableWidth = this.container.clientWidth * 0.87;
+
+		// If on a device that has enough vertical space, allow
+		// showing two rows of buttons.
+		// TODO: Fix magic numbers
+		if (window.innerHeight > availableWidth * 1.75) {
+			availableWidth *= 1.75;
+		}
+
+		let updatedChildren = false;
+
+		if (shownWidgetWidth + overflowWidgetsWidth <= availableWidth) {
+			// Move widgets to the main menu.
+			const overflowChildren = this.overflowWidget.clearChildren();
+
+			for (const child of overflowChildren) {
+				child.addTo(this.container);
+				child.setIsToplevel(true);
+
+				if (!child.isHidden()) {
+					shownWidgetWidth += child.getButtonWidth();
+				}
+			}
+
+			this.overflowWidget.setHidden(true);
+			overflowWidgetsWidth = 0;
+
+			updatedChildren = true;
+		}
+
+		if (shownWidgetWidth >= availableWidth) {
+			// Move widgets to the overflow menu.
+			this.overflowWidget.setHidden(false);
+
+			// Start with the rightmost widget, move to the leftmost
+			for (
+				let i = this.widgetList.length - 1;
+				i >= 0 && shownWidgetWidth >= availableWidth;
+				i--
+			) {
+				const child = this.widgetList[i];
+
+				if (this.overflowWidget.hasAsChild(child)) {
+					continue;
+				}
+
+				if (child.canBeInOverflowMenu()) {
+					shownWidgetWidth -= child.getButtonWidth();
+					this.overflowWidget.addToOverflow(child);
+				}
+			}
+
+			updatedChildren = true;
+		}
+
+		if (updatedChildren) {
+			this.setupColorPickers();
+		}
 	}
 
 	/**
@@ -147,14 +253,21 @@ export default class HTMLToolbar {
 	 */
 	public addWidget(widget: BaseWidget) {
 		// Prevent name collisions
-		const id = widget.getUniqueIdIn(this.widgets);
+		const id = widget.getUniqueIdIn(this.widgetsById);
 
 		// Add the widget
-		this.widgets[id] = widget;
+		this.widgetsById[id] = widget;
+		this.widgetList.push(widget);
 
 		// Add HTML elements.
-		widget.addTo(this.container);
+		const container = widget.addTo(this.container);
 		this.setupColorPickers();
+
+		// 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}`;
+
+		this.queueReLayout();
 	}
 
 	/**
@@ -200,8 +313,8 @@ export default class HTMLToolbar {
 	public serializeState(): string {
 		const result: Record<string, any> = {};
 
-		for (const widgetId in this.widgets) {
-			result[widgetId] = this.widgets[widgetId].serializeState();
+		for (const widgetId in this.widgetsById) {
+			result[widgetId] = this.widgetsById[widgetId].serializeState();
 		}
 
 		return JSON.stringify(result);
@@ -215,11 +328,11 @@ export default class HTMLToolbar {
 		const data = JSON.parse(state);
 
 		for (const widgetId in data) {
-			if (!(widgetId in this.widgets)) {
+			if (!(widgetId in this.widgetsById)) {
 				console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
 			}
 
-			this.widgets[widgetId].deserializeFrom(data[widgetId]);
+			this.widgetsById[widgetId].deserializeFrom(data[widgetId]);
 		}
 	}
 
@@ -228,7 +341,11 @@ export default class HTMLToolbar {
 	 * 
 	 * @return The added button.
 	 */
-	public addActionButton(title: string|ActionButtonIcon, command: ()=> void): BaseWidget {
+	public addActionButton(
+		title: string|ActionButtonIcon,
+		command: ()=> void,
+		mustBeToplevel: boolean = true
+	): BaseWidget {
 		const titleString = typeof title === 'string' ? title : title.label;
 		const widgetId = 'action-button';
 
@@ -246,7 +363,8 @@ export default class HTMLToolbar {
 			makeIcon,
 			titleString,
 			command,
-			this.editor.localization
+			this.editor.localization,
+			mustBeToplevel,
 		);
 
 		this.addWidget(widget);
@@ -300,27 +418,57 @@ export default class HTMLToolbar {
 			this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
 		}
 
-		this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
-
 		const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
 		if (panZoomTool) {
 			this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
 		}
+
+		this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
 	}
 
 	public addDefaultActionButtons() {
+		this.addWidget(new DocumentPropertiesWidget(this.editor, this.localizationTable));
 		this.addUndoRedoButtons();
 	}
 
+	/**
+	 * Adds a widget that toggles the overflow menu. Call `addOverflowWidget` to ensure
+	 * that this widget is in the correct space (if shown).
+	 * 
+	 * @example
+	 * ```ts
+	 * toolbar.addDefaultToolWidgets();
+	 * toolbar.addOverflowWidget();
+	 * toolbar.addDefaultActionButtons();
+	 * ```
+	 * shows the overflow widget between the default tool widgets and the default action buttons,
+	 * if shown.
+	 */
+	public addOverflowWidget() {
+		this.overflowWidget = new OverflowWidget(this.editor, this.localizationTable);
+		this.addWidget(this.overflowWidget);
+	}
+
 	/**
 	 * Adds both the default tool widgets and action buttons. Equivalent to
 	 * ```ts
 	 * toolbar.addDefaultToolWidgets();
+	 * toolbar.addOverflowWidget();
 	 * toolbar.addDefaultActionButtons();
 	 * ```
 	 */
 	public addDefaults() {
 		this.addDefaultToolWidgets();
+		this.addOverflowWidget();
 		this.addDefaultActionButtons();
 	}
+
+	public remove() {
+		this.container.remove();
+		this.resizeObserver.disconnect();
+
+		for (const listener of this.listeners) {
+			listener.remove();
+		}
+	}
 }

package/src/toolbar/IconProvider.ts

@@ -686,5 +686,51 @@ export default class IconProvider {
 		svg.setAttribute('viewBox', '0 0 100 100');
 		return svg;
 	}
+
+	public makeConfigureDocumentIcon(): IconType {
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		svg.innerHTML = `
+			<path
+				d='
+					M 5,5 V 95 H 95 V 5 Z m 5,5 H 90 V 90 H 10 Z
+					m 5,10 V 30 H 50 V 25 H 20 v -5 z
+					m 40,0 V 50 H 85 V 20 Z
+					m 2,2 H 83 V 39 L 77,28 70,42 64,35 57,45 Z
+					m 8.5,5 C 64.67,27 64,27.67 64,28.5 64,29.33 64.67,30 65.5,30 66.33,30 67,29.33 67,28.5 67,27.67 66.33,27 65.5,27 Z
+					M 15,40 v 5 h 35 v -5 z
+					m 0,15 v 5 h 70 v -5 z
+					m 0,15 v 5 h 70 v -5 z
+				'
+				style='fill: var(--icon-color);'
+			/>
+		`;
+		svg.setAttribute('viewBox', '0 0 100 100');
+		return svg;
+	}
+
+	public makeOverflowIcon(): IconType {
+		return this.makeIconFromPath(`
+			M 15 40
+			A 12.5 12.5 0 0 0 2.5 52.5
+			A 12.5 12.5 0 0 0 15 65
+			A 12.5 12.5 0 0 0 27.5 52.5
+			A 12.5 12.5 0 0 0 15 40
+			z
+	
+			M 50 40
+			A 12.5 12.5 0 0 0 37.5 52.5
+			A 12.5 12.5 0 0 0 50 65
+			A 12.5 12.5 0 0 0 62.5 52.5
+			A 12.5 12.5 0 0 0 50 40
+			z
+			
+			M 85 40
+			A 12.5 12.5 0 0 0 72.5 52.5
+			A 12.5 12.5 0 0 0 85 65
+			A 12.5 12.5 0 0 0 97.5 52.5
+			A 12.5 12.5 0 0 0 85 40
+			z
+		`);
+	}
 	
 }

package/src/toolbar/localization.ts

@@ -35,6 +35,11 @@ export interface ToolbarLocalization {
 	resetView: string;
 	selectionToolKeyboardShortcuts: string;
 	paste: string;
+	documentProperties: string;
+	backgroundColor: string;
+	imageWidthOption: string;
+	imageHeightOption: string;
+	toggleOverflow: string,
 
 	errorImageHasZeroSize: string;
 
@@ -72,6 +77,11 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	pickColorFromScreen: 'Pick color from screen',
 	clickToPickColorAnnouncement: 'Click on the screen to pick a color',
 	selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
+	documentProperties: 'Document',
+	backgroundColor: 'Background Color: ',
+	imageWidthOption: 'Width: ',
+	imageHeightOption: 'Height: ',
+	toggleOverflow: 'More',
 
 	touchPanning: 'Touchscreen panning',
 

package/src/toolbar/toolbar.css

@@ -1,4 +1,6 @@
 @import url(./widgets/InsertImageWidget.css);
+@import url(./widgets/OverflowWidget.css);
+
 
 .toolbar-root {
 	background-color: var(--primary-background-color);

package/src/toolbar/widgets/ActionButtonWidget.ts

@@ -12,6 +12,7 @@ export default class ActionButtonWidget extends BaseWidget {
         protected clickAction: ()=>void,
 
         localizationTable?: ToolbarLocalization,
+		protected mustBeToplevel: boolean = false,
 	) {
 		super(editor, id, localizationTable);
 	}
@@ -31,4 +32,8 @@ export default class ActionButtonWidget extends BaseWidget {
 	protected fillDropdown(_dropdown: HTMLElement): boolean {
 		return false;
 	}
+
+	public canBeInOverflowMenu(): boolean {
+		return !this.mustBeToplevel;
+	}
 }

package/src/toolbar/widgets/BaseToolWidget.ts

@@ -48,7 +48,9 @@ export default abstract class BaseToolWidget extends BaseWidget {
 	}
 
 	public addTo(parent: HTMLElement) {
-		super.addTo(parent);
+		const result = super.addTo(parent);
 		this.setSelected(this.targetTool.isEnabled());
+
+		return result;
 	}
 }

package/src/toolbar/widgets/BaseWidget.ts

@@ -1,4 +1,5 @@
 import Editor from '../../Editor';
+import { DispatcherEventListener } from '../../EventDispatcher';
 import ToolbarShortcutHandler from '../../tools/ToolbarShortcutHandler';
 import { EditorEventType, InputEvtType, KeyPressEvent } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
@@ -168,7 +169,10 @@ export default abstract class BaseWidget {
 		this.subWidgets[id] = widget;
 	}
 
+	private toolbarWidgetToggleListener: DispatcherEventListener|null = null;
+
 	// Adds this to [parent]. This can only be called once for each ToolbarWidget.
+	// Returns the element that was just added to `parent`.
 	// @internal
 	public addTo(parent: HTMLElement) {
 		this.label.innerText = this.getTitle();
@@ -178,6 +182,8 @@ export default abstract class BaseWidget {
 		this.icon = null;
 		this.updateIcon();
 
+		this.container.replaceChildren();
+
 		this.button.replaceChildren(this.icon!, this.label);
 		this.container.appendChild(this.button);
 
@@ -187,7 +193,11 @@ export default abstract class BaseWidget {
 			this.button.appendChild(this.dropdownIcon);
 			this.container.appendChild(this.dropdownContainer);
 
-			this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
+			if (this.toolbarWidgetToggleListener) {
+				this.toolbarWidgetToggleListener.remove();
+			}
+
+			this.toolbarWidgetToggleListener = this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
 				if (
 					evt.kind === EditorEventType.ToolbarDropdownShown
 					&& evt.parentWidget !== this
@@ -202,7 +212,13 @@ export default abstract class BaseWidget {
 		}
 
 		this.setDropdownVisible(false);
+
+		if (this.container.parentElement) {
+			this.container.remove();
+		}
+
 		parent.appendChild(this.container);
+		return this.container;
 	}
 
 
@@ -272,6 +288,22 @@ export default abstract class BaseWidget {
 		this.repositionDropdown();
 	}
 
+	public canBeInOverflowMenu(): boolean {
+		return true;
+	}
+
+	public getButtonWidth(): number {
+		return this.button.clientWidth;
+	}
+
+	public isHidden(): boolean {
+		return this.container.style.display === 'none';
+	}
+
+	public setHidden(hidden: boolean) {
+		this.container.style.display = hidden ? 'none' : '';
+	}
+
 	protected repositionDropdown() {
 		const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
 		const screenWidth = document.body.clientWidth;
@@ -286,7 +318,7 @@ export default abstract class BaseWidget {
 	}
 
 	/** Set whether the widget is contained within another. @internal */
-	protected setIsToplevel(toplevel: boolean) {
+	public setIsToplevel(toplevel: boolean) {
 		this.toplevel = toplevel;
 	}
 

package/src/toolbar/widgets/DocumentPropertiesWidget.ts

@@ -0,0 +1,185 @@
+import Color4 from '../../Color4';
+import ImageBackground from '../../components/ImageBackground';
+import Editor from '../../Editor';
+import { EditorImageEventType } from '../../EditorImage';
+import Rect2 from '../../math/Rect2';
+import { EditorEventType } from '../../types';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from '../makeColorInput';
+import BaseWidget from './BaseWidget';
+
+export default class DocumentPropertiesWidget extends BaseWidget {
+	private updateDropdownContent: ()=>void = () => {};
+
+	public constructor(editor: Editor, localizationTable?: ToolbarLocalization) {
+		super(editor, 'zoom-widget', localizationTable);
+
+		// Make it possible to open the dropdown, even if this widget isn't selected.
+		this.container.classList.add('dropdownShowable');
+
+		this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, () => {
+			this.queueDropdownUpdate();
+		});
+
+
+		this.editor.image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
+			this.queueDropdownUpdate();
+		});
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.documentProperties;
+	}
+
+	protected createIcon(): Element {
+		return this.editor.icons.makeConfigureDocumentIcon();
+	}
+
+	protected handleClick() {
+		this.setDropdownVisible(!this.isDropdownVisible());
+		this.queueDropdownUpdate();
+	}
+
+	private dropdownUpdateQueued: boolean = false;
+	private queueDropdownUpdate() {
+		if (!this.dropdownUpdateQueued) {
+			requestAnimationFrame(() => this.updateDropdown());
+			this.dropdownUpdateQueued = true;
+		}
+	}
+
+	private updateDropdown() {
+		this.dropdownUpdateQueued = false;
+
+		if (this.isDropdownVisible()) {
+			this.updateDropdownContent();
+		}
+	}
+
+	private getBackgroundElem() {
+		const backgroundComponents = [];
+
+		for (const component of this.editor.image.getBackgroundComponents()) {
+			if (component instanceof ImageBackground) {
+				backgroundComponents.push(component);
+			}
+		}
+
+		if (backgroundComponents.length === 0) {
+			return null;
+		}
+
+		// Return the last background component in the list — the component with highest z-index.
+		return backgroundComponents[backgroundComponents.length - 1];
+	}
+
+	private setBackgroundColor(color: Color4) {
+		this.editor.dispatch(this.editor.setBackgroundColor(color));
+	}
+
+	private getBackgroundColor() {
+		const background = this.getBackgroundElem();
+
+		return background?.getStyle()?.color ?? Color4.transparent;
+	}
+
+	private updateImportExportRectSize(size: { width?: number, height?: number }) {
+		const filterDimension = (dim: number|undefined) => {
+			if (dim !== undefined && (!isFinite(dim) || dim <= 0)) {
+				dim = 100;
+			}
+
+			return dim;
+		};
+
+		const width = filterDimension(size.width);
+		const height = filterDimension(size.height);
+
+		const currentRect = this.editor.getImportExportRect();
+		const newRect = new Rect2(
+			currentRect.x, currentRect.y,
+			width ?? currentRect.w, height ?? currentRect.h
+		);
+
+		this.editor.dispatch(this.editor.image.setImportExportRect(newRect));
+		this.editor.queueRerender();
+	}
+
+	private static idCounter = 0;
+
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+
+		const backgroundColorRow = document.createElement('div');
+		const backgroundColorLabel = document.createElement('label');
+
+		backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
+
+		const [ colorInput, backgroundColorInputContainer, setBgColorInputValue ] = makeColorInput(this.editor, color => {
+			if (!color.eq(this.getBackgroundColor())) {
+				this.setBackgroundColor(color);
+			}
+		});
+
+		colorInput.id = `document-properties-color-input-${DocumentPropertiesWidget.idCounter++}`;
+		backgroundColorLabel.htmlFor = colorInput.id;
+
+		backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+
+		const addDimensionRow = (labelContent: string, onChange: (value: number)=>void) => {
+			const row = document.createElement('div');
+			const label = document.createElement('label');
+			const spacer = document.createElement('span');
+			const input = document.createElement('input');
+
+			label.innerText = labelContent;
+			input.type = 'number';
+			input.min = '0';
+			input.id = `document-properties-dimension-row-${DocumentPropertiesWidget.idCounter++}`;
+			label.htmlFor = input.id;
+
+			spacer.style.flexGrow = '1';
+			input.style.flexGrow = '2';
+			input.style.width = '25px';
+
+			row.style.display = 'flex';
+
+			input.oninput = () => {
+				onChange(parseFloat(input.value));
+			};
+
+			row.replaceChildren(label, spacer, input);
+
+			return {
+				setValue: (value: number) => {
+					input.value = value.toString();
+				},
+				element: row,
+			};
+		};
+
+		const imageWidthRow = addDimensionRow(this.localizationTable.imageWidthOption, (value: number) => {
+			this.updateImportExportRectSize({ width: value });
+		});
+		const imageHeightRow = addDimensionRow(this.localizationTable.imageHeightOption, (value: number) => {
+			this.updateImportExportRectSize({ height: value });
+		});
+
+		this.updateDropdownContent = () => {
+			setBgColorInputValue(this.getBackgroundColor());
+
+			const importExportRect = this.editor.getImportExportRect();
+			imageWidthRow.setValue(importExportRect.width);
+			imageHeightRow.setValue(importExportRect.height);
+		};
+		this.updateDropdownContent();
+
+
+		container.replaceChildren(
+			backgroundColorRow, imageWidthRow.element, imageHeightRow.element
+		);
+		dropdown.replaceChildren(container);
+
+		return true;
+	}
+}

package/src/toolbar/widgets/OverflowWidget.css

@@ -0,0 +1,9 @@
+
+.toolbar-overflow-widget-overflow-list {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+
+	overflow-x: auto;
+	max-height: 100%;
+}