js-draw 1.0.1 → 1.1.0

package/src/toolbar/constants.ts

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

package/src/toolbar/lib.ts

@@ -1,6 +0,0 @@
-
-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

@@ -1,136 +0,0 @@
-
-
-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

@@ -1,13 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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;
-	}
-}