js-draw 1.0.0 → 1.0.1

package/src/toolbar/constants.ts

@@ -0,0 +1 @@
+export const toolbarCSSPrefix = 'toolbar-';

package/src/toolbar/lib.ts

@@ -0,0 +1,6 @@
+
+export * from './widgets/lib';
+export * from './widgets/components/makeColorInput';
+export { default as IconProvider, IconElemType } from './IconProvider';
+export { makeDropdownToolbar } from './DropdownToolbar';
+export { makeEdgeToolbar } from './EdgeToolbar';

package/src/toolbar/localization.ts

@@ -0,0 +1,136 @@
+
+
+export interface ToolbarLocalization {
+	fontLabel: string;
+	textSize: string;
+	touchPanning: string;
+	lockRotation: string;
+	outlinedRectanglePen: string;
+	outlinedCirclePen: string,
+	filledRectanglePen: string;
+	linePen: string;
+	arrowPen: string;
+	image: string;
+	inputAltText: string;
+	chooseFile: string;
+	dragAndDropHereOrBrowse: string; // Uses {{curly braces}} to bold text
+	cancel: string;
+	submit: string;
+	roundedTipPen: string;
+	flatTipPen: string;
+	selectPenTip: string;
+	selectShape: string;
+	colorLabel: string;
+	pen: string;
+	eraser: string;
+	select: string;
+	handTool: string;
+	thicknessLabel: string;
+	resizeImageToSelection: string;
+	deleteSelection: string;
+	duplicateSelection: string;
+
+	pickColorFromScreen: string;
+	clickToPickColorAnnouncement: string;
+	colorSelectionCanceledAnnouncement: string;
+
+	undo: string;
+	redo: string;
+	exit: string;
+	save: string;
+
+	zoom: string;
+	resetView: string;
+	reformatSelection: string;
+	selectionToolKeyboardShortcuts: string;
+	paste: string;
+	documentProperties: string;
+	backgroundColor: string;
+	imageWidthOption: string;
+	imageHeightOption: string;
+	useGridOption: string;
+	toggleOverflow: string,
+
+	about: string;
+	inputStabilization: string;
+
+	errorImageHasZeroSize: string;
+
+	// closeSidebar is used for accessibility in a button label.
+	closeSidebar: (toolName: string)=>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',
+	dragAndDropHereOrBrowse: 'Drag and drop here\nor\n{{browse}}',
+	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',
+
+	exit: 'Exit',
+	save: 'Save',
+	undo: 'Undo',
+	redo: 'Redo',
+
+	selectPenTip: 'Pen tip',
+	selectShape: 'Shape',
+	pickColorFromScreen: 'Pick color from screen',
+	clickToPickColorAnnouncement: 'Click on the screen to pick a color',
+	colorSelectionCanceledAnnouncement: 'Color selection canceled',
+	selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
+	documentProperties: 'Page',
+	backgroundColor: 'Background color',
+	imageWidthOption: 'Width',
+	imageHeightOption: 'Height',
+	useGridOption: 'Grid',
+	toggleOverflow: 'More',
+	about: 'About',
+	inputStabilization: 'Input stabilization',
+
+	touchPanning: 'Touchscreen panning',
+
+	roundedTipPen: 'Round',
+	flatTipPen: 'Flat',
+	arrowPen: 'Arrow',
+	linePen: 'Line',
+	outlinedRectanglePen: 'Outlined rectangle',
+	filledRectanglePen: 'Filled rectangle',
+	outlinedCirclePen: 'Outlined circle',
+	lockRotation: 'Lock rotation',
+
+	paste: 'Paste',
+
+
+	closeSidebar: (toolName: string) => `Close sidebar for ${toolName}`,
+	dropdownShown: (toolName) => `Menu for ${toolName} shown`,
+	dropdownHidden: (toolName) => `Menu 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/types.ts

@@ -0,0 +1,13 @@
+import IconProvider from './IconProvider';
+import type { ToolbarLocalization } from './localization';
+
+export interface ActionButtonIcon {
+	icon: Element;
+	label: string;
+}
+
+export interface ToolbarContext {
+	announceForAccessibility(text: string): void;
+	localization: ToolbarLocalization;
+	icons: IconProvider;
+}

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 override fillDropdown(_dropdown: HTMLElement): boolean {
+		return false;
+	}
+
+	public override mustBeInToplevelMenu(): boolean {
+		return this.mustBeToplevel;
+	}
+}

package/src/toolbar/widgets/BaseToolWidget.ts

@@ -0,0 +1,81 @@
+import Editor from '../../Editor';
+import BaseTool from '../../tools/BaseTool';
+import { EditorEventType } from '../../types';
+import { KeyPressEvent } from '../../inputEvents';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+import { toolbarCSSPrefix } from '../constants';
+
+const isToolWidgetFocused = () => {
+	const currentFocus = [...document.querySelectorAll('*:focus')];
+	return currentFocus.length && currentFocus.some(elem => elem.classList.contains(`${toolbarCSSPrefix}button`));
+};
+
+export default abstract class BaseToolWidget extends BaseWidget {
+	public constructor(
+		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);
+
+				// Transfer focus to the current button, only if another toolbar button is
+				// focused.
+				// This prevents pressing "space" from triggering a different action when
+				// the current is selected.
+				if (isToolWidgetFocused()) {
+					this.focus();
+				}
+			}
+		});
+
+		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);
+				this.activateDropdown();
+			} else {
+				this.setDropdownVisible(!this.isDropdownVisible());
+			}
+		} else {
+			this.targetTool.setEnabled(!this.targetTool.isEnabled());
+		}
+	}
+
+	protected override onKeyPress(event: KeyPressEvent): boolean {
+		if (this.isSelected() && event.key === ' ' && this.hasDropdown) {
+			this.handleClick();
+			return true;
+		}
+
+		return false;
+	}
+
+	public override addTo(parent: HTMLElement) {
+		const result = super.addTo(parent);
+		this.setSelected(this.targetTool.isEnabled());
+
+		return result;
+	}
+}