tweak-ui 0.4.3 → 0.5.0

package/dist/lib/components/controls/number.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/number.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,cAAc,EACd,cAAc,EACd,WAAW,EACZ,MAAM,YAAY,CAAA;AAGnB;;;GAGG;AACH,oBAAY,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAErD;;;GAGG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,EAAE,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC;IACtF;;OAEG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAA;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1D;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"number.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/number.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,cAAc,EACd,cAAc,EACd,WAAW,EACZ,MAAM,YAAY,CAAA;AAGnB;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAErD;;;GAGG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,EAAE,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC;IACtF;;OAEG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAA;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1D;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/lib/components/controls/number.js

@@ -0,0 +1,142 @@
+import m from 'mithril';
+import { getValue, component, setValue, } from '../../core';
+import { call, clamp, cssClass, twuiClass, dragUtil, getTouchInTarget } from '../../core/utils';
+const NumberComponent = () => {
+    let type;
+    let min;
+    let max;
+    let step;
+    let disabled;
+    let placeholder;
+    let isSlider;
+    let value;
+    let percent;
+    let focused;
+    let vnode;
+    // let data: NumberModel
+    function fetchState(node) {
+        vnode = node;
+        const data = node.attrs.data;
+        type = data.type;
+        isSlider = data.type === 'slider';
+        min = isSlider && data.min == null ? 0 : data.min;
+        max = isSlider && data.max == null ? 1 : data.max;
+        step = data.step;
+        value = getValue(data);
+        disabled = data.disabled;
+        percent = isSlider ? ((value - min) / (max - min)) * 100 : 0;
+    }
+    function setModelValue(e, v) {
+        v = value = clamp(isNaN(v) ? null : v, min, max);
+        const data = vnode.attrs.data;
+        const written = setValue(data, v);
+        call(e === 'input' ? data.onInput : data.onChange, data, written);
+        m.redraw();
+    }
+    function onInput(e) {
+        const el = e.target;
+        setModelValue('input', parseFloat(el.value));
+    }
+    function onChange(e) {
+        const el = e.target;
+        setModelValue('change', parseFloat(el.value));
+    }
+    function limit(v) {
+        v = clamp(v, min, max);
+        if (step != null) {
+            v = Math.round(v / step) * step;
+        }
+        return parseFloat(v.toFixed(5));
+    }
+    let drag = dragUtil({
+        onStart: (e) => {
+            drag.onMove(e);
+        },
+        onMove: (e) => {
+            e.preventDefault();
+            const s = getTouchInTarget(e, drag.target).normalizedX;
+            setModelValue('input', limit(min + s * (max - min)));
+        },
+        onEnd: () => {
+            setModelValue('change', value);
+            drag.deactivate();
+        },
+    });
+    function onDragStart(e) {
+        if (!disabled) {
+            drag.activate(e);
+        }
+    }
+    function onKeydown(e) {
+        const code = e.key || e.keyCode;
+        const dir = code === 'ArrowLeft' ? -1 : code === 'ArrowRight' ? 1 : 0;
+        const add = (step || 1) * dir;
+        if (add) {
+            setModelValue('change', limit((value || 0) + add));
+        }
+    }
+    function onWheel(e) {
+        e.preventDefault();
+        const dir = (e.ctrlKey ? 0.5 : 1) * clamp(e.deltaY, -1, 1);
+        const add = (step || 0.2) * dir;
+        if (add) {
+            setModelValue('change', limit((value || 0) - add));
+        }
+    }
+    function onFocus() {
+        focused = true;
+    }
+    function onBlur() {
+        focused = false;
+    }
+    function slider() {
+        return m('.twui-progress', Object.assign({ style: 'user-select: none;', class: cssClass({
+                disabled: !!disabled,
+            }) }, (disabled
+            ? {}
+            : {
+                tabindex: 0,
+                onmousedown: onDragStart,
+                ontouchstart: onDragStart,
+                onkeydown: onKeydown,
+                onwheel: onWheel,
+            })), m('.twui-progress-bar', {
+            style: {
+                width: `${percent}%`,
+                'pointer-events': 'none',
+                'user-select': 'none',
+            },
+        }));
+    }
+    return {
+        onremove: () => {
+            drag.deactivate();
+        },
+        oninit: (node) => {
+            fetchState(node);
+        },
+        onupdate: (node) => {
+            fetchState(node);
+        },
+        view: () => {
+            return m('div', {
+                class: twuiClass(type),
+            }, isSlider ? slider() : null, m("input[type='number']", {
+                min: min,
+                max: max,
+                step: step,
+                value: value,
+                oninput: onInput,
+                onchange: onChange,
+                onwheel: onWheel,
+                onfocus: onFocus,
+                onblur: onBlur,
+                placeholder: placeholder,
+                disabled: disabled,
+            }));
+        },
+    };
+};
+component('number', NumberComponent);
+component('slider', NumberComponent);
+//# sourceMappingURL=number.js.map

package/dist/lib/components/controls/number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/number.ts"],"names":[],"mappings":"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","sourcesContent":["import m, { Child, ClosureComponent } from 'mithril'\r\n\r\nimport {\r\n  getValue,\r\n  component,\r\n  setValue,\r\n  ComponentModel,\r\n  ComponentAttrs,\r\n  ValueSource,\r\n} from '../../core'\r\nimport { call, clamp, cssClass, twuiClass, dragUtil, getTouchInTarget } from '../../core/utils'\r\n\r\n/**\r\n * Number component attributes\r\n * @public\r\n */\r\nexport type NumberAttrs = ComponentAttrs<NumberModel>\r\n\r\n/**\r\n * Number component model\r\n * @public\r\n */\r\nexport interface NumberModel<T = unknown> extends ComponentModel, ValueSource<T, number> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'number' | 'slider'\r\n  /**\r\n   * The placeholder text\r\n   */\r\n  placeholder?: string\r\n  /**\r\n   * The min value\r\n   */\r\n  min?: number\r\n  /**\r\n   * The max value\r\n   */\r\n  max?: number\r\n  /**\r\n   * The step value\r\n   */\r\n  step?: number\r\n  /**\r\n   * This is called when the control value has been changed.\r\n   */\r\n  onInput?: (model: NumberModel<T>, value: unknown) => void\r\n  /**\r\n   * This is called once the control value is committed by the user.\r\n   *\r\n   * @remarks\r\n   * Unlike the `onInput` callback, this is not necessarily called for each value change.\r\n   */\r\n  onChange?: (model: NumberModel<T>, value: unknown) => void\r\n  /**\r\n   * Disables the control input\r\n   */\r\n  disabled?: boolean\r\n}\r\n\r\nconst NumberComponent: ClosureComponent<NumberAttrs> = () => {\r\n  let type: 'number' | 'slider'\r\n  let min: number\r\n  let max: number\r\n  let step: number\r\n  let disabled: boolean\r\n  let placeholder: string\r\n  let isSlider: boolean\r\n  let value: number\r\n  let percent: number\r\n  let focused: boolean\r\n  let vnode: m.Vnode<NumberAttrs>\r\n  // let data: NumberModel\r\n\r\n  function fetchState(node: m.Vnode<NumberAttrs>) {\r\n    vnode = node\r\n    const data = node.attrs.data\r\n    type = data.type\r\n    isSlider = data.type === 'slider'\r\n    min = isSlider && data.min == null ? 0 : data.min\r\n    max = isSlider && data.max == null ? 1 : data.max\r\n    step = data.step\r\n    value = getValue<number>(data)\r\n    disabled = data.disabled\r\n    percent = isSlider ? ((value - min) / (max - min)) * 100 : 0\r\n  }\r\n\r\n  function setModelValue(e: 'input' | 'change', v: number) {\r\n    v = value = clamp(isNaN(v) ? null : v, min, max)\r\n    const data = vnode.attrs.data\r\n    const written = setValue(data, v)\r\n    call(e === 'input' ? data.onInput : data.onChange, data, written)\r\n    m.redraw()\r\n  }\r\n\r\n  function onInput(e: Event) {\r\n    const el = e.target as HTMLInputElement\r\n    setModelValue('input', parseFloat(el.value))\r\n  }\r\n\r\n  function onChange(e: Event) {\r\n    const el = e.target as HTMLInputElement\r\n    setModelValue('change', parseFloat(el.value))\r\n  }\r\n\r\n  function limit(v: number) {\r\n    v = clamp(v, min, max)\r\n    if (step != null) {\r\n      v = Math.round(v / step) * step\r\n    }\r\n    return parseFloat(v.toFixed(5))\r\n  }\r\n\r\n  let drag = dragUtil({\r\n    onStart: (e) => {\r\n      drag.onMove(e)\r\n    },\r\n    onMove: (e) => {\r\n      e.preventDefault()\r\n      const s = getTouchInTarget(e, drag.target).normalizedX\r\n      setModelValue('input', limit(min + s * (max - min)))\r\n    },\r\n    onEnd: () => {\r\n      setModelValue('change', value)\r\n      drag.deactivate()\r\n    },\r\n  })\r\n\r\n  function onDragStart(e: MouseEvent) {\r\n    if (!disabled) {\r\n      drag.activate(e)\r\n    }\r\n  }\r\n\r\n  function onKeydown(e: KeyboardEvent) {\r\n    const code = e.key || e.keyCode\r\n    const dir = code === 'ArrowLeft' ? -1 : code === 'ArrowRight' ? 1 : 0\r\n    const add = (step || 1) * dir\r\n    if (add) {\r\n      setModelValue('change', limit((value || 0) + add))\r\n    }\r\n  }\r\n\r\n  function onWheel(e: WheelEvent) {\r\n    e.preventDefault()\r\n    const dir = (e.ctrlKey ? 0.5 : 1) * clamp(e.deltaY, -1, 1)\r\n    const add = (step || 0.2) * dir\r\n    if (add) {\r\n      setModelValue('change', limit((value || 0) - add))\r\n    }\r\n  }\r\n\r\n  function onFocus() {\r\n    focused = true\r\n  }\r\n\r\n  function onBlur() {\r\n    focused = false\r\n  }\r\n\r\n  function slider(): Child {\r\n    return m(\r\n      '.twui-progress',\r\n      {\r\n        style: 'user-select: none;',\r\n        class: cssClass({\r\n          disabled: !!disabled,\r\n        }),\r\n        ...(disabled\r\n          ? {}\r\n          : {\r\n              tabindex: 0,\r\n              onmousedown: onDragStart,\r\n              ontouchstart: onDragStart,\r\n              onkeydown: onKeydown,\r\n              onwheel: onWheel,\r\n            }),\r\n      },\r\n      m('.twui-progress-bar', {\r\n        style: {\r\n          width: `${percent}%`,\r\n          'pointer-events': 'none',\r\n          'user-select': 'none',\r\n        },\r\n      }),\r\n    )\r\n  }\r\n\r\n  return {\r\n    onremove: () => {\r\n      drag.deactivate()\r\n    },\r\n    oninit: (node) => {\r\n      fetchState(node)\r\n    },\r\n    onupdate: (node) => {\r\n      fetchState(node)\r\n    },\r\n    view: () => {\r\n      return m(\r\n        'div',\r\n        {\r\n          class: twuiClass(type),\r\n        },\r\n        isSlider ? slider() : null,\r\n        m(\"input[type='number']\", {\r\n          min: min,\r\n          max: max,\r\n          step: step,\r\n          value: value,\r\n          oninput: onInput,\r\n          onchange: onChange,\r\n          onwheel: onWheel,\r\n          onfocus: onFocus,\r\n          onblur: onBlur,\r\n          placeholder: placeholder,\r\n          disabled: disabled,\r\n        }),\r\n      )\r\n    },\r\n  }\r\n}\r\n\r\ncomponent('number', NumberComponent)\r\ncomponent('slider', NumberComponent)\r\n"]}

package/dist/lib/components/controls/point.d.ts

@@ -1,48 +1,48 @@
-import { ComponentModel, ValueSource, ComponentAttrs } from '../../core';
-/**
- * Point component attributes
- * @public
- */
-export declare type PointAttrs = ComponentAttrs<PointModel>;
-/**
- * Point component model
- * @public
- */
-export interface PointModel<T = unknown> extends ComponentModel, ValueSource<T, any> {
-    /**
-     * The type name of the control
-     */
-    type: 'point';
-    /**
-     * The object field names. Defaults to `['x', 'y']`
-     */
-    keys?: string[];
-    /**
-     * X-Axis min and max valuse
-     */
-    xRange?: [number, number];
-    /**
-     * Y-Axis min and max valuse
-     */
-    yRange?: [number, number];
-    /**
-     * Value to reset to when released
-     */
-    reset?: [number, number];
-    /**
-     * Snap to grid value
-     */
-    snap?: number;
-    /**
-     * This is called when the control value has been changed.
-     */
-    onInput?: (model: PointModel<T>, value: number) => void;
-    /**
-     * This is called once the control value is committed by the user.
-     *
-     * @remarks
-     * Unlike the `onInput` callback, this is not necessarily called for each value change.
-     */
-    onChange?: (model: PointModel<T>, value: number) => void;
-}
+import { ComponentModel, ValueSource, ComponentAttrs } from '../../core';
+/**
+ * Point component attributes
+ * @public
+ */
+export type PointAttrs = ComponentAttrs<PointModel>;
+/**
+ * Point component model
+ * @public
+ */
+export interface PointModel<T = unknown> extends ComponentModel, ValueSource<T, any> {
+    /**
+     * The type name of the control
+     */
+    type: 'point';
+    /**
+     * The object field names. Defaults to `['x', 'y']`
+     */
+    keys?: string[];
+    /**
+     * X-Axis min and max valuse
+     */
+    xRange?: [number, number];
+    /**
+     * Y-Axis min and max valuse
+     */
+    yRange?: [number, number];
+    /**
+     * Value to reset to when released
+     */
+    reset?: [number, number];
+    /**
+     * Snap to grid value
+     */
+    snap?: number;
+    /**
+     * This is called when the control value has been changed.
+     */
+    onInput?: (model: PointModel<T>, value: number) => void;
+    /**
+     * This is called once the control value is committed by the user.
+     *
+     * @remarks
+     * Unlike the `onInput` callback, this is not necessarily called for each value change.
+     */
+    onChange?: (model: PointModel<T>, value: number) => void;
+}
 //# sourceMappingURL=point.d.ts.map

package/dist/lib/components/controls/point.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/point.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuB,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG7F;;;GAGG;AACH,oBAAY,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAEnD;;;GAGG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,EAAE,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC;IAClF;;OAEG;IACH,IAAI,EAAE,OAAO,CAAA;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACzD"}
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/point.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuB,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG7F;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAEnD;;;GAGG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,EAAE,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC;IAClF;;OAEG;IACH,IAAI,EAAE,OAAO,CAAA;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACzD"}

package/dist/lib/components/controls/point.js

@@ -0,0 +1,137 @@
+import m from 'mithril';
+import { component, getValue } from '../../core';
+import { call, clamp, twuiClass, getTouchPoint, dragUtil } from '../../core/utils';
+const TYPE = 'point';
+const DEFAULT_RANGE = [0, 1];
+const DEFAULT_KEYS = ['x', 'y'];
+component(TYPE, (vnode) => {
+    let kx;
+    let ky;
+    let xRange = DEFAULT_RANGE;
+    let yRange = DEFAULT_RANGE;
+    let vx = 0;
+    let vy = 0;
+    let x = 0;
+    let y = 0;
+    let rx;
+    let ry;
+    let snap;
+    function fetchValue(node) {
+        var _a;
+        const data = node.attrs.data;
+        const keys = data.keys || DEFAULT_KEYS;
+        kx = keys[0];
+        ky = keys[1];
+        const value = (_a = getValue(data)) !== null && _a !== void 0 ? _a : {
+            [kx]: vx,
+            [ky]: vy,
+        };
+        snap = data.snap;
+        vx = value[kx] || 0;
+        vy = value[ky] || 0;
+        xRange = data.xRange || xRange;
+        yRange = data.yRange || yRange;
+        x = (vx - xRange[0]) / (xRange[1] - xRange[0]);
+        y = (vy - yRange[0]) / (yRange[1] - yRange[0]);
+        const reset = data.reset;
+        if (reset) {
+            rx = (reset[0] - xRange[0]) / (xRange[1] - xRange[0]);
+            ry = (reset[1] - yRange[0]) / (yRange[1] - yRange[0]);
+        }
+    }
+    function updateValue() {
+        vx = xRange[0] + (xRange[1] - xRange[0]) * x;
+        vy = yRange[0] + (yRange[1] - yRange[0]) * y;
+        if (snap > 0) {
+            vx = Math.floor(vx / snap) * snap;
+            vy = Math.floor(vy / snap) * snap;
+            x = (vx - xRange[0]) / (xRange[1] - xRange[0]);
+            y = (vy - yRange[0]) / (yRange[1] - yRange[0]);
+        }
+    }
+    function onChange(type) {
+        var _a;
+        updateValue();
+        const data = vnode.attrs.data;
+        const value = (_a = getValue(data)) !== null && _a !== void 0 ? _a : {
+            [kx]: vx,
+            [ky]: vy,
+        };
+        value[kx] = vx;
+        value[ky] = vy;
+        call(type === 'input' ? data.onInput : data.onChange, data, value);
+    }
+    function onMouseDown(e) {
+        drag.activate(e);
+    }
+    const drag = dragUtil({
+        onMove: (e) => {
+            e.preventDefault();
+            const target = drag.target;
+            const rect = target.getBoundingClientRect();
+            const tx = window.pageXOffset || document.documentElement.scrollLeft;
+            const ty = window.pageYOffset || document.documentElement.scrollTop;
+            const cw = target.clientWidth;
+            const ch = target.clientHeight;
+            let [cx, cy] = getTouchPoint(e);
+            x = clamp((cx - tx - rect.left) / cw, 0, 1);
+            y = clamp((cy - ty - rect.top) / ch, 0, 1);
+            onChange('input');
+            m.redraw();
+        },
+        onEnd: () => {
+            drag.deactivate();
+            if (rx != null && ry != null) {
+                x = rx;
+                y = ry;
+                onChange('input');
+            }
+            onChange('change');
+            m.redraw();
+        },
+    });
+    return {
+        onremove: drag.deactivate,
+        oninit: fetchValue,
+        onupdate: fetchValue,
+        view: () => m('div', {
+            class: twuiClass(TYPE),
+            tabindex: 0,
+            onmousedown: onMouseDown,
+            ontouchstart: onMouseDown,
+        }, m('.point-x-axis', {
+            style: {
+                'pointer-events': 'none',
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: `${y * 100}%`,
+                height: `1px`,
+            },
+        }), m('.point-y-axis', {
+            style: {
+                'pointer-events': 'none',
+                position: 'absolute',
+                left: `${x * 100}%`,
+                top: 0,
+                bottom: 0,
+                width: `1px`,
+            },
+        }), m('.point-cursor', {
+            style: {
+                'pointer-events': 'none',
+                left: `${x * 100}%`,
+                top: `${y * 100}%`,
+                position: 'absolute',
+                width: '11px',
+                height: '11px',
+                'margin-top': '-5px',
+                'margin-left': '-5px',
+                border: '1px solid white',
+                'border-radius': '5px',
+                'box-shadow': '0px 0px 2px 1px rgba(0, 0, 0, 0.75)',
+            },
+        })),
+    };
+});
+//# sourceMappingURL=point.js.map

package/dist/lib/components/controls/point.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"point.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/point.ts"],"names":[],"mappings":"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","sourcesContent":["import m from 'mithril'\r\n\r\nimport { component, getValue, ComponentModel, ValueSource, ComponentAttrs } from '../../core'\r\nimport { call, clamp, use, twuiClass, viewFn, getTouchPoint, dragUtil } from '../../core/utils'\r\n\r\n/**\r\n * Point component attributes\r\n * @public\r\n */\r\nexport type PointAttrs = ComponentAttrs<PointModel>\r\n\r\n/**\r\n * Point component model\r\n * @public\r\n */\r\nexport interface PointModel<T = unknown> extends ComponentModel, ValueSource<T, any> {\r\n  /**\r\n   * The type name of the control\r\n   */\r\n  type: 'point'\r\n  /**\r\n   * The object field names. Defaults to `['x', 'y']`\r\n   */\r\n  keys?: string[]\r\n  /**\r\n   * X-Axis min and max valuse\r\n   */\r\n  xRange?: [number, number]\r\n  /**\r\n   * Y-Axis min and max valuse\r\n   */\r\n  yRange?: [number, number]\r\n  /**\r\n   * Value to reset to when released\r\n   */\r\n  reset?: [number, number]\r\n  /**\r\n   * Snap to grid value\r\n   */\r\n  snap?: number\r\n  /**\r\n   * This is called when the control value has been changed.\r\n   */\r\n  onInput?: (model: PointModel<T>, value: number) => void\r\n  /**\r\n   * This is called once the control value is committed by the user.\r\n   *\r\n   * @remarks\r\n   * Unlike the `onInput` callback, this is not necessarily called for each value change.\r\n   */\r\n  onChange?: (model: PointModel<T>, value: number) => void\r\n}\r\n\r\nconst TYPE = 'point'\r\nconst DEFAULT_RANGE = [0, 1]\r\nconst DEFAULT_KEYS = ['x', 'y']\r\ncomponent<PointAttrs>(TYPE, (vnode) => {\r\n  let kx: any\r\n  let ky: any\r\n  let xRange = DEFAULT_RANGE\r\n  let yRange = DEFAULT_RANGE\r\n  let vx = 0\r\n  let vy = 0\r\n  let x = 0\r\n  let y = 0\r\n  let rx: number\r\n  let ry: number\r\n  let snap: number\r\n\r\n  function fetchValue(node: m.Vnode<PointAttrs>) {\r\n    const data = node.attrs.data\r\n    const keys = data.keys || DEFAULT_KEYS\r\n    kx = keys[0]\r\n    ky = keys[1]\r\n    const value: any = getValue(data) ?? {\r\n      [kx]: vx,\r\n      [ky]: vy,\r\n    }\r\n    snap = data.snap\r\n    vx = value[kx] || 0\r\n    vy = value[ky] || 0\r\n    xRange = data.xRange || xRange\r\n    yRange = data.yRange || yRange\r\n    x = (vx - xRange[0]) / (xRange[1] - xRange[0])\r\n    y = (vy - yRange[0]) / (yRange[1] - yRange[0])\r\n    const reset = data.reset\r\n    if (reset) {\r\n      rx = (reset[0] - xRange[0]) / (xRange[1] - xRange[0])\r\n      ry = (reset[1] - yRange[0]) / (yRange[1] - yRange[0])\r\n    }\r\n  }\r\n\r\n  function updateValue() {\r\n    vx = xRange[0] + (xRange[1] - xRange[0]) * x\r\n    vy = yRange[0] + (yRange[1] - yRange[0]) * y\r\n    if (snap > 0) {\r\n      vx = Math.floor(vx / snap) * snap\r\n      vy = Math.floor(vy / snap) * snap\r\n      x = (vx - xRange[0]) / (xRange[1] - xRange[0])\r\n      y = (vy - yRange[0]) / (yRange[1] - yRange[0])\r\n    }\r\n  }\r\n\r\n  function onChange(type: 'change' | 'input') {\r\n    updateValue()\r\n    const data = vnode.attrs.data\r\n    const value: any = getValue(data) ?? {\r\n      [kx]: vx,\r\n      [ky]: vy,\r\n    }\r\n    value[kx] = vx\r\n    value[ky] = vy\r\n    call(type === 'input' ? data.onInput : data.onChange, data, value)\r\n  }\r\n\r\n  function onMouseDown(e: MouseEvent) {\r\n    drag.activate(e)\r\n  }\r\n\r\n  const drag = dragUtil({\r\n    onMove: (e) => {\r\n      e.preventDefault()\r\n      const target = drag.target\r\n      const rect = target.getBoundingClientRect()\r\n      const tx = window.pageXOffset || document.documentElement.scrollLeft\r\n      const ty = window.pageYOffset || document.documentElement.scrollTop\r\n\r\n      const cw = target.clientWidth\r\n      const ch = target.clientHeight\r\n      let [cx, cy] = getTouchPoint(e)\r\n      x = clamp((cx - tx - rect.left) / cw, 0, 1)\r\n      y = clamp((cy - ty - rect.top) / ch, 0, 1)\r\n\r\n      onChange('input')\r\n      m.redraw()\r\n    },\r\n    onEnd: () => {\r\n      drag.deactivate()\r\n      if (rx != null && ry != null) {\r\n        x = rx\r\n        y = ry\r\n        onChange('input')\r\n      }\r\n      onChange('change')\r\n      m.redraw()\r\n    },\r\n  })\r\n\r\n  return {\r\n    onremove: drag.deactivate,\r\n    oninit: fetchValue,\r\n    onupdate: fetchValue,\r\n    view: () =>\r\n      m(\r\n        'div',\r\n        {\r\n          class: twuiClass(TYPE),\r\n          tabindex: 0,\r\n          onmousedown: onMouseDown,\r\n          ontouchstart: onMouseDown,\r\n        },\r\n        m('.point-x-axis', {\r\n          style: {\r\n            'pointer-events': 'none',\r\n            position: 'absolute',\r\n            left: 0,\r\n            right: 0,\r\n            top: `${y * 100}%`,\r\n            height: `1px`,\r\n          },\r\n        }),\r\n        m('.point-y-axis', {\r\n          style: {\r\n            'pointer-events': 'none',\r\n            position: 'absolute',\r\n            left: `${x * 100}%`,\r\n            top: 0,\r\n            bottom: 0,\r\n            width: `1px`,\r\n          },\r\n        }),\r\n        m('.point-cursor', {\r\n          style: {\r\n            'pointer-events': 'none',\r\n            left: `${x * 100}%`,\r\n            top: `${y * 100}%`,\r\n            position: 'absolute',\r\n            width: '11px',\r\n            height: '11px',\r\n            'margin-top': '-5px',\r\n            'margin-left': '-5px',\r\n            border: '1px solid white',\r\n            'border-radius': '5px',\r\n            'box-shadow': '0px 0px 2px 1px rgba(0, 0, 0, 0.75)',\r\n          },\r\n        }),\r\n      ),\r\n  }\r\n})\r\n"]}

package/dist/lib/components/controls/position.d.ts

@@ -1,56 +1,56 @@
-import { ComponentAttrs, ComponentModel, ValueSource } from '../../core';
-/**
- * @public
- */
-export declare type PositionValue = number[] | {
-    [key: string]: number;
-} | {
-    [key: number]: number;
-};
-/**
- * Position component attributes
- * @public
- */
-export declare type PositionAttrs = ComponentAttrs<PositionModel>;
-/**
- * Position component model
- * @public
- */
-export declare type PositionModel<T = unknown> = ComponentModel & ValueSource<T, PositionValue> & {
-    /**
-     * The type name of the control
-     */
-    type: 'position';
-    /**
-     * The position object field names. Defaults to `['x', 'y', 'z']`
-     */
-    keys?: string[];
-    /**
-     * The min value
-     */
-    min?: number;
-    /**
-     * The max value
-     */
-    max?: number;
-    /**
-     * The step value
-     */
-    step?: number;
-    /**
-     * This is called when the control value has been changed.
-     */
-    onInput?: (model: PositionModel<T>, value: unknown, key?: string | number) => void;
-    /**
-     * This is called once the control value is committed by the user.
-     *
-     * @remarks
-     * Unlike the `onInput` callback, this is not necessarily called for each value change.
-     */
-    onChange?: (model: PositionModel<T>, value: unknown, key?: string | number) => void;
-    /**
-     * Disables the control input
-     */
-    disabled?: boolean;
-};
+import { ComponentAttrs, ComponentModel, ValueSource } from '../../core';
+/**
+ * @public
+ */
+export type PositionValue = number[] | {
+    [key: string]: number;
+} | {
+    [key: number]: number;
+};
+/**
+ * Position component attributes
+ * @public
+ */
+export type PositionAttrs = ComponentAttrs<PositionModel>;
+/**
+ * Position component model
+ * @public
+ */
+export type PositionModel<T = unknown> = ComponentModel & ValueSource<T, PositionValue> & {
+    /**
+     * The type name of the control
+     */
+    type: 'position';
+    /**
+     * The position object field names. Defaults to `['x', 'y', 'z']`
+     */
+    keys?: string[];
+    /**
+     * The min value
+     */
+    min?: number;
+    /**
+     * The max value
+     */
+    max?: number;
+    /**
+     * The step value
+     */
+    step?: number;
+    /**
+     * This is called when the control value has been changed.
+     */
+    onInput?: (model: PositionModel<T>, value: unknown, key?: string | number) => void;
+    /**
+     * This is called once the control value is committed by the user.
+     *
+     * @remarks
+     * Unlike the `onInput` callback, this is not necessarily called for each value change.
+     */
+    onChange?: (model: PositionModel<T>, value: unknown, key?: string | number) => void;
+    /**
+     * Disables the control input
+     */
+    disabled?: boolean;
+};
 //# sourceMappingURL=position.d.ts.map

package/dist/lib/components/controls/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/position.ts"],"names":[],"mappings":"AAEA,OAAO,EAKL,cAAc,EACd,cAAc,EACd,WAAW,EACZ,MAAM,YAAY,CAAA;AAInB;;GAEG;AACH,oBAAY,aAAa,GACrB,MAAM,EAAE,GACR;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACzB;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE7B;;;GAGG;AACH,oBAAY,aAAa,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAEzD;;;GAGG;AACH,oBAAY,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,cAAc,GACrD,WAAW,CAAC,CAAC,EAAE,aAAa,CAAC,GAAG;IAC9B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EACvB,KAAK,EAAE,OAAO,EACd,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,KAClB,IAAI,CAAA;IACT;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EACvB,KAAK,EAAE,OAAO,EACd,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,KAClB,IAAI,CAAA;IACT;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAA"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/controls/position.ts"],"names":[],"mappings":"AAEA,OAAO,EAKL,cAAc,EACd,cAAc,EACd,WAAW,EACZ,MAAM,YAAY,CAAA;AAInB;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,EAAE,GACR;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACzB;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE7B;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAEzD;;;GAGG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,cAAc,GACrD,WAAW,CAAC,CAAC,EAAE,aAAa,CAAC,GAAG;IAC9B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EACvB,KAAK,EAAE,OAAO,EACd,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,KAClB,IAAI,CAAA;IACT;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EACvB,KAAK,EAAE,OAAO,EACd,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,KAClB,IAAI,CAAA;IACT;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAA"}

package/dist/lib/components/controls/position.js

@@ -0,0 +1,36 @@
+import m from 'mithril';
+import { getValue, component, setValue, renderModel, } from '../../core';
+import { call, twuiClass, viewFn } from '../../core/utils';
+const TYPE = 'position';
+const defaultKeys = ['x', 'y', 'z'];
+component(TYPE, (node) => {
+    function onChange(type, field, v) {
+        const data = node.attrs.data;
+        const value = getValue(data) || {};
+        value[field] = isNaN(v) ? null : v;
+        const written = setValue(data, value);
+        call(type === 'input' ? data.onInput : data.onChange, data, written, field);
+    }
+    return {
+        view: viewFn((data) => {
+            const keys = data.keys || defaultKeys;
+            const value = getValue(data);
+            return m('div', {
+                class: twuiClass(TYPE),
+            }, keys.map((field) => {
+                return renderModel({
+                    type: 'number',
+                    min: data.min,
+                    max: data.max,
+                    step: data.step,
+                    value: value === null || value === void 0 ? void 0 : value[field],
+                    disabled: data.disabled,
+                    onInput: (_, v) => onChange('input', field, v),
+                    onChange: (_, v) => onChange('change', field, v),
+                    placeholder: field,
+                });
+            }));
+        }),
+    };
+});
+//# sourceMappingURL=position.js.map

package/dist/lib/components/controls/position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.js","sourceRoot":"","sources":["../../../../src/lib/components/controls/position.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,SAAS,CAAA;AAEvB,OAAO,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,WAAW,GAIZ,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAoE1D,MAAM,IAAI,GAAG,UAAU,CAAA;AACvB,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;AACnC,SAAS,CAAgB,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;IACtC,SAAS,QAAQ,CAAC,IAAwB,EAAE,KAAa,EAAE,CAAS;QAClE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;QAC5B,MAAM,KAAK,GAAQ,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;QACvC,KAAK,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;QAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;QACrC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAA;IAC7E,CAAC;IAED,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,WAAW,CAAA;YACrC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAQ,CAAA;YACnC,OAAO,CAAC,CACN,KAAK,EACL;gBACE,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC;aACvB,EACD,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACjB,OAAO,WAAW,CAAc;oBAC9B,IAAI,EAAE,QAAQ;oBACd,GAAG,EAAE,IAAI,CAAC,GAAG;oBACb,GAAG,EAAE,IAAI,CAAC,GAAG;oBACb,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,KAAK,CAAC;oBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;oBACtD,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;oBACxD,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAA;YACJ,CAAC,CAAC,CACH,CAAA;QACH,CAAC,CAAC;KACH,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import m from 'mithril'\r\n\r\nimport {\r\n  getValue,\r\n  component,\r\n  setValue,\r\n  renderModel,\r\n  ComponentAttrs,\r\n  ComponentModel,\r\n  ValueSource,\r\n} from '../../core'\r\nimport { call, twuiClass, viewFn } from '../../core/utils'\r\nimport { NumberModel } from './number'\r\n\r\n/**\r\n * @public\r\n */\r\nexport type PositionValue =\r\n  | number[]\r\n  | { [key: string]: number }\r\n  | { [key: number]: number }\r\n\r\n/**\r\n * Position component attributes\r\n * @public\r\n */\r\nexport type PositionAttrs = ComponentAttrs<PositionModel>\r\n\r\n/**\r\n * Position component model\r\n * @public\r\n */\r\nexport type PositionModel<T = unknown> = ComponentModel &\r\n  ValueSource<T, PositionValue> & {\r\n    /**\r\n     * The type name of the control\r\n     */\r\n    type: 'position'\r\n    /**\r\n     * The position object field names. Defaults to `['x', 'y', 'z']`\r\n     */\r\n    keys?: string[]\r\n    /**\r\n     * The min value\r\n     */\r\n    min?: number\r\n    /**\r\n     * The max value\r\n     */\r\n    max?: number\r\n    /**\r\n     * The step value\r\n     */\r\n    step?: number\r\n    /**\r\n     * This is called when the control value has been changed.\r\n     */\r\n    onInput?: (\r\n      model: PositionModel<T>,\r\n      value: unknown,\r\n      key?: string | number,\r\n    ) => void\r\n    /**\r\n     * This is called once the control value is committed by the user.\r\n     *\r\n     * @remarks\r\n     * Unlike the `onInput` callback, this is not necessarily called for each value change.\r\n     */\r\n    onChange?: (\r\n      model: PositionModel<T>,\r\n      value: unknown,\r\n      key?: string | number,\r\n    ) => void\r\n    /**\r\n     * Disables the control input\r\n     */\r\n    disabled?: boolean,\r\n  }\r\n\r\nconst TYPE = 'position'\r\nconst defaultKeys = ['x', 'y', 'z']\r\ncomponent<PositionAttrs>(TYPE, (node) => {\r\n  function onChange(type: 'input' | 'change', field: string, v: number) {\r\n    const data = node.attrs.data\r\n    const value: any = getValue(data) || {}\r\n    value[field] = isNaN(v) ? null : v\r\n    const written = setValue(data, value)\r\n    call(type === 'input' ? data.onInput : data.onChange, data, written, field)\r\n  }\r\n\r\n  return {\r\n    view: viewFn((data) => {\r\n      const keys = data.keys || defaultKeys\r\n      const value = getValue(data) as any\r\n      return m(\r\n        'div',\r\n        {\r\n          class: twuiClass(TYPE),\r\n        },\r\n        keys.map((field) => {\r\n          return renderModel<NumberModel>({\r\n            type: 'number',\r\n            min: data.min,\r\n            max: data.max,\r\n            step: data.step,\r\n            value: value?.[field],\r\n            disabled: data.disabled,\r\n            onInput: (_, v: number) => onChange('input', field, v),\r\n            onChange: (_, v: number) => onChange('change', field, v),\r\n            placeholder: field,\r\n          })\r\n        }),\r\n      )\r\n    }),\r\n  }\r\n})\r\n"]}