js-draw 0.17.4 → 0.18.1

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

@@ -1,145 +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();
-	});
-	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

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

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

package/src/toolbar/widgets/BaseToolWidget.ts

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