js-draw 0.25.0 → 1.0.0

package/src/toolbar/lib.ts

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

package/src/toolbar/localization.ts

@@ -1,114 +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;
-	cancel: string;
-	submit: string;
-	roundedTipPen: string;
-	flatTipPen: string;
-	selectPenType: 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;
-
-	reformatSelection: string;
-	undo: string;
-	redo: string;
-	zoom: string;
-	resetView: string;
-	selectionToolKeyboardShortcuts: string;
-	paste: string;
-	documentProperties: string;
-	backgroundColor: string;
-	imageWidthOption: string;
-	imageHeightOption: string;
-	useGridOption: 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',
-	selectPenType: 'Pen type: ',
-	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',
-
-	touchPanning: 'Touchscreen panning',
-
-	roundedTipPen: 'Rounded Tip',
-	flatTipPen: 'Flat Tip',
-	arrowPen: 'Arrow',
-	linePen: 'Line',
-	outlinedRectanglePen: 'Outlined rectangle',
-	filledRectanglePen: 'Filled rectangle',
-	outlinedCirclePen: 'Outlined circle',
-	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

@@ -1,159 +0,0 @@
-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();
-
-		// 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();
-	});
-	colorInput.addEventListener('close', () => {
-		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
-			kind: EditorEventType.ColorPickerToggled,
-			open: false,
-		});
-		onInputEnd();
-
-		// Restore focus to the input that opened the color picker
-		colorInput.focus();
-	});
-
-	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();
-			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/types.ts

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

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 canBeInOverflowMenu(): boolean {
-		return !this.mustBeToplevel;
-	}
-}

package/src/toolbar/widgets/BaseToolWidget.ts

@@ -1,65 +0,0 @@
-import Editor from '../../Editor';
-import BaseTool from '../../tools/BaseTool';
-import { EditorEventType, KeyPressEvent } from '../../types';
-import { ToolbarLocalization } from '../localization';
-import BaseWidget from './BaseWidget';
-
-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);
-			}
-		});
-
-		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());
-		}
-	}
-
-	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;
-	}
-}