@es-joy/jsoe 0.9.0 → 0.11.0

package/src/fundamentalTypes/dommatrixType.js

@@ -0,0 +1,357 @@
+import {$e} from '../utils/templateUtils.js';
+
+let idx = 0;
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const dommatrixType = {
+  option: ['DOMMatrix'],
+  stringRegex: /^DOMMatrix\((.*)\)$/u,
+  toValue (s) {
+    const o = JSON.parse(s);
+
+    const dommatrix = Object.hasOwn(o, 'a')
+      ? new DOMMatrix([o.a, o.b, o.c, o.d, o.e, o.f])
+      : new DOMMatrix([
+        o.m11, o.m12, o.m13, o.m14,
+        o.m21, o.m22, o.m23, o.m24,
+        o.m31, o.m32, o.m33, o.m34,
+        o.m41, o.m42, o.m43, o.m44
+      ]);
+
+    return {value: dommatrix};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+  },
+  setValue ({root, value: o}) {
+    const {is2D} = o;
+    /** @type {HTMLInputElement} */ ($e(root, '.d2')).checked = is2D;
+    /** @type {HTMLInputElement} */ ($e(root, '.d3')).checked = !is2D;
+
+    /** @type {HTMLDivElement} */ (
+      $e(root, '.holder2d')
+    ).hidden = /** @type {HTMLInputElement} */ !is2D;
+    /** @type {HTMLDivElement} */ (
+      $e(root, '.holder3d')
+    ).hidden = /** @type {HTMLInputElement} */ is2D;
+
+    if (is2D) {
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.a')
+      ).value = o.a;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.b')
+      ).value = o.b;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.c')
+      ).value = o.c;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.d')
+      ).value = o.d;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.e')
+      ).value = o.e;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.f')
+      ).value = o.f;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m11')
+      ).value = o.m11;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m12')
+      ).value = o.m12;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m13')
+      ).value = o.m13;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m14')
+      ).value = o.m14;
+
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m21')
+      ).value = o.m21;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m22')
+      ).value = o.m22;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m23')
+      ).value = o.m23;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m24')
+      ).value = o.m24;
+
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m31')
+      ).value = o.m31;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m32')
+      ).value = o.m32;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m33')
+      ).value = o.m33;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m34')
+      ).value = o.m34;
+
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m41')
+      ).value = o.m41;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m42')
+      ).value = o.m42;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m43')
+      ).value = o.m43;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m44')
+      ).value = o.m44;
+    }
+  },
+  getValue ({root}) {
+    const aType = /** @type {HTMLInputElement} */ (
+      $e(root, '.a')
+    ).value;
+
+    if (aType) {
+      const a = Number(aType);
+      const b = Number(/** @type {HTMLInputElement} */ (
+        $e(root, '.b')
+      ).value);
+      const c = Number(/** @type {HTMLInputElement} */ (
+        $e(root, '.c')
+      ).value);
+      const d = Number(/** @type {HTMLInputElement} */ (
+        $e(root, '.d')
+      ).value);
+      const e = Number(/** @type {HTMLInputElement} */ (
+        $e(root, '.e')
+      ).value);
+      const f = Number(/** @type {HTMLInputElement} */ (
+        $e(root, '.f')
+      ).value);
+      return new DOMMatrix([a, b, c, d, e, f]);
+    }
+
+    const m11 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m11')
+    ).value);
+    const m12 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m12')
+    ).value);
+    const m13 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m13')
+    ).value);
+    const m14 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m14')
+    ).value);
+
+    const m21 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m21')
+    ).value);
+    const m22 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m22')
+    ).value);
+    const m23 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m23')
+    ).value);
+    const m24 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m24')
+    ).value);
+
+    const m31 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m31')
+    ).value);
+    const m32 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m32')
+    ).value);
+    const m33 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m33')
+    ).value);
+    const m34 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m34')
+    ).value);
+
+    const m41 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m41')
+    ).value);
+    const m42 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m42')
+    ).value);
+    const m43 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m43')
+    ).value);
+    const m44 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m44')
+    ).value);
+
+    return new DOMMatrix([
+      m11, m12, m13, m14,
+      m21, m22, m23, m24,
+      m31, m32, m33, m34,
+      m41, m42, m43, m44
+    ]);
+  },
+  viewUI ({value}) {
+    return ['div', {dataset: {type: 'dommatrix'}}, [
+      value.is2D
+        ? ['div', [
+          ['b', ['a ']],
+          value.a,
+          ['br'],
+          ['b', ['b ']],
+          value.b,
+          ['br'],
+          ['b', ['c ']],
+          value.c,
+          ['br'],
+          ['b', ['d ']],
+          value.d,
+          ['br'],
+          ['b', ['e ']],
+          value.e,
+          ['br'],
+          ['b', ['f ']],
+          value.f
+        ]]
+        : ['div', [
+          ['b', ['m11 ']],
+          value.m11,
+          ['br'],
+          ['b', ['m12 ']],
+          value.m12,
+          ['br'],
+          ['b', ['m13 ']],
+          value.m13,
+          ['br'],
+          ['b', ['m14 ']],
+          value.m14,
+          ['br'],
+
+          ['b', ['m21 ']],
+          value.m21,
+          ['br'],
+          ['b', ['m22 ']],
+          value.m22,
+          ['br'],
+          ['b', ['m23 ']],
+          value.m23,
+          ['br'],
+          ['b', ['m24 ']],
+          value.m24,
+          ['br'],
+
+          ['b', ['m31 ']],
+          value.m31,
+          ['br'],
+          ['b', ['m32 ']],
+          value.m32,
+          ['br'],
+          ['b', ['m33 ']],
+          value.m33,
+          ['br'],
+          ['b', ['m34 ']],
+          value.m34,
+          ['br'],
+
+          ['b', ['m41 ']],
+          value.m41,
+          ['br'],
+          ['b', ['m42 ']],
+          value.m42,
+          ['br'],
+          ['b', ['m43 ']],
+          value.m43,
+          ['br'],
+          ['b', ['m44 ']],
+          value.m44
+        ]]
+    ]];
+  },
+  editUI ({typeNamespace, value = {}}) {
+    idx++;
+    const {is2D} = value;
+    // eslint-disable-next-line @stylistic/max-len -- Long
+    return ['div', {dataset: {type: 'dommatrix'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+      ['div', {
+        $on: {
+          click (e) {
+            const {target} = e;
+            /* c8 ignore next 3 */
+            if (/** @type {HTMLInputElement} */ (target).type !== 'radio') {
+              return;
+            }
+            const parent = /** @type {HTMLDivElement} */ (this.parentElement);
+            /** @type {HTMLDivElement} */ (
+              $e(parent, '.holder2d')
+            ).hidden = /** @type {HTMLInputElement} */ (target).value === '3d';
+            /** @type {HTMLDivElement} */ (
+              $e(parent, '.holder3d')
+            ).hidden = /** @type {HTMLInputElement} */ (target).value === '2d';
+          }
+        }
+      }, [
+        ['label', [
+          '2d',
+          ['input', {
+            class: 'd2',
+            type: 'radio', name: `${typeNamespace}-dommatrix-dimension-${idx}`,
+            value: '2d',
+            checked: Boolean(is2D)
+          }]
+        ]],
+        ' ',
+        ['label', [
+          '3d',
+          ['input', {
+            class: 'd3',
+            type: 'radio', name: `${typeNamespace}-dommatrix-dimension-${idx}`,
+            value: '3d',
+            checked: !is2D
+          }]
+        ]]
+      ]],
+      ['div', {
+        class: 'holder2d',
+        hidden: !is2D
+      }, (['a', 'b', 'c', 'd', 'e', 'f'].flatMap((label) => {
+        return [
+          ['br'],
+          ['label', [
+            label + ': ',
+            ['input', {
+              class: label,
+              name: `${typeNamespace}-dommatrix-${label}`,
+              value: value[label] ?? ''
+            }]
+          ]]
+        ];
+      })).slice(1)],
+      ['div', {
+        class: 'holder3d',
+        hidden: Boolean(is2D)
+      }, ([
+        'm11', 'm12', 'm13', 'm14',
+        'm21', 'm22', 'm23', 'm24',
+        'm31', 'm32', 'm33', 'm34',
+        'm41', 'm42', 'm43', 'm44'
+      ].flatMap((label) => {
+        return [
+          ['br'],
+          ['label', [
+            label + ': ',
+            ['input', {
+              class: label,
+              name: `${typeNamespace}-dommatrix-${label}`,
+              value: value[label] ?? ''
+            }]
+          ]]
+        ];
+      })).slice(1)]
+    ])];
+  }
+};
+
+export default dommatrixType;

package/src/fundamentalTypes/dompointType.js

@@ -0,0 +1,103 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const dompointType = {
+  option: ['DOMPoint'],
+  stringRegex: /^DOMPoint\((.*)\)$/u,
+  toValue (s) {
+    const {x, y, z, w} = JSON.parse(s);
+    return {value: new DOMPoint(x, y, z, w)};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+  },
+  setValue ({root, value}) {
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.x')
+    ).value = String(value.x);
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.y')
+    ).value = String(value.y);
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.z')
+    ).value = String(value.z);
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.w')
+    ).value = String(value.w);
+  },
+  getValue ({root}) {
+    const x = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.x')
+    ).value);
+    const y = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.y')
+    ).value);
+    const z = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.z')
+    ).value);
+    const w = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.w')
+    ).value);
+    return new DOMPoint(x, y, z, w);
+  },
+  viewUI ({value}) {
+    return ['div', {dataset: {type: 'dompoint'}}, [
+      ['b', ['x ']],
+      value.x,
+      ['br'],
+      ['b', ['y ']],
+      value.y,
+      ['br'],
+      ['b', ['z ']],
+      value.z,
+      ['br'],
+      ['b', ['w ']],
+      value.w
+    ]];
+  },
+  editUI ({typeNamespace, value = {
+    x: '',
+    y: '',
+    z: '',
+    w: ''
+  }}) {
+    // eslint-disable-next-line @stylistic/max-len -- Long
+    return ['div', {dataset: {type: 'dompoint'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+      ['label', [
+        'x: ',
+        ['input', {
+          class: 'x',
+          name: `${typeNamespace}-dompoint-x`, value: value.x
+        }]
+      ]],
+      ['br'],
+      ['label', [
+        'y: ',
+        ['input', {
+          class: 'y',
+          name: `${typeNamespace}-dompoint-y`, value: value.y
+        }]
+      ]],
+      ['br'],
+      ['label', [
+        'z: ',
+        ['input', {
+          class: 'z',
+          name: `${typeNamespace}-dompoint-z`, value: value.z
+        }]
+      ]],
+      ['br'],
+      ['label', [
+        'w: ',
+        ['input', {
+          class: 'w',
+          name: `${typeNamespace}-dompoint-w`, value: value.w
+        }]
+      ]]
+    ])];
+  }
+};
+
+export default dompointType;

package/src/fundamentalTypes/domrectType.js

@@ -0,0 +1,103 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const domrectType = {
+  option: ['DOMRect'],
+  stringRegex: /^DOMRect\((.*)\)$/u,
+  toValue (s) {
+    const {x, y, width, height} = JSON.parse(s);
+    return {value: new DOMRect(x, y, width, height)};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+  },
+  setValue ({root, value}) {
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.x')
+    ).value = String(value.x);
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.y')
+    ).value = String(value.y);
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.width')
+    ).value = String(value.width);
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.height')
+    ).value = String(value.height);
+  },
+  getValue ({root}) {
+    const x = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.x')
+    ).value);
+    const y = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.y')
+    ).value);
+    const width = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.width')
+    ).value);
+    const height = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.height')
+    ).value);
+    return new DOMRect(x, y, width, height);
+  },
+  viewUI ({value}) {
+    return ['div', {dataset: {type: 'domrect'}}, [
+      ['b', ['x ']],
+      value.x,
+      ['br'],
+      ['b', ['y ']],
+      value.y,
+      ['br'],
+      ['b', ['width ']],
+      value.width,
+      ['br'],
+      ['b', ['height ']],
+      value.height
+    ]];
+  },
+  editUI ({typeNamespace, value = {
+    x: '',
+    y: '',
+    width: '',
+    height: ''
+  }}) {
+    // eslint-disable-next-line @stylistic/max-len -- Long
+    return ['div', {dataset: {type: 'domrect'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+      ['label', [
+        'x: ',
+        ['input', {
+          class: 'x',
+          name: `${typeNamespace}-domrect-x`, value: value.x
+        }]
+      ]],
+      ['br'],
+      ['label', [
+        'y: ',
+        ['input', {
+          class: 'y',
+          name: `${typeNamespace}-domrect-y`, value: value.y
+        }]
+      ]],
+      ['br'],
+      ['label', [
+        'width: ',
+        ['input', {
+          class: 'width',
+          name: `${typeNamespace}-domrect-width`, value: value.width
+        }]
+      ]],
+      ['br'],
+      ['label', [
+        'height: ',
+        ['input', {
+          class: 'height',
+          name: `${typeNamespace}-domrect-height`, value: value.height
+        }]
+      ]]
+    ])];
+  }
+};
+
+export default domrectType;

package/src/fundamentalTypes/filelistType.js

@@ -0,0 +1,35 @@
+import arrayType from './arrayType.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const filelistType = {
+  option: ['FileList'],
+  array: true,
+  filelist: true,
+  regexEndings: [',', ')'],
+  stringRegexBegin: /^FileList\(/u,
+  stringRegexEnd: /^\)/u,
+
+  toValue (...args) {
+    return arrayType.toValue.apply(this, args);
+  },
+  getValue (...args) {
+    return arrayType.getValue.apply(this, args);
+  },
+  getInput (...args) {
+    return arrayType.getInput.apply(this, args);
+  },
+  viewUI ({...args}) {
+    return arrayType.viewUI.call(this, {
+      ...args, type: 'filelist'
+    });
+  },
+  editUI ({...args}) {
+    return arrayType.editUI.call(this, {
+      ...args, type: 'filelist'
+    });
+  }
+};
+
+export default filelistType;

package/src/jsoe.css

@@ -97,6 +97,10 @@ video.recordedMedia {
   background-color: beige;
 }
 
+[data-type="filelist"] {
+  background-color: bisque;
+}
+
 [data-type="blob"] {
   background-color: lightgray;
 }

package/src/types.js

@@ -35,7 +35,12 @@ import SpecialNumberSuperType from './superTypes/SpecialNumberType.js';
 import errorType from './fundamentalTypes/errorType.js';
 import errorsSpecialType from './superTypes/errorsSpecialType.js';
 import fileType from './fundamentalTypes/fileType.js';
+import filelistType from './fundamentalTypes/filelistType.js';
 import blobType from './fundamentalTypes/blobType.js';
+import domexceptionType from './fundamentalTypes/domexceptionType.js';
+import domrectType from './fundamentalTypes/domrectType.js';
+import dompointType from './fundamentalTypes/dompointType.js';
+import dommatrixType from './fundamentalTypes/dommatrixType.js';
 
 /**
  * Utility to retrieve the property value given a legend element.
@@ -270,9 +275,11 @@ const Types = {};
  * @property {boolean} [array] Private context variable. Whether or not
  *   it is an array. Do not use in other types.
  * @property {boolean} [map] Private context variable. Whether or not
- *   it is a Map. Do not use in other types.
+ *   it is a `Map`. Do not use in other types.
  * @property {boolean} [set] Private context variable. Whether or not
- *   it is a set. Do not use in other types.
+ *   it is a `Set`. Do not use in other types.
+ * @property {boolean} [filelist] Private context variable. Whether or not
+ *   it is a `FileList` type. Do not use in other types.
  * @property {boolean} [sparse] Private context variable. Whether or not
  *   it is a sparse array. Do not use in other types.
  * @property {boolean} [valid] Private context variable. Whether or not
@@ -386,11 +393,15 @@ Types.availableTypes = {
   set: setType,
 
   file: fileType,
-  filelist: {
-    option: ['FileList']
-  },
+  filelist: filelistType,
   blob: blobType,
   blobHTML: blobHTMLType,
+
+  domexception: domexceptionType,
+  domrect: domrectType,
+  dompoint: dompointType,
+  dommatrix: dommatrixType,
+
   arraybuffer: {
     option: ['ArrayBuffer']
   },
@@ -436,17 +447,6 @@ Types.availableTypes = {
     option: ['Float64Array']
   },
 
-  // Intl (imperfect)
-  IntlCollator: {
-    option: ['Intl.Collator']
-  },
-  IntlDateTimeFormat: {
-    option: ['Intl.DateTimeFormat']
-  },
-  IntlNumberFormat: {
-    option: ['Intl.NumberFormat']
-  },
-
   // We're catching this instead of using this
   // sparseUndefined: sparseUndefinedType,
 
@@ -470,9 +470,9 @@ Types.availableTypes = {
 *   "NumberObject"|"StringObject"|"map"|"set"|"file"|"filelist"|"blobHTML"|
 *   "arraybuffer"|"arraybufferview"|"dataview"|"imagedata"|"imagebitmap"|
 *   "int8array"|"uint8array"|"uint8clampedarray"|"int16array"|"uint16array"|
-*   "int32array"|"uint32array"|"float32array"|"float64array"|"IntlCollator"|
-*   "IntlDateTimeFormat"|"IntlNumberFormat"|"ValidDate"|
-*   "arrayNonindexKeys"|"error"|"errors"|"blob"} AvailableType
+*   "int32array"|"uint32array"|"float32array"|"float64array"|"ValidDate"|
+*   "arrayNonindexKeys"|"error"|"errors"|"blob"|"domexception"|"domrect"|
+*   "dompoint"|"dommatrix"} AvailableType
 */
 
 /**