js-draw 0.25.1 → 1.0.1

package/src/toolbar/widgets/DocumentPropertiesWidget.ts

@@ -1,15 +1,14 @@
-import Color4 from '../../Color4';
 import Erase from '../../commands/Erase';
 import SerializableCommand from '../../commands/SerializableCommand';
 import uniteCommands from '../../commands/uniteCommands';
 import BackgroundComponent, { BackgroundType } from '../../components/BackgroundComponent';
 import Editor from '../../Editor';
 import { EditorImageEventType } from '../../EditorImage';
-import Rect2 from '../../math/shapes/Rect2';
+import { Rect2, Color4 } from '@js-draw/math';
 import { EditorEventType } from '../../types';
-import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { toolbarCSSPrefix } from '../constants';
 import { ToolbarLocalization } from '../localization';
-import makeColorInput from '../makeColorInput';
+import makeColorInput from './components/makeColorInput';
 import BaseWidget from './BaseWidget';
 
 export default class DocumentPropertiesWidget extends BaseWidget {
@@ -126,14 +125,21 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 
 	protected override fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
-		container.classList.add(`${toolbarCSSPrefix}spacedList`);
+		container.classList.add(
+			`${toolbarCSSPrefix}spacedList`,
+			`${toolbarCSSPrefix}nonbutton-controls-main-list`,
+			`${toolbarCSSPrefix}document-properties-widget`
+		);
 
+		// Background color input
 		const backgroundColorRow = document.createElement('div');
 		const backgroundColorLabel = document.createElement('label');
 
 		backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
 
-		const [ colorInput, backgroundColorInputContainer, setBgColorInputValue ] = makeColorInput(this.editor, color => {
+		const {
+			input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue
+		} = makeColorInput(this.editor, color => {
 			if (!color.eq(this.getBackgroundColor())) {
 				this.setBackgroundColor(color);
 			}
@@ -144,6 +150,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 
 		backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
 
+		// Background style selector
 		const useGridRow = document.createElement('div');
 		const useGridLabel = document.createElement('label');
 		const useGridCheckbox = document.createElement('input');
@@ -173,10 +180,10 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 
 		useGridRow.replaceChildren(useGridLabel, useGridCheckbox);
 
+		// Adds a width/height input
 		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;
@@ -185,7 +192,6 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 			input.id = `${toolbarCSSPrefix}docPropertiesDimensionRow-${DocumentPropertiesWidget.idCounter++}`;
 			label.htmlFor = input.id;
 
-			spacer.style.flexGrow = '1';
 			input.style.flexGrow = '2';
 			input.style.width = '25px';
 
@@ -195,7 +201,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 				onChange(parseFloat(input.value));
 			};
 
-			row.replaceChildren(label, spacer, input);
+			row.replaceChildren(label, input);
 
 			return {
 				setValue: (value: number) => {
@@ -212,6 +218,16 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 			this.updateImportExportRectSize({ height: value });
 		});
 
+		// The "About..." button
+		const aboutButton = document.createElement('button');
+		aboutButton.classList.add('about-button');
+		aboutButton.innerText = this.localizationTable.about;
+
+		aboutButton.onclick = () => {
+			this.editor.showAboutDialog();
+		};
+
+
 		this.updateDropdownContent = () => {
 			setBgColorInputValue(this.getBackgroundColor());
 
@@ -225,7 +241,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 
 
 		container.replaceChildren(
-			backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element
+			backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element, aboutButton
 		);
 		dropdown.replaceChildren(container);
 

package/src/toolbar/widgets/EraserToolWidget.ts

@@ -1,13 +1,15 @@
 import Editor from '../../Editor';
 import Eraser from '../../tools/Eraser';
 import { EditorEventType } from '../../types';
-import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { toolbarCSSPrefix } from '../constants';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
+import makeThicknessSlider from './components/makeThicknessSlider';
 
 export default class EraserToolWidget extends BaseToolWidget {
-	private thicknessInput: HTMLInputElement|null = null;
+	private updateInputs: ()=>void = () => {};
+
 	public constructor(
 		editor: Editor,
 		private tool: Eraser,
@@ -31,31 +33,28 @@ export default class EraserToolWidget extends BaseToolWidget {
 		return this.editor.icons.makeEraserIcon(this.tool.getThickness());
 	}
 
-	private updateInputs() {
-		if (this.thicknessInput) {
-			this.thicknessInput.value = `${this.tool.getThickness()}`;
-		}
-	}
+	protected override fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
 
-	private static nextThicknessInputId = 0;
+		container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
 
-	protected override fillDropdown(dropdown: HTMLElement): boolean {
-		const thicknessLabel = document.createElement('label');
-		this.thicknessInput = document.createElement('input');
-
-		this.thicknessInput.type = 'range';
-		this.thicknessInput.min = '4';
-		this.thicknessInput.max = '40';
-		this.thicknessInput.oninput = () => {
-			this.tool.setThickness(parseFloat(this.thicknessInput!.value));
-		};
-		this.thicknessInput.id = `${toolbarCSSPrefix}eraserThicknessInput${EraserToolWidget.nextThicknessInputId++}`;
+		const thicknessSlider = makeThicknessSlider(this.editor, thickness => {
+			this.tool.setThickness(thickness);
+		});
+		thicknessSlider.setBounds(10, 55);
 
-		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
-		thicknessLabel.htmlFor = this.thicknessInput.id;
+		this.updateInputs = () => {
+			thicknessSlider.setValue(this.tool.getThickness());
+		};
 
 		this.updateInputs();
-		dropdown.replaceChildren(thicknessLabel, this.thicknessInput);
+
+		const spacer = document.createElement('div');
+		spacer.style.height = '5px';
+
+		container.replaceChildren(thicknessSlider.container, spacer);
+
+		dropdown.replaceChildren(container);
 		return true;
 	}
 

package/src/toolbar/widgets/HandToolWidget.scss

@@ -0,0 +1,14 @@
+
+.toolbar-zoomLevelEditor {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.toolbar-zoomLevelEditor .zoomDisplay {
+	flex-grow: 1;
+}
+
+.toolbar-zoomLevelEditor button {
+	min-width: 48px;
+}

package/src/toolbar/widgets/HandToolWidget.ts

@@ -1,13 +1,14 @@
 import Editor from '../../Editor';
-import Mat33 from '../../math/Mat33';
+import { Mat33 } from '@js-draw/math';
 import PanZoom, { PanZoomMode } from '../../tools/PanZoom';
 import ToolController from '../../tools/ToolController';
 import { EditorEventType } from '../../types';
 import Viewport from '../../Viewport';
-import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { toolbarCSSPrefix } from '../constants';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import BaseWidget, { SavedToolbuttonState } from './BaseWidget';
+import makeSeparator from './components/makeSeparator';
 
 const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor) => {
 	const zoomLevelRow = document.createElement('div');
@@ -65,40 +66,15 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 	};
 
 	resetViewButton.onclick = () => {
+		const addToHistory = false;
 		editor.dispatch(Viewport.transformBy(
 			editor.viewport.canvasToScreenTransform.inverse()
-		), true);
+		), addToHistory);
 	};
 
 	return zoomLevelRow;
 };
 
-class ZoomWidget extends BaseWidget {
-	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');
-	}
-
-	protected getTitle(): string {
-		return this.localizationTable.zoom;
-	}
-
-	protected createIcon(): Element {
-		return this.editor.icons.makeZoomIcon();
-	}
-
-	protected handleClick(): void {
-		this.setDropdownVisible(!this.isDropdownVisible());
-	}
-
-	protected override fillDropdown(dropdown: HTMLElement): boolean {
-		dropdown.replaceChildren(makeZoomControl(this.localizationTable, this.editor));
-		return true;
-	}
-}
-
 class HandModeWidget extends BaseWidget {
 	public constructor(
 		editor: Editor,
@@ -193,9 +169,6 @@ export default class HandToolWidget extends BaseToolWidget {
 
 		this.addSubWidget(touchPanningWidget);
 		this.addSubWidget(rotationLockWidget);
-		this.addSubWidget(
-			new ZoomWidget(editor, localizationTable)
-		);
 	}
 
 	private static getPrimaryHandTool(toolController: ToolController): PanZoom|null {
@@ -220,6 +193,22 @@ export default class HandToolWidget extends BaseToolWidget {
 		}
 	}
 
+	protected override fillDropdown(dropdown: HTMLElement): boolean {
+		super.fillDropdown(dropdown);
+
+		// The container for all actions that come after the toolbar buttons.
+		const nonbuttonActionContainer = document.createElement('div');
+		nonbuttonActionContainer.classList.add(`${toolbarCSSPrefix}nonbutton-controls-main-list`);
+
+		makeSeparator().addTo(nonbuttonActionContainer);
+		nonbuttonActionContainer.appendChild(
+			makeZoomControl(this.localizationTable, this.editor)
+		);
+		dropdown.appendChild(nonbuttonActionContainer);
+
+		return true;
+	}
+
 	public override setSelected(selected: boolean): void {
 		if (this.allowTogglingBaseTool) {
 			super.setSelected(selected);

package/src/toolbar/widgets/InsertImageWidget.scss

@@ -0,0 +1,41 @@
+
+$image-widget-selector: '.insert-image-widget-dropdown-content';
+// Repeat the selector for additional specificity.
+:root #{$image-widget-selector}#{$image-widget-selector}#{$image-widget-selector} {
+	& > div > div {
+		padding: 5px;
+	}
+
+	& > div {
+		min-height: 0;
+	}
+
+	img {
+		max-width: min(50vw, 75%);
+		max-height: 50vh;
+	
+		/* Center */
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.action-button-row {
+		margin-top: 4px;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+
+		// Ensure that (on toolbars that support it), the action button
+		// is touching the bottom edge of the screen.
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+
+	.action-button-row > button {
+		flex-grow: 1;
+		text-align: end;
+		max-width: 50%;
+		min-width: min(100%, 40px);
+	}
+}

package/src/toolbar/widgets/InsertImageWidget.ts

@@ -4,15 +4,18 @@ import Erase from '../../commands/Erase';
 import EditorImage from '../../EditorImage';
 import uniteCommands from '../../commands/uniteCommands';
 import SelectionTool from '../../tools/SelectionTool/SelectionTool';
-import Mat33 from '../../math/Mat33';
+import { Mat33 } from '@js-draw/math';
 import fileToBase64 from '../../util/fileToBase64';
 import { ToolbarLocalization } from '../localization';
-import ActionButtonWidget from './ActionButtonWidget';
+import BaseWidget from './BaseWidget';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../constants';
+import makeFileInput from './components/makeFileInput';
+import { MutableReactiveValue } from '../../util/ReactiveValue';
 
-export default class InsertImageWidget extends ActionButtonWidget {
-	private imageSelectionOverlay: HTMLElement;
+export default class InsertImageWidget extends BaseWidget {
 	private imagePreview: HTMLImageElement;
-	private imageFileInput: HTMLInputElement;
+	private selectedFiles: MutableReactiveValue<File[]>|null;
 	private imageAltTextInput: HTMLInputElement;
 	private statusView: HTMLElement;
 	private imageBase64URL: string|null;
@@ -21,27 +24,57 @@ export default class InsertImageWidget extends ActionButtonWidget {
 	public constructor(editor: Editor, localization?: ToolbarLocalization) {
 		localization ??= editor.localization;
 
-		super(editor,
-			'insert-image-widget',
-			() => editor.icons.makeInsertImageIcon(),
-			localization.image,
-			() => this.onClicked()
-		);
+		super(editor, 'insert-image-widget', localization);
 
-		this.imageSelectionOverlay = document.createElement('div');
-		this.imageSelectionOverlay.classList.add('toolbar-image-selection-overlay');
-		this.fillOverlay();
+		// Make the dropdown showable
+		this.container.classList.add('dropdownShowable');
 
-		this.editor.createHTMLOverlay(this.imageSelectionOverlay);
-		this.imageSelectionOverlay.style.display = 'none';
+		editor.notifier.on(EditorEventType.SelectionUpdated, event => {
+			if (event.kind === EditorEventType.SelectionUpdated && this.isDropdownVisible()) {
+				this.updateInputs();
+			}
+		});
+	}
+
+	protected override getTitle(): string {
+		return this.localizationTable.image;
+	}
+
+	protected override createIcon(): Element | null {
+		return this.editor.icons.makeInsertImageIcon();
+	}
+
+	protected override setDropdownVisible(visible: boolean): void {
+		super.setDropdownVisible(visible);
+
+		// Update the dropdown just before showing.
+		if (this.isDropdownVisible()) {
+			this.updateInputs();
+		}
+	}
+
+	protected override handleClick() {
+		this.setDropdownVisible(!this.isDropdownVisible());
 	}
 
 	private static nextInputId = 0;
 
-	private fillOverlay() {
+	protected override fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
+		container.classList.add(
+			'insert-image-widget-dropdown-content',
+			`${toolbarCSSPrefix}spacedList`,
+			`${toolbarCSSPrefix}nonbutton-controls-main-list`,
+		);
 
-		const chooseImageRow = document.createElement('div');
+		const {
+			container: chooseImageRow,
+			selectedFiles,
+		} = makeFileInput(
+			this.localizationTable.chooseFile,
+			this.editor,
+			'image/*',
+		);
 		const altTextRow = document.createElement('div');
 		this.imagePreview = document.createElement('img');
 		this.statusView = document.createElement('div');
@@ -50,44 +83,34 @@ export default class InsertImageWidget extends ActionButtonWidget {
 		actionButtonRow.classList.add('action-button-row');
 
 		this.submitButton = document.createElement('button');
-		const cancelButton = document.createElement('button');
-
-		this.imageFileInput = document.createElement('input');
+		this.selectedFiles = selectedFiles;
 		this.imageAltTextInput = document.createElement('input');
-		const imageFileInputLabel = document.createElement('label');
+
+		// Label the alt text input
 		const imageAltTextLabel = document.createElement('label');
 
-		const fileInputId = `insert-image-file-input-${InsertImageWidget.nextInputId ++}`;
 		const altTextInputId = `insert-image-alt-text-input-${InsertImageWidget.nextInputId++}`;
-
-		this.imageFileInput.setAttribute('id', fileInputId);
 		this.imageAltTextInput.setAttribute('id', altTextInputId);
 		imageAltTextLabel.htmlFor = altTextInputId;
-		imageFileInputLabel.htmlFor = fileInputId;
-
-		this.imageFileInput.accept = 'image/*';
 
 		imageAltTextLabel.innerText = this.localizationTable.inputAltText;
-		imageFileInputLabel.innerText = this.localizationTable.chooseFile;
-
-		this.imageFileInput.type = 'file';
 		this.imageAltTextInput.type = 'text';
 
 		this.statusView.setAttribute('aria-live', 'polite');
 
-		cancelButton.innerText = this.localizationTable.cancel;
 		this.submitButton.innerText = this.localizationTable.submit;
 
-		this.imageFileInput.onchange = async () => {
-			if (this.imageFileInput.value === '' || !this.imageFileInput.files || !this.imageFileInput.files[0]) {
+		this.selectedFiles.onUpdateAndNow(async files => {
+			if (files.length === 0) {
 				this.imagePreview.style.display = 'none';
 				this.submitButton.disabled = true;
+				this.submitButton.style.display = 'none';
 				return;
 			}
 
 			this.imagePreview.style.display = 'block';
 
-			const image = this.imageFileInput.files[0];
+			const image = files[0];
 
 			let data: string|null = null;
 
@@ -102,37 +125,28 @@ export default class InsertImageWidget extends ActionButtonWidget {
 			if (data) {
 				this.imagePreview.src = data;
 				this.submitButton.disabled = false;
+				this.submitButton.style.display = '';
 				this.updateImageSizeDisplay();
 			} else {
 				this.submitButton.disabled = true;
+				this.submitButton.style.display = 'none';
 				this.statusView.innerText = '';
 			}
-		};
-
-		cancelButton.onclick = () => {
-			this.hideDialog();
-		};
-
-		this.imageSelectionOverlay.onclick = (evt: MouseEvent) => {
-			// If clicking on the backdrop
-			if (evt.target === this.imageSelectionOverlay) {
-				this.hideDialog();
-			}
-		};
+		});
 
-		chooseImageRow.replaceChildren(imageFileInputLabel, this.imageFileInput);
 		altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
-		actionButtonRow.replaceChildren(cancelButton, this.submitButton);
+		actionButtonRow.replaceChildren(this.submitButton);
 
 		container.replaceChildren(
 			chooseImageRow, altTextRow, this.imagePreview, this.statusView, actionButtonRow
 		);
 
-		this.imageSelectionOverlay.replaceChildren(container);
+		dropdown.replaceChildren(container);
+		return true;
 	}
 
 	private hideDialog() {
-		this.imageSelectionOverlay.style.display = 'none';
+		this.setDropdownVisible(false);
 	}
 
 	private updateImageSizeDisplay() {
@@ -154,22 +168,24 @@ export default class InsertImageWidget extends ActionButtonWidget {
 		);
 	}
 
-	private clearInputs() {
-		this.imageFileInput.value = '';
-		this.imageAltTextInput.value = '';
-		this.imagePreview.style.display = 'none';
-		this.submitButton.disabled = true;
-		this.statusView.innerText = '';
-	}
+	private updateInputs() {
+		const resetInputs = () => {
+			this.selectedFiles?.set([]);
+			this.imageAltTextInput.value = '';
+			this.imagePreview.style.display = 'none';
+			this.submitButton.disabled = true;
+			this.statusView.innerText = '';
 
-	private onClicked() {
-		this.imageSelectionOverlay.style.display = '';
-		this.clearInputs();
-		this.imageFileInput.focus();
+			this.submitButton.style.display = '';
+
+			this.imageAltTextInput.oninput = null;
+		};
+		resetInputs();
 
 		const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
 		const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
 
+		// Check: Is there a selected image that can be edited?
 		let editingImage: ImageComponent|null = null;
 		if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent) {
 			editingImage = selectedObjects[0];
@@ -182,10 +198,19 @@ export default class InsertImageWidget extends ActionButtonWidget {
 			this.imagePreview.src = this.imageBase64URL;
 
 			this.updateImageSizeDisplay();
-		} else {
+		} else if (selectedObjects.length > 0) {
+			// If not, clear the selection.
 			selectionTools.forEach(tool => tool.clearSelection());
 		}
 
+		// Show the submit button only when there is data to submit.
+		this.submitButton.style.display = 'none';
+		this.imageAltTextInput.oninput = () => {
+			if (this.imagePreview.src?.length > 0) {
+				this.submitButton.style.display = '';
+			}
+		};
+
 		this.submitButton.onclick = async () => {
 			if (!this.imageBase64URL) {
 				return;
@@ -202,7 +227,7 @@ export default class InsertImageWidget extends ActionButtonWidget {
 				return;
 			}
 
-			this.imageSelectionOverlay.style.display = 'none';
+			this.hideDialog();
 
 			if (editingImage) {
 				const eraseCommand = new Erase([ editingImage ]);
@@ -220,4 +245,4 @@ export default class InsertImageWidget extends ActionButtonWidget {
 			}
 		};
 	}
-}
+}

package/src/toolbar/widgets/PenToolWidget.css

@@ -1,53 +1,2 @@
 
-.toolbar-pen-type-selector > div {
-	display: flex;
-	flex-direction: row;
 
-	max-width: 350px;
-	flex-wrap: wrap;
-
-	--button-size: 56px;
-}
-
-.toolbar-pen-type-selector .pen-type-button {
-	display: flex;
-	flex-direction: column-reverse;
-	box-sizing: border-box;
-
-	flex-shrink: 1;
-	margin: 2px;
-}
-
-.toolbar-pen-type-selector .pen-type-button:focus-within {
-	outline: 2px solid var(--primary-foreground-color);
-}
-
-.toolbar-pen-type-selector .pen-type-button input {
-	opacity: 0;
-	height: 0;
-}
-
-.toolbar-pen-type-selector .pen-type-button label {
-	display: flex;
-	flex-direction: column;
-
-	width: var(--button-size);
-	height: var(--button-size);
-
-	font-size: 0.7rem;
-	align-items: center;
-	justify-content: center;
-	padding: 4px;
-}
-
-
-.toolbar-pen-type-selector .pen-type-button .icon {
-	flex-grow: 1;
-	flex-shrink: 1;
-	width: 100%;
-}
-
-.toolbar-pen-type-selector .pen-type-button.checked {
-	background-color: var(--secondary-background-color);
-	color: var(--secondary-foreground-color);
-}