js-draw 0.18.1 → 0.18.2

package/src/toolbar/lib.ts

@@ -0,0 +1,4 @@
+
+export * from './widgets/lib';
+export * from './makeColorInput';
+export { default as IconProvider } from './IconProvider';

package/src/toolbar/localization.ts

@@ -0,0 +1,106 @@
+
+
+export interface ToolbarLocalization {
+	fontLabel: string;
+	textSize: string;
+	touchPanning: string;
+	lockRotation: string;
+	outlinedRectanglePen: string;
+	filledRectanglePen: string;
+	linePen: string;
+	arrowPen: string;
+	image: string;
+	inputAltText: string;
+	chooseFile: string;
+	cancel: string;
+	submit: string;
+	freehandPen: string;
+	pressureSensitiveFreehandPen: string;
+	selectObjectType: string;
+	colorLabel: string;
+	pen: string;
+	eraser: string;
+	select: string;
+	handTool: string;
+	thicknessLabel: string;
+	resizeImageToSelection: string;
+	deleteSelection: string;
+	duplicateSelection: string;
+	pickColorFromScreen: string;
+	clickToPickColorAnnouncement: string;
+	reformatSelection: string;
+	undo: string;
+	redo: string;
+	zoom: string;
+	resetView: string;
+	selectionToolKeyboardShortcuts: string;
+	paste: string;
+	documentProperties: string;
+	backgroundColor: string;
+	imageWidthOption: string;
+	imageHeightOption: string;
+	toggleOverflow: string,
+
+	errorImageHasZeroSize: string;
+
+	dropdownShown: (toolName: string)=> string;
+	dropdownHidden: (toolName: string)=> string;
+	zoomLevel: (zoomPercentage: number)=> string;
+	colorChangedAnnouncement: (color: string)=> string;
+	imageSize: (size: number, units: string)=> string;
+	imageLoadError: (message: string)=> string;
+}
+
+export const defaultToolbarLocalization: ToolbarLocalization = {
+	pen: 'Pen',
+	eraser: 'Eraser',
+	select: 'Select',
+	handTool: 'Pan',
+	zoom: 'Zoom',
+	image: 'Image',
+	reformatSelection: 'Format selection',
+	inputAltText: 'Alt text: ',
+	chooseFile: 'Choose file: ',
+	submit: 'Submit',
+	cancel: 'Cancel',
+	resetView: 'Reset view',
+	thicknessLabel: 'Thickness: ',
+	colorLabel: 'Color: ',
+	fontLabel: 'Font: ',
+	textSize: 'Size: ',
+	resizeImageToSelection: 'Resize image to selection',
+	deleteSelection: 'Delete selection',
+	duplicateSelection: 'Duplicate selection',
+	undo: 'Undo',
+	redo: 'Redo',
+	selectObjectType: 'Object type: ',
+	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',
+
+	freehandPen: 'Freehand',
+	pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
+	arrowPen: 'Arrow',
+	linePen: 'Line',
+	outlinedRectanglePen: 'Outlined rectangle',
+	filledRectanglePen: 'Filled rectangle',
+	lockRotation: 'Lock rotation',
+
+	paste: 'Paste',
+
+	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
+	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+	zoomLevel: (zoomPercent: number) => `Zoom: ${zoomPercent}%`,
+	colorChangedAnnouncement: (color: string) => `Color changed to ${color}`,
+	imageSize: (size: number, units: string) => `Image size: ${size} ${units}`,
+
+	errorImageHasZeroSize: 'Error: Image has zero size',
+	imageLoadError: (message: string)=> `Error loading image: ${message}`,
+};

package/src/toolbar/makeColorInput.ts

@@ -0,0 +1,145 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import PipetteTool from '../tools/PipetteTool';
+import { EditorEventType } from '../types';
+
+type OnColorChangeListener = (color: Color4)=>void;
+type SetColorCallback = (color: Color4|string) => void;
+
+// Returns [ color input, input container, callback to change the color value ].
+export const makeColorInput = (
+	editor: Editor, onColorChange: OnColorChangeListener
+): [ HTMLInputElement, HTMLElement, SetColorCallback ] => {
+
+	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;
+	colorInput.addEventListener('open', () => {
+		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+			kind: EditorEventType.ColorPickerToggled,
+			open: true,
+		});
+		pipetteController.cancel();
+	});
+	colorInput.addEventListener('close', () => {
+		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+			kind: EditorEventType.ColorPickerToggled,
+			open: false,
+		});
+		onInputEnd();
+	});
+
+	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 [ colorInput, colorInputContainer, setColorInputValue ];
+};
+
+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 updatePipetteIcon = (color?: Color4) => {
+		pipetteButton.replaceChildren(editor.icons.makePipetteIcon(color));
+	};
+	updatePipetteIcon();
+
+	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(PipetteTool)[0];
+	const endColorSelectMode = () => {
+		pipetteTool?.clearColorListener();
+		updatePipetteIcon();
+		pipetteButton.classList.remove('active');
+	};
+	const pipetteColorSelect = (color: Color4|null) => {
+		endColorSelectMode();
+
+		if (color) {
+			onColorChange(color);
+		}
+	};
+	const pipetteColorPreview = (color: Color4|null) => {
+		if (color) {
+			updatePipetteIcon(color);
+		} else {
+			updatePipetteIcon();
+		}
+	};
+
+	pipetteButton.onclick = () => {
+		// If already picking, cancel it.
+		if (pipetteButton.classList.contains('active')) {
+			endColorSelectMode();
+			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/toolbar.css

@@ -0,0 +1,213 @@
+@import url(./widgets/InsertImageWidget.css);
+@import url(./widgets/OverflowWidget.css);
+
+
+.toolbar-root {
+	background-color: var(--primary-background-color);
+	--icon-color: var(--primary-foreground-color);
+
+
+	border: 1px solid var(--secondary-background-color);
+	border-radius: 2px;
+	flex-wrap: wrap;
+
+	box-sizing: border-box;
+	width: 100%;
+
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+
+	--toolbar-button-height: min(20vh, 60px);
+
+	/* Display above selection dialogs, etc. */
+	z-index: 2;
+
+	font-family: system-ui, -apple-system, sans-serif;
+}
+
+.toolbar-root > .toolbar-toolContainer > .toolbar-button,
+.toolbar-root > .toolbar-toolContainer > * > button,
+.toolbar-root > .toolbar-buttonGroup > button,
+.toolbar-root > .toolbar-button {
+	width: min-content;
+	white-space: pre;
+	height: var(--toolbar-button-height);
+}
+
+.toolbar-dropdown .toolbar-button > .toolbar-icon {
+	max-width: 50px;
+	width: 100%;
+}
+
+.toolbar-button.disabled {
+	filter: opacity(0.5) sepia(0.2);
+	cursor: unset;
+}
+
+.toolbar-button, .toolbar-root button {
+	cursor: pointer;
+	text-align: center;
+	border-radius: 6px;
+
+	--icon-color: var(--primary-foreground-color);
+	background-color: var(--primary-background-color);
+	color: var(--primary-foreground-color);
+	border: none;
+	box-shadow: 0px 0px 2px var(--primary-shadow-color);
+
+	transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
+}
+
+.toolbar-button,
+.toolbar-buttonGroup > button,
+.toolbar-toolContainer > * > button,
+.toolbar-root > button {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	padding-left: 3px;
+	padding-right: 3px;
+	margin-left: 3px;
+	margin-right: 3px;
+
+	min-width: 40px;
+	width: min-content;
+	font-size: 1em;
+}
+
+.toolbar-button > label {
+	cursor: inherit;
+}
+
+.toolbar-dropdown > .toolbar-toolContainer > button,
+.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {
+	width: 6em;
+}
+
+.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {
+	box-shadow: 0px 2px 4px var(--primary-shadow-color);
+}
+
+.toolbar-root button:disabled {
+	cursor: inherit;
+	filter: opacity(0.5);
+}
+
+.toolbar-root .toolbar-icon {
+	flex-shrink: 1;
+
+	width: 100%;
+	min-width: 30px;
+	min-height: 30px;
+}
+
+.toolbar-toolContainer.selected > .toolbar-button {
+	background-color: var(--secondary-background-color);
+	color: var(--secondary-foreground-color);
+	--icon-color: var(--secondary-foreground-color);
+}
+
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
+	display: none;
+}
+
+.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
+	height: 10px;
+	transition: transform 0.5s ease;
+}
+
+.toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {
+	transform: rotate(180deg);
+}
+
+.toolbar-dropdown.hidden,
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {
+	display: none;
+}
+
+.toolbar-dropdown {
+	position: absolute;
+	padding: 15px;
+	padding-top: 5px;
+
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: column;
+	max-height: 80vh;
+
+	max-width: fit-content;
+
+	/* Prevent overlap/being displayed under the undo/redo buttons */
+	z-index: 2;
+	background-color: var(--primary-background-color);
+	box-shadow: 0px 3px 3px var(--primary-shadow-color);
+}
+
+.toolbar-buttonGroup {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.toolbar-closeColorPickerOverlay {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+
+	background-color: var(--primary-background-color);
+	opacity: 0.3;
+}
+
+/* Make color selection buttons fill their containing label */
+.toolbar-dropdown .clr-field button {
+	width: 100%;
+	height: 100%;
+	border-radius: 2px;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor {
+	display: flex;
+	flex-direction: row;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {
+	flex-grow: 1;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor button {
+	min-width: 48px;
+}
+
+.color-input-container {
+	display: inline-flex;
+	flex-direction: row;
+}
+
+.color-input-container .pipetteButton {
+	width: 30px;
+	height: 30px;
+	padding: 0;
+	display: inline-flex;
+}
+
+.color-input-container .pipetteButton > svg {
+	width: 100%;
+}
+
+.color-input-container .pipetteButton.active {
+	background-color: var(--secondary-background-color);
+	--icon-color: var(--secondary-foreground-color);
+}
+
+.toolbar-spacedList > * {
+	padding-bottom: 5px;
+	padding-top: 5px;
+}

package/src/toolbar/types.ts

@@ -0,0 +1,5 @@
+
+export interface ActionButtonIcon {
+	icon: Element;
+	label: string;
+}

package/src/toolbar/widgets/ActionButtonWidget.ts

@@ -0,0 +1,39 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+
+export default class ActionButtonWidget extends BaseWidget {
+	public constructor(
+		editor: Editor,
+		id: string,
+
+        protected makeIcon: ()=> Element|null,
+		protected title: string,
+        protected clickAction: ()=>void,
+
+        localizationTable?: ToolbarLocalization,
+		protected mustBeToplevel: boolean = false,
+	) {
+		super(editor, id, localizationTable);
+	}
+
+	protected handleClick() {
+		this.clickAction();
+	}
+
+	protected getTitle(): string {
+		return this.title;
+	}
+
+	protected createIcon(): Element|null {
+		return this.makeIcon();
+	}
+
+	protected fillDropdown(_dropdown: HTMLElement): boolean {
+		return false;
+	}
+
+	public canBeInOverflowMenu(): boolean {
+		return !this.mustBeToplevel;
+	}
+}

package/src/toolbar/widgets/BaseToolWidget.ts

@@ -0,0 +1,56 @@
+import Editor from '../../Editor';
+import BaseTool from '../../tools/BaseTool';
+import { EditorEventType } from '../../types';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+
+export default abstract class BaseToolWidget extends BaseWidget {
+	public constructor(
+		protected editor: Editor,
+		protected targetTool: BaseTool,
+		id: string,
+		localizationTable?: ToolbarLocalization,
+	) {
+		super(editor, id, localizationTable);
+
+		editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolEnabled) {
+				throw new Error('Incorrect event type! (Expected ToolEnabled)');
+			}
+
+			if (toolEvt.tool === targetTool) {
+				this.setSelected(true);
+			}
+		});
+
+		editor.notifier.on(EditorEventType.ToolDisabled, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolDisabled) {
+				throw new Error('Incorrect event type! (Expected ToolDisabled)');
+			}
+
+			if (toolEvt.tool === targetTool) {
+				this.setSelected(false);
+				this.setDropdownVisible(false);
+			}
+		});
+	}
+
+	protected handleClick() {
+		if (this.hasDropdown) {
+			if (!this.targetTool.isEnabled()) {
+				this.targetTool.setEnabled(true);
+			} else {
+				this.setDropdownVisible(!this.isDropdownVisible());
+			}
+		} else {
+			this.targetTool.setEnabled(!this.targetTool.isEnabled());
+		}
+	}
+
+	public addTo(parent: HTMLElement) {
+		const result = super.addTo(parent);
+		this.setSelected(this.targetTool.isEnabled());
+
+		return result;
+	}
+}