js-draw 1.0.1 → 1.1.0

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -1,195 +0,0 @@
-import { Color4 } from '@js-draw/math';
-import { isRestylableComponent } from '../../components/RestylableComponent';
-import Editor from '../../Editor';
-import uniteCommands from '../../commands/uniteCommands';
-import SelectionTool from '../../tools/SelectionTool/SelectionTool';
-import { EditorEventType } from '../../types';
-import { KeyPressEvent } from '../../inputEvents';
-import { ToolbarLocalization } from '../localization';
-import makeColorInput from './components/makeColorInput';
-import ActionButtonWidget from './ActionButtonWidget';
-import BaseToolWidget from './BaseToolWidget';
-import { resizeImageToSelectionKeyboardShortcut } from './keybindings';
-import makeSeparator from './components/makeSeparator';
-import { toolbarCSSPrefix } from '../constants';
-
-const makeFormatMenu = (editor: Editor, selectionTool: SelectionTool, localizationTable: ToolbarLocalization) => {
-	const container = document.createElement('div');
-	container.classList.add(
-		'selection-format-menu', `${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}indentedList`
-	);
-
-	const colorRow = document.createElement('div');
-	const colorLabel = document.createElement('label');
-	const {
-		input: colorInput, container: colorInputContainer, setValue: setColorInputValue
-	} = makeColorInput(editor, color => {
-		const selection = selectionTool.getSelection();
-
-		if (selection) {
-			const updateStyleCommands = [];
-
-			for (const elem of selection.getSelectedObjects()) {
-				if (isRestylableComponent(elem)) {
-					updateStyleCommands.push(elem.updateStyle({ color }));
-				}
-			}
-
-			const unitedCommand = uniteCommands(updateStyleCommands);
-			editor.dispatch(unitedCommand);
-		}
-	});
-
-	colorLabel.innerText = localizationTable.colorLabel;
-
-	const update = () => {
-		const selection = selectionTool.getSelection();
-		if (selection && selection.getSelectedItemCount() > 0) {
-			colorInput.disabled = false;
-			container.classList.remove('disabled');
-
-			const colors = [];
-			for (const elem of selection.getSelectedObjects()) {
-				if (isRestylableComponent(elem)) {
-					const color = elem.getStyle().color;
-					if (color) {
-						colors.push(color);
-					}
-				}
-			}
-			setColorInputValue(Color4.average(colors));
-		} else {
-			colorInput.disabled = true;
-			container.classList.add('disabled');
-			setColorInputValue(Color4.transparent);
-		}
-	};
-
-	colorRow.replaceChildren(colorLabel, colorInputContainer);
-	container.replaceChildren(colorRow);
-
-	return {
-		addTo: (parent: HTMLElement) => {
-			parent.appendChild(container);
-		},
-		update,
-	};
-};
-
-export default class SelectionToolWidget extends BaseToolWidget {
-	private updateFormatMenu: ()=>void = () => {};
-
-	public constructor(
-		editor: Editor, private tool: SelectionTool, localization?: ToolbarLocalization
-	) {
-		super(editor, tool, 'selection-tool-widget', localization);
-
-		const resizeButton = new ActionButtonWidget(
-			editor, 'resize-btn',
-			() => editor.icons.makeResizeImageToSelectionIcon(),
-			this.localizationTable.resizeImageToSelection,
-			() => {
-				this.resizeImageToSelection();
-			},
-			localization,
-		);
-		const deleteButton = new ActionButtonWidget(
-			editor, 'delete-btn',
-			() => editor.icons.makeDeleteSelectionIcon(),
-			this.localizationTable.deleteSelection,
-			() => {
-				const selection = this.tool.getSelection();
-				this.editor.dispatch(selection!.deleteSelectedObjects());
-				this.tool.clearSelection();
-			},
-			localization,
-		);
-		const duplicateButton = new ActionButtonWidget(
-			editor, 'duplicate-btn',
-			() => editor.icons.makeDuplicateSelectionIcon(),
-			this.localizationTable.duplicateSelection,
-			async () => {
-				const selection = this.tool.getSelection();
-				this.editor.dispatch(await selection!.duplicateSelectedObjects());
-				this.setDropdownVisible(false);
-			},
-			localization,
-		);
-
-		this.addSubWidget(resizeButton);
-		this.addSubWidget(deleteButton);
-		this.addSubWidget(duplicateButton);
-
-		const updateDisabled = (disabled: boolean) => {
-			resizeButton.setDisabled(disabled);
-			deleteButton.setDisabled(disabled);
-			duplicateButton.setDisabled(disabled);
-		};
-		updateDisabled(true);
-
-		// Enable/disable actions based on whether items are selected
-		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
-			if (toolEvt.kind !== EditorEventType.ToolUpdated) {
-				throw new Error('Invalid event type!');
-			}
-
-			if (toolEvt.tool === this.tool) {
-				const selection = this.tool.getSelection();
-				const hasSelection = selection && selection.getSelectedItemCount() > 0;
-
-				updateDisabled(!hasSelection);
-				this.updateFormatMenu();
-			}
-		});
-	}
-
-	private resizeImageToSelection() {
-		const selection = this.tool.getSelection();
-		if (selection) {
-			this.editor.dispatch(this.editor.setImportExportRect(selection.region));
-		}
-	}
-
-	protected override onKeyPress(event: KeyPressEvent): boolean {
-		const shortcuts = this.editor.shortcuts;
-
-		// Resize image to selection:
-		// Other keys are handled directly by the selection tool.
-		if (shortcuts.matchesShortcut(resizeImageToSelectionKeyboardShortcut, event)) {
-			this.resizeImageToSelection();
-			return true;
-		}
-
-		// If we didn't handle the event, allow the superclass to handle it.
-		if (super.onKeyPress(event)) {
-			return true;
-		}
-		return false;
-	}
-
-	protected getTitle(): string {
-		return this.localizationTable.select;
-	}
-
-	protected createIcon(): Element {
-		return this.editor.icons.makeSelectionIcon();
-	}
-
-	protected override fillDropdown(dropdown: HTMLElement): boolean {
-		super.fillDropdown(dropdown);
-
-		const controlsContainer = document.createElement('div');
-		controlsContainer.classList.add(`${toolbarCSSPrefix}nonbutton-controls-main-list`);
-		dropdown.appendChild(controlsContainer);
-
-		makeSeparator(this.localizationTable.reformatSelection).addTo(controlsContainer);
-
-		const formatMenu = makeFormatMenu(this.editor, this.tool, this.localizationTable);
-		formatMenu.addTo(controlsContainer);
-		this.updateFormatMenu = () => formatMenu.update();
-
-		formatMenu.update();
-
-		return true;
-	}
-}

package/src/toolbar/widgets/TextToolWidget.ts

@@ -1,149 +0,0 @@
-import { Color4 } from '@js-draw/math';
-import Editor from '../../Editor';
-import TextTool from '../../tools/TextTool';
-import { EditorEventType } from '../../types';
-import { toolbarCSSPrefix } from '../constants';
-import { ToolbarLocalization } from '../localization';
-import makeColorInput from './components/makeColorInput';
-import BaseToolWidget from './BaseToolWidget';
-import { SavedToolbuttonState } from './BaseWidget';
-
-export default class TextToolWidget extends BaseToolWidget {
-	private updateDropdownInputs: (()=>void)|null = null;
-	public constructor(editor: Editor, private tool: TextTool, localization?: ToolbarLocalization) {
-		super(editor, tool, 'text-tool-widget', localization);
-
-		editor.notifier.on(EditorEventType.ToolUpdated, evt => {
-			if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
-				this.updateIcon();
-				this.updateDropdownInputs?.();
-			}
-		});
-	}
-
-	protected getTitle(): string {
-		return this.targetTool.description;
-	}
-
-	protected createIcon(): Element {
-		const textStyle = this.tool.getTextStyle();
-		return this.editor.icons.makeTextIcon(textStyle);
-	}
-
-	private static idCounter: number = 0;
-	protected override fillDropdown(dropdown: HTMLElement): boolean {
-		const container = document.createElement('div');
-		container.classList.add(
-			`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`
-		);
-		const fontRow = document.createElement('div');
-		const colorRow = document.createElement('div');
-		const sizeRow = document.createElement('div');
-
-		const fontInput = document.createElement('select');
-		const fontLabel = document.createElement('label');
-
-		const sizeInput = document.createElement('input');
-		const sizeLabel = document.createElement('label');
-
-		const {
-			input: colorInput, container: colorInputContainer, setValue: setColorInputValue
-		} = makeColorInput(this.editor, color => {
-			this.tool.setColor(color);
-		});
-		const colorLabel = document.createElement('label');
-
-		const fontsInInput = new Set();
-		const addFontToInput = (fontName: string) => {
-			const option = document.createElement('option');
-			option.value = fontName;
-			option.textContent = fontName;
-			fontInput.appendChild(option);
-			fontsInInput.add(fontName);
-		};
-
-		sizeInput.setAttribute('type', 'number');
-		sizeInput.min = '1';
-		sizeInput.max = '128';
-
-		fontLabel.innerText = this.localizationTable.fontLabel;
-		colorLabel.innerText = this.localizationTable.colorLabel;
-		sizeLabel.innerText = this.localizationTable.textSize;
-
-		colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
-		colorLabel.setAttribute('for', colorInput.id);
-
-		sizeInput.id = `${toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
-		sizeLabel.setAttribute('for', sizeInput.id);
-
-		addFontToInput('monospace');
-		addFontToInput('serif');
-		addFontToInput('sans-serif');
-		fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
-		fontLabel.setAttribute('for', fontInput.id);
-
-		fontInput.onchange = () => {
-			this.tool.setFontFamily(fontInput.value);
-		};
-
-		sizeInput.onchange = () => {
-			const size = parseInt(sizeInput.value);
-			if (!isNaN(size) && size > 0) {
-				this.tool.setFontSize(size);
-			}
-		};
-
-		colorRow.appendChild(colorLabel);
-		colorRow.appendChild(colorInputContainer);
-
-		fontRow.appendChild(fontLabel);
-		fontRow.appendChild(fontInput);
-
-		sizeRow.appendChild(sizeLabel);
-		sizeRow.appendChild(sizeInput);
-
-		this.updateDropdownInputs = () => {
-			const style = this.tool.getTextStyle();
-			setColorInputValue(style.renderingStyle.fill);
-
-			if (!fontsInInput.has(style.fontFamily)) {
-				addFontToInput(style.fontFamily);
-			}
-			fontInput.value = style.fontFamily;
-			sizeInput.value = `${style.size}`;
-		};
-		this.updateDropdownInputs();
-
-		container.replaceChildren(colorRow, sizeRow, fontRow);
-		dropdown.appendChild(container);
-		return true;
-	}
-
-	public override serializeState(): SavedToolbuttonState {
-		const textStyle = this.tool.getTextStyle();
-
-		return {
-			...super.serializeState(),
-
-			fontFamily: textStyle.fontFamily,
-			textSize: textStyle.size,
-			color: textStyle.renderingStyle.fill.toHexString(),
-		};
-	}
-
-	public override deserializeFrom(state: SavedToolbuttonState) {
-		if (state.fontFamily && typeof(state.fontFamily) === 'string') {
-			this.tool.setFontFamily(state.fontFamily);
-		}
-
-		if (state.color && typeof(state.color) === 'string') {
-			this.tool.setColor(Color4.fromHex(state.color));
-		}
-
-		if (state.textSize && typeof(state.textSize) === 'number') {
-			this.tool.setFontSize(state.textSize);
-		}
-
-		super.deserializeFrom(state);
-	}
-}

package/src/toolbar/widgets/components/makeColorInput.ts

@@ -1,184 +0,0 @@
-import { Color4 } from '@js-draw/math';
-import Editor from '../../../Editor';
-import PipetteTool from '../../../tools/PipetteTool';
-import { EditorEventType } from '../../../types';
-
-type OnColorChangeListener = (color: Color4)=>void;
-
-// Returns [ color input, input container, callback to change the color value ].
-export const makeColorInput = (
-	editor: Editor, onColorChange: OnColorChangeListener
-) => {
-
-	const colorInputContainer = document.createElement('span');
-	const colorInput = document.createElement('input');
-
-	colorInput.type = 'button';
-	colorInput.classList.add('coloris_input');
-	colorInputContainer.classList.add('color-input-container');
-
-	colorInputContainer.appendChild(colorInput);
-	const pipetteController = addPipetteTool(editor, colorInputContainer, (color: Color4) => {
-		colorInput.value = color.toHexString();
-		onInputEnd();
-
-		// Update the color preview, if it exists (may be managed by Coloris).
-		const parentElem = colorInput.parentElement;
-		if (parentElem && parentElem.classList.contains('clr-field')) {
-			parentElem.style.color = colorInput.value;
-		}
-	});
-
-	let currentColor: Color4|undefined;
-	const handleColorInput = () => {
-		currentColor = Color4.fromHex(colorInput.value);
-	};
-
-	// Only change the pen color when we finish sending input (this limits the number of
-	// editor events triggered and accessibility announcements).
-	const onInputEnd = () => {
-		handleColorInput();
-
-		if (currentColor) {
-			editor.announceForAccessibility(
-				editor.localization.colorChangedAnnouncement(currentColor.toHexString())
-			);
-			onColorChange(currentColor);
-			editor.notifier.dispatch(EditorEventType.ColorPickerColorSelected, {
-				kind: EditorEventType.ColorPickerColorSelected,
-				color: currentColor,
-			});
-		}
-	};
-
-	colorInput.oninput = handleColorInput;
-	let isOpen = false;
-	colorInput.addEventListener('open', () => {
-		isOpen = true;
-		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
-			kind: EditorEventType.ColorPickerToggled,
-			open: true,
-		});
-		pipetteController.cancel();
-		colorInputContainer.classList.add('picker-open');
-
-		// Focus the Coloris color picker, if it exists.
-		// Don't focus the text input within the color picker, however,
-		// as this displays a keyboard on mobile devices.
-		const colorPickerElem: HTMLElement|null = document.querySelector('#clr-picker #clr-hue-slider');
-		colorPickerElem?.focus();
-	});
-
-	const onClose = () => {
-		isOpen = false;
-		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
-			kind: EditorEventType.ColorPickerToggled,
-			open: false,
-		});
-		onInputEnd();
-
-		// Restore focus to the input that opened the color picker
-		colorInput.focus();
-
-		colorInputContainer.classList.remove('picker-open');
-	};
-	colorInput.addEventListener('close', () => {
-		onClose();
-	});
-
-	const setColorInputValue = (color: Color4|string) => {
-		if (typeof color === 'object') {
-			color = color.toHexString();
-		}
-
-		colorInput.value = color;
-
-		// Fire all color event listeners. See
-		// https://github.com/mdbassit/Coloris#manually-updating-the-thumbnail
-		colorInput.dispatchEvent(new Event('input', { bubbles: true }));
-	};
-
-	return {
-		input: colorInput,
-		container: colorInputContainer,
-		setValue: setColorInputValue,
-		closePicker: () => {
-			if (isOpen) {
-				onInputEnd();
-			}
-		},
-	};
-};
-
-const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: OnColorChangeListener) => {
-	const pipetteButton = document.createElement('button');
-	pipetteButton.classList.add('pipetteButton');
-	pipetteButton.title = editor.localization.pickColorFromScreen;
-	pipetteButton.setAttribute('alt', pipetteButton.title);
-
-	const pickColorLabel = document.createElement('span');
-	pickColorLabel.classList.add('pickColorInstructions');
-	pickColorLabel.innerText = editor.localization.clickToPickColorAnnouncement;
-
-	const updatePipetteButtonContent = (color?: Color4) => {
-		pipetteButton.replaceChildren(
-			editor.icons.makePipetteIcon(color), pickColorLabel
-		);
-	};
-	updatePipetteButtonContent();
-
-	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(PipetteTool)[0];
-
-	const endColorSelectMode = () => {
-		pipetteTool?.clearColorListener();
-		updatePipetteButtonContent();
-		pipetteButton.classList.remove('active');
-	};
-
-	const pipetteColorSelect = (color: Color4|null) => {
-		endColorSelectMode();
-
-		if (color) {
-			onColorChange(color);
-		}
-	};
-
-	const pipetteColorPreview = (color: Color4|null) => {
-		if (color) {
-			updatePipetteButtonContent(color);
-		} else {
-			updatePipetteButtonContent();
-		}
-	};
-
-	pipetteButton.onclick = () => {
-		// If already picking, cancel it.
-		if (pipetteButton.classList.contains('active')) {
-			endColorSelectMode();
-			editor.announceForAccessibility(editor.localization.colorSelectionCanceledAnnouncement);
-			return;
-		}
-
-		pipetteTool?.setColorListener(
-			pipetteColorPreview,
-			pipetteColorSelect,
-		);
-
-		if (pipetteTool) {
-			pipetteButton.classList.add('active');
-
-			editor.announceForAccessibility(editor.localization.clickToPickColorAnnouncement);
-		}
-	};
-
-	container.appendChild(pipetteButton);
-
-	return {
-		// Cancel a pipette color selection if one is in progress.
-		cancel: () => {
-			endColorSelectMode();
-		},
-	};
-};
-
-export default makeColorInput;

package/src/toolbar/widgets/components/makeFileInput.ts

@@ -1,128 +0,0 @@
-import ReactiveValue, { MutableReactiveValue } from '../../../util/ReactiveValue';
-import { ToolbarContext } from '../../types';
-
-let idCounter = 0;
-
-/**
- * Creates a stylized file input.
- */
-const makeFileInput = (labelText: string, context: ToolbarContext, accepts: string = '*') => {
-	const container = document.createElement('div');
-	const label = document.createElement('label');
-	const input = document.createElement('input');
-
-	const descriptionBox = document.createElement('div');
-	descriptionBox.classList.add('toolbar--file-input-description');
-	const descriptionText = document.createElement('span');
-
-	container.classList.add('toolbar--file-input-container');
-
-	label.appendChild(document.createTextNode(labelText));
-	input.accept = accepts;
-	input.type = 'file';
-
-	// Associate the label with the input
-	const inputId = `js-draw-file-input-${idCounter ++}`;
-	input.setAttribute('id', inputId);
-	label.htmlFor = inputId;
-
-	const icon = context.icons.makeUploadFileIcon();
-	icon.classList.add('icon');
-
-	descriptionBox.replaceChildren(icon, descriptionText);
-	label.appendChild(descriptionBox);
-	container.replaceChildren(label, input);
-
-	const selectedFiles: MutableReactiveValue<File[]> = ReactiveValue.fromInitialValue([]);
-
-	// Support droping files
-	label.addEventListener('dragover', event => {
-		event.preventDefault();
-		label.classList.add('drag-target');
-	});
-	label.addEventListener('dragenter', event => {
-		event.preventDefault();
-		label.classList.add('drag-target');
-	});
-	label.addEventListener('dragleave', event => {
-		event.preventDefault();
-
-		// Ensure the event wasn't targeting a child.
-		// See https://stackoverflow.com/a/54271161 and
-		//     https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget
-		const enteringElement = event.relatedTarget as HTMLElement;
-		if (!enteringElement || !label.contains(enteringElement)) {
-			label.classList.remove('drag-target');
-		}
-	});
-
-	// See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop#process_the_drop
-	label.addEventListener('drop', event => {
-		event.preventDefault();
-		label.classList.remove('drag-target');
-
-		const fileList: File[] = [];
-
-		if (event.dataTransfer) {
-			fileList.push(...event.dataTransfer.files);
-		}
-
-		selectedFiles.set(fileList);
-	});
-	input.addEventListener('change', () => {
-		const fileList = input.files ?? [];
-		selectedFiles.set([ ...fileList ]);
-	});
-
-	selectedFiles.onUpdate(files => {
-		if (files.length === 0 && input.files && input.files.length > 0) {
-			input.value = '';
-		}
-	});
-
-	// Update the status text and hide/show the icon.
-	selectedFiles.onUpdateAndNow(files => {
-		if (files.length > 0) {
-			descriptionText.innerText = files.map(file => file.name).join('\n');
-
-			// Only show the icon when there are files
-			icon.style.display = 'none';
-		} else {
-			// Show the icon
-			icon.style.display = '';
-
-			const text = context.localization.dragAndDropHereOrBrowse;
-
-			// Split into regions surrounded by {{curly braces}} and regions that are
-			// not.
-			// When given a regular expression, `.split` outputs an array. For example,
-			//    "a test __of__ split".split(/__(.*)__/)
-			// results in
-			//    ['a test ', 'of', ' split'].
-			const segments = text.split(/[{]{2}(.*)[}]{2}/g);
-			descriptionText.replaceChildren();
-
-			for (let i = 0; i < segments.length; i++) {
-				// Inside a {{pair of curly braces}}?
-				if (i % 2 === 1) {
-					const boldedText = document.createElement('b');
-					boldedText.innerText = segments[i];
-					descriptionText.appendChild(boldedText);
-				} else {
-					descriptionText.appendChild(document.createTextNode(segments[i]));
-				}
-			}
-		}
-	});
-
-	return {
-		container,
-		input,
-		selectedFiles,
-		addTo: (parent: HTMLElement) => {
-			parent.appendChild(container);
-		},
-	};
-};
-
-export default makeFileInput;