@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta10

package/src/main-api/Inspector.ts

@@ -1,522 +1,567 @@
-import {
-  CoreNode,
-  type CoreNodeAnimateProps,
-  type CoreNodeProps,
-} from '../core/CoreNode.js';
-import { type RendererMainSettings } from './Renderer.js';
-import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
-import type { IAnimationController } from '../common/IAnimationController.js';
-import { isProductionEnvironment } from '../utils.js';
-import type { CoreTextNode, CoreTextNodeProps } from '../core/CoreTextNode.js';
-
-/**
- * Inspector
- *
- * The inspector is a tool that allows you to inspect the state of the renderer
- * and the nodes that are being rendered. It is a tool that is used for debugging
- * and development purposes.
- *
- * The inspector will generate a DOM tree that mirrors the state of the renderer
- */
-
-/**
- * stylePropertyMap is a map of renderer properties that are mapped to CSS properties
- *
- * It can either return a string or an object with a prop and value property. Once a
- * property is found in the map, the value is set on the style of the div element.
- * Erik H made me do it.
- */
-interface StyleResponse {
-  prop: string;
-  value: string;
-}
-const stylePropertyMap: {
-  [key: string]: (
-    value: string | number | boolean,
-  ) => string | StyleResponse | null;
-} = {
-  alpha: (v) => {
-    if (v === 1) {
-      return null;
-    }
-
-    return { prop: 'opacity', value: `${v}` };
-  },
-  x: (x) => {
-    return { prop: 'left', value: `${x}px` };
-  },
-  y: (y) => {
-    return { prop: 'top', value: `${y}px` };
-  },
-  width: (w) => {
-    if (w === 0) {
-      return null;
-    }
-
-    return { prop: 'width', value: `${w}px` };
-  },
-  height: (h) => {
-    if (h === 0) {
-      return null;
-    }
-
-    return { prop: 'height', value: `${h}px` };
-  },
-  fontSize: (fs) => {
-    if (fs === 0) {
-      return null;
-    }
-
-    return { prop: 'font-size', value: `${fs}px` };
-  },
-  lineHeight: (lh) => {
-    if (lh === 0) {
-      return null;
-    }
-
-    return { prop: 'line-height', value: `${lh}px` };
-  },
-  zIndex: () => 'z-index',
-  fontFamily: () => 'font-family',
-  fontStyle: () => 'font-style',
-  fontWeight: () => 'font-weight',
-  fontStretch: () => 'font-stretch',
-  letterSpacing: () => 'letter-spacing',
-  textAlign: () => 'text-align',
-  overflowSuffix: () => 'overflow-suffix',
-  maxLines: () => 'max-lines',
-  contain: () => 'contain',
-  verticalAlign: () => 'vertical-align',
-  clipping: (v) => {
-    if (v === false) {
-      return null;
-    }
-
-    return { prop: 'overflow', value: v ? 'hidden' : 'visible' };
-  },
-  rotation: (v) => {
-    if (v === 0) {
-      return null;
-    }
-
-    return { prop: 'transform', value: `rotate(${v}rad)` };
-  },
-  scale: (v) => {
-    if (v === 1) {
-      return null;
-    }
-
-    return { prop: 'transform', value: `scale(${v})` };
-  },
-  scaleX: (v) => {
-    if (v === 1) {
-      return null;
-    }
-
-    return { prop: 'transform', value: `scaleX(${v})` };
-  },
-  scaleY: (v) => {
-    if (v === 1) {
-      return null;
-    }
-
-    return { prop: 'transform', value: `scaleY(${v})` };
-  },
-  color: (v) => {
-    if (v === 0) {
-      return null;
-    }
-
-    return { prop: 'color', value: convertColorToRgba(v as number) };
-  },
-};
-
-const convertColorToRgba = (color: number) => {
-  const a = (color & 0xff) / 255;
-  const b = (color >> 8) & 0xff;
-  const g = (color >> 16) & 0xff;
-  const r = (color >> 24) & 0xff;
-  return `rgba(${r},${g},${b},${a})`;
-};
-
-const domPropertyMap: { [key: string]: string } = {
-  id: 'test-id',
-};
-
-const gradientColorPropertyMap = [
-  'colorTop',
-  'colorBottom',
-  'colorLeft',
-  'colorRight',
-  'colorTl',
-  'colorTr',
-  'colorBl',
-  'colorBr',
-];
-
-const knownProperties = new Set<string>([
-  ...Object.keys(stylePropertyMap),
-  ...Object.keys(domPropertyMap),
-  // ...gradientColorPropertyMap,
-  'src',
-  'parent',
-  'data',
-]);
-
-export class Inspector {
-  private root: HTMLElement | null = null;
-  private canvas: HTMLCanvasElement | null = null;
-  private height = 1080;
-  private width = 1920;
-  private scaleX = 1;
-  private scaleY = 1;
-
-  constructor(canvas: HTMLCanvasElement, settings: RendererMainSettings) {
-    if (isProductionEnvironment()) return;
-
-    if (!settings) {
-      throw new Error('settings is required');
-    }
-
-    // calc dimensions based on the devicePixelRatio
-    this.height = Math.ceil(
-      settings.appHeight ?? 1080 / (settings.deviceLogicalPixelRatio ?? 1),
-    );
-
-    this.width = Math.ceil(
-      settings.appWidth ?? 1920 / (settings.deviceLogicalPixelRatio ?? 1),
-    );
-
-    this.scaleX = settings.deviceLogicalPixelRatio ?? 1;
-    this.scaleY = settings.deviceLogicalPixelRatio ?? 1;
-
-    this.canvas = canvas;
-    this.root = document.createElement('div');
-    this.setRootPosition();
-    document.body.appendChild(this.root);
-
-    //listen for changes on canvas
-    const mutationObserver = new MutationObserver(
-      this.setRootPosition.bind(this),
-    );
-    mutationObserver.observe(canvas, {
-      attributes: true,
-      childList: false,
-      subtree: false,
-    });
-
-    // Create a ResizeObserver to watch for changes in the element's size
-    const resizeObserver = new ResizeObserver(this.setRootPosition.bind(this));
-    resizeObserver.observe(canvas);
-
-    //listen for changes on window
-    window.addEventListener('resize', this.setRootPosition.bind(this));
-
-    console.warn('Inspector is enabled, this will impact performance');
-  }
-
-  setRootPosition() {
-    if (this.root === null || this.canvas === null) {
-      return;
-    }
-
-    // get the world position of the canvas object, so we can match the inspector to it
-    const rect = this.canvas.getBoundingClientRect();
-    const top = document.documentElement.scrollTop + rect.top;
-    const left = document.documentElement.scrollLeft + rect.left;
-
-    this.root.id = 'root';
-    this.root.style.left = `${left}px`;
-    this.root.style.top = `${top}px`;
-    this.root.style.width = `${this.width}px`;
-    this.root.style.height = `${this.height}px`;
-    this.root.style.position = 'absolute';
-    this.root.style.transformOrigin = '0 0 0';
-    this.root.style.transform = `scale(${this.scaleX}, ${this.scaleY})`;
-    this.root.style.overflow = 'hidden';
-    this.root.style.zIndex = '65534';
-  }
-
-  createDiv(
-    id: number,
-    properties: CoreNodeProps | CoreTextNodeProps,
-  ): HTMLElement {
-    const div = document.createElement('div');
-    div.style.position = 'absolute';
-    div.id = id.toString();
-
-    // set initial properties
-    for (const key in properties) {
-      this.updateNodeProperty(
-        div,
-        // really typescript? really?
-        key as keyof CoreNodeProps,
-        properties[key as keyof CoreNodeProps],
-        properties,
-      );
-    }
-
-    return div;
-  }
-
-  createNode(node: CoreNode): CoreNode {
-    const div = this.createDiv(node.id, node.props);
-    (div as HTMLElement & { node: CoreNode }).node = node;
-    (node as CoreNode & { div: HTMLElement }).div = div;
-
-    node.on('inViewport', () => div.setAttribute('state', 'inViewport'));
-    node.on('inBounds', () => div.setAttribute('state', 'inBounds'));
-    node.on('outOfBounds', () => div.setAttribute('state', 'outOfBounds'));
-
-    // Monitor only relevant properties by trapping with selective assignment
-    return this.createProxy(node, div);
-  }
-
-  createTextNode(node: CoreNode): CoreTextNode {
-    const div = this.createDiv(node.id, node.props);
-    (div as HTMLElement & { node: CoreNode }).node = node;
-    (node as CoreNode & { div: HTMLElement }).div = div;
-
-    return this.createProxy(node, div) as CoreTextNode;
-  }
-
-  createProxy(
-    node: CoreNode | CoreTextNode,
-    div: HTMLElement,
-  ): CoreNode | CoreTextNode {
-    // Define traps for each property in knownProperties
-    knownProperties.forEach((property) => {
-      let originalProp = Object.getOwnPropertyDescriptor(node, property);
-
-      if (originalProp === undefined) {
-        // Search the prototype chain for the property descriptor
-        const proto = Object.getPrototypeOf(node) as CoreNode | CoreTextNode;
-        originalProp = Object.getOwnPropertyDescriptor(proto, property);
-      }
-
-      if (originalProp === undefined) {
-        return;
-      }
-
-      Object.defineProperty(node, property, {
-        get() {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-          return originalProp?.get?.call(node);
-        },
-        set: (value) => {
-          originalProp?.set?.call(node, value);
-          this.updateNodeProperty(
-            div,
-            property as keyof CoreNodeProps | keyof CoreTextNodeProps,
-            value,
-            node.props,
-          );
-        },
-        configurable: true,
-        enumerable: true,
-      });
-    });
-
-    const originalDestroy = node.destroy;
-    Object.defineProperty(node, 'destroy', {
-      value: () => {
-        this.destroyNode(node.id);
-        originalDestroy.call(node);
-      },
-    });
-
-    const originalAnimate = node.animate;
-    Object.defineProperty(node, 'animate', {
-      value: (
-        props: CoreNodeAnimateProps,
-        settings: AnimationSettings,
-      ): IAnimationController => {
-        const animationController = originalAnimate.call(node, props, settings);
-
-        const originalStart =
-          animationController.start.bind(animationController);
-        animationController.start = () => {
-          this.animateNode(div, props, settings);
-
-          return originalStart();
-        };
-
-        return animationController;
-      },
-    });
-
-    return node;
-  }
-
-  destroyNode(id: number) {
-    const div = document.getElementById(id.toString());
-    div?.remove();
-  }
-
-  updateNodeProperty(
-    div: HTMLElement,
-    property: keyof CoreNodeProps | keyof CoreTextNodeProps,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: any,
-    props: CoreNodeProps | CoreTextNodeProps,
-  ) {
-    if (this.root === null || value === undefined || value === null) {
-      return;
-    }
-
-    /**
-     * Special case for parent property
-     */
-    if (property === 'parent') {
-      const parentId: number = value.id;
-
-      // only way to detect if the parent is the root node
-      // if you are reading this and have a better way, please let me know
-      if (parentId === 1) {
-        this.root.appendChild(div);
-        return;
-      }
-
-      const parent = document.getElementById(parentId.toString());
-      parent?.appendChild(div);
-      return;
-    }
-
-    // special case for text
-    if (property === 'text') {
-      div.innerHTML = String(value);
-
-      // hide text because we can't render SDF fonts
-      // it would look weird and obstruct the WebGL rendering
-      div.style.visibility = 'hidden';
-      return;
-    }
-
-    // special case for images
-    // we're not setting any CSS properties to avoid images getting loaded twice
-    // as the renderer will handle the loading of the image. Setting it to `data-src`
-    if (property === 'src' && value) {
-      div.setAttribute(`data-src`, String(value));
-      return;
-    }
-
-    // special case for color gradients (normal colors are handled by the stylePropertyMap)
-    // FIXME the renderer seems to return the same number for all colors
-    // if (gradientColorPropertyMap.includes(property as string)) {
-    //   const color = convertColorToRgba(value as number);
-    //   div.setAttribute(`data-${property}`, color);
-    //   return;
-    // }
-
-    if (property === 'rtt' && value) {
-      div.setAttribute('data-rtt', String(value));
-      return;
-    }
-
-    // CSS mappable attribute
-    if (stylePropertyMap[property]) {
-      const mappedStyleResponse = stylePropertyMap[property]?.(value);
-
-      if (mappedStyleResponse === null) {
-        return;
-      }
-
-      if (typeof mappedStyleResponse === 'string') {
-        div.style.setProperty(mappedStyleResponse, String(value));
-        return;
-      }
-
-      if (typeof mappedStyleResponse === 'object') {
-        let value = mappedStyleResponse.value;
-        if (property === 'x') {
-          const mount = props.mountX;
-          const width = props.width;
-
-          if (mount) {
-            value = `${parseInt(value) - width * mount}px`;
-          }
-        } else if (property === 'y') {
-          const mount = props.mountY;
-          const height = props.height;
-
-          if (mount) {
-            value = `${parseInt(value) - height * mount}px`;
-          }
-        }
-        div.style.setProperty(mappedStyleResponse.prop, value);
-      }
-
-      return;
-    }
-
-    // DOM properties
-    if (domPropertyMap[property]) {
-      const domProperty = domPropertyMap[property];
-      if (!domProperty) {
-        return;
-      }
-
-      div.setAttribute(String(domProperty), String(value));
-      return;
-    }
-
-    // custom data properties
-    if (property === 'data') {
-      for (const key in value) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        const keyValue: unknown = value[key];
-        if (keyValue === undefined) {
-          div.removeAttribute(`data-${key}`);
-        } else {
-          div.setAttribute(`data-${key}`, String(keyValue));
-        }
-      }
-      return;
-    }
-  }
-
-  // simple animation handler
-  animateNode(
-    div: HTMLElement,
-    props: CoreNodeAnimateProps,
-    settings: AnimationSettings,
-  ) {
-    const {
-      duration = 1000,
-      delay = 0,
-      // easing = 'linear',
-      // repeat = 0,
-      // loop = false,
-      // stopMethod = false,
-    } = settings;
-
-    const {
-      x,
-      y,
-      width,
-      height,
-      alpha = 1,
-      rotation = 0,
-      scale = 1,
-      color,
-      mountX,
-      mountY,
-    } = props;
-
-    // ignoring loops and repeats for now, as that might be a bit too much for the inspector
-    function animate() {
-      setTimeout(() => {
-        div.style.top = `${y - height * mountY}px`;
-        div.style.left = `${x - width * mountX}px`;
-        div.style.width = `${width}px`;
-        div.style.height = `${height}px`;
-        div.style.opacity = `${alpha}`;
-        div.style.rotate = `${rotation}rad`;
-        div.style.scale = `${scale}`;
-        div.style.color = convertColorToRgba(color);
-      }, duration);
-    }
-
-    setTimeout(animate, delay);
-  }
-}
+import {
+  CoreNode,
+  type CoreNodeAnimateProps,
+  type CoreNodeProps,
+} from '../core/CoreNode.js';
+import { type RendererMainSettings } from './Renderer.js';
+import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
+import type { IAnimationController } from '../common/IAnimationController.js';
+import { isProductionEnvironment } from '../utils.js';
+import { CoreTextNode, type CoreTextNodeProps } from '../core/CoreTextNode.js';
+
+/**
+ * Inspector
+ *
+ * The inspector is a tool that allows you to inspect the state of the renderer
+ * and the nodes that are being rendered. It is a tool that is used for debugging
+ * and development purposes.
+ *
+ * The inspector will generate a DOM tree that mirrors the state of the renderer
+ */
+
+/**
+ * stylePropertyMap is a map of renderer properties that are mapped to CSS properties
+ *
+ * It can either return a string or an object with a prop and value property. Once a
+ * property is found in the map, the value is set on the style of the div element.
+ * Erik H made me do it.
+ */
+interface StyleResponse {
+  prop: string;
+  value: string;
+}
+const stylePropertyMap: {
+  [key: string]: (
+    value: string | number | boolean,
+  ) => string | StyleResponse | null;
+} = {
+  alpha: (v) => {
+    if (v === 1) {
+      return null;
+    }
+
+    return { prop: 'opacity', value: `${v}` };
+  },
+  x: (x) => {
+    return { prop: 'left', value: `${x}px` };
+  },
+  y: (y) => {
+    return { prop: 'top', value: `${y}px` };
+  },
+  width: (w) => {
+    if (w === 0) {
+      return null;
+    }
+
+    return { prop: 'width', value: `${w}px` };
+  },
+  height: (h) => {
+    if (h === 0) {
+      return null;
+    }
+
+    return { prop: 'height', value: `${h}px` };
+  },
+  fontSize: (fs) => {
+    if (fs === 0) {
+      return null;
+    }
+
+    return { prop: 'font-size', value: `${fs}px` };
+  },
+  lineHeight: (lh) => {
+    if (lh === 0) {
+      return null;
+    }
+
+    return { prop: 'line-height', value: `${lh}px` };
+  },
+  zIndex: () => 'z-index',
+  fontFamily: () => 'font-family',
+  fontStyle: () => 'font-style',
+  letterSpacing: () => 'letter-spacing',
+  textAlign: () => 'text-align',
+  overflowSuffix: () => 'overflow-suffix',
+  maxLines: () => 'max-lines',
+  contain: () => 'contain',
+  verticalAlign: () => 'vertical-align',
+  clipping: (v) => {
+    if (v === false) {
+      return null;
+    }
+
+    return { prop: 'overflow', value: v ? 'hidden' : 'visible' };
+  },
+  rotation: (v) => {
+    if (v === 0) {
+      return null;
+    }
+
+    return { prop: 'transform', value: `rotate(${v}rad)` };
+  },
+  scale: (v) => {
+    if (v === 1) {
+      return null;
+    }
+
+    return { prop: 'transform', value: `scale(${v})` };
+  },
+  scaleX: (v) => {
+    if (v === 1) {
+      return null;
+    }
+
+    return { prop: 'transform', value: `scaleX(${v})` };
+  },
+  scaleY: (v) => {
+    if (v === 1) {
+      return null;
+    }
+
+    return { prop: 'transform', value: `scaleY(${v})` };
+  },
+  color: (v) => {
+    if (v === 0) {
+      return null;
+    }
+
+    return { prop: 'color', value: convertColorToRgba(v as number) };
+  },
+};
+
+const convertColorToRgba = (color: number) => {
+  const a = (color & 0xff) / 255;
+  const b = (color >> 8) & 0xff;
+  const g = (color >> 16) & 0xff;
+  const r = (color >> 24) & 0xff;
+  return `rgba(${r},${g},${b},${a})`;
+};
+
+const domPropertyMap: { [key: string]: string } = {
+  id: 'test-id',
+};
+
+const gradientColorPropertyMap = [
+  'colorTop',
+  'colorBottom',
+  'colorLeft',
+  'colorRight',
+  'colorTl',
+  'colorTr',
+  'colorBl',
+  'colorBr',
+];
+
+const knownProperties = new Set<string>([
+  ...Object.keys(stylePropertyMap),
+  ...Object.keys(domPropertyMap),
+  // ...gradientColorPropertyMap,
+  'src',
+  'parent',
+  'data',
+]);
+
+export class Inspector {
+  private root: HTMLElement | null = null;
+  private canvas: HTMLCanvasElement | null = null;
+  private mutationObserver: MutationObserver = new MutationObserver(() => {});
+  private resizeObserver: ResizeObserver = new ResizeObserver(() => {});
+  private height = 1080;
+  private width = 1920;
+  private scaleX = 1;
+  private scaleY = 1;
+
+  constructor(canvas: HTMLCanvasElement, settings: RendererMainSettings) {
+    if (isProductionEnvironment === true) return;
+
+    if (!settings) {
+      throw new Error('settings is required');
+    }
+
+    // calc dimensions based on the devicePixelRatio
+    this.height = Math.ceil(
+      settings.appHeight ?? 1080 / (settings.deviceLogicalPixelRatio ?? 1),
+    );
+
+    this.width = Math.ceil(
+      settings.appWidth ?? 1920 / (settings.deviceLogicalPixelRatio ?? 1),
+    );
+
+    this.scaleX = settings.deviceLogicalPixelRatio ?? 1;
+    this.scaleY = settings.deviceLogicalPixelRatio ?? 1;
+
+    this.canvas = canvas;
+    this.root = document.createElement('div');
+    this.setRootPosition();
+    document.body.appendChild(this.root);
+
+    //listen for changes on canvas
+    this.mutationObserver = new MutationObserver(
+      this.setRootPosition.bind(this),
+    );
+    this.mutationObserver.observe(canvas, {
+      attributes: true,
+      childList: false,
+      subtree: false,
+    });
+
+    // Create a ResizeObserver to watch for changes in the element's size
+    this.resizeObserver = new ResizeObserver(this.setRootPosition.bind(this));
+    this.resizeObserver.observe(canvas);
+
+    //listen for changes on window
+    window.addEventListener('resize', this.setRootPosition.bind(this));
+
+    console.warn('Inspector is enabled, this will impact performance');
+  }
+
+  setRootPosition() {
+    if (this.root === null || this.canvas === null) {
+      return;
+    }
+
+    // get the world position of the canvas object, so we can match the inspector to it
+    const rect = this.canvas.getBoundingClientRect();
+    const top = document.documentElement.scrollTop + rect.top;
+    const left = document.documentElement.scrollLeft + rect.left;
+
+    this.root.id = 'root';
+    this.root.style.left = `${left}px`;
+    this.root.style.top = `${top}px`;
+    this.root.style.width = `${this.width}px`;
+    this.root.style.height = `${this.height}px`;
+    this.root.style.position = 'absolute';
+    this.root.style.transformOrigin = '0 0 0';
+    this.root.style.transform = `scale(${this.scaleX}, ${this.scaleY})`;
+    this.root.style.overflow = 'hidden';
+    this.root.style.zIndex = '65534';
+  }
+
+  createDiv(
+    id: number,
+    properties: CoreNodeProps | CoreTextNodeProps,
+  ): HTMLElement {
+    const div = document.createElement('div');
+    div.style.position = 'absolute';
+    div.id = id.toString();
+
+    // set initial properties
+    for (const key in properties) {
+      this.updateNodeProperty(
+        div,
+        // really typescript? really?
+        key as keyof CoreNodeProps,
+        properties[key as keyof CoreNodeProps],
+        properties,
+      );
+    }
+
+    return div;
+  }
+
+  createNodes(node: CoreNode): boolean {
+    if (this.root === null) {
+      return false;
+    }
+
+    const div = this.root.querySelector(`[id="${node.id}"]`);
+    if (div === null && node instanceof CoreTextNode) {
+      this.createTextNode(node);
+    } else if (div === null && node instanceof CoreNode) {
+      this.createNode(node);
+    }
+
+    for (const child of node.children) {
+      this.createNodes(child);
+    }
+    return true;
+  }
+
+  createNode(node: CoreNode): CoreNode {
+    const div = this.createDiv(node.id, node.props);
+    (div as HTMLElement & { node: CoreNode }).node = node;
+    (node as CoreNode & { div: HTMLElement }).div = div;
+
+    node.on('inViewport', () => div.setAttribute('state', 'inViewport'));
+    node.on('inBounds', () => div.setAttribute('state', 'inBounds'));
+    node.on('outOfBounds', () => div.setAttribute('state', 'outOfBounds'));
+
+    // Monitor only relevant properties by trapping with selective assignment
+    return this.createProxy(node, div);
+  }
+
+  createTextNode(node: CoreNode): CoreTextNode {
+    const div = this.createDiv(node.id, node.props);
+    (div as HTMLElement & { node: CoreNode }).node = node;
+    (node as CoreNode & { div: HTMLElement }).div = div;
+
+    return this.createProxy(node, div) as CoreTextNode;
+  }
+
+  createProxy(
+    node: CoreNode | CoreTextNode,
+    div: HTMLElement,
+  ): CoreNode | CoreTextNode {
+    // Define traps for each property in knownProperties
+    knownProperties.forEach((property) => {
+      let originalProp = Object.getOwnPropertyDescriptor(node, property);
+
+      if (originalProp === undefined) {
+        // Search the prototype chain for the property descriptor
+        const proto = Object.getPrototypeOf(node) as CoreNode | CoreTextNode;
+        originalProp = Object.getOwnPropertyDescriptor(proto, property);
+      }
+
+      if (originalProp === undefined) {
+        return;
+      }
+
+      Object.defineProperty(node, property, {
+        get() {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+          return originalProp?.get?.call(node);
+        },
+        set: (value) => {
+          originalProp?.set?.call(node, value);
+          this.updateNodeProperty(
+            div,
+            property as keyof CoreNodeProps | keyof CoreTextNodeProps,
+            value,
+            node.props,
+          );
+        },
+        configurable: true,
+        enumerable: true,
+      });
+    });
+
+    const originalDestroy = node.destroy;
+    Object.defineProperty(node, 'destroy', {
+      value: () => {
+        this.destroyNode(node.id);
+        originalDestroy.call(node);
+      },
+      configurable: true,
+    });
+
+    const originalAnimate = node.animate;
+    Object.defineProperty(node, 'animate', {
+      value: (
+        props: CoreNodeAnimateProps,
+        settings: AnimationSettings,
+      ): IAnimationController => {
+        const animationController = originalAnimate.call(node, props, settings);
+
+        const originalStart =
+          animationController.start.bind(animationController);
+        animationController.start = () => {
+          this.animateNode(div, props, settings);
+
+          return originalStart();
+        };
+
+        return animationController;
+      },
+      configurable: true,
+    });
+
+    return node;
+  }
+
+  public destroy() {
+    // Remove DOM observers
+    this.mutationObserver.disconnect();
+    this.resizeObserver.disconnect();
+
+    // Remove resize listener
+    window.removeEventListener('resize', this.setRootPosition.bind(this));
+    if (this.root && this.root.parentNode) {
+      this.root.remove();
+    }
+  }
+
+  destroyNode(id: number) {
+    const div = document.getElementById(id.toString());
+    div?.remove();
+  }
+
+  updateNodeProperty(
+    div: HTMLElement,
+    property: keyof CoreNodeProps | keyof CoreTextNodeProps,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any,
+    props: CoreNodeProps | CoreTextNodeProps,
+  ) {
+    if (this.root === null || value === undefined || value === null) {
+      return;
+    }
+
+    /**
+     * Special case for parent property
+     */
+    if (property === 'parent') {
+      const parentId: number = value.id;
+
+      // only way to detect if the parent is the root node
+      // if you are reading this and have a better way, please let me know
+      if (parentId === 1) {
+        this.root.appendChild(div);
+        return;
+      }
+
+      const parent = document.getElementById(parentId.toString());
+      parent?.appendChild(div);
+      return;
+    }
+
+    // special case for text
+    if (property === 'text') {
+      div.innerHTML = String(value);
+
+      // hide text because we can't render SDF fonts
+      // it would look weird and obstruct the WebGL rendering
+      div.style.visibility = 'hidden';
+      return;
+    }
+
+    // special case for images
+    // we're not setting any CSS properties to avoid images getting loaded twice
+    // as the renderer will handle the loading of the image. Setting it to `data-src`
+    if (property === 'src' && value) {
+      div.setAttribute(`data-src`, String(value));
+      return;
+    }
+
+    // special case for color gradients (normal colors are handled by the stylePropertyMap)
+    // FIXME the renderer seems to return the same number for all colors
+    // if (gradientColorPropertyMap.includes(property as string)) {
+    //   const color = convertColorToRgba(value as number);
+    //   div.setAttribute(`data-${property}`, color);
+    //   return;
+    // }
+
+    if (property === 'rtt' && value) {
+      div.setAttribute('data-rtt', String(value));
+      return;
+    }
+
+    // CSS mappable attribute
+    if (stylePropertyMap[property]) {
+      const mappedStyleResponse = stylePropertyMap[property]?.(value);
+
+      if (mappedStyleResponse === null) {
+        return;
+      }
+
+      if (typeof mappedStyleResponse === 'string') {
+        div.style.setProperty(mappedStyleResponse, String(value));
+        return;
+      }
+
+      if (typeof mappedStyleResponse === 'object') {
+        let value = mappedStyleResponse.value;
+        if (property === 'x') {
+          const mount = props.mountX;
+          const width = props.width;
+
+          if (mount) {
+            value = `${parseInt(value) - width * mount}px`;
+          }
+        } else if (property === 'y') {
+          const mount = props.mountY;
+          const height = props.height;
+
+          if (mount) {
+            value = `${parseInt(value) - height * mount}px`;
+          }
+        }
+        div.style.setProperty(mappedStyleResponse.prop, value);
+      }
+
+      return;
+    }
+
+    // DOM properties
+    if (domPropertyMap[property]) {
+      const domProperty = domPropertyMap[property];
+      if (!domProperty) {
+        return;
+      }
+
+      div.setAttribute(String(domProperty), String(value));
+      return;
+    }
+
+    // custom data properties
+    if (property === 'data') {
+      for (const key in value) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        const keyValue: unknown = value[key];
+        if (keyValue === undefined) {
+          div.removeAttribute(`data-${key}`);
+        } else {
+          div.setAttribute(`data-${key}`, String(keyValue));
+        }
+      }
+      return;
+    }
+  }
+
+  updateViewport(
+    width: number,
+    height: number,
+    deviceLogicalPixelRatio: number,
+  ) {
+    this.scaleX = deviceLogicalPixelRatio ?? 1;
+    this.scaleY = deviceLogicalPixelRatio ?? 1;
+
+    this.width = width;
+    this.height = height;
+    this.setRootPosition();
+  }
+
+  // simple animation handler
+  animateNode(
+    div: HTMLElement,
+    props: CoreNodeAnimateProps,
+    settings: AnimationSettings,
+  ) {
+    const {
+      duration = 1000,
+      delay = 0,
+      // easing = 'linear',
+      // repeat = 0,
+      // loop = false,
+      // stopMethod = false,
+    } = settings;
+
+    const {
+      x,
+      y,
+      width,
+      height,
+      alpha = 1,
+      rotation = 0,
+      scale = 1,
+      color,
+      mountX,
+      mountY,
+    } = props;
+
+    // ignoring loops and repeats for now, as that might be a bit too much for the inspector
+    function animate() {
+      setTimeout(() => {
+        div.style.top = `${y - height * mountY}px`;
+        div.style.left = `${x - width * mountX}px`;
+        div.style.width = `${width}px`;
+        div.style.height = `${height}px`;
+        div.style.opacity = `${alpha}`;
+        div.style.rotate = `${rotation}rad`;
+        div.style.scale = `${scale}`;
+        div.style.color = convertColorToRgba(color);
+      }, duration);
+    }
+
+    setTimeout(animate, delay);
+  }
+}