js-draw 0.10.3 → 0.11.0

package/dist/src/tools/PasteHandler.js

@@ -12,16 +12,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { TextComponent } from '../components/lib';
-import { uniteCommands } from '../commands/lib';
 import SVGLoader from '../SVGLoader';
 import { Mat33 } from '../math/lib';
 import BaseTool from './BaseTool';
-import EditorImage from '../EditorImage';
-import SelectionTool from './SelectionTool/SelectionTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
 import ImageComponent from '../components/ImageComponent';
-import Viewport from '../Viewport';
 // { @inheritDoc PasteHandler! }
 export default class PasteHandler extends BaseTool {
     constructor(editor) {
@@ -46,41 +42,7 @@ export default class PasteHandler extends BaseTool {
     }
     addComponentsFromPaste(components) {
         return __awaiter(this, void 0, void 0, function* () {
-            let bbox = null;
-            for (const component of components) {
-                if (bbox) {
-                    bbox = bbox.union(component.getBBox());
-                }
-                else {
-                    bbox = component.getBBox();
-                }
-            }
-            if (!bbox) {
-                return;
-            }
-            // Find a transform that scales/moves bbox onto the screen.
-            const visibleRect = this.editor.viewport.visibleRect;
-            const scaleRatioX = visibleRect.width / bbox.width;
-            const scaleRatioY = visibleRect.height / bbox.height;
-            let scaleRatio = scaleRatioX;
-            if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
-                scaleRatio = scaleRatioY;
-            }
-            scaleRatio *= 2 / 3;
-            scaleRatio = Viewport.roundScaleRatio(scaleRatio);
-            const transfm = Mat33.translation(visibleRect.center.minus(bbox.center)).rightMul(Mat33.scaling2D(scaleRatio, bbox.center));
-            const commands = [];
-            for (const component of components) {
-                // To allow deserialization, we need to add first, then transform.
-                commands.push(EditorImage.addElement(component));
-                commands.push(component.transformBy(transfm));
-            }
-            const applyChunkSize = 100;
-            this.editor.dispatch(uniteCommands(commands, applyChunkSize), true);
-            for (const selectionTool of this.editor.toolController.getMatchingTools(SelectionTool)) {
-                selectionTool.setEnabled(true);
-                selectionTool.setSelection(components);
-            }
+            yield this.editor.addAndCenterComponents(components);
         });
     }
     doSVGPaste(data) {

package/dist/src/util/fileToBase64.d.ts

@@ -0,0 +1,3 @@
+type ProgressListener = (evt: ProgressEvent<FileReader>) => void;
+declare const fileToBase64: (file: File, onprogress?: ProgressListener) => Promise<string | null>;
+export default fileToBase64;

package/dist/src/util/fileToBase64.js

@@ -0,0 +1,13 @@
+const fileToBase64 = (file, onprogress) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.onabort = reject;
+        reader.onprogress = (evt) => {
+            onprogress === null || onprogress === void 0 ? void 0 : onprogress(evt);
+        };
+        reader.readAsDataURL(file);
+    });
+};
+export default fileToBase64;

package/dist/src/util/waitForTimeout.d.ts

@@ -0,0 +1,2 @@
+declare const waitForTimeout: (timeout: number) => Promise<void>;
+export default waitForTimeout;

package/dist/src/util/waitForTimeout.js

@@ -0,0 +1,7 @@
+// Returns a promise that resolves after `timeout` milliseconds.
+const waitForTimeout = (timeout) => {
+    return new Promise(resolve => {
+        setTimeout(() => resolve(), timeout);
+    });
+};
+export default waitForTimeout;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.10.3",
+	"version": "0.11.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Editor.ts

@@ -41,6 +41,10 @@ import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
 import CanvasRenderer from './rendering/renderers/CanvasRenderer';
 import untilNextAnimationFrame from './util/untilNextAnimationFrame';
+import fileToBase64 from './util/fileToBase64';
+import uniteCommands from './commands/uniteCommands';
+import SelectionTool from './tools/SelectionTool/SelectionTool';
+import AbstractComponent from './components/AbstractComponent';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -513,20 +517,14 @@ export class Editor {
 		for (const file of clipboardData.files) {
 			const fileType = file.type.toLowerCase();
 			if (fileType === 'image/png' || fileType === 'image/jpg') {
-				const reader = new FileReader();
-
 				this.showLoadingWarning(0);
+				const onprogress = (evt: ProgressEvent<FileReader>) => {
+					this.showLoadingWarning(evt.loaded / evt.total);
+				};
+
 				try {
-					const data = await new Promise((resolve: (result: string|null)=>void, reject) => {
-						reader.onload = () => resolve(reader.result as string|null);
-						reader.onerror = reject;
-						reader.onabort = reject;
-						reader.onprogress = (evt) => {
-							this.showLoadingWarning(evt.loaded / evt.total);
-						};
-
-						reader.readAsDataURL(file);
-					});
+					const data = await fileToBase64(file, onprogress);
+
 					if (data && this.toolController.dispatchInputEvent({
 						kind: InputEvtType.PasteEvent,
 						mime: fileType,
@@ -629,13 +627,14 @@ export class Editor {
 	/** `apply` a command. `command` will be announced for accessibility. */
 	public dispatch(command: Command, addToHistory: boolean = true) {
 		if (addToHistory) {
-			// .push applies [command] to this
-			this.history.push(command);
-		} else {
-			command.apply(this);
+			const apply = false; // Don't double-apply
+			this.history.push(command, apply);
 		}
 
+		const applyResult = command.apply(this);
 		this.announceForAccessibility(command.description(this, this.localization));
+
+		return applyResult;
 	}
 
 	/**
@@ -825,6 +824,57 @@ export class Editor {
 		});
 	}
 
+	public async addAndCenterComponents(components: AbstractComponent[], selectComponents: boolean = true) {
+		let bbox: Rect2|null = null;
+		for (const component of components) {
+			if (bbox) {
+				bbox = bbox.union(component.getBBox());
+			} else {
+				bbox = component.getBBox();
+			}
+		}
+
+		if (!bbox) {
+			return;
+		}
+
+		// Find a transform that scales/moves bbox onto the screen.
+		const visibleRect = this.viewport.visibleRect;
+		const scaleRatioX = visibleRect.width / bbox.width;
+		const scaleRatioY = visibleRect.height / bbox.height;
+
+		let scaleRatio = scaleRatioX;
+		if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
+			scaleRatio = scaleRatioY;
+		}
+		scaleRatio *= 2 / 3;
+
+		scaleRatio = Viewport.roundScaleRatio(scaleRatio);
+
+		const transfm = Mat33.translation(
+			visibleRect.center.minus(bbox.center)
+		).rightMul(
+			Mat33.scaling2D(scaleRatio, bbox.center)
+		);
+
+		const commands: Command[] = [];
+		for (const component of components) {
+			// To allow deserialization, we need to add first, then transform.
+			commands.push(EditorImage.addElement(component));
+			commands.push(component.transformBy(transfm));
+		}
+
+		const applyChunkSize = 100;
+		await this.dispatch(uniteCommands(commands, applyChunkSize), true);
+
+		if (selectComponents) {
+			for (const selectionTool of this.toolController.getMatchingTools(SelectionTool)) {
+				selectionTool.setEnabled(true);
+				selectionTool.setSelection(components);
+			}
+		}
+	}
+
 	// Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
 	// If `format` is not `image/png`, a PNG image URL may still be returned (as in the
 	// case of `HTMLCanvasElement::toDataURL`).

package/src/SVGLoader.ts

@@ -287,6 +287,7 @@ export default class SVGLoader implements ImageLoader {
 	private async addImage(elem: SVGImageElement) {
 		const image = new Image();
 		image.src = elem.getAttribute('xlink:href') ?? elem.href.baseVal;
+		image.setAttribute('alt', elem.getAttribute('aria-label') ?? '');
 
 		try {
 			const supportedAttrs: string[] = [];

package/src/components/AbstractComponent.ts

@@ -90,6 +90,11 @@ export default abstract class AbstractComponent {
 		return new AbstractComponent.TransformElementCommand(affineTransfm, this);
 	}
 
+	// Returns a command that updates this component's z-index.
+	public setZIndex(newZIndex: number): SerializableCommand {
+		return new AbstractComponent.TransformElementCommand(Mat33.identity, this, newZIndex);
+	}
+
 	// @returns true iff this component can be selected (e.g. by the selection tool.)
 	public isSelectable(): boolean {
 		return true;
@@ -110,6 +115,7 @@ export default abstract class AbstractComponent {
 		public constructor(
 			private affineTransfm: Mat33,
 			private componentID: string,
+			private targetZIndex?: number,
 		) {
 			super(AbstractComponent.transformElementCommandId);
 		}
@@ -123,7 +129,9 @@ export default abstract class AbstractComponent {
 			if (!component) {
 				throw new Error(`Unable to resolve component with ID ${this.componentID}`);
 			}
-			this.command = new AbstractComponent.TransformElementCommand(this.affineTransfm, component);
+			this.command = new AbstractComponent.TransformElementCommand(
+				this.affineTransfm, component, this.targetZIndex
+			);
 		}
 
 		public apply(editor: Editor) {
@@ -144,19 +152,23 @@ export default abstract class AbstractComponent {
 			return {
 				id: this.componentID,
 				transfm: this.affineTransfm.toArray(),
+				targetZIndex: this.targetZIndex,
 			};
 		}
 	};
 
 	private static TransformElementCommand = class extends SerializableCommand {
 		private origZIndex: number;
+		private targetZIndex: number;
 
 		public constructor(
 			private affineTransfm: Mat33,
 			private component: AbstractComponent,
+			targetZIndex?: number,
 		) {
 			super(AbstractComponent.transformElementCommandId);
 			this.origZIndex = component.zIndex;
+			this.targetZIndex = targetZIndex ?? AbstractComponent.zIndexCounter++;
 		}
 
 		private updateTransform(editor: Editor, newTransfm: Mat33) {
@@ -177,7 +189,7 @@ export default abstract class AbstractComponent {
 		}
 
 		public apply(editor: Editor) {
-			this.component.zIndex = AbstractComponent.zIndexCounter++;
+			this.component.zIndex = this.targetZIndex;
 			this.updateTransform(editor, this.affineTransfm);
 			editor.queueRerender();
 		}
@@ -195,16 +207,17 @@ export default abstract class AbstractComponent {
 		static {
 			SerializableCommand.register(AbstractComponent.transformElementCommandId, (json: any, editor: Editor) => {
 				const elem = editor.image.lookupElement(json.id);
-
 				const transform = new Mat33(...(json.transfm as Mat33Array));
+				const targetZIndex = json.targetZIndex;
 
 				if (!elem) {
-					return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id);
+					return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id, targetZIndex);
 				}
 
 				return new AbstractComponent.TransformElementCommand(
 					transform,
 					elem,
+					targetZIndex,
 				);
 			});
 		}
@@ -213,6 +226,7 @@ export default abstract class AbstractComponent {
 			return {
 				id: this.component.getId(),
 				transfm: this.affineTransfm.toArray(),
+				targetZIndex: this.targetZIndex,
 			};
 		}
 	};

package/src/components/ImageComponent.ts

@@ -77,6 +77,9 @@ export default class ImageComponent extends AbstractComponent {
 			image.height = height;
 		}
 
+		image.setAttribute('alt', elem.getAttribute('alt') ?? '');
+		image.setAttribute('aria-label', elem.getAttribute('aria-label') ?? '');
+
 		return new ImageComponent({
 			image,
 			base64Url: url,
@@ -126,6 +129,18 @@ export default class ImageComponent extends AbstractComponent {
 		return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
 	}
 
+	public getAltText() {
+		return this.image.label;
+	}
+
+	public getURL() {
+		return this.image.base64Url;
+	}
+
+	public getTransformation(): Mat33 {
+		return this.image.transform;
+	}
+
 	protected createClone(): AbstractComponent {
 		return new ImageComponent({
 			...this.image,

package/src/localizations/es.ts

@@ -58,6 +58,9 @@ const localization: EditorLocalization = {
 	textTool: 'Texto',
 	enterTextToInsert: 'Entra texto',
 	rerenderAsText: 'Redibuja la pantalla al texto',
+	image: 'Imagen',
+	imageSize: (size: number, units: string) => `Tamaño del imagen: ${size} ${units}`,
+	imageLoadError: (message: string)=> `Error cargando imagen: ${message}`,
 };
 
 export default localization;

package/src/rendering/renderers/SVGRenderer.ts

@@ -217,11 +217,16 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	public drawImage(image: RenderableImage) {
+		let label = image.label ?? image.image.getAttribute('aria-label') ?? '';
+		if (label === '') {
+			label = image.image.getAttribute('alt') ?? '';
+		}
+
 		const svgImgElem = document.createElementNS(svgNameSpace, 'image');
 		svgImgElem.setAttribute('href', image.base64Url);
 		svgImgElem.setAttribute('width', image.image.getAttribute('width') ?? '');
 		svgImgElem.setAttribute('height', image.image.getAttribute('height') ?? '');
-		svgImgElem.setAttribute('aria-label', image.image.getAttribute('aria-label') ?? image.image.getAttribute('alt') ?? '');
+		svgImgElem.setAttribute('aria-label', label);
 		this.transformFrom(image.transform, svgImgElem);
 
 		this.elem.appendChild(svgImgElem);

package/src/toolbar/HTMLToolbar.ts

@@ -16,7 +16,7 @@ import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
 import BaseWidget from './widgets/BaseWidget';
-import { ActionButtonWidget } from './lib';
+import { ActionButtonWidget, InsertImageWidget } from './lib';
 
 export const toolbarCSSPrefix = 'toolbar-';
 
@@ -236,6 +236,8 @@ export default class HTMLToolbar {
 			this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
 		}
 
+		this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
+
 		const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
 		if (panZoomTool) {
 			this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));

package/src/toolbar/IconProvider.ts

@@ -323,6 +323,14 @@ export default class IconProvider {
 
 		return icon;
 	}
+
+	public makeInsertImageIcon(): IconType {
+		return this.makeIconFromPath(`
+			M 5 10 L 5 90 L 95 90 L 95 10 L 5 10 z
+			M 10 15 L 90 15 L 90 50 L 70 75 L 40 50 L 10 75 L 10 15 z
+			M 22.5 25 A 7.5 7.5 0 0 0 15 32.5 A 7.5 7.5 0 0 0 22.5 40 A 7.5 7.5 0 0 0 30 32.5 A 7.5 7.5 0 0 0 22.5 25 z 
+		`);
+	}
 	
 	public makeTextIcon(textStyle: TextStyle): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');

package/src/toolbar/localization.ts

@@ -9,6 +9,11 @@ export interface ToolbarLocalization {
 	filledRectanglePen: string;
 	linePen: string;
 	arrowPen: string;
+	image: string;
+	inputAltText: string;
+	chooseFile: string;
+	cancel: string;
+	submit: string;
 	freehandPen: string;
 	pressureSensitiveFreehandPen: string;
 	selectObjectType: string;
@@ -30,10 +35,14 @@ export interface ToolbarLocalization {
 	selectionToolKeyboardShortcuts: string;
 	paste: 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 = {
@@ -42,6 +51,11 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	select: 'Select',
 	handTool: 'Pan',
 	zoom: 'Zoom',
+	image: 'Image',
+	inputAltText: 'Alt text: ',
+	chooseFile: 'Choose file: ',
+	submit: 'Submit',
+	cancel: 'Cancel',
 	resetView: 'Reset view',
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
@@ -72,5 +86,9 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
 	zoomLevel: (zoomPercent: number) => `Zoom: ${zoomPercent}%`,
-	colorChangedAnnouncement: (color: string)=> `Color changed to ${color}`,
+	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/toolbar.css

@@ -1,3 +1,5 @@
+@import url(./widgets/InsertImageWidget.css);
+
 .toolbar-root {
 	background-color: var(--primary-background-color);
 	--icon-color: var(--primary-foreground-color);

package/src/toolbar/widgets/InsertImageWidget.css

@@ -0,0 +1,44 @@
+
+.toolbar-image-selection-overlay {
+	position: absolute;
+
+	width: 100%;
+	height: 100%;
+	z-index: 10;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.toolbar-image-selection-overlay > div {
+	background: var(--primary-background-color);
+	box-shadow: 1px 1px 3px var(--primary-shadow-color);
+
+	padding: 18px;
+	border-radius: 3px;
+}
+
+.toolbar-image-selection-overlay > div > div {
+	padding: 5px;
+}
+
+.toolbar-image-selection-overlay img {
+	max-width: min(50vw, 75%);
+	max-height: 50vh;
+
+	/* Center */
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.toolbar-image-selection-overlay .action-button-row {
+	margin-top: 4px;
+	display: flex;
+	flex-direction: row;
+}
+
+.toolbar-image-selection-overlay .action-button-row > button {
+	flex-grow: 1;
+}