js-draw 0.10.2 → 0.11.0

package/dist/src/tools/PanZoom.js

@@ -37,19 +37,19 @@ class InertialScroller {
             if (this.running) {
                 return;
             }
-            let currentVelocity = this.initialVelocity;
+            this.currentVelocity = this.initialVelocity;
             let lastTime = (new Date()).getTime();
             this.running = true;
-            const maxSpeed = 8000; // units/s
+            const maxSpeed = 5000; // units/s
             const minSpeed = 200; // units/s
-            if (currentVelocity.magnitude() > maxSpeed) {
-                currentVelocity = currentVelocity.normalized().times(maxSpeed);
+            if (this.currentVelocity.magnitude() > maxSpeed) {
+                this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
             }
-            while (this.running && currentVelocity.magnitude() > minSpeed) {
+            while (this.running && this.currentVelocity.magnitude() > minSpeed) {
                 const nowTime = (new Date()).getTime();
                 const dt = (nowTime - lastTime) / 1000;
-                currentVelocity = currentVelocity.times(Math.pow(1 / 8, dt));
-                this.scrollBy(currentVelocity.times(dt));
+                this.currentVelocity = this.currentVelocity.times(Math.pow(1 / 8, dt));
+                this.scrollBy(this.currentVelocity.times(dt));
                 yield untilNextAnimationFrame();
                 lastTime = nowTime;
             }
@@ -58,6 +58,12 @@ class InertialScroller {
             }
         });
     }
+    getCurrentVelocity() {
+        if (!this.running) {
+            return null;
+        }
+        return this.currentVelocity;
+    }
     stop() {
         if (this.running) {
             this.running = false;
@@ -71,6 +77,7 @@ export default class PanZoom extends BaseTool {
         this.editor = editor;
         this.mode = mode;
         this.transform = null;
+        this.lastPointerDownTimestamp = 0;
         this.inertialScroller = null;
         this.velocity = null;
     }
@@ -86,10 +93,13 @@ export default class PanZoom extends BaseTool {
     allPointersAreOfType(pointers, kind) {
         return pointers.every(pointer => pointer.device === kind);
     }
-    onPointerDown({ allPointers: pointers }) {
-        var _a, _b;
+    onPointerDown({ allPointers: pointers, current: currentPointer }) {
+        var _a, _b, _c, _d;
         let handlingGesture = false;
-        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
+        const inertialScrollerVelocity = (_b = (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.getCurrentVelocity()) !== null && _b !== void 0 ? _b : Vec2.zero;
+        (_c = this.inertialScroller) === null || _c === void 0 ? void 0 : _c.stop();
+        this.velocity = inertialScrollerVelocity;
+        this.lastPointerDownTimestamp = currentPointer.timeStamp;
         const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
         const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
         if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
@@ -107,22 +117,24 @@ export default class PanZoom extends BaseTool {
         }
         if (handlingGesture) {
             this.lastTimestamp = (new Date()).getTime();
-            (_b = this.transform) !== null && _b !== void 0 ? _b : (this.transform = Viewport.transformBy(Mat33.identity));
+            (_d = this.transform) !== null && _d !== void 0 ? _d : (this.transform = Viewport.transformBy(Mat33.identity));
             this.editor.display.setDraftMode(true);
         }
         return handlingGesture;
     }
     updateVelocity(currentCenter) {
         const deltaPos = currentCenter.minus(this.lastScreenCenter);
-        const deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
-        // We divide by deltaTime. Don't divide by zero.
-        if (deltaTime === 0) {
-            return;
-        }
+        let deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
         // Ignore duplicate events, unless there has been enough time between them.
         if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
             return;
         }
+        // We divide by deltaTime. Don't divide by zero.
+        if (deltaTime === 0) {
+            return;
+        }
+        // Don't divide by almost zero, either
+        deltaTime = Math.max(deltaTime, 0.01);
         const currentVelocity = deltaPos.times(1 / deltaTime);
         let smoothedVelocity = currentVelocity;
         if (this.velocity) {
@@ -184,12 +196,26 @@ export default class PanZoom extends BaseTool {
             this.transform = null;
             this.velocity = Vec2.zero;
         };
-        const shouldInertialScroll = event.current.device === PointerDevice.Touch && event.allPointers.length === 1;
+        const minInertialScrollDt = 30;
+        const shouldInertialScroll = event.current.device === PointerDevice.Touch
+            && event.allPointers.length === 1
+            && this.velocity !== null
+            && event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
         if (shouldInertialScroll && this.velocity !== null) {
+            const oldVelocity = this.velocity;
             // If the user drags the screen, then stops, then lifts the pointer,
             // we want the final velocity to reflect the stop at the end (so the velocity
             // should be near zero). Handle this:
             this.updateVelocity(event.current.screenPos);
+            // Work around an input issue. Some devices that disable the touchscreen when a stylus
+            // comes near the screen fire a touch-end event at the position of the stylus when a
+            // touch gesture is canceled. Because the stylus is often far away from the last touch,
+            // this causes a great displacement between the second-to-last (from the touchscreen) and
+            // last (from the pen that is now near the screen) events. Only allow velocity to decrease
+            // to work around this:
+            if (oldVelocity.magnitude() < this.velocity.magnitude()) {
+                this.velocity = oldVelocity;
+            }
             // Cancel any ongoing inertial scrolling.
             (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
             this.inertialScroller = new InertialScroller(this.velocity, (scrollDelta) => {

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.2",
+	"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",
@@ -83,26 +83,26 @@
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.2.3",
+		"@types/jest": "^29.2.5",
 		"@types/jsdom": "^20.0.1",
-		"@types/node": "^18.11.9",
+		"@types/node": "^18.11.18",
 		"@typescript-eslint/eslint-plugin": "^5.44.0",
 		"@typescript-eslint/parser": "^5.44.0",
-		"css-loader": "^6.7.2",
-		"eslint": "^8.28.0",
-		"husky": "^8.0.2",
-		"jest": "^29.2.3",
+		"css-loader": "^6.7.3",
+		"eslint": "^8.31.0",
+		"husky": "^8.0.3",
+		"jest": "^29.3.1",
 		"jest-environment-jsdom": "^29.3.1",
 		"jsdom": "^20.0.3",
-		"lint-staged": "^13.0.3",
+		"lint-staged": "^13.1.0",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.1",
 		"terser-webpack-plugin": "^5.3.6",
 		"ts-jest": "^29.0.3",
-		"ts-loader": "^9.4.1",
+		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.21",
-		"typescript": "^4.9.3",
+		"typedoc": "^0.23.23",
+		"typescript": "^4.9.4",
 		"webpack": "^5.75.0"
 	},
 	"bugs": {

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;
+}