@zcomponent/core 0.0.6 → 0.0.9

package/lib/contexts/canvascontext.js

@@ -1,58 +1,63 @@
-import { defineContextType } from '../context';
+import { Context } from '../context';
 import { Event } from '../event';
 import { Observable } from '../observable';
-export const CanvasContext = defineContextType((ctx, canvas, options) => {
-    if (!canvas) {
-        canvas = document.createElement("canvas");
-        canvas.style.position = "fixed";
-        canvas.style.top = "0px";
-        canvas.style.left = "0px";
-        canvas.style.width = "100%";
-        canvas.style.height = "100%";
-        canvas.style.touchAction = "none";
-        document.body.append(canvas);
-    }
-    const overlayDefault = options?.overlay ?? document.createElement('div');
-    overlayDefault.id = 'zcomponent-overlay';
-    if (!options?.overlay) {
-        document.body.append(overlayDefault);
-    }
-    const size = new Observable([canvas.clientWidth, canvas.clientHeight]);
-    const resizeObserver = new ResizeObserver(entries => {
-        for (const entry of entries) {
-            if (entry.target !== canvas)
-                continue;
-            size.value = [entry.contentRect.width, entry.contentRect.height];
+export class CanvasContext extends Context {
+    constructor(contextManager, constructorProps) {
+        super(contextManager, constructorProps);
+        this.constructorProps = constructorProps;
+        this.onBeforeRender = new Event();
+        this.onAfterRender = new Event();
+        this._resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                if (entry.target !== this.canvas)
+                    continue;
+                this.size.value = [entry.contentRect.width, entry.contentRect.height];
+            }
+        });
+        if (!constructorProps.canvas) {
+            this.canvas = document.createElement("canvas");
+            this.canvas.style.position = "fixed";
+            this.canvas.style.top = "0px";
+            this.canvas.style.left = "0px";
+            this.canvas.style.width = "100%";
+            this.canvas.style.height = "100%";
+            this.canvas.style.touchAction = "none";
+            document.body.append(this.canvas);
+        }
+        else {
+            this.canvas = constructorProps.canvas;
         }
-    });
-    resizeObserver.observe(canvas);
-    const onBeforeRender = new Event();
-    let lastRect;
-    onBeforeRender.bindfn(() => {
-        const rect = canvas.getBoundingClientRect();
-        if (lastRect && lastRect.top === rect.top && lastRect.left === rect.left && lastRect.width === rect.width && lastRect.height === rect.height)
-            return;
-        overlayDefault.style.top = rect.top.toString() + 'px';
-        overlayDefault.style.left = rect.left.toString() + 'px';
-        overlayDefault.style.width = rect.width.toString() + 'px';
-        overlayDefault.style.height = rect.height.toString() + 'px';
-        lastRect = rect;
-    });
-    const onAfterRender = new Event();
-    return {
-        canvas,
-        onBeforeRender,
-        onAfterRender,
-        size,
-        overlayDefault,
-        overlay: new Observable(overlayDefault, undefined, false),
-        dispose: () => {
-            onBeforeRender.clear();
-            onAfterRender.clear();
-            resizeObserver.disconnect();
+        this.overlayDefault = constructorProps.overlay ?? document.createElement('div');
+        this.overlayDefault.id = 'zcomponent-overlay';
+        if (!constructorProps.overlay) {
+            document.body.append(this.overlayDefault);
         }
-    };
-});
+        this.overlay = new Observable(this.overlayDefault, undefined, false);
+        this.size = new Observable([this.canvas.clientWidth, this.canvas.clientHeight]);
+        this._resizeObserver.observe(this.canvas);
+        let lastRect;
+        this.onBeforeRender.bindfn(() => {
+            const rect = this.canvas.getBoundingClientRect();
+            if (lastRect && lastRect.top === rect.top && lastRect.left === rect.left && lastRect.width === rect.width && lastRect.height === rect.height)
+                return;
+            this.overlayDefault.style.top = rect.top.toString() + 'px';
+            this.overlayDefault.style.left = rect.left.toString() + 'px';
+            this.overlayDefault.style.width = rect.width.toString() + 'px';
+            this.overlayDefault.style.height = rect.height.toString() + 'px';
+            lastRect = rect;
+        });
+    }
+    dispose() {
+        this.onBeforeRender.clear();
+        this.onAfterRender.clear();
+        this._resizeObserver.disconnect();
+        if (!this.constructorProps.canvas)
+            this.canvas.remove();
+        if (!this.constructorProps.overlay)
+            this.overlayDefault.remove();
+        return super.dispose();
+    }
+}
 export var HorizontalAlignment;
 (function (HorizontalAlignment) {
     HorizontalAlignment["left"] = "left";

package/lib/contexts/cookieconsentcontext.d.ts

@@ -1,4 +1,4 @@
-import { ContextManager } from '../context';
+import { ContextManager, Context } from '../context';
 import { Observable } from '../observable';
 export declare enum Status {
     "unknown" = "unknown",
@@ -15,18 +15,17 @@ export interface Vendor {
     description: string;
     privacyPolicyUrl: string;
 }
-export interface CookieConsentContext {
-    status: Observable<Status>;
-    functionalCookies: Observable<ConsentStatus>;
-    performanceCookies: Observable<ConsentStatus>;
-    marketingCookies: Observable<ConsentStatus>;
+export declare class CookieConsentContext extends Context {
+    status: Observable<Status, never>;
+    functionalCookies: Observable<ConsentStatus, never>;
+    performanceCookies: Observable<ConsentStatus, never>;
+    marketingCookies: Observable<ConsentStatus, never>;
+    showSettings: Observable<(() => void) | undefined, never>;
     performanceVendors: Vendor[];
     marketingVendors: Vendor[];
-    registerPerformanceVendor: (v: Vendor) => void;
-    registerMarketingVendor: (v: Vendor) => void;
-    showSettings: Observable<(() => void) | undefined>;
+    registerPerformanceVendor(v: Vendor): void;
+    registerMarketingVendor(v: Vendor): void;
 }
-export declare const CookieConsentContext: import("../context").ContextTypeWithDefault<CookieConsentContext, []>;
 export declare function useCookieConsentFunctional(mgr: ContextManager): Observable<ConsentStatus, never>;
 export declare function useCookieConsentPerformance(mgr: ContextManager): Observable<ConsentStatus, never>;
 export declare function useCookieConsentMarketing(mgr: ContextManager): Observable<ConsentStatus, never>;

package/lib/contexts/cookieconsentcontext.js

@@ -1,4 +1,4 @@
-import { defineContextType } from '../context';
+import { Context } from '../context';
 import { Observable } from '../observable';
 export var Status;
 (function (Status) {
@@ -12,28 +12,24 @@ export var ConsentStatus;
     ConsentStatus["granted"] = "granted";
     ConsentStatus["rejected"] = "rejected";
 })(ConsentStatus || (ConsentStatus = {}));
-export const CookieConsentContext = defineContextType((ctx) => {
-    const status = new Observable(Status.unknown);
-    const functionalCookies = new Observable(ConsentStatus.unknown);
-    const performanceCookies = new Observable(ConsentStatus.unknown);
-    const marketingCookies = new Observable(ConsentStatus.unknown);
-    const showSettings = new Observable(undefined);
-    const performanceVendors = [];
-    const marketingVendors = [];
-    const registerPerformanceVendor = (v) => performanceVendors.push(v);
-    const registerMarketingVendor = (v) => marketingVendors.push(v);
-    return {
-        status,
-        functionalCookies,
-        performanceCookies,
-        marketingCookies,
-        performanceVendors,
-        marketingVendors,
-        registerPerformanceVendor,
-        registerMarketingVendor,
-        showSettings
-    };
-});
+export class CookieConsentContext extends Context {
+    constructor() {
+        super(...arguments);
+        this.status = new Observable(Status.unknown);
+        this.functionalCookies = new Observable(ConsentStatus.unknown);
+        this.performanceCookies = new Observable(ConsentStatus.unknown);
+        this.marketingCookies = new Observable(ConsentStatus.unknown);
+        this.showSettings = new Observable(undefined);
+        this.performanceVendors = [];
+        this.marketingVendors = [];
+    }
+    registerPerformanceVendor(v) {
+        this.performanceVendors.push(v);
+    }
+    registerMarketingVendor(v) {
+        this.marketingVendors.push(v);
+    }
+}
 export function useCookieConsentFunctional(mgr) {
     return mgr.get(CookieConsentContext).functionalCookies;
 }

package/lib/contexts/environmentcontext.d.ts

@@ -1,10 +1,9 @@
-import { ContextManager } from '../context';
+import { ContextManager, Context } from '../context';
 import { Observable } from '../observable';
-export interface EnvirontmentContext {
-    designTime: Observable<boolean>;
-    editTime: Observable<boolean>;
+export declare class EnvironmentContext extends Context {
+    designTime: Observable<boolean, never>;
+    editTime: Observable<boolean, never>;
 }
-export declare const EnvironmentContext: import("../context").ContextTypeWithDefault<EnvirontmentContext, []>;
 export declare function isDesignTime(ctx: ContextManager): boolean;
 export declare function isEditTime(ctx: ContextManager): boolean;
 export declare function isDevelopmentBuild(ctx: ContextManager): boolean;

package/lib/contexts/environmentcontext.js

@@ -1,11 +1,12 @@
-import { defineContextType } from '../context';
+import { Context } from '../context';
 import { Observable } from '../observable';
-export const EnvironmentContext = defineContextType(() => {
-    return {
-        designTime: new Observable(false),
-        editTime: new Observable(false)
-    };
-});
+export class EnvironmentContext extends Context {
+    constructor() {
+        super(...arguments);
+        this.designTime = new Observable(false);
+        this.editTime = new Observable(false);
+    }
+}
 export function isDesignTime(ctx) {
     return ctx.get(EnvironmentContext).designTime.value;
 }

package/lib/contexts/gamepadcontext.d.ts

@@ -0,0 +1,40 @@
+import { Context, ContextManager } from '../context';
+import { Event } from '../event';
+export declare enum GamepadAxis {
+    LeftStickHorizontal = "LeftStickHorizontal",
+    LeftStickVertical = "LeftStickVertical",
+    RightStickHorizontal = "RightStickHorizontal",
+    RightStickVertical = "RightStickVertical"
+}
+export declare enum GamepadButton {
+    South = "South",
+    East = "East",
+    West = "West",
+    North = "North",
+    ShoulderLeft = "ShoulderLeft",
+    ShoulderRight = "ShoulderRight",
+    TriggerLeft = "TriggerLeft",
+    TriggerRight = "TriggerRight",
+    Select = "Select",
+    Start = "Start",
+    StickLeft = "StickLeft",
+    StickRight = "StickRight",
+    DUp = "DUp",
+    DDown = "DDown",
+    DLeft = "DLeft",
+    DRight = "DRight",
+    Center = "Center"
+}
+export declare class GamepadContext extends Context {
+    onGamepadsChange: Event<[]>;
+    activeGamepads: Set<number>;
+    private _registeredGamepads;
+    constructor(contextManager: ContextManager);
+    private _update;
+    getGamepad(indx: number): Gamepad | null;
+    forGamepadsMatchingIndex(requestedIndex: number | undefined, fn: (gamepad: Gamepad) => void): void;
+    registerGamepad(indx: number, gamepad: Gamepad): void;
+    unregsiterGamepad(indx: number): void;
+    dispose(): never;
+}
+export declare function translateGamepadAxis(axis: GamepadAxis): number;

package/lib/contexts/gamepadcontext.js

@@ -0,0 +1,99 @@
+import { Context } from '../context';
+import { Event } from '../event';
+import { isDesignTime } from './environmentcontext';
+export var GamepadAxis;
+(function (GamepadAxis) {
+    GamepadAxis["LeftStickHorizontal"] = "LeftStickHorizontal";
+    GamepadAxis["LeftStickVertical"] = "LeftStickVertical";
+    GamepadAxis["RightStickHorizontal"] = "RightStickHorizontal";
+    GamepadAxis["RightStickVertical"] = "RightStickVertical";
+})(GamepadAxis || (GamepadAxis = {}));
+export var GamepadButton;
+(function (GamepadButton) {
+    GamepadButton["South"] = "South";
+    GamepadButton["East"] = "East";
+    GamepadButton["West"] = "West";
+    GamepadButton["North"] = "North";
+    GamepadButton["ShoulderLeft"] = "ShoulderLeft";
+    GamepadButton["ShoulderRight"] = "ShoulderRight";
+    GamepadButton["TriggerLeft"] = "TriggerLeft";
+    GamepadButton["TriggerRight"] = "TriggerRight";
+    GamepadButton["Select"] = "Select";
+    GamepadButton["Start"] = "Start";
+    GamepadButton["StickLeft"] = "StickLeft";
+    GamepadButton["StickRight"] = "StickRight";
+    GamepadButton["DUp"] = "DUp";
+    GamepadButton["DDown"] = "DDown";
+    GamepadButton["DLeft"] = "DLeft";
+    GamepadButton["DRight"] = "DRight";
+    GamepadButton["Center"] = "Center";
+})(GamepadButton || (GamepadButton = {}));
+export class GamepadContext extends Context {
+    constructor(contextManager) {
+        super(contextManager, {});
+        this.onGamepadsChange = new Event();
+        this.activeGamepads = new Set();
+        this._registeredGamepads = new Map();
+        this._update = () => {
+            const gamepads = navigator.getGamepads();
+            let changes = false;
+            for (let i = 0; i < gamepads.length; i++) {
+                if (gamepads[i] === null && this.activeGamepads.has(i)) {
+                    this.activeGamepads.delete(i);
+                    changes = true;
+                }
+                else if (gamepads[i] !== null && !this.activeGamepads.has(i)) {
+                    this.activeGamepads.add(i);
+                    changes = true;
+                }
+            }
+            if (changes)
+                this.onGamepadsChange.emit();
+        };
+        if (!isDesignTime(contextManager) && typeof navigator.getGamepads === 'function') {
+            window.addEventListener('gamepadconnected', this._update);
+            window.addEventListener('gamepaddisconnected', this._update);
+        }
+        this._update();
+    }
+    getGamepad(indx) {
+        return this._registeredGamepads.get(indx) ?? (navigator.getGamepads?.()?.[indx] || null);
+    }
+    forGamepadsMatchingIndex(requestedIndex, fn) {
+        for (const indx of this.activeGamepads) {
+            if (requestedIndex !== undefined && indx !== requestedIndex)
+                continue;
+            const gamepad = this.getGamepad(indx);
+            if (gamepad)
+                fn(gamepad);
+        }
+    }
+    registerGamepad(indx, gamepad) {
+        this._registeredGamepads.set(indx, gamepad);
+        if (gamepad !== null)
+            this.activeGamepads.add(indx);
+        this.onGamepadsChange.emit();
+    }
+    unregsiterGamepad(indx) {
+        this._registeredGamepads.delete(indx);
+        this.activeGamepads.delete(indx);
+        this.onGamepadsChange.emit();
+    }
+    dispose() {
+        window.removeEventListener('gamepadconnected', this._update);
+        window.removeEventListener('gamepaddisconnected', this._update);
+        return super.dispose();
+    }
+}
+export function translateGamepadAxis(axis) {
+    switch (axis) {
+        case GamepadAxis.LeftStickHorizontal:
+            return 0;
+        case GamepadAxis.LeftStickVertical:
+            return 1;
+        case GamepadAxis.RightStickHorizontal:
+            return 2;
+        case GamepadAxis.RightStickVertical:
+            return 3;
+    }
+}

package/lib/contexts/loadcontext.d.ts

@@ -1,16 +1,21 @@
-import { ContextManager } from '../context';
+import { ContextManager, Context } from '../context';
 import { Observable } from '../observable';
-export interface LoadContext {
-    isConstructed: Observable<boolean>;
-    isLoaded: Observable<boolean>;
-    isStarted: Observable<boolean>;
+export declare class LoadContext extends Context {
+    isConstructed: Observable<boolean, never>;
+    isLoaded: Observable<boolean, never>;
+    isStarted: Observable<boolean, never>;
+    progressPercent: Observable<number, never>;
+    private _startedResolved;
     started: Promise<void>;
-    progressPercent: Observable<number>;
-    registerLoadable: (p: Promise<any>) => void;
-    start: () => void;
-    startWhenLoaded: () => void;
+    private _loadables;
+    private _startWhenLoaded;
+    private _totalLoadables;
+    private _loadedCount;
+    start(): void;
+    private _update;
+    startWhenLoaded(): void;
+    registerLoadable(p: Promise<any>): void;
 }
-export declare const LoadContext: import("../context").ContextTypeWithDefault<LoadContext, []>;
 export declare function useIsLoaded(mgr: ContextManager): Observable<boolean, never>;
 export declare function isLoaded(mgr: ContextManager): boolean;
 export declare function useIsStarted(mgr: ContextManager): Observable<boolean, never>;

package/lib/contexts/loadcontext.js

@@ -1,64 +1,61 @@
-import { defineContextType } from '../context';
+import { Context } from '../context';
 import { Observable } from '../observable';
-export const LoadContext = defineContextType((ctx) => {
-    let totalLoadables = 0;
-    let loadedCount = 0;
-    const loadables = new Set();
-    const isConstructed = new Observable(false);
-    const isLoaded = new Observable(false);
-    const isStarted = new Observable(false);
-    const startWhenLoaded = new Observable(false);
-    const progressPercent = new Observable(0);
-    let startedResolve;
-    const started = new Promise(resolve => startedResolve = resolve);
-    const start = () => {
-        if (isStarted.value)
+export class LoadContext extends Context {
+    constructor() {
+        super(...arguments);
+        this.isConstructed = new Observable(false);
+        this.isLoaded = new Observable(false);
+        this.isStarted = new Observable(false);
+        this.progressPercent = new Observable(0);
+        this.started = new Promise(resolve => this._startedResolved = resolve);
+        this._loadables = new Set();
+        this._startWhenLoaded = false;
+        this._totalLoadables = 0;
+        this._loadedCount = 0;
+    }
+    start() {
+        if (this.isStarted.value)
             return;
-        isStarted.value = true;
-        startedResolve?.();
+        this.isStarted.value = true;
+        this._startedResolved?.();
         if (document.body)
-            document.body.classList.add("zcomponent-started");
-    };
-    const update = () => {
-        if (loadables.size > 0 && isLoaded.value === true) {
-            isLoaded.value = false;
-            totalLoadables = loadables.size;
-            loadedCount = 0;
+            document.body.classList.add('zcomponent-started');
+    }
+    _update() {
+        if (this._loadables.size > 0 && this.isLoaded.value === true) {
+            this.isLoaded.value = false;
+            this._totalLoadables = this._loadables.size;
+            this._loadedCount = 0;
         }
-        if (loadables.size === 0 && isLoaded.value === false) {
-            isLoaded.value = true;
+        if (this._loadables.size === 0 && this.isLoaded.value === false) {
+            this.isLoaded.value = true;
             if (document.body)
                 document.body.classList.add("zcomponent-loaded");
         }
-        progressPercent.value = isLoaded.value ? 100 : (100 * loadedCount / totalLoadables);
-        if (startWhenLoaded.value && isLoaded.value && !isStarted.value) {
-            start();
+        this.progressPercent.value = this.isLoaded.value ? 100 : (100 * this._loadedCount / this._totalLoadables);
+        if (this._startWhenLoaded && this.isLoaded.value && !this.isStarted.value) {
+            this.start();
         }
-    };
-    const registerLoadable = (p) => {
-        loadables.add(p);
-        totalLoadables++;
+    }
+    startWhenLoaded() {
+        this._startWhenLoaded = true;
+        this._update();
+    }
+    registerLoadable(p) {
+        if (this.disposed)
+            return;
+        this._loadables.add(p);
+        this._totalLoadables++;
         p.finally(() => {
-            loadedCount++;
-            loadables.delete(p);
-            update();
+            if (this.disposed)
+                return;
+            this._loadedCount++;
+            this._loadables.delete(p);
+            this._update();
         });
-        update();
-    };
-    return {
-        isConstructed,
-        isLoaded,
-        isStarted,
-        started,
-        progressPercent,
-        registerLoadable,
-        start,
-        startWhenLoaded: () => {
-            startWhenLoaded.value = true;
-            update();
-        }
-    };
-});
+        this._update();
+    }
+}
 export function useIsLoaded(mgr) {
     return mgr.get(LoadContext).isLoaded;
 }

package/lib/contexts/tagcontext.d.ts

@@ -0,0 +1,13 @@
+import { Component } from "../component";
+import { ContextManager, Context } from "../context";
+export declare class TagContext extends Context {
+    tagsByComponent: Map<Component<any, import("../component").ConstructorProps>, Set<string>>;
+    componentsByLocalTag: Map<string, Set<Component<any, import("../component").ConstructorProps>>>;
+    componentsByGlobalTag: Map<string, Set<Component<any, import("../component").ConstructorProps>>>;
+    registerComponent(component: Component, tags: string[]): void;
+    unregisterComponent(component: Component): void;
+    getComponentsByTag(tag: string): Set<Component>;
+    getComponentsByTags(tags: string[]): Set<Component>;
+}
+export declare function getComponentsByTag(mgr: ContextManager, tag: string): Set<Component<any, import("../component").ConstructorProps>>;
+export declare function getComponentsByTags(mgr: ContextManager, tags: string[]): Set<Component<any, import("../component").ConstructorProps>>;

package/lib/contexts/tagcontext.js

@@ -0,0 +1,57 @@
+import { Context } from "../context";
+export class TagContext extends Context {
+    constructor() {
+        super(...arguments);
+        this.tagsByComponent = new Map();
+        this.componentsByLocalTag = new Map();
+        this.componentsByGlobalTag = new Map();
+    }
+    registerComponent(component, tags) {
+        this.unregisterComponent(component);
+        for (const tag of tags) {
+            const map = tag.startsWith('global:') ? this.componentsByGlobalTag : this.componentsByLocalTag;
+            const set = map.get(tag) ?? new Set();
+            set.add(component);
+            map.set(tag, set);
+        }
+        this.tagsByComponent.set(component, new Set(tags));
+    }
+    ;
+    unregisterComponent(component) {
+        let tags = this.tagsByComponent.get(component);
+        if (!tags)
+            return;
+        for (const tag of tags.values()) {
+            const map = tag.startsWith('global:') ? this.componentsByGlobalTag : this.componentsByLocalTag;
+            const entry = map.get(tag);
+            if (!entry)
+                continue;
+            entry.delete(component);
+        }
+        this.tagsByComponent.delete(component);
+    }
+    getComponentsByTag(tag) {
+        return ((tag.startsWith('global:') ? this.componentsByGlobalTag : this.componentsByLocalTag).get(tag)) ?? new Set();
+    }
+    getComponentsByTags(tags) {
+        if (tags.length === 0)
+            return new Set();
+        if (tags.length === 1)
+            return this.getComponentsByTag(tags[0]);
+        const ret = new Set();
+        for (const tag of tags) {
+            const map = tag.startsWith('global:') ? this.componentsByGlobalTag : this.componentsByLocalTag;
+            const entries = map.get(tag);
+            if (!entries)
+                continue;
+            entries.forEach(entry => ret.add(entry));
+        }
+        return ret;
+    }
+}
+export function getComponentsByTag(mgr, tag) {
+    return mgr.get(TagContext).getComponentsByTag(tag);
+}
+export function getComponentsByTags(mgr, tags) {
+    return mgr.get(TagContext).getComponentsByTags(tags);
+}

package/lib/contexts/usereventcontext.d.ts

@@ -1,12 +1,12 @@
-import { ContextManager } from '../context';
+import { ContextManager, Context } from '../context';
 import { Event as EventClass } from '../event';
 import { Observable } from '../observable';
-export interface UserEventContext {
+export declare class UserEventContext extends Context {
     onUserEvent: EventClass<[Event]>;
-    nextUserEvent: Observable<Promise<Event>>;
-    registerUserEvent: (evt: Event) => void;
+    private _resolveNextUserEvent;
+    nextUserEvent: Observable<Promise<Event>, never>;
+    registerUserEvent(evt: Event): void;
 }
-export declare const UserEventContext: import("../context").ContextTypeWithDefault<UserEventContext, []>;
 export declare function useOnUserEvent(mgr: ContextManager): EventClass<[Event]>;
 export declare function nextUserEvent(mgr: ContextManager): Promise<Event>;
 export declare function registerUserEvent(mgr: ContextManager, evt: Event): void;