@woosh/meep-engine/editor/view/node-graph/NodeView.js

Pure JavaScript game engine. Fully featured and production ready.

import { noop } from "../../../src/core/function/noop.js";
import Vector2 from "../../../src/core/geom/Vector2.js";
import { NodeParameterDataType } from "../../../src/core/model/node-graph/node/parameter/NodeParameterDataType.js";
import { PortDirection } from "../../../src/core/model/node-graph/node/PortDirection.js";
import { DraggableAspect } from "../../../src/engine/ui/DraggableAspect.js";
import LabelView from "../../../src/view/common/LabelView.js";
import EmptyView from "../../../src/view/elements/EmptyView.js";
import View from "../../../src/view/View.js";
import DatGuiController from "../ecs/components/DatGuiController.js";
import { PortView } from "./PortView.js";

export class NodeView extends View {
    /**
     *
     * @param {NodeInstance} node
     * @param {NodeVisualData} visual
     * @param {NodeGraphVisualData} visualData
     * @param {boolean} enableDrag
     * @param {function(PortView, Port)} portCreationCallback
     */
    constructor({ node, visual, visualData, enableDrag = true, portCreationCallback = noop }) {
        super();

        /**
         *
         * @type {NodeInstance}
         */
        this.node = node;
        /**
         *
         * @type {NodeVisualData}
         */
        this.visual = visual;

        this.el = document.createElement('div');

        this.addClass('ui-node-view');

        const vPorts = new EmptyView({
            classList: ['ports']
        });

        const nodeDescription = node.description;
        const vName = new LabelView(nodeDescription.name, {
            classList: ['name']
        });

        const v2_prev_position = new Vector2();

        const self = this;

        if (enableDrag) {
            const draggableAspect = new DraggableAspect({
                el: this.el,
                dragStart(p) {
                    v2_prev_position.copy(p);
                },
                drag(position, origin, delta) {
                    const p = delta.clone();

                    const scale = new Vector2(1, 1);

                    self.computeGlobalScale(scale);

                    p.divide(scale);

                    // p.add(v2_origin);

                    visual.dimensions.position.add(p);
                }
            });
            this.on.linked.add(draggableAspect.start, draggableAspect);
            this.on.unlinked.add(draggableAspect.stop, draggableAspect);
        }

        //create parameters

        const vParamContainer = new EmptyView({ classList: ['parameters-container'] });

        const vParams = new DatGuiController({ classList: ['parameters'] });
        vParamContainer.addChild(vParams);

        nodeDescription.parameters.forEach(param => {
            const id = param.id;

            const type = param.type;

            let controller = null;

            if (type === NodeParameterDataType.Number) {
                controller = vParams.addControl({ v: node.getParameterValue(id) }, 'v');
            } else if (type === NodeParameterDataType.String) {
                controller = vParams.addControl({ v: node.getParameterValue(id) }, 'v');
            } else if (type === NodeParameterDataType.Boolean) {
                controller = vParams.addControl({ v: node.getParameterValue(id) }, 'v');
            }

            controller.name(param.name);
            controller.onChange((v) => {
                node.setParameterValue(id, v);
            });
        });


        this.addChild(vParamContainer);

        this.addChild(vName);

        this.addChild(vPorts);

        nodeDescription.getPorts().forEach(port => {

            const portVisualData = visual.getPort(port.id);

            const portView = new PortView({ port, visual: portVisualData, visualData });

            portCreationCallback(portView, port);

            vPorts.addChild(portView);

        });

        this.setClass('has-inputs', nodeDescription.getPorts().some(p => p.direction === PortDirection.In));
        this.setClass('has-outputs', nodeDescription.getPorts().some(p => p.direction === PortDirection.Out));

        this.on.linked.add(this.update, this);
        this.bindSignal(visual.dimensions.position.onChanged, this.update, this);
        this.bindSignal(visual.dimensions.size.onChanged, this.update, this);
    }

    update() {
        this.position.copy(this.visual.dimensions.position);
        this.size.copy(this.visual.dimensions.size);
    }
}