js-draw 1.0.2 → 1.2.0

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.0.2',
+    number: '1.2.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.0.2",
+  "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": "f5a92284625b49b2ef6541bdafce1bd926c10441"
+  "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;
 			}
 		}
 	}
@@ -377,6 +379,7 @@
 	user-select: none;
 
 	background-color: var(--background-color-2);
+	color: var(--foreground-color-2);
 	--icon-color: var(--foreground-color-2);
 
 	box-shadow: 0px 0px 1px var(--shadow-color);
@@ -391,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;