@zcomponent/core 0.0.6 → 0.0.9

package/lib/actionbehavior.d.ts

@@ -1,17 +1,21 @@
-import { Behavior, BehaviorConstructorProps } from "./behavior";
+import { Behavior } from "./behavior";
+import { Component } from "./component";
 import { ContextManager } from "./context";
-export interface ActionBehaviorConstructorProps extends BehaviorConstructorProps {
+export interface ActionBehaviorConstructorProps {
     /** @zprop
      * @zvalues events
      */
     event: string;
-}
-export declare abstract class ActionBehavior<ConstructorProps extends ActionBehaviorConstructorProps = ActionBehaviorConstructorProps> extends Behavior<any, ConstructorProps> {
     /**
      * @zprop
-     * @zdefault true
+     * @zdefault false
      */
-    enabled: boolean;
-    constructor(props: ConstructorProps, contextManager: ContextManager);
-    abstract perform(): any;
+    runAtEditTime: boolean;
+}
+export declare abstract class ActionBehavior<ConstructorProps extends ActionBehaviorConstructorProps = ActionBehaviorConstructorProps> extends Behavior<Component> {
+    protected constructorProps: ConstructorProps;
+    constructor(contextManager: ContextManager, instance: Component, constructorProps: ConstructorProps);
+    private _updateRegistration;
+    private _perform;
+    abstract perform(...args: any[]): any;
 }

package/lib/actionbehavior.js

@@ -1,22 +1,30 @@
 import { Behavior } from "./behavior";
-import { isEditTime } from "./contexts/environmentcontext";
+import { EnvironmentContext, isEditTime } from "./contexts/environmentcontext";
 import { Event } from "./event";
 export class ActionBehavior extends Behavior {
-    constructor(props, contextManager) {
-        super(props, contextManager);
-        /**
-         * @zprop
-         * @zdefault true
-         */
-        this.enabled = true;
-        const evt = props.instance[props.event];
-        if (evt instanceof Event && !isEditTime(contextManager)) {
-            this.register(evt, e => {
-                this.perform();
-                if (e && typeof e === 'object' && typeof e['stopPropagation'] === 'function') {
-                    e['stopPropagation'].call(e);
+    constructor(contextManager, instance, constructorProps) {
+        super(contextManager, instance);
+        this.constructorProps = constructorProps;
+        this._updateRegistration = () => {
+            const evt = this.instance[this.constructorProps.event];
+            if (evt instanceof Event) {
+                this.unregister(evt, this._perform);
+                if (this.enabledResolved.value && (!isEditTime(this.contextManager) || this.constructorProps.runAtEditTime === true)) {
+                    this.register(evt, this._perform);
                 }
-            });
-        }
+            }
+        };
+        this._perform = (...args) => {
+            if (!this.enabledResolved.value)
+                return;
+            this.perform(...args);
+            const e = args[0];
+            if (e && typeof e === 'object' && typeof e['stopPropagation'] === 'function') {
+                e['stopPropagation'].call(e);
+            }
+        };
+        const env = contextManager.get(EnvironmentContext);
+        this.register(env.editTime, this._updateRegistration);
+        this.register(this.enabledResolved, this._updateRegistration);
     }
 }

package/lib/animation.d.ts

@@ -1,7 +1,7 @@
-export declare type ByID<T> = {
+export type ByID<T> = {
     [id: string]: T | undefined;
 };
-export declare type ByNodeProperty<T> = {
+export type ByNodeProperty<T> = {
     [id: string]: {
         [id: string]: T | undefined;
     } | undefined;
@@ -10,7 +10,7 @@ export interface Animation {
     clips: ByID<Clip>;
     layers: ByID<Layer>;
 }
-export declare type BlendType = 'overlay' | 'add';
+export type BlendType = 'overlay' | 'add';
 export interface FadeParameters {
     time: number;
     pin?: 'start' | 'middle' | 'end';
@@ -25,7 +25,7 @@ export interface LayerClip {
     reverse?: boolean;
     playbackSpeed?: number;
 }
-export declare type Clip = StateClip | TimelineClip;
+export type Clip = StateClip | TimelineClip;
 export interface BaseClip {
     type: 'timeline' | 'state';
 }
@@ -48,7 +48,7 @@ export interface TimelineClip extends BaseClip {
     defaultFadeParameters?: FadeParameters;
     timeSourceTrack?: string;
 }
-export declare type Track = PropertyTrack | ClipTrack | StreamTrack | FunctionTrack | LabelTrack;
+export type Track = PropertyTrack | ClipTrack | StreamTrack | FunctionTrack | LabelTrack;
 export interface BaseTrack {
     type: 'property' | 'clip' | 'stream' | 'function' | 'label';
 }
@@ -58,9 +58,9 @@ export interface Keyframe<T> {
     label?: string;
     easing?: Easing;
 }
-export declare type Easing = 'linear' | 'step' | 'bounce' | Bezier[];
-export declare type BezierCP = [number, number];
-export declare type Bezier = [
+export type Easing = 'linear' | 'step' | 'bounce' | Bezier[];
+export type BezierCP = [number, number];
+export type Bezier = [
     BezierCP,
     BezierCP,
     [number, number]
@@ -105,7 +105,7 @@ export interface FunctionTrack extends BaseTrack {
     type: 'function';
     data: FunctionTrackEntry[];
 }
-export declare type FunctionTrackEntry = EntityFunctionTrackEntry | ImportFunctionTrackEntry;
+export type FunctionTrackEntry = EntityFunctionTrackEntry | ImportFunctionTrackEntry;
 export interface BaseFunctionTrackEntry {
     type: 'entity' | 'import';
     args: any[];

package/lib/behavior.d.ts

@@ -1,23 +1,36 @@
-import { Component } from './component';
+import { Component, ConstructorForComponent } from './component';
 import { ContextManager } from './context';
 import { Event } from './event';
 import { Observable } from './observable';
-export declare type BehaviorConstructor<BehaviorType = Behavior> = BehaviorType extends Behavior<any, infer ConstructorPropsType> ? new (props: ConstructorPropsType, contextManager: ContextManager) => BehaviorType : never;
-export declare type ConstructorPropsOfBehavior<BehaviorType> = BehaviorType extends Behavior<infer R> ? R : never;
-export interface BehaviorConstructorProps<InstanceType extends Component = Component> {
-    instance: InstanceType;
-}
-export declare class Behavior<InstanceType extends Component = any, ConstructorPropsType extends BehaviorConstructorProps<InstanceType> = BehaviorConstructorProps<InstanceType>> {
-    constructorProps: ConstructorPropsType;
-    contextManager: ContextManager;
+import { ZComponent } from './zcomponent';
+export type BehaviorConstructor<BehaviorType = Behavior, K extends Component = Component> = BehaviorType extends Behavior<K> ? new (contextManager: ContextManager, instance: K, ...args: any[]) => BehaviorType : never;
+export type ConstructorPropsOfBehavior<BehaviorType> = BehaviorType extends Behavior<infer R> ? R : never;
+export type BehaviorConstructorProps = {
+    [id: string]: unknown;
+};
+export declare class Behavior<InstanceType extends Component = Component> {
+    protected readonly contextManager: ContextManager;
+    readonly instance: InstanceType;
     private static callSuperDispose;
     onDispose: Event<[]>;
-    instance: InstanceType;
     private _registered;
-    constructor(constructorProps: ConstructorPropsType, contextManager: ContextManager);
+    private _zcomponent;
+    constructor(contextManager: ContextManager, instance: InstanceType);
+    getZComponentInstance<T extends ZComponent = ZComponent>(type?: ConstructorForComponent<T>): T | undefined;
+    private _updateEnabledResolved;
+    /**
+     * @zprop
+     * @zdefault true
+     * @zgroup Behavior
+     * @zgrouppriority 10
+     */
+    enabled: Observable<boolean, never>;
+    enabledResolved: Observable<boolean, never>;
     register<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
     register<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
+    unregister<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
+    unregister<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
     dispose(): never;
 }
 export declare function shouldBehaviorRunAtDesignTime(b: BehaviorConstructor): boolean;
-export declare function registerBehaviorRunAtDesignTime(b: BehaviorConstructor): Set<new (props: BehaviorConstructorProps<any>, contextManager: ContextManager) => Behavior<any, BehaviorConstructorProps<any>>>;
+export declare function registerBehaviorRunAtDesignTime(b: BehaviorConstructor): Set<new (contextManager: ContextManager, instance: Component<any, import("./component").ConstructorProps>, ...args: any[]) => Behavior<Component<any, import("./component").ConstructorProps>>>;

package/lib/behavior.js

@@ -1,12 +1,36 @@
 import { Event } from './event';
 import { Observable } from './observable';
+import { getCurrentZComponentConstruction } from './zcomponentconstruction';
 export class Behavior {
-    constructor(constructorProps, contextManager) {
-        this.constructorProps = constructorProps;
+    constructor(contextManager, instance) {
         this.contextManager = contextManager;
+        this.instance = instance;
         this.onDispose = new Event();
         this._registered = [];
-        this.instance = this.constructorProps.instance;
+        this._updateEnabledResolved = () => {
+            let newValue = this.enabled.value;
+            if (this.instance.enabledResolved?.value === false)
+                newValue = false;
+            if (newValue !== this.enabledResolved.value) {
+                this.enabledResolved.value = newValue;
+            }
+        };
+        /**
+         * @zprop
+         * @zdefault true
+         * @zgroup Behavior
+         * @zgrouppriority 10
+         */
+        this.enabled = new Observable(true);
+        this.enabledResolved = new Observable(true);
+        this._zcomponent = getCurrentZComponentConstruction();
+        this.register(this.enabled, this._updateEnabledResolved);
+        this.register(instance.enabledResolved, this._updateEnabledResolved);
+    }
+    getZComponentInstance(type) {
+        if (!type)
+            return this._zcomponent;
+        return (type && this._zcomponent instanceof type) ? this._zcomponent : undefined;
     }
     register(e, fn) {
         if (e instanceof Event)
@@ -15,6 +39,13 @@ export class Behavior {
             e.withValue(fn);
         this._registered.push([e, fn]);
     }
+    unregister(e, fn) {
+        if (e instanceof Event)
+            e.unbindfn(fn);
+        else if (e instanceof Observable)
+            e.removeWithValue(fn);
+        this._registered = this._registered.filter(entry => (entry[0] !== e || entry[1] !== fn));
+    }
     dispose() {
         for (const entry of this._registered) {
             if (entry[0] instanceof Event)

package/lib/behaviors/PlaySound.d.ts

@@ -1,4 +1,5 @@
 import { ActionBehavior, ActionBehaviorConstructorProps } from "../actionbehavior";
+import { Component } from "../component";
 import { ContextManager } from "../context";
 export interface PlaySoundProps extends ActionBehaviorConstructorProps {
     /** The URL of the file to play
@@ -16,7 +17,7 @@ export interface PlaySoundProps extends ActionBehaviorConstructorProps {
  */
 export declare class PlaySound extends ActionBehavior<PlaySoundProps> {
     private _elm;
-    constructor(props: PlaySoundProps, contextManager: ContextManager);
+    constructor(contextManager: ContextManager, instance: Component, props: PlaySoundProps);
     perform(): void;
     /** @zprop */
     preview(): void;

package/lib/behaviors/PlaySound.js

@@ -8,10 +8,9 @@ import { registerLoadable } from "../contexts/loadcontext";
  * @zgroup Actions
  */
 export class PlaySound extends ActionBehavior {
-    constructor(props, contextManager) {
-        super(props, contextManager);
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
         this._elm = document.createElement('audio');
-        this._elm.preload = 'auto';
         registerLoadable(contextManager, new Promise((resolve, reject) => {
             this._elm.addEventListener('canplaythrough', () => resolve());
             this._elm.addEventListener('error', err => {
@@ -20,6 +19,7 @@ export class PlaySound extends ActionBehavior {
             });
         }));
         this._elm.src = props.source;
+        this._elm.load();
     }
     perform() {
         this._elm.currentTime = 0;

package/lib/component.d.ts

@@ -1,30 +1,59 @@
 import { ContextManager } from './context';
 import { Event } from './event';
 import { Observable } from './observable';
-export declare type ComponentConstructor<ComponentType = Component> = ComponentType extends Component<infer ConstructorPropsType> ? new (props: ConstructorPropsType, contextManager: ContextManager) => ComponentType : never;
-export declare type ConstructorPropsOfComponent<ComponentType> = ComponentType extends Component<infer R> ? R : never;
-export declare type ComponentChild<ComponentType extends Component> = [ComponentConstructor<ComponentType>, ConstructorPropsOfComponent<ComponentType>];
-export declare type ComponentChildren = ComponentChild<any>[];
+import { ZComponent } from './zcomponent';
+export type ConstructorPropsOfComponent<ComponentType> = ComponentType extends Component<any, infer R> ? R : never;
+export type ComponentConstructor<ConstructorPropsType extends ConstructorProps, ComponentType extends Component> = new (props: ConstructorPropsType, contextManager: ContextManager) => ComponentType;
+export type ConstructorForComponent<ComponentType extends Component = Component> = new (contextManager: ContextManager, props: ComponentType extends Component<any, infer PropsType> ? PropsType : never) => ComponentType;
+export type ComponentChild<ComponentType extends Component> = [ConstructorForComponent<ComponentType>, ComponentType extends Component<any, infer U> ? U : never] | [
+    ConstructorForComponent<ComponentType>,
+    ComponentType extends Component<any, infer U> ? U : never,
+    Observable<ComponentType>
+];
+export type ComponentChildren = ComponentChild<Component>[];
 export interface ConstructorProps {
+    [id: string]: any;
     children?: ComponentChildren;
 }
-export interface ComponentOptions {
-    dontConstructChildren?: boolean;
-}
-export declare class Component<ConstructorPropsType extends ConstructorProps = ConstructorProps, RootType = any> {
-    constructorProps: ConstructorPropsType;
-    contextManager: ContextManager;
-    private _options?;
-    root?: RootType;
-    onDispose: Event<[]>;
-    children: Component[];
+export declare class Component<ElementType = any, ConstructorPropsType extends ConstructorProps = ConstructorProps> {
+    readonly contextManager: ContextManager;
+    protected constructorProps?: ConstructorPropsType | undefined;
+    element?: ElementType;
+    readonly onDispose: Event<[]>;
+    readonly children: Component[];
+    parent?: Component;
     disposed: boolean;
     private _registered;
-    constructor(constructorProps: ConstructorPropsType, contextManager: ContextManager, _options?: ComponentOptions | undefined);
-    forEachRoot(fn: (root: any) => void): void;
-    protected _constructChildren(children?: ComponentChildren): void;
+    private _zcomponent;
+    constructor(contextManager: ContextManager, constructorProps?: ConstructorPropsType | undefined);
+    constructChildren(children: ComponentChildren, contextManager?: ContextManager): void;
+    getZComponentInstance<T extends ZComponent = ZComponent>(type?: ConstructorForComponent<T>): T | undefined;
+    appendChild(c: Component): void;
+    removeChild(c: Component): void;
+    remove(): void;
+    get elementsResolved(): any[];
+    /**
+     * @zprop
+     * @zdefault true
+     * @zgroup Behavior
+     * @group Behavior
+     * @zgrouppriority 10
+     */
+    enabled: Observable<boolean, never>;
+    enabledResolved: Observable<boolean, never>;
+    /**
+     * @zprop
+     * @zgroup Other
+     * @group Other
+     * @zgrouppriority 0
+     */
+    tags: Observable<string[], never>;
     protected register<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
     protected register<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
+    protected unregister<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
+    protected unregister<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
+    private _updateEnabledResolved;
+    private _updateTags;
     dispose(): never;
     private static callSuperDispose;
 }

package/lib/component.js

@@ -1,30 +1,90 @@
+import { TagContext } from './contexts/tagcontext';
 import { Event } from './event';
 import { Observable } from './observable';
+import { getCurrentZComponentConstruction } from './zcomponentconstruction';
 export class Component {
-    constructor(constructorProps, contextManager, _options) {
-        this.constructorProps = constructorProps;
+    constructor(contextManager, constructorProps) {
         this.contextManager = contextManager;
-        this._options = _options;
+        this.constructorProps = constructorProps;
         this.onDispose = new Event();
         this.children = [];
         this.disposed = false;
         this._registered = [];
-        if (this._options?.dontConstructChildren !== true)
-            this._constructChildren(this.constructorProps.children);
-    }
-    forEachRoot(fn) {
-        if (Array.isArray(this.root))
-            this.root.forEach(fn);
-        else if (this.root !== undefined)
-            fn(this.root);
-    }
-    _constructChildren(children) {
-        if (Array.isArray(children)) {
-            for (const child of children) {
-                this.children.push(new child[0](child[1], this.contextManager));
+        /**
+         * @zprop
+         * @zdefault true
+         * @zgroup Behavior
+         * @group Behavior
+         * @zgrouppriority 10
+         */
+        this.enabled = new Observable(true);
+        this.enabledResolved = new Observable(true);
+        /**
+         * @zprop
+         * @zgroup Other
+         * @group Other
+         * @zgrouppriority 0
+         */
+        this.tags = new Observable([]);
+        this._updateEnabledResolved = () => {
+            let newValue = this.enabled.value;
+            if (this.parent?.enabledResolved?.value === false)
+                newValue = false;
+            if (newValue !== this.enabledResolved.value) {
+                this.enabledResolved.value = newValue;
+                for (const child of this.children)
+                    child._updateEnabledResolved();
             }
+        };
+        this._updateTags = () => {
+            const context = this.contextManager.get(TagContext);
+            context.registerComponent(this, this.tags.value);
+        };
+        this._zcomponent = getCurrentZComponentConstruction();
+        this.constructChildren(constructorProps?.children ?? []);
+        this.register(this.enabled, this._updateEnabledResolved);
+        this.register(this.tags, this._updateTags);
+    }
+    constructChildren(children, contextManager) {
+        contextManager = contextManager ?? this.contextManager;
+        for (const [constructor, props, ref] of children) {
+            const instance = new constructor(contextManager, props);
+            this.appendChild(instance);
+            if (ref)
+                ref.value = instance;
         }
     }
+    getZComponentInstance(type) {
+        if (!type)
+            return this._zcomponent;
+        return (type && this._zcomponent instanceof type) ? this._zcomponent : undefined;
+    }
+    appendChild(c) {
+        c.remove();
+        this.children.push(c);
+        c.parent = this;
+        c._updateEnabledResolved();
+    }
+    removeChild(c) {
+        const indx = this.children.indexOf(c);
+        if (indx >= 0)
+            this.children.splice(indx, 1);
+    }
+    remove() {
+        this.parent?.removeChild(this);
+    }
+    get elementsResolved() {
+        if (this.element !== undefined) {
+            if (Array.isArray(this.element))
+                return this.element;
+            return [this.element];
+        }
+        const ret = [];
+        for (const child of this.children) {
+            ret.push(...child.elementsResolved);
+        }
+        return ret;
+    }
     register(e, fn) {
         if (e instanceof Event)
             e.bindfn(fn);
@@ -32,6 +92,13 @@ export class Component {
             e.withValue(fn);
         this._registered.push([e, fn]);
     }
+    unregister(e, fn) {
+        if (e instanceof Event)
+            e.unbindfn(fn);
+        else if (e instanceof Observable)
+            e.removeWithValue(fn);
+        this._registered = this._registered.filter(entry => (entry[0] !== e || entry[1] !== fn));
+    }
     dispose() {
         this.disposed = true;
         for (const child of this.children) {
@@ -40,7 +107,7 @@ export class Component {
             }
             catch (err) { }
         }
-        this.children = [];
+        this.children.length = 0;
         for (const entry of this._registered) {
             if (entry[0] instanceof Event)
                 entry[0].unbindfn(entry[1]);
@@ -50,6 +117,7 @@ export class Component {
         this._registered = [];
         this.onDispose.emit();
         this.onDispose.clear();
+        this.contextManager.get(TagContext).unregisterComponent(this);
         return undefined;
     }
 }

package/lib/components/Children.d.ts

@@ -0,0 +1,8 @@
+import { Component, ConstructorProps } from "../component";
+import { ContextManager } from "../context";
+/**
+ * @zcomponent
+ */
+export declare class Children extends Component {
+    constructor(contextManager: ContextManager, props: ConstructorProps);
+}

package/lib/components/Children.js

@@ -0,0 +1,11 @@
+import { Component } from "../component";
+/**
+ * @zcomponent
+ */
+export class Children extends Component {
+    constructor(contextManager, props) {
+        super(contextManager, props);
+        const zcomponent = this.getZComponentInstance();
+        this.constructChildren(zcomponent?.constructorProps?.children ?? []);
+    }
+}

package/lib/components/DefaultLoader.d.ts

@@ -1,5 +1,5 @@
-import { Component, Observable, ConstructorProps, ContextManager } from "..";
-export interface DefaultLoaderConstructorProps extends ConstructorProps {
+import { Component, Observable, ContextManager } from "..";
+export interface DefaultLoaderConstructorProps {
     /** @zprop
      * @zgroup Appearance
      * @zgrouppriority 10
@@ -7,7 +7,7 @@ export interface DefaultLoaderConstructorProps extends ConstructorProps {
      * @zvalues files *.png
      * @zvalues files *.jpg
      */
-    backgroundImage?: string;
+    backgroundImage: string;
 }
 /**
  * The DefaultLoader shows a customizable loading bar while the assets of your experience are being downloaded and parsed by the browser.
@@ -16,8 +16,8 @@ export interface DefaultLoaderConstructorProps extends ConstructorProps {
  * @zicon loader
  * @zgroup Advanced
  */
-export declare class DefaultLoader extends Component<DefaultLoaderConstructorProps> {
-    root: HTMLDivElement;
+export declare class DefaultLoader extends Component {
+    element: HTMLDivElement;
     /** @zprop
     * @zdefault false
     * @zgroup Design Time
@@ -54,7 +54,7 @@ export declare class DefaultLoader extends Component<DefaultLoaderConstructorPro
     zIndex: Observable<number>;
     private _percentageElement;
     private _attached;
-    constructor(props: DefaultLoaderConstructorProps, contextManager: ContextManager);
+    constructor(contextManager: ContextManager, constructorProps: DefaultLoaderConstructorProps);
     private _updatePercentage;
     private _updateVisibility;
     private _update;

package/lib/components/DefaultLoader.js

@@ -7,9 +7,9 @@ import { Component, useCanvas, Observable, isDesignTime, useIsLoaded, useLoadPer
  * @zgroup Advanced
  */
 export class DefaultLoader extends Component {
-    constructor(props, contextManager) {
-        super(props, contextManager);
-        this.root = document.createElement('div');
+    constructor(contextManager, constructorProps) {
+        super(contextManager, constructorProps);
+        this.element = document.createElement('div');
         /** @zprop
         * @zdefault false
         * @zgroup Design Time
@@ -28,11 +28,11 @@ export class DefaultLoader extends Component {
             if (isDesignTime(this.contextManager) && this.preview.value)
                 shouldBeAttached = true;
             if (!this._attached && shouldBeAttached) {
-                document.body.appendChild(this.root);
+                document.body.appendChild(this.element);
                 this._attached = true;
             }
             else if (this._attached && !shouldBeAttached) {
-                this.root.remove();
+                this.element.remove();
                 this._attached = false;
             }
         };
@@ -40,25 +40,25 @@ export class DefaultLoader extends Component {
             if (this.disposed)
                 return;
             const rect = useCanvas(this.contextManager).getBoundingClientRect();
-            this.root.style.left = rect.left.toString() + "px";
-            this.root.style.top = rect.top.toString() + "px";
-            this.root.style.width = rect.width.toString() + "px";
-            this.root.style.height = rect.height.toString() + "px";
+            this.element.style.left = rect.left.toString() + "px";
+            this.element.style.top = rect.top.toString() + "px";
+            this.element.style.width = rect.width.toString() + "px";
+            this.element.style.height = rect.height.toString() + "px";
             requestAnimationFrame(this._update);
         };
-        this.root.innerHTML = loaderHTML;
-        this.root.className = "zcomponent-defaultloader";
-        if (props.backgroundImage) {
-            this.root.style.backgroundImage = `url(${props.backgroundImage})`;
+        this.element.innerHTML = loaderHTML;
+        this.element.className = "zcomponent-defaultloader";
+        if (constructorProps.backgroundImage) {
+            this.element.style.backgroundImage = `url(${constructorProps.backgroundImage})`;
         }
-        const titleElement = this.root.querySelector("#zcomponent-defaultloader-title") || document.createElement("h1");
-        const subtitleElement = this.root.querySelector("#zcomponent-defaultloader-subtitle") || document.createElement("h1");
-        this._percentageElement = this.root.querySelector("#zcomponent-defaultloader-progress-percentage") || document.createElement("div");
+        const titleElement = this.element.querySelector("#zcomponent-defaultloader-title") || document.createElement("h1");
+        const subtitleElement = this.element.querySelector("#zcomponent-defaultloader-subtitle") || document.createElement("h1");
+        this._percentageElement = this.element.querySelector("#zcomponent-defaultloader-progress-percentage") || document.createElement("div");
         this.title = new Observable('', t => titleElement.innerText = t);
         this.subtitle = new Observable('', t => subtitleElement.innerText = t);
-        this.textColor = new Observable('white', t => this.root.style.color = t ?? 'white');
-        this.backgroundColor = new Observable('black', t => this.root.style.backgroundColor = t ?? 'black');
-        this.zIndex = new Observable(1000, t => this.root.style.zIndex = t.toString());
+        this.textColor = new Observable('white', t => this.element.style.color = t ?? 'white');
+        this.backgroundColor = new Observable('black', t => this.element.style.backgroundColor = t ?? 'black');
+        this.zIndex = new Observable(1000, t => this.element.style.zIndex = t.toString());
         this.register(this.preview, this._updatePercentage);
         this.register(this.preview, this._updateVisibility);
         this.register(useIsLoaded(contextManager), this._updateVisibility);
@@ -66,7 +66,7 @@ export class DefaultLoader extends Component {
         this._update();
     }
     dispose() {
-        this.root.remove();
+        this.element.remove();
         return super.dispose();
     }
 }