js-draw 0.15.1 → 0.16.0

package/src/toolbar/IconProvider.ts

@@ -1,6 +1,5 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import EventDispatcher from '../EventDispatcher';
 import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import TextStyle from '../rendering/TextRenderingStyle';
@@ -542,7 +541,7 @@ export default class IconProvider {
 			time: nowTime,
 		};
 	
-		const viewport = new Viewport(new EventDispatcher());
+		const viewport = new Viewport(() => {});
 		const builder = factory(startPoint, viewport);
 		builder.addPoint(endPoint);
 	
@@ -687,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/HandToolWidget.ts

@@ -94,7 +94,7 @@ class ZoomWidget extends BaseWidget {
 	}
 
 	protected fillDropdown(dropdown: HTMLElement): boolean {
-		dropdown.appendChild(makeZoomControl(this.localizationTable, this.editor));
+		dropdown.replaceChildren(makeZoomControl(this.localizationTable, this.editor));
 		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%;
+}

package/src/toolbar/widgets/OverflowWidget.ts

@@ -0,0 +1,83 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+
+
+export default class OverflowWidget extends BaseWidget {
+	private overflowChildren: BaseWidget[] = [];
+	private overflowContainer: HTMLElement;
+	
+	public constructor(editor: Editor, localizationTable?: ToolbarLocalization) {
+		super(editor, 'overflow-widget', localizationTable);
+
+		// Make the dropdown openable
+		this.container.classList.add('dropdownShowable');
+		this.overflowContainer ??= document.createElement('div');
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.toggleOverflow;
+	}
+
+	protected createIcon(): Element | null {
+		return this.editor.icons.makeOverflowIcon();
+	}
+
+	protected handleClick(): void {
+		this.setDropdownVisible(!this.isDropdownVisible());
+	}
+
+	protected fillDropdown(dropdown: HTMLElement) {
+		this.overflowContainer ??= document.createElement('div');
+		if (this.overflowContainer.parentElement) {
+			this.overflowContainer.remove();
+		}
+
+		this.overflowContainer.classList.add('toolbar-overflow-widget-overflow-list');
+		dropdown.appendChild(this.overflowContainer);
+
+		return true;
+	}
+
+	/**
+	 * Removes all `BaseWidget`s from this and returns them.
+	 */
+	public clearChildren(): BaseWidget[] {
+		this.overflowContainer.replaceChildren();
+
+		const overflowChildren = this.overflowChildren;
+		this.overflowChildren = [];
+		return overflowChildren;
+	}
+
+	public getChildWidgets(): BaseWidget[] {
+		return [ ...this.overflowChildren ];
+	}
+
+	public hasAsChild(widget: BaseWidget) {
+		for (const otherWidget of this.overflowChildren) {
+			if (widget === otherWidget) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Adds `widget` to this.
+	 * `widget`'s previous parent is still responsible
+	 * for serializing/deserializing its state.
+	 */
+	public addToOverflow(widget: BaseWidget) {
+		this.overflowChildren.push(widget);
+		widget.addTo(this.overflowContainer);
+		widget.setIsToplevel(false);
+	}
+
+	// This always returns false.
+	// Don't try to move the overflow menu to itself.
+	public canBeInOverflowMenu(): boolean {
+		return false;
+	}
+}

package/src/toolbar/widgets/lib.ts

@@ -9,4 +9,5 @@ export { default as HandToolWidget } from './HandToolWidget';
 export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
 
-export { default as InsertImageWidget } from './InsertImageWidget';
+export { default as InsertImageWidget } from './InsertImageWidget';
+export { default as DocumentPropertiesWidget } from './DocumentPropertiesWidget';

package/src/tools/Eraser.test.ts

@@ -1,5 +1,6 @@
+import UnknownSVGObject from '../components/UnknownSVGObject';
 import Editor from '../Editor';
-import { Rect2, StrokeComponent } from '../lib';
+import { EditorImage, Rect2, StrokeComponent } from '../lib';
 import { Vec2 } from '../math/Vec2';
 import createEditor from '../testing/createEditor';
 import { InputEvtType } from '../types';
@@ -76,4 +77,26 @@ describe('Eraser', () => {
 
 		expect(getAllStrokes(editor)).toHaveLength(0);
 	});
+
+	it('should not erase unselectable objects', () => {
+		const editor = createEditor();
+		const unerasableObj = new UnknownSVGObject(document.createElementNS('http://www.w3.org/2000/svg', 'arc'));
+
+		// Add to the image
+		expect(editor.image.getAllElements()).toHaveLength(0);
+		editor.dispatch(EditorImage.addElement(unerasableObj));
+		expect(editor.image.getAllElements()).toHaveLength(1);
+
+
+		const eraser = selectEraser(editor);
+		eraser.setThickness(100);
+
+		// Try to erase it.
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		jest.advanceTimersByTime(100);
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(3, 0));
+
+		// Should not have been erased
+		expect(editor.image.getAllElements()).toHaveLength(1);
+	});
 });

package/src/tools/Eraser.ts

@@ -67,11 +67,15 @@ export default class Eraser extends BaseTool {
 			return component.intersects(line) || component.intersectsRect(eraserRect);
 		});
 
+		// Only erase components that could be selected (and thus interacted with)
+		// by the user.
+		const toErase = intersectingElems.filter(elem => elem.isSelectable());
+
 		// Remove any intersecting elements.
-		this.toRemove.push(...intersectingElems);
+		this.toRemove.push(...toErase);
 
 		// Create new Erase commands for the now-to-be-erased elements and apply them.
-		const newPartialCommands = intersectingElems.map(elem => new Erase([ elem ]));
+		const newPartialCommands = toErase.map(elem => new Erase([ elem ]));
 		newPartialCommands.forEach(cmd => cmd.apply(this.editor));
 
 		this.partialCommands.push(...newPartialCommands);