@polygonjs/polygonjs
Version:
node-based WebGL 3D engine https://polygonjs.com
120 lines (119 loc) • 3.86 kB
JavaScript
;
import { DEFAULT_CSS3DOBJECT } from "./../../../core/render/CSSRenderers/CSSObjectAttribute";
import { TypedRopNode } from "./_Base";
import { CSS3DRenderer } from "../../../core/render/CSSRenderers/CSS3DRenderer";
import { RopType } from "../../poly/registers/nodes/types/Rop";
import { NodeParamsConfig, ParamConfig } from "../utils/params/ParamsConfig";
import { StringParamLanguage } from "../../params/utils/OptionsController";
const DEFAULT_CSS = `.${DEFAULT_CSS3DOBJECT.className} {
will-change: transform;
color: white;
background-color: black;
padding: 5px 10px;
border: 1px solid blue;
border-radius: 5px;
pointer-events: auto;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-smooth: always;
}`;
class CSS3DRendererRopParamsConfig extends NodeParamsConfig {
constructor() {
super(...arguments);
/** @param css rules to be added in the html document */
this.css = ParamConfig.STRING(DEFAULT_CSS, {
language: StringParamLanguage.CSS
});
}
}
const ParamsConfig = new CSS3DRendererRopParamsConfig();
export class CSS3DRendererRopNode extends TypedRopNode {
constructor() {
super(...arguments);
this.paramsConfig = ParamsConfig;
this._renderersByCanvasId = /* @__PURE__ */ new Map();
}
static type() {
return RopType.CSS3D;
}
createRenderer(canvas) {
const renderer = new CSS3DRenderer();
this._renderersByCanvasId.set(canvas.id, renderer);
renderer.domElement.style.position = "absolute";
renderer.domElement.style.top = "0px";
renderer.domElement.style.left = "0px";
renderer.domElement.style.pointerEvents = "none";
renderer.domElement.style.willChange = "transform";
this._updateRenderer(renderer);
return renderer;
}
mountRenderer(canvas) {
const renderer = this._renderersByCanvasId.get(canvas.id);
if (!renderer) {
console.warn(`no render found for canvas ${canvas.id}. cannot mount CSS2DRenderer`);
return;
}
const parent = canvas.parentElement;
if (parent) {
parent.prepend(renderer.domElement);
parent.style.position = "relative";
} else {
console.warn("canvas has no parent");
}
const rect = canvas.getBoundingClientRect();
renderer.setSize(rect.width, rect.height);
}
unmountRenderer(canvas) {
var _a;
const renderer = this._renderersByCanvasId.get(canvas.id);
if (!renderer) {
return;
}
(_a = renderer.domElement.parentElement) == null ? void 0 : _a.removeChild(renderer.domElement);
}
renderer(canvas) {
return this._renderersByCanvasId.get(canvas.id) || this.createRenderer(canvas);
}
// remove_renderer_element(canvas: HTMLCanvasElement) {
// // not ideal, because I could not re-add it back
// const renderer = this.renderer(canvas);
// if (renderer) {
// const parent = canvas.parentElement;
// if (parent) {
// parent.removeChild(renderer.domElement);
// }
// }
// }
cook() {
this._updateCSS();
this._renderersByCanvasId.forEach((renderer) => {
this._updateRenderer(renderer);
});
this.cookController.endCook();
}
_updateRenderer(renderer) {
}
_updateCSS() {
const element = this._CSSElement();
element.innerHTML = this.pv.css;
}
// = new CSSStyleSheet();
_CSSElement() {
return this.__CSSElement = this.__CSSElement || this._findElement() || this._createElement();
}
_findElement() {
return document.getElementById(this._CSSElementId());
}
_createElement() {
const style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
style.id = this._CSSElementId();
return style;
}
_CSSElementId() {
return `CSS2DRenderer-${this.graphNodeId()}`;
}
}