js-draw 0.18.1 → 0.19.0

package/dist/mjs/src/tools/ToolSwitcherShortcut.mjs

@@ -0,0 +1,32 @@
+import  BaseTool  from './BaseTool.mjs';
+/**
+ * Handles keyboard events used, by default, to select tools. By default,
+ * 1 maps to the first primary tool, 2 to the second primary tool, ... .
+ *
+ * This is in the default set of {@link ToolController} tools.
+ *
+ * @deprecated This may be replaced in the future.
+ */
+export default class ToolSwitcherShortcut extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.editor = editor;
+    }
+    // @internal
+    onKeyPress({ key }) {
+        const toolController = this.editor.toolController;
+        const primaryTools = toolController.getPrimaryTools();
+        // Map keys 0-9 to primary tools.
+        const keyMatch = /^[0-9]$/.exec(key);
+        let targetTool;
+        if (keyMatch) {
+            const targetIdx = parseInt(keyMatch[0], 10) - 1;
+            targetTool = primaryTools[targetIdx];
+        }
+        if (targetTool) {
+            targetTool.setEnabled(true);
+            return true;
+        }
+        return false;
+    }
+}

package/dist/mjs/src/tools/ToolbarShortcutHandler.d.ts

@@ -0,0 +1,12 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+type KeyPressListener = (event: KeyPressEvent) => boolean;
+export default class ToolbarShortcutHandler extends BaseTool {
+    private listeners;
+    constructor(editor: Editor);
+    registerListener(listener: KeyPressListener): void;
+    removeListener(listener: KeyPressListener): void;
+    onKeyPress(event: KeyPressEvent): boolean;
+}
+export {};

package/dist/mjs/src/tools/ToolbarShortcutHandler.mjs

@@ -0,0 +1,23 @@
+// Allows the toolbar to register keyboard events.
+// @packageDocumentation
+import  BaseTool  from './BaseTool.mjs';
+export default class ToolbarShortcutHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.listeners = new Set([]);
+    }
+    registerListener(listener) {
+        this.listeners.add(listener);
+    }
+    removeListener(listener) {
+        this.listeners.delete(listener);
+    }
+    onKeyPress(event) {
+        for (const listener of this.listeners) {
+            if (listener(event)) {
+                return true;
+            }
+        }
+        return false;
+    }
+}

package/dist/mjs/src/tools/UndoRedoShortcut.d.ts

@@ -0,0 +1,8 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+export default class UndoRedoShortcut extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
+}

package/dist/mjs/src/tools/UndoRedoShortcut.mjs

@@ -0,0 +1,22 @@
+import  BaseTool  from './BaseTool.mjs';
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
+export default class UndoRedoShortcut extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.undoRedoTool);
+        this.editor = editor;
+    }
+    // @internal
+    onKeyPress({ key, ctrlKey }) {
+        if (ctrlKey) {
+            if (key === 'z') {
+                this.editor.history.undo();
+                return true;
+            }
+            else if (key === 'Z') {
+                this.editor.history.redo();
+                return true;
+            }
+        }
+        return false;
+    }
+}

package/dist/mjs/src/tools/lib.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @packageDocumentation
+ */
+export { default as BaseTool } from './BaseTool';
+export { default as ToolController } from './ToolController';
+export { default as ToolEnabledGroup } from './ToolEnabledGroup';
+export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
+export { default as PanZoomTool, PanZoomMode } from './PanZoom';
+export { default as PenTool, PenStyle } from './Pen';
+export { default as TextTool } from './TextTool';
+export { default as SelectionTool } from './SelectionTool/SelectionTool';
+export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
+export { default as EraserTool } from './Eraser';
+export { default as PasteHandler } from './PasteHandler';
+export { default as SoundUITool } from './SoundUITool';
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/dist/mjs/src/tools/lib.mjs

@@ -0,0 +1,17 @@
+/**
+ * @packageDocumentation
+ */
+export  { default as BaseTool }  from './BaseTool.mjs';
+export  { default as ToolController }  from './ToolController.mjs';
+export  { default as ToolEnabledGroup }  from './ToolEnabledGroup.mjs';
+export  { default as UndoRedoShortcut }  from './UndoRedoShortcut.mjs';
+export  { default as ToolSwitcherShortcut }  from './ToolSwitcherShortcut.mjs';
+export  { default as PanZoomTool, PanZoomMode }  from './PanZoom.mjs';
+export  { default as PenTool }  from './Pen.mjs';
+export  { default as TextTool }  from './TextTool.mjs';
+export  { default as SelectionTool }  from './SelectionTool/SelectionTool.mjs';
+export  { default as SelectAllShortcutHandler }  from './SelectionTool/SelectAllShortcutHandler.mjs';
+export  { default as EraserTool }  from './Eraser.mjs';
+export  { default as PasteHandler }  from './PasteHandler.mjs';
+export  { default as SoundUITool }  from './SoundUITool.mjs';
+export  { default as ToolbarShortcutHandler }  from './ToolbarShortcutHandler.mjs';

package/dist/mjs/src/tools/localization.d.ts

@@ -0,0 +1,31 @@
+export interface ToolLocalization {
+    keyboardPanZoom: string;
+    penTool: (penId: number) => string;
+    selectionTool: string;
+    selectAllTool: string;
+    eraserTool: string;
+    touchPanTool: string;
+    twoFingerPanZoomTool: string;
+    undoRedoTool: string;
+    pipetteTool: string;
+    rightClickDragPanTool: string;
+    textTool: string;
+    enterTextToInsert: string;
+    changeTool: string;
+    pasteHandler: string;
+    soundExplorer: string;
+    disableAccessibilityExploreTool: string;
+    enableAccessibilityExploreTool: string;
+    findLabel: string;
+    toNextMatch: string;
+    closeFindDialog: string;
+    findDialogShown: string;
+    findDialogHidden: string;
+    focusedFoundText: (currentMatchNumber: number, totalMatches: number) => string;
+    anyDevicePanning: string;
+    copied: (count: number, description: string) => string;
+    pasted: (count: number, description: string) => string;
+    toolEnabledAnnouncement: (toolName: string) => string;
+    toolDisabledAnnouncement: (toolName: string) => string;
+}
+export declare const defaultToolLocalization: ToolLocalization;

package/dist/mjs/src/tools/localization.mjs

@@ -0,0 +1,30 @@
+export const defaultToolLocalization = {
+    penTool: (penId) => `Pen ${penId}`,
+    selectionTool: 'Selection',
+    selectAllTool: 'Select all shortcut',
+    eraserTool: 'Eraser',
+    touchPanTool: 'Touch panning',
+    twoFingerPanZoomTool: 'Panning and zooming',
+    undoRedoTool: 'Undo/Redo',
+    rightClickDragPanTool: 'Right-click drag',
+    pipetteTool: 'Pick color from screen',
+    keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
+    textTool: 'Text',
+    enterTextToInsert: 'Text to insert',
+    changeTool: 'Change tool',
+    pasteHandler: 'Copy paste handler',
+    soundExplorer: 'Sound-based image exploration',
+    disableAccessibilityExploreTool: 'Disable sound-based exploration',
+    enableAccessibilityExploreTool: 'Enable sound-based exploration',
+    findLabel: 'Find',
+    toNextMatch: 'Next',
+    closeFindDialog: 'Close',
+    findDialogShown: 'Find dialog shown',
+    findDialogHidden: 'Find dialog hidden',
+    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
+    anyDevicePanning: 'Any device panning',
+    copied: (count, description) => `Copied ${count} ${description}`,
+    pasted: (count, description) => `Pasted ${count} ${description}`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
+};

package/dist/mjs/src/types.d.ts

@@ -0,0 +1,151 @@
+import EventDispatcher from './EventDispatcher';
+import Mat33 from './math/Mat33';
+import { Point2, Vec2 } from './math/Vec2';
+import Vec3 from './math/Vec3';
+import BaseTool from './tools/BaseTool';
+import AbstractComponent from './components/AbstractComponent';
+import Rect2 from './math/Rect2';
+import Pointer from './Pointer';
+import Color4 from './Color4';
+import Command from './commands/Command';
+import BaseWidget from './toolbar/widgets/BaseWidget';
+export interface PointerEvtListener {
+    onPointerDown(event: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(): void;
+}
+export declare enum InputEvtType {
+    PointerDownEvt = 0,
+    PointerMoveEvt = 1,
+    PointerUpEvt = 2,
+    GestureCancelEvt = 3,
+    WheelEvt = 4,
+    KeyPressEvent = 5,
+    KeyUpEvent = 6,
+    CopyEvent = 7,
+    PasteEvent = 8
+}
+export interface WheelEvt {
+    readonly kind: InputEvtType.WheelEvt;
+    readonly delta: Vec3;
+    readonly screenPos: Point2;
+}
+export interface KeyPressEvent {
+    readonly kind: InputEvtType.KeyPressEvent;
+    readonly key: string;
+    readonly ctrlKey: boolean | undefined;
+    readonly altKey: boolean | undefined;
+}
+export interface KeyUpEvent {
+    readonly kind: InputEvtType.KeyUpEvent;
+    readonly key: string;
+    readonly ctrlKey: boolean | undefined;
+    readonly altKey: boolean | undefined;
+}
+export interface CopyEvent {
+    readonly kind: InputEvtType.CopyEvent;
+    setData(mime: string, data: string): void;
+}
+export interface PasteEvent {
+    readonly kind: InputEvtType.PasteEvent;
+    readonly data: string;
+    readonly mime: string;
+}
+export interface GestureCancelEvt {
+    readonly kind: InputEvtType.GestureCancelEvt;
+}
+interface PointerEvtBase {
+    readonly current: Pointer;
+    readonly allPointers: Pointer[];
+}
+export interface PointerDownEvt extends PointerEvtBase {
+    readonly kind: InputEvtType.PointerDownEvt;
+}
+export interface PointerMoveEvt extends PointerEvtBase {
+    readonly kind: InputEvtType.PointerMoveEvt;
+}
+export interface PointerUpEvt extends PointerEvtBase {
+    readonly kind: InputEvtType.PointerUpEvt;
+}
+export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
+export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
+export declare enum EditorEventType {
+    ToolEnabled = 0,
+    ToolDisabled = 1,
+    ToolUpdated = 2,
+    UndoRedoStackUpdated = 3,
+    CommandDone = 4,
+    CommandUndone = 5,
+    ObjectAdded = 6,
+    ViewportChanged = 7,
+    DisplayResized = 8,
+    ColorPickerToggled = 9,
+    ColorPickerColorSelected = 10,
+    ToolbarDropdownShown = 11
+}
+export declare enum UndoEventType {
+    CommandDone = 0,
+    CommandUndone = 1,
+    CommandRedone = 2
+}
+type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
+export interface EditorToolEvent {
+    readonly kind: EditorToolEventType;
+    readonly tool: BaseTool;
+}
+export interface EditorObjectEvent {
+    readonly kind: EditorEventType.ObjectAdded;
+    readonly object: AbstractComponent;
+}
+export interface EditorViewportChangedEvent {
+    readonly kind: EditorEventType.ViewportChanged;
+    readonly newTransform: Mat33;
+    readonly oldTransform: Mat33;
+}
+export interface DisplayResizedEvent {
+    readonly kind: EditorEventType.DisplayResized;
+    readonly newSize: Vec2;
+}
+export interface EditorUndoStackUpdated {
+    readonly kind: EditorEventType.UndoRedoStackUpdated;
+    readonly undoStackSize: number;
+    readonly redoStackSize: number;
+    readonly command?: Command;
+    readonly stackUpdateType: UndoEventType;
+}
+export interface CommandDoneEvent {
+    readonly kind: EditorEventType.CommandDone;
+    readonly command: Command;
+}
+export interface CommandUndoneEvent {
+    readonly kind: EditorEventType.CommandUndone;
+    readonly command: Command;
+}
+export interface ColorPickerToggled {
+    readonly kind: EditorEventType.ColorPickerToggled;
+    readonly open: boolean;
+}
+export interface ColorPickerColorSelected {
+    readonly kind: EditorEventType.ColorPickerColorSelected;
+    readonly color: Color4;
+}
+export interface ToolbarDropdownShownEvent {
+    readonly kind: EditorEventType.ToolbarDropdownShown;
+    readonly parentWidget: BaseWidget;
+}
+export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
+export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null | void;
+export type ComponentAddedListener = (component: AbstractComponent) => Promise<void> | void;
+export type OnDetermineExportRectListener = (exportRect: Rect2) => void;
+export interface ImageLoader {
+    start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
+}
+export interface StrokeDataPoint {
+    pos: Point2;
+    width: number;
+    time: number;
+    color: Color4;
+}
+export {};

package/dist/mjs/src/types.mjs

@@ -0,0 +1,35 @@
+// Types related to the image editor
+export var InputEvtType;
+(function (InputEvtType) {
+    InputEvtType[InputEvtType["PointerDownEvt"] = 0] = "PointerDownEvt";
+    InputEvtType[InputEvtType["PointerMoveEvt"] = 1] = "PointerMoveEvt";
+    InputEvtType[InputEvtType["PointerUpEvt"] = 2] = "PointerUpEvt";
+    InputEvtType[InputEvtType["GestureCancelEvt"] = 3] = "GestureCancelEvt";
+    InputEvtType[InputEvtType["WheelEvt"] = 4] = "WheelEvt";
+    InputEvtType[InputEvtType["KeyPressEvent"] = 5] = "KeyPressEvent";
+    InputEvtType[InputEvtType["KeyUpEvent"] = 6] = "KeyUpEvent";
+    InputEvtType[InputEvtType["CopyEvent"] = 7] = "CopyEvent";
+    InputEvtType[InputEvtType["PasteEvent"] = 8] = "PasteEvent";
+})(InputEvtType || (InputEvtType = {}));
+export var EditorEventType;
+(function (EditorEventType) {
+    EditorEventType[EditorEventType["ToolEnabled"] = 0] = "ToolEnabled";
+    EditorEventType[EditorEventType["ToolDisabled"] = 1] = "ToolDisabled";
+    EditorEventType[EditorEventType["ToolUpdated"] = 2] = "ToolUpdated";
+    EditorEventType[EditorEventType["UndoRedoStackUpdated"] = 3] = "UndoRedoStackUpdated";
+    EditorEventType[EditorEventType["CommandDone"] = 4] = "CommandDone";
+    EditorEventType[EditorEventType["CommandUndone"] = 5] = "CommandUndone";
+    EditorEventType[EditorEventType["ObjectAdded"] = 6] = "ObjectAdded";
+    EditorEventType[EditorEventType["ViewportChanged"] = 7] = "ViewportChanged";
+    EditorEventType[EditorEventType["DisplayResized"] = 8] = "DisplayResized";
+    EditorEventType[EditorEventType["ColorPickerToggled"] = 9] = "ColorPickerToggled";
+    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 10] = "ColorPickerColorSelected";
+    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 11] = "ToolbarDropdownShown";
+})(EditorEventType || (EditorEventType = {}));
+// Types of `EditorUndoStackUpdated` events.
+export var UndoEventType;
+(function (UndoEventType) {
+    UndoEventType[UndoEventType["CommandDone"] = 0] = "CommandDone";
+    UndoEventType[UndoEventType["CommandUndone"] = 1] = "CommandUndone";
+    UndoEventType[UndoEventType["CommandRedone"] = 2] = "CommandRedone";
+})(UndoEventType || (UndoEventType = {}));

package/dist/mjs/src/util/assertions.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Compile-time assertion that a branch of code is unreachable.
+ * @internal
+ */
+export declare const assertUnreachable: (key: never) => never;
+/**
+ * Throws an exception if the typeof given value is not a number or `value` is NaN.
+ *
+ * @example
+ * ```ts
+ * const foo: unknown = 3;
+ * assertIsNumber(foo);
+ *
+ * assertIsNumber('hello, world'); // throws an Error.
+ * ```
+ *
+ *
+ */
+export declare const assertIsNumber: (value: any, allowNaN?: boolean) => value is number;
+/**
+ * Throws if any of `values` is not of type number.
+ */
+export declare const assertIsNumberArray: (values: any[], allowNaN?: boolean) => values is number[];

package/dist/mjs/src/util/assertions.mjs

@@ -0,0 +1,45 @@
+/**
+ * Compile-time assertion that a branch of code is unreachable.
+ * @internal
+ */
+export const assertUnreachable = (key) => {
+    // See https://stackoverflow.com/a/39419171/17055750
+    throw new Error(`Should be unreachable. Key: ${key}.`);
+};
+/**
+ * Throws an exception if the typeof given value is not a number or `value` is NaN.
+ *
+ * @example
+ * ```ts
+ * const foo: unknown = 3;
+ * assertIsNumber(foo);
+ *
+ * assertIsNumber('hello, world'); // throws an Error.
+ * ```
+ *
+ *
+ */
+export const assertIsNumber = (value, allowNaN = false) => {
+    if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
+        throw new Error('Given value is not a number');
+        // return false;
+    }
+    return true;
+};
+/**
+ * Throws if any of `values` is not of type number.
+ */
+export const assertIsNumberArray = (values, allowNaN = false) => {
+    if (typeof values !== 'object') {
+        throw new Error('Asserting isNumberArray: Given entity is not an array');
+    }
+    if (!assertIsNumber(values['length'])) {
+        return false;
+    }
+    for (const value of values) {
+        if (!assertIsNumber(value, allowNaN)) {
+            return false;
+        }
+    }
+    return true;
+};

package/dist/mjs/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/mjs/src/util/fileToBase64.mjs

@@ -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/mjs/src/util/untilNextAnimationFrame.d.ts

@@ -0,0 +1,3 @@
+/** @internal */
+declare const untilNextAnimationFrame: () => Promise<void>;
+export default untilNextAnimationFrame;

package/dist/mjs/src/util/untilNextAnimationFrame.mjs

@@ -0,0 +1,7 @@
+/** @internal */
+const untilNextAnimationFrame = () => {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => resolve());
+    });
+};
+export default untilNextAnimationFrame;

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

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

package/dist/mjs/src/util/waitForTimeout.mjs

@@ -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,12 +1,12 @@
 {
 	"name": "js-draw",
-	"version": "0.18.1",
+	"version": "0.19.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
-	"types": "./dist/cjs/src/lib.d.ts",
+	"types": "./dist/mjs/src/lib.d.ts",
 	"main": "./dist/cjs/src/lib.js",
 	"exports": {
 		".": {
-			"types": "./dist/cjs/src/lib.d.ts",
+			"types": "./dist/mjs/src/lib.d.ts",
 			"import": "./dist/mjs/src/lib.mjs",
 			"require": "./dist/cjs/src/lib.js"
 		},
@@ -20,6 +20,9 @@
 			"types": "./dist/mjs/src/bundle/bundled.d.ts",
 			"default": "./dist/bundle.js"
 		},
+		"./bundledStyles": {
+			"default": "./dist/bundledStyles.js"
+		},
 		"./Editor": {
 			"types": "./dist/mjs/src/Editor.d.ts",
 			"default": "./dist/mjs/src/Editor.mjs"
@@ -79,7 +82,6 @@
 		"postpack": "pinst --enable"
 	},
 	"dependencies": {
-		"@babel/runtime": "^7.21.0",
 		"@melloware/coloris": "^0.18.0",
 		"bezier-js": "^6.1.3"
 	},

package/src/Editor.css

@@ -0,0 +1,86 @@
+
+@import url('./toolbar/toolbar.css');
+@import url('./tools/tools.css');
+
+.imageEditorContainer {
+	/* Deafult colors for the editor */
+    --primary-background-color: white;
+    --primary-background-color-transparent: rgba(255, 255, 255, 0.5);
+    --secondary-background-color: #faf;
+    --primary-foreground-color: black;
+    --secondary-foreground-color: black;
+	--primary-shadow-color: rgba(0, 0, 0, 0.5);
+}
+
+@media (prefers-color-scheme: dark) {
+	.imageEditorContainer {
+		--primary-background-color: #151515;
+		--primary-background-color-transparent: rgba(50, 50, 50, 0.5);
+		--secondary-background-color: #607;
+		--primary-foreground-color: white;
+		--secondary-foreground-color: white;
+		--primary-shadow-color: rgba(250, 250, 250, 0.5);
+	}
+}
+
+.imageEditorContainer {
+	color: var(--primary-foreground-color);
+	font-family: system-ui, -apple-system, sans-serif;
+	background-color: var(--primary-background-color);
+
+	display: flex;
+	flex-direction: column-reverse;
+}
+
+.imageEditorContainer .imageEditorRenderArea {
+	display: grid;
+	grid-template-columns: 1fr;
+	flex-grow: 2;
+	flex-shrink: 1;
+	min-height: 100px;
+}
+
+.imageEditorContainer .imageEditorRenderArea canvas {
+	/* Stack all canvases on top of each other */
+	grid-row: 1 / 1;
+	grid-column: 1 / 1;
+	touch-action: none;
+
+	/* Fill the container */
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+
+	/* Allow the canvas to shrink (needed in Chrome) */
+	min-height: 0px;
+	max-height: inherit;
+}
+
+.imageEditorContainer .loadingMessage {
+	position: fixed;
+	text-align: center;
+	font-size: 2em;
+
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.imageEditorContainer .accessibilityAnnouncement {
+	opacity: 0;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	pointer-events: none;
+}
+
+.imageEditorContainer .textRendererOutputContainer {
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
+.imageEditorContainer .textRendererOutputContainer:focus-within {
+	overflow: visible;
+	z-index: 5;
+}

package/src/styles.js

@@ -0,0 +1,7 @@
+/**
+ * Applies the editor's styles to the document.
+ * @packageDocumentation
+ */
+
+import './Editor.css';
+import '@melloware/coloris/dist/coloris.css';