js-draw 1.0.2 → 1.2.0

package/dist/cjs/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/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.0.2',
+    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/AbstractToolbar.d.ts

@@ -106,20 +106,16 @@ export default abstract class AbstractToolbar {
     /**
      * Adds a save button that, when clicked, calls `saveCallback`.
      *
-     * **Note**: This is equivalent to
-     * ```ts
-     * const tags = [
-     *   ToolbarWidgetTag.Save,
-     * ];
-     * toolbar.addTaggedActionButton(tags, {
-     *   label: editor.localization.save,
-     *   icon: editor.icons.makeSaveIcon(),
-     * }, () => {
-     *   saveCallback();
-     * });
-     * ```
+     * @example
+     * ```ts,runnable
+     * import { Editor, makeDropdownToolbar } from 'js-draw';
      *
-     * @final
+     * const editor = new Editor(document.body);
+     * const toolbar = makeDropdownToolbar(editor);
+     *
+     * toolbar.addDefaults();
+     * toolbar.addSaveButton(() => alert('save clicked!'));
+     * ```
      */
     addSaveButton(saveCallback: () => void): BaseWidget;
     /**

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -29,6 +29,7 @@ import  InsertImageWidget  from './widgets/InsertImageWidget.mjs';
 import  DocumentPropertiesWidget  from './widgets/DocumentPropertiesWidget.mjs';
 import { Color4 } from '@js-draw/math';
 import  { toolbarCSSPrefix }  from './constants.mjs';
+import  SaveActionWidget  from './widgets/SaveActionWidget.mjs';
 class AbstractToolbar {
     /** @internal */
     constructor(editor, localizationTable = defaultToolbarLocalization) {
@@ -264,28 +265,22 @@ class AbstractToolbar {
     /**
      * Adds a save button that, when clicked, calls `saveCallback`.
      *
-     * **Note**: This is equivalent to
-     * ```ts
-     * const tags = [
-     *   ToolbarWidgetTag.Save,
-     * ];
-     * toolbar.addTaggedActionButton(tags, {
-     *   label: editor.localization.save,
-     *   icon: editor.icons.makeSaveIcon(),
-     * }, () => {
-     *   saveCallback();
-     * });
-     * ```
+     * @example
+     * ```ts,runnable
+     * import { Editor, makeDropdownToolbar } from 'js-draw';
      *
-     * @final
+     * const editor = new Editor(document.body);
+     * const toolbar = makeDropdownToolbar(editor);
+     *
+     * toolbar.addDefaults();
+     * toolbar.addSaveButton(() => alert('save clicked!'));
+     * ```
      */
     addSaveButton(saveCallback) {
-        return this.addTaggedActionButton([ToolbarWidgetTag.Save], {
-            label: this.editor.localization.save,
-            icon: this.editor.icons.makeSaveIcon(),
-        }, () => {
-            saveCallback();
-        });
+        const widget = new SaveActionWidget(this.editor, this.localizationTable, saveCallback);
+        widget.setTags([ToolbarWidgetTag.Save]);
+        this.addWidget(widget);
+        return widget;
     }
     /**
      * Adds an "Exit" button that, when clicked, calls `exitCallback`.

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/toolbar/widgets/SaveActionWidget.d.ts

@@ -0,0 +1,10 @@
+import { KeyPressEvent } from '../../inputEvents';
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
+declare class SaveActionWidget extends ActionButtonWidget {
+    constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void);
+    protected onKeyPress(event: KeyPressEvent): boolean;
+    mustBeInToplevelMenu(): boolean;
+}
+export default SaveActionWidget;

package/dist/mjs/toolbar/widgets/SaveActionWidget.mjs

@@ -0,0 +1,21 @@
+import  ActionButtonWidget  from './ActionButtonWidget.mjs';
+import  { ToolbarWidgetTag }  from './BaseWidget.mjs';
+import  { saveKeyboardShortcut }  from './keybindings.mjs';
+class SaveActionWidget extends ActionButtonWidget {
+    constructor(editor, localization, saveCallback) {
+        super(editor, 'save-button', editor.icons.makeSaveIcon, localization.save, saveCallback);
+        this.setTags([ToolbarWidgetTag.Save]);
+    }
+    onKeyPress(event) {
+        if (this.editor.shortcuts.matchesShortcut(saveKeyboardShortcut, event)) {
+            this.clickAction();
+            return true;
+        }
+        // Run any default actions registered by the parent class.
+        return super.onKeyPress(event);
+    }
+    mustBeInToplevelMenu() {
+        return true;
+    }
+}
+export default SaveActionWidget;

package/dist/mjs/toolbar/widgets/keybindings.d.ts

@@ -1,2 +1,3 @@
 export declare const resizeImageToSelectionKeyboardShortcut = "jsdraw.toolbar.SelectionTool.resizeImageToSelection";
 export declare const selectStrokeTypeKeyboardShortcutIds: string[];
+export declare const saveKeyboardShortcut = "jsdraw.toolbar.SaveActionWidget.save";

package/dist/mjs/toolbar/widgets/keybindings.mjs

@@ -8,3 +8,6 @@ for (let i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
     const id = selectStrokeTypeKeyboardShortcutIds[i];
     KeyboardShortcutManager.registerDefaultKeyboardShortcut(id, [`CtrlOrMeta+Digit${(i + 1)}`], 'Select pen style ' + (i + 1));
 }
+// Save
+export const saveKeyboardShortcut = 'jsdraw.toolbar.SaveActionWidget.save';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(saveKeyboardShortcut, ['ctrlOrMeta+KeyS'], 'Save');

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;