js-draw 0.17.4 → 0.18.1

package/dist/src/types.d.ts

@@ -1,151 +0,0 @@
-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/src/types.js

@@ -1,35 +0,0 @@
-// 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/src/util/assertions.d.ts

@@ -1,23 +0,0 @@
-/**
- * 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/src/util/assertions.js

@@ -1,45 +0,0 @@
-/**
- * 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/src/util/fileToBase64.d.ts

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

@@ -1,13 +0,0 @@
-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/untilNextAnimationFrame.d.ts

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

package/dist/src/util/untilNextAnimationFrame.js

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

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

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

package/dist/src/util/waitForTimeout.js

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

package/src/Color4.test.ts

@@ -1,40 +0,0 @@
-import Color4 from './Color4';
-
-describe('Color4', () => {
-	it('should convert to #RRGGBB-format hex strings (when no alpha)', () => {
-		expect(Color4.black.toHexString()).toBe('#000000');
-		expect(Color4.fromHex('#f0f').toHexString()).toBe('#f000f0');
-	});
-
-	it('should create #RRGGBBAA-format hex strings when there is an alpha component', () => {
-		expect(Color4.ofRGBA(1, 1, 1, 0.5).toHexString()).toBe('#ffffff80');
-	});
-
-	it('should parse rgb and rgba-format strings', () => {
-		expect(Color4.fromString('rgb(0, 0, 0)')).objEq(Color4.black);
-		expect(Color4.fromString('rgb ( 255, 0,\t 0)')).objEq(Color4.ofRGBA(1, 0, 0, 1));
-		expect(Color4.fromString('rgba ( 255, 0,\t 0, 0.5)')).objEq(Color4.ofRGBA(1, 0, 0, 0.5));
-		expect(Color4.fromString('rgba( 0, 0, 128, 0)')).objEq(Color4.ofRGBA(0, 0, 128/255, 0));
-	});
-
-	it('should mix blue and red to get dark purple', () => {
-		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 0, 1), 0.5)).objEq(Color4.ofRGB(0.5, 0, 0.5));
-		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 0, 1), 0.1)).objEq(Color4.ofRGB(0.9, 0, 0.1));
-	});
-
-	it('should mix red and green to get yellow', () => {
-		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.3)).objEq(
-			Color4.ofRGB(0.7, 0.3, 0)
-		);
-	});
-
-	it('should mix red with nothing and get red', () => {
-		expect(Color4.average([ Color4.red ])).objEq(Color4.red);
-	});
-
-	it('different colors should be different', () => {
-		expect(Color4.red.eq(Color4.red)).toBe(true);
-		expect(Color4.red.eq(Color4.green)).toBe(false);
-		expect(Color4.fromString('#ff000000').eq(Color4.transparent)).toBe(true);
-	});
-});

package/src/Color4.ts

@@ -1,234 +0,0 @@
-
-export default class Color4 {
-	private constructor(
-		/** Red component. Should be in the range [0, 1]. */
-		public readonly r: number,
-
-		/** Green component. `g` ∈ [0, 1] */
-		public readonly g: number,
-
-		/** Blue component. `b` ∈ [0, 1] */
-		public readonly b: number,
-
-		/** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
-		public readonly a: number
-	) {
-	}
-
-	/**
-	 * Create a color from red, green, blue components. The color is fully opaque (`a = 1.0`).
-	 * 
-	 * Each component should be in the range [0, 1].
-	 */
-	public static ofRGB(red: number, green: number, blue: number): Color4 {
-		return Color4.ofRGBA(red, green, blue, 1.0);
-	}
-
-	public static ofRGBA(red: number, green: number, blue: number, alpha: number): Color4 {
-		red = Math.max(0, Math.min(red, 1));
-		green = Math.max(0, Math.min(green, 1));
-		blue = Math.max(0, Math.min(blue, 1));
-		alpha = Math.max(0, Math.min(alpha, 1));
-
-		return new Color4(red, green, blue, alpha);
-	}
-
-	public static fromHex(hexString: string): Color4 {
-		// Remove starting '#' (if present)
-		hexString = (hexString.match(/^[#]?(.*)$/) ?? [])[1];
-		hexString = hexString.toUpperCase();
-
-		if (!hexString.match(/^[0-9A-F]+$/)) {
-			throw new Error(`${hexString} is not in a valid format.`);
-		}
-
-		// RGBA or RGB
-		if (hexString.length === 3 || hexString.length === 4) {
-			// Each character is a component
-			const components = hexString.split('');
-
-			// Convert to RRGGBBAA or RRGGBB format
-			hexString = components.map(component => `${component}0`).join('');
-		}
-
-		if (hexString.length === 6) {
-			// Alpha component
-			hexString += 'FF';
-		}
-
-		const components: number[] = [];
-		for (let i = 2; i <= hexString.length; i += 2) {
-			const chunk = hexString.substring(i - 2, i);
-			components.push(parseInt(chunk, 16) / 255);
-		}
-
-		if (components.length !== 4) {
-			throw new Error(`Unable to parse ${hexString}: Wrong number of components.`);
-		}
-
-		return Color4.ofRGBA(components[0], components[1], components[2], components[3]);
-	}
-
-	/** Like fromHex, but can handle additional colors if an `HTMLCanvasElement` is available. */
-	public static fromString(text: string): Color4 {
-		if (text.startsWith('#')) {
-			return Color4.fromHex(text);
-		} 
-		
-		if (text === 'none' || text === 'transparent') {
-			return Color4.transparent;
-		}
-
-		// rgba?: Match both rgb and rgba strings.
-		// ([,0-9.]+): Match any string of only numeric, '.' and ',' characters.
-		const rgbRegex = /^rgba?\(([,0-9.]+)\)$/i;
-		const rgbMatch = text.replace(/\s*/g, '').match(rgbRegex);
-
-		if (rgbMatch) {
-			const componentsListStr = rgbMatch[1];
-			const componentsList = JSON.parse(`[ ${componentsListStr} ]`);
-
-			if (componentsList.length === 3) {
-				return Color4.ofRGB(
-					componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255
-				);
-			} else if (componentsList.length === 4) {
-				return Color4.ofRGBA(
-					componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255, componentsList[3]
-				);
-			} else {
-				throw new Error(`RGB string, ${text}, has wrong number of components: ${componentsList.length}`);
-			}
-		}
-		
-		// Otherwise, try to use an HTMLCanvasElement to determine the color.
-		// Note: We may be unable to create an HTMLCanvasElement if running as a unit test.
-		const canvas = document.createElement('canvas');
-		canvas.width = 1;
-		canvas.height = 1;
-
-		const ctx = canvas.getContext('2d')!;
-		ctx.fillStyle = text;
-		ctx.fillRect(0, 0, 1, 1);
-
-		const data = ctx.getImageData(0, 0, 1, 1);
-		const red = data.data[0] / 255;
-		const green = data.data[1] / 255;
-		const blue = data.data[2] / 255;
-		const alpha = data.data[3] / 255;
-
-		return Color4.ofRGBA(red, green, blue, alpha);
-	}
-
-	/** @returns true if `this` and `other` are approximately equal. */
-	public eq(other: Color4|null|undefined): boolean {
-		if (other == null) {
-			return false;
-		}
-
-		// If both completely transparent,
-		if (this.a === 0 && other.a === 0) {
-			return true;
-		}
-
-		return this.toHexString() === other.toHexString();
-	}
-
-	/**
-	 * If `fractionTo` is not in the range [0, 1], it will be clamped to the nearest number
-	 * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
-	 * 
-	 * @returns a color `fractionTo` of the way from this color to `other`.
-	 * 
-	 * @example
-	 * ```ts
-	 * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
-	 * ```
-	 */
-	public mix(other: Color4, fractionTo: number): Color4 {
-		fractionTo = Math.min(Math.max(fractionTo, 0), 1);
-		const fractionOfThis = 1 - fractionTo;
-		return new Color4(
-			this.r * fractionOfThis + other.r * fractionTo,
-			this.g * fractionOfThis + other.g * fractionTo,
-			this.b * fractionOfThis + other.b * fractionTo,
-			this.a * fractionOfThis + other.a * fractionTo,
-		);
-	}
-
-	/**
-	 * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
-	 */
-	public static average(colors: Color4[]) {
-		let averageA = 0;
-		let averageR = 0;
-		let averageG = 0;
-		let averageB = 0;
-
-		for (const color of colors) {
-			averageA += color.a;
-			averageR += color.r;
-			averageG += color.g;
-			averageB += color.b;
-		}
-
-		if (colors.length > 0) {
-			averageA /= colors.length;
-			averageR /= colors.length;
-			averageG /= colors.length;
-			averageB /= colors.length;
-		}
-
-		return new Color4(averageR, averageG, averageB, averageA);
-	}
-
-	private hexString: string|null = null;
-
-	/**
-	 * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
-	 * 
-	 * @example
-	 * ```
-	 * Color4.red.toHexString(); // -> #ff0000ff
-	 * ```
-	 */
-	public toHexString(): string {
-		if (this.hexString) {
-			return this.hexString;
-		}
-
-		const componentToHex = (component: number): string => {
-			const res = Math.round(255 * component).toString(16);
-
-			if (res.length === 1) {
-				return `0${res}`;
-			}
-			return res;
-		};
-
-		const alpha = componentToHex(this.a);
-		const red = componentToHex(this.r);
-		const green = componentToHex(this.g);
-		const blue = componentToHex(this.b);
-		if (alpha === 'ff') {
-			return `#${red}${green}${blue}`;
-		}
-		this.hexString = `#${red}${green}${blue}${alpha}`;
-		return this.hexString;
-	}
-
-	public toString() {
-		return this.toHexString();
-	}
-
-	public static transparent = Color4.ofRGBA(0, 0, 0, 0);
-	public static red = Color4.ofRGB(1.0, 0.0, 0.0);
-	public static green = Color4.ofRGB(0.0, 1.0, 0.0);
-	public static blue = Color4.ofRGB(0.0, 0.0, 1.0);
-	public static purple = Color4.ofRGB(0.5, 0.2, 0.5);
-	public static yellow = Color4.ofRGB(1, 1, 0.1);
-	public static clay = Color4.ofRGB(0.8, 0.4, 0.2);
-	public static black = Color4.ofRGB(0, 0, 0);
-	public static gray = Color4.ofRGB(0.5, 0.5, 0.5);
-	public static white = Color4.ofRGB(1, 1, 1);
-}

package/src/Editor.css

@@ -1,86 +0,0 @@
-
-@import url('./toolbar/toolbar.css');
-@import url('./tools/SelectionTool/SelectionTool.css');
-@import url('./tools/FindTool.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;
-}

package/src/Editor.loadFrom.test.ts

@@ -1,24 +0,0 @@
-import Color4 from './Color4';
-import { imageBackgroundCSSClassName } from './components/ImageBackground';
-import { RestyleableComponent } from './lib';
-import SVGLoader from './SVGLoader';
-import createEditor from './testing/createEditor';
-
-describe('Editor.loadFrom', () => {
-	it('should remove existing BackgroundComponents when loading new BackgroundComponents', async () => {
-		const editor = createEditor();
-		await editor.dispatch(editor.setBackgroundColor(Color4.red));
-
-		let backgroundComponents = editor.image.getBackgroundComponents();
-		expect(backgroundComponents).toHaveLength(1);
-		expect((backgroundComponents[0] as RestyleableComponent).getStyle().color).objEq(Color4.red);
-
-		await editor.loadFrom(SVGLoader.fromString(`<svg viewBox='0 0 100 100'>
-			<path class='${imageBackgroundCSSClassName}' d='m0,0 L100,0 L100,100 L0,100 z' fill='#000'/>
-		</svg>`, true));
-
-		backgroundComponents = editor.image.getBackgroundComponents();
-		expect(backgroundComponents).toHaveLength(1);
-		expect((backgroundComponents[0] as RestyleableComponent).getStyle().color).objEq(Color4.black);
-	});
-});