src/core/device/widget.ts - master - igor1624/step-js

src/core/device/widget.ts
263 строки7 KB
igor1624
commit
29 окт 2025, 22:21
29 окт 2025, 22:215aa4c05
import Utils from "../utils/utils";
import Component from "./component";
import VirtualElement from "./virtual-element";

type ON_POINTER_DOWN = (event: any) => void | false | true;
type ON_POINTER_MOVE = (event: any) => void | false | true;
type ON_POINTER_UP = (event: any) => void | false | true;
type ON_CLICK = (event: any) => void | false | true;
type ON_DBL_CLICK = (event: any) => void | false | true;
type ON_MOUSE_WHEEL = (event: any) => void | false | true;
type ON_KEY_DOWN = (event: any) => void | false | true;
type ON_KEY_UP = (event: any) => void | false | true;

class Widget extends Component {

  readonly tagName: string;
  classNames: string[] = [];

  innerHTML: any;
  children: Component[] | undefined;

  constructor(tagName: string, ...params: any) {
    super();
    this.tagName = tagName;

    if (params) {
      let paramsIndex = params.length - 1;
      if (params[paramsIndex] instanceof Widget) {
        (params[paramsIndex] as Widget).append(this);
        paramsIndex--;
      } else if (typeof params[paramsIndex] === "object") {
        this.props = Object.assign({}, params[paramsIndex]);
        paramsIndex--;
        if (params[paramsIndex] instanceof Widget) {
          (params[paramsIndex] as Widget).append(this);
          paramsIndex--;
        }
      }
      if (paramsIndex === 1) {
        if (typeof params[paramsIndex] === "string") {
          this.addClassNames(params[paramsIndex]);
        }
        paramsIndex--;
      }
      if ((paramsIndex === 0) && (typeof params[paramsIndex] === "string")) {
        if (this.hasTextParam()) {
          this.setInnerText(params[paramsIndex]);
        } else {
          this.addClassNames(params[paramsIndex]);
        }
      }
    }
    this.props = this.props || {};
  }

  hasTextParam() {
    return false;
  }

  destroy() {
    // called from VirtualElement.destroy
    super.destroy();
    this.classNames = [];
    this.innerHTML = null;
    this.virtualElement = null;
  }

  destroyChildren() {
    if (this.children) {
      this.children.forEach((component: Component) => {
        component.destroy();
      });
    }
    this.children = [];
  }

  getClassName() {
    return this.classNames.join(" ");
  }

  hasClassName(className: string) {
    if (!this.classNames) {
      return false;
    }
    return this.classNames.includes(className);
  }

  addClassNames(className: string) {
    const classNames = className.split(" ");
    const htmlElement = this.getHTMLElement();
    classNames.forEach((className: string) => {
      if (this.classNames.indexOf(className) === -1) {
        this.classNames.push(className);
      }
      if (htmlElement) {
        htmlElement.classList.add(className);
      }
    });
    return this;
  }

  removeClassName(className: string) {
    const classNames = className.split(" ");
    classNames.forEach((className: string) => {
      const i = this.classNames.indexOf(className);
      if (i >= 0) {
        this.classNames.splice(i, 1);
      }
    });
    const htmlElement = this.getHTMLElement();
    if (htmlElement) {
      htmlElement.classList.remove(className);
    }
    return this;
  }

  toggleClassName(className: string) {
    const classNames = className.split(" ");
    classNames.forEach((className: string) => {
      const i = this.classNames.indexOf(className);
      if (i >= 0) {
        this.classNames.splice(i, 1);
      } else {
        this.classNames.push(className);
      }
    });
    const htmlElement = this.getHTMLElement();
    if (htmlElement) {
      htmlElement.className = this.getClassName();
    }
    return this;
  }

  resetClassName() {
    this.classNames = [];
    return this;
  }

  getStyle() {
    if (!this.props) {
      return {};
    }
    return this.props.style || {};
  }

  setStyle(style: Object) {
    this.props.style = style;
    if (this.virtualElement) {
      const htmlElement = this.virtualElement.getHTMLElement();
      if (htmlElement) {
        Object.keys(this.props.style).forEach((ruleName: string) => {
          (htmlElement.style as any)[ruleName] = this.props.style[ruleName];
        });
      }
    }
    return this;
  }

  getStyleRule(name: string) {
    if (!this.props) {
      return null;
    }
    if (!this.props.style) {
      return null;
    }
    return this.props.style[name];
  }

  setStyleRule(name: string, value: string) {
    this.props.style = this.props.style || {};
    this.props.style[name] = value;
    const htmlElement = this.getHTMLElement();
    if (htmlElement) {
      htmlElement.style[name] = value;
    }
    return this;
  }

  changeStyleProperty(name: string, value: string) {
    this.props.style = this.props.style || {};
    this.props.style[name] = value;
    const htmlElement = this.getHTMLElement();
    if (htmlElement) {
      htmlElement.style.setProperty(name, value);
    }
    return this;
  }

  setInnerText(innerText: string) {
    this.setInnerHTML(Utils.textToHTML(innerText));
    return this;
  }

  setInnerHTML(innerHTML: string) {
    this.innerHTML = innerHTML;
    const htmlElement = this.virtualElement?.getHTMLElement();
    if (htmlElement) {
      htmlElement.innerHTML = this.innerHTML;
    }
    return this;
  }

  getChildren() {
    return this.children ? this.children : [];
  }

  append(child: any) {
    if (!this.children) {
      this.children = [child];
    } else {
      this.children.push(child);
    }
    return child;
  }

  createVirtualElement() {
    if ((this as any)["mount"]) {
      this.destroyChildren();
      (this as any)["mount"]();
    }

    this.virtualElement = new VirtualElement(this, this.tagName, this.props || {});

    let className = this.getClassName();
    if (className) {
      this.virtualElement.props.className = className;
    }
    if (this.onKeyDown) {
      this.virtualElement.props.tabIndex = "0";
    }
    this.addVirtualElementsTo(this.virtualElement);
    return this.virtualElement;
  }

  addVirtualElementsTo(parentVirtualElement: VirtualElement) {
    this.getChildren().forEach((child: any) => {
      this.addVirtualElement(parentVirtualElement, child);
    });
  }

  addVirtualElement(parentVirtualElement: VirtualElement, child: any) {
    if (child instanceof VirtualElement) {
      // is ready-to-go
      parentVirtualElement.append(child);
    } else if (child instanceof Component) {
      let virtualElement = child.createVirtualElement();
      if (virtualElement) {
        parentVirtualElement.append(virtualElement);
      }
    }
  }

  onPointerDown?: ON_POINTER_DOWN;
  onPointerMove?: ON_POINTER_MOVE;
  onPointerUp?: ON_POINTER_UP;
  onClick?: ON_CLICK;
  onDblClick?: ON_DBL_CLICK;
  onMouseWheel?: ON_MOUSE_WHEEL;
  onKeyDown?: ON_KEY_DOWN;
  onKeyUp?: ON_KEY_UP;
}

export default Widget;