verstak 0.24.125 → 0.24.127

package/build/dist/source/archive/RxDomV1.js

@@ -85,7 +85,7 @@ RxNodeInstanceImpl.gUuid = 0;
 __decorate([
     reactive,
     options({
-        reentrance: Reentrance.CancelPrevious,
+        reentrance: Reentrance.cancelPrevious,
         triggeringArgs: true,
         noSideEffects: true
     }),

package/build/dist/source/html/El.d.ts

@@ -2,12 +2,10 @@ import { RxNode, BaseDriver } from "reactronic";
 export declare class ElDriver<T extends Element, M = unknown> extends BaseDriver<El<T, M>> {
     allocate(node: RxNode<El<T, M>>): El<T, M>;
 }
-export type BaseEl<T = any, M = any> = {
+export type El<T = any, M = any> = {
     readonly node: RxNode<El<T, M>>;
-    model: M;
-};
-export type El<T = any, M = any> = BaseEl<T, M> & {
     native: T;
+    model: M;
     kind: ElKind;
     area: ElArea;
     widthGrowth: number;

package/build/dist/source/html/Elements.d.ts

@@ -1,4 +1,4 @@
-import { RxNodeDecl, RxNode } from "reactronic";
+import { RxNodeDecl, RxNode, Delegate } from "reactronic";
 import { El, ElArea } from "./El.js";
 import { HtmlElementDriver } from "./HtmlDriver.js";
 export declare function Section<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
@@ -9,7 +9,8 @@ export declare function cursor(areaParams: ElArea): void;
 export declare function Note(content: string, declaration?: RxNodeDecl<El<HTMLElement, void>>): RxNode<El<HTMLElement, void>>;
 export declare function HtmlNote(content: string, declaration?: RxNodeDecl<El<HTMLElement, void>>): RxNode<El<HTMLElement, void>>;
 export declare function Group<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
-export declare function PseudoElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>, preset?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
+export declare function Handler<M = unknown>(update: Delegate<El<void, M>>): RxNode<El<void, M>>;
+export declare function SyntheticElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>, preset?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
 export declare class VerstakElementDriver<T extends HTMLElement> extends HtmlElementDriver<T> {
     update(node: RxNode<El<T>>): void | Promise<void>;
 }

package/build/dist/source/html/Elements.js

@@ -1,4 +1,4 @@
-import { RxNode } from "reactronic";
+import { RxNode, Mode } from "reactronic";
 import { Constants, CursorCommandDriver, ElKind, ElDriver } from "./El.js";
 import { HtmlElementDriver } from "./HtmlDriver.js";
 export function Section(declaration, preset) {
@@ -38,7 +38,10 @@ export function HtmlNote(content, declaration) {
 export function Group(declaration, preset) {
     return RxNode.acquire(Drivers.group, declaration, preset);
 }
-export function PseudoElement(declaration, preset) {
+export function Handler(update) {
+    return SyntheticElement({ mode: Mode.independentUpdate, update });
+}
+export function SyntheticElement(declaration, preset) {
     return RxNode.acquire(Drivers.pseudo, declaration, preset);
 }
 export class VerstakElementDriver extends HtmlElementDriver {

package/build/dist/source/html/Handlers.d.ts

@@ -0,0 +1,6 @@
+import { ToggleRef } from "reactronic";
+import { FocusModel } from "./sensors/FocusSensor.js";
+import { ResizedElement } from "./sensors/ResizeSensor.js";
+export declare function OnClick(target: HTMLElement, action: (() => void) | ToggleRef | undefined, key?: string): void;
+export declare function OnResize(target: HTMLElement, action: ((element: ResizedElement) => void) | undefined, key?: string): void;
+export declare function OnFocus(target: HTMLElement, model: FocusModel, switchEditMode?: ((model?: FocusModel) => void) | undefined, key?: string): void;

package/build/dist/source/html/Handlers.js

@@ -0,0 +1,55 @@
+import { Mode, ToggleRef, unobs } from "reactronic";
+import { SyntheticElement } from "./Elements.js";
+export function OnClick(target, action, key) {
+    if (action !== undefined) {
+        SyntheticElement({
+            key,
+            mode: Mode.independentUpdate,
+            triggers: { target },
+            update() {
+                const pointer = target.sensors.pointer;
+                if (pointer.clicked) {
+                    if (action instanceof Function) {
+                        unobs(() => action());
+                    }
+                    else if (action instanceof ToggleRef) {
+                        unobs(() => action.toggle());
+                    }
+                }
+            },
+        });
+    }
+}
+export function OnResize(target, action, key) {
+    if (action) {
+        SyntheticElement({
+            key,
+            mode: Mode.independentUpdate,
+            triggers: { target },
+            update() {
+                const resize = target.sensors.resize;
+                resize.resizedElements.forEach(x => {
+                    action(x);
+                });
+            },
+        });
+    }
+}
+export function OnFocus(target, model, switchEditMode = undefined, key) {
+    SyntheticElement({
+        key,
+        mode: Mode.independentUpdate,
+        triggers: { target, model },
+        initialize(b) {
+            b.node.configureReactronic({ throttling: 0 });
+        },
+        update() {
+            if (switchEditMode !== undefined) {
+                switchEditMode(model);
+            }
+            else {
+                model.isEditMode ? target.focus() : target.blur();
+            }
+        },
+    });
+}

package/build/dist/source/html/HtmlApiExt.d.ts

@@ -1,6 +1,8 @@
 import { DataForSensor } from "./sensors/DataForSensor.js";
+import { HtmlSensors } from "./sensors/HtmlSensors.js";
 declare global {
     interface Element {
+        sensors: HtmlSensors;
         dataForSensor: DataForSensor;
         resizeObserver?: ResizeObserver;
     }

package/build/dist/source/html/HtmlApiExt.js

@@ -1,6 +1,16 @@
-import { SymDataForSensor, SymResizeObserver } from "./sensors/DataForSensor.js";
+import { SymDataForSensor, SymHtmlSensors, SymResizeObserver } from "./sensors/DataForSensor.js";
+import { HtmlSensors } from "./sensors/HtmlSensors.js";
 const ElementType = global.Element;
 if (ElementType !== undefined) {
+    Object.defineProperty(ElementType.prototype, "sensors", {
+        configurable: false, enumerable: false,
+        get() {
+            let result = this[SymHtmlSensors];
+            if (result === undefined)
+                result = this[SymHtmlSensors] = new HtmlSensors(this);
+            return result;
+        },
+    });
     Object.defineProperty(ElementType.prototype, "dataForSensor", {
         configurable: false, enumerable: false,
         get() {

package/build/dist/source/html/api.d.ts

@@ -4,7 +4,7 @@ export * from "./HtmlDriver.js";
 export * from "./HtmlElements.js";
 export * from "./HtmlApiExt.js";
 export * from "./Elements.js";
-export * from "./ReactingFocuser.js";
+export * from "./Handlers.js";
 export * from "./sensors/Sensor.js";
 export * from "./sensors/PointerSensor.js";
 export * from "./sensors/BasePointerSensor.js";

package/build/dist/source/html/api.js

@@ -4,7 +4,7 @@ export * from "./HtmlDriver.js";
 export * from "./HtmlElements.js";
 export * from "./HtmlApiExt.js";
 export * from "./Elements.js";
-export * from "./ReactingFocuser.js";
+export * from "./Handlers.js";
 export * from "./sensors/Sensor.js";
 export * from "./sensors/PointerSensor.js";
 export * from "./sensors/BasePointerSensor.js";

package/build/dist/source/html/sensors/BasePointerSensor.d.ts

@@ -12,7 +12,7 @@ export declare class BasePointerSensor extends HtmlElementSensor {
     positionX: number;
     positionY: number;
     modifiers: KeyboardModifiers;
-    constructor(focusSensor?: FocusSensor, windowSensor?: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, focusSensor?: FocusSensor, windowSensor?: WindowSensor);
 }
 export declare function extractPointerButton(e: MouseEvent): PointerButton;
 export declare function isPointerButtonDown(button: PointerButton, buttonsMask: number): boolean;

package/build/dist/source/html/sensors/BasePointerSensor.js

@@ -8,8 +8,8 @@ export var PointerButton;
     PointerButton[PointerButton["Middle"] = 4] = "Middle";
 })(PointerButton || (PointerButton = {}));
 export class BasePointerSensor extends HtmlElementSensor {
-    constructor(focusSensor, windowSensor) {
-        super(focusSensor, windowSensor);
+    constructor(element, focusSensor, windowSensor) {
+        super(element, focusSensor, windowSensor);
         this.positionX = Infinity;
         this.positionY = Infinity;
         this.modifiers = KeyboardModifiers.None;

package/build/dist/source/html/sensors/ButtonSensor.d.ts

@@ -15,8 +15,8 @@ export declare class ButtonSensor extends BasePointerSensor {
     selectedX: number;
     selectedY: number;
     selected: boolean;
-    constructor(focusSensor: FocusSensor, windowSensor: WindowSensor);
-    listen(element: HTMLElement | undefined, enabled?: boolean): void;
+    constructor(element: HTMLElement | SVGElement, focusSensor: FocusSensor, windowSensor: WindowSensor);
+    listen(enabled?: boolean): void;
     protected onPointerDown(e: PointerEvent): void;
     protected onPointerMove(e: PointerEvent): void;
     protected onPointerUp(e: PointerEvent): void;

package/build/dist/source/html/sensors/ButtonSensor.js

@@ -19,8 +19,8 @@ export var ButtonState;
     ButtonState[ButtonState["Released"] = 3] = "Released";
 })(ButtonState || (ButtonState = {}));
 export class ButtonSensor extends BasePointerSensor {
-    constructor(focusSensor, windowSensor) {
-        super(focusSensor, windowSensor);
+    constructor(element, focusSensor, windowSensor) {
+        super(element, focusSensor, windowSensor);
         this.state = ButtonState.Released;
         this.pointerButton = PointerButton.None;
         this.originData = undefined;
@@ -29,24 +29,21 @@ export class ButtonSensor extends BasePointerSensor {
         this.selectedY = Infinity;
         this.selected = false;
     }
-    listen(element, enabled = true) {
-        const existing = this.sourceElement;
-        if (element !== existing) {
-            if (existing) {
-                existing.removeEventListener("pointerdown", this.onPointerDown.bind(this), { capture: true });
-                existing.removeEventListener("pointermove", this.onPointerMove.bind(this), { capture: true });
-                existing.removeEventListener("pointerup", this.onPointerUp.bind(this), { capture: true });
-                existing.removeEventListener("lostpointercapture", this.onLostPointerCapture.bind(this), { capture: true });
-                existing.removeEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
-            }
-            this.sourceElement = element;
-            if (element && enabled) {
-                element.addEventListener("pointerdown", this.onPointerDown.bind(this), { capture: true });
-                element.addEventListener("pointermove", this.onPointerMove.bind(this), { capture: true });
-                element.addEventListener("pointerup", this.onPointerUp.bind(this), { capture: true });
-                element.addEventListener("lostpointercapture", this.onLostPointerCapture.bind(this), { capture: true });
-                element.addEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
-            }
+    listen(enabled = true) {
+        const element = this.sourceElement;
+        if (enabled) {
+            element.addEventListener("pointerdown", this.onPointerDown.bind(this), { capture: true });
+            element.addEventListener("pointermove", this.onPointerMove.bind(this), { capture: true });
+            element.addEventListener("pointerup", this.onPointerUp.bind(this), { capture: true });
+            element.addEventListener("lostpointercapture", this.onLostPointerCapture.bind(this), { capture: true });
+            element.addEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
+        }
+        else {
+            element.removeEventListener("pointerdown", this.onPointerDown.bind(this), { capture: true });
+            element.removeEventListener("pointermove", this.onPointerMove.bind(this), { capture: true });
+            element.removeEventListener("pointerup", this.onPointerUp.bind(this), { capture: true });
+            element.removeEventListener("lostpointercapture", this.onLostPointerCapture.bind(this), { capture: true });
+            element.removeEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
         }
     }
     onPointerDown(e) {
@@ -161,12 +158,6 @@ export class ButtonSensor extends BasePointerSensor {
         this.revision++;
     }
 }
-__decorate([
-    transactional,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Boolean]),
-    __metadata("design:returntype", void 0)
-], ButtonSensor.prototype, "listen", null);
 __decorate([
     transactional,
     options({ logging: LoggingLevel.Off }),
@@ -176,7 +167,7 @@ __decorate([
 ], ButtonSensor.prototype, "press", null);
 __decorate([
     transactional,
-    options({ reentrance: Reentrance.CancelPrevious, logging: LoggingLevel.Off }),
+    options({ reentrance: Reentrance.cancelPrevious, logging: LoggingLevel.Off }),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [PointerEvent]),
     __metadata("design:returntype", void 0)

package/build/dist/source/html/sensors/DataForSensor.d.ts

@@ -13,6 +13,7 @@ export type DataForSensor = {
     htmlDraggable?: unknown;
     button?: unknown;
 };
+export declare const SymHtmlSensors: unique symbol;
 export declare const SymDataForSensor: unique symbol;
 export declare const SymResizeObserver: unique symbol;
 export declare const EmptyDataArray: any[];

package/build/dist/source/html/sensors/DataForSensor.js

@@ -1,3 +1,4 @@
+export const SymHtmlSensors = Symbol("HtmlSensors");
 export const SymDataForSensor = Symbol("DataForSensor");
 export const SymResizeObserver = Symbol("ResizeObserver");
 export const EmptyDataArray = [];

package/build/dist/source/html/sensors/FocusSensor.d.ts

@@ -15,9 +15,9 @@ export declare class FocusSensor extends HtmlElementSensor {
     activeData: unknown;
     oldActiveData: unknown;
     contextElementDataList: unknown[];
-    constructor(windowSensor: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, windowSensor: WindowSensor);
     setActiveData(data: unknown, debugHint?: string): void;
-    listen(element: HTMLElement | undefined, enabled?: boolean): void;
+    listen(enabled?: boolean): void;
     reset(): void;
     protected onFocusIn(e: FocusEvent): void;
     protected onFocusOut(e: FocusEvent): void;

package/build/dist/source/html/sensors/FocusSensor.js

@@ -12,8 +12,8 @@ import { objectHasMember } from "../ElUtils.js";
 import { grabElementDataList, SymDataForSensor } from "./DataForSensor.js";
 import { HtmlElementSensor } from "./HtmlElementSensor.js";
 export class FocusSensor extends HtmlElementSensor {
-    constructor(windowSensor) {
-        super(undefined, windowSensor);
+    constructor(element, windowSensor) {
+        super(element, undefined, windowSensor);
         this.activeData = undefined;
         this.oldActiveData = undefined;
         this.contextElementDataList = [];
@@ -36,20 +36,17 @@ export class FocusSensor extends HtmlElementSensor {
             this.activeData = data;
         }
     }
-    listen(element, enabled = true) {
-        const existing = this.sourceElement;
-        if (element !== existing) {
-            if (existing) {
-                existing.removeEventListener("focusin", this.onFocusIn.bind(this), { capture: true });
-                existing.removeEventListener("focusout", this.onFocusOut.bind(this), { capture: true });
-                existing.removeEventListener("mousedown", this.onMouseDown.bind(this), { capture: true });
-            }
-            this.sourceElement = element;
-            if (element && enabled) {
-                element.addEventListener("focusin", this.onFocusIn.bind(this), { capture: true });
-                element.addEventListener("focusout", this.onFocusOut.bind(this), { capture: true });
-                element.addEventListener("mousedown", this.onMouseDown.bind(this), { capture: true });
-            }
+    listen(enabled = true) {
+        const element = this.sourceElement;
+        if (enabled) {
+            element.addEventListener("focusin", this.onFocusIn.bind(this), { capture: true });
+            element.addEventListener("focusout", this.onFocusOut.bind(this), { capture: true });
+            element.addEventListener("mousedown", this.onMouseDown.bind(this), { capture: true });
+        }
+        else {
+            element.removeEventListener("focusin", this.onFocusIn.bind(this), { capture: true });
+            element.removeEventListener("focusout", this.onFocusOut.bind(this), { capture: true });
+            element.removeEventListener("mousedown", this.onMouseDown.bind(this), { capture: true });
         }
     }
     reset() {
@@ -138,7 +135,7 @@ __decorate([
 __decorate([
     transactional,
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Boolean]),
+    __metadata("design:paramtypes", [Boolean]),
     __metadata("design:returntype", void 0)
 ], FocusSensor.prototype, "listen", null);
 __decorate([

package/build/dist/source/html/sensors/HoverSensor.d.ts

@@ -1,10 +1,21 @@
 import { BasePointerSensor } from "./BasePointerSensor.js";
+export type IHoverable = {
+    isHovered: boolean;
+    onHoverStart?: (hover: HoverSensor) => void;
+    onHoverEnd?: (hover: HoverSensor) => void;
+};
 export declare class HoverSensor extends BasePointerSensor {
+    isHovered: boolean;
     target: unknown;
-    constructor();
-    listen(element: HTMLElement | undefined, enabled?: boolean): void;
+    constructor(element: HTMLElement | SVGElement);
+    listen(enabled?: boolean): void;
+    protected onPointerEnter(e: PointerEvent): void;
     protected onPointerOver(e: PointerEvent): void;
-    protected onPointerOut(e: PointerEvent): void;
+    protected onPointerMove(e: PointerEvent): void;
+    protected onPointerLeave(e: PointerEvent): void;
+    protected doPointerEnter(e: PointerEvent): void;
     protected doPointerOver(e: PointerEvent): void;
-    protected doPointerOut(): void;
+    protected doPointerMove(e: PointerEvent): void;
+    protected doPointerLeave(e: PointerEvent): void;
+    protected reset(): void;
 }

package/build/dist/source/html/sensors/HoverSensor.js

@@ -8,34 +8,48 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { options, transactional, LoggingLevel } from "reactronic";
-import { findTargetElementData, SymDataForSensor } from "./DataForSensor.js";
-import { extractModifierKeys, KeyboardModifiers } from "./KeyboardSensor.js";
+import { SymDataForSensor, findTargetElementData } from "./DataForSensor.js";
 import { BasePointerSensor } from "./BasePointerSensor.js";
+import { KeyboardModifiers, extractModifierKeys } from "./KeyboardSensor.js";
 export class HoverSensor extends BasePointerSensor {
-    constructor() {
-        super();
+    constructor(element) {
+        super(element);
         this.target = undefined;
+        this.isHovered = false;
         this.target = undefined;
     }
-    listen(element, enabled = true) {
-        const existing = this.sourceElement;
-        if (element !== existing) {
-            if (existing) {
-                existing.removeEventListener("pointerover", this.onPointerOver.bind(this), { capture: true });
-                existing.removeEventListener("pointerout", this.onPointerOut.bind(this), { capture: true });
-            }
-            this.sourceElement = element;
-            if (element && enabled) {
-                element.addEventListener("pointerover", this.onPointerOver.bind(this), { capture: true });
-                element.addEventListener("pointerout", this.onPointerOut.bind(this), { capture: true });
-            }
+    listen(enabled = true) {
+        const element = this.sourceElement;
+        if (enabled) {
+            element.addEventListener("pointerenter", this.onPointerEnter.bind(this));
+            element.addEventListener("pointerover", this.onPointerOver.bind(this), { capture: true });
+            element.addEventListener("pointermove", this.onPointerMove.bind(this), { capture: true });
+            element.addEventListener("pointerleave", this.onPointerLeave.bind(this));
         }
+        else {
+            element.removeEventListener("pointerenter", this.onPointerEnter.bind(this));
+            element.removeEventListener("pointerover", this.onPointerOver.bind(this), { capture: true });
+            element.removeEventListener("pointermove", this.onPointerMove.bind(this), { capture: true });
+            element.removeEventListener("pointerleave", this.onPointerLeave.bind(this));
+        }
+    }
+    onPointerEnter(e) {
+        this.doPointerEnter(e);
     }
     onPointerOver(e) {
         this.doPointerOver(e);
     }
-    onPointerOut(e) {
-        this.doPointerOut();
+    onPointerMove(e) {
+        this.doPointerMove(e);
+    }
+    onPointerLeave(e) {
+        this.doPointerLeave(e);
+    }
+    doPointerEnter(e) {
+        this.preventDefault = false;
+        this.stopPropagation = false;
+        this.isHovered = true;
+        this.revision++;
     }
     doPointerOver(e) {
         var _a;
@@ -49,21 +63,34 @@ export class HoverSensor extends BasePointerSensor {
         this.positionY = e.clientY;
         this.revision++;
     }
-    doPointerOut() {
+    doPointerMove(e) {
+        this.preventDefault = false;
+        this.stopPropagation = false;
+        this.modifiers = extractModifierKeys(e);
+        this.positionX = e.clientX;
+        this.positionY = e.clientY;
+        this.revision++;
+    }
+    doPointerLeave(e) {
+        this.reset();
+    }
+    reset() {
         this.preventDefault = false;
         this.stopPropagation = false;
+        this.isHovered = false;
+        this.target = undefined;
         this.positionX = Infinity;
         this.positionY = Infinity;
         this.modifiers = KeyboardModifiers.None;
-        this.target = undefined;
     }
 }
 __decorate([
     transactional,
+    options({ logging: LoggingLevel.Off }),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Boolean]),
+    __metadata("design:paramtypes", [PointerEvent]),
     __metadata("design:returntype", void 0)
-], HoverSensor.prototype, "listen", null);
+], HoverSensor.prototype, "doPointerEnter", null);
 __decorate([
     transactional,
     options({ logging: LoggingLevel.Off }),
@@ -71,10 +98,24 @@ __decorate([
     __metadata("design:paramtypes", [PointerEvent]),
     __metadata("design:returntype", void 0)
 ], HoverSensor.prototype, "doPointerOver", null);
+__decorate([
+    transactional,
+    options({ logging: LoggingLevel.Off }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [PointerEvent]),
+    __metadata("design:returntype", void 0)
+], HoverSensor.prototype, "doPointerMove", null);
+__decorate([
+    transactional,
+    options({ logging: LoggingLevel.Off }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [PointerEvent]),
+    __metadata("design:returntype", void 0)
+], HoverSensor.prototype, "doPointerLeave", null);
 __decorate([
     transactional,
     options({ logging: LoggingLevel.Off }),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
-], HoverSensor.prototype, "doPointerOut", null);
+], HoverSensor.prototype, "reset", null);

package/build/dist/source/html/sensors/HtmlDragSensor.d.ts

@@ -33,12 +33,12 @@ export declare class HtmlDragSensor extends HtmlElementSensor {
     immediatePositionX: number;
     immediatePositionY: number;
     immediateModifiers: KeyboardModifiers;
-    constructor(focusSensor: FocusSensor, windowSensor: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, focusSensor: FocusSensor, windowSensor: WindowSensor);
     getData(format: string): unknown;
     setData(format: string, value: unknown): void;
     clearData(format?: string): void;
     setDragImage(value: HTMLElement, x: number, y: number): void;
-    listen(element: HTMLElement | undefined, enabled?: boolean): void;
+    listen(enabled?: boolean): void;
     protected onDragStart(e: DragEvent): void;
     protected onDrag(e: DragEvent): void;
     protected onDragEnter(e: DragEvent): void;

package/build/dist/source/html/sensors/HtmlDragSensor.js

@@ -12,8 +12,8 @@ import { findTargetElementData, SymDataForSensor } from "./DataForSensor.js";
 import { HtmlElementSensor } from "./HtmlElementSensor.js";
 import { extractModifierKeys, KeyboardModifiers } from "./KeyboardSensor.js";
 export class HtmlDragSensor extends HtmlElementSensor {
-    constructor(focusSensor, windowSensor) {
-        super(focusSensor, windowSensor);
+    constructor(element, focusSensor, windowSensor) {
+        super(element, focusSensor, windowSensor);
         this.draggable = undefined;
         this.dragSource = undefined;
         this.dragTarget = undefined;
@@ -60,28 +60,25 @@ export class HtmlDragSensor extends HtmlElementSensor {
         this.draggingImageX = x;
         this.draggingImageY = y;
     }
-    listen(element, enabled = true) {
-        const existing = this.sourceElement;
-        if (element !== existing) {
-            if (existing) {
-                existing.removeEventListener("dragstart", this.onDragStart.bind(this), { capture: true });
-                existing.removeEventListener("drag", this.onDrag.bind(this), { capture: true });
-                existing.removeEventListener("dragenter", this.onDragEnter.bind(this), { capture: false });
-                existing.removeEventListener("dragleave", this.onDragLeave.bind(this), { capture: false });
-                existing.removeEventListener("dragover", this.onDragOver.bind(this), { capture: true });
-                existing.removeEventListener("drop", this.onDrop.bind(this), { capture: true });
-                existing.removeEventListener("dragend", this.onDragEnd.bind(this), { capture: true });
-            }
-            this.sourceElement = element;
-            if (element && enabled) {
-                element.addEventListener("dragstart", this.onDragStart.bind(this), { capture: true });
-                element.addEventListener("drag", this.onDrag.bind(this), { capture: true });
-                element.addEventListener("dragenter", this.onDragEnter.bind(this), { capture: false });
-                element.addEventListener("dragleave", this.onDragLeave.bind(this), { capture: false });
-                element.addEventListener("dragover", this.onDragOver.bind(this), { capture: true });
-                element.addEventListener("drop", this.onDrop.bind(this), { capture: true });
-                element.addEventListener("dragend", this.onDragEnd.bind(this), { capture: true });
-            }
+    listen(enabled = true) {
+        const element = this.sourceElement;
+        if (enabled) {
+            element.addEventListener("dragstart", this.onDragStart.bind(this), { capture: true });
+            element.addEventListener("drag", this.onDrag.bind(this), { capture: true });
+            element.addEventListener("dragenter", this.onDragEnter.bind(this), { capture: false });
+            element.addEventListener("dragleave", this.onDragLeave.bind(this), { capture: false });
+            element.addEventListener("dragover", this.onDragOver.bind(this), { capture: true });
+            element.addEventListener("drop", this.onDrop.bind(this), { capture: true });
+            element.addEventListener("dragend", this.onDragEnd.bind(this), { capture: true });
+        }
+        else {
+            element.removeEventListener("dragstart", this.onDragStart.bind(this), { capture: true });
+            element.removeEventListener("drag", this.onDrag.bind(this), { capture: true });
+            element.removeEventListener("dragenter", this.onDragEnter.bind(this), { capture: false });
+            element.removeEventListener("dragleave", this.onDragLeave.bind(this), { capture: false });
+            element.removeEventListener("dragover", this.onDragOver.bind(this), { capture: true });
+            element.removeEventListener("drop", this.onDrop.bind(this), { capture: true });
+            element.removeEventListener("dragend", this.onDragEnd.bind(this), { capture: true });
         }
     }
     onDragStart(e) {
@@ -291,12 +288,6 @@ __decorate([
     raw,
     __metadata("design:type", Boolean)
 ], HtmlDragSensor.prototype, "dropAllowed", void 0);
-__decorate([
-    transactional,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Boolean]),
-    __metadata("design:returntype", void 0)
-], HtmlDragSensor.prototype, "listen", null);
 __decorate([
     transactional,
     options({ logging: LoggingLevel.Off }),

package/build/dist/source/html/sensors/HtmlElementSensor.d.ts

@@ -2,12 +2,12 @@ import { DataForSensor } from "./DataForSensor.js";
 import { Sensor } from "./Sensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 export declare class HtmlElementSensor extends Sensor {
+    readonly sourceElement: HTMLElement | SVGElement;
     readonly focusSensor?: any;
     readonly windowSensor?: WindowSensor;
-    sourceElement: HTMLElement | undefined;
     preventDefault: boolean;
     stopPropagation: boolean;
-    constructor(focusSensor?: any, windowSensor?: WindowSensor);
-    protected getDefaultSensorData(): DataForSensor | undefined;
+    constructor(sourceElement: HTMLElement | SVGElement, focusSensor?: any, windowSensor?: WindowSensor);
+    protected getDefaultSensorData(): DataForSensor;
     protected setPreventDefaultAndStopPropagation(e: Event): void;
 }

package/build/dist/source/html/sensors/HtmlElementSensor.js

@@ -12,17 +12,16 @@ import { SymDataForSensor } from "./DataForSensor.js";
 import { Sensor } from "./Sensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 export class HtmlElementSensor extends Sensor {
-    constructor(focusSensor, windowSensor) {
+    constructor(sourceElement, focusSensor, windowSensor) {
         super();
-        this.sourceElement = undefined;
+        this.sourceElement = sourceElement;
         this.focusSensor = focusSensor;
         this.windowSensor = windowSensor;
         this.preventDefault = false;
         this.stopPropagation = false;
     }
     getDefaultSensorData() {
-        const sourceElement = this.sourceElement;
-        return sourceElement ? sourceElement[SymDataForSensor] : undefined;
+        return this.sourceElement[SymDataForSensor];
     }
     setPreventDefaultAndStopPropagation(e) {
         if (this.preventDefault) {
@@ -35,6 +34,10 @@ export class HtmlElementSensor extends Sensor {
         }
     }
 }
+__decorate([
+    raw,
+    __metadata("design:type", Object)
+], HtmlElementSensor.prototype, "sourceElement", void 0);
 __decorate([
     raw,
     __metadata("design:type", Object)

package/build/dist/source/html/sensors/HtmlSensors.d.ts

@@ -5,18 +5,30 @@ import { KeyboardSensor } from "./KeyboardSensor.js";
 import { ButtonSensor } from "./ButtonSensor.js";
 import { ResizeSensor } from "./ResizeSensor.js";
 import { WheelSensor } from "./WheelSensor.js";
+import { ScrollSensor } from "./ScrollSensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 import { PointerSensor } from "./PointerSensor.js";
 export declare class HtmlSensors {
-    readonly window: WindowSensor;
-    readonly focus: FocusSensor;
-    readonly hover: HoverSensor;
-    readonly keyboard: KeyboardSensor;
-    readonly wheel: WheelSensor;
-    readonly resize: ResizeSensor;
-    readonly htmlDrag: HtmlDragSensor;
-    readonly button: ButtonSensor;
-    readonly pointer: PointerSensor;
-    constructor();
-    listen(element: HTMLElement | undefined, enabled?: boolean): void;
+    private readonly _element;
+    private _window;
+    get window(): WindowSensor;
+    private _focus;
+    get focus(): FocusSensor;
+    private _hover;
+    get hover(): HoverSensor;
+    private _keyboard;
+    get keyboard(): KeyboardSensor;
+    private _wheel;
+    get wheel(): WheelSensor;
+    private _scroll;
+    get scroll(): ScrollSensor;
+    private _resize;
+    get resize(): ResizeSensor;
+    private _htmlDrag;
+    get htmlDrag(): HtmlDragSensor;
+    private _button;
+    get button(): ButtonSensor;
+    private _pointer;
+    get pointer(): PointerSensor;
+    constructor(element: HTMLElement | SVGElement);
 }

package/build/dist/source/html/sensors/HtmlSensors.js

@@ -1,13 +1,3 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { transactional } from "reactronic";
 import { FocusSensor } from "./FocusSensor.js";
 import { HoverSensor } from "./HoverSensor.js";
 import { HtmlDragSensor } from "./HtmlDragSensor.js";
@@ -15,33 +5,89 @@ import { KeyboardSensor } from "./KeyboardSensor.js";
 import { ButtonSensor } from "./ButtonSensor.js";
 import { ResizeSensor } from "./ResizeSensor.js";
 import { WheelSensor } from "./WheelSensor.js";
+import { ScrollSensor } from "./ScrollSensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 import { PointerSensor } from "./PointerSensor.js";
 export class HtmlSensors {
-    constructor() {
-        this.window = new WindowSensor();
-        this.focus = new FocusSensor(this.window);
-        this.hover = new HoverSensor();
-        this.keyboard = new KeyboardSensor();
-        this.wheel = new WheelSensor();
-        this.resize = new ResizeSensor();
-        this.htmlDrag = new HtmlDragSensor(this.focus, this.window);
-        this.button = new ButtonSensor(this.focus, this.window);
-        this.pointer = new PointerSensor(this.focus, this.window);
-    }
-    listen(element, enabled = true) {
-        this.focus.listen(element, enabled);
-        this.hover.listen(element, enabled);
-        this.keyboard.listen(element, enabled);
-        this.wheel.listen(element, enabled);
-        this.htmlDrag.listen(element, enabled);
-        this.button.listen(element, enabled);
-        this.pointer.listen(element, enabled);
+    get window() {
+        if (this._window === undefined) {
+            this._window = new WindowSensor();
+        }
+        return this._window;
+    }
+    get focus() {
+        if (this._focus === undefined) {
+            this._focus = new FocusSensor(this._element, this.window);
+            this._focus.listen();
+        }
+        return this._focus;
+    }
+    get hover() {
+        if (this._hover === undefined) {
+            this._hover = new HoverSensor(this._element);
+            this._hover.listen();
+        }
+        return this._hover;
+    }
+    get keyboard() {
+        if (this._keyboard === undefined) {
+            this._keyboard = new KeyboardSensor(this._element);
+            this._keyboard.listen();
+        }
+        return this._keyboard;
+    }
+    get wheel() {
+        if (this._wheel === undefined) {
+            this._wheel = new WheelSensor(this._element);
+            this._wheel.listen();
+        }
+        return this._wheel;
+    }
+    get scroll() {
+        if (this._scroll === undefined) {
+            this._scroll = new ScrollSensor(this._element);
+            this._scroll.listen();
+        }
+        return this._scroll;
+    }
+    get resize() {
+        if (this._resize === undefined) {
+            this._resize = new ResizeSensor();
+        }
+        return this._resize;
+    }
+    get htmlDrag() {
+        if (this._htmlDrag === undefined) {
+            this._htmlDrag = new HtmlDragSensor(this._element, this.focus, this.window);
+            this._htmlDrag.listen();
+        }
+        return this._htmlDrag;
+    }
+    get button() {
+        if (this._button === undefined) {
+            this._button = new ButtonSensor(this._element, this.focus, this.window);
+            this._button.listen();
+        }
+        return this._button;
+    }
+    get pointer() {
+        if (this._pointer === undefined) {
+            this._pointer = new PointerSensor(this._element, this.focus, this.window);
+            this._pointer.listen();
+        }
+        return this._pointer;
+    }
+    constructor(element) {
+        this._element = element;
+        this._window = undefined;
+        this._focus = undefined;
+        this._hover = undefined;
+        this._keyboard = undefined;
+        this._wheel = undefined;
+        this._scroll = undefined;
+        this._resize = undefined;
+        this._htmlDrag = undefined;
+        this._button = undefined;
+        this._pointer = undefined;
     }
 }
-__decorate([
-    transactional,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Boolean]),
-    __metadata("design:returntype", void 0)
-], HtmlSensors.prototype, "listen", null);

package/build/dist/source/html/sensors/KeyboardSensor.d.ts

@@ -20,8 +20,8 @@ export declare class KeyboardSensor extends HtmlElementSensor {
     down: string;
     up: string;
     modifiers: KeyboardModifiers;
-    constructor();
-    listen(element: HTMLElement | undefined, enabled?: boolean): void;
+    constructor(element: HTMLElement | SVGElement);
+    listen(enabled?: boolean): void;
     reset(): void;
     protected onKeyDown(e: KeyboardEvent): void;
     protected onKeyUp(e: KeyboardEvent): void;

package/build/dist/source/html/sensors/KeyboardSensor.js

@@ -29,24 +29,21 @@ export var KeyboardModifiers;
     KeyboardModifiers[KeyboardModifiers["AltMeta"] = 12] = "AltMeta";
 })(KeyboardModifiers || (KeyboardModifiers = {}));
 export class KeyboardSensor extends HtmlElementSensor {
-    constructor() {
-        super();
+    constructor(element) {
+        super(element);
         this.down = "";
         this.up = "";
         this.modifiers = KeyboardModifiers.None;
     }
-    listen(element, enabled = true) {
-        const existing = this.sourceElement;
-        if (element !== existing) {
-            if (existing) {
-                existing.removeEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
-                existing.removeEventListener("keyup", this.onKeyUp.bind(this), { capture: true });
-            }
-            this.sourceElement = element;
-            if (element && enabled) {
-                element.addEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
-                element.addEventListener("keyup", this.onKeyUp.bind(this), { capture: true });
-            }
+    listen(enabled = true) {
+        const element = this.sourceElement;
+        if (enabled) {
+            element.addEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
+            element.addEventListener("keyup", this.onKeyUp.bind(this), { capture: true });
+        }
+        else {
+            element.removeEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
+            element.removeEventListener("keyup", this.onKeyUp.bind(this), { capture: true });
         }
     }
     reset() {
@@ -95,12 +92,6 @@ export class KeyboardSensor extends HtmlElementSensor {
         return modifier;
     }
 }
-__decorate([
-    transactional,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Boolean]),
-    __metadata("design:returntype", void 0)
-], KeyboardSensor.prototype, "listen", null);
 __decorate([
     transactional,
     __metadata("design:type", Function),

package/build/dist/source/html/sensors/PointerSensor.d.ts

@@ -34,10 +34,10 @@ export declare class PointerSensor extends BasePointerSensor {
     immediatePositionY: number;
     immediateModifiers: KeyboardModifiers;
     static readonly DraggingThreshold = 4;
-    constructor(focusSensor: FocusSensor, windowSensor: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, focusSensor: FocusSensor, windowSensor: WindowSensor);
     getData(): unknown;
     setData(value: unknown): void;
-    listen(element: HTMLElement | undefined, enabled?: boolean): void;
+    listen(enabled?: boolean): void;
     protected onPointerDown(e: PointerEvent): void;
     protected onPointerMove(e: PointerEvent): void;
     protected onPointerUp(e: PointerEvent): void;
@@ -54,6 +54,7 @@ export declare class PointerSensor extends BasePointerSensor {
     protected cancelDragging(): void;
     protected reset(): void;
     protected updateClicking(e: PointerEvent): boolean;
+    private _getDefaultDataForSensor;
     protected updateDragTarget(e: PointerEvent): void;
     protected whenClickingOrDragging(): void;
     protected whenMoving(): void;

package/build/dist/source/html/sensors/PointerSensor.js

@@ -12,8 +12,8 @@ import { extractPointerButton, isPointerButtonDown, PointerButton, BasePointerSe
 import { findTargetElementData, SymDataForSensor } from "./DataForSensor.js";
 import { extractModifierKeys, KeyboardModifiers } from "./KeyboardSensor.js";
 export class PointerSensor extends BasePointerSensor {
-    constructor(focusSensor, windowSensor) {
-        super(focusSensor, windowSensor);
+    constructor(element, focusSensor, windowSensor) {
+        super(element, focusSensor, windowSensor);
         this.hotPositionX = Infinity;
         this.hotPositionY = Infinity;
         this.pointerButton = PointerButton.None;
@@ -51,24 +51,16 @@ export class PointerSensor extends BasePointerSensor {
     setData(value) {
         this.draggingData = value;
     }
-    listen(element, enabled = true) {
-        const existing = this.sourceElement;
-        if (element !== existing) {
-            if (existing) {
-                existing.removeEventListener("pointerdown", this.onPointerDown.bind(this), { capture: true });
-                existing.removeEventListener("pointermove", this.onPointerMove.bind(this), { capture: true });
-                existing.removeEventListener("pointerup", this.onPointerUp.bind(this), { capture: true });
-                existing.removeEventListener("lostpointercapture", this.onLostPointerCapture.bind(this), { capture: true });
-                existing.removeEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
-            }
-            this.sourceElement = element;
-            if (element && enabled) {
-                element.addEventListener("pointerdown", this.onPointerDown.bind(this), { capture: true });
-                element.addEventListener("pointermove", this.onPointerMove.bind(this), { capture: true });
-                element.addEventListener("pointerup", this.onPointerUp.bind(this), { capture: true });
-                element.addEventListener("lostpointercapture", this.onLostPointerCapture.bind(this), { capture: true });
-                element.addEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
-            }
+    listen(enabled = true) {
+        const element = this.sourceElement;
+        if (enabled) {
+            element.addEventListener("pointerdown", this.onPointerDown.bind(this), { capture: true });
+            element.addEventListener("pointermove", this.onPointerMove.bind(this), { capture: true });
+            element.addEventListener("pointerup", this.onPointerUp.bind(this), { capture: true });
+            element.addEventListener("lostpointercapture", this.onLostPointerCapture.bind(this), { capture: true });
+            element.addEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
+        }
+        else {
         }
     }
     onPointerDown(e) {
@@ -134,20 +126,20 @@ export class PointerSensor extends BasePointerSensor {
         this.immediatePositionY = e.clientY;
     }
     tryClickingOrDragging(e) {
-        var _a;
+        var _a, _b;
         this.preventDefault = false;
         this.stopPropagation = false;
         const targetPath = e.composedPath();
         const underPointer = document.elementsFromPoint(e.clientX, e.clientY);
         const { data, window } = findTargetElementData(targetPath, underPointer, SymDataForSensor, ["click", "draggable"]);
-        const clickable = data === null || data === void 0 ? void 0 : data.click;
+        const clickable = (_a = data === null || data === void 0 ? void 0 : data.click) !== null && _a !== void 0 ? _a : this._getDefaultDataForSensor(e);
         const draggable = data === null || data === void 0 ? void 0 : data.draggable;
         if (clickable || draggable) {
             this.clickable = clickable;
             this.clicking = clickable;
             this.draggableData = draggable;
             this.tryingDragging = draggable !== undefined;
-            this.dragSource = (_a = findTargetElementData(targetPath, underPointer, SymDataForSensor, ["drag"], true).data) === null || _a === void 0 ? void 0 : _a.drag;
+            this.dragSource = (_b = findTargetElementData(targetPath, underPointer, SymDataForSensor, ["drag"], true).data) === null || _b === void 0 ? void 0 : _b.drag;
             this.pointerButton = extractPointerButton(e);
             this.startX = e.clientX;
             this.startY = e.clientY;
@@ -248,7 +240,8 @@ export class PointerSensor extends BasePointerSensor {
         var _a;
         const targetPath = e.composedPath();
         const underPointer = document.elementsFromPoint(e.clientX, e.clientY);
-        const clickable = (_a = findTargetElementData(targetPath, underPointer, SymDataForSensor, ["click"]).data) === null || _a === void 0 ? void 0 : _a.click;
+        let clickable = (_a = findTargetElementData(targetPath, underPointer, SymDataForSensor, ["click"]).data) === null || _a === void 0 ? void 0 : _a.click;
+        clickable = clickable !== null && clickable !== void 0 ? clickable : this._getDefaultDataForSensor(e);
         const isSameClickable = this.clickable === clickable;
         if (isSameClickable)
             this.clicking = clickable;
@@ -257,6 +250,9 @@ export class PointerSensor extends BasePointerSensor {
         this.immediatePositionY = e.clientY;
         return isSameClickable;
     }
+    _getDefaultDataForSensor(e) {
+        return e.currentTarget === this.sourceElement ? e.currentTarget : undefined;
+    }
     updateDragTarget(e) {
         const targetPath = e.composedPath();
         const underPointer = document.elementsFromPoint(e.clientX, e.clientY);
@@ -302,12 +298,6 @@ __decorate([
     raw,
     __metadata("design:type", Boolean)
 ], PointerSensor.prototype, "dropAllowed", void 0);
-__decorate([
-    transactional,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Boolean]),
-    __metadata("design:returntype", void 0)
-], PointerSensor.prototype, "listen", null);
 __decorate([
     transactional,
     options({ logging: LoggingLevel.Off }),
@@ -324,7 +314,7 @@ __decorate([
 ], PointerSensor.prototype, "tryClickingOrDragging", null);
 __decorate([
     transactional,
-    options({ reentrance: Reentrance.CancelPrevious, logging: LoggingLevel.Off }),
+    options({ reentrance: Reentrance.cancelPrevious, logging: LoggingLevel.Off }),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [PointerEvent]),
     __metadata("design:returntype", void 0)

package/build/dist/source/html/sensors/ScrollSensor.d.ts

@@ -0,0 +1,12 @@
+import { HtmlElementSensor } from "./HtmlElementSensor.js";
+export declare class ScrollSensor extends HtmlElementSensor {
+    x: number;
+    y: number;
+    constructor(element: HTMLElement | SVGElement);
+    listen(enabled?: boolean): void;
+    reset(): void;
+    protected onScroll(e: Event): void;
+    protected doScroll(e: Event): void;
+    protected doReset(): void;
+    protected updateSensorData(e: Event): void;
+}

package/build/dist/source/html/sensors/ScrollSensor.js

@@ -0,0 +1,62 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { options, Reentrance, transactional, LoggingLevel } from "reactronic";
+import { HtmlElementSensor } from "./HtmlElementSensor.js";
+export class ScrollSensor extends HtmlElementSensor {
+    constructor(element) {
+        super(element);
+        this.x = Infinity;
+        this.y = Infinity;
+    }
+    listen(enabled = true) {
+        const element = this.sourceElement;
+        if (enabled) {
+            element.addEventListener("scroll", this.onScroll.bind(this), { capture: true, passive: true });
+        }
+        else {
+            element.removeEventListener("scroll", this.onScroll.bind(this), { capture: true });
+        }
+    }
+    reset() {
+        this.doReset();
+    }
+    onScroll(e) {
+        this.doScroll(e);
+    }
+    doScroll(e) {
+        this.updateSensorData(e);
+    }
+    doReset() {
+        this.preventDefault = false;
+        this.stopPropagation = false;
+        this.x = Infinity;
+        this.y = Infinity;
+    }
+    updateSensorData(e) {
+        this.preventDefault = false;
+        this.stopPropagation = false;
+        this.x = this.sourceElement.scrollLeft;
+        this.y = this.sourceElement.scrollTop;
+        this.revision++;
+    }
+}
+__decorate([
+    transactional,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ScrollSensor.prototype, "reset", null);
+__decorate([
+    transactional,
+    options({ reentrance: Reentrance.cancelPrevious, logging: LoggingLevel.Off }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], ScrollSensor.prototype, "doScroll", null);

package/build/dist/source/html/sensors/WheelSensor.d.ts

@@ -3,8 +3,8 @@ export declare class WheelSensor extends BasePointerSensor {
     target: unknown;
     deltaX: number;
     deltaY: number;
-    constructor();
-    listen(element: HTMLElement | undefined, enabled?: boolean): void;
+    constructor(element: HTMLElement | SVGElement);
+    listen(enabled?: boolean): void;
     reset(): void;
     protected onWheel(e: WheelEvent): void;
     protected doWheel(e: WheelEvent): void;

package/build/dist/source/html/sensors/WheelSensor.js

@@ -12,23 +12,20 @@ import { findTargetElementData, SymDataForSensor } from "./DataForSensor.js";
 import { extractModifierKeys, KeyboardModifiers } from "./KeyboardSensor.js";
 import { BasePointerSensor } from "./BasePointerSensor.js";
 export class WheelSensor extends BasePointerSensor {
-    constructor() {
-        super();
+    constructor(element) {
+        super(element);
         this.target = undefined;
         this.target = undefined;
         this.deltaX = Infinity;
         this.deltaY = Infinity;
     }
-    listen(element, enabled = true) {
-        const existing = this.sourceElement;
-        if (element !== existing) {
-            if (existing) {
-                existing.removeEventListener("wheel", this.onWheel.bind(this), { capture: true });
-            }
-            this.sourceElement = element;
-            if (element && enabled) {
-                element.addEventListener("wheel", this.onWheel.bind(this), { capture: true, passive: true });
-            }
+    listen(enabled = true) {
+        const element = this.sourceElement;
+        if (enabled) {
+            element.addEventListener("wheel", this.onWheel.bind(this), { capture: true, passive: true });
+        }
+        else {
+            element.removeEventListener("wheel", this.onWheel.bind(this), { capture: true });
         }
     }
     reset() {
@@ -65,12 +62,6 @@ export class WheelSensor extends BasePointerSensor {
         this.revision++;
     }
 }
-__decorate([
-    transactional,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Boolean]),
-    __metadata("design:returntype", void 0)
-], WheelSensor.prototype, "listen", null);
 __decorate([
     transactional,
     __metadata("design:type", Function),
@@ -79,7 +70,7 @@ __decorate([
 ], WheelSensor.prototype, "reset", null);
 __decorate([
     transactional,
-    options({ reentrance: Reentrance.CancelPrevious, logging: LoggingLevel.Off }),
+    options({ reentrance: Reentrance.cancelPrevious, logging: LoggingLevel.Off }),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [WheelEvent]),
     __metadata("design:returntype", void 0)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verstak",
-  "version": "0.24.125",
+  "version": "0.24.127",
   "description": "Verstak - Front-End Library",
   "publisher": "Nezaboodka Software",
   "license": "Apache-2.0",
@@ -31,15 +31,15 @@
   },
   "homepage": "https://github.com/nezaboodka/verstak/blob/master/README.md#readme",
   "dependencies": {
-    "reactronic": "^0.24.125"
+    "reactronic": "^0.24.127"
   },
   "devDependencies": {
-    "@types/node": "20.10.4",
-    "@typescript-eslint/eslint-plugin": "6.13.2",
-    "@typescript-eslint/parser": "6.13.2",
-    "ava": "5.3.1",
-    "c8": "8.0.1",
-    "eslint": "8.55.0",
+    "@types/node": "20.11.16",
+    "@typescript-eslint/eslint-plugin": "6.20.0",
+    "@typescript-eslint/parser": "6.20.0",
+    "ava": "6.1.1",
+    "c8": "9.1.0",
+    "eslint": "8.56.0",
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "typescript": "5.3.2"

package/build/dist/source/html/ReactingFocuser.d.ts

@@ -1,2 +0,0 @@
-import { FocusModel } from "./sensors/FocusSensor.js";
-export declare function FocuserReaction(key: string, target: HTMLElement, model: FocusModel, switchEditMode?: ((model?: FocusModel) => void) | undefined): void;

package/build/dist/source/html/ReactingFocuser.js

@@ -1,20 +0,0 @@
-import { Mode } from "reactronic";
-import { PseudoElement } from "./Elements.js";
-export function FocuserReaction(key, target, model, switchEditMode = undefined) {
-    PseudoElement({
-        key,
-        mode: Mode.IndependentUpdate,
-        triggers: { target, model },
-        initialize(b) {
-            b.node.configureReactronic({ throttling: 0 });
-        },
-        update() {
-            if (switchEditMode !== undefined) {
-                switchEditMode(model);
-            }
-            else {
-                model.isEditMode ? target.focus() : target.blur();
-            }
-        },
-    });
-}