polygonjs-engine/dist/src/engine/nodes/rop/Css2DRenderer.js

node-based webgl 3D engine https://polygonjs.com

import {TypedRopNode} from "./_Base";
import {CSS2DRenderer as CSS2DRenderer2} from "../../../modules/core/renderers/CSS2DRenderer";
import {RopType} from "../../poly/registers/nodes/Rop";
import {NodeParamsConfig, ParamConfig} from "../utils/params/ParamsConfig";
class Css2DRendererRopParamsConfig extends NodeParamsConfig {
  constructor() {
    super(...arguments);
    this.css = ParamConfig.STRING("", {
      multiline: true
    });
    this.sortObjects = ParamConfig.BOOLEAN(0);
    this.useFog = ParamConfig.BOOLEAN(0);
    this.fogNear = ParamConfig.FLOAT(1, {
      range: [0, 100],
      rangeLocked: [true, false],
      visibleIf: {useFog: 1}
    });
    this.fogFar = ParamConfig.FLOAT(100, {
      range: [0, 100],
      rangeLocked: [true, false],
      visibleIf: {useFog: 1}
    });
  }
}
const ParamsConfig2 = new Css2DRendererRopParamsConfig();
export class Css2DRendererRopNode extends TypedRopNode {
  constructor() {
    super(...arguments);
    this.params_config = ParamsConfig2;
    this._renderers_by_canvas_id = new Map();
  }
  static type() {
    return RopType.CSS2D;
  }
  create_renderer(canvas) {
    const renderer = new CSS2DRenderer2();
    this._renderers_by_canvas_id.set(canvas.id, renderer);
    const parent = canvas.parentElement;
    if (parent) {
      parent.prepend(renderer.domElement);
      parent.style.position = "relative";
    }
    renderer.domElement.style.position = "absolute";
    renderer.domElement.style.top = "0px";
    renderer.domElement.style.left = "0px";
    renderer.domElement.style.pointerEvents = "none";
    renderer.setSize(canvas.width / window.devicePixelRatio, canvas.height / window.devicePixelRatio);
    this._update_renderer(renderer);
    return renderer;
  }
  renderer(canvas) {
    return this._renderers_by_canvas_id.get(canvas.id) || this.create_renderer(canvas);
  }
  cook() {
    this._update_css();
    this._renderers_by_canvas_id.forEach((renderer) => {
      this._update_renderer(renderer);
    });
    this.cookController.end_cook();
  }
  _update_renderer(renderer) {
    renderer.set_sorting(this.pv.sortObjects);
    renderer.set_use_fog(this.pv.useFog);
    renderer.set_fog_range(this.pv.fogNear, this.pv.fogFar);
  }
  _update_css() {
    const element = this.css_element();
    element.innerHTML = this.pv.css;
  }
  css_element() {
    return this._css_element = this._css_element || this._find_element() || this._create_element();
  }
  _find_element() {
    return document.getElementById(this._css_element_id());
  }
  _create_element() {
    const style = document.createElement("style");
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
    style.id = this._css_element_id();
    return style;
  }
  _css_element_id() {
    return `css_2d_renderer-${this.graphNodeId()}`;
  }
}