@zcomponent/core 1.27.2 → 1.28.0-beta.2

package/css/zcomponent.css

@@ -57,6 +57,10 @@
     left: 0px;
 }
 
+.zcomponent-h-left-safe {
+    left: env(safe-area-inset-left, 0px);
+}
+
 .zcomponent-h-center {
     left: 50%;
 }
@@ -65,10 +69,18 @@
     right: 0px;
 }
 
+.zcomponent-h-right-safe {
+    right: env(safe-area-inset-right, 0px);
+}
+
 .zcomponent-v-top {
     top: 0px;
 }
 
+.zcomponent-v-top-safe {
+    top: env(safe-area-inset-top, 0px);
+}
+
 .zcomponent-v-center {
     top: 50%;
 }
@@ -77,6 +89,14 @@
     bottom: 0px;
 }
 
+.zcomponent-v-bottom-safe {
+    bottom: env(safe-area-inset-bottom, 0px);
+}
+
+:xr-overlay .zcomponent-v-top-safe {
+    top: 45px;
+}
+
 .zcomponent-hc-v {
     transform: translate(-50%, 0);
 }
@@ -209,4 +229,15 @@
 
 #zcomponent-cookieconsent-privacypolicy {
     padding-bottom: 12px;
+}
+
+:root {
+    --safe-area-inset-left: env(safe-area-inset-left, 0px);
+    --safe-area-inset-right: env(safe-area-inset-right, 0px);
+    --safe-area-inset-top: env(safe-area-inset-top, 0px);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+:xr-overlay {
+    --safe-area-inset-top: 45px;
 }

package/lib/cache.d.ts

@@ -0,0 +1,12 @@
+export interface CacheOptions {
+    key: string;
+    expireMS?: number;
+    revalidateMS?: number;
+    expireError?: number;
+    cacheError?: boolean;
+    lifetime?: 'pageload' | 'session' | 'persistent';
+}
+export interface CachePerformer<T> extends CacheOptions {
+    perform: () => Promise<T>;
+}
+export declare function cache<T>(opts: CachePerformer<T>): Promise<T>;

package/lib/cache.js

@@ -0,0 +1,139 @@
+const dbPromise = new Promise((resolve, reject) => {
+    const db = indexedDB.open('zee-cache-db');
+    db.onupgradeneeded = event => {
+        if (!event || !event.target)
+            return;
+        const db = event.target.result;
+        db.createObjectStore('zee-cache', { keyPath: 'key' });
+    };
+    db.onsuccess = event => {
+        if (!event || !event.target)
+            return;
+        const idb = event.target.result;
+        resolve(idb);
+        clearExpired();
+    };
+    db.onerror = event => {
+        reject(event);
+    };
+});
+const pageLoadByKey = new Map();
+const inflight = new Map();
+function isError(result) {
+    return typeof result['err'] === 'string';
+}
+export async function cache(opts) {
+    const lifetime = opts.lifetime ?? 'pageload';
+    const now = Date.now();
+    let entry;
+    if (lifetime === 'pageload') {
+        entry = pageLoadByKey.get(opts.key);
+        if (entry && entry.expireTime && entry.expireTime < now) {
+            pageLoadByKey.delete(opts.key);
+            entry = undefined;
+        }
+    }
+    else {
+        if (lifetime === 'persistent' || window.sessionStorage.getItem(opts.key) === '1') {
+            entry = await getItemFromDB(opts.key);
+            if (entry && entry.expireTime && entry.expireTime < now) {
+                // Will be deleted next open
+                entry = undefined;
+            }
+        }
+    }
+    const revalidate = entry && opts.revalidateMS && entry.startTime && now - entry.startTime > opts.revalidateMS;
+    const revalidateEntry = revalidate ? entry : undefined;
+    if (!entry) {
+        entry = await inflight.get(opts.key);
+    }
+    if (!entry || revalidate) {
+        const promise = (async () => {
+            let ret;
+            try {
+                const res = await opts.perform();
+                ret = {
+                    key: opts.key,
+                    expireTime: opts.expireMS ? Date.now() + opts.expireMS : undefined,
+                    startTime: now,
+                    result: { val: res },
+                };
+            }
+            catch (err) {
+                if (!opts.cacheError)
+                    throw err;
+                ret = {
+                    key: opts.key,
+                    expireTime: opts.expireError ? Date.now() + opts.expireError : undefined,
+                    startTime: now,
+                    result: { err: err instanceof Error ? err.message : typeof err === 'string' ? err : 'Unknown error' },
+                };
+            }
+            if (lifetime === 'pageload') {
+                pageLoadByKey.set(opts.key, ret);
+            }
+            else {
+                await addItemToDB(ret);
+                if (lifetime === 'session')
+                    window.sessionStorage.setItem(opts.key, '1');
+            }
+            return ret;
+        })();
+        inflight.set(opts.key, promise);
+        promise
+            .then(() => {
+            inflight.delete(opts.key);
+        })
+            .catch(() => {
+            inflight.delete(opts.key);
+        });
+        if (!revalidate)
+            entry = await promise;
+        else
+            entry = revalidateEntry;
+    }
+    if (!entry)
+        throw new Error('No value');
+    if (isError(entry.result))
+        throw new Error(entry.result.err);
+    return entry.result.val;
+}
+function handleRequest(r) {
+    return new Promise((resolve, reject) => {
+        r.onsuccess = () => {
+            resolve(r.result);
+        };
+        r.onerror = event => {
+            reject(event);
+        };
+    });
+}
+async function clearExpired() {
+    const db = await dbPromise;
+    const os = db.transaction('zee-cache', 'readonly').objectStore('zee-cache');
+    const objects = (await handleRequest(os.getAll()));
+    const toDelete = new Set();
+    const now = Date.now();
+    for (const obj of objects) {
+        if (obj.expireTime && obj.expireTime < now) {
+            toDelete.add(obj.key);
+        }
+    }
+    if (toDelete.size > 0) {
+        const os = db.transaction('zee-cache', 'readwrite').objectStore('zee-cache');
+        for (const key of toDelete) {
+            os.delete(key);
+        }
+        os.transaction.commit();
+    }
+}
+async function addItemToDB(e) {
+    const db = await dbPromise;
+    const os = db.transaction('zee-cache', 'readwrite').objectStore('zee-cache');
+    await handleRequest(os.put(e));
+}
+async function getItemFromDB(key) {
+    const db = await dbPromise;
+    const os = db.transaction('zee-cache', 'readonly').objectStore('zee-cache');
+    return await handleRequest(os.get(key));
+}

package/lib/change.d.ts

@@ -0,0 +1,131 @@
+import { NodeDataCombined } from './data';
+export declare enum ProposedChangeType {
+    PROPOSE_NEW_NODE = "proposeNewNode",
+    PROPOSE_NEW_BEHAVIOR = "proposeNewBehavior",
+    PROPOSE_ENTITY_PROPERTY_CHANGE = "proposeEntityPropertyChange",
+    MOVE_NODE = "moveNode",
+    DELETE_NODE = "deleteNode",
+    DELETE_BEHAVIOR = "deleteBehavior",
+    PROPOSE_NEW_LAYER = "proposeNewLayer",
+    PROPOSE_DELETE_LAYER = "proposeDeleteLayer",
+    PROPOSE_NEW_CLIP = "proposeNewClip",
+    PROPOSE_ADD_CLIP_TO_LAYER = "proposeAddClipToLayer",
+    PROPOSE_DELETE_LAYER_CLIP = "proposeDeleteLayerClip",
+    PROPOSE_ADD_PROPERTY_TRACK = "proposeAddPropertyTrack",
+    PROPOSE_ADD_OR_MODIFY_KEYFRAMES = "proposeAddOrModifyKeyframes",
+    PROPOSE_DELETE_KEYFRAME = "proposeDeleteKeyframe",
+    PROPOSE_MODIFY_LAYER_CLIP = "proposeModifyLayerClip",
+    PROPOSE_MODIFY_CLIP = "proposeModifyClip",
+    PROPOSE_CHANGE_ENTITY_LABEL = "proposeChangeEntityLabel"
+}
+export interface BaseProposedChange {
+    name: ProposedChangeType;
+}
+export interface ProposeNewNode extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_NEW_NODE;
+    data: NodeDataCombined;
+}
+export interface ProposeNewBehavior extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_NEW_BEHAVIOR;
+    id: string;
+    label: string;
+    parentID: string;
+    parentIndex: number;
+    type: string;
+}
+export interface ProposeMoveNode extends BaseProposedChange {
+    name: ProposedChangeType.MOVE_NODE;
+    nodeID: string;
+    newParentID: string;
+    newParentIndex: number;
+}
+export interface ProposeDeleteNode extends BaseProposedChange {
+    name: ProposedChangeType.DELETE_NODE;
+    nodeID: string;
+}
+export interface ProposeDeleteBehavior extends BaseProposedChange {
+    name: ProposedChangeType.DELETE_BEHAVIOR;
+    behaviorID: string;
+}
+export interface ProposeEntityPropertyChange extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_ENTITY_PROPERTY_CHANGE;
+    id: string;
+    property: string;
+    value: any;
+    isConstructorProperty: boolean;
+}
+export interface ProposeNewLayer extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_NEW_LAYER;
+    id: string;
+    label: string;
+}
+export interface ProposeDeleteLayer extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_DELETE_LAYER;
+    id: string;
+}
+export interface ProposeNewClip extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_NEW_CLIP;
+    id: string;
+    label: string;
+    isState: boolean;
+    length?: number;
+    addToLayerID?: string;
+}
+export interface ProposeAddClipToLayer extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_ADD_CLIP_TO_LAYER;
+    id: string;
+    clipID: string;
+    layerID: string;
+    setAsDefault?: boolean;
+    loop?: boolean;
+    playAtStart?: boolean;
+}
+export interface ProposeDeleteLayerClip extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_DELETE_LAYER_CLIP;
+    layerID: string;
+    layerClipID: string;
+}
+export interface ProposeAddPropertyTrack extends BaseProposedChange {
+    id: string;
+    name: ProposedChangeType.PROPOSE_ADD_PROPERTY_TRACK;
+    clipID: string;
+    entityID: string;
+    property: string;
+    defaultKeyframe?: Keyframe;
+}
+export interface ProposeAddOrModifyKeyframes extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_ADD_OR_MODIFY_KEYFRAMES;
+    clipID: string;
+    trackID: string;
+    keyframes: {
+        id: string;
+        value: any;
+        time: number;
+        easing?: string;
+    }[];
+}
+export interface ProposeDeleteKeyframe extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_DELETE_KEYFRAME;
+    clipID: string;
+    trackID: string;
+    keyframeID: string;
+}
+export interface ProposeModifyLayerClip extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_MODIFY_LAYER_CLIP;
+    layerClipID: string;
+    layerID: string;
+    setAsDefault?: boolean;
+    loop?: boolean;
+    playAtStart?: boolean;
+}
+export interface ProposeModifyClip extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_MODIFY_CLIP;
+    clipID: string;
+    length?: number;
+}
+export interface ProposeChangeEntityLabel extends BaseProposedChange {
+    name: ProposedChangeType.PROPOSE_CHANGE_ENTITY_LABEL;
+    id: string;
+    label: string;
+}
+export type ProposedChange = ProposeNewNode | ProposeNewBehavior | ProposeEntityPropertyChange | ProposeMoveNode | ProposeDeleteNode | ProposeDeleteBehavior | ProposeNewLayer | ProposeDeleteLayer | ProposeNewClip | ProposeModifyClip | ProposeAddClipToLayer | ProposeDeleteLayerClip | ProposeAddPropertyTrack | ProposeAddOrModifyKeyframes | ProposeDeleteKeyframe | ProposeModifyLayerClip | ProposeChangeEntityLabel;

package/lib/change.js

@@ -0,0 +1,20 @@
+export var ProposedChangeType;
+(function (ProposedChangeType) {
+    ProposedChangeType["PROPOSE_NEW_NODE"] = "proposeNewNode";
+    ProposedChangeType["PROPOSE_NEW_BEHAVIOR"] = "proposeNewBehavior";
+    ProposedChangeType["PROPOSE_ENTITY_PROPERTY_CHANGE"] = "proposeEntityPropertyChange";
+    ProposedChangeType["MOVE_NODE"] = "moveNode";
+    ProposedChangeType["DELETE_NODE"] = "deleteNode";
+    ProposedChangeType["DELETE_BEHAVIOR"] = "deleteBehavior";
+    ProposedChangeType["PROPOSE_NEW_LAYER"] = "proposeNewLayer";
+    ProposedChangeType["PROPOSE_DELETE_LAYER"] = "proposeDeleteLayer";
+    ProposedChangeType["PROPOSE_NEW_CLIP"] = "proposeNewClip";
+    ProposedChangeType["PROPOSE_ADD_CLIP_TO_LAYER"] = "proposeAddClipToLayer";
+    ProposedChangeType["PROPOSE_DELETE_LAYER_CLIP"] = "proposeDeleteLayerClip";
+    ProposedChangeType["PROPOSE_ADD_PROPERTY_TRACK"] = "proposeAddPropertyTrack";
+    ProposedChangeType["PROPOSE_ADD_OR_MODIFY_KEYFRAMES"] = "proposeAddOrModifyKeyframes";
+    ProposedChangeType["PROPOSE_DELETE_KEYFRAME"] = "proposeDeleteKeyframe";
+    ProposedChangeType["PROPOSE_MODIFY_LAYER_CLIP"] = "proposeModifyLayerClip";
+    ProposedChangeType["PROPOSE_MODIFY_CLIP"] = "proposeModifyClip";
+    ProposedChangeType["PROPOSE_CHANGE_ENTITY_LABEL"] = "proposeChangeEntityLabel";
+})(ProposedChangeType || (ProposedChangeType = {}));

package/lib/contexts/canvascontext.d.ts

@@ -57,16 +57,20 @@ export declare class CanvasContext extends Context {
  */
 export declare enum HorizontalAlignment {
     'left' = "left",
+    'leftSafe' = "leftSafe",
     'center' = "center",
-    'right' = "right"
+    'right' = "right",
+    'rightSafe' = "rightSafe"
 }
 /**
- * Enum representing vertical alignment options: 'top', 'center', 'bottom'.
+ * Enum representing vertical alignment options: 'top', 'center', 'bottom', 'topSafe', 'bottomSafe'.
  */
 export declare enum VerticalAlignment {
     'top' = "top",
+    'topSafe' = "topSafe",
     'center' = "center",
-    'bottom' = "bottom"
+    'bottom' = "bottom",
+    'bottomSafe' = "bottomSafe"
 }
 /**
  * Retrieves the canvas element from the `CanvasContext`.

package/lib/contexts/canvascontext.js

@@ -129,17 +129,21 @@ export class CanvasContext extends Context {
 export var HorizontalAlignment;
 (function (HorizontalAlignment) {
     HorizontalAlignment["left"] = "left";
+    HorizontalAlignment["leftSafe"] = "leftSafe";
     HorizontalAlignment["center"] = "center";
     HorizontalAlignment["right"] = "right";
+    HorizontalAlignment["rightSafe"] = "rightSafe";
 })(HorizontalAlignment || (HorizontalAlignment = {}));
 /**
- * Enum representing vertical alignment options: 'top', 'center', 'bottom'.
+ * Enum representing vertical alignment options: 'top', 'center', 'bottom', 'topSafe', 'bottomSafe'.
  */
 export var VerticalAlignment;
 (function (VerticalAlignment) {
     VerticalAlignment["top"] = "top";
+    VerticalAlignment["topSafe"] = "topSafe";
     VerticalAlignment["center"] = "center";
     VerticalAlignment["bottom"] = "bottom";
+    VerticalAlignment["bottomSafe"] = "bottomSafe";
 })(VerticalAlignment || (VerticalAlignment = {}));
 /**
  * Retrieves the canvas element from the `CanvasContext`.
@@ -211,23 +215,35 @@ export function classNameForAlignment(h, v) {
         case HorizontalAlignment.left:
             names.push('zcomponent-h-left');
             break;
+        case HorizontalAlignment.leftSafe:
+            names.push('zcomponent-h-left-safe');
+            break;
         case HorizontalAlignment.center:
             names.push('zcomponent-h-center');
             break;
         case HorizontalAlignment.right:
             names.push('zcomponent-h-right');
             break;
+        case HorizontalAlignment.rightSafe:
+            names.push('zcomponent-h-right-safe');
+            break;
     }
     switch (v) {
         case VerticalAlignment.top:
             names.push('zcomponent-v-top');
             break;
+        case VerticalAlignment.topSafe:
+            names.push('zcomponent-v-top-safe');
+            break;
         case VerticalAlignment.center:
             names.push('zcomponent-v-center');
             break;
         case VerticalAlignment.bottom:
             names.push('zcomponent-v-bottom');
             break;
+        case VerticalAlignment.bottomSafe:
+            names.push('zcomponent-v-bottom-safe');
+            break;
     }
     if (h !== HorizontalAlignment.center && v !== VerticalAlignment.center)
         names.push('zcomponent-h-v');

package/lib/contexts/textalertcontext.d.ts

@@ -41,6 +41,10 @@ export interface TextAlertOptions {
      * Text color of the text alert.
      */
     textColor?: string;
+    /**
+     * Delay in milliseconds before showing the text alert.
+     */
+    delay?: number;
 }
 /**
  * Triggers the display of a text alert.

package/lib/contexts/textalertcontext.js

@@ -39,7 +39,7 @@ export class TextAlertContext extends Context {
         const timeout = options?.timeout ?? 3000;
         setTimeout(() => {
             entry.classList.add('zcomponent-textalert-shown');
-        }, 30);
+        }, options?.delay ?? 30);
         if (timeout >= 0) {
             setTimeout(() => {
                 entry.classList.remove('zcomponent-textalert-shown');

package/lib/editor.d.ts

@@ -0,0 +1,24 @@
+import { ProposedChange } from './change';
+export interface EditorNewNode {
+    id?: string;
+    type: string;
+    parentID: string;
+    parentIndex: number;
+    label: string;
+    constructorProps?: {
+        [id: string]: any;
+    };
+    props?: {
+        [id: string]: any;
+    };
+    addDefaultChildren?: boolean;
+}
+export interface Editor {
+    proposeChanges: (changes: ProposedChange[]) => void;
+    addReplaceFiles: (files: {
+        name: string;
+        data: ArrayBuffer;
+        changes?: ProposedChange[];
+    }[]) => void;
+    createNode: (node: EditorNewNode) => void;
+}

package/lib/editor.js

@@ -0,0 +1 @@
+export {};

package/lib/index.d.ts

@@ -16,3 +16,4 @@ export * from './observable';
 export * from './contexts/environmentcontext';
 export * from './contexts/audiocontextcontext';
 export * from './animation';
+export { cache, CacheOptions, CachePerformer } from './cache';

package/lib/index.js

@@ -16,6 +16,7 @@ export * from './observable';
 export * from './contexts/environmentcontext';
 export * from './contexts/audiocontextcontext';
 export * from './animation';
+export { cache } from './cache';
 const link = document.createElement('link');
 link.setAttribute('rel', 'stylesheet');
 link.setAttribute('href', new URL('../css/zcomponent.css', import.meta.url).toString());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "1.27.2",
+  "version": "1.28.0-beta.2",
   "description": "The core component model and built-in functionality for Mattercraft.",
   "author": "Zappar Limited",
   "license": "Proprietary",