js-draw 1.2.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/bundle.js +2 -2
  2. package/dist/cjs/util/ReactiveValue.js +1 -1
  3. package/dist/cjs/util/adjustEditorThemeForContrast.d.ts +3 -1
  4. package/dist/cjs/util/adjustEditorThemeForContrast.js +51 -23
  5. package/dist/cjs/util/adjustEditorThemeForContrast.test.d.ts +1 -0
  6. package/dist/cjs/version.js +1 -1
  7. package/dist/mjs/util/ReactiveValue.mjs +1 -1
  8. package/dist/mjs/util/adjustEditorThemeForContrast.d.ts +3 -1
  9. package/dist/mjs/util/adjustEditorThemeForContrast.mjs +51 -23
  10. package/dist/mjs/util/adjustEditorThemeForContrast.test.d.ts +1 -0
  11. package/dist/mjs/version.mjs +1 -1
  12. package/package.json +3 -3
package/dist/cjs/util/ReactiveValue.js CHANGED
@@ -98,7 +98,7 @@ exports.ReactiveValue = ReactiveValue;
98
98
  class MutableReactiveValue extends ReactiveValue {
99
99
  static fromProperty(sourceValue, propertyName) {
100
100
  const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
101
- const childRef = new WeakRef(child);
101
+ const childRef = window.WeakRef ? new WeakRef(child) : { deref: () => child };
102
102
  // When the source is updated...
103
103
  const sourceListener = sourceValue.onUpdate(newValue => {
104
104
  const childValue = childRef.deref();
package/dist/cjs/util/adjustEditorThemeForContrast.d.ts CHANGED
@@ -49,5 +49,7 @@ import Editor from '../Editor';
49
49
  * });
50
50
  * ```
51
51
  */
52
- declare const adjustEditorThemeForContrast: (editor: Editor) => void;
52
+ declare const adjustEditorThemeForContrast: (editor: Editor, options?: {
53
+ dontClearOverrides: boolean;
54
+ }) => void;
53
55
  export default adjustEditorThemeForContrast;
package/dist/cjs/util/adjustEditorThemeForContrast.js CHANGED
@@ -51,50 +51,78 @@ const math_1 = require("@js-draw/math");
51
51
  * });
52
52
  * ```
53
53
  */
54
- const adjustEditorThemeForContrast = (editor) => {
54
+ const adjustEditorThemeForContrast = (editor, options) => {
55
55
  const editorElem = editor.getRootElement();
56
56
  // Each set of entries in colorPairs should resolve to colors with sufficient
57
57
  // contrast.
58
58
  const colorPairs = [
59
- ['--background-color-1', '--foreground-color-1'],
60
- ['--background-color-2', '--foreground-color-2'],
61
- ['--background-color-3', '--foreground-color-3'],
62
- ['--selection-background-color', '--selection-foreground-color'],
59
+ ['--background-color-1', '--foreground-color-1', true, true],
60
+ ['--background-color-2', '--foreground-color-2', true, true],
61
+ ['--background-color-3', '--foreground-color-3', true, true],
62
+ ['--selection-background-color', '--selection-foreground-color', false, true],
63
63
  ];
64
- // Clear any overrides
65
- for (const [backgroundVar, foregroundVar] of colorPairs) {
66
- editorElem.style.setProperty(backgroundVar, null);
67
- editorElem.style.setProperty(foregroundVar, null);
64
+ if (!options?.dontClearOverrides) {
65
+ // Clear any overrides
66
+ for (const [backgroundVar, foregroundVar] of colorPairs) {
67
+ editorElem.style.setProperty(backgroundVar, null);
68
+ editorElem.style.setProperty(foregroundVar, null);
69
+ }
68
70
  }
69
71
  const styles = getComputedStyle(editorElem);
70
- const minContrast = 3;
71
- for (const [backgroundVar, foregroundVar] of colorPairs) {
72
- let color1 = math_1.Color4.fromString(styles.getPropertyValue(backgroundVar));
73
- let color2 = math_1.Color4.fromString(styles.getPropertyValue(foregroundVar));
74
- let swappedColors = false;
72
+ const updatedColors = Object.create(null);
73
+ const adjustVariablesForContrast = (var1, var2, minContrast,
74
+ // true if the variable can be updated
75
+ updateVar1, updateVar2) => {
76
+ // Fetch from updatedColors if available -- styles isn't updated dynamically.
77
+ let color1 = updatedColors[var1] ? updatedColors[var1] : math_1.Color4.fromString(styles.getPropertyValue(var1));
78
+ let color2 = updatedColors[var2] ? updatedColors[var2] : math_1.Color4.fromString(styles.getPropertyValue(var2));
75
79
  // Ensure that color1 has the lesser luminance
76
80
  if (color1.relativeLuminance() < color2.relativeLuminance()) {
77
81
  const tmp = color1;
78
82
  color1 = color2;
79
83
  color2 = tmp;
80
- swappedColors = true;
84
+ const oldVar2 = var2;
85
+ var2 = var1;
86
+ var1 = oldVar2;
87
+ const oldUpdateVar1 = updateVar1;
88
+ updateVar1 = updateVar2;
89
+ updateVar2 = oldUpdateVar1;
81
90
  }
82
91
  let colorsUpdated = false;
83
92
  let currentContrast = math_1.Color4.contrastRatio(color1, color2);
84
- const iterations = 0;
85
- while (currentContrast < minContrast && iterations < 5) {
93
+ let iterations = 0;
94
+ // Step the brightness of color1 and color2 in different directions while necessary
95
+ while (currentContrast < minContrast && iterations < 8) {
86
96
  const step = math_1.Vec3.of(0.1, 0.1, 0.1);
87
- color1 = math_1.Color4.fromRGBVector(color1.rgb.plus(step));
88
- color2 = math_1.Color4.fromRGBVector(color2.rgb.minus(step));
97
+ if (updateVar1) {
98
+ if (color2.eq(math_1.Color4.white) && !updateVar2) {
99
+ color2 = math_1.Color4.black;
100
+ }
101
+ color1 = math_1.Color4.fromRGBVector(color1.rgb.plus(step));
102
+ }
103
+ if (updateVar2) {
104
+ if (color2.eq(math_1.Color4.black) && !updateVar1) {
105
+ color2 = math_1.Color4.white;
106
+ }
107
+ color2 = math_1.Color4.fromRGBVector(color2.rgb.minus(step));
108
+ }
89
109
  currentContrast = math_1.Color4.contrastRatio(color1, color2);
90
110
  colorsUpdated = true;
111
+ iterations++;
91
112
  }
113
+ // Update the CSS variables if necessary
92
114
  if (colorsUpdated) {
93
- const newBackground = swappedColors ? color2 : color1;
94
- const newForeground = swappedColors ? color1 : color2;
95
- editorElem.style.setProperty(foregroundVar, newForeground.toHexString());
96
- editorElem.style.setProperty(backgroundVar, newBackground.toHexString());
115
+ editorElem.style.setProperty(var1, color1.toHexString());
116
+ editorElem.style.setProperty(var2, color2.toHexString());
117
+ updatedColors[var1] = color1;
118
+ updatedColors[var2] = color2;
97
119
  }
120
+ };
121
+ // Also adjust the selection background
122
+ adjustVariablesForContrast('--selection-background-color', '--background-color-2', 1.29, true, false);
123
+ for (const [backgroundVar, foregroundVar, updateBackground, updateForeground] of colorPairs) {
124
+ const minContrast = 4.5;
125
+ adjustVariablesForContrast(backgroundVar, foregroundVar, minContrast, updateBackground, updateForeground);
98
126
  }
99
127
  };
100
128
  exports.default = adjustEditorThemeForContrast;
package/dist/cjs/version.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = {
4
- number: '1.2.0',
4
+ number: '1.2.1',
5
5
  };
package/dist/mjs/util/ReactiveValue.mjs CHANGED
@@ -94,7 +94,7 @@ export class ReactiveValue {
94
94
  export class MutableReactiveValue extends ReactiveValue {
95
95
  static fromProperty(sourceValue, propertyName) {
96
96
  const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
97
- const childRef = new WeakRef(child);
97
+ const childRef = window.WeakRef ? new WeakRef(child) : { deref: () => child };
98
98
  // When the source is updated...
99
99
  const sourceListener = sourceValue.onUpdate(newValue => {
100
100
  const childValue = childRef.deref();
package/dist/mjs/util/adjustEditorThemeForContrast.d.ts CHANGED
@@ -49,5 +49,7 @@ import Editor from '../Editor';
49
49
  * });
50
50
  * ```
51
51
  */
52
- declare const adjustEditorThemeForContrast: (editor: Editor) => void;
52
+ declare const adjustEditorThemeForContrast: (editor: Editor, options?: {
53
+ dontClearOverrides: boolean;
54
+ }) => void;
53
55
  export default adjustEditorThemeForContrast;
package/dist/mjs/util/adjustEditorThemeForContrast.mjs CHANGED
@@ -49,50 +49,78 @@ import { Color4, Vec3 } from '@js-draw/math';
49
49
  * });
50
50
  * ```
51
51
  */
52
- const adjustEditorThemeForContrast = (editor) => {
52
+ const adjustEditorThemeForContrast = (editor, options) => {
53
53
  const editorElem = editor.getRootElement();
54
54
  // Each set of entries in colorPairs should resolve to colors with sufficient
55
55
  // contrast.
56
56
  const colorPairs = [
57
- ['--background-color-1', '--foreground-color-1'],
58
- ['--background-color-2', '--foreground-color-2'],
59
- ['--background-color-3', '--foreground-color-3'],
60
- ['--selection-background-color', '--selection-foreground-color'],
57
+ ['--background-color-1', '--foreground-color-1', true, true],
58
+ ['--background-color-2', '--foreground-color-2', true, true],
59
+ ['--background-color-3', '--foreground-color-3', true, true],
60
+ ['--selection-background-color', '--selection-foreground-color', false, true],
61
61
  ];
62
- // Clear any overrides
63
- for (const [backgroundVar, foregroundVar] of colorPairs) {
64
- editorElem.style.setProperty(backgroundVar, null);
65
- editorElem.style.setProperty(foregroundVar, null);
62
+ if (!options?.dontClearOverrides) {
63
+ // Clear any overrides
64
+ for (const [backgroundVar, foregroundVar] of colorPairs) {
65
+ editorElem.style.setProperty(backgroundVar, null);
66
+ editorElem.style.setProperty(foregroundVar, null);
67
+ }
66
68
  }
67
69
  const styles = getComputedStyle(editorElem);
68
- const minContrast = 3;
69
- for (const [backgroundVar, foregroundVar] of colorPairs) {
70
- let color1 = Color4.fromString(styles.getPropertyValue(backgroundVar));
71
- let color2 = Color4.fromString(styles.getPropertyValue(foregroundVar));
72
- let swappedColors = false;
70
+ const updatedColors = Object.create(null);
71
+ const adjustVariablesForContrast = (var1, var2, minContrast,
72
+ // true if the variable can be updated
73
+ updateVar1, updateVar2) => {
74
+ // Fetch from updatedColors if available -- styles isn't updated dynamically.
75
+ let color1 = updatedColors[var1] ? updatedColors[var1] : Color4.fromString(styles.getPropertyValue(var1));
76
+ let color2 = updatedColors[var2] ? updatedColors[var2] : Color4.fromString(styles.getPropertyValue(var2));
73
77
  // Ensure that color1 has the lesser luminance
74
78
  if (color1.relativeLuminance() < color2.relativeLuminance()) {
75
79
  const tmp = color1;
76
80
  color1 = color2;
77
81
  color2 = tmp;
78
- swappedColors = true;
82
+ const oldVar2 = var2;
83
+ var2 = var1;
84
+ var1 = oldVar2;
85
+ const oldUpdateVar1 = updateVar1;
86
+ updateVar1 = updateVar2;
87
+ updateVar2 = oldUpdateVar1;
79
88
  }
80
89
  let colorsUpdated = false;
81
90
  let currentContrast = Color4.contrastRatio(color1, color2);
82
- const iterations = 0;
83
- while (currentContrast < minContrast && iterations < 5) {
91
+ let iterations = 0;
92
+ // Step the brightness of color1 and color2 in different directions while necessary
93
+ while (currentContrast < minContrast && iterations < 8) {
84
94
  const step = Vec3.of(0.1, 0.1, 0.1);
85
- color1 = Color4.fromRGBVector(color1.rgb.plus(step));
86
- color2 = Color4.fromRGBVector(color2.rgb.minus(step));
95
+ if (updateVar1) {
96
+ if (color2.eq(Color4.white) && !updateVar2) {
97
+ color2 = Color4.black;
98
+ }
99
+ color1 = Color4.fromRGBVector(color1.rgb.plus(step));
100
+ }
101
+ if (updateVar2) {
102
+ if (color2.eq(Color4.black) && !updateVar1) {
103
+ color2 = Color4.white;
104
+ }
105
+ color2 = Color4.fromRGBVector(color2.rgb.minus(step));
106
+ }
87
107
  currentContrast = Color4.contrastRatio(color1, color2);
88
108
  colorsUpdated = true;
109
+ iterations++;
89
110
  }
111
+ // Update the CSS variables if necessary
90
112
  if (colorsUpdated) {
91
- const newBackground = swappedColors ? color2 : color1;
92
- const newForeground = swappedColors ? color1 : color2;
93
- editorElem.style.setProperty(foregroundVar, newForeground.toHexString());
94
- editorElem.style.setProperty(backgroundVar, newBackground.toHexString());
113
+ editorElem.style.setProperty(var1, color1.toHexString());
114
+ editorElem.style.setProperty(var2, color2.toHexString());
115
+ updatedColors[var1] = color1;
116
+ updatedColors[var2] = color2;
95
117
  }
118
+ };
119
+ // Also adjust the selection background
120
+ adjustVariablesForContrast('--selection-background-color', '--background-color-2', 1.29, true, false);
121
+ for (const [backgroundVar, foregroundVar, updateBackground, updateForeground] of colorPairs) {
122
+ const minContrast = 4.5;
123
+ adjustVariablesForContrast(backgroundVar, foregroundVar, minContrast, updateBackground, updateForeground);
96
124
  }
97
125
  };
98
126
  export default adjustEditorThemeForContrast;
package/dist/mjs/version.mjs CHANGED
@@ -1,3 +1,3 @@
1
1
  export default {
2
- number: '1.2.0',
2
+ number: '1.2.1',
3
3
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "js-draw",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
5
5
  "types": "./dist/mjs/lib.d.ts",
6
6
  "main": "./dist/cjs/lib.js",
@@ -64,7 +64,7 @@
64
64
  "postpack": "ts-node tools/copyREADME.ts revert"
65
65
  },
66
66
  "dependencies": {
67
- "@js-draw/math": "^1.2.0",
67
+ "@js-draw/math": "^1.2.1",
68
68
  "@melloware/coloris": "0.21.0"
69
69
  },
70
70
  "devDependencies": {
@@ -87,5 +87,5 @@
87
87
  "freehand",
88
88
  "svg"
89
89
  ],
90
- "gitHead": "3e77c7d833ecdc13bcb57e905280ba547629680a"
90
+ "gitHead": "0cb756d3150c8b33dd9a3217faa7d18229688f34"
91
91
  }