@zcomponent/core 0.0.4 → 0.0.6

package/css/zcomponent.css

@@ -32,4 +32,63 @@
     background-color: white;
     height: 12px;
     border-radius: 6px;
+}
+
+#zcomponent-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+#zcomponent-overlay > * {
+    pointer-events: auto;
+    position: absolute;
+}
+
+
+.zcomponent-align {
+    position: absolute;
+    transform-origin: 0 0;
+}
+
+.zcomponent-h-left {
+    left: 0px;
+}
+
+.zcomponent-h-center {
+    left: 50%;
+}
+
+.zcomponent-h-right {
+    right: 0px;
+}
+
+.zcomponent-v-top {
+    top: 0px;
+}
+
+.zcomponent-v-center {
+    top: 50%;
+}
+
+.zcomponent-v-bottom {
+    bottom: 0px;
+}
+
+.zcomponent-hc-v {
+    transform: translate(-50%, 0);
+}
+
+.zcomponent-h-vc {
+    transform: translate(0%, -50%);
+}
+
+.zcomponent-h-v {
+    transform: translate(0%, 0%);
+}
+
+.zcomponent-hc-vc {
+    transform: translate(-50%, -50%);
 }

package/lib/components/LongLoad.d.ts

@@ -0,0 +1,45 @@
+import { Component, ConstructorProps, ContextManager } from "..";
+export interface LongLoadConstructorProps extends ConstructorProps {
+    /**
+     * The number of loading processes to simulate
+     * @zprop
+     * @zgroup LongLoad
+     * @zgrouppriority 10
+     * @zdefault 10
+     */
+    numberOfLoads: number;
+    /**
+     * The shortest time (in milliseconds) that a given load should take
+     * @zprop
+     * @zgroup LongLoad
+     * @zgrouppriority 10
+     * @zdefault 500
+     */
+    minimumLoadTime: number;
+    /**
+     * The shortest time (in milliseconds) that a given load should take
+     * @zprop
+     * @zgroup LongLoad
+     * @zgrouppriority 10
+     * @zdefault 5000
+     */
+    maximumLoadTime: number;
+    /**
+     * If the long loading process should occur in production builds (in addition to development builds)
+     * @zprop
+     * @zgroup LongLoad
+     * @zgrouppriority 10
+     * @zdefault false
+     */
+    runInProduction: boolean;
+}
+/**
+ * Simulates long random loading times to facilitate development and debugging of loading processes.
+ *
+ * @zcomponent
+ * @zicon settings
+ * @zgroup Advanced
+ */
+export declare class LongLoad extends Component<LongLoadConstructorProps> {
+    constructor(props: LongLoadConstructorProps, contextManager: ContextManager);
+}

package/lib/components/LongLoad.js

@@ -0,0 +1,28 @@
+import { Component, isDevelopmentBuild, registerLoadable } from "..";
+/**
+ * Simulates long random loading times to facilitate development and debugging of loading processes.
+ *
+ * @zcomponent
+ * @zicon settings
+ * @zgroup Advanced
+ */
+export class LongLoad extends Component {
+    constructor(props, contextManager) {
+        super(props, contextManager);
+        if (!props.runInProduction && !isDevelopmentBuild(contextManager))
+            return;
+        const minimumLoadTime = props.minimumLoadTime ?? 500;
+        const maximumLoadTime = props.maximumLoadTime ?? 5000;
+        for (let i = 0; i < (props.numberOfLoads ?? 10); i++) {
+            registerLoadable(contextManager, new Promise(resolve => {
+                if (this.disposed)
+                    return;
+                setTimeout(() => {
+                    if (this.disposed)
+                        return;
+                    resolve();
+                }, minimumLoadTime + Math.random() * (maximumLoadTime - minimumLoadTime));
+            }));
+        }
+    }
+}

package/lib/contexts/canvascontext.d.ts

@@ -7,9 +7,26 @@ export interface CanvasContext {
     onAfterRender: Event<[number]>;
     size: Observable<[number, number]>;
     dispose: () => void;
+    overlayDefault: HTMLDivElement;
+    overlay: Observable<HTMLDivElement>;
+}
+export interface CanvasContextOptions {
+    overlay: HTMLDivElement;
+}
+export declare const CanvasContext: import("../context").ContextTypeWithDefault<CanvasContext, [canvas?: HTMLCanvasElement | undefined, options?: CanvasContextOptions | undefined]>;
+export declare enum HorizontalAlignment {
+    'left' = "left",
+    'center' = "center",
+    'right' = "right"
+}
+export declare enum VerticalAlignment {
+    'top' = "top",
+    'center' = "center",
+    'bottom' = "bottom"
 }
-export declare const CanvasContext: import("../context").ContextTypeWithDefault<CanvasContext, [canvas?: HTMLCanvasElement | undefined]>;
 export declare function useCanvas(mgr: ContextManager): HTMLCanvasElement;
+export declare function useOverlay(mgr: ContextManager): Observable<HTMLDivElement, never>;
 export declare function useCanvasSize(mgr: ContextManager): Observable<[number, number], never>;
 export declare function useOnBeforeRender(mgr: ContextManager): Event<[number]>;
 export declare function useOnAfterRender(mgr: ContextManager): Event<[number]>;
+export declare function classNameForAlignment(h: HorizontalAlignment, v: VerticalAlignment): string;

package/lib/contexts/canvascontext.js

@@ -1,7 +1,7 @@
 import { defineContextType } from '../context';
 import { Event } from '../event';
 import { Observable } from '../observable';
-export const CanvasContext = defineContextType((ctx, canvas) => {
+export const CanvasContext = defineContextType((ctx, canvas, options) => {
     if (!canvas) {
         canvas = document.createElement("canvas");
         canvas.style.position = "fixed";
@@ -12,6 +12,11 @@ export const CanvasContext = defineContextType((ctx, canvas) => {
         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) {
@@ -21,19 +26,51 @@ export const CanvasContext = defineContextType((ctx, 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: new Event(),
-        onAfterRender: new Event(),
+        onBeforeRender,
+        onAfterRender,
         size,
+        overlayDefault,
+        overlay: new Observable(overlayDefault, undefined, false),
         dispose: () => {
+            onBeforeRender.clear();
+            onAfterRender.clear();
             resizeObserver.disconnect();
         }
     };
 });
+export var HorizontalAlignment;
+(function (HorizontalAlignment) {
+    HorizontalAlignment["left"] = "left";
+    HorizontalAlignment["center"] = "center";
+    HorizontalAlignment["right"] = "right";
+})(HorizontalAlignment || (HorizontalAlignment = {}));
+export var VerticalAlignment;
+(function (VerticalAlignment) {
+    VerticalAlignment["top"] = "top";
+    VerticalAlignment["center"] = "center";
+    VerticalAlignment["bottom"] = "bottom";
+})(VerticalAlignment || (VerticalAlignment = {}));
 export function useCanvas(mgr) {
     return mgr.get(CanvasContext).canvas;
 }
+export function useOverlay(mgr) {
+    return mgr.get(CanvasContext).overlay;
+}
 export function useCanvasSize(mgr) {
     return mgr.get(CanvasContext).size;
 }
@@ -43,3 +80,37 @@ export function useOnBeforeRender(mgr) {
 export function useOnAfterRender(mgr) {
     return mgr.get(CanvasContext).onAfterRender;
 }
+export function classNameForAlignment(h, v) {
+    const names = ['zcomponent-align'];
+    switch (h) {
+        case HorizontalAlignment.left:
+            names.push('zcomponent-h-left');
+            break;
+        case HorizontalAlignment.center:
+            names.push('zcomponent-h-center');
+            break;
+        case HorizontalAlignment.right:
+            names.push('zcomponent-h-right');
+            break;
+    }
+    switch (v) {
+        case VerticalAlignment.top:
+            names.push('zcomponent-v-top');
+            break;
+        case VerticalAlignment.center:
+            names.push('zcomponent-v-center');
+            break;
+        case VerticalAlignment.bottom:
+            names.push('zcomponent-v-bottom');
+            break;
+    }
+    if (h !== HorizontalAlignment.center && v !== VerticalAlignment.center)
+        names.push('zcomponent-h-v');
+    if (h === HorizontalAlignment.center && v !== VerticalAlignment.center)
+        names.push('zcomponent-hc-v');
+    if (h === HorizontalAlignment.center && v === VerticalAlignment.center)
+        names.push('zcomponent-hc-vc');
+    if (h !== HorizontalAlignment.center && v === VerticalAlignment.center)
+        names.push('zcomponent-h-vc');
+    return names.join(' ');
+}

package/lib/contexts/environmentcontext.d.ts

@@ -7,3 +7,4 @@ export interface EnvirontmentContext {
 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

@@ -12,3 +12,6 @@ export function isDesignTime(ctx) {
 export function isEditTime(ctx) {
     return ctx.get(EnvironmentContext).editTime.value;
 }
+export function isDevelopmentBuild(ctx) {
+    return (typeof process !== 'undefined' && process?.env?.NODE_ENV === 'development');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",