@media-quest/engine 0.0.14 → 0.0.15

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@media-quest/engine",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Rendering engine for media-quest schemas.",
   "main": "src/public-api.ts",
   "license": "MIT",
   "scripts": {
     "clean": "rimraf dist",
     "build": "npm run clean && tsup src/public-api.ts --sourcemap inline --format cjs,esm --dts",
-    "prepublishOnlyasdf": "npm run build",
     "tsc:check:engine": "tsc --watch --noEmit"
   }
 }

package/src/Delement/DElement.dto.ts

@@ -0,0 +1,5 @@
+import { DImgDto } from "../Delement/DImg";
+import { DTextDto } from "../Delement/DText";
+import { DDivDto } from "../Delement/Ddiv";
+
+export type DElementDto = DTextDto | DImgDto | DDivDto;

package/src/Delement/DElement.ts

@@ -1,263 +1,88 @@
-import { DStyle } from "./DStyle";
-import { DElementBaseDto } from "../dto/DElement.dto";
-import { DCommand, ElementCommand } from "../commands/DCommand";
-import { DCommandBus } from "../commands/DCommandBus";
-import { DEventHandler } from "../event-handlers/DEventHandler";
-import { DUtil } from "../utils/DUtil";
-import { EventBus } from "../events/event-bus";
-import { DTimestamp } from "../common/DTimestamp";
-import { AnimationDto } from "../dto/AnimationDto";
+import { DStyle, PStyle } from "./DStyle";
 import { ScaleService } from "../engine/scale";
-import { DState } from "../state/Dstate";
 
-export abstract class DElement<T extends HTMLElement> {
-    protected readonly el: T;
-    private clickHandlerIsEnabled = true;
-    readonly id: string;
-    private isAnimatingSelf = false;
-    protected currStyle: Partial<DStyle> = {
-        fontSize: { _unit: "px", value: 100 },
-        fontWeight: 500,
-        textColor: "black",
-        opacity: 1,
-    };
-
-    // private readonly onQueryChangedHandlers =
-    private readonly eventHandlers: DEventHandler.LookUp;
-    protected readonly commandBus: DCommandBus;
-    protected readonly eventBus: EventBus;
-    protected scale: ScaleService;
-    private readonly baseDto: DElementBaseDto;
-    protected readonly subscriptions = new Set<() => void>();
-
-    protected constructor(
-        el: T,
-        eventBus: EventBus,
-        commandBus: DCommandBus,
-        dto: DElementBaseDto,
-        scale: ScaleService
-    ) {
-        this.el = el;
-        this.id = dto.id;
-        this.baseDto = dto;
-        // this.el.style.position = "absolute";
-        this.commandBus = commandBus;
-        this.eventBus = eventBus;
-        this.eventHandlers = DEventHandler.createLookUp(dto.eventHandlers);
-        this.scale = scale;
-        // CLICK
-        this.onClickHandler = this.onClickHandler.bind(this);
-        this.el.onclick = this.onClickHandler;
-
-        // HOVER
-        this.onMouseOver = this.onMouseOver.bind(this);
-        this.el.onmouseover = this.onMouseOver;
-
-        if (dto) {
-            this.updateStyles(dto?.style);
-        }
-        const commandSubscription = this.commandBus.subscribe((c) => {
-            if (c.kind === "ELEMENT_STYLE_COMMAND" && c.targetId === this.id) {
-                this.setStyle(c.payload.changes);
-            }
-            if (c.kind === "ELEMENT_DISABLE_CLICK_COMMAND" && c.targetId === this.id) {
-                this.clickHandlerIsEnabled = false;
-            }
-            if (c.kind === "ELEMENT_ENABLE_CLICK_COMMAND" && c.targetId === this.id) {
-                this.clickHandlerIsEnabled = true;
-            }
-            if (c.kind === "ELEMENT_ANIMATE_COMMAND" && c.targetId === this.id) {
-                console.log("TODO IMPLEMENT ANIMATION_HANDLER IN DElement.");
-            }
-        }, this.id);
-        // TODO MEMORY LEAK
-        const eventSubscription = this.eventBus.subscribe((event) => {
-            const handlers = this.eventHandlers.get(event.kind) ?? [];
-            // TODO Apply Conditions in WHEN.
-            const commands = handlers.map((h) => h.thenExecute).flat(1);
-            commands.forEach((command) => {
-                this.commandBus.emit(command);
-                // this.doAction(command);
-            });
-
-            if (event.kind === "HOST_SCALE_CHANGED_EVENT") {
-                console.log("HANDLE THIS SCALE CHANGE!!");
-                this.updateStyles({});
-            }
-
-            if (event.kind === "STATE_QUERY_RESULT_CHANGED_EVENT") {
-                this.queryChangedHandler(event.data);
-            }
-        }, "ELEMENT: ");
-        this.normalize();
-        this.subscriptions.add(commandSubscription);
-        this.subscriptions.add(eventSubscription);
-    }
-
-    abstract destroy(): void;
-
-    // abstract setScale(scale: number): void;
-
-    // /**
-    //  * The purpose of this function is to re-emit commands from event-handlers?
-    //  * @param command
-    //  * @private
-    //  */
-    // private handleCommandsEmittedByPrivateEventHandlers(command: DCommand) {
-    //     console.log(command);
-    //     switch (command.kind) {
-    //         case "ELEMENT_STYLE_COMMAND":
-    //             if (command.targetId === this.id) {
-    //                 this.updateStyles(command.payload.changes);
-    //             }
-    //             break;
-    //         case "ELEMENT_ANIMATE_COMMAND":
-    //             // TODO CHECK FOR TARGET ID
-    //             this.handleAnimateSelfAction(command.payload);
-    //             break;
-    //         case "ELEMENT_ENABLE_CLICK_COMMAND":
-    //             this.clickHandlerIsEnabled = true;
-    //             // this.updateStyles(command.payload.changes);
-    //             break;
-    //         case "ELEMENT_DISABLE_CLICK_COMMAND":
-    //             this.clickHandlerIsEnabled = false;
-    //             // this.handleAnimateSelfAction(command.payload);
-    //             break;
-    //         case "VIDEO_PLAY_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "VIDEO_PAUSE_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "ENGINE_LEAVE_PAGE_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "VIDEO_JUMP_TO_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "VIDEO_SET_VOLUME_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "AUDIO_PLAY_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "AUDIO_PAUSE_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "AUDIO_SET_VOLUME_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "PAGE_QUE_NEXT_PAGE_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "PAGE_QUE_GO_TO_SEQUENCE_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "PAGE_QUE_GO_TO_PAGE_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "PAGE_QUE_EXCLUDE_BY_PAGE_ID_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "PAGE_QUE_JUMP_TO_PAGE_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "PAGE_QUE_EXCLUDE_BY_TAG_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         case "STATE_MUTATE_COMMAND":
-    //             this.commandBus.emit(command);
-    //             break;
-    //         default:
-    //             DUtil.neverCheck(command);
-    //     }
-    // }
-
-    private queryChangedHandler(result: DState.StateQueryResult) {
-        const maybeHandlers = this.baseDto.onStateChange;
-        if (!maybeHandlers) {
-            return;
-        }
-        const queryHandlers = maybeHandlers.filter((h) => h.queryName === result.queryName);
-        queryHandlers.forEach((h) => {
-            if (result.curr) {
-                h.whenTrue.forEach((command) => {
-                    // this.doAction(command);
-                    this.commandBus.emit(command);
-                });
-            } else {
-                h.whenFalse.forEach((command) => {
-                    // this.doAction(command);
-                    this.commandBus.emit(command);
-                });
-            }
-        });
-        // console.log(findByQuery, value);
-        // const all = this.baseDto.stateQueryChange ?? [];
-    }
-
-    private onClickHandler(_: MouseEvent) {
-        // console.log();
-        if (!this.clickHandlerIsEnabled) {
-            console.log(this.id + "Click disabled");
-            return;
-        }
-        const clickAction = this.baseDto.onClick;
-        // console.log("NATIVE CLICK ELEMENT: Handlers " + clickAction?.length);
-        if (clickAction && clickAction.length > 0) {
-            // console.log("TARGETID: " + clickAction[0].targetId + " " + this.id);
-            this.eventBus.emit({
-                kind: "USER_CLICKED_EVENT",
-                producer: "DUser",
-                producerId: this.id,
-                data: { elementId: this.id },
-                timestamp: DTimestamp.now(),
-            });
-            clickAction.forEach((command) => {
-                this.commandBus.emit(command);
-            });
-        }
-    }
-
-    private onMouseOver(_: MouseEvent) {
-        // console.log(ev);
-    }
+export interface DElementBaseDto {
+  readonly style: PStyle;
+  readonly onMouseEnter?: PStyle;
+  readonly onMouseLeave?: PStyle;
+  readonly onMouseDown?: PStyle;
+  readonly onMouseUp?: PStyle;
+  readonly innerText?: string;
+}
 
-    setStyle(style: Partial<DStyle>) {
-        this.updateStyles(style);
+export abstract class DElement<T extends HTMLElement> {
+  protected currStyle: Partial<DStyle> = {
+    fontSize: { _unit: "px", value: 100 },
+    fontWeight: 500,
+    textColor: "black",
+    opacity: 1,
+  };
+
+  protected constructor(
+    protected readonly el: T,
+    protected readonly dto: DElementBaseDto,
+    protected readonly scale: ScaleService,
+  ) {
+    if (dto.innerText) {
+      this.el.innerText = dto.innerText;
     }
-
-    appendYourself(parent: HTMLElement) {
-        parent.append(this.el);
-        // console.log(parent);
+    this.setStyle = this.setStyle.bind(this);
+    this.normalize = this.normalize.bind(this);
+    this.appendYourself = this.appendYourself.bind(this);
+    this.updateStyles = this.updateStyles.bind(this);
+    const { onMouseEnter, onMouseLeave } = dto;
+
+    if (onMouseEnter) {
+      this.el.onmouseenter = () => {
+        this.setStyle(onMouseEnter);
+      };
     }
-
-    private handleAnimateSelfAction(dto: AnimationDto) {
-        this.isAnimatingSelf = true;
-        const { keyframes, options } = dto;
-
-        const animation = this.el.animate(keyframes, options.duration);
-        animation.onfinish = (e: AnimationPlaybackEvent) => {
-            console.log(e.type);
-            this.isAnimatingSelf = false;
-        };
-        animation.onremove = () => {
-            console.warn("ANIMATION REMOVED: " + animation.id);
-            this.isAnimatingSelf = false;
-        };
-        animation.oncancel = () => {
-            console.warn("ANIMATION CANCELED: " + animation.id);
-            this.isAnimatingSelf = false;
-        };
+    if (onMouseLeave) {
+      this.el.onmouseleave = () => {
+        this.setStyle(onMouseLeave);
+      };
     }
 
-    private normalize() {
-        DStyle.normalize(this.el);
-    }
+    this.el.onclick = () => {
+      // if (onClick2) {
+      this.onclick();
+      // }
+    };
+    this.normalize();
 
-    protected updateStyles(style: Partial<DStyle>) {
-        this.currStyle = Object.assign(this.currStyle, style);
-        DStyle.applyStyles(this.el, this.currStyle, this.scale.scale);
-        window.getComputedStyle(this.el);
+    if (dto) {
+      this.updateStyles(dto?.style);
     }
+  }
+
+  /**
+   *  This method is called when the element is clicked.
+   *  This method shall be overridden by the pageClass.
+   * @param actions
+   */
+  onclick() {
+    // console.warn("onclick not implemented");
+  }
+
+  setStyle(style: PStyle) {
+    this.updateStyles(style);
+  }
+
+  appendYourself(parent: { append: (el: HTMLElement) => void }) {
+    parent.append(this.el);
+    // console.log(parent);
+  }
+
+  private normalize() {
+    this.el.style.padding = "0";
+    this.el.style.margin = "0";
+    this.el.style.position = "absolute";
+    this.el.style.boxSizing = "border-box";
+  }
+
+  protected updateStyles(style: Partial<DStyle>) {
+    this.currStyle = Object.assign(this.currStyle, style);
+    DStyle.applyStyles(this.el, this.currStyle, this.scale.scale);
+    window.getComputedStyle(this.el);
+  }
 }

package/src/Delement/DImg.ts

@@ -1,78 +1,39 @@
-import { DElement } from "./DElement";
-import { DImgDto } from "../dto/DElement.dto";
-import { DCommandBus } from "../commands/DCommandBus";
-import { EventBus } from "../events/event-bus";
+import { DElement, DElementBaseDto } from "./DElement";
 import { ScaleService } from "../engine/scale";
 import { DTimestamp } from "../common/DTimestamp";
 
-export class DImg extends DElement<HTMLImageElement> {
-    private static IMAGE_COUNT = 0;
-    private readonly imageCount: number;
-    readonly TAG: string;
-    readonly TIMING_TAG: string;
-    private readonly loadStart: DTimestamp;
-
-    constructor(
-        private readonly dto: DImgDto,
-        private readonly actionSubject: DCommandBus,
-        readonly eventBus: EventBus,
-        readonly scaleService: ScaleService
-    ) {
-        super(document.createElement("img"), eventBus, actionSubject, dto, scaleService);
-        DImg.IMAGE_COUNT += 1;
-        this.imageCount = DImg.IMAGE_COUNT;
-        this.TAG = "[D_IMG " + DImg.IMAGE_COUNT + " ]: ";
-        this.TIMING_TAG = "load-time (" + DImg.IMAGE_COUNT + ") ";
-        this.el.loading = "eager";
-        this.el.style.position = "absolute";
-        this.setStyle(dto.style);
-        this.loadStart = DTimestamp.now();
-        // Bind Handlers
-        this.onError = this.onError.bind(this);
-        this.onLoad = this.onLoad.bind(this);
-        // this.onClick = this.onClick.bind(this);
-        this.el.onload = this.onLoad;
-        this.el.onerror = this.onError;
-        // this.el.onclick = this.onClick;
-        this.el.src = dto.url;
-        console.time(this.TIMING_TAG);
-    }
-
-    log(): void {}
+export interface DImgDto extends DElementBaseDto {
+  readonly _tag: "img";
+  // readonly id: string;
+  readonly url: string;
+}
 
-    setScale(scale: number) {
-        console.log(scale);
-        this.setStyle(this.currStyle);
-    }
-    destroy() {
-        this.subscriptions.forEach((unsubscribe) => {
-            unsubscribe();
-        });
-    }
+export class DImg extends DElement<HTMLImageElement> {
+  private static IMAGE_COUNT = 0;
+  private readonly imageCount: number;
+  readonly TAG: string;
+  readonly TIMING_TAG: string;
+  private readonly loadStart: DTimestamp;
 
-    private onError(ev: Event | string) {
-        if (ev instanceof Event) {
-            console.log(this.TAG + " " + ev.type);
-        } else {
-            console.log(this.TAG + ev);
-        }
-    }
+  constructor(
+    protected readonly dto: DImgDto,
+    readonly scaleService: ScaleService,
+  ) {
+    super(document.createElement("img"), dto, scaleService);
+    DImg.IMAGE_COUNT += 1;
+    this.imageCount = DImg.IMAGE_COUNT;
+    this.TAG = "[D_IMG " + DImg.IMAGE_COUNT + " ]: ";
+    this.TIMING_TAG = "load-time (" + DImg.IMAGE_COUNT + ") ";
+    this.el.loading = "eager";
+    this.el.style.position = "absolute";
+    this.setStyle(dto.style);
 
-    private onLoad(_: Event) {
-        const loadTime = DTimestamp.diffNow(this.loadStart);
+    this.loadStart = DTimestamp.now();
+    this.el.onload = () => {};
+    this.el.onerror = () => {};
+    this.el.src = dto.url;
+    console.time(this.TIMING_TAG);
+  }
 
-        this.eventBus.emit({
-            kind: "IMAGE_LOADED_EVENT",
-            producer: "DImage",
-            producerId: this.id,
-            timestamp: DTimestamp.now(),
-            data: {
-                loadTime,
-                naturalHeight: this.el.naturalHeight,
-                naturalWidth: this.el.naturalWidth,
-                height: this.el.height,
-                width: this.el.width,
-            },
-        });
-    }
+  log(): void {}
 }