js-draw 1.1.0 → 1.2.0

package/dist/cjs/util/adjustEditorThemeForContrast.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+/**
+ * Adjusts the current editor theme such that colors have appropriate contrast.
+ *
+ * As this method overrides CSS variables using the `.style` property,
+ * **assumes** all original theme variables are set using CSS and not the `.style` property.
+ *
+ * If the editor changes theme in response to the system theme, this method should be
+ * called whenever the system theme changes (e.g. by using [the `matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+ * method).
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, adjustEditorThemeForContrast } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * editor.addToolbar();
+ *
+ * const css = `
+ *   :root .imageEditorContainer {
+ *     --background-color-1: #ffff77;
+ *     --foreground-color-1: #fff;
+ *     --background-color-2: #ffff99;
+ *     --foreground-color-2: #ffff88;
+ *     --background-color-3: #ddffff;
+ *     --foreground-color-3: #eeffff;
+ *     --selection-background-color: #9f7;
+ *     --selection-foreground-color: #98f;
+ *   }
+ *
+ *   @media screen and (prefers-color-scheme: dark) {
+ *     :root .imageEditorContainer {
+ *       --background-color-1: black;
+ *     }
+ *   }
+ * `;
+ * editor.addStyleSheet(css);
+ *
+ * adjustEditorThemeForContrast(editor);
+ *
+ * // Because adjustEditorThemeForContrast overrides the current theme, it should be called again
+ * // to allow the editor to switch between light/dark themes.
+ * window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ *
+ * window.matchMedia('print').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ * ```
+ */
+const adjustEditorThemeForContrast = (editor) => {
+    const editorElem = editor.getRootElement();
+    // Each set of entries in colorPairs should resolve to colors with sufficient
+    // contrast.
+    const colorPairs = [
+        ['--background-color-1', '--foreground-color-1'],
+        ['--background-color-2', '--foreground-color-2'],
+        ['--background-color-3', '--foreground-color-3'],
+        ['--selection-background-color', '--selection-foreground-color'],
+    ];
+    // Clear any overrides
+    for (const [backgroundVar, foregroundVar] of colorPairs) {
+        editorElem.style.setProperty(backgroundVar, null);
+        editorElem.style.setProperty(foregroundVar, null);
+    }
+    const styles = getComputedStyle(editorElem);
+    const minContrast = 3;
+    for (const [backgroundVar, foregroundVar] of colorPairs) {
+        let color1 = math_1.Color4.fromString(styles.getPropertyValue(backgroundVar));
+        let color2 = math_1.Color4.fromString(styles.getPropertyValue(foregroundVar));
+        let swappedColors = false;
+        // Ensure that color1 has the lesser luminance
+        if (color1.relativeLuminance() < color2.relativeLuminance()) {
+            const tmp = color1;
+            color1 = color2;
+            color2 = tmp;
+            swappedColors = true;
+        }
+        let colorsUpdated = false;
+        let currentContrast = math_1.Color4.contrastRatio(color1, color2);
+        const iterations = 0;
+        while (currentContrast < minContrast && iterations < 5) {
+            const step = math_1.Vec3.of(0.1, 0.1, 0.1);
+            color1 = math_1.Color4.fromRGBVector(color1.rgb.plus(step));
+            color2 = math_1.Color4.fromRGBVector(color2.rgb.minus(step));
+            currentContrast = math_1.Color4.contrastRatio(color1, color2);
+            colorsUpdated = true;
+        }
+        if (colorsUpdated) {
+            const newBackground = swappedColors ? color2 : color1;
+            const newForeground = swappedColors ? color1 : color2;
+            editorElem.style.setProperty(foregroundVar, newForeground.toHexString());
+            editorElem.style.setProperty(backgroundVar, newBackground.toHexString());
+        }
+    }
+};
+exports.default = adjustEditorThemeForContrast;

package/dist/cjs/util/lib.d.ts

@@ -0,0 +1 @@
+export { default as adjustEditorThemeForContrast } from './adjustEditorThemeForContrast';

package/dist/cjs/util/lib.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adjustEditorThemeForContrast = void 0;
+var adjustEditorThemeForContrast_1 = require("./adjustEditorThemeForContrast");
+Object.defineProperty(exports, "adjustEditorThemeForContrast", { enumerable: true, get: function () { return __importDefault(adjustEditorThemeForContrast_1).default; } });

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.1.0',
+    number: '1.2.0',
 };

package/dist/mjs/Editor.d.ts

@@ -16,6 +16,7 @@ import KeyBinding from './shortcuts/KeyBinding';
 import AbstractToolbar from './toolbar/AbstractToolbar';
 import RenderablePathSpec from './rendering/RenderablePathSpec';
 import { AboutDialogEntry } from './dialogs/makeAboutDialog';
+/** Provides settings to an instance of an editor. See the Editor {@link Editor.constructor}. */
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;
@@ -27,9 +28,9 @@ export interface EditorSettings {
      * Defaults to true.
      */
     wheelEventsEnabled: boolean | 'only-if-focused';
-    /** Minimum zoom fraction (e.g. 0.5 → 50% zoom). */
+    /** Minimum zoom fraction (e.g. 0.5 → 50% zoom). Defaults to $2 \cdot 10^{-10}$. */
     minZoom: number;
-    /** Maximum zoom fraction (e.g. 2 → 200% zoom). */
+    /** Maximum zoom fraction (e.g. 2 → 200% zoom). Defaults to $1 \cdot 10^{12}$. */
     maxZoom: number;
     /**
      * Overrides for keyboard shortcuts. For example,
@@ -48,7 +49,7 @@ export interface EditorSettings {
      * See, for example, the `@js-draw/material-icons` package.
      *
      * @example
-     * ```ts
+     * ```ts,runnable
      * import * as jsdraw from 'js-draw';
      * import MaterialIconProvider from '@js-draw/material-icons';
      * import 'js-draw/styles';

package/dist/mjs/lib.d.ts

@@ -6,13 +6,18 @@
  * ```ts,runnable
  * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
  *
+ * // Use the Material Icon pack.
+ * import { MaterialIconProvider } from '@js-draw/material-icons';
+ *
  * // Apply js-draw CSS
  * import 'js-draw/styles';
  * // If your bundler doesn't support the above, try
  * // import 'js-draw/bundledStyles';
  *
  * (async () => {
- *   const editor = new Editor(document.body);
+ *   const editor = new Editor(document.body, {
+ *     iconProvider: new MaterialIconProvider(),
+ *   });
  *   const toolbar = editor.addToolbar();
  *
  *   // Increases the minimum height of the editor
@@ -22,8 +27,8 @@
  *   await editor.loadFromSVG(`
  *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
- *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
- *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
+ *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#aaa" class="js-draw-image-background"></path>
+ *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: #111;">Testing...</text>
  *       </svg>
  *   `);
  *
@@ -45,9 +50,10 @@
  * ```
  *
  * @see
- * {@link Editor}
- * {@link Editor.loadFromSVG}
- * {@link AbstractToolbar.addActionButton }
+ * - {@link Editor}
+ * - {@link Editor.loadFromSVG}
+ * - {@link AbstractToolbar.addActionButton }
+ * - {@link EditorSettings}
  *
  * @packageDocumentation
  */
@@ -70,13 +76,14 @@ export * from './shortcuts/lib';
 export { default as EventDispatcher } from './EventDispatcher';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as UndoRedoHistory } from './UndoRedoHistory';
+export * from './util/lib';
 export { default as __js_draw__version } from './version';
 import AbstractToolbar from './toolbar/AbstractToolbar';
-export { Editor, EditorSettings, AbstractToolbar, 
+export { Editor, EditorSettings, AbstractToolbar, };
 /**
  * Using the HTMLToolbar alias is deprecated. Use
  * `AbstractToolbar` instead.
  * @deprecated
  */
-AbstractToolbar as HTMLToolbar, };
+export { AbstractToolbar as HTMLToolbar };
 export default Editor;

package/dist/mjs/lib.mjs

@@ -6,13 +6,18 @@
  * ```ts,runnable
  * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
  *
+ * // Use the Material Icon pack.
+ * import { MaterialIconProvider } from '@js-draw/material-icons';
+ *
  * // Apply js-draw CSS
  * import 'js-draw/styles';
  * // If your bundler doesn't support the above, try
  * // import 'js-draw/bundledStyles';
  *
  * (async () => {
- *   const editor = new Editor(document.body);
+ *   const editor = new Editor(document.body, {
+ *     iconProvider: new MaterialIconProvider(),
+ *   });
  *   const toolbar = editor.addToolbar();
  *
  *   // Increases the minimum height of the editor
@@ -22,8 +27,8 @@
  *   await editor.loadFromSVG(`
  *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
- *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
- *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
+ *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#aaa" class="js-draw-image-background"></path>
+ *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: #111;">Testing...</text>
  *       </svg>
  *   `);
  *
@@ -45,9 +50,10 @@
  * ```
  *
  * @see
- * {@link Editor}
- * {@link Editor.loadFromSVG}
- * {@link AbstractToolbar.addActionButton }
+ * - {@link Editor}
+ * - {@link Editor.loadFromSVG}
+ * - {@link AbstractToolbar.addActionButton }
+ * - {@link EditorSettings}
  *
  * @packageDocumentation
  */
@@ -70,14 +76,15 @@ export  *  from './shortcuts/lib.mjs';
 export  { default as EventDispatcher }  from './EventDispatcher.mjs';
 export  { default as Pointer, PointerDevice }  from './Pointer.mjs';
 export  { default as UndoRedoHistory }  from './UndoRedoHistory.mjs';
+export  *  from './util/lib.mjs';
 // @internal
 export  { default as __js_draw__version }  from './version.mjs';
 import  AbstractToolbar  from './toolbar/AbstractToolbar.mjs';
-export { Editor, AbstractToolbar, 
+export { Editor, AbstractToolbar, };
 /**
  * Using the HTMLToolbar alias is deprecated. Use
  * `AbstractToolbar` instead.
  * @deprecated
  */
-AbstractToolbar as HTMLToolbar, };
+export { AbstractToolbar as HTMLToolbar };
 export default Editor;

package/dist/mjs/toolbar/DropdownToolbar.d.ts

@@ -2,6 +2,30 @@ import Editor from '../Editor';
 import { ToolbarLocalization } from './localization';
 import BaseWidget from './widgets/BaseWidget';
 import AbstractToolbar, { SpacerOptions } from './AbstractToolbar';
+/**
+ * @example
+ *
+ * ```ts,runnable
+ * import { makeDropdownToolbar, Editor } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeDropdownToolbar(editor);
+ * toolbar.addDefaults();
+ *
+ * toolbar.addExitButton(editor => {
+ *   // TODO
+ * });
+ *
+ * toolbar.addSaveButton(editor => {
+ *   // TODO
+ * });
+ * ```
+ *
+ * @see
+ * - {@link makeEdgeToolbar}
+ * - {@link AbstractToolbar.addSaveButton}
+ * - {@link AbstractToolbar.addExitButton}
+ */
 export declare const makeDropdownToolbar: (editor: Editor) => AbstractToolbar;
 export default class DropdownToolbar extends AbstractToolbar {
     protected container: HTMLElement;

package/dist/mjs/toolbar/DropdownToolbar.mjs

@@ -2,6 +2,30 @@ import  { defaultToolbarLocalization }  from './localization.mjs';
 import  OverflowWidget  from './widgets/OverflowWidget.mjs';
 import  AbstractToolbar  from './AbstractToolbar.mjs';
 import  { toolbarCSSPrefix }  from './constants.mjs';
+/**
+ * @example
+ *
+ * ```ts,runnable
+ * import { makeDropdownToolbar, Editor } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeDropdownToolbar(editor);
+ * toolbar.addDefaults();
+ *
+ * toolbar.addExitButton(editor => {
+ *   // TODO
+ * });
+ *
+ * toolbar.addSaveButton(editor => {
+ *   // TODO
+ * });
+ * ```
+ *
+ * @see
+ * - {@link makeEdgeToolbar}
+ * - {@link AbstractToolbar.addSaveButton}
+ * - {@link AbstractToolbar.addExitButton}
+ */
 export const makeDropdownToolbar = (editor) => {
     return new DropdownToolbar(editor, editor.getRootElement());
 };

package/dist/mjs/toolbar/EdgeToolbar.d.ts

@@ -2,6 +2,34 @@ import Editor from '../Editor';
 import { ToolbarLocalization } from './localization';
 import BaseWidget from './widgets/BaseWidget';
 import AbstractToolbar, { SpacerOptions } from './AbstractToolbar';
+/**
+ * Creates an `EdgeToolbar`.
+ *
+ * [Credit for the original design of this UI](https://www.figma.com/file/NA5F2AMWO3wUuaoDfUaAb8/Material-3-wireframes?type=design&node-id=54490%3A1103&mode=design&t=Ee0UwnPnQ2bNC2uM-1).
+ *
+ * @example
+ *
+ * ```ts,runnable
+ * import { makeEdgeToolbar, Editor } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeEdgeToolbar(editor);
+ * toolbar.addDefaults();
+ *
+ * toolbar.addSaveButton(editor => {
+ *   // TODO
+ * });
+ *
+ * toolbar.addExitButton(editor => {
+ *   // TODO
+ * });
+ * ```
+ *
+ * @see
+ * - {@link makeDropdownToolbar}
+ * - {@link AbstractToolbar.addSaveButton}
+ * - {@link AbstractToolbar.addExitButton}
+ */
 export declare const makeEdgeToolbar: (editor: Editor) => AbstractToolbar;
 export default class EdgeToolbar extends AbstractToolbar {
     private toolbarContainer;

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -4,6 +4,34 @@ import  EdgeToolbarLayoutManager  from './widgets/layout/EdgeToolbarLayoutManage
 import  { MutableReactiveValue, ReactiveValue }  from '../util/ReactiveValue.mjs';
 import  AbstractToolbar  from './AbstractToolbar.mjs';
 import  stopPropagationOfScrollingWheelEvents  from '../util/stopPropagationOfScrollingWheelEvents.mjs';
+/**
+ * Creates an `EdgeToolbar`.
+ *
+ * [Credit for the original design of this UI](https://www.figma.com/file/NA5F2AMWO3wUuaoDfUaAb8/Material-3-wireframes?type=design&node-id=54490%3A1103&mode=design&t=Ee0UwnPnQ2bNC2uM-1).
+ *
+ * @example
+ *
+ * ```ts,runnable
+ * import { makeEdgeToolbar, Editor } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeEdgeToolbar(editor);
+ * toolbar.addDefaults();
+ *
+ * toolbar.addSaveButton(editor => {
+ *   // TODO
+ * });
+ *
+ * toolbar.addExitButton(editor => {
+ *   // TODO
+ * });
+ * ```
+ *
+ * @see
+ * - {@link makeDropdownToolbar}
+ * - {@link AbstractToolbar.addSaveButton}
+ * - {@link AbstractToolbar.addExitButton}
+ */
 export const makeEdgeToolbar = (editor) => {
     return new EdgeToolbar(editor, editor.getRootElement(), editor.localization);
 };
@@ -45,12 +73,12 @@ export default class EdgeToolbar extends AbstractToolbar {
         this.sidebarY.onUpdateAndNow(y => {
             const belowEdgeClassName = 'dropdown-below-edge';
             if (y > 0) {
-                this.sidebarContainer.style.translate = `0 ${y}px`;
+                this.sidebarContainer.style.transform = `translate(0, ${y}px)`;
                 this.sidebarContainer.style.paddingBottom = '';
                 this.menuContainer.classList.add(belowEdgeClassName);
             }
             else {
-                this.sidebarContainer.style.translate = '';
+                this.sidebarContainer.style.transform = '';
                 this.sidebarContainer.style.paddingBottom = `${-y}px`;
                 this.menuContainer.classList.remove(belowEdgeClassName);
             }

package/dist/mjs/util/adjustEditorThemeForContrast.d.ts

@@ -0,0 +1,53 @@
+import Editor from '../Editor';
+/**
+ * Adjusts the current editor theme such that colors have appropriate contrast.
+ *
+ * As this method overrides CSS variables using the `.style` property,
+ * **assumes** all original theme variables are set using CSS and not the `.style` property.
+ *
+ * If the editor changes theme in response to the system theme, this method should be
+ * called whenever the system theme changes (e.g. by using [the `matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+ * method).
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, adjustEditorThemeForContrast } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * editor.addToolbar();
+ *
+ * const css = `
+ *   :root .imageEditorContainer {
+ *     --background-color-1: #ffff77;
+ *     --foreground-color-1: #fff;
+ *     --background-color-2: #ffff99;
+ *     --foreground-color-2: #ffff88;
+ *     --background-color-3: #ddffff;
+ *     --foreground-color-3: #eeffff;
+ *     --selection-background-color: #9f7;
+ *     --selection-foreground-color: #98f;
+ *   }
+ *
+ *   @media screen and (prefers-color-scheme: dark) {
+ *     :root .imageEditorContainer {
+ *       --background-color-1: black;
+ *     }
+ *   }
+ * `;
+ * editor.addStyleSheet(css);
+ *
+ * adjustEditorThemeForContrast(editor);
+ *
+ * // Because adjustEditorThemeForContrast overrides the current theme, it should be called again
+ * // to allow the editor to switch between light/dark themes.
+ * window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ *
+ * window.matchMedia('print').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ * ```
+ */
+declare const adjustEditorThemeForContrast: (editor: Editor) => void;
+export default adjustEditorThemeForContrast;

package/dist/mjs/util/adjustEditorThemeForContrast.mjs

@@ -0,0 +1,98 @@
+import { Color4, Vec3 } from '@js-draw/math';
+/**
+ * Adjusts the current editor theme such that colors have appropriate contrast.
+ *
+ * As this method overrides CSS variables using the `.style` property,
+ * **assumes** all original theme variables are set using CSS and not the `.style` property.
+ *
+ * If the editor changes theme in response to the system theme, this method should be
+ * called whenever the system theme changes (e.g. by using [the `matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+ * method).
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, adjustEditorThemeForContrast } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * editor.addToolbar();
+ *
+ * const css = `
+ *   :root .imageEditorContainer {
+ *     --background-color-1: #ffff77;
+ *     --foreground-color-1: #fff;
+ *     --background-color-2: #ffff99;
+ *     --foreground-color-2: #ffff88;
+ *     --background-color-3: #ddffff;
+ *     --foreground-color-3: #eeffff;
+ *     --selection-background-color: #9f7;
+ *     --selection-foreground-color: #98f;
+ *   }
+ *
+ *   @media screen and (prefers-color-scheme: dark) {
+ *     :root .imageEditorContainer {
+ *       --background-color-1: black;
+ *     }
+ *   }
+ * `;
+ * editor.addStyleSheet(css);
+ *
+ * adjustEditorThemeForContrast(editor);
+ *
+ * // Because adjustEditorThemeForContrast overrides the current theme, it should be called again
+ * // to allow the editor to switch between light/dark themes.
+ * window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ *
+ * window.matchMedia('print').addEventListener('change', () => {
+ *   adjustEditorThemeForContrast(editor);
+ * });
+ * ```
+ */
+const adjustEditorThemeForContrast = (editor) => {
+    const editorElem = editor.getRootElement();
+    // Each set of entries in colorPairs should resolve to colors with sufficient
+    // contrast.
+    const colorPairs = [
+        ['--background-color-1', '--foreground-color-1'],
+        ['--background-color-2', '--foreground-color-2'],
+        ['--background-color-3', '--foreground-color-3'],
+        ['--selection-background-color', '--selection-foreground-color'],
+    ];
+    // Clear any overrides
+    for (const [backgroundVar, foregroundVar] of colorPairs) {
+        editorElem.style.setProperty(backgroundVar, null);
+        editorElem.style.setProperty(foregroundVar, null);
+    }
+    const styles = getComputedStyle(editorElem);
+    const minContrast = 3;
+    for (const [backgroundVar, foregroundVar] of colorPairs) {
+        let color1 = Color4.fromString(styles.getPropertyValue(backgroundVar));
+        let color2 = Color4.fromString(styles.getPropertyValue(foregroundVar));
+        let swappedColors = false;
+        // Ensure that color1 has the lesser luminance
+        if (color1.relativeLuminance() < color2.relativeLuminance()) {
+            const tmp = color1;
+            color1 = color2;
+            color2 = tmp;
+            swappedColors = true;
+        }
+        let colorsUpdated = false;
+        let currentContrast = Color4.contrastRatio(color1, color2);
+        const iterations = 0;
+        while (currentContrast < minContrast && iterations < 5) {
+            const step = Vec3.of(0.1, 0.1, 0.1);
+            color1 = Color4.fromRGBVector(color1.rgb.plus(step));
+            color2 = Color4.fromRGBVector(color2.rgb.minus(step));
+            currentContrast = Color4.contrastRatio(color1, color2);
+            colorsUpdated = true;
+        }
+        if (colorsUpdated) {
+            const newBackground = swappedColors ? color2 : color1;
+            const newForeground = swappedColors ? color1 : color2;
+            editorElem.style.setProperty(foregroundVar, newForeground.toHexString());
+            editorElem.style.setProperty(backgroundVar, newBackground.toHexString());
+        }
+    }
+};
+export default adjustEditorThemeForContrast;

package/dist/mjs/util/lib.d.ts

@@ -0,0 +1 @@
+export { default as adjustEditorThemeForContrast } from './adjustEditorThemeForContrast';

package/dist/mjs/util/lib.mjs

@@ -0,0 +1 @@
+export  { default as adjustEditorThemeForContrast }  from './adjustEditorThemeForContrast.mjs';

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.1.0',
+    number: '1.2.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -64,7 +64,7 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.0.2",
+    "@js-draw/math": "^1.2.0",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
@@ -87,5 +87,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "18720ded225d789fa863bef5eb0330152b3be108"
+  "gitHead": "3e77c7d833ecdc13bcb57e905280ba547629680a"
 }

package/src/toolbar/EdgeToolbar.scss

@@ -1,12 +1,12 @@
 @keyframes toolbar--edgemenu-transition-in {
-	from { translate: 0 100%; }
-	to { translate: 0; }
+	from { transform: translate(0, 100%); }
+	to { transform: translate(0, 0); }
 }
 
 @keyframes toolbar--edgemenu-transition-out {
 	// Don't include `from { translate: 0 }` because initially,
 	// the translation might not be zero (e.g. during a drag).
-	to { translate: 0 100%; }
+	to { transform: translate(0, 100%); }
 }
 
 @keyframes toolbar--edgemenu-container-transition-in {
@@ -249,6 +249,7 @@
 
 			> .toolbar-button > .toolbar-icon {
 				margin-left: 10px;
+				margin-right: 0;
 			}
 
 			// Show last
@@ -267,6 +268,7 @@
 			> .toolbar-icon {
 				height: 100%;
 				margin-right: 10px;
+				margin-left: 0;
 			}
 		}
 	}
@@ -392,7 +394,7 @@
 	border-top-left-radius: $border-radius;
 	border-top-right-radius: $border-radius;
 
-	transition: translate 0.1s ease, padding-bottom 0.1s ease;
+	transition: transform 0.1s ease, padding-bottom 0.1s ease;
 
 	input, textarea {
 		user-select: auto;