Repository: pixijs/pixijs
File: src/dom/DOMPipe.ts (TypeScript)

Code before:
    } as const;

    private _renderer: Renderer;

    /** Array to keep track of attached DOM elements */
    private readonly _attachedDomElements: DOMContainer[] = [];
    /** The main DOM element that acts as a container for other DOM elements */
    private readonly _domElement: HTMLDivElement;
    /** The CanvasTransformSync instance that keeps the DOM element in sync with the canvas */
    private _canvasObserver: CanvasObserver;

    /**
     * Constructor for the DOMPipe class.
     * @param renderer - The renderer instance that this DOMPipe will be associated with.
     */
    constructor(renderer: Renderer)
    {
        this._renderer = renderer;

        // Add this DOMPipe to the postrender runner of the renderer
        // we want to dom elements are calculated after all things have been rendered
        this._renderer.runners.postrender.add(this);

        // add DOMPipe to init runners
        this._renderer.runners.init.add(this);
        this._renderer.runners.destroy.add(this);

        // Create a main DOM element to contain other DOM elements
        this._domElement = document.createElement('div');
        this._domElement.style.position = 'absolute';
        this._domElement.style.top = '0';
        this._domElement.style.left = '0';
        this._domElement.style.pointerEvents = 'none';
        this._domElement.style.zIndex = '1000';
    }

    /** Initializes the DOMPipe, setting up the main DOM element and adding it to the document body. */
    public init(): void
    {
        // Initialize the CanvasTransformSync to keep the DOM element in sync with the canvas
        this._canvasObserver = new CanvasObserver({
            domElement: this._domElement,
            renderer: this._renderer,
        });
    }

    /**
     * Adds a renderable DOM container to the list of attached elements.
     * @param domContainer - The DOM container to be added.
     * @param _instructionSet - The instruction set (unused).
     */

Review comment (suggestion):
I think we should add all the pipes have destroy called on the when the renderer is destroyed.

or even jjust loop through and call destroy in the abstaract destroy function!

Code after:
        name: 'dom',
    } as const;

    private _renderer: Renderer;

    /** Array to keep track of attached DOM elements */
    private readonly _attachedDomElements: DOMContainer[] = [];
    /** The main DOM element that acts as a container for other DOM elements */
    private readonly _domElement: HTMLDivElement;
    /** The CanvasTransformSync instance that keeps the DOM element in sync with the canvas */
    private _canvasObserver: CanvasObserver;

    /**
     * Constructor for the DOMPipe class.
     * @param renderer - The renderer instance that this DOMPipe will be associated with.
     */
    constructor(renderer: Renderer)
    {
        this._renderer = renderer;

        // Add this DOMPipe to the postrender runner of the renderer
        // we want to dom elements are calculated after all things have been rendered
        this._renderer.runners.postrender.add(this);

        // add DOMPipe to init runners
        this._renderer.runners.init.add(this);

        // Create a main DOM element to contain other DOM elements
        this._domElement = document.createElement('div');
        this._domElement.style.position = 'absolute';
        this._domElement.style.top = '0';
        this._domElement.style.left = '0';
        this._domElement.style.pointerEvents = 'none';
        this._domElement.style.zIndex = '1000';
    }

    /** Initializes the DOMPipe, setting up the main DOM element and adding it to the document body. */
    public init(): void
    {
        // Initialize the CanvasTransformSync to keep the DOM element in sync with the canvas
        this._canvasObserver = new CanvasObserver({
            domElement: this._domElement,
            renderer: this._renderer,
        });
    }

    /**
     * Adds a renderable DOM container to the list of attached elements.
     * @param domContainer - The DOM container to be added.
     * @param _instructionSet - The instruction set (unused).
     */