js-draw 0.18.2 → 0.19.0

package/dist/mjs/src/tools/SoundUITool.mjs

@@ -0,0 +1,158 @@
+import  Color4  from '../Color4.mjs';
+import  LineSegment2  from '../math/LineSegment2.mjs';
+import  BaseTool  from './BaseTool.mjs';
+class SoundFeedback {
+    constructor() {
+        this.closed = false;
+        // No AudioContext? Exit!
+        if (!window.AudioContext) {
+            console.warn('Accessibility sound UI: Unable to open AudioContext.');
+            this.closed = true;
+            return;
+        }
+        this.ctx = new AudioContext();
+        // Color oscillator and gain
+        this.colorOscHue = this.ctx.createOscillator();
+        this.colorOscValue = this.ctx.createOscillator();
+        this.colorOscSaturation = this.ctx.createOscillator();
+        this.colorOscHue.type = 'triangle';
+        this.colorOscSaturation.type = 'sine';
+        this.colorOscValue.type = 'sawtooth';
+        this.valueGain = this.ctx.createGain();
+        this.colorOscValue.connect(this.valueGain);
+        this.valueGain.gain.setValueAtTime(0.18, this.ctx.currentTime);
+        this.colorGain = this.ctx.createGain();
+        this.colorOscHue.connect(this.colorGain);
+        this.valueGain.connect(this.colorGain);
+        this.colorOscSaturation.connect(this.colorGain);
+        this.colorGain.connect(this.ctx.destination);
+        // Boundary oscillator and gain
+        this.boundaryGain = this.ctx.createGain();
+        this.boundaryOsc = this.ctx.createOscillator();
+        this.boundaryOsc.type = 'sawtooth';
+        this.boundaryGain.gain.setValueAtTime(0, this.ctx.currentTime);
+        this.boundaryOsc.connect(this.boundaryGain);
+        this.boundaryGain.connect(this.ctx.destination);
+        // Prepare for the first announcement/feedback.
+        this.colorOscHue.start();
+        this.colorOscSaturation.start();
+        this.colorOscValue.start();
+        this.boundaryOsc.start();
+        this.pause();
+    }
+    pause() {
+        if (this.closed)
+            return;
+        this.colorGain.gain.setValueAtTime(0, this.ctx.currentTime);
+        void this.ctx.suspend();
+    }
+    play() {
+        if (this.closed)
+            return;
+        void this.ctx.resume();
+    }
+    setColor(color) {
+        const hsv = color.asHSV();
+        // Choose frequencies that roughly correspond to hue, saturation, and value.
+        const hueFrequency = (-Math.cos(hsv.x / 2)) * 220 + 440;
+        const saturationFrequency = hsv.y * 440 + 220;
+        const valueFrequency = (hsv.z + 0.1) * 440;
+        // Sigmoid with maximum 0.25 * alpha.
+        // Louder for greater value.
+        const gain = 0.25 * Math.min(1, color.a) / (1 + Math.exp(-(hsv.z - 0.5) * 3));
+        this.colorOscHue.frequency.setValueAtTime(hueFrequency, this.ctx.currentTime);
+        this.colorOscSaturation.frequency.setValueAtTime(saturationFrequency, this.ctx.currentTime);
+        this.colorOscValue.frequency.setValueAtTime(valueFrequency, this.ctx.currentTime);
+        this.valueGain.gain.setValueAtTime((1 - hsv.z) * 0.4, this.ctx.currentTime);
+        this.colorGain.gain.setValueAtTime(gain, this.ctx.currentTime);
+    }
+    announceBoundaryCross(boundaryCrossCount) {
+        this.boundaryGain.gain.cancelScheduledValues(this.ctx.currentTime);
+        this.boundaryGain.gain.setValueAtTime(0, this.ctx.currentTime);
+        this.boundaryGain.gain.linearRampToValueAtTime(0.01, this.ctx.currentTime + 0.1);
+        this.boundaryOsc.frequency.setValueAtTime(440 + Math.atan(boundaryCrossCount / 2) * 100, this.ctx.currentTime);
+        this.boundaryGain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.25);
+    }
+    close() {
+        this.ctx.close();
+        this.closed = true;
+    }
+}
+/**
+ * This tool, when enabled, plays a sound representing the color of the portion of the display
+ * currently under the cursor. This tool adds a button that can be navigated to with the tab key
+ * that enables/disables the tool.
+ *
+ * This allows the user to explore the content of the display without a working screen.
+ */
+export default class SoundUITool extends BaseTool {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.soundFeedback = null;
+        // Create a screen-reader-usable method of toggling the tool:
+        this.toggleButtonContainer = document.createElement('div');
+        this.toggleButtonContainer.classList.add('js-draw-sound-ui-toggle');
+        this.toggleButton = document.createElement('button');
+        this.toggleButton.onclick = () => {
+            this.setEnabled(!this.isEnabled());
+        };
+        this.toggleButtonContainer.appendChild(this.toggleButton);
+        this.updateToggleButtonText();
+        editor.createHTMLOverlay(this.toggleButtonContainer);
+    }
+    updateToggleButtonText() {
+        const containerEnabledClass = 'sound-ui-tool-enabled';
+        if (this.isEnabled()) {
+            this.toggleButton.innerText = this.editor.localization.disableAccessibilityExploreTool;
+            this.toggleButtonContainer.classList.add(containerEnabledClass);
+        }
+        else {
+            this.toggleButton.innerText = this.editor.localization.enableAccessibilityExploreTool;
+            this.toggleButtonContainer.classList.remove(containerEnabledClass);
+        }
+    }
+    setEnabled(enabled) {
+        var _a;
+        super.setEnabled(enabled);
+        if (!enabled) {
+            (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.close();
+            this.soundFeedback = null;
+        }
+        this.updateToggleButtonText();
+    }
+    onPointerDown({ current, allPointers }) {
+        var _a, _b, _c;
+        if (!this.soundFeedback) {
+            this.soundFeedback = new SoundFeedback();
+        }
+        // Allow two-finger gestures to move the screen.
+        if (allPointers.length >= 2) {
+            return false;
+        }
+        // Accept multiple cursors -- some screen readers require multiple (touch) pointers to interact with
+        // an image instead of using the built-in navigation features.
+        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.play();
+        (_b = this.soundFeedback) === null || _b === void 0 ? void 0 : _b.setColor((_c = this.editor.display.getColorAt(current.screenPos)) !== null && _c !== void 0 ? _c : Color4.black);
+        this.lastPointerPos = current.canvasPos;
+        return true;
+    }
+    onPointerMove({ current }) {
+        var _a, _b, _c;
+        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.setColor((_b = this.editor.display.getColorAt(current.screenPos)) !== null && _b !== void 0 ? _b : Color4.black);
+        const pointerMotionLine = new LineSegment2(this.lastPointerPos, current.canvasPos);
+        const collisions = this.editor.image.getElementsIntersectingRegion(pointerMotionLine.bbox).filter(component => component.intersects(pointerMotionLine));
+        this.lastPointerPos = current.canvasPos;
+        if (collisions.length > 0) {
+            (_c = this.soundFeedback) === null || _c === void 0 ? void 0 : _c.announceBoundaryCross(collisions.length);
+        }
+    }
+    onPointerUp(_event) {
+        var _a;
+        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.pause();
+    }
+    onGestureCancel() {
+        var _a;
+        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.pause();
+    }
+}

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

@@ -3,7 +3,7 @@ import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
-import TextStyle from '../rendering/TextRenderingStyle';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
 export default class TextTool extends BaseTool {
     private editor;
     private localizationTable;
@@ -28,6 +28,6 @@ export default class TextTool extends BaseTool {
     setFontFamily(fontFamily: string): void;
     setColor(color: Color4): void;
     setFontSize(size: number): void;
-    getTextStyle(): TextStyle;
+    getTextStyle(): TextRenderingStyle;
     private setTextStyle;
 }

package/dist/mjs/src/tools/ToolController.mjs

@@ -14,6 +14,7 @@ import  ToolbarShortcutHandler  from './ToolbarShortcutHandler.mjs';
 import  { makePressureSensitiveFreehandLineBuilder }  from '../components/builders/PressureSensitiveFreehandLineBuilder.mjs';
 import  FindTool  from './FindTool.mjs';
 import  SelectAllShortcutHandler  from './SelectionTool/SelectAllShortcutHandler.mjs';
+import  SoundUITool  from './SoundUITool.mjs';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -32,10 +33,14 @@ export default class ToolController {
             new Eraser(editor, localization.eraserTool),
             new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),
-            new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning)
+            new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning),
         ];
+        // Accessibility tools
+        const soundExplorer = new SoundUITool(editor, localization.soundExplorer);
+        soundExplorer.setEnabled(false);
         this.tools = [
             new PipetteTool(editor, localization.pipetteTool),
+            soundExplorer,
             panZoomTool,
             ...primaryTools,
             keyboardPanZoomTool,

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

@@ -13,4 +13,5 @@ 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

@@ -13,4 +13,5 @@ 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

@@ -13,6 +13,9 @@ export interface ToolLocalization {
     enterTextToInsert: string;
     changeTool: string;
     pasteHandler: string;
+    soundExplorer: string;
+    disableAccessibilityExploreTool: string;
+    enableAccessibilityExploreTool: string;
     findLabel: string;
     toNextMatch: string;
     closeFindDialog: string;

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

@@ -13,6 +13,9 @@ export const defaultToolLocalization = {
     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',

package/package.json

@@ -1,12 +1,12 @@
 {
 	"name": "js-draw",
-	"version": "0.18.2",
+	"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

@@ -1,7 +1,6 @@
 
 @import url('./toolbar/toolbar.css');
-@import url('./tools/SelectionTool/SelectionTool.css');
-@import url('./tools/FindTool.css');
+@import url('./tools/tools.css');
 
 .imageEditorContainer {
 	/* Deafult colors for the editor */
@@ -83,4 +82,5 @@
 
 .imageEditorContainer .textRendererOutputContainer:focus-within {
 	overflow: visible;
+	z-index: 5;
 }

package/src/tools/SoundUITool.css

@@ -0,0 +1,15 @@
+
+.js-draw-sound-ui-toggle {
+	width: 0px;
+	height: 0px;
+	overflow: hidden;    
+}
+
+.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {
+	overflow: visible;
+	z-index: 5;
+}
+
+.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {
+	opacity: 0.5;
+}

package/src/tools/tools.css

@@ -0,0 +1,4 @@
+
+@import url(./SelectionTool/SelectionTool.css);
+@import url(./FindTool.css);
+@import url(./SoundUITool.css);

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,236 +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);
-}
-
-export { Color4 };

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