MxShadingGraphEditor Class Reference

This class is a wrapper around the LiteGraph library to provide a MaterialX node editor. More...

Public Member Functions
	constructor ()
	Default constructor.
	setUI (ui)
	Set the UI callbacks for the editor.
	setDirty (w=null, h=null)
	Notify the editor to update it's graph.
	debugOutput (text, severity, clear=null)
	Output debug information to the console or the UI console logger.
	setSourceColorSpace (colorSpace)
	Set global color space for the editor.
	setTargetDistanceUnit (unit)
	Set the global distance unit for the editor.
	getSourceColorSpace ()
	Get the global color space for the editor.
	getTargetDistanceUnit ()
	Get the global distance unit for the editor.
	searchGraph (title)
	Search the graph for the specified node.
	arrangeGraph (spacing=80)
	Auto layout the nodes in the graph.
	openSubgraph ()
	Open the subgraph for the selected node.
	closeSubgraph ()
	Close the current subgraph open, if any.
	resetView ()
	Reset the view of the graph.
	selectNodes ()
	Select all nodes in the graph.
	clearGraph ()
	Reset the graph editor.
	saveSerialization ()
	Use built-in serialization to save the graph to file.
	loadSerialization ()
	Use built-in serialization to load the graph from file.
	saveGraphToFile (extension, graphWriteOptions)
	Save the graph to a file with the specified extension.
	saveGraphToString (extension, graphWriteOptions)
	Save the graph to a string with the specified extension.
	loadDefinitionsFromFile (extension)
	Load the graph from a file with the specified extension.
	loadGraphFromFile (extension, auto_arrange, rerender=false)
	Load the graph from a file with the specified extension.
	findRenderableItems ()
	Find all renderable elements in the graph using the handler.
	loadGraphFromString (extension, content, fileName, auto_arrange, rerender=false)
	Load the graph from a string with the specified extension.
	rgbToHex (rgb)
	Utility to convert a color from RGB to hex.
	createButtonWithImageAndText (imageSrc, text, id)
	Create a DOM button with an image and text.
	openImageDialog (theNode, updateProp, wantURI)
	Open a dialog to select a image file to load.
	uriExists (uri)
	Check if a URI exists.
	createColorSpaceInput (colorSpaces, activeItem)
	Create a color space input element.
	createUnitsInput (units, unittype, activeItem)
	Create a units input element.
	updateImagePreview (curImage)
	Update the image preview in the property panel.
	updatePropertyPanel (node)
	This method is called when a node is selected in the graph.
	initializeLiteGraph (canvas, readOnly=false)
	Initialize the LiteGraph graph editor for a given canvas element.
	centerNode ()
	Center the graph on a selected node.
	clearNodeTypes ()
	Remove built in node types, except for subgraph.
	collapseNode (node, collapse)
	Collapse or expand a node.
	collapseExpandNodes (collapse)
	Collapse or expand selected nodes.
	copyToClipboard ()
	Copy selected nodes to the clipboard.
	pasteFromClipboard ()
	Paste nodes from the clipboard.
	extractNodeGraph ()
	Extract the nodes in a subgraph to the main graph.
	createNodeGraph ()
	Create a new node subgraph from selected.
	displayNodeTypes ()
	Display the available node types in the UI if a UI updater is set.
	initialize (canvas, ui, monitor, materialFilename, readOnly=false)
	Initialize the editor.

Detailed Description

This class is a wrapper around the LiteGraph library to provide a MaterialX node editor.

It is designed to work with the MaterialX JavaScript API.

Definition at line 3292 of file JsMaterialXNodeEditor.js.

Member Function Documentation

arrangeGraph()

MxShadingGraphEditor::arrangeGraph

(

spacing = 80

)

Auto layout the nodes in the graph.

Parameters

spacing

- The spacing between nodes.

Returns

{void}

Definition at line 3452 of file JsMaterialXNodeEditor.js.

                               {
        // This does not track the current subgraph.
        if (graphcanvas) {
            graphcanvas.graph.arrange(spacing);
        }
    }

centerNode()

MxShadingGraphEditor::centerNode

(

)

Center the graph on a selected node.

Definition at line 5218 of file JsMaterialXNodeEditor.js.

                 {
        var selected = graphcanvas.selected_nodes;
        var haveSelected = false;
        for (var s in selected) {
            haveSelected = true; 
            break;
        }
        console.log('Center nodes:', selected, '. Have selected:', haveSelected);
        graphcanvas.centerOnGraph(haveSelected);
    }

clearGraph()

MxShadingGraphEditor::clearGraph

(

)

Reset the graph editor.

Will also reset the global color space and distance unit to their default values.

Definition at line 3507 of file JsMaterialXNodeEditor.js.

                 {
 
        this.handler.sourceColorSpace = this.handler.DEFAULT_COLOR_SPACE;
        this.handler.targetDistanceUnits = this.handler.DEFAULT_DISTANCE_UNITS;
        MxShadingGraphEditor.theEditor.updatePropertyPanel(null);
        this.updatePropertyPanel(null);
        if (graphcanvas) {
            // Set back to top graph
            graphcanvas.setGraph(graph);
            graphcanvas.graph.clear();
            graphcanvas.ds.reset();
            graphcanvas.setDirty(true, true);
        }
        customDocLibs = [];
    }

clearNodeTypes()

MxShadingGraphEditor::clearNodeTypes

(

)

Remove built in node types, except for subgraph.

Definition at line 5232 of file JsMaterialXNodeEditor.js.

                     {
        LiteGraph.searchbox_extras = [];
        var nodeTypes = LiteGraph.registered_node_types;
        for (var typeName in nodeTypes) {
            if (typeName !== "graph/subgraph") {
                console.log('Removing node type:', LiteGraph.getNodeType(typeName));
                LiteGraph.unregisterNodeType(typeName);
            }
        }
    }

closeSubgraph()

MxShadingGraphEditor::closeSubgraph

(

)

Close the current subgraph open, if any.

Definition at line 3476 of file JsMaterialXNodeEditor.js.

                    {
        if (graphcanvas) {
            graphcanvas.closeSubgraph();
        }
    }

collapseExpandNodes()

MxShadingGraphEditor::collapseExpandNodes

(

collapse

)

Collapse or expand selected nodes.

Definition at line 5260 of file JsMaterialXNodeEditor.js.

                                  {
        var curGraph = graphcanvas.graph;
 
        var selected_nodes = graphcanvas.selected_nodes;
        //console.log('Selected nodes:', selected_nodes);
        var modified = false;
        if (selected_nodes) {
            for (var i in selected_nodes) {
                var node = selected_nodes[i];
                //console.log('Collapse/Expand:', node.title, collapse);
                if (this.collapseNode(node, collapse))
                    modified = true;
            }
        }
        if (!modified) {
            var nodes = curGraph._nodes;
            for (var i in nodes) {
                var node = nodes[i];
                if (this.collapseNode(node, collapse))
                    modified = true;
            }
        }
 
        if (modified) {
            graph._version++;
            graph.setDirtyCanvas(true, true);
        }
    }

collapseNode()

MxShadingGraphEditor::collapseNode	(		node,
			collapse )

Collapse or expand a node.

Definition at line 5246 of file JsMaterialXNodeEditor.js.

                                 {
        if (node.constructor.collapsable === false) {
            return false;
        }
        if (node.flags.collapsed != collapse) {
            node.flags.collapsed = collapse;
            return true;
        }
        return false;
    }

constructor()

MxShadingGraphEditor::constructor

(

)

Default constructor.

Initializes the handler along with any converters

Definition at line 3297 of file JsMaterialXNodeEditor.js.

                  {
        if (!MxShadingGraphEditor.theEditor) {
            MxShadingGraphEditor.theEditor = this;
 
            this.ui = null;
            this.fontSizeStyle = 'font-size: 11px;';
 
            this.handler = new MxMaterialXHandler('MaterialX Handler', 'mtlx');
            let gltfConverter = new glTFMaterialX();
            this.handler.addConverter(gltfConverter);
            
            console.log('Create new editor with exporter for:', gltfConverter.exportType());            
            
        }
        return MxShadingGraphEditor.theEditor;
    }

copyToClipboard()

MxShadingGraphEditor::copyToClipboard

(

)

Copy selected nodes to the clipboard.

Definition at line 5292 of file JsMaterialXNodeEditor.js.

                      {
        graphcanvas.copyToClipboard();
    }

createButtonWithImageAndText()

MxShadingGraphEditor::createButtonWithImageAndText	(		imageSrc,
			text,
			id )

Create a DOM button with an image and text.

Parameters

imageSrc	- The source of the image.
text	- The text to display.
id	- The identifier for the button.

Returns

{Element} The button element.

Definition at line 3710 of file JsMaterialXNodeEditor.js.

                                                     {
        // Create image element
        var img = document.createElement("img");
        img.id = id + "_img";
        img.src = imageSrc;
        img.classList.add("img-fluid");
 
        // Create text element
        var span = document.createElement("span");
        span.id = id + "_text";
        span.textContent = " " + text;
 
        // Create button element
        var button = document.createElement("button");
        button.id = id;
        button.classList.add("btn", "btn-sm", "btn-outline-secondary", "form-control", "form-control-sm");
        button.style = this.fontSizeStyle;
        button.appendChild(img);
        button.appendChild(span);
 
        return button;
    }

createColorSpaceInput()

MxShadingGraphEditor::createColorSpaceInput	(		colorSpaces,
			activeItem )

Create a color space input element.

Parameters

colorSpaces	- The list of color spaces.
activeItem	- The selected color space.

Returns

{Element} The color space input element.

Definition at line 3816 of file JsMaterialXNodeEditor.js.

                                                   {
        var select = document.createElement("select");
        select.className = "form-control form-control-sm";
        select.style = this.fontSizeStyle;
        select.id = "propertypanel_colorspace";
        for (var i = 0; i < colorSpaces.length; i++) {
            var option = document.createElement("option");
            option.value = colorSpaces[i];
            option.text = colorSpaces[i];
            select.add(option);
        }
        // Add "none" option
        var option = document.createElement("option");
        option.value = "none";
        option.text = "none";
        select.add(option);
        
        select.value = activeItem;
        return select;
    }

createNodeGraph()

MxShadingGraphEditor::createNodeGraph

(

)

Create a new node subgraph from selected.

TODO: Handle connections between new graph and parent graph.

Definition at line 5347 of file JsMaterialXNodeEditor.js.

                      {
        // Disallow testing for now.
        if (graphcanvas.graph._is_subgraph) {
            this.debugOutput('Cannot create nest subgraphs.', 1);
            return;
        }
 
        // Check for selected nodes
        var selected = graphcanvas.selected_nodes;
        if (selected.length == 0) {
            console.log('No nodes selected.');
            return;
        }
 
        // Copy the selected nodes to the clipboard
        graphcanvas.copyToClipboard();
 
        // Create a new graph/subgraph node
        var node = LiteGraph.createNode('graph/subgraph');
        graph.add(node);
        node.title = MxShadingGraphEditor.theEditor.handler.createValidName('group');
        // Open subgraph
        graphcanvas.openSubgraph(node.subgraph);
        // Paste the copied nodes into the subgraph
        graphcanvas.pasteFromClipboard();
 
        node.subgraph.arrange(80);
        graphcanvas.ds.reset();
        graphcanvas.setDirty(true, true);
    }

createUnitsInput()

MxShadingGraphEditor::createUnitsInput	(		units,
			unittype,
			activeItem )

Create a units input element.

Parameters

units	- The list of units.
unittype	- The type of unit.
activeItem	- The selected unit.

Returns

{Element} The units input element.

Definition at line 3845 of file JsMaterialXNodeEditor.js.

                                                  {
        var select = document.createElement("select");
        select.className = "form-control form-control-sm";
        select.style = this.fontSizeStyle;
        select.id = "propertypanel_units";
        for (var i = 0; i < units.length; i++) {
            var option = document.createElement("option");
            var unit_pair = units[i];
            if (unit_pair[1] == unittype) {
                option.value = unit_pair[0];
                option.text = unit_pair[0];
                select.add(option);
            }
        }
        select.value = activeItem;
        return select;
    }

debugOutput()

MxShadingGraphEditor::debugOutput	(		text,
			severity,
			clear = null )

Output debug information to the console or the UI console logger.

Parameters

text	- The text to output.
severity	- The severity of the message.
clear	- True to clear the console, false otherwise.

Returns

{void}

Definition at line 3343 of file JsMaterialXNodeEditor.js.

                                              {
        var consoleLog = MxShadingGraphEditor.theEditor.ui.consoleLogger;
        if (consoleLog) {
            consoleLog(text, severity, clear);
        }
        else {
            console.log('> ', text, ' severity:', severity);
        }
    }

displayNodeTypes()

MxShadingGraphEditor::displayNodeTypes

(

)

Display the available node types in the UI if a UI updater is set.

Definition at line 5381 of file JsMaterialXNodeEditor.js.

                       {
        // Get the node list display updater
        var nodeTypesListUpdater = this.ui.nodeTypesListUpdater;
        if (!nodeTypesListUpdater) {
            return;
        }
 
        // Get the list of available node types
        var nodeTypes = LiteGraph.registered_node_types;
        nodeTypesListUpdater(nodeTypes);
    }

extractNodeGraph()

MxShadingGraphEditor::extractNodeGraph

(

)

Extract the nodes in a subgraph to the main graph.

Definition at line 5306 of file JsMaterialXNodeEditor.js.

                       {
        var selected = graphcanvas.selected_nodes;
        if (selected.length == 0) {
            console.log('No nodes selected.');
            return;
        }
 
        var subgraphsSelected = []
        for (var i in selected) {
            var node = selected[i];
            if (node.type == 'graph/subgraph') {
                subgraphsSelected.push(node);
            }
        }
        if (subgraphsSelected.length == 0) {
            console.log('No subgraphs selected.');
            return;
        }
 
        // Select subgraph nodes
        var subGraph = subgraphsSelected[0];
        var subGraphNodes = subGraph.subgraph._nodes;
        for (var i in subGraphNodes) {
            var node = subGraphNodes[i];
            //console.log('Select subgraph node:', node.title);
        }
 
        graphcanvas.openSubgraph(subGraph.subgraph);
        graphcanvas.selectNodes(subGraphNodes);
        // Copy the selected nodes to the clipboard
        graphcanvas.copyToClipboard();
 
        // Paste the copied nodes into the graph
        graphcanvas.closeSubgraph();
        graphcanvas.pasteFromClipboard();
    }

findRenderableItems()

MxShadingGraphEditor::findRenderableItems

(

)

Find all renderable elements in the graph using the handler.

Returns

The list of renderable items.

Definition at line 3659 of file JsMaterialXNodeEditor.js.

                          {
        return this.handler.findRenderableItems(graph);
    }

getSourceColorSpace()

MxShadingGraphEditor::getSourceColorSpace

(

)

Get the global color space for the editor.

Returns

The color space.

Definition at line 3382 of file JsMaterialXNodeEditor.js.

                          {
        if (this.handler) {
            return this.handler.getSourceColorSpace();
        }
        return 'lin_rec709';
    }

getTargetDistanceUnit()

MxShadingGraphEditor::getTargetDistanceUnit

(

)

Get the global distance unit for the editor.

Returns

The distance unit.

Definition at line 3394 of file JsMaterialXNodeEditor.js.

                            {
        if (this.handler) {
            return this.handler.getTargetDistanceUnit();
        }
        return 'meter';
    }

initialize()

MxShadingGraphEditor::initialize	(		canvas,
			ui,
			monitor,
			materialFilename,
			readOnly = false )

Initialize the editor.

Parameters

canvas	The canvas element to use for the graph editor.
ui	The UI updater object to use for the editor.
monitor	The monitor object to use for the editor.
materialFilename	The optional filename of the material to load.
readOnly	Set to true to make the editor read only.

Returns

{void}

Definition at line 5402 of file JsMaterialXNodeEditor.js.

                                                                        {
 
        this.setUI(ui);
        if (monitor) {
            console.log('Set custom monitor:', monitor.getName());
        }
        this.monitor = monitor;         
        this.initializeLiteGraph(canvas, readOnly);
        this.handler.initialize(MxShadingGraphEditor.theEditor, materialFilename);
        this.handler.setMonitor(this.monitor);
    }

initializeLiteGraph()

MxShadingGraphEditor::initializeLiteGraph	(		canvas,
			readOnly = false )

Initialize the LiteGraph graph editor for a given canvas element.

Parameters

canvas	The canvas element to use for the graph editor.
readOnly	Is the canvas in read-only mode

Returns

{void}

Definition at line 4963 of file JsMaterialXNodeEditor.js.

                                                  {
        // Initialize LiteGraph
        graph = new LiteGraph.LGraph();
        graphcanvas = new LiteGraph.LGraphCanvas(canvas, graph);
 
        if (readOnly)
        {
            // Put red border around canvas as an indicator
            //canvas.style.border = "1px solid #ff1107";
        }
 
        //
        // Set up graph overrides
        //
 
        // Set up connection colors (off = not connected, on = connected)
        // TODO: Move this to application site and expose settings to user.
        graphcanvas.default_connection_color_byTypeOff = {
            integer: "#A32",
            float: "#161",
            vector2: "#265",
            vector3: "#465",
            vector4: "#275",
            color3: "#37A",
            color4: "#69A",
            matrix33: "#555",
            matrix44: "#666",
            string: "#395",
            filename: "#888",
            boolean: "#060",
        };
 
        graphcanvas.default_connection_color_byType = {
            integer: "#D52",
            float: "#1D1",
            vector2: "#4D4",
            vector3: "#7D7",
            vector4: "#9D9",
            color3: "#4AF",
            color4: "#6CF",
            matrix33: "#AAA",
            matrix44: "#BBB",
            string: "#3F4",
            filename: "#FFF",
            boolean: "#0F0",
        };
 
        // Making this a no-op as will not use the default panel
        graphcanvas.onShowNodePanel = function (node) {
            ;  
        }
 
        // Override to handle node selection
        graphcanvas.onNodeSelected = function (node) {
            if (MxShadingGraphEditor.theEditor.monitor)
            {
                let parentGraph = '';
                var is_subgraph = graphcanvas.graph._is_subgraph;
                if (is_subgraph) 
                    parentGraph = graphcanvas.graph._subgraph_node.title;
                MxShadingGraphEditor.theEditor.monitor.onNodeSelected(node, parentGraph);
            }
            MxShadingGraphEditor.theEditor.updatePropertyPanel(node);
        }
 
        // Override to handle node deselection
        graphcanvas.onNodeDeselected = function (node) {
            if (MxShadingGraphEditor.theEditor.monitor)
            {
                let parentGraph = '';
                var is_subgraph = graphcanvas.graph._is_subgraph;
                if (is_subgraph) 
                    parentGraph = graphcanvas.graph._subgraph_node.title;
                MxShadingGraphEditor.theEditor.monitor.onNodeDeselected(node, parentGraph);
            }
            MxShadingGraphEditor.theEditor.updatePropertyPanel(null);
        }
 
        // Add monitoring method for property info changes.
        // This API does not currently exist in LiteGraph, only getPropertyInfo() does.
        LGraphNode.prototype.setPropertyInfo = function(property, propertyInfo, value)
        {
            var info = null;
    
            if (this.properties_info) {
                for (var i = 0; i < this.properties_info.length; ++i) {
                    if (this.properties_info[i].name == property) {
                        info = this.properties_info[i];
                        break;
                    }
                }
            }    
            
            if (info && info[propertyInfo])
            {    
                if (this.onPropertyInfoChanged)
                {
                    this.onPropertyInfoChanged(property, propertyInfo, value, info[propertyInfo]);
                } 
                info[propertyInfo] = value;
            }
            else
            {
                console.warning('Failed to set property: ', property, '. info: ', propertyInfo, '. Value: ', value, '. Infos: ', this.properties_info);
            }
        }
 
        // Add in a method to check if an input / property is the default value
        LGraphNode.prototype.isDefaultValue = function(property)
        {
            let info = null;
 
            // Check if the property exists
            if (this.properties[property] == null)
            {
                console.warn('> Property value does not exist:', property);
                return false;
            }
            // Check if the property is linked
            if (this.getInputLink(property))
            {
                return false;
            }
    
            if (this.properties_info != null) 
            {
                for (let i = 0; i < this.properties_info.length; ++i) {
                    if (this.properties_info[i].name == property) {
                        info = this.properties_info[i];
                        break;
                    }
                }
            }    
            
            if (info != null && info.default_value != null)
            {
                let property_string = this.properties[property];
                let default_value_string = info.default_value;
                let isDefault = false;
                if (Array.isArray(default_value_string)) {
                    default_value_string = default_value_string.map(String); // or .map(element => String(element))
                    property_string = property_string.map(String); // or .map(element => String(element))
                    isDefault = (JSON.stringify(default_value_string) == JSON.stringify(property_string));                                 
                }
                else
                {
                    isDefault = (default_value_string == property_string);
                }
                return isDefault;
            }
            else 
            {
                console.warn('> Default value does not exist for:', property);
            }
            return false;
        }
 
        //
        // Set up graph
        //
        graphcanvas.resize();
        this.monitor.monitorGraph(graph, true);
        graph.arrange(80);
 
        // Run the graph. TODO: Add execution control.
        //graph.runStep();
 
        // Override global options
        //graphcanvas.hide_unconnected = false;
        console.log('> Read only mode: ', readOnly);
        graphcanvas.read_only = readOnly;
        graphcanvas.allow_interaction = true;           // Allow user interaction. TODO: Add option to turn this off
        graphcanvas.read_only_select = true;            // Allow selection in read-only mode
        graphcanvas.allow_dragnodes = !readOnly;        // Allow dragging nodes
        graphcanvas.allow_searchbox = !readOnly;        // Allow search box
        graphcanvas.render_connections_arrows = true;   // Render connection arrows
        graphcanvas.clear_background_color = "#222223"; // Set background color
        graphcanvas.max_zoom = 0.15;                    // Set maximum zoom level
        graphcanvas.connections_width = 2;              // Set connection width
        graphcanvas.render_canvas_border = false;       //  Set canvas border
        graphcanvas.align_to_grid = false;              // Align to grid
        graphcanvas.render_connection_arrows = false;   // Render connection arrows
        graphcanvas.render_curved_connections = true;   // Render curved connections
        //graphcanvas.background_image = null;          // Set background image
        graphcanvas.show_info = false;                  // Turn off HUD
        graph.ctrl_shift_v_paste_connect_unselected_outputs = true;
 
        //
        // Event handler overrides. TODO: Add more shortcuts
        //
        // Ad event handler to call centerOnNode with f key press within the canvas area
        canvas.addEventListener("keydown", function (e) {
            if (e.key === "f") {                
                MxShadingGraphEditor.theEditor.centerNode();
            }
        });
 
        // Ad event handler to call array with l  key press within the canvas area
        canvas.addEventListener("keydown", function (e) {
            if (e.key === "l") {
                MxShadingGraphEditor.theEditor.arrangeGraph();
            }
        });
 
 
        var isIdle = true;
        var context = canvas.getContext('2d');
 
        function drawstart(event) {
            //context.beginPath();
            //context.moveTo(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
            console.log('>>>>>>>>>>> draw start');
            isIdle = false;
        }
 
        function drawmove(event) {
            if (isIdle) return;
            //context.lineTo(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
            //context.stroke();
            console.log('>>>>>>>>>>> draw move');
        }
 
        function drawend(event) {
            if (isIdle) return;
            drawmove(event);
            console.log('>>>>>>>>>>> draw move');
            isIdle = true;
        }
 
        function touchstart(event) {
            drawstart(event.touches[0]);
        }
 
        function touchmove(event) {
            drawmove(event.touches[0]);
            //event.preventDefault();
        }
 
        function touchend(event) {
            drawend(event.changedTouches[0]);
        }
 
        //canvas.addEventListener('touchstart', touchstart, false);
        //canvas.addEventListener('touchmove', touchmove, false);
        //canvas.addEventListener('touchend', touchend, false);
 
        //canvas.addEventListener('mousedown', drawstart, false);
        //canvas.addEventListener('mousemove', drawmove, false);
        //canvas.addEventListener('mouseup', drawend, false);        
 
    }

loadDefinitionsFromFile()

MxShadingGraphEditor::loadDefinitionsFromFile

(

extension

)

Load the graph from a file with the specified extension.

Currently only definitions specified using MaterialX are supported.

Parameters

extension

- The extension to load the graph from.

Definition at line 3598 of file JsMaterialXNodeEditor.js.

                                       {
        if (extension == 'mtlx') {
            this.handler.loadDefinitionsFromFile();
        }
        else
        {
            this.debugOutput('Unsupported extension for loading definitions: ' + extension, 2, false);
        }
    }

loadGraphFromFile()

MxShadingGraphEditor::loadGraphFromFile	(		extension,
			auto_arrange,
			rerender = false )

Load the graph from a file with the specified extension.

Parameters

extension	- The extension to load the graph from.
auto_arrange	- True to auto-arrange the graph, false otherwise.
rerender	- True to re-render the scene after loading, false otherwise. Default is false.

Returns

{void}

Definition at line 3616 of file JsMaterialXNodeEditor.js.

                                                               {
 
        if (!this.handler.canImport(extension)) {
            this.debugOutput('Unsupported extension for loading graph: ' + extension, 2, false);
            return;
        }
 
        // Load document from disk.
        if (extension == 'mtlx')
        {
        var input = document.createElement("input");
        input.style = this.fontSizeStyle;
        input.type = "file";
        input.accept = "." + this.handler.getExtension();
        input.onchange = function (e) {
            var file = e.target.files[0];
            console.log('Loading file: ' + file.name);
            MxShadingGraphEditor.theEditor.handler.loadFromFile(extension, file, file.name, MxShadingGraphEditor.theEditor, auto_arrange, rerender);
        };
        input.click();
    }
        else if (extension == 'zip')
        {
            var input = document.createElement("input");
            input.style = this.fontSizeStyle;
            input.type = "file";
            input.accept = ".zip";
            input.onchange = function (e) {
                var file = e.target.files[0];
                if (file) {
                    console.log('Loading zip file: ' + file.name);          
                    MxShadingGraphEditor.theEditor.handler.loadFromZip(extension, file, file.name, MxShadingGraphEditor.theEditor, auto_arrange, rerender);
                }
            };
            input.click();
        }
    }

loadGraphFromString()

MxShadingGraphEditor::loadGraphFromString	(		extension,
			content,
			fileName,
			auto_arrange,
			rerender = false )

Load the graph from a string with the specified extension.

Parameters

extension	- The extension to load the graph from.
content	- The content of the graph.
fileName	- The identifier for the source file, or a arbitrary name.
auto_arrange	- True to auto-arrange the graph, false otherwise.
rerender	- True to re-render the scene after loading, false otherwise. Default is false.

Returns

{void}

Definition at line 3673 of file JsMaterialXNodeEditor.js.

                                                                                    {
        if (!this.handler.canImport(extension)) {
            this.debugOutput('Unsupported extension for loading graph: ' + extension, 2, false);
            return;
        }
 
        if (content.length > 0)
            this.handler.loadFromString(extension, content, fileName, auto_arrange, rerender);
        else
            MxShadingGraphEditor.theEditor.debugOutput('No content to load', 2, false);
    }

loadSerialization()

MxShadingGraphEditor::loadSerialization

(

)

Use built-in serialization to load the graph from file.

Definition at line 3539 of file JsMaterialXNodeEditor.js.

                        {
        MxShadingGraphEditor.theEditor.clearGraph();
 
        var input = document.createElement("input");
        input.style = this.fontSizeStyle;
        input.type = "file";
        input.accept = ".json";
        input.onchange = function (e) {
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.onload = function (event) {
                var data = JSON.parse(event.target.result);
                graph.configure(data);
            };
            reader.readAsText(file);
        };
        input.click();
    }

openImageDialog()

MxShadingGraphEditor::openImageDialog	(		theNode,
			updateProp,
			wantURI )

Open a dialog to select a image file to load.

Parameters

theNode	- The node to update.
updateProp	- The property to update.
wantURI	- True to get the URI, false to get the file.

Definition at line 3740 of file JsMaterialXNodeEditor.js.

                                                  {
 
        // Dynamically create a file input element
        var fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = '*'; // Accept any image file
        fileInput.style.display = 'none';
        document.body.appendChild(fileInput);
 
        fileInput.click();
 
        // TODO : Cache the fileURI on the node so can display without loading...
        fileInput.addEventListener('change', function () {
            var fileURI = fileInput.value.split('\\').pop(); // Get the filename without the full path
            var file = fileInput.files[0];
            //if (wantURI)
            fileURI = URL.createObjectURL(file);
 
            var updateElementId = '__pp:' + updateProp;
            var textInput = document.getElementById(updateElementId);
            //console.log('New filename:', fileURI, 'updateElementId:', updateElementId, 'updateProp:', updateProp);
            textInput.value = fileURI;
            theNode.setProperty(updateProp, fileURI);
 
            var propertypanel_preview = document.getElementById('propertypanel_preview');
            if (propertypanel_preview) {
                propertypanel_preview.src = URL.createObjectURL(file);
                propertypanel_preview.style.display = "block";
            }
 
            var previewImage = false;
            if (previewImage) {
                if (propertypanel_preview) {
                    var reader = new FileReader();
                    reader.onload = function (event) {
                        propertypanel_preview.src = event.target.result;
                    };
 
                    // Read the file as a data URL (base64 encoded string)
                    reader.readAsDataURL(file);
                    propertypanel_preview.style.display = "block";
                }
            }
 
            document.body.removeChild(fileInput);
        });
    }

openSubgraph()

MxShadingGraphEditor::openSubgraph

(

)

Open the subgraph for the selected node.

The first node selected is used.

Definition at line 3462 of file JsMaterialXNodeEditor.js.

                   {
        var selected = graphcanvas.selected_nodes;
        for (var s in selected) {
            var node = selected[s];
            if (node.type == 'graph/subgraph') {
                graphcanvas.openSubgraph(node.subgraph);
                break;
            }
        }
    }

pasteFromClipboard()

MxShadingGraphEditor::pasteFromClipboard

(

)

Paste nodes from the clipboard.

Definition at line 5299 of file JsMaterialXNodeEditor.js.

                         {
        graphcanvas.pasteFromClipboard(true);
    }

resetView()

MxShadingGraphEditor::resetView

(

)

Reset the view of the graph.

Definition at line 3485 of file JsMaterialXNodeEditor.js.

                {
        if (graphcanvas) {
            graphcanvas.ds.reset();
            graphcanvas.setDirty(true, true);
            graphcanvas.centerOnGraph(false);
        }
    }

rgbToHex()

MxShadingGraphEditor::rgbToHex

(

rgb

)

Utility to convert a color from RGB to hex.

Parameters

rgb	- The RGB color to convert.

Returns

The hex color.

Definition at line 3691 of file JsMaterialXNodeEditor.js.

                  {
        if (!rgb) {
            console.log('rgbToHex empty !', rgb);
            return "#000000";
        }
        return '#' + rgb.map(x => {
            var hex = Math.round(x * 255).toString(16);
            return hex.length === 1 ? '0' + hex : hex;
        }).join('');
    }

saveGraphToFile()

MxShadingGraphEditor::saveGraphToFile	(		extension,
			graphWriteOptions )

Save the graph to a file with the specified extension.

Parameters

extension	- The extension to save the graph to.
graphWriteOptions	- The options for writing the graph.

Returns

{void}

Definition at line 3565 of file JsMaterialXNodeEditor.js.

                                                  {
        if (this.handler.canExport(extension)) {
            this.handler.saveGraphToFile(extension, graph, graphWriteOptions);
        }
        else
        {
            this.debugOutput('Unsupported extension for saving graph:' + extension, 2, false);
        }
    }

saveGraphToString()

MxShadingGraphEditor::saveGraphToString	(		extension,
			graphWriteOptions )

Save the graph to a string with the specified extension.

Parameters

extension	- The extension to save the graph to.
graphWriteOptions	- The options for writing the graph.

Definition at line 3581 of file JsMaterialXNodeEditor.js.

                                                    {
        if (this.handler.canExport(extension)) {
            return this.handler.saveGraphToString(extension, graph, graphWriteOptions);
        }
        else
        {
            this.debugOutput('Unsupported extension for saving graph: ' + extension, 2, false);
            return '';
        }
    }

saveSerialization()

MxShadingGraphEditor::saveSerialization

(

)

Use built-in serialization to save the graph to file.

Definition at line 3526 of file JsMaterialXNodeEditor.js.

                        {
        var data = JSON.stringify(graph.serialize(), null, 2);
        var blob = new Blob([data], { type: "text/plain" });
        var url = URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = url;
        a.download = "serialized_graph.json";
        a.click();
    }

searchGraph()

MxShadingGraphEditor::searchGraph

(

title

)

Search the graph for the specified node.

If the node is found then select it and center the view on it.

Parameters

title

- The title of the node to search for.

Definition at line 3406 of file JsMaterialXNodeEditor.js.

    {
        if (title.length == 0) {
            return;
        }
        if (graphcanvas) 
        {
            let nodesFound = [];
            let theGraph = graphcanvas.graph;
 
            // TODO: Add a this search logic to LiteGraph.
            const pattern = new RegExp(title);
            for (var i = 0, l = theGraph._nodes.length; i < l; ++i) {
                if (pattern.test(theGraph._nodes[i].title)) {
                    console.log('-- add found node:', theGraph._nodes[i].title);
                    nodesFound.push(theGraph._nodes[i]);
 
                    // If exact match then only select that node
                    if (theGraph._nodes[i].title == title)
                    {
                        nodesFound.length = 0;
                        nodesFound.push(theGraph._nodes[i]);
                        break;
                    }
                }
            }
            //let node = graphcanvas.graph.findNodeByTitle(title);
            if (nodesFound.length > 0)
            {                
                graphcanvas.selectNodes(nodesFound);                
                graphcanvas.centerOnGraph(true);
                MxShadingGraphEditor.theEditor.updatePropertyPanel(nodesFound[0]);
            }
            else
            {
                this.debugOutput('Node not found: ' + title, 0, false);
            }
        }
    }

selectNodes()

MxShadingGraphEditor::selectNodes

(

)

Select all nodes in the graph.

Definition at line 3496 of file JsMaterialXNodeEditor.js.

                  {
        if (graphcanvas) {
            graphcanvas.selectNodes();
            graphcanvas.setDirty(true, true);
        }
    }

setDirty()

MxShadingGraphEditor::setDirty	(		w = null,
			h = null )

Notify the editor to update it's graph.

Definition at line 3327 of file JsMaterialXNodeEditor.js.

                                 {
        if (graph)
            graph.setDirtyCanvas(true, true);
        if (graphcanvas) {
            graphcanvas.resize(w,h);
        }
    }

setSourceColorSpace()

MxShadingGraphEditor::setSourceColorSpace

(

colorSpace

)

Set global color space for the editor.

Parameters

colorSpace

- The color space to set.

Returns

{void}

Definition at line 3359 of file JsMaterialXNodeEditor.js.

                                    {
        if (this.handler) {
            this.handler.setSourceColorSpace(colorSpace);
        }
    }

setTargetDistanceUnit()

MxShadingGraphEditor::setTargetDistanceUnit

(

unit

)

Set the global distance unit for the editor.

Parameters

unit	- The distance unit to set.

Returns

{void}

Definition at line 3371 of file JsMaterialXNodeEditor.js.

                                {
        if (this.handler) {
            this.handler.setTargetDistanceUnit(unit);
        }
    }

setUI()

MxShadingGraphEditor::setUI

(

ui

)

Set the UI callbacks for the editor.

Parameters

ui	- The UI object containing the callbacks.

Returns

{void}

Definition at line 3320 of file JsMaterialXNodeEditor.js.

              {
        this.ui = ui;
    }

updateImagePreview()

MxShadingGraphEditor::updateImagePreview

(

curImage

)

Update the image preview in the property panel.

Parameters

curImage

- The image to preview.

Returns

{void}

Definition at line 3869 of file JsMaterialXNodeEditor.js.

                                 {
        var propertypanel_preview = document.getElementById('propertypanel_preview');
        if (curImage && propertypanel_preview) {
            this.uriExists(curImage)
                .then(exists => {
                    if (exists) {
                        propertypanel_preview.src = curImage;
                        propertypanel_preview.style.display = "block";
                    } else {
                        //propertypanel_preview.style.display = "none";
                        propertypanel_preview.src = "./Icons/no_image.png";
                        propertypanel_preview.style.display = "block";
                        MxShadingGraphEditor.theEditor.debugOutput('Image does not exist: ' + curImage, 1);
                    }
                });
        }
    }

updatePropertyPanel()

MxShadingGraphEditor::updatePropertyPanel

(

node

)

This method is called when a node is selected in the graph.

• It will update the property panel with the properties of the selected node.
• If a subgraph is selected, it updates the property panel with the subgraph properties.
• If the parent graph is the root and node node is selected, it updates the property panel with the document properties.
• If the parent graph is a subgraph and no node is selected, it updates the property panel with the subgraph properties.

Parameters

node	- The selected node in the graph.

Returns

{void}

Definition at line 3897 of file JsMaterialXNodeEditor.js.

                              {
        const TRUNC_TEXT = 20;
 
        //console.log('Update Panel For:', node);
        var propertypanelcontent = MxShadingGraphEditor.theEditor.ui.propertypanel_content;
        if (!propertypanelcontent) {
            console.error('No property panel content widget found!');
            return;
        }
        // Delete all children
        while (propertypanelcontent.firstChild) {
            propertypanelcontent.removeChild(propertypanelcontent.firstChild);
        }
 
        // Update icon
        var panelIcon = MxShadingGraphEditor.theEditor.ui.propertypanel_icon;
        if (node && node.nodedef_icon) {
            panelIcon.src = node.nodedef_icon;
        }
        else if (this.ui.icon_map) {
            if (!node || node.type == 'graph/subgraph') {
                panelIcon.src = this.ui.icon_map['_default_graph_'];
            } else {
                panelIcon.src = this.ui.icon_map['_default_'];
            }
        }
 
        propertypanelcontent.innerHTML = "";
 
        let colorSpaces = this.handler.getColorSpaces();
        let targetUnits = this.handler.getUnits();
 
        let inUnselectedNodeGraph = false
        if (!node && graphcanvas.graph._subgraph_node) {
            node = graphcanvas.graph._subgraph_node;
            inUnselectedNodeGraph = true
            // Note openSubgraph() was modified to select the subgraph node so this
            // will trigger properly on opening a subgraph !!!
            // See: this.selectNode(graph._subgraph_node);
            //console.log('In subgraph but no node selected. Select subgraph node', node)
        }
        else if (!node && !graphcanvas.graph._is_subgraph) {
            var docInfo = [['Colorspace', this.getSourceColorSpace()],
            ['Distance', this.getTargetDistanceUnit()]];
 
            for (let item of docInfo) {
 
                let elem = document.createElement("div");
                elem.className = "row px-1 py-0";
                let label = document.createElement("div");
                label.className = "col py-0 col-form-label-sm text-left";
                label.style = this.fontSizeStyle;
                label.innerHTML = "<b>" + item[0] + "</b>";
                elem.appendChild(label);
 
                if (item[0] == 'Colorspace' && colorSpaces.length > 0) {
                    // Create colorspace drop down
                    var inputCol = document.createElement("div");
                    inputCol.className = "col text-left";
                    var select = this.createColorSpaceInput(colorSpaces, item[1]);
                    select.onchange = function (e) {
                        MxShadingGraphEditor.theEditor.setSourceColorSpace(e.target.value);
                    }
                    inputCol.appendChild(select);
                    elem.appendChild(inputCol);
                }
                else if (item[0] == 'Distance' && targetUnits.length > 0) {
                    // Create units drop down
                    var inputCol = document.createElement("div");
                    inputCol.className = "col text-left";
                    var select = this.createUnitsInput(targetUnits, 'distance', item[1]);
                    select.onchange = function (e) {
                        MxShadingGraphEditor.theEditor.setTargetDistanceUnit(e.target.value);
                    }
                    inputCol.appendChild(select);
                    elem.appendChild(inputCol);
                }
                /*                        var inputCol = document.createElement("div");
                    inputCol.className = "col text-left";
                    var nameInput = document.createElement("input");
                    nameInput.type = "text";
                    nameInput.value = item[1];
                    nameInput.className = "form-control form-control-sm";
                    nameInput.disabled = true;
                    elem.appendChild(inputCol);
                    inputCol.appendChild(nameInput);
                }
                */
                propertypanelcontent.appendChild(elem);
            }
            return;
        }
 
        var _category = node.nodedef_node;
        var _type = node.nodedef_type;
 
        var isNodeGraph = node.type == 'graph/subgraph';
        if (isNodeGraph) {
            //console.log('>> Update subgraph property panel:', node);
            _category = 'nodegraph';
            if (node.outputs) {
                if (node.outputs.length > 1) {
                    _type = 'multi';
                }
                else if (node.outputs.length > 0) {
                    _type = node.outputs[0].type;
                }
            }
            else {
                _type = '';
            }
        }
        else {
            if (_category == 'surfacematerial') {
                _type = '';
            }
        }
 
        // Identification row
        var elem = document.createElement("div");
        elem.className = "row px-1 py-1";
 
        // Node category and output type
        var label = document.createElement("div");
        label.className = "col-4 px-1 py-0 col-form-label-sm text-end";
        label.style = this.fontSizeStyle;
        label.innerHTML = "<b>" + _category;
        if (_type.length > 0) {
            label.innerHTML += '<br>' + _type;
        }
        label.innerHTML += "</b>";
        elem.appendChild(label);
 
        // Node name / title
        var inputCol = document.createElement("div");
        inputCol.className = "col py-0";
        var nameInput = document.createElement("input");
        nameInput.style = this.fontSizeStyle;
        nameInput.type = "text";
        nameInput.value = node.title;
        nameInput.className = "form-control form-control-sm";
        let that = this;
        nameInput.onchange = function (e) {
            var oldTitle = node.title;
            var newTitle = MxShadingGraphEditor.theEditor.handler.createValidName(e.target.value);
            if (newTitle != oldTitle)
            {
                that.monitor.onNodeRenamed(node, newTitle);
                node.title = newTitle;
            } 
            e.target.value = node.title;
            //console.log('node.graph._is_subgraph:', node)
            if (node.graph._is_subgraph) {
                if (node.nodedef_node == 'input') {
                    //console.log('-------- Rename subgraph input:', node.title);
                    node.graph.renameInput(oldTitle, node.title);
                }
                else if (node.nodedef_node == 'output') {
                    //console.log('----------- Rename subgraph output:', node.title);
                    node.graph.renameOutput(oldTitle, node.title);
                }
            }
 
            // Note: there is a custom size fo subgraphs.
            node.setSize(node.computeSize());
            node.setDirtyCanvas(true, true);
        }
        inputCol.appendChild(nameInput);
 
        // TODO: Generate swatches on the fly
        if (node.nodedef_node != 'input' && node.nodedef_node != 'output'
            && node.type != 'graph/subgraph') {
            var imagePreview = document.createElement("img");
            imagePreview.src = "./Icons/no_image.png";
            var previewSet = false;
            //console.log('Check for preview:', node.nodedef_swatch, 'category:', _category)
            imagePreview.style.display = "none";
            imagePreview.src = "./Icons/no_image.png";
            /* if (node.nodedef_swatch && 
                (_type == 'BSDF' || _type == 'EDF' || _type == 'surfaceshader'))
            {
                this.uriExists(node.nodedef_swatch)
                .then(exists => {
                    if (exists) {
                        previewSet = true;
                        imagePreview.style.display = "block";
                        imagePreview.src = node.nodedef_swatch;    
                    } 
                });                
            } */
            imagePreview.id = "propertypanel_preview";
            imagePreview.className = "img-fluid form-control form-control-sm";
            inputCol.appendChild(imagePreview);
        }
 
        elem.appendChild(label);
        elem.appendChild(inputCol);
        
        // Toggle show/hide of inputs with default values         
        if (!isNodeGraph)
        {
            var filterCol = document.createElement("div");
            filterCol.className = "col-2 py-0";
            filterCol.width = 16;
            var filterIcon = document.createElement("button");
            //filterIcon.setAttribute(data-bs-toggle, "tooltip");
            //filterIcon.setAttribute(data-bs-title, "Show/Hide Default Value Inputs");
            if (node.showDefaultValueInputs == null)
            {
                node.showDefaultValueInputs = true;
            }
            var img = document.createElement("img");
            if (node.showDefaultValueInputs)
            {
                img.src = "./Icons/funnel_white.svg";
                filterIcon.className = "btn btn-sm btn-outline-secondary";
            }
            else
            {
                img.src = "./Icons/funnel-fill_white.svg";
                filterIcon.className = "btn btn-sm btn-outline-warning";
            }
            filterIcon.appendChild(img);
            filterIcon.onclick = function (e) {
                node.showDefaultValueInputs = !node.showDefaultValueInputs;
                MxShadingGraphEditor.theEditor.updatePropertyPanel(node);
            }
            filterCol.appendChild(filterIcon);
            elem.appendChild(filterCol); 
        }
        
        propertypanelcontent.appendChild(elem);
 
        let hr = document.createElement("hr");
        hr.classList.add("my-1");
        propertypanelcontent.appendChild(hr);
 
        let current_details = null;
        let first_details = true;
        let nodeInputs = node.inputs;
        //console.log('Outputs:', nodeOutputs);
 
        let targetNodes = [];
        for (var i in nodeInputs) {
            let nodeInput = nodeInputs[i];
 
            let inputName = nodeInput.name;
            let nodeInputLink = nodeInput.link;
            let uiName = inputName;
            // remove "_" from uiName
            uiName = uiName.replace(/_/g, ' ');
            let uimin = null;
            let uimax = null;
            let colorspace = '';
            let units = '';
            let defaultgeomprop = '';
 
            //console.log('Scan input:', inputName, ' on node: ', node.graph);
 
            let property_info = node.getPropertyInfo(inputName);
            let ng_property_info = null;
            if (isNodeGraph)
            {
                //console.log('Check subgraph input node property_info:')
                let sg = node.subgraph;
                if (sg)
                {
                    let sg_nodes = sg._nodes;
                    for (var sg_node of sg_nodes)
                    {
                        if (sg_node.title == inputName)
                        {
                            //console.log('Found subgraph node:', sg_node.title);
                            ng_property_info = sg_node.getPropertyInfo("in");
                            if (ng_property_info)
                            {
                                //console.log('Use subgraph node input property info:', ng_property_info);
                                break;
                            }
                        }
                    }
                }
            }
            //console.log('1. get property info for i: ', inputName, 'info: ', property_info)
 
            var skipInterorConnectedInput = false;
            if (node.graph._is_subgraph) {
                // Find input on subgraph node
                //console.log('Check subgraph for link:', node.graph)
                var sg_node = node.graph._subgraph_node;
                if (sg_node) {
                    //console.log('Check for input on sg node', sg_node, node.title);
                    var slot = sg_node.findInputSlot(node.title);
                    if (slot != null) {
                        if (sg_node.inputs) {
                            //property_info = sg_node.properties_info[slot];
                            var slotInput = sg_node.inputs[slot];
                            //console.log('check slot: ', slotInput.link);
                            if (slotInput != null && slotInput.link != null) {
                                skipInterorConnectedInput = true;
                            }
                        }
                        else {
                            //console.log('Error: no subgraph node inputs for subgraph input!', sg_node, node.title);
                        }
                    }
                }
            }
 
            if (skipInterorConnectedInput) {
                console.log('Skip interior connected input: ', nodeInput);
                continue;
            }
 
            //console.log('Property info:', property_info, ' for input:', inputName);
            if (ng_property_info) {
                //console.log('Replace property info:', property_info);
                property_info = ng_property_info;
            }
            if (property_info) {
                //console.log('Extract input property info:', property_info);
                if (property_info.defaultgeomprop)
                {
                    defaultgeomprop = property_info.defaultgeomprop;
                }
                if (property_info.colorspace) {
                    colorspace = property_info.colorspace;
                }
                if (property_info.unit) {
                    units = property_info.unit;
                }
                if (property_info.uiname) {
                    uiName = property_info.uiname;
                }
                if (property_info.uimin) {
                    uimin = property_info.uimin;
                }
                if (property_info.uimax) {
                    uimax = property_info.uimax;
                }
                if (property_info.uifolder && property_info.uifolder.length > 0) {
                    // Create a details element
                    if (current_details == null || current_details.id != property_info.uifolder) {
                        //console.log('Create new details:', property_info.uifolder);
                        current_details = document.createElement("details");
                        current_details.id = property_info.uifolder;
                        current_details.open = first_details;
                        current_details.classList.add('w-100', 'p-1', 'border', 'border-secondary', 'rounded', 'my-1');
                        first_details = false;
                        var summary = document.createElement('summary')
                        summary.style = this.fontSizeStyle;
                        summary.innerHTML = "<b>" + property_info.uifolder + "</b>"
                        //summary.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'btn-block');
                        current_details.appendChild(summary);
 
                    }
                    else {
                        //current_details = null;
                    }
                }
                else {
                    current_details = null;
                }
                //console.log('2. uiName:', uiName, 'uimin:', uimin, 'uimax:', uimax, 'uiFolder:', property_info.uifolder);
            }
            else {
                current_details = null;
            }
 
            var elem = null;
 
            // Check if there is a link
            if (nodeInputLink) {
                let upstreamLink = null;
 
                let nodegraph = node.graph;
                let link = nodegraph.links[nodeInputLink];
                //console.log('link:', link);
                let linkId = link && link.origin_id;
                let linkNode = linkId && nodegraph.getNodeById(linkId);
 
                if (linkNode) {
 
                    //console.log('linkNode:', linkNode);`
                    let linkSlot = link.origin_slot;
                    //console.log('linkSlot:', linkSlot);
                    let linkOutput = linkNode.outputs[linkSlot];
                    //console.log('linkOutput:', linkOutput);
                    upstreamLink = linkNode.title + '.' + linkOutput.name;
                    //console.log('upstreamLink:', upstreamLink);
 
                    let id = "__pp:" + inputName;
                    let buttonText = upstreamLink;
                    // Truncate long names
                    if (buttonText.length > TRUNC_TEXT) {
                        buttonText = buttonText.substring(0, TRUNC_TEXT) + "...";
                    }
                    let input = this.createButtonWithImageAndText("./Icons/arrow_up_white.svg", buttonText, id);
 
                    input.onclick = function (e) {
 
                        var inputName = e.target.id;
                        inputName = inputName.replace('__pp:', '');
                        inputName = inputName.replace('_text', '');
                        inputName = inputName.replace('_img', '');
                        console.log('Clicked traversal button:', inputName);
 
                        console.log('Jump to node:', linkNode.title);
                        graphcanvas.selectNodes([linkNode]);
                        MxShadingGraphEditor.theEditor.centerNode()
                        MxShadingGraphEditor.theEditor.updatePropertyPanel(linkNode);
                        node.setDirtyCanvas(true, true);
                    }
 
                    // Add new row
                    elem = document.createElement("div");
                    elem.className = "row px-1 py-0";
 
                    input.id = "__pp:" + inputName;
 
                    var label = document.createElement("div");
                    // invert-button
                    label.className = "col-4 px-1 py-0 col-form-label-sm text-end";
                    label.style = this.fontSizeStyle;
                    label.innerHTML = uiName;
                    label.for = input.id;
                    elem.appendChild(label);
 
                    // form-control
                    if (useFormControl) {
                        input.classList.add("form-control");
                    }
                    input.classList.add("form-control-sm");
                    // Disable if don't want interaction.
                    if (!graphcanvas.allow_interaction)
                        input.disabled = true;
 
                    var propvalue = document.createElement("div");
                    propvalue.className = "col p-1";
                    propvalue.appendChild(input);
 
                    elem.appendChild(propvalue);
                }
            }
 
            else {  
        
                targetNodes[i] = node;
                let targetNode = targetNodes[i];
                let propertyKey = inputName;
 
                var property = targetNode.properties[inputName];
                if (property == null) {
                    if (isNodeGraph) {
                        var subgraph = targetNode.subgraph;
                        if (subgraph) {
                            //console.log('Find node by title', inputName, ' in subgraph', subgraph._nodes);
                            var subNode = subgraph.findNodeByTitle(inputName);
                            if (subNode) {
                                targetNodes[i] = subNode;
                                propertyKey = 'in';
                                property = targetNodes[i].properties['in'];
                                //console.log('Route to subgraph target node:', targetNode, targetNode.title, '. ', inputName, ' = ', JSON.stringify(property), 'propkey=', propertyKey);
                            }
                        }
                    }
                    if (property == null) {
                        console.log('Update: Cannot find property value for input:', inputName);
                        continue;
                    }
                }
 
                // Check if there is a default property value. If so skip showing it
                if (defaultgeomprop)
                {
                    //console.log('Skip input with defaultgeomprop: ' + inputName);
                    continue;
                }
 
                // Check if property value is same as property info default value
                if (!node.showDefaultValueInputs && !isNodeGraph)
                {
                    let isDefault = node.isDefaultValue(inputName);
                    if (isDefault)
                    {
                        continue;
                    }                
                }
 
                // Add new row
                elem = document.createElement("div");
                elem.className = "row px-1 py-0";
 
                var input = null;
                var input_btn = null;
                let input_slider = null;
                var colorspace_unit_btn = null;
                var useFormControl = true;
 
                // Add colorspace drop-down if specified.
                if (colorspace.length > 0) {
                    // Create drop-down menu to choose colorspace from list stored
                    // in the handler class getColorSpaces() method.
                    //
                    colorspace_unit_btn = this.createColorSpaceInput(colorSpaces, colorspace);
                    let theNode = targetNodes[i];
                    colorspace_unit_btn.onchange = function (e) {
 
                        theNode.setPropertyInfo(inputName, 'colorspace', e.target.value);
                    }
                }
                else if (units.length > 0 && property_info.unittype) {
                    // Add units drop-down if specified.
                    colorspace_unit_btn = this.createUnitsInput(targetUnits, property_info.unittype, units);
                    let theNode = targetNodes[i];
                    colorspace_unit_btn.onchange = function (e) {
                        theNode.setPropertyInfo(inputName, 'unit', e.target.value);
                    }
                }
 
                let proptype = nodeInput.type;
                if (proptype == 'float' || proptype == 'integer') {
                    var isFloat = proptype == 'float';
 
                    input = document.createElement("input");
                    input.id = propertyKey + '_box';
                    input.style = this.fontSizeStyle;
                    input.type = 'number';
                    input.classList.add("form-control", "form-control-sm", "ps-0");
                    input.setAttribute('propertyKey', propertyKey);
 
                    input_slider = document.createElement("input");
                    input_slider.id = propertyKey + '_slider';
                    //input_slider.style = this.fontSizeStyle;
                    input_slider.type = 'range';
                    input_slider.classList.add('form-range', 'custom-slider', 'pe-0');
                    input_slider.setAttribute('propertyKey', propertyKey);
 
                    if (uimin) {
                        input.min = uimin;
                    }
                    else {
                        input.min = Math.min(property, 0);
                    }
                    if (uimax) {
                        input.max = uimax;
                    }
                    else {
                        if (isFloat) 
                        {
                            input.max = Math.max(property*3, 10.0);
                        }
                        else {
                            input.max = Math.max(property*3, 100);
                        }
                    }
 
 
                    input_slider.min = input.min;
                    input_slider.max = input.max;
                    if (isFloat) {
                        input.step = (input.max - input.min) / 100.0;
                        input_slider.step = input.step;
                    }
                    else {
                        input_slider.step = 1;
                        input.step = 1;
                    }
 
                    input.value = input_slider.value = property;
 
                    /* console.log('> ' + propertyKey + ' - Set up slider: min, max, value',
                        input_slider.min, input_slider.max, input_slider.value
                    );
                    console.log('> ' + propertyKey + ' - Set up box: min, max, value',
                        input.min, input.max, input.value
                    ); */
 
                    let theBox = input;
                    let theSlider = input_slider;
                    let theNode = targetNodes[i];
                    input_slider.onchange = function (e) {
                        var pi = e.target.getAttribute('propertyKey');
                        var val = parseFloat(e.target.value);
                        theNode.setProperty(pi, val);
                        //console.log('Update scalar property:', pi, parseFloat(e.target.value), theNode.title, theNode.properties)
                    }
                    input_slider.oninput = function(e) {
                        var pi = e.target.getAttribute('propertyKey');
                        var val = parseFloat(e.target.value);
                        theNode.setProperty(pi, val);
                        theBox.value = e.target.value;
                    }
 
                    input.onchange = function (e) {
                        var pi = e.target.getAttribute('propertyKey');
                        var val = parseFloat(e.target.value);
                        theNode.setProperty(pi, val);
                        //console.log('Update scalar property:', pi, parseFloat(e.target.value), theNode.title, theNode.properties)
                    }
                    input.oninput = function(e) {
                        var pi = e.target.getAttribute('propertyKey');
                        var val = parseFloat(e.target.value);
                        theNode.setProperty(pi, val);
                        theSlider.value = e.target.value;
                    }
                }
                else if (proptype == 'string' || proptype == 'filename') {
                    input = document.createElement("input");
                    input.style = this.fontSizeStyle;
                    input.type = "text";
                    if (proptype == 'filename') {
                        var curImage = property;
                        this.updateImagePreview(curImage);
 
                        input_btn = document.createElement("button");
                        input_btn.classList.add("btn", "btn-sm", "btn-outline-secondary");
                        input_btn.innerHTML = "+";
                        input_btn.setAttribute('propertyKey', propertyKey);
                        var fileId = "__pp:" + inputName;
                        let theNode = targetNodes[i];
                        input_btn.onclick = function (e) {
                            var pi = e.target.getAttribute('propertyKey');
                            MxShadingGraphEditor.theEditor.openImageDialog(theNode, pi, false);
                        }
                    }
 
                    else 
                    {
                        // Check if there is a 'enm' property
                        //console.log('------------------- handle enum property info:', property_info, '. property:', property);
                        if (property_info && property_info.enum) {
                            
                            //console.log('----------------- found enum property info:', property_info.enum);
 
                            // Create drop-down menu to choose from list stored in the handler class.                            
                            input = document.createElement("select");
                            input.style = this.fontSizeStyle;
                            input.classList.add("form-control", "form-control-sm");
 
                            input.setAttribute('propertyKey', propertyKey);
                            let theNode = targetNodes[i];
                            let enums = property_info.enum;
                            for (let j = 0; j < enums.length; j++) {
                                let option = document.createElement("option");
                                option.value = enums[j];
                                option.text = enums[j];
                                input.add(option);
                            }
                            input.value = property;
                            input.setAttribute('propertyKey', propertyKey);
                            input.onchange = function (e) {
                                var pi = e.target.getAttribute('propertyKey');
                                theNode.setProperty(pi, e.target.value);
                                //console.log('Update string property:', pi, theNode.properties[pi])
                            }
                        }
                    }
 
                    if (property_info && !property_info.enm) {
                        input.value = property;
                        input.setAttribute('propertyKey', propertyKey);
                        let theNode = targetNodes[i];
                        let isFilename = proptype == 'filename';
                        let that = this;
                        input.onchange = function (e) {
                            var pi = e.target.getAttribute('propertyKey');
                            //theNode.properties[pi] = e.target.value;
                            theNode.setProperty(pi, e.target.value);
                            if (isFilename) {
                                //console.log('Update filename property:', pi, theNode.properties[pi])
                                that.updateImagePreview(e.target.value);
                            }
                            else {
                                //console.log('Update string property:', pi, theNode.properties[pi])
                            }
                        }
                    }
                }
                else if (proptype == 'boolean') {
                    //console.log('Add Boolean property:', property);
                    input = document.createElement("input");
                    input.style = this.fontSizeStyle;
                    input.type = "checkbox";
                    input.classList = "form-check-input";
                    useFormControl = false;
                    input.checked = property;
                    input.setAttribute('propertyKey', propertyKey);
                    let theNode = targetNodes[i];
                    input.onchange = function (e) {
                        var pi = e.target.getAttribute('propertyKey');
                        //theNode.properties[pi] = e.target.checked;
                        theNode.setProperty(pi, e.target.checked);
                        //console.log('Update boolean property:', pi, theNode.properties[pi]);
                    }
                }
 
                else if (proptype == 'vector2' || proptype == 'vector3' || proptype == 'vector4') 
                {
                    // Find index of proptype in ['vector2', 'vector3', 'vector4' ]
                    var vector_size = ['vector2', 'vector3', 'vector4'].indexOf(proptype) + 2;
                    input = document.createElement("div");
                    useFormControl = false;
 
                    input.className = "row py-1 ps-4 pe-0";
 
                    for (let v=0; v<vector_size; v++) 
                    {
                        //console.log('Vector property:[', 0, '] = ', property[0], proptype)
                        let subinput = document.createElement("input");
                        subinput.style = this.fontSizeStyle;
                        subinput.type = 'number';
                        subinput.classList.add("form-control");
                        subinput.classList.add("form-control-sm");
                        subinput.setAttribute('propertyKey', propertyKey);
 
                        let subinput_slider = document.createElement("input");
                        subinput_slider.id = propertyKey + '_slider';
                        subinput_slider.type = 'range';
                        subinput_slider.classList.add('form-range', 'custom-slider', 'pe-0');
                        subinput_slider.setAttribute('propertyKey', propertyKey);
 
                        if (uimin) {
                            subinput.min = uimin[v];
                        }
                        else {
                            subinput.min = Math.min(property[v]*3, 0);
                        }
                        if (uimax) {
                            subinput.max = uimax[v];
                        }
                        else {
                            subinput.max = Math.max(property[v]*3, 10.0);
                        }
    
                        subinput_slider.min = subinput.min;
                        subinput_slider.max = subinput.max;
                        subinput.step = (subinput.max - subinput.min) / 100.0;
                        subinput_slider.step = subinput.step;
 
                        subinput.value = subinput_slider.value = property[v];
 
                        let theNode = targetNodes[i];
                        let vector_index = v;
                        let theBox = subinput;
                        let theSlider = subinput_slider;
                        theBox.onchange = function (e) {
                            let pi = e.target.getAttribute('propertyKey');
                            let value = parseFloat(e.target.value);
                            let newValue = theNode.properties[pi].map(item => item);
                            newValue[vector_index] = value; 
                            theNode.setProperty(pi, newValue);
                            //theNode.properties[pi][0] = value;
                            //console.log('Update Vector property:"', pi, '"', 0, parseFloat(e.target.value), theNode.properties[pi])
                        }
                        theBox.oninput = function(e) {
                            let pi = e.target.getAttribute('propertyKey');
                            let value = parseFloat(e.target.value);
                            let newValue = theNode.properties[pi].map(item => item);
                            newValue[vector_index] = value; 
                            theNode.setProperty(pi, newValue);
                            theSlider.value = e.target.value;
                        }                        
 
                        theSlider.onchange = function (e) {
                            let pi = e.target.getAttribute('propertyKey');
                            let value = parseFloat(e.target.value);
                            let newValue = theNode.properties[pi].map(item => item);
                            newValue[vector_index] = value; 
                            theNode.setProperty(pi, newValue);
                            //console.log('Update scalar property:', pi, parseFloat(e.target.value), theNode.title, theNode.properties)
                        }
                        theSlider.oninput = function(e) {
                            let pi = e.target.getAttribute('propertyKey');
                            let value = parseFloat(e.target.value);
                            let newValue = theNode.properties[pi].map(item => item);
                            newValue[vector_index] = value; 
                            theNode.setProperty(pi, newValue);
                            theBox.value = e.target.value;
                        }
    
 
                        let propvalue_slider = document.createElement("div");
                        propvalue_slider.className = "col p-0";
                        propvalue_slider.appendChild(subinput_slider);
 
                        let propvalue_box = document.createElement("div");
                        propvalue_box.className = "col p-0";
                        propvalue_box.appendChild(subinput);                                                
 
                        let input_row = document.createElement("div");
                        input_row.className = "row p-0";
                        input_row.appendChild(propvalue_slider);                        
                        input_row.appendChild(propvalue_box);
    
                        input.appendChild(input_row);
                    }
                }
                else if (proptype == 'color3' || proptype == 'color4') {
                    input = document.createElement("input");
                    input.type = "color";
                    //console.log('set color property:', property.length, property);
                    if (property.length == 4) {
                        input.value = this.rgbToHex([ property[0], property[1], property[2] ]);
                    }
                    else {                        
                        input.value = this.rgbToHex(property);
                    }
                    input.setAttribute('propertyKey', propertyKey);
                    let theNode = targetNodes[i];
                    input.onchange = function (e) {
                        // Convert hex to rgb in 0..1 range
                        var hex = e.target.value;
                        let fprecision = 4
                        let rgb = [0,0,0]
                        rgb[0] = parseInt(hex.substring(1, 3), 16) / 255.0;
                        rgb[0] = parseFloat(rgb[0].toFixed(fprecision));
                        rgb[1] = parseInt(hex.substring(3, 5), 16) / 255.0;
                        rgb[1] = parseFloat(rgb[1].toFixed(fprecision));
                        rgb[2] = parseInt(hex.substring(5, 7), 16) / 255.0;
                        rgb[2] = parseFloat(rgb[2].toFixed(fprecision));
                        if (proptype == 'color4')
                            rgb[3] = 1.0;
 
                        var pi = e.target.getAttribute('propertyKey');
                        theNode.setProperty(pi, rgb);
                    }
                    let func = function (e) {
                        // Convert hex to rgb in 0..1 range
                        var hex = e.target.value;
                        let rgb = [0, 0, 0];
                        let fprecision = 4
                        rgb[0] = parseInt(hex.substring(1, 3), 16) / 255.0;
                        rgb[0] = parseFloat(rgb[0].toFixed(fprecision));
                        rgb[1] = parseInt(hex.substring(3, 5), 16) / 255.0;
                        rgb[1] = parseFloat(rgb[1].toFixed(fprecision));
                        rgb[2] = parseInt(hex.substring(5, 7), 16) / 255.0;
                        rgb[2] = parseFloat(rgb[2].toFixed(fprecision));
                        if (proptype == 'color4')
                            rgb[3] = 1.0;
 
                        var pi = e.target.getAttribute('propertyKey');
                        theNode.setProperty(pi, rgb);
                    }
                    input.onchange = func;
                    input.oninput = func;
                }
                else {
                    input = document.createElement("input");
                    input.style = this.fontSizeStyle;
                    input.type = "text";
                    input.value = property;
                    let propertyKey = inputName;
                    let theNode = targetNodes[i];
                    input.onchange = function (e) {
                        theNode.setProperty(propertyKey, e.target.value);
                        //theNode.properties[propertyKey] = e.target.value;
                    }
                }
 
                if (input) {
                    input.id = "__pp:" + inputName;
                    //console.log('> Add input:', input.id);
 
                    var label = document.createElement("div");
                    label.className = "col-4 p-0 col-form-label-sm text-end";
                    label.style = this.fontSizeStyle;
                    label.innerHTML = uiName;
                    label.for = input.id;
                    elem.appendChild(label);
 
                    // form-control
                    if (useFormControl) {
                        input.classList.add("form-control");
                    }
                    input.classList.add("form-control-sm");
                    // Disable if don't want interaction.
                    if (!graphcanvas.allow_interaction)
                        input.disabled = true;
 
                    var propvalue = document.createElement("div");
                    propvalue.className = "col py-0";
                    if (input_slider)
                    {
                        propvalue.classList.add('ps-1');
                    }
                    propvalue.appendChild(input);
 
                    if (input_btn) {
                        var propbutton = document.createElement("div");
                        propbutton.className = "col-2 py-0";
                        //console.log('Add input button:', input_btn);
                        propbutton.appendChild(input_btn);
                        elem.appendChild(propbutton);
                    }
                    if (colorspace_unit_btn) {
                        //console.log('Add cs / unit button:', input_btn);
                        var propbutton = document.createElement("div");
                        propbutton.className = "col col-form-label-sm";
                        var details = document.createElement("details");
                        var summary = document.createElement('summary')
                        summary.style = this.fontSizeStyle;
                        if (colorspace.length > 0)
                            summary.innerHTML = "Colorspace";
                        else if (targetUnits.length > 0)
                            summary.innerHTML = "Units";
                        details.appendChild(summary);
                        details.appendChild(colorspace_unit_btn);
                        propbutton.appendChild(details);
                        propvalue.appendChild(propbutton);
                    }
 
                    if (input_slider)
                    {
                        var propvalue_slider = document.createElement("div");
                        propvalue_slider.className = "col py-0 pe-0";
                        propvalue_slider.appendChild(input_slider);
                        elem.appendChild(propvalue_slider);
                    }    
 
                    elem.appendChild(propvalue);
                }
            }
            //elem.innerHTML = "<em>" + i  + "</em> : " + property;
            if (elem) {
                if (current_details) {
                    //console.log('3a. append child to details:', current_details.id, elem, inputName);
                    current_details.appendChild(elem);
                    // It current_details not already in the propertypanelcontent, add it.
                    if (current_details.parentElement == null) {
                        propertypanelcontent.appendChild(current_details);
                    }
                }
                else {
                    propertypanelcontent.appendChild(elem);
                    //console.log('3b. append child to parent content:', elem, inputName);
                }
            }
        }
 
        //propertypanelcontent
 
        let output_details = null;
        let nodeOutputs = null;
        let isSubgraph = graphcanvas.graph;
        //console.log('>> graph: ', graph, '. isnodegraph:', isNodeGraph, 
        //    'inUnselectedNodeGraph: ', inUnselectedNodeGraph)
        if (!inUnselectedNodeGraph)
            nodeOutputs = node.outputs;
        for (let k in nodeOutputs) {
            let nodeOutput = nodeOutputs[k];
            //console.log('For node:', node.title, '.Found output:', nodeOutput.name, nodeOutput)
            let nodeOutputLinks = nodeOutput.links;
            for (let j in nodeOutputLinks) {
                let link_id = nodeOutputLinks[j];
                // Find the link in the graph's links array
                //console.log('-------------- linkid: ', link_id);
                //console.log('graphcanvas.graph:', node.graph)
                const link = graphcanvas.graph.links[link_id];
                                
                if (link) {
                    if (!output_details) {
                        output_details = document.createElement("details");
                        output_details.id = "pp::outputs";
                        output_details.open = true;
                        output_details.classList.add('w-100', 'p-1', 'border', 'border-secondary', 'rounded', 'my-1');
                        first_details = false;
                        var summary = document.createElement('summary');
                        {
                            summary.style = this.fontSizeStyle;
                            summary.innerHTML = "<b>Outputs</b>"
                        }
                        //summary.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'btn-block');
                        output_details.appendChild(summary);
                    }
 
                    //console.log('got link:', link);
                    // Find the target node using the link's target node ID
                    const targetNode = graphcanvas.graph.getNodeById(link.target_id);
                    
                    if (targetNode) {
 
                        let targetSlot = link.target_slot;
                        let targetInput = targetNode.inputs[targetSlot];
                        //console.log(`- Node ${targetNode.title} (Input: ${targetInput.name})`);
 
                        let downstreamLink = targetNode.title + '.' + targetInput.name;
 
                        let id = "__pp:" + nodeOutput.name;
                        let buttonText = downstreamLink;
                        // Truncate long names
                        if (buttonText.length > TRUNC_TEXT) {
                            buttonText = buttonText.substring(0, TRUNC_TEXT) + "...";
                        }
                        let output = this.createButtonWithImageAndText("./Icons/arrow_down_white.svg", buttonText, id);
 
                        output.onclick = function (e) {
 
                            var inputName = e.target.id;
                            inputName = inputName.replace('__pp:', '');
                            inputName = inputName.replace('_text', '');
                            inputName = inputName.replace('_img', '');
                            console.log('Clicked traversal button:', inputName);
 
                            console.log('Jump to node:', targetNode.title);
                            graphcanvas.selectNodes([targetNode]);
                            MxShadingGraphEditor.theEditor.centerNode()
                            MxShadingGraphEditor.theEditor.updatePropertyPanel(targetNode);
                            node.setDirtyCanvas(true, true);
                        }
 
                        // Add new row
                        elem = document.createElement("div");
                        elem.className = "row px-1 py-0";
 
                        let outputName = nodeOutput.name;
                        output.id = "__pp:" + outputName;
 
                        var label = document.createElement("div");
                        // invert-button
                        label.className = "col-4 px-1 py-0 col-form-label-sm text-end";
                        label.style = this.fontSizeStyle;
                        label.innerHTML = outputName;
                        label.for = nodeOutput.id;
                        elem.appendChild(label);
 
                        // form-control
                        if (useFormControl) {
                            output.classList.add("form-control");
                        }
                        output.classList.add("form-control-sm");
                        // Disable if don't want interaction.
                        if (!graphcanvas.allow_interaction)
                            output.disabled = true;
 
                        var propvalue = document.createElement("div");
                        propvalue.className = "col p-1";
                        propvalue.appendChild(output);
 
                        elem.appendChild(propvalue); 
                        //console.log('DOM output', propvalue);
                        output_details.appendChild(elem);
 
                    } else {
                        console.log(`- Node with ID ${link.target_id} not found.`);
                        console.log('--- Available nodes:', graphcanvas.graph._nodes_by_id);
                    }
                } else {
                    console.log(`- Link with ID ${link_id} not found.`);
                }
            }
 
        }
        if (output_details) {
            propertypanelcontent.appendChild(output_details);
        }
    }

uriExists()

MxShadingGraphEditor::uriExists

(

uri

)

Check if a URI exists.

Parameters

uri	- The URI to check.

Returns

true if the URI exists, false otherwise.

Definition at line 3794 of file JsMaterialXNodeEditor.js.

                   {
        return fetch(uri)
            .then(response => {
                if (response.ok) {
                    return Promise.resolve(true);
                } else {
                    return Promise.resolve(false);
                }
            })
            .catch(error => {
                console.log('Error checking URI:', error);
                return Promise.resolve(false);
            });
    }

---

The documentation for this class was generated from the following file:

• JsMaterialXNodeEditor.js