verstak 0.22.412

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

@@ -0,0 +1,96 @@
+import { Rx } from 'reactronic';
+import { RxNode, NodeFactory } from '../core/api';
+export class ElementNodeFactory extends NodeFactory {
+    initialize(node, element) {
+        element = this.createElement(node);
+        if (Rx.isLogging)
+            element.id = node.name;
+        super.initialize(node, element);
+    }
+    finalize(node, isLeader) {
+        var _a;
+        const e = node.element;
+        if (e) {
+            (_a = e.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(e);
+            if (isLeader)
+                e.remove();
+        }
+        super.finalize(node, isLeader);
+        return false;
+    }
+    arrange(node, strict) {
+        const e = node.element;
+        if (e) {
+            const nativeParent = ElementNodeFactory.findNearestParentHtmlElementNode(node).element;
+            if (nativeParent) {
+                if (strict) {
+                    const after = ElementNodeFactory.findPrevSiblingHtmlElementNode(node.item);
+                    if (after === undefined) {
+                        if (nativeParent !== e.parentNode || !e.previousSibling)
+                            nativeParent.prepend(e);
+                    }
+                    else if (after.self.parent.element === nativeParent) {
+                        const nativeAfter = after.self.element;
+                        if (nativeAfter instanceof Element) {
+                            if (nativeAfter.nextSibling !== e)
+                                nativeParent.insertBefore(e, nativeAfter.nextSibling);
+                        }
+                    }
+                }
+                else
+                    nativeParent.appendChild(e);
+            }
+        }
+    }
+    render(node) {
+        const result = super.render(node);
+        if (gBlinkingEffect)
+            blink(node.element, RxNode.currentRenderingPriority, node.stamp);
+        return result;
+    }
+    static get blinkingEffect() {
+        return gBlinkingEffect;
+    }
+    static set blinkingEffect(value) {
+        if (value === undefined) {
+            const effect = gBlinkingEffect;
+            RxNode.forAllNodesDo((e) => {
+                if (e instanceof HTMLElement)
+                    e.classList.remove(`${effect}-0`, `${effect}-1`);
+            });
+        }
+        gBlinkingEffect = value;
+    }
+    static findNearestParentHtmlElementNode(node) {
+        let p = node.parent;
+        while (p.element instanceof Element === false && p !== node)
+            p = p.parent;
+        return p;
+    }
+    static findPrevSiblingHtmlElementNode(item) {
+        let p = item.prev;
+        while (p && !(p.self.element instanceof Element))
+            p = p.prev;
+        return p;
+    }
+}
+export class HtmlElementNodeFactory extends ElementNodeFactory {
+    createElement(node) {
+        return document.createElement(node.factory.name);
+    }
+}
+export class SvgElementNodeFactory extends ElementNodeFactory {
+    createElement(node) {
+        return document.createElementNS('http://www.w3.org/2000/svg', node.factory.name);
+    }
+}
+function blink(e, priority, revision) {
+    if (e !== undefined) {
+        const n1 = revision % 2;
+        const n2 = 1 >> n1;
+        const effect = gBlinkingEffect;
+        e.classList.toggle(`${effect}-${priority}-${n1}`, true);
+        e.classList.toggle(`${effect}-${priority}-${n2}`, false);
+    }
+}
+let gBlinkingEffect = undefined;

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

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

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

@@ -0,0 +1,11 @@
+import { Reaction } from '../core/Elements';
+export function RxFocuser(name, target, model, switchEditMode = undefined) {
+    Reaction(name, { target, model }, (_, node) => {
+        if (switchEditMode !== undefined) {
+            switchEditMode(model);
+        }
+        else {
+            model.isEditMode ? target.focus() : target.blur();
+        }
+    }, undefined, undefined, 0);
+}

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

@@ -0,0 +1,18 @@
+export * from './HtmlNodeFactory';
+export * from './HtmlElements';
+export * from './HtmlApiExt';
+export * from './RxFocuser';
+export * from './CellRange';
+export * from './sensors/Sensor';
+export * from './sensors/PointerSensor';
+export * from './sensors/BasePointerSensor';
+export * from './sensors/FocusSensor';
+export * from './sensors/ButtonSensor';
+export * from './sensors/HoverSensor';
+export * from './sensors/WheelSensor';
+export * from './sensors/KeyboardSensor';
+export * from './sensors/ResizeSensor';
+export * from './sensors/HtmlDragSensor';
+export * from './sensors/HtmlSensors';
+export * from './sensors/WindowSensor';
+import './HtmlApiExt';

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

@@ -0,0 +1,18 @@
+export * from './HtmlNodeFactory';
+export * from './HtmlElements';
+export * from './HtmlApiExt';
+export * from './RxFocuser';
+export * from './CellRange';
+export * from './sensors/Sensor';
+export * from './sensors/PointerSensor';
+export * from './sensors/BasePointerSensor';
+export * from './sensors/FocusSensor';
+export * from './sensors/ButtonSensor';
+export * from './sensors/HoverSensor';
+export * from './sensors/WheelSensor';
+export * from './sensors/KeyboardSensor';
+export * from './sensors/ResizeSensor';
+export * from './sensors/HtmlDragSensor';
+export * from './sensors/HtmlSensors';
+export * from './sensors/WindowSensor';
+import './HtmlApiExt';

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

@@ -0,0 +1,18 @@
+import { FocusSensor } from './FocusSensor';
+import { HtmlElementSensor } from './HtmlElementSensor';
+import { KeyboardModifiers } from './KeyboardSensor';
+import { WindowSensor } from './WindowSensor';
+export declare enum PointerButton {
+    None = 0,
+    Left = 1,
+    Right = 2,
+    Middle = 4
+}
+export declare class BasePointerSensor extends HtmlElementSensor {
+    positionX: number;
+    positionY: number;
+    modifiers: KeyboardModifiers;
+    constructor(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

@@ -0,0 +1,32 @@
+import { HtmlElementSensor } from './HtmlElementSensor';
+import { KeyboardModifiers } from './KeyboardSensor';
+export var PointerButton;
+(function (PointerButton) {
+    PointerButton[PointerButton["None"] = 0] = "None";
+    PointerButton[PointerButton["Left"] = 1] = "Left";
+    PointerButton[PointerButton["Right"] = 2] = "Right";
+    PointerButton[PointerButton["Middle"] = 4] = "Middle";
+})(PointerButton || (PointerButton = {}));
+export class BasePointerSensor extends HtmlElementSensor {
+    constructor(focusSensor, windowSensor) {
+        super(focusSensor, windowSensor);
+        this.positionX = Infinity;
+        this.positionY = Infinity;
+        this.modifiers = KeyboardModifiers.None;
+    }
+}
+export function extractPointerButton(e) {
+    switch (e.button) {
+        case 0:
+            return PointerButton.Left;
+        case 1:
+            return PointerButton.Middle;
+        case 2:
+            return PointerButton.Right;
+        default:
+            return PointerButton.None;
+    }
+}
+export function isPointerButtonDown(button, buttonsMask) {
+    return (buttonsMask & button) !== 0;
+}

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

@@ -0,0 +1,32 @@
+import { PointerButton, BasePointerSensor } from './BasePointerSensor';
+import { FocusSensor } from './FocusSensor';
+import { WindowSensor } from './WindowSensor';
+export declare enum ButtonState {
+    Pressed = 0,
+    Selecting = 1,
+    Selected = 2,
+    Released = 3
+}
+export declare class ButtonSensor extends BasePointerSensor {
+    state: ButtonState;
+    pointerButton: PointerButton;
+    originData: unknown;
+    selectedData: unknown;
+    selectedX: number;
+    selectedY: number;
+    selected: boolean;
+    constructor(focusSensor: FocusSensor, windowSensor: WindowSensor);
+    listen(element: HTMLElement | undefined, enabled?: boolean): void;
+    protected onPointerDown(e: PointerEvent): void;
+    protected onPointerMove(e: PointerEvent): void;
+    protected onPointerUp(e: PointerEvent): void;
+    protected onLostPointerCapture(e: PointerEvent): void;
+    protected onKeyDown(e: KeyboardEvent): void;
+    protected press(e: PointerEvent): void;
+    protected selecting(e: PointerEvent): void;
+    protected select(e: PointerEvent): void;
+    protected release(): void;
+    protected cancel(): void;
+    protected reset(): void;
+    protected updateSensorData(e: PointerEvent): void;
+}

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

@@ -0,0 +1,211 @@
+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, Transaction, LoggingLevel } from 'reactronic';
+import { extractPointerButton, isPointerButtonDown, PointerButton, BasePointerSensor } from './BasePointerSensor';
+import { findTargetElementData, SymDataForSensor } from './DataForSensor';
+import { extractModifierKeys, KeyboardModifiers } from './KeyboardSensor';
+export var ButtonState;
+(function (ButtonState) {
+    ButtonState[ButtonState["Pressed"] = 0] = "Pressed";
+    ButtonState[ButtonState["Selecting"] = 1] = "Selecting";
+    ButtonState[ButtonState["Selected"] = 2] = "Selected";
+    ButtonState[ButtonState["Released"] = 3] = "Released";
+})(ButtonState || (ButtonState = {}));
+export class ButtonSensor extends BasePointerSensor {
+    constructor(focusSensor, windowSensor) {
+        super(focusSensor, windowSensor);
+        this.state = ButtonState.Released;
+        this.pointerButton = PointerButton.None;
+        this.originData = undefined;
+        this.selectedData = undefined;
+        this.selectedX = Infinity;
+        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 });
+            }
+        }
+    }
+    onPointerDown(e) {
+        if (this.state === ButtonState.Released && (this.pointerButton === PointerButton.None))
+            this.press(e);
+        this.setPreventDefaultAndStopPropagation(e);
+    }
+    onPointerMove(e) {
+        const state = this.state;
+        if (isPointerButtonDown(this.pointerButton, e.buttons)) {
+            if (state === ButtonState.Pressed || state === ButtonState.Selecting)
+                this.selecting(e);
+        }
+        else if (state !== ButtonState.Released) {
+            this.cancel();
+            this.reset();
+        }
+        this.setPreventDefaultAndStopPropagation(e);
+    }
+    onPointerUp(e) {
+        const button = extractPointerButton(e);
+        if (button === this.pointerButton) {
+            if (this.state === ButtonState.Selecting) {
+                this.select(e);
+                this.release();
+            }
+            else if (this.state === ButtonState.Pressed) {
+                this.release();
+            }
+        }
+        else
+            this.cancel();
+        this.reset();
+        this.setPreventDefaultAndStopPropagation(e);
+    }
+    onLostPointerCapture(e) {
+        if (this.state !== ButtonState.Released) {
+            this.cancel();
+            this.reset();
+        }
+    }
+    onKeyDown(e) {
+        if (e.key === 'Escape' && this.state !== ButtonState.Released) {
+            this.cancel();
+            this.reset();
+        }
+    }
+    press(e) {
+        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, ['button']);
+        const originData = data === null || data === void 0 ? void 0 : data.button;
+        if (originData) {
+            this.state = ButtonState.Pressed;
+            this.pointerButton = extractPointerButton(e);
+            this.originData = originData;
+            this.modifiers = extractModifierKeys(e);
+            this.positionX = e.clientX;
+            this.positionY = e.clientY;
+            this.revision++;
+        }
+        Transaction.separate(() => {
+            var _a;
+            (_a = this.windowSensor) === null || _a === void 0 ? void 0 : _a.setActiveWindow(window, 'button');
+        });
+    }
+    selecting(e) {
+        this.updateSensorData(e);
+        this.state = ButtonState.Selecting;
+        this.selected = false;
+    }
+    select(e) {
+        this.updateSensorData(e);
+        this.state = ButtonState.Selected;
+        this.selectedX = e.clientX;
+        this.selectedY = e.clientY;
+        this.selected = true;
+    }
+    release() {
+        this.preventDefault = false;
+        this.stopPropagation = false;
+        this.state = ButtonState.Released;
+        this.revision++;
+    }
+    cancel() {
+        this.state = ButtonState.Released;
+        this.selected = false;
+        this.revision++;
+    }
+    reset() {
+        this.preventDefault = false;
+        this.stopPropagation = false;
+        this.state = ButtonState.Released;
+        this.originData = undefined;
+        this.selectedData = undefined;
+        this.pointerButton = PointerButton.None;
+        this.positionX = Infinity;
+        this.positionY = Infinity;
+        this.selectedX = Infinity;
+        this.selectedY = Infinity;
+        this.modifiers = KeyboardModifiers.None;
+        this.selected = false;
+    }
+    updateSensorData(e) {
+        this.preventDefault = false;
+        this.stopPropagation = false;
+        this.modifiers = extractModifierKeys(e);
+        this.positionX = e.clientX;
+        this.positionY = e.clientY;
+        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 }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [PointerEvent]),
+    __metadata("design:returntype", void 0)
+], ButtonSensor.prototype, "press", null);
+__decorate([
+    transactional,
+    options({ reentrance: Reentrance.CancelPrevious, logging: LoggingLevel.Off }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [PointerEvent]),
+    __metadata("design:returntype", void 0)
+], ButtonSensor.prototype, "selecting", null);
+__decorate([
+    transactional,
+    options({ logging: LoggingLevel.Off }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [PointerEvent]),
+    __metadata("design:returntype", void 0)
+], ButtonSensor.prototype, "select", null);
+__decorate([
+    transactional,
+    options({ logging: LoggingLevel.Off }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ButtonSensor.prototype, "release", null);
+__decorate([
+    transactional,
+    options({ logging: LoggingLevel.Off }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ButtonSensor.prototype, "cancel", null);
+__decorate([
+    transactional,
+    options({ logging: LoggingLevel.Off }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ButtonSensor.prototype, "reset", null);

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

@@ -0,0 +1,27 @@
+export interface DataForSensor {
+    context?: unknown;
+    window?: unknown;
+    focus?: unknown;
+    hover?: unknown;
+    keyboard?: unknown;
+    click?: unknown;
+    wheel?: unknown;
+    resize?: unknown;
+    drag?: unknown;
+    draggable?: unknown;
+    htmlDrag?: unknown;
+    htmlDraggable?: unknown;
+    button?: unknown;
+}
+export declare const SymDataForSensor: unique symbol;
+export declare const SymResizeObserver: unique symbol;
+export declare const EmptyDataArray: any[];
+export declare function findTargetElementData(targetPath: any[], underPointer: any[], sym: symbol, anyOfPayloadKeys: Array<keyof DataForSensor>, ignoreWindow?: boolean): {
+    data?: DataForSensor;
+    window: unknown;
+};
+export declare function grabElementDataList(targetPath: any[], sym: symbol, payloadKey: keyof DataForSensor, existing: Array<unknown>, ignoreWindow?: boolean, predicate?: (element: any) => boolean): {
+    dataList: Array<unknown>;
+    window: unknown;
+    activeData: unknown;
+};

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

@@ -0,0 +1,72 @@
+export const SymDataForSensor = Symbol('DataForSensor');
+export const SymResizeObserver = Symbol('ResizeObserver');
+export const EmptyDataArray = [];
+export function findTargetElementData(targetPath, underPointer, sym, anyOfPayloadKeys, ignoreWindow = false) {
+    let result = undefined;
+    let i = 0;
+    let window = undefined;
+    while (i < targetPath.length) {
+        const candidate = targetPath[i];
+        const candidateData = candidate[sym];
+        if (candidateData !== undefined) {
+            if (!ignoreWindow) {
+                if (window === undefined)
+                    window = candidateData['window'];
+                else if (window !== candidateData['window'])
+                    break;
+            }
+            if (result === undefined) {
+                for (const payloadKey of anyOfPayloadKeys) {
+                    const payload = candidateData[payloadKey];
+                    if (payload !== undefined && underPointer.includes(candidate)) {
+                        result = candidateData;
+                        break;
+                    }
+                }
+            }
+        }
+        i++;
+    }
+    return { data: result, window };
+}
+export function grabElementDataList(targetPath, sym, payloadKey, existing, ignoreWindow = false, predicate = () => false) {
+    let result = existing;
+    let i = 0;
+    let j = 0;
+    let window = undefined;
+    let activeData = undefined;
+    while (i < targetPath.length) {
+        let payload = undefined;
+        const candidate = targetPath[i];
+        const candidateData = candidate[sym];
+        if (candidateData !== undefined) {
+            if (!ignoreWindow) {
+                if (window === undefined)
+                    window = candidateData['window'];
+                else if (window !== candidateData['window'])
+                    break;
+            }
+            payload = candidateData[payloadKey];
+            if (payload !== undefined) {
+                if (result !== existing) {
+                    result.push(payload);
+                }
+                else {
+                    if (payload !== existing[j]) {
+                        result = existing.slice(0, j);
+                        result.push(payload);
+                    }
+                    else
+                        j++;
+                }
+            }
+        }
+        if (activeData === undefined && predicate(candidate)) {
+            activeData = payload;
+        }
+        i++;
+    }
+    if (j === 0 && result === existing && existing.length > 0)
+        result = EmptyDataArray;
+    return { dataList: result, window, activeData };
+}

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

@@ -0,0 +1,29 @@
+import { ToggleRef } from 'reactronic';
+import { HtmlElementSensor } from './HtmlElementSensor';
+import { WindowSensor } from './WindowSensor';
+export interface FocusModel {
+    isEditMode: boolean;
+    onFocusIn?: (focus: FocusSensor) => void;
+    onFocusOut?: (focus: FocusSensor) => void;
+}
+export interface ContextModel {
+    contextToggle?: ToggleRef;
+    onContextIn?: (focus: FocusSensor) => void;
+    onContextOut?: (focus: FocusSensor) => void;
+}
+export declare class FocusSensor extends HtmlElementSensor {
+    activeData: unknown;
+    oldActiveData: unknown;
+    contextElementDataList: unknown[];
+    constructor(windowSensor: WindowSensor);
+    setActiveData(data: unknown, debugHint?: string): void;
+    listen(element: HTMLElement | undefined, enabled?: boolean): void;
+    reset(): void;
+    protected onFocusIn(e: FocusEvent): void;
+    protected onFocusOut(e: FocusEvent): void;
+    protected onMouseDown(e: MouseEvent): void;
+    protected doFocusIn(e: FocusEvent): void;
+    protected doFocusOut(e: FocusEvent): void;
+    protected doMouseDown(e: MouseEvent): void;
+    private trySetEditMode;
+}