polygonjs-engine/dist/src/core/operations/sop/Css2DObject.js

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

import {BaseSopOperation} from "./_Base";
import {InputCloneMode as InputCloneMode2} from "../../../engine/poly/InputCloneMode";
import {CSS2DObject as CSS2DObject2} from "../../../modules/core/objects/CSS2DObject";
import {CoreString} from "../../../core/String";
import {CoreType} from "../../Type";
const ATTRIBUTE_NAME = {
  id: "id",
  className: "class",
  html: "html"
};
const Css2DObjectSopOperation2 = class extends BaseSopOperation {
  static type() {
    return "css2DObject";
  }
  cook(input_contents, params) {
    const core_group = input_contents[0];
    if (core_group) {
      const objects = this._create_objects_from_input_points(core_group, params);
      return this.create_core_group_from_objects(objects);
    } else {
      const object = this._create_object_from_scratch(params);
      return this.create_core_group_from_objects([object]);
    }
  }
  _create_objects_from_input_points(core_group, params) {
    const points = core_group.points();
    const objects = [];
    for (let point of points) {
      const id = params.useIdAttrib ? point.attribValue(ATTRIBUTE_NAME.id) : params.className;
      const className = params.useClassAttrib ? point.attribValue(ATTRIBUTE_NAME.className) : params.className;
      const html = params.useHtmlAttrib ? point.attribValue(ATTRIBUTE_NAME.html) : params.html;
      const object = Css2DObjectSopOperation2.create_css_object({
        id,
        className,
        html
      });
      const element = object.element;
      if (params.copyAttributes) {
        const attrib_names = CoreString.attribNames(params.attributesToCopy);
        for (let attrib_name of attrib_names) {
          const attrib_value = point.attribValue(attrib_name);
          if (CoreType.isString(attrib_value)) {
            element.setAttribute(attrib_name, attrib_value);
          } else {
            if (CoreType.isNumber(attrib_value)) {
              element.setAttribute(attrib_name, `${attrib_value}`);
            }
          }
        }
      }
      object.position.copy(point.position());
      object.updateMatrix();
      objects.push(object);
    }
    return objects;
  }
  _create_object_from_scratch(params) {
    const object = Css2DObjectSopOperation2.create_css_object({
      id: params.id,
      className: params.className,
      html: params.html
    });
    return object;
  }
  static create_css_object(params) {
    const element = document.createElement("div");
    element.id = params.id;
    element.className = params.className;
    element.innerHTML = params.html;
    const object = new CSS2DObject2(element);
    object.matrixAutoUpdate = false;
    return object;
  }
};
export let Css2DObjectSopOperation = Css2DObjectSopOperation2;
Css2DObjectSopOperation.DEFAULT_PARAMS = {
  useIdAttrib: false,
  id: "my_css_object",
  useClassAttrib: false,
  className: "css2DObject",
  useHtmlAttrib: false,
  html: "<div>default html</div>",
  copyAttributes: false,
  attributesToCopy: ""
};
Css2DObjectSopOperation.INPUT_CLONED_STATE = InputCloneMode2.FROM_NODE;