@media-quest/engine 0.0.30 → 0.0.32

package/src/Delement/DStyle.ts

@@ -1,165 +1,368 @@
-import { DCss } from "./css";
-import { DUtil } from "../utils/DUtil";
-
-type DStyle2 = CSSStyleDeclaration;
-export type PStyle = Partial<DStyle>;
-export interface DStyle {
-  opacity: number;
-  backgroundColor: string;
-  visibility: "visible" | "hidden";
-  cursor:
-    | "pointer"
-    | "help"
-    | "copy"
-    | "wait"
-    | "not-allowed"
-    | "context-menu"
-    | "move"
-    | "grabbing"
-    | "grab"
-    | "zoom-in"
-    | "zoom-out"
-    | "none"
-    | "auto"
-    | "default";
-
-  // POSITION
-  h: number;
-  w: number;
-  x: number;
-  y: number;
-
-  // BORDERS
-  borderStyle: "solid" | "none" | "dotted" | "dashed";
-  borderRadius: DCss.Px | DCss.Percent;
-  borderWidth: DCss.Px;
-  borderColor: string;
-
-  margin: DCss.Px | DCss.Percent;
-  padding: DCss.Px | DCss.Percent;
-
-  // Translate
-  transform: string;
-  translate: string;
-
-  // TEXT
-  fontSize: DCss.Px;
-  textColor: string;
-  fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-  textAlign: "right" | "left" | "center";
-  letterSpacing: DCss.Px;
-}
-
-export namespace DStyle {
-  export const normalize = <T extends HTMLElement>(el: T): T => {
-    el.style.padding = "0";
-    el.style.margin = "0";
-    el.style.position = "absolute";
-    el.style.boxSizing = "border-box";
-    return el;
-  };
-
-  export const applyStyles = <T extends HTMLElement>(el: T, style: Partial<DStyle>, scale: number): T => {
-    // const scalePx = DCss.toStringCre(this.scale);
-    const {
-      x,
-      y,
-      backgroundColor,
-      borderColor,
-      borderWidth,
-      borderRadius,
-      borderStyle,
-      w,
-      opacity,
-      cursor,
-      fontSize,
-      fontWeight,
-      textColor,
-      textAlign,
-      translate,
-      margin,
-      padding,
-      letterSpacing,
-      h,
-      transform,
-      visibility,
-    } = style;
-
-    // this.el.style.fontWeight = '900';
-    if (backgroundColor) {
-      el.style.backgroundColor = backgroundColor;
-    }
-
-    if (cursor) {
-      el.style.cursor = cursor;
-    }
-
-    if (transform) {
-      el.style.transform = transform;
-    }
-
-    if (textColor) {
-      el.style.color = textColor;
-    }
-    if (textAlign) {
-      el.style.textAlign = textAlign;
-    }
-
-    if (borderColor) {
-      el.style.borderColor = borderColor;
-    }
-
-    if (borderWidth) {
-      el.style.borderWidth = DCss.toString(borderWidth, scale);
-    }
-    if (fontWeight) {
-      el.style.fontWeight = fontWeight + "";
-    }
-    if (borderStyle) {
-      el.style.borderStyle = borderStyle;
-    }
-    if (fontSize) {
-      el.style.fontSize = DCss.toString(fontSize, scale);
-    }
-
-    if (DUtil.isNumber(x)) {
-      el.style.left = x + "%";
-    }
-    if (DUtil.isNumber(y)) {
-      el.style.bottom = y + "%";
-    }
-
-    if (DUtil.isNumber(h)) {
-      el.style.height = h + "%";
-    }
-    if (DUtil.isNumber(w)) {
-      el.style.width = w + "%";
-    }
-
-    if (DCss.isLengthUnit(borderRadius)) {
-      el.style.borderRadius = DCss.toString(borderRadius, scale);
-    }
-
-    if (letterSpacing) {
-      el.style.letterSpacing = DCss.toString(letterSpacing, scale);
-    }
-    if (margin) {
-      el.style.margin = DCss.toString(margin, scale);
-    }
-    if (padding) {
-      el.style.padding = DCss.toString(padding, scale);
-    }
-
-    if (DUtil.isNumber(opacity)) {
-      el.style.opacity = opacity + "";
-    }
-
-    if (visibility) {
-      el.style.visibility = visibility;
-    }
-
-    return el;
-  };
-  // const propNames = new Set(...ElementKeyNames);
-  // export const validKey = (keyName: string) => propNames.has(keyName);
-}
+import { DCss } from "./css";
+import { DUtil } from "../utils/DUtil";
+
+export type PStyle = Partial<DStyle>;
+export interface DStyle {
+  opacity: number;
+  backgroundColor: string;
+  visibility: "visible" | "hidden";
+  cursor:
+    | "pointer"
+    | "help"
+    | "copy"
+    | "wait"
+    | "not-allowed"
+    | "context-menu"
+    | "move"
+    | "grabbing"
+    | "grab"
+    | "zoom-in"
+    | "zoom-out"
+    | "none"
+    | "auto"
+    | "default";
+
+  zIndex: number;
+  // POSITION
+  h: number;
+  w: number;
+  x: number;
+  y: number;
+  height: DCss.LengthUnit;
+  maxHeight: DCss.LengthUnit;
+  minHeight: DCss.LengthUnit;
+  width: DCss.LengthUnit;
+  maxWidth: DCss.LengthUnit;
+  minWidth: DCss.LengthUnit;
+  bottom: DCss.LengthUnit;
+  top: DCss.LengthUnit;
+  left: DCss.LengthUnit;
+  right: DCss.LengthUnit;
+  boxShadow: string;
+
+  // BORDERS
+  borderStyle: "solid" | "none" | "dotted" | "dashed";
+  borderRadius: DCss.Px | DCss.Percent;
+  borderWidth: DCss.Px;
+  borderColor: string;
+
+  margin: DCss.Px | DCss.Percent;
+  padding: DCss.Px | DCss.Percent;
+  paddingLeft: DCss.Px | DCss.Percent;
+  paddingRight: DCss.Px | DCss.Percent;
+  paddingTop: DCss.Px | DCss.Percent;
+  paddingBottom: DCss.Px | DCss.Percent;
+
+  // Translate
+  transform: string;
+  translate: string;
+
+  // TEXT
+  fontSize: DCss.Px;
+  textColor: string;
+  fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+  textAlign: "right" | "left" | "center";
+  letterSpacing: DCss.Px;
+  lineHeight: number;
+
+  // LAYOUT & POSITIONING OVERRIDE
+  position: "absolute" | "relative";
+  display: "flex" | "block";
+  flexDirection: "row" | "colum";
+  flexWrap: "nowrap" | "wrap";
+  justifyContent:
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "space-around"
+    | "space-evenly"
+    | "space-between";
+  alignItems: "stretch" | "baseline" | "center" | "flex-start" | "flex-end";
+  gap: DCss.Px;
+  alignContent:
+    | "stretch"
+    | "center"
+    | "flex-start"
+    | "flex-end"
+    | "space-around"
+    | "space-evenly"
+    | "space-between";
+}
+
+export namespace DStyle {
+  import isNumber = DUtil.isNumber;
+  import isLengthUnit = DCss.isLengthUnit;
+  export const normalize = <T extends HTMLElement>(el: T): T => {
+    const s = el.style;
+    // el.style.padding = "";
+    // el.style.margin = "";
+    // el.style.position = "absolute";
+    // el.style.boxSizing = "border-box";
+    s.position = "absolute";
+    s.boxSizing = "border-box";
+    s.bottom = "";
+    s.top = "";
+    s.left = "";
+    s.right = "";
+    s.boxShadow = "";
+    s.padding = "0px";
+    s.margin = "0px";
+    s.fontSize = "12px";
+    s.lineHeight = "1";
+    s.textAlign = "center";
+    s.textDecoration = "none";
+    s.boxShadow = "";
+    s.boxSizing = "border-box";
+    s.fontWeight = "500";
+    s.borderStyle = "";
+    s.borderRadius = "";
+    s.borderWidth = "";
+    s.borderWidth = "10px";
+    s.borderColor = "black";
+    s.backgroundColor = "";
+    s.border = "";
+    s.borderStyle = "none";
+    s.outline = "";
+    s.wordSpacing = "";
+    s.userSelect = "none";
+    s.textShadow = "";
+    return el;
+  };
+
+  export const applyStyles = <T extends HTMLElement>(
+    el: T,
+    style: Partial<DStyle>,
+    scale: number,
+  ): T => {
+    // const scalePx = DCss.toStringCre(this.scale);
+    const {
+      x,
+      y,
+      left,
+      right,
+      top,
+      bottom,
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      borderRadius,
+      borderStyle,
+      w,
+      opacity,
+      cursor,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      textColor,
+      textAlign,
+      translate,
+      margin,
+      padding,
+      letterSpacing,
+      h,
+      height,
+      width,
+      transform,
+      visibility,
+      justifyContent,
+      alignContent,
+      flexWrap,
+      display,
+      flexDirection,
+      alignItems,
+      position,
+      paddingLeft,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      gap,
+
+      zIndex,
+      //
+      boxShadow,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+    } = style;
+
+    if (typeof zIndex === "number") {
+      el.style.zIndex = "" + zIndex;
+    }
+
+    if (DCss.isLengthUnit(minWidth)) {
+      el.style.minWidth = DCss.toString(minWidth, scale);
+    }
+
+    if (DCss.isLengthUnit(maxWidth)) {
+      el.style.maxWidth = DCss.toString(maxWidth, scale);
+    }
+
+    if (typeof lineHeight === "number") {
+      el.style.lineHeight = "" + lineHeight;
+    }
+
+    if (DCss.isLengthUnit(minHeight)) {
+      el.style.minHeight = DCss.toString(minHeight, scale);
+    }
+
+    if (DCss.isLengthUnit(maxHeight)) {
+      el.style.maxHeight = DCss.toString(maxHeight, scale);
+    }
+
+    if (boxShadow) {
+      el.style.boxShadow = boxShadow;
+    }
+
+    if (gap) {
+      el.style.gap = DCss.toString(gap, scale);
+    }
+
+    if (paddingLeft) {
+      el.style.paddingLeft = DCss.toString(paddingLeft, scale);
+    }
+
+    if (paddingRight) {
+      el.style.paddingRight = DCss.toString(paddingRight, scale);
+    }
+
+    if (paddingTop) {
+      el.style.paddingTop = DCss.toString(paddingTop, scale);
+    }
+
+    if (paddingBottom) {
+      el.style.paddingBottom = DCss.toString(paddingBottom, scale);
+    }
+
+    if (position) {
+      el.style.position = position;
+    }
+    if (justifyContent) {
+      el.style.justifyContent = justifyContent;
+    }
+
+    if (alignContent) {
+      el.style.alignContent = alignContent;
+    }
+    if (flexWrap) {
+      el.style.flexWrap = flexWrap;
+    }
+    if (display) {
+      el.style.display = display;
+    }
+    if (flexDirection) {
+      el.style.flexDirection = flexDirection;
+    }
+    if (alignItems) {
+      el.style.alignItems = alignItems;
+    }
+
+    // this.el.style.fontWeight = '900';
+    if (backgroundColor) {
+      el.style.backgroundColor = backgroundColor;
+    }
+
+    if (cursor) {
+      el.style.cursor = cursor;
+    }
+
+    if (transform) {
+      el.style.transform = transform;
+    }
+
+    if (textColor) {
+      el.style.color = textColor;
+    }
+    if (textAlign) {
+      el.style.textAlign = textAlign;
+    }
+
+    if (borderColor) {
+      el.style.borderColor = borderColor;
+    }
+
+    if (borderWidth) {
+      el.style.borderWidth = DCss.toString(borderWidth, scale);
+    }
+
+    if (fontWeight) {
+      el.style.fontWeight = fontWeight + "";
+    }
+
+    if (borderStyle) {
+      el.style.borderStyle = borderStyle;
+    }
+
+    if (fontSize) {
+      el.style.fontSize = DCss.toString(fontSize, scale);
+    }
+
+    if (DUtil.isNumber(x)) {
+      el.style.left = x + "%";
+    }
+
+    if (DUtil.isNumber(y)) {
+      el.style.bottom = y + "%";
+    }
+
+    if (DCss.isLengthUnit(height)) {
+      el.style.height = DCss.toString(height, scale);
+    }
+
+    if (DCss.isLengthUnit(width)) {
+      el.style.width = DCss.toString(width, scale);
+    }
+
+    if (DCss.isLengthUnit(left)) {
+      el.style.left = DCss.toString(left, scale);
+    }
+
+    if (DCss.isLengthUnit(right)) {
+      el.style.right = DCss.toString(right, scale);
+    }
+
+    if (DCss.isLengthUnit(bottom)) {
+      el.style.bottom = DCss.toString(bottom, scale);
+    }
+
+    if (DCss.isLengthUnit(top)) {
+      el.style.top = DCss.toString(top, scale);
+    }
+
+    if (DUtil.isNumber(h)) {
+      el.style.height = DCss.toString(h, scale);
+    }
+
+    if (isNumber(w)) {
+      el.style.width = DCss.toString(w, scale);
+    }
+
+    if (DCss.isLengthUnit(borderRadius)) {
+      el.style.borderRadius = DCss.toString(borderRadius, scale);
+    }
+
+    if (letterSpacing) {
+      el.style.letterSpacing = DCss.toString(letterSpacing, scale);
+    }
+
+    if (margin) {
+      el.style.margin = DCss.toString(margin, scale);
+    }
+
+    if (padding) {
+      el.style.padding = DCss.toString(padding, scale);
+    }
+
+    if (isNumber(opacity)) {
+      el.style.opacity = opacity + "";
+    }
+
+    if (visibility) {
+      el.style.visibility = visibility;
+    }
+    return el;
+  };
+
+  // const propNames = new Set(...ElementKeyNames);
+  // export const validKey = (keyName: string) => propNames.has(keyName);
+}

package/src/Delement/DText.ts

@@ -1,13 +1,23 @@
-import { DElement, DElementBaseDto } from "./DElement";
-import { ScaleService } from "../engine/scale";
-
-export interface DTextDto extends DElementBaseDto {
-  readonly _tag: "p";
-  readonly innerText: string;
-}
-
-export class DText extends DElement<HTMLParagraphElement> {
-  constructor(dto: DTextDto, scale: ScaleService) {
-    super(document.createElement("p"), dto, scale);
-  }
-}
+import { DElement, DElementBaseDto } from "./DElement";
+import { ScaleService } from "../engine/scale";
+import { ButtonClickAction } from "./button-click-action";
+
+export interface DTextDto extends DElementBaseDto {
+  readonly _tag: "p";
+  readonly innerText: string;
+}
+
+export class DText extends DElement<HTMLParagraphElement> {
+  constructor(dto: DTextDto, scale: ScaleService) {
+    super(document.createElement("p"), dto, scale);
+  }
+
+  registerClickHandler(clickHandler: (action: ButtonClickAction) => void) {
+    this.el.onclick = () => {
+      const onClick = this.dto.onClick;
+      if (onClick) {
+        clickHandler(onClick);
+      }
+    };
+  }
+}

package/src/Delement/Ddiv.ts

@@ -1,25 +1,44 @@
-import { DElement, DElementBaseDto } from "./DElement";
-import { DText, DTextDto } from "./DText";
-import { DImg, DImgDto } from "./DImg";
-import { ScaleService } from "../engine/scale";
-
-export interface DDivDto extends DElementBaseDto {
-  readonly _tag: "div";
-  readonly children: Array<DTextDto | DImgDto>;
-}
-
-export class DDiv extends DElement<HTMLDivElement> {
-  private readonly TAG = "[ DDiv ]: ";
-  protected readonly defaultStyle = { x: 22, y: 4 };
-  private children: Array<DText | DImg> = [];
-
-  constructor(dto: DDivDto, scale: ScaleService, children: Array<DText | DImg>) {
-    const d = document.createElement("div");
-    super(d, dto, scale);
-    this.children = children;
-
-    this.children.forEach((child) => {
-      child.appendYourself(this.el);
-    });
-  }
-}
+import { DElement, DElementBaseDto } from "./DElement";
+import { DText, DTextDto } from "./DText";
+import { DImg, DImgDto } from "./DImg";
+import { ScaleService } from "../engine/scale";
+import { DButton, DButtonDto } from "./DButton";
+import { ButtonClickAction } from "./button-click-action";
+
+export interface DDivDto extends DElementBaseDto {
+  readonly _tag: "div";
+  readonly children: Array<DTextDto | DImgDto | DButtonDto>;
+}
+
+export class DDiv extends DElement<HTMLDivElement> {
+  private readonly TAG = "[ DDiv ]: ";
+  protected readonly defaultStyle = { x: 22, y: 4 };
+  private children: Array<DText | DImg | DButton> = [];
+
+  registerClickHandler(clickHandler: (action: ButtonClickAction) => void) {
+    this.el.onclick = () => {
+      const action = this.dto.onClick;
+      if (action) {
+        clickHandler(action);
+      }
+    };
+    this.children.forEach((child) => {
+      child.registerClickHandler(clickHandler);
+    });
+  }
+
+  constructor(dto: DDivDto, scale: ScaleService, children: Array<DText | DImg | DButton>) {
+    const d = document.createElement("div");
+    super(d, dto, scale);
+    this.children = children;
+
+    this.children.forEach((child) => {
+      child.appendYourself(this.el);
+    });
+  }
+  protected whenConstructed() {
+    this.children.forEach((child) => {
+      console.log(child);
+    });
+  }
+}