feat: add renderer

Author: nartc

libs/angular-three/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/canvas';

libs/angular-three/src/lib/canvas.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'ngt-canvas',
+    standalone: true,
+    template: `text`,
+})
+export class NgtCanvas {}

libs/angular-three/src/lib/renderer/enums.ts

@@ -0,0 +1,26 @@
+export const enum NgtRendererClassId {
+    type,
+    parent,
+    children,
+    removed,
+    compound,
+    compoundParent,
+    compounded,
+    queueOps,
+    attributes,
+    properties,
+    rawValue,
+    ref,
+    portalContainer,
+}
+
+export const enum NgtCompoundClassId {
+    applyFirst,
+    props,
+}
+
+export const enum NgtQueueOpClassId {
+    type,
+    op,
+    done,
+}

libs/angular-three/src/lib/renderer/renderer.ts

@@ -0,0 +1,68 @@
+import { inject, Injectable, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2 } from '@angular/core';
+import { ɵDomRendererFactory2 as DomRendererFactory2 } from '@angular/platform-browser';
+
+@Injectable()
+export class NgtRendererFactory implements RendererFactory2 {
+    private readonly domRendererFactory = inject(DomRendererFactory2);
+
+    createRenderer(hostElement: any, type: RendererType2 | null): Renderer2 {
+        const domRenderer = this.domRendererFactory.createRenderer(hostElement, type);
+        const renderer = new NgtRenderer(domRenderer);
+        return renderer;
+    }
+}
+
+export class NgtRenderer implements Renderer2 {
+    constructor(private domRenderer: Renderer2) {}
+
+    createElement(name: string, namespace?: string | null | undefined) {
+        throw new Error('Method not implemented.');
+    }
+
+    createComment(value: string) {
+        throw new Error('Method not implemented.');
+    }
+
+    appendChild(parent: any, newChild: any): void {
+        throw new Error('Method not implemented.');
+    }
+
+    insertBefore(parent: any, newChild: any, refChild: any, isMove?: boolean | undefined): void {
+        throw new Error('Method not implemented.');
+    }
+
+    removeChild(parent: any, oldChild: any, isHostElement?: boolean | undefined): void {
+        throw new Error('Method not implemented.');
+    }
+
+    parentNode(node: any) {
+        throw new Error('Method not implemented.');
+    }
+
+    setAttribute(el: any, name: string, value: string, namespace?: string | null | undefined): void {
+        throw new Error('Method not implemented.');
+    }
+
+    setProperty(el: any, name: string, value: any): void {
+        throw new Error('Method not implemented.');
+    }
+
+    listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void {
+        throw new Error('Method not implemented.');
+    }
+
+    get data(): { [key: string]: any } {
+        return this.domRenderer.data;
+    }
+    createText = this.domRenderer.createText.bind(this.domRenderer);
+    destroy = this.domRenderer.destroy.bind(this.domRenderer);
+    destroyNode: ((node: any) => void) | null = null;
+    selectRootElement = this.domRenderer.selectRootElement.bind(this.domRenderer);
+    nextSibling = this.domRenderer.nextSibling.bind(this.domRenderer);
+    removeAttribute = this.domRenderer.removeAttribute.bind(this.domRenderer);
+    addClass = this.domRenderer.addClass.bind(this.domRenderer);
+    removeClass = this.domRenderer.removeClass.bind(this.domRenderer);
+    setStyle = this.domRenderer.setStyle.bind(this.domRenderer);
+    removeStyle = this.domRenderer.removeStyle.bind(this.domRenderer);
+    setValue = this.domRenderer.setValue.bind(this.domRenderer);
+}

libs/angular-three/src/lib/renderer/state.ts

@@ -0,0 +1,125 @@
+import { ChangeDetectorRef, getDebugNode, Injector } from '@angular/core';
+import { NgtQueueOpClassId, NgtRendererClassId } from './enums';
+
+export type NgtRendererRootState = {
+    cdr: ChangeDetectorRef;
+    compoundPrefixes: string[];
+};
+
+export type NgtQueueOp = [type: 'op' | 'cleanUp', op: () => void, done?: true];
+
+export type NgtRendererState = [
+    type: 'three' | 'compound' | 'portal' | 'comment' | 'dom',
+    parent: NgtRendererNode | null,
+    children: NgtRendererNode[],
+    removed: boolean,
+    compound: [applyFirst: boolean, props: Record<string, any>],
+    compoundParent: NgtRendererNode,
+    compounded: NgtRendererNode,
+    queueOps: Set<NgtQueueOp>,
+    attributes: Record<string, any>,
+    properties: Record<string, any>,
+    rawValue: any,
+    ref: any,
+    portalContainer: NgtRendererNode
+];
+
+export type NgtRendererNode = {
+    __ngt_renderer__: NgtRendererState;
+};
+
+export class NgtRendererStore {
+    private readonly comments = new Set<() => Injector>();
+    private readonly portals = new Map<NgtRendererNode, () => Injector>();
+
+    constructor(private readonly root: NgtRendererRootState) {}
+
+    createNode(type: NgtRendererState[NgtRendererClassId.type], node: any) {
+        const state = [
+            type,
+            null,
+            [],
+            false,
+            undefined!,
+            undefined!,
+            undefined!,
+            undefined!,
+            undefined!,
+            undefined!,
+            undefined!,
+            undefined!,
+            undefined!,
+        ] as NgtRendererState;
+
+        const rendererNode = Object.assign(node, { __ngt_renderer__: state });
+
+        if (state[NgtRendererClassId.type] === 'comment') {
+            rendererNode['__ngt_renderer_add_comment__'] = () => {
+                this.comments.add(() => getDebugNode(rendererNode)!.injector);
+            };
+            return rendererNode;
+        }
+
+        if (state[NgtRendererClassId.type] === 'portal') {
+            this.portals.set(rendererNode, () => getDebugNode(rendererNode)!.injector);
+            return rendererNode;
+        }
+
+        if (state[NgtRendererClassId.type] === 'compound') {
+            state[NgtRendererClassId.queueOps] = new Set();
+            state[NgtRendererClassId.attributes] = {};
+            state[NgtRendererClassId.properties] = {};
+            return rendererNode;
+        }
+
+        return rendererNode;
+    }
+
+    setParent(node: NgtRendererNode, parent: NgtRendererNode) {
+        if (!node.__ngt_renderer__[NgtRendererClassId.parent]) {
+            node.__ngt_renderer__[NgtRendererClassId.parent] = parent;
+        }
+    }
+
+    addChild(node: NgtRendererNode, child: NgtRendererNode) {
+        if (!node.__ngt_renderer__[NgtRendererClassId.children].includes(child)) {
+            node.__ngt_renderer__[NgtRendererClassId.children].push(child);
+        }
+    }
+
+    removeChild(node: NgtRendererNode, child: NgtRendererNode) {
+        const index = node.__ngt_renderer__[NgtRendererClassId.children].findIndex((c) => child === c);
+        if (index >= 0) {
+            node.__ngt_renderer__[NgtRendererClassId.children].splice(index, 1);
+        }
+    }
+
+    queueOperation(node: NgtRendererNode, op: NgtQueueOp) {
+        node.__ngt_renderer__[NgtRendererClassId.queueOps].add(op);
+    }
+
+    executeOperation(node: NgtRendererNode, type: NgtQueueOp[NgtQueueOpClassId.type] = 'op') {
+        if (node.__ngt_renderer__[NgtRendererClassId.queueOps]?.size) {
+            node.__ngt_renderer__[NgtRendererClassId.queueOps].forEach((op) => {
+                if (op[NgtQueueOpClassId.type] === type) {
+                    op[NgtQueueOpClassId.op]();
+                    node.__ngt_renderer__[NgtRendererClassId.queueOps].delete(op);
+                }
+            });
+        }
+    }
+
+    processPortalContainer(portal: NgtRendererNode) {
+        const injectorFactory = this.portals.get(portal);
+        const injector = injectorFactory?.();
+        if (!injector) return;
+
+        const portalStore = injector.get('', null);
+        if (!portalStore) return;
+
+        const portalContainer = portalStore.get('scene');
+        if (!portalContainer) return;
+
+        portal.__ngt_renderer__[NgtRendererClassId.portalContainer] = this.createNode('three', portalContainer);
+    }
+}