Skip to main content

azul_layout/widgets/
node_graph.rs

1//! Interactive node graph editor widget.
2//!
3//! Provides the [`NodeGraph`] widget for building visual node-based editors
4//! (e.g. shader graphs, data-flow pipelines). Key types:
5//!
6//! - [`NodeGraph`] — top-level widget holding nodes, types, and callbacks
7//! - [`Node`] — a single node with typed input/output connections and editable fields
8//! - [`NodeTypeInfo`] / [`InputOutputInfo`] — metadata describing node types and their I/O ports
9//! - [`NodeGraphCallbacks`] — user-provided callbacks for add, remove, drag, connect, etc.
10//!
11//! **Known limitation:** Connection curves between nodes are currently not rendered
12//! (`draw_connection` returns a null image pending `RenderImageCallbackInfo` support).
13
14use alloc::vec::Vec;
15use core::fmt;
16
17use azul_core::{
18    callbacks::{CoreCallback, CoreCallbackData, Update},
19    dom::{Dom, EventFilter, HoverEventFilter, IdOrClass, IdOrClass::Class, IdOrClassVec},
20    geom::{LogicalPosition, LogicalRect, LogicalSize, PhysicalSizeU32},
21    gl::Texture,
22    menu::{Menu, MenuItem, StringMenuItem},
23    refany::{OptionRefAny, RefAny},
24    resources::{ImageRef, RawImageFormat},
25    svg::{SvgPath, SvgPathElement, SvgStrokeStyle, TessellatedGPUSvgNode},
26    window::CursorPosition::InWindow,
27};
28#[allow(clippy::wildcard_imports)] // widget/render module pulls in the css property/value types it builds with
29use azul_css::{
30    dynamic_selector::{CssPropertyWithConditions, CssPropertyWithConditionsVec},
31    props::{
32        basic::*,
33        layout::*,
34        property::{CssProperty, *},
35        style::*,
36    },
37    *,
38};
39use azul_css::css::BoxOrStatic;
40
41use crate::{
42    callbacks::{Callback, CallbackInfo},
43    widgets::{
44        check_box::{CheckBox, CheckBoxOnToggleCallbackType, CheckBoxState},
45        color_input::{ColorInput, ColorInputOnValueChangeCallbackType, ColorInputState},
46        file_input::{FileInput, FileInputOnPathChangeCallbackType, FileInputState},
47        number_input::{NumberInput, NumberInputOnFocusLostCallbackType, NumberInputState},
48        text_input::{TextInput, TextInputOnFocusLostCallbackType, TextInputState},
49    },
50};
51
52/// Interactive node graph editor widget with typed input/output connections.
53#[derive(Debug, Clone)]
54#[repr(C)]
55pub struct NodeGraph {
56    pub node_types: NodeTypeIdInfoMapVec,
57    pub input_output_types: InputOutputTypeIdInfoMapVec,
58    pub nodes: NodeIdNodeMapVec,
59    pub allow_multiple_root_nodes: bool,
60    pub offset: LogicalPosition,
61    pub style: NodeGraphStyle,
62    pub callbacks: NodeGraphCallbacks,
63    pub add_node_str: AzString,
64    pub scale_factor: f32,
65}
66
67impl Default for NodeGraph {
68    fn default() -> Self {
69        Self {
70            node_types: NodeTypeIdInfoMapVec::from_const_slice(&[]),
71            input_output_types: InputOutputTypeIdInfoMapVec::from_const_slice(&[]),
72            nodes: NodeIdNodeMapVec::from_const_slice(&[]),
73            allow_multiple_root_nodes: false,
74            offset: LogicalPosition::zero(),
75            style: NodeGraphStyle::Default,
76            callbacks: NodeGraphCallbacks::default(),
77            add_node_str: AzString::from_const_str(""),
78            scale_factor: 1.0,
79        }
80    }
81}
82
83impl NodeGraph {
84    /// Generates a new `NodeId` that is unique in the graph
85    #[must_use] pub fn generate_unique_node_id(&self) -> NodeGraphNodeId {
86        NodeGraphNodeId {
87            inner: self
88                .nodes
89                .iter()
90                .map(|i| i.node_id.inner)
91                .max()
92                .unwrap_or(0)
93                .saturating_add(1),
94        }
95    }
96}
97
98/// Maps a [`NodeTypeId`] to its [`NodeTypeInfo`] metadata.
99#[derive(Debug, Clone)]
100#[repr(C)]
101pub struct NodeTypeIdInfoMap {
102    pub node_type_id: NodeTypeId,
103    pub node_type_info: NodeTypeInfo,
104}
105
106impl_option!(NodeTypeIdInfoMap, OptionNodeTypeIdInfoMap, copy = false, [Debug, Clone]);
107impl_vec!(NodeTypeIdInfoMap, NodeTypeIdInfoMapVec, NodeTypeIdInfoMapVecDestructor, NodeTypeIdInfoMapVecDestructorType, NodeTypeIdInfoMapVecSlice, OptionNodeTypeIdInfoMap);
108impl_vec_clone!(
109    NodeTypeIdInfoMap,
110    NodeTypeIdInfoMapVec,
111    NodeTypeIdInfoMapVecDestructor
112);
113impl_vec_mut!(NodeTypeIdInfoMap, NodeTypeIdInfoMapVec);
114impl_vec_debug!(NodeTypeIdInfoMap, NodeTypeIdInfoMapVec);
115
116/// Maps an [`InputOutputTypeId`] to its [`InputOutputInfo`] metadata.
117#[derive(Debug, Clone)]
118#[repr(C)]
119pub struct InputOutputTypeIdInfoMap {
120    pub io_type_id: InputOutputTypeId,
121    pub io_info: InputOutputInfo,
122}
123
124impl_option!(InputOutputTypeIdInfoMap, OptionInputOutputTypeIdInfoMap, copy = false, [Debug, Clone]);
125impl_vec!(InputOutputTypeIdInfoMap, InputOutputTypeIdInfoMapVec, InputOutputTypeIdInfoMapVecDestructor, InputOutputTypeIdInfoMapVecDestructorType, InputOutputTypeIdInfoMapVecSlice, OptionInputOutputTypeIdInfoMap);
126impl_vec_clone!(
127    InputOutputTypeIdInfoMap,
128    InputOutputTypeIdInfoMapVec,
129    InputOutputTypeIdInfoMapVecDestructor
130);
131impl_vec_mut!(InputOutputTypeIdInfoMap, InputOutputTypeIdInfoMapVec);
132impl_vec_debug!(InputOutputTypeIdInfoMap, InputOutputTypeIdInfoMapVec);
133
134/// Maps a [`NodeGraphNodeId`] to its [`Node`] data.
135#[derive(Debug, Clone)]
136#[repr(C)]
137pub struct NodeIdNodeMap {
138    pub node_id: NodeGraphNodeId,
139    pub node: Node,
140}
141
142impl_option!(NodeIdNodeMap, OptionNodeIdNodeMap, copy = false, [Debug, Clone]);
143impl_vec!(NodeIdNodeMap, NodeIdNodeMapVec, NodeIdNodeMapVecDestructor, NodeIdNodeMapVecDestructorType, NodeIdNodeMapVecSlice, OptionNodeIdNodeMap);
144impl_vec_clone!(NodeIdNodeMap, NodeIdNodeMapVec, NodeIdNodeMapVecDestructor);
145impl_vec_mut!(NodeIdNodeMap, NodeIdNodeMapVec);
146impl_vec_debug!(NodeIdNodeMap, NodeIdNodeMapVec);
147
148#[derive(Debug, Copy, Clone)]
149#[repr(C)]
150pub enum NodeGraphStyle {
151    Default,
152    // to be extended
153}
154
155/// User-provided callbacks for node graph interaction events.
156#[derive(Default, Debug, Clone)]
157#[repr(C)]
158pub struct NodeGraphCallbacks {
159    pub on_node_added: OptionOnNodeAdded,
160    pub on_node_removed: OptionOnNodeRemoved,
161    pub on_node_dragged: OptionOnNodeDragged,
162    pub on_node_graph_dragged: OptionOnNodeGraphDragged,
163    pub on_node_connected: OptionOnNodeConnected,
164    pub on_node_input_disconnected: OptionOnNodeInputDisconnected,
165    pub on_node_output_disconnected: OptionOnNodeOutputDisconnected,
166    pub on_node_field_edited: OptionOnNodeFieldEdited,
167}
168
169pub type OnNodeAddedCallbackType = extern "C" fn(
170    refany: RefAny,
171    info: CallbackInfo,
172    new_node_type: NodeTypeId,
173    new_node_id: NodeGraphNodeId,
174    new_node_position: NodeGraphNodePosition,
175) -> Update;
176impl_widget_callback!(
177    OnNodeAdded,
178    OptionOnNodeAdded,
179    OnNodeAddedCallback,
180    OnNodeAddedCallbackType
181);
182
183pub type OnNodeRemovedCallbackType =
184    extern "C" fn(refany: RefAny, info: CallbackInfo, node_id_to_remove: NodeGraphNodeId) -> Update;
185impl_widget_callback!(
186    OnNodeRemoved,
187    OptionOnNodeRemoved,
188    OnNodeRemovedCallback,
189    OnNodeRemovedCallbackType
190);
191
192pub type OnNodeGraphDraggedCallbackType =
193    extern "C" fn(refany: RefAny, info: CallbackInfo, drag_amount: GraphDragAmount) -> Update;
194impl_widget_callback!(
195    OnNodeGraphDragged,
196    OptionOnNodeGraphDragged,
197    OnNodeGraphDraggedCallback,
198    OnNodeGraphDraggedCallbackType
199);
200
201pub type OnNodeDraggedCallbackType = extern "C" fn(
202    refany: RefAny,
203    info: CallbackInfo,
204    node_dragged: NodeGraphNodeId,
205    drag_amount: NodeDragAmount,
206) -> Update;
207impl_widget_callback!(
208    OnNodeDragged,
209    OptionOnNodeDragged,
210    OnNodeDraggedCallback,
211    OnNodeDraggedCallbackType
212);
213
214pub type OnNodeConnectedCallbackType = extern "C" fn(
215    refany: RefAny,
216    info: CallbackInfo,
217    input: NodeGraphNodeId,
218    input_index: usize,
219    output: NodeGraphNodeId,
220    output_index: usize,
221) -> Update;
222impl_widget_callback!(
223    OnNodeConnected,
224    OptionOnNodeConnected,
225    OnNodeConnectedCallback,
226    OnNodeConnectedCallbackType
227);
228
229pub type OnNodeInputDisconnectedCallbackType = extern "C" fn(
230    refany: RefAny,
231    info: CallbackInfo,
232    input: NodeGraphNodeId,
233    input_index: usize,
234) -> Update;
235impl_widget_callback!(
236    OnNodeInputDisconnected,
237    OptionOnNodeInputDisconnected,
238    OnNodeInputDisconnectedCallback,
239    OnNodeInputDisconnectedCallbackType
240);
241
242pub type OnNodeOutputDisconnectedCallbackType = extern "C" fn(
243    refany: RefAny,
244    info: CallbackInfo,
245    output: NodeGraphNodeId,
246    output_index: usize,
247) -> Update;
248impl_widget_callback!(
249    OnNodeOutputDisconnected,
250    OptionOnNodeOutputDisconnected,
251    OnNodeOutputDisconnectedCallback,
252    OnNodeOutputDisconnectedCallbackType
253);
254
255pub type OnNodeFieldEditedCallbackType = extern "C" fn(
256    refany: RefAny,
257    info: CallbackInfo,
258    node_id: NodeGraphNodeId,
259    field_id: usize,
260    node_type: NodeTypeId,
261    new_value: NodeTypeFieldValue,
262) -> Update;
263impl_widget_callback!(
264    OnNodeFieldEdited,
265    OptionOnNodeFieldEdited,
266    OnNodeFieldEditedCallback,
267    OnNodeFieldEditedCallbackType
268);
269
270/// Unique identifier for an input/output port type.
271#[derive(Debug, Copy, Clone, PartialEq, Eq, PartialOrd, Ord, Hash)]
272#[repr(C)]
273pub struct InputOutputTypeId {
274    pub inner: u64,
275}
276
277impl_option!(InputOutputTypeId, OptionInputOutputTypeId, copy = false, [Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Hash]);
278impl_vec!(InputOutputTypeId, InputOutputTypeIdVec, InputOutputTypeIdVecDestructor, InputOutputTypeIdVecDestructorType, InputOutputTypeIdVecSlice, OptionInputOutputTypeId);
279impl_vec_clone!(
280    InputOutputTypeId,
281    InputOutputTypeIdVec,
282    InputOutputTypeIdVecDestructor
283);
284impl_vec_mut!(InputOutputTypeId, InputOutputTypeIdVec);
285impl_vec_debug!(InputOutputTypeId, InputOutputTypeIdVec);
286
287/// Unique identifier for a node type (e.g. "Add", "Multiply").
288#[derive(Debug, Copy, Clone, PartialEq, Eq, PartialOrd, Ord, Hash)]
289#[repr(C)]
290pub struct NodeTypeId {
291    pub inner: u64,
292}
293
294/// Unique identifier for a node instance within the graph.
295#[derive(Debug, Copy, Clone, PartialEq, Eq, PartialOrd, Ord, Hash)]
296#[repr(C)]
297pub struct NodeGraphNodeId {
298    pub inner: u64,
299}
300
301/// A single node with typed input/output connections and editable fields.
302#[derive(Debug, Clone)]
303#[repr(C)]
304pub struct Node {
305    pub node_type: NodeTypeId,
306    pub position: NodeGraphNodePosition,
307    pub fields: NodeTypeFieldVec,
308    pub connect_in: InputConnectionVec,
309    pub connect_out: OutputConnectionVec,
310}
311
312/// A key-value field on a node (e.g. a text input labelled "Name").
313#[derive(Debug, Clone)]
314#[repr(C)]
315pub struct NodeTypeField {
316    pub key: AzString,
317    pub value: NodeTypeFieldValue,
318}
319
320impl_option!(NodeTypeField, OptionNodeTypeField, copy = false, [Debug, Clone]);
321impl_vec!(NodeTypeField, NodeTypeFieldVec, NodeTypeFieldVecDestructor, NodeTypeFieldVecDestructorType, NodeTypeFieldVecSlice, OptionNodeTypeField);
322impl_vec_clone!(NodeTypeField, NodeTypeFieldVec, NodeTypeFieldVecDestructor);
323impl_vec_debug!(NodeTypeField, NodeTypeFieldVec);
324impl_vec_mut!(NodeTypeField, NodeTypeFieldVec);
325
326/// The value of a node field, determining which widget is rendered.
327#[derive(Debug, Clone)]
328#[repr(C, u8)]
329pub enum NodeTypeFieldValue {
330    TextInput(AzString),
331    NumberInput(f32),
332    CheckBox(bool),
333    ColorInput(ColorU),
334    FileInput(OptionString),
335}
336
337/// An input port's connections to one or more output ports on other nodes.
338#[derive(Debug, Clone)]
339#[repr(C)]
340pub struct InputConnection {
341    pub input_index: usize,
342    pub connects_to: OutputNodeAndIndexVec,
343}
344
345impl_option!(InputConnection, OptionInputConnection, copy = false, [Debug, Clone]);
346impl_vec!(InputConnection, InputConnectionVec, InputConnectionVecDestructor, InputConnectionVecDestructorType, InputConnectionVecSlice, OptionInputConnection);
347impl_vec_clone!(
348    InputConnection,
349    InputConnectionVec,
350    InputConnectionVecDestructor
351);
352impl_vec_debug!(InputConnection, InputConnectionVec);
353impl_vec_mut!(InputConnection, InputConnectionVec);
354
355/// Reference to a specific output port on a node.
356#[derive(Copy, Debug, Clone)]
357#[repr(C)]
358pub struct OutputNodeAndIndex {
359    pub node_id: NodeGraphNodeId,
360    pub output_index: usize,
361}
362
363impl_option!(OutputNodeAndIndex, OptionOutputNodeAndIndex, copy = false, [Debug, Clone]);
364impl_vec!(OutputNodeAndIndex, OutputNodeAndIndexVec, OutputNodeAndIndexVecDestructor, OutputNodeAndIndexVecDestructorType, OutputNodeAndIndexVecSlice, OptionOutputNodeAndIndex);
365impl_vec_clone!(
366    OutputNodeAndIndex,
367    OutputNodeAndIndexVec,
368    OutputNodeAndIndexVecDestructor
369);
370impl_vec_debug!(OutputNodeAndIndex, OutputNodeAndIndexVec);
371impl_vec_mut!(OutputNodeAndIndex, OutputNodeAndIndexVec);
372
373/// An output port's connections to one or more input ports on other nodes.
374#[derive(Debug, Clone)]
375#[repr(C)]
376pub struct OutputConnection {
377    pub output_index: usize,
378    pub connects_to: InputNodeAndIndexVec,
379}
380
381impl_option!(OutputConnection, OptionOutputConnection, copy = false, [Debug, Clone]);
382impl_vec!(OutputConnection, OutputConnectionVec, OutputConnectionVecDestructor, OutputConnectionVecDestructorType, OutputConnectionVecSlice, OptionOutputConnection);
383impl_vec_clone!(
384    OutputConnection,
385    OutputConnectionVec,
386    OutputConnectionVecDestructor
387);
388impl_vec_debug!(OutputConnection, OutputConnectionVec);
389impl_vec_mut!(OutputConnection, OutputConnectionVec);
390
391/// Reference to a specific input port on a node.
392#[derive(Copy, Debug, Clone, PartialEq, Eq)]
393#[repr(C)]
394pub struct InputNodeAndIndex {
395    pub node_id: NodeGraphNodeId,
396    pub input_index: usize,
397}
398
399impl_option!(InputNodeAndIndex, OptionInputNodeAndIndex, copy = false, [Debug, Clone]);
400impl_vec!(InputNodeAndIndex, InputNodeAndIndexVec, InputNodeAndIndexVecDestructor, InputNodeAndIndexVecDestructorType, InputNodeAndIndexVecSlice, OptionInputNodeAndIndex);
401impl_vec_clone!(
402    InputNodeAndIndex,
403    InputNodeAndIndexVec,
404    InputNodeAndIndexVecDestructor
405);
406impl_vec_debug!(InputNodeAndIndex, InputNodeAndIndexVec);
407impl_vec_mut!(InputNodeAndIndex, InputNodeAndIndexVec);
408
409/// Metadata describing a node type and its I/O port configuration.
410#[derive(Debug, Clone)]
411#[repr(C)]
412pub struct NodeTypeInfo {
413    /// Whether this node type is a "root" type
414    pub is_root: bool,
415    /// Name of the node type
416    pub node_type_name: AzString,
417    /// List of inputs for this node
418    pub inputs: InputOutputTypeIdVec,
419    /// List of outputs for this node
420    pub outputs: InputOutputTypeIdVec,
421}
422
423/// Display metadata for an input/output port type (name and color).
424#[derive(Debug, Clone)]
425#[repr(C)]
426pub struct InputOutputInfo {
427    /// Data type of this input / output
428    pub data_type: AzString,
429    /// Which color to use for the input / output
430    pub color: ColorU,
431}
432
433/// Things only relevant to the display of the node in an interactive editor
434/// - such as x and y position in the node graph, name, etc.
435#[derive(Debug, Copy, Clone)]
436#[repr(C)]
437pub struct NodeGraphNodePosition {
438    /// X Position of the node
439    pub x: f32,
440    /// Y Position of the node
441    pub y: f32,
442}
443
444#[derive(Debug, Copy, Clone, PartialEq, Eq)]
445#[repr(C)]
446pub enum NodeGraphError {
447    /// MIME type is not the same (for example: connection "spatialdata/point"
448    /// with a node that expects "spatialdata/line")
449    NodeMimeTypeMismatch,
450    /// Invalid index when accessing a node in / output
451    NodeInvalidIndex,
452    /// The in-/ output matching encountered a non-existing hash to a node that doesn't exist
453    NodeInvalidNode,
454    /// Root node is missing from the graph tree
455    NoRootNode,
456}
457
458impl fmt::Display for NodeGraphError {
459    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
460        use self::NodeGraphError::{NodeMimeTypeMismatch, NodeInvalidIndex, NodeInvalidNode, NoRootNode};
461        match self {
462            NodeMimeTypeMismatch => write!(f, "MIME type mismatch"),
463            NodeInvalidIndex => write!(f, "Invalid node index"),
464            NodeInvalidNode => write!(f, "Invalid node"),
465            NoRootNode => write!(f, "No root node found"),
466        }
467    }
468}
469
470/// Amount (in logical pixels) the entire graph was dragged.
471#[derive(Debug, Copy, Clone, PartialEq)]
472#[repr(C)]
473pub struct GraphDragAmount {
474    pub x: f32,
475    pub y: f32,
476}
477
478/// Amount (in logical pixels) a single node was dragged.
479#[derive(Debug, Copy, Clone, PartialEq)]
480#[repr(C)]
481pub struct NodeDragAmount {
482    pub x: f32,
483    pub y: f32,
484}
485
486impl NodeGraph {
487    #[must_use]
488    pub fn swap_with_default(&mut self) -> Self {
489        let mut default = Self::default();
490        ::core::mem::swap(&mut default, self);
491        default
492    }
493
494    /// Connects the current nodes input with another nodes output
495    ///
496    /// ## Inputs
497    ///
498    /// - `output_node_id`: The ID of the output node (index in the `NodeGraphs` internal `BTree`)
499    /// - `output_index`: The index of the output *on the output node*
500    /// - `input_node_id`: Same as `output_node_id`, but for the input node
501    /// - `input_index`: Same as `output_index`, but for the input node
502    ///
503    /// ## Returns
504    ///
505    /// One of:
506    ///
507    /// - `NodeGraphError::NodeInvalidNode`: One of the input nodes does not exist
508    /// - `NodeGraphError::NodeInvalidIndex`: One node has an invalid `output` or `input` index
509    /// - `NodeGraphError::NodeMimeTypeMismatch`: The types of two connected `outputs` and `inputs`
510    ///   aren't the same
511    /// - `Ok(())`: The connection was established successfully.
512    fn connect_input_output(
513        &mut self,
514        input_node_id: NodeGraphNodeId,
515        input_index: usize,
516        output_node_id: NodeGraphNodeId,
517        output_index: usize,
518    ) -> Result<(), NodeGraphError> {
519        // Verify that the node type of the connection matches
520        self.verify_nodetype_match(output_node_id, output_index, input_node_id, input_index)?;
521
522        // connect input -> output
523        if let Some(input_node) = self
524            .nodes
525            .as_mut()
526            .iter_mut()
527            .find(|i| i.node_id == input_node_id)
528        {
529            if let Some(position) = input_node
530                .node
531                .connect_in
532                .as_ref()
533                .iter()
534                .position(|i| i.input_index == input_index)
535            {
536                input_node.node.connect_in.as_mut()[position]
537                    .connects_to
538                    .push(OutputNodeAndIndex {
539                        node_id: output_node_id,
540                        output_index,
541                    });
542            } else {
543                input_node.node.connect_in.push(InputConnection {
544                    input_index,
545                    connects_to: vec![OutputNodeAndIndex {
546                        node_id: output_node_id,
547                        output_index,
548                    }]
549                    .into(),
550                });
551            }
552        } else {
553            return Err(NodeGraphError::NodeInvalidNode);
554        }
555
556        // connect output -> input
557        if let Some(output_node) = self
558            .nodes
559            .as_mut()
560            .iter_mut()
561            .find(|i| i.node_id == output_node_id)
562        {
563            if let Some(position) = output_node
564                .node
565                .connect_out
566                .as_ref()
567                .iter()
568                .position(|i| i.output_index == output_index)
569            {
570                output_node.node.connect_out.as_mut()[position]
571                    .connects_to
572                    .push(InputNodeAndIndex {
573                        node_id: input_node_id,
574                        input_index,
575                    });
576            } else {
577                output_node.node.connect_out.push(OutputConnection {
578                    output_index,
579                    connects_to: vec![InputNodeAndIndex {
580                        node_id: input_node_id,
581                        input_index,
582                    }]
583                    .into(),
584                });
585            }
586        } else {
587            return Err(NodeGraphError::NodeInvalidNode);
588        }
589
590        Ok(())
591    }
592
593    /// Disconnect an input if it is connected to an output
594    ///
595    /// # Inputs
596    ///
597    /// - `input_node_id`: The ID of the input node (index in the `NodeGraphs` internal `BTree`)
598    /// - `input_index`: The index of the input *on the input node*
599    ///
600    /// # Returns
601    ///
602    /// - `Err(NodeGraphError::NodeInvalidNode)`: The node at index `input_node_id` does not
603    ///   exist
604    /// - `Err(NodeGraphError::NodeInvalidIndex)`: One node has an invalid `input` or `output`
605    ///   index
606    /// - `Err(NodeGraphError::NodeMimeTypeMismatch)`: The types of two connected `input` and
607    ///   `output` do not match
608    /// - `Ok(())`: The disconnection completed successfully.
609    fn disconnect_input(
610        &mut self,
611        input_node_id: NodeGraphNodeId,
612        input_index: usize,
613    ) -> Result<(), NodeGraphError> {
614        let output_connections = {
615            let input_node = self
616                .nodes
617                .as_ref()
618                .iter()
619                .find(|i| i.node_id == input_node_id)
620                .ok_or(NodeGraphError::NodeInvalidNode)?;
621
622            match input_node
623                .node
624                .connect_in
625                .iter()
626                .find(|i| i.input_index == input_index)
627            {
628                None => return Ok(()),
629                Some(s) => s.connects_to.clone(),
630            }
631        };
632
633        // for every output that this input was connected to...
634        for OutputNodeAndIndex {
635            node_id,
636            output_index,
637        } in output_connections.as_ref()
638        {
639            let output_node_id = *node_id;
640            let output_index = *output_index;
641
642            // verify that the node type of the connection matches
643            self.verify_nodetype_match(
644                output_node_id,
645                output_index,
646                input_node_id,
647                input_index,
648            )?;
649
650            // disconnect input -> output
651
652            if let Some(input_node) = self
653                .nodes
654                .as_mut()
655                .iter_mut()
656                .find(|i| i.node_id == input_node_id)
657            {
658                if let Some(position) = input_node
659                    .node
660                    .connect_in
661                    .iter()
662                    .position(|i| i.input_index == input_index)
663                {
664                    input_node.node.connect_in.remove(position);
665                }
666            } else {
667                return Err(NodeGraphError::NodeInvalidNode);
668            }
669
670            if let Some(output_node) = self
671                .nodes
672                .as_mut()
673                .iter_mut()
674                .find(|i| i.node_id == output_node_id)
675            {
676                if let Some(position) = output_node
677                    .node
678                    .connect_out
679                    .iter()
680                    .position(|i| i.output_index == output_index)
681                {
682                    output_node.node.connect_out.remove(position);
683                }
684            } else {
685                return Err(NodeGraphError::NodeInvalidNode);
686            }
687        }
688
689        Ok(())
690    }
691
692    /// Disconnect an output if it is connected to an input
693    ///
694    /// # Inputs
695    ///
696    /// - `output_node_id`: The ID of the output node (index in the `NodeGraphs` internal `BTree`)
697    /// - `output_index`: The index of the output *on the output node*
698    ///
699    /// # Returns
700    ///
701    /// - `Err(NodeGraphError::NodeInvalidNode)`: The node at index `output_node_id` does not exist
702    /// - `Err(NodeGraphError::NodeInvalidIndex)`: One node has an invalid `input` or `output` index
703    /// - `Err(NodeGraphError::NodeMimeTypeMismatch)`: The types of two connected `input` and
704    ///   `output` do not match
705    /// - `Ok(())`: The disconnection completed successfully.
706    fn disconnect_output(
707        &mut self,
708        output_node_id: NodeGraphNodeId,
709        output_index: usize,
710    ) -> Result<(), NodeGraphError> {
711        let input_connections = {
712            let output_node = self
713                .nodes
714                .as_ref()
715                .iter()
716                .find(|i| i.node_id == output_node_id)
717                .ok_or(NodeGraphError::NodeInvalidNode)?;
718
719            match output_node
720                .node
721                .connect_out
722                .iter()
723                .find(|i| i.output_index == output_index)
724            {
725                None => return Ok(()),
726                Some(s) => s.connects_to.clone(),
727            }
728        };
729
730        for InputNodeAndIndex {
731            node_id,
732            input_index,
733        } in &input_connections
734        {
735            let input_node_id = *node_id;
736            let input_index = *input_index;
737
738            // verify that the node type of the connection matches
739            self.verify_nodetype_match(
740                output_node_id,
741                output_index,
742                input_node_id,
743                input_index,
744            )?;
745
746            if let Some(output_node) = self
747                .nodes
748                .as_mut()
749                .iter_mut()
750                .find(|i| i.node_id == output_node_id)
751            {
752                if let Some(position) = output_node
753                    .node
754                    .connect_out
755                    .iter()
756                    .position(|i| i.output_index == output_index)
757                {
758                    output_node.node.connect_out.remove(position);
759                }
760            } else {
761                return Err(NodeGraphError::NodeInvalidNode);
762            }
763
764            if let Some(input_node) = self
765                .nodes
766                .as_mut()
767                .iter_mut()
768                .find(|i| i.node_id == input_node_id)
769            {
770                if let Some(position) = input_node
771                    .node
772                    .connect_in
773                    .iter()
774                    .position(|i| i.input_index == input_index)
775                {
776                    input_node.node.connect_in.remove(position);
777                }
778            } else {
779                return Err(NodeGraphError::NodeInvalidNode);
780            }
781        }
782
783        Ok(())
784    }
785
786    /// Verifies that the node types of two connections match
787    fn verify_nodetype_match(
788        &self,
789        output_node_id: NodeGraphNodeId,
790        output_index: usize,
791        input_node_id: NodeGraphNodeId,
792        input_index: usize,
793    ) -> Result<(), NodeGraphError> {
794        let output_node = self
795            .nodes
796            .iter()
797            .find(|i| i.node_id == output_node_id)
798            .ok_or(NodeGraphError::NodeInvalidNode)?;
799
800        let output_node_type = self
801            .node_types
802            .iter()
803            .find(|i| i.node_type_id == output_node.node.node_type)
804            .ok_or(NodeGraphError::NodeInvalidNode)?;
805
806        let output_type = output_node_type
807            .node_type_info
808            .outputs
809            .as_ref()
810            .get(output_index)
811            .copied()
812            .ok_or(NodeGraphError::NodeInvalidIndex)?;
813
814        let input_node = self
815            .nodes
816            .iter()
817            .find(|i| i.node_id == input_node_id)
818            .ok_or(NodeGraphError::NodeInvalidNode)?;
819
820        let input_node_type = self
821            .node_types
822            .iter()
823            .find(|i| i.node_type_id == input_node.node.node_type)
824            .ok_or(NodeGraphError::NodeInvalidNode)?;
825
826        let input_type = input_node_type
827            .node_type_info
828            .inputs
829            .as_ref()
830            .get(input_index)
831            .copied()
832            .ok_or(NodeGraphError::NodeInvalidIndex)?;
833
834        // Input / Output do not have the same TypeId
835        if input_type != output_type {
836            return Err(NodeGraphError::NodeMimeTypeMismatch);
837        }
838
839        Ok(())
840    }
841
842    #[allow(clippy::too_many_lines)] // large but cohesive: single-purpose layout/render/parse routine (one branch per case)
843    #[must_use] pub fn dom(self) -> Dom {
844        static NODEGRAPH_CLASS: &[IdOrClass] = &[Class(AzString::from_const_str("nodegraph"))];
845
846        static NODEGRAPH_BACKGROUND: &[StyleBackgroundContent] = &[StyleBackgroundContent::Image(
847            AzString::from_const_str("nodegraph-background"),
848        )];
849
850        static NODEGRAPH_NODES_CONTAINER_CLASS: &[IdOrClass] =
851            &[Class(AzString::from_const_str("nodegraph-nodes-container"))];
852
853        static NODEGRAPH_NODES_CONTAINER_PROPS: &[CssPropertyWithConditions] = &[
854            CssPropertyWithConditions::simple(CssProperty::flex_grow(LayoutFlexGrow::const_new(1))),
855            CssPropertyWithConditions::simple(CssProperty::position(LayoutPosition::Absolute)),
856        ];
857
858        let nodegraph_wrapper_props = vec![
859            CssPropertyWithConditions::simple(CssProperty::overflow_x(LayoutOverflow::Hidden)),
860            CssPropertyWithConditions::simple(CssProperty::overflow_y(LayoutOverflow::Hidden)),
861            CssPropertyWithConditions::simple(CssProperty::flex_grow(LayoutFlexGrow::const_new(1))),
862            CssPropertyWithConditions::simple(CssProperty::background_content(
863                StyleBackgroundContentVec::from_const_slice(NODEGRAPH_BACKGROUND),
864            )),
865            CssPropertyWithConditions::simple(CssProperty::background_repeat(
866                vec![StyleBackgroundRepeat::PatternRepeat].into(),
867            )),
868            CssPropertyWithConditions::simple(CssProperty::background_position(
869                vec![StyleBackgroundPosition {
870                    horizontal: BackgroundPositionHorizontal::Exact(PixelValue::const_px(0)),
871                    vertical: BackgroundPositionVertical::Exact(PixelValue::const_px(0)),
872                }]
873                .into(),
874            )),
875        ];
876
877        let nodegraph_props = vec![
878            CssPropertyWithConditions::simple(CssProperty::overflow_x(LayoutOverflow::Hidden)),
879            CssPropertyWithConditions::simple(CssProperty::overflow_y(LayoutOverflow::Hidden)),
880            CssPropertyWithConditions::simple(CssProperty::flex_grow(LayoutFlexGrow::const_new(1))),
881            CssPropertyWithConditions::simple(CssProperty::position(LayoutPosition::Relative)),
882        ];
883
884        let node_connection_marker = RefAny::new(NodeConnectionMarkerDataset {});
885
886        let node_graph_local_dataset = RefAny::new(NodeGraphLocalDataset {
887            node_graph: self.clone(), // TODO: expensive
888            last_input_or_output_clicked: None,
889            active_node_being_dragged: None,
890            node_connection_marker: node_connection_marker.clone(),
891            callbacks: self.callbacks.clone(),
892        });
893
894        let context_menu = Menu::create(
895            vec![MenuItem::String(
896                StringMenuItem::create(self.add_node_str.clone()).with_children(
897                    self.node_types
898                        .iter()
899                        .map(
900                            |NodeTypeIdInfoMap {
901                                 node_type_id,
902                                 node_type_info,
903                             }| {
904                                let context_menu_local_dataset =
905                                    RefAny::new(ContextMenuEntryLocalDataset {
906                                        node_type: *node_type_id,
907                                        // RefAny<NodeGraphLocalDataset>
908                                        backref: node_graph_local_dataset.clone(),
909                                    });
910
911                                MenuItem::String(
912                                    StringMenuItem::create(
913                                        node_type_info.node_type_name.clone(),
914                                    )
915                                    .with_callback(
916                                        context_menu_local_dataset,
917                                        nodegraph_context_menu_click as usize,
918                                    ),
919                                )
920                            },
921                        )
922                        .collect::<Vec<_>>()
923                        .into(),
924                ),
925            )]
926            .into(),
927        );
928
929        Dom::create_div()
930            .with_css_props(nodegraph_wrapper_props.into())
931            .with_context_menu(context_menu)
932            .with_children(
933                vec![Dom::create_div()
934                    .with_ids_and_classes(IdOrClassVec::from_const_slice(NODEGRAPH_CLASS))
935                    .with_css_props(nodegraph_props.into())
936                    .with_callbacks(
937                        vec![
938                            CoreCallbackData {
939                                event: EventFilter::Hover(HoverEventFilter::MouseOver),
940                                refany: node_graph_local_dataset.clone(),
941                                callback: CoreCallback {
942                                    cb: nodegraph_drag_graph_or_nodes as usize,
943                                    ctx: OptionRefAny::None,
944                                },
945                            },
946                            CoreCallbackData {
947                                event: EventFilter::Hover(HoverEventFilter::LeftMouseUp),
948                                refany: node_graph_local_dataset.clone(),
949                                callback: CoreCallback {
950                                    cb: nodegraph_unset_active_node as usize,
951                                    ctx: OptionRefAny::None,
952                                },
953                            },
954                        ]
955                        .into(),
956                    )
957                    .with_children({
958                        vec![
959                            // connections
960                            render_connections(&self, node_connection_marker),
961                            // nodes
962                            self.nodes
963                                .iter()
964                                .filter_map(|NodeIdNodeMap { node_id, node }| {
965                                    let node_type_info = self
966                                        .node_types
967                                        .iter()
968                                        .find(|i| i.node_type_id == node.node_type)?;
969                                    let node_local_dataset = NodeLocalDataset {
970                                        node_id: *node_id,
971                                        backref: node_graph_local_dataset.clone(),
972                                    };
973
974                                    Some(render_node(
975                                        node,
976                                        (self.offset.x, self.offset.y),
977                                        &node_type_info.node_type_info,
978                                        node_local_dataset,
979                                        self.scale_factor,
980                                    ))
981                                })
982                                .collect::<Dom>()
983                                .with_ids_and_classes(IdOrClassVec::from_const_slice(
984                                    NODEGRAPH_NODES_CONTAINER_CLASS,
985                                ))
986                                .with_css_props(CssPropertyWithConditionsVec::from_const_slice(
987                                    NODEGRAPH_NODES_CONTAINER_PROPS,
988                                )),
989                        ]
990                        .into()
991                    })]
992                .into(),
993            )
994            .with_dataset(Some(node_graph_local_dataset).into())
995    }
996}
997
998// dataset set on the top-level nodegraph node,
999// containing all the state of the node graph
1000struct NodeGraphLocalDataset {
1001    node_graph: NodeGraph,
1002    last_input_or_output_clicked: Option<(NodeGraphNodeId, InputOrOutput)>,
1003    // Ref<NodeLocalDataSet> - used as a marker for getting the visual node ID
1004    active_node_being_dragged: Option<(NodeGraphNodeId, RefAny)>,
1005    node_connection_marker: RefAny, // Ref<NodeConnectionMarkerDataset>
1006    callbacks: NodeGraphCallbacks,
1007}
1008
1009struct ContextMenuEntryLocalDataset {
1010    node_type: NodeTypeId,
1011    backref: RefAny, // RefAny<NodeGraphLocalDataset>
1012}
1013
1014struct NodeConnectionMarkerDataset {}
1015
1016struct NodeLocalDataset {
1017    node_id: NodeGraphNodeId,
1018    backref: RefAny, // RefAny<NodeGraphLocalDataset>
1019}
1020
1021#[derive(Debug, Copy, Clone)]
1022enum InputOrOutput {
1023    Input(usize),
1024    Output(usize),
1025}
1026
1027struct NodeInputOutputLocalDataset {
1028    io_id: InputOrOutput,
1029    backref: RefAny, // RefAny<NodeLocalDataset>
1030}
1031
1032struct NodeFieldLocalDataset {
1033    field_idx: usize,
1034    backref: RefAny, // RefAny<NodeLocalDataset>
1035}
1036
1037#[derive(Copy, Clone)]
1038struct ConnectionLocalDataset {
1039    out_node_id: NodeGraphNodeId,
1040    out_idx: usize,
1041    in_node_id: NodeGraphNodeId,
1042    in_idx: usize,
1043    swap_vert: bool,
1044    swap_horz: bool,
1045    color: ColorU,
1046}
1047
1048#[allow(clippy::float_cmp)] // intentional exact compare: change-detection / identity fast-path / cache-key match
1049#[allow(clippy::too_many_lines)] // large but cohesive: single-purpose layout/render/parse routine (one branch per case)
1050fn render_node(
1051    node: &Node,
1052    graph_offset: (f32, f32),
1053    node_info: &NodeTypeInfo,
1054    mut node_local_dataset: NodeLocalDataset,
1055    scale_factor: f32,
1056) -> Dom {
1057    use azul_core::dom::{
1058        CssPropertyWithConditions, CssPropertyWithConditionsVec, Dom, DomVec, IdOrClass,
1059        IdOrClass::Class, IdOrClassVec,
1060    };
1061    #[allow(clippy::wildcard_imports)] // widget/render module pulls in the css property/value types it builds with
1062    use azul_css::*;
1063
1064    const STRING_9416190750059025162: AzString = AzString::from_const_str("Material Icons");
1065    const STRING_16146701490593874959: AzString = AzString::from_const_str("system:ui");
1066    const STYLE_BACKGROUND_CONTENT_524016094839686509_ITEMS: &[StyleBackgroundContent] =
1067        &[StyleBackgroundContent::Color(ColorU {
1068            r: 34,
1069            g: 34,
1070            b: 34,
1071            a: 255,
1072        })];
1073    const STYLE_BACKGROUND_CONTENT_10430246856047584562_ITEMS: &[StyleBackgroundContent] =
1074        &[StyleBackgroundContent::LinearGradient(LinearGradient {
1075            direction: Direction::FromTo(DirectionCorners {
1076                dir_from: DirectionCorner::Left,
1077                dir_to: DirectionCorner::Right,
1078            }),
1079            extend_mode: ExtendMode::Clamp,
1080            stops: NormalizedLinearColorStopVec::from_const_slice(
1081                LINEAR_COLOR_STOP_4373556077110009258_ITEMS,
1082            ),
1083        })];
1084    const STYLE_BACKGROUND_CONTENT_11535310356736632656_ITEMS: &[StyleBackgroundContent] =
1085        &[StyleBackgroundContent::RadialGradient(RadialGradient {
1086            shape: Shape::Ellipse,
1087            extend_mode: ExtendMode::Clamp,
1088            position: StyleBackgroundPosition {
1089                horizontal: BackgroundPositionHorizontal::Left,
1090                vertical: BackgroundPositionVertical::Top,
1091            },
1092            size: RadialGradientSize::FarthestCorner,
1093            stops: NormalizedLinearColorStopVec::from_const_slice(
1094                LINEAR_COLOR_STOP_15596411095679453272_ITEMS,
1095            ),
1096        })];
1097    const STYLE_BACKGROUND_CONTENT_11936041127084538304_ITEMS: &[StyleBackgroundContent] =
1098        &[StyleBackgroundContent::LinearGradient(LinearGradient {
1099            direction: Direction::FromTo(DirectionCorners {
1100                dir_from: DirectionCorner::Right,
1101                dir_to: DirectionCorner::Left,
1102            }),
1103            extend_mode: ExtendMode::Clamp,
1104            stops: NormalizedLinearColorStopVec::from_const_slice(
1105                LINEAR_COLOR_STOP_4373556077110009258_ITEMS,
1106            ),
1107        })];
1108    const STYLE_BACKGROUND_CONTENT_15813232491335471489_ITEMS: &[StyleBackgroundContent] =
1109        &[StyleBackgroundContent::Color(ColorU {
1110            r: 0,
1111            g: 0,
1112            b: 0,
1113            a: 85,
1114        })];
1115    const STYLE_BACKGROUND_CONTENT_17648039690071193942_ITEMS: &[StyleBackgroundContent] =
1116        &[StyleBackgroundContent::LinearGradient(LinearGradient {
1117            direction: Direction::FromTo(DirectionCorners {
1118                dir_from: DirectionCorner::Top,
1119                dir_to: DirectionCorner::Bottom,
1120            }),
1121            extend_mode: ExtendMode::Clamp,
1122            stops: NormalizedLinearColorStopVec::from_const_slice(
1123                LINEAR_COLOR_STOP_7397113864565941600_ITEMS,
1124            ),
1125        })];
1126    const STYLE_TRANSFORM_347117342922946953_ITEMS: &[StyleTransform] =
1127        &[StyleTransform::Translate(StyleTransformTranslate2D {
1128            x: PixelValue::const_px(200),
1129            y: PixelValue::const_px(100),
1130        })];
1131    const STYLE_TRANSFORM_14683950870521466298_ITEMS: &[StyleTransform] =
1132        &[StyleTransform::Translate(StyleTransformTranslate2D {
1133            x: PixelValue::const_px(240),
1134            y: PixelValue::const_px(-10),
1135        })];
1136    const STYLE_FONT_FAMILY_8122988506401935406_ITEMS: &[StyleFontFamily] =
1137        &[StyleFontFamily::System(STRING_16146701490593874959)];
1138    const STYLE_FONT_FAMILY_11383897783350685780_ITEMS: &[StyleFontFamily] =
1139        &[StyleFontFamily::System(STRING_9416190750059025162)];
1140    const LINEAR_COLOR_STOP_4373556077110009258_ITEMS: &[NormalizedLinearColorStop] = &[
1141        NormalizedLinearColorStop {
1142            offset: PercentageValue::const_new(20),
1143            color: ColorOrSystem::color(ColorU {
1144                r: 0,
1145                g: 0,
1146                b: 0,
1147                a: 204,
1148            }),
1149        },
1150        NormalizedLinearColorStop {
1151            offset: PercentageValue::const_new(100),
1152            color: ColorOrSystem::color(ColorU {
1153                r: 0,
1154                g: 0,
1155                b: 0,
1156                a: 0,
1157            }),
1158        },
1159    ];
1160    const LINEAR_COLOR_STOP_7397113864565941600_ITEMS: &[NormalizedLinearColorStop] = &[
1161        NormalizedLinearColorStop {
1162            offset: PercentageValue::const_new(0),
1163            color: ColorOrSystem::color(ColorU {
1164                r: 229,
1165                g: 57,
1166                b: 53,
1167                a: 255,
1168            }),
1169        },
1170        NormalizedLinearColorStop {
1171            offset: PercentageValue::const_new(100),
1172            color: ColorOrSystem::color(ColorU {
1173                r: 227,
1174                g: 93,
1175                b: 91,
1176                a: 255,
1177            }),
1178        },
1179    ];
1180    const LINEAR_COLOR_STOP_15596411095679453272_ITEMS: &[NormalizedLinearColorStop] = &[
1181        NormalizedLinearColorStop {
1182            offset: PercentageValue::const_new(0),
1183            color: ColorOrSystem::color(ColorU {
1184                r: 47,
1185                g: 49,
1186                b: 54,
1187                a: 255,
1188            }),
1189        },
1190        NormalizedLinearColorStop {
1191            offset: PercentageValue::const_new(50),
1192            color: ColorOrSystem::color(ColorU {
1193                r: 47,
1194                g: 49,
1195                b: 54,
1196                a: 255,
1197            }),
1198        },
1199        NormalizedLinearColorStop {
1200            offset: PercentageValue::const_new(100),
1201            color: ColorOrSystem::color(ColorU {
1202                r: 32,
1203                g: 34,
1204                b: 37,
1205                a: 255,
1206            }),
1207        },
1208    ];
1209
1210    const CSS_MATCH_10339190304804100510_PROPERTIES: &[CssPropertyWithConditions] = &[
1211        // .node_output_wrapper
1212        CssPropertyWithConditions::simple(CssProperty::Display(LayoutDisplayValue::Exact(
1213            LayoutDisplay::Flex,
1214        ))),
1215        CssPropertyWithConditions::simple(CssProperty::FlexDirection(
1216            LayoutFlexDirectionValue::Exact(LayoutFlexDirection::Column),
1217        )),
1218        CssPropertyWithConditions::simple(CssProperty::Left(LayoutLeftValue::Exact(LayoutLeft {
1219            inner: PixelValue::const_px(0),
1220        }))),
1221        CssPropertyWithConditions::simple(CssProperty::OverflowX(LayoutOverflowValue::Exact(
1222            LayoutOverflow::Visible,
1223        ))),
1224        CssPropertyWithConditions::simple(CssProperty::OverflowY(LayoutOverflowValue::Exact(
1225            LayoutOverflow::Visible,
1226        ))),
1227        CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
1228            LayoutPosition::Absolute,
1229        ))),
1230    ];
1231    const CSS_MATCH_10339190304804100510: CssPropertyWithConditionsVec =
1232        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_10339190304804100510_PROPERTIES);
1233
1234    const CSS_MATCH_11452431279102104133_PROPERTIES: &[CssPropertyWithConditions] = &[
1235        // .node_input_connection_label
1236        CssPropertyWithConditions::simple(CssProperty::FontFamily(StyleFontFamilyVecValue::Exact(
1237            StyleFontFamilyVec::from_const_slice(STYLE_FONT_FAMILY_8122988506401935406_ITEMS),
1238        ))),
1239        CssPropertyWithConditions::simple(CssProperty::FontSize(StyleFontSizeValue::Exact(
1240            StyleFontSize {
1241                inner: PixelValue::const_px(12),
1242            },
1243        ))),
1244        CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
1245            LayoutHeight::Px(PixelValue::const_px(15)),
1246        ))),
1247        CssPropertyWithConditions::simple(CssProperty::TextAlign(StyleTextAlignValue::Exact(
1248            StyleTextAlign::Right,
1249        ))),
1250        CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
1251            LayoutWidth::Px(PixelValue::const_px(100)),
1252        ))),
1253    ];
1254    const CSS_MATCH_11452431279102104133: CssPropertyWithConditionsVec =
1255        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_11452431279102104133_PROPERTIES);
1256
1257    const CSS_MATCH_1173826950760010563_PROPERTIES: &[CssPropertyWithConditions] = &[
1258        // .node_configuration_field_value:focus
1259        CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
1260            StyleBorderTopColorValue::Exact(StyleBorderTopColor {
1261                inner: ColorU {
1262                    r: 0,
1263                    g: 131,
1264                    b: 176,
1265                    a: 119,
1266                },
1267            }),
1268        )),
1269        CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
1270            StyleBorderRightColorValue::Exact(StyleBorderRightColor {
1271                inner: ColorU {
1272                    r: 0,
1273                    g: 131,
1274                    b: 176,
1275                    a: 119,
1276                },
1277            }),
1278        )),
1279        CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
1280            StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
1281                inner: ColorU {
1282                    r: 0,
1283                    g: 131,
1284                    b: 176,
1285                    a: 119,
1286                },
1287            }),
1288        )),
1289        CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
1290            StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
1291                inner: ColorU {
1292                    r: 0,
1293                    g: 131,
1294                    b: 176,
1295                    a: 119,
1296                },
1297            }),
1298        )),
1299        CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
1300            StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
1301                inner: BorderStyle::Solid,
1302            }),
1303        )),
1304        CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
1305            StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
1306                inner: BorderStyle::Solid,
1307            }),
1308        )),
1309        CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
1310            StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
1311                inner: BorderStyle::Solid,
1312            }),
1313        )),
1314        CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
1315            StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
1316                inner: BorderStyle::Solid,
1317            }),
1318        )),
1319        CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
1320            LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
1321                inner: PixelValue::const_px(1),
1322            }),
1323        )),
1324        CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
1325            LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
1326                inner: PixelValue::const_px(1),
1327            }),
1328        )),
1329        CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
1330            LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
1331                inner: PixelValue::const_px(1),
1332            }),
1333        )),
1334        CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
1335            LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
1336                inner: PixelValue::const_px(1),
1337            }),
1338        )),
1339        // .node_configuration_field_value
1340        CssPropertyWithConditions::simple(CssProperty::AlignItems(LayoutAlignItemsValue::Exact(
1341            LayoutAlignItems::Center,
1342        ))),
1343        CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
1344            StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
1345                STYLE_BACKGROUND_CONTENT_524016094839686509_ITEMS,
1346            )),
1347        )),
1348        CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
1349            StyleBorderTopColorValue::Exact(StyleBorderTopColor {
1350                inner: ColorU {
1351                    r: 54,
1352                    g: 57,
1353                    b: 63,
1354                    a: 255,
1355                },
1356            }),
1357        )),
1358        CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
1359            StyleBorderRightColorValue::Exact(StyleBorderRightColor {
1360                inner: ColorU {
1361                    r: 54,
1362                    g: 57,
1363                    b: 63,
1364                    a: 255,
1365                },
1366            }),
1367        )),
1368        CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
1369            StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
1370                inner: ColorU {
1371                    r: 54,
1372                    g: 57,
1373                    b: 63,
1374                    a: 255,
1375                },
1376            }),
1377        )),
1378        CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
1379            StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
1380                inner: ColorU {
1381                    r: 54,
1382                    g: 57,
1383                    b: 63,
1384                    a: 255,
1385                },
1386            }),
1387        )),
1388        CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
1389            StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
1390                inner: BorderStyle::Solid,
1391            }),
1392        )),
1393        CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
1394            StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
1395                inner: BorderStyle::Solid,
1396            }),
1397        )),
1398        CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
1399            StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
1400                inner: BorderStyle::Solid,
1401            }),
1402        )),
1403        CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
1404            StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
1405                inner: BorderStyle::Solid,
1406            }),
1407        )),
1408        CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
1409            LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
1410                inner: PixelValue::const_px(1),
1411            }),
1412        )),
1413        CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
1414            LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
1415                inner: PixelValue::const_px(1),
1416            }),
1417        )),
1418        CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
1419            LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
1420                inner: PixelValue::const_px(1),
1421            }),
1422        )),
1423        CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
1424            LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
1425                inner: PixelValue::const_px(1),
1426            }),
1427        )),
1428        CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
1429            LayoutFlexGrow {
1430                inner: FloatValue::const_new(1),
1431            },
1432        ))),
1433        CssPropertyWithConditions::simple(CssProperty::TextAlign(StyleTextAlignValue::Exact(
1434            StyleTextAlign::Left,
1435        ))),
1436    ];
1437    const CSS_MATCH_1173826950760010563: CssPropertyWithConditionsVec =
1438        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_1173826950760010563_PROPERTIES);
1439
1440    const CSS_MATCH_1198521124955124418_PROPERTIES: &[CssPropertyWithConditions] = &[
1441        // .node_configuration_field_label
1442        CssPropertyWithConditions::simple(CssProperty::AlignItems(LayoutAlignItemsValue::Exact(
1443            LayoutAlignItems::Center,
1444        ))),
1445        CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
1446            LayoutFlexGrow {
1447                inner: FloatValue::const_new(1),
1448            },
1449        ))),
1450        CssPropertyWithConditions::simple(CssProperty::MaxWidth(LayoutMaxWidthValue::Exact(
1451            LayoutMaxWidth {
1452                inner: PixelValue::const_px(120),
1453            },
1454        ))),
1455        CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
1456            LayoutPaddingLeft {
1457                inner: PixelValue::const_px(10),
1458            },
1459        ))),
1460        CssPropertyWithConditions::simple(CssProperty::TextAlign(StyleTextAlignValue::Exact(
1461            StyleTextAlign::Left,
1462        ))),
1463    ];
1464    const CSS_MATCH_1198521124955124418: CssPropertyWithConditionsVec =
1465        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_1198521124955124418_PROPERTIES);
1466
1467    const CSS_MATCH_12038890904436132038_PROPERTIES: &[CssPropertyWithConditions] = &[
1468        // .node_output_connection_label_wrapper
1469        CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
1470            StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
1471                STYLE_BACKGROUND_CONTENT_10430246856047584562_ITEMS,
1472            )),
1473        )),
1474        CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
1475            LayoutPaddingLeft {
1476                inner: PixelValue::const_px(5),
1477            },
1478        ))),
1479    ];
1480    const CSS_MATCH_12038890904436132038: CssPropertyWithConditionsVec =
1481        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_12038890904436132038_PROPERTIES);
1482
1483    const CSS_MATCH_12400244273289328300_PROPERTIES: &[CssPropertyWithConditions] = &[
1484        // .node_output_container
1485        CssPropertyWithConditions::simple(CssProperty::Display(LayoutDisplayValue::Exact(
1486            LayoutDisplay::Flex,
1487        ))),
1488        CssPropertyWithConditions::simple(CssProperty::FlexDirection(
1489            LayoutFlexDirectionValue::Exact(LayoutFlexDirection::Row),
1490        )),
1491        CssPropertyWithConditions::simple(CssProperty::MarginTop(LayoutMarginTopValue::Exact(
1492            LayoutMarginTop {
1493                inner: PixelValue::const_px(10),
1494            },
1495        ))),
1496    ];
1497    const CSS_MATCH_12400244273289328300: CssPropertyWithConditionsVec =
1498        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_12400244273289328300_PROPERTIES);
1499
1500    const CSS_MATCH_14906563417280941890_PROPERTIES: &[CssPropertyWithConditions] = &[
1501        // .outputs
1502        CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
1503            LayoutFlexGrow {
1504                inner: FloatValue::const_new(0),
1505            },
1506        ))),
1507        CssPropertyWithConditions::simple(CssProperty::OverflowX(LayoutOverflowValue::Exact(
1508            LayoutOverflow::Visible,
1509        ))),
1510        CssPropertyWithConditions::simple(CssProperty::OverflowY(LayoutOverflowValue::Exact(
1511            LayoutOverflow::Visible,
1512        ))),
1513        CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
1514            LayoutPosition::Relative,
1515        ))),
1516        CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
1517            LayoutWidth::Px(PixelValue::const_px(0)),
1518        ))),
1519    ];
1520    const CSS_MATCH_14906563417280941890: CssPropertyWithConditionsVec =
1521        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_14906563417280941890_PROPERTIES);
1522
1523    const CSS_MATCH_16946967739775705757_PROPERTIES: &[CssPropertyWithConditions] = &[
1524        // .inputs
1525        CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
1526            LayoutFlexGrow {
1527                inner: FloatValue::const_new(0),
1528            },
1529        ))),
1530        CssPropertyWithConditions::simple(CssProperty::OverflowX(LayoutOverflowValue::Exact(
1531            LayoutOverflow::Visible,
1532        ))),
1533        CssPropertyWithConditions::simple(CssProperty::OverflowY(LayoutOverflowValue::Exact(
1534            LayoutOverflow::Visible,
1535        ))),
1536        CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
1537            LayoutPosition::Relative,
1538        ))),
1539        CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
1540            LayoutWidth::Px(PixelValue::const_px(0)),
1541        ))),
1542    ];
1543    const CSS_MATCH_16946967739775705757: CssPropertyWithConditionsVec =
1544        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_16946967739775705757_PROPERTIES);
1545
1546    const CSS_MATCH_1739273067404038547_PROPERTIES: &[CssPropertyWithConditions] = &[
1547        // .node_label
1548        CssPropertyWithConditions::simple(CssProperty::FontSize(StyleFontSizeValue::Exact(
1549            StyleFontSize {
1550                inner: PixelValue::const_px(18),
1551            },
1552        ))),
1553        CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
1554            LayoutHeight::Px(PixelValue::const_px(50)),
1555        ))),
1556        CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
1557            LayoutPaddingLeft {
1558                inner: PixelValue::const_px(5),
1559            },
1560        ))),
1561        CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
1562            LayoutPaddingTop {
1563                inner: PixelValue::const_px(10),
1564            },
1565        ))),
1566    ];
1567    const CSS_MATCH_1739273067404038547: CssPropertyWithConditionsVec =
1568        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_1739273067404038547_PROPERTIES);
1569
1570    const CSS_MATCH_2008162367868363199_PROPERTIES: &[CssPropertyWithConditions] = &[
1571        // .node_output_connection_label
1572        CssPropertyWithConditions::simple(CssProperty::FontFamily(StyleFontFamilyVecValue::Exact(
1573            StyleFontFamilyVec::from_const_slice(STYLE_FONT_FAMILY_8122988506401935406_ITEMS),
1574        ))),
1575        CssPropertyWithConditions::simple(CssProperty::FontSize(StyleFontSizeValue::Exact(
1576            StyleFontSize {
1577                inner: PixelValue::const_px(12),
1578            },
1579        ))),
1580        CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
1581            LayoutHeight::Px(PixelValue::const_px(15)),
1582        ))),
1583        CssPropertyWithConditions::simple(CssProperty::TextAlign(StyleTextAlignValue::Exact(
1584            StyleTextAlign::Left,
1585        ))),
1586        CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
1587            LayoutWidth::Px(PixelValue::const_px(100)),
1588        ))),
1589    ];
1590    const CSS_MATCH_2008162367868363199: CssPropertyWithConditionsVec =
1591        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_2008162367868363199_PROPERTIES);
1592
1593    const CSS_MATCH_2639191696846875011_PROPERTIES: &[CssPropertyWithConditions] = &[
1594        // .node_configuration_field_container
1595        CssPropertyWithConditions::simple(CssProperty::FlexDirection(
1596            LayoutFlexDirectionValue::Exact(LayoutFlexDirection::Column),
1597        )),
1598        CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
1599            LayoutPaddingTop {
1600                inner: PixelValue::const_px(3),
1601            },
1602        ))),
1603        CssPropertyWithConditions::simple(CssProperty::PaddingBottom(
1604            LayoutPaddingBottomValue::Exact(LayoutPaddingBottom {
1605                inner: PixelValue::const_px(3),
1606            }),
1607        )),
1608        CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
1609            LayoutPaddingLeft {
1610                inner: PixelValue::const_px(5),
1611            },
1612        ))),
1613        CssPropertyWithConditions::simple(CssProperty::PaddingRight(
1614            LayoutPaddingRightValue::Exact(LayoutPaddingRight {
1615                inner: PixelValue::const_px(5),
1616            }),
1617        )),
1618    ];
1619    const CSS_MATCH_2639191696846875011: CssPropertyWithConditionsVec =
1620        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_2639191696846875011_PROPERTIES);
1621
1622    const CSS_MATCH_3354247437065914166_PROPERTIES: &[CssPropertyWithConditions] = &[
1623        // .node_body
1624        CssPropertyWithConditions::simple(CssProperty::FlexDirection(
1625            LayoutFlexDirectionValue::Exact(LayoutFlexDirection::Row),
1626        )),
1627        CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
1628            LayoutPosition::Relative,
1629        ))),
1630    ];
1631    const CSS_MATCH_3354247437065914166: CssPropertyWithConditionsVec =
1632        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_3354247437065914166_PROPERTIES);
1633
1634    const CSS_MATCH_4700400755767504372_PROPERTIES: &[CssPropertyWithConditions] = &[
1635        // .node_input_connection_label_wrapper
1636        CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
1637            StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
1638                STYLE_BACKGROUND_CONTENT_11936041127084538304_ITEMS,
1639            )),
1640        )),
1641        CssPropertyWithConditions::simple(CssProperty::PaddingRight(
1642            LayoutPaddingRightValue::Exact(LayoutPaddingRight {
1643                inner: PixelValue::const_px(5),
1644            }),
1645        )),
1646    ];
1647    const CSS_MATCH_4700400755767504372: CssPropertyWithConditionsVec =
1648        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_4700400755767504372_PROPERTIES);
1649
1650    const CSS_MATCH_705881630351954657_PROPERTIES: &[CssPropertyWithConditions] = &[
1651        // .node_input_wrapper
1652        CssPropertyWithConditions::simple(CssProperty::Display(LayoutDisplayValue::Exact(
1653            LayoutDisplay::Flex,
1654        ))),
1655        CssPropertyWithConditions::simple(CssProperty::FlexDirection(
1656            LayoutFlexDirectionValue::Exact(LayoutFlexDirection::Column),
1657        )),
1658        CssPropertyWithConditions::simple(CssProperty::OverflowX(LayoutOverflowValue::Exact(
1659            LayoutOverflow::Visible,
1660        ))),
1661        CssPropertyWithConditions::simple(CssProperty::OverflowY(LayoutOverflowValue::Exact(
1662            LayoutOverflow::Visible,
1663        ))),
1664        CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
1665            LayoutPosition::Absolute,
1666        ))),
1667        CssPropertyWithConditions::simple(CssProperty::Right(LayoutRightValue::Exact(
1668            LayoutRight {
1669                inner: PixelValue::const_px(0),
1670            },
1671        ))),
1672    ];
1673    const CSS_MATCH_705881630351954657: CssPropertyWithConditionsVec =
1674        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_705881630351954657_PROPERTIES);
1675
1676    const CSS_MATCH_7395766480280098891_PROPERTIES: &[CssPropertyWithConditions] = &[
1677        // .node_close_button
1678        CssPropertyWithConditions::simple(CssProperty::AlignItems(LayoutAlignItemsValue::Exact(
1679            LayoutAlignItems::Center,
1680        ))),
1681        CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
1682            StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
1683                STYLE_BACKGROUND_CONTENT_17648039690071193942_ITEMS,
1684            )),
1685        )),
1686        CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
1687            StyleBorderTopColorValue::Exact(StyleBorderTopColor {
1688                inner: ColorU {
1689                    r: 255,
1690                    g: 255,
1691                    b: 255,
1692                    a: 153,
1693                },
1694            }),
1695        )),
1696        CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
1697            StyleBorderRightColorValue::Exact(StyleBorderRightColor {
1698                inner: ColorU {
1699                    r: 255,
1700                    g: 255,
1701                    b: 255,
1702                    a: 153,
1703                },
1704            }),
1705        )),
1706        CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
1707            StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
1708                inner: ColorU {
1709                    r: 255,
1710                    g: 255,
1711                    b: 255,
1712                    a: 153,
1713                },
1714            }),
1715        )),
1716        CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
1717            StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
1718                inner: ColorU {
1719                    r: 255,
1720                    g: 255,
1721                    b: 255,
1722                    a: 153,
1723                },
1724            }),
1725        )),
1726        CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
1727            StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
1728                inner: BorderStyle::Solid,
1729            }),
1730        )),
1731        CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
1732            StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
1733                inner: BorderStyle::Solid,
1734            }),
1735        )),
1736        CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
1737            StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
1738                inner: BorderStyle::Solid,
1739            }),
1740        )),
1741        CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
1742            StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
1743                inner: BorderStyle::Solid,
1744            }),
1745        )),
1746        CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
1747            LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
1748                inner: PixelValue::const_px(1),
1749            }),
1750        )),
1751        CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
1752            LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
1753                inner: PixelValue::const_px(1),
1754            }),
1755        )),
1756        CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
1757            LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
1758                inner: PixelValue::const_px(1),
1759            }),
1760        )),
1761        CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
1762            LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
1763                inner: PixelValue::const_px(1),
1764            }),
1765        )),
1766        CssPropertyWithConditions::simple(CssProperty::BoxShadowLeft(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
1767            StyleBoxShadow {
1768                offset_x: PixelValueNoPercent {
1769                    inner: PixelValue::const_px(0),
1770                },
1771                offset_y: PixelValueNoPercent {
1772                    inner: PixelValue::const_px(0),
1773                },
1774                color: ColorU {
1775                    r: 229,
1776                    g: 57,
1777                    b: 53,
1778                    a: 255,
1779                },
1780                blur_radius: PixelValueNoPercent {
1781                    inner: PixelValue::const_px(2),
1782                },
1783                spread_radius: PixelValueNoPercent {
1784                    inner: PixelValue::const_px(0),
1785                },
1786                clip_mode: BoxShadowClipMode::Outset,
1787            },
1788        )))),
1789        CssPropertyWithConditions::simple(CssProperty::BoxShadowRight(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
1790            StyleBoxShadow {
1791                offset_x: PixelValueNoPercent {
1792                    inner: PixelValue::const_px(0),
1793                },
1794                offset_y: PixelValueNoPercent {
1795                    inner: PixelValue::const_px(0),
1796                },
1797                color: ColorU {
1798                    r: 229,
1799                    g: 57,
1800                    b: 53,
1801                    a: 255,
1802                },
1803                blur_radius: PixelValueNoPercent {
1804                    inner: PixelValue::const_px(2),
1805                },
1806                spread_radius: PixelValueNoPercent {
1807                    inner: PixelValue::const_px(0),
1808                },
1809                clip_mode: BoxShadowClipMode::Outset,
1810            },
1811        )))),
1812        CssPropertyWithConditions::simple(CssProperty::BoxShadowTop(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
1813            StyleBoxShadow {
1814                offset_x: PixelValueNoPercent {
1815                    inner: PixelValue::const_px(0),
1816                },
1817                offset_y: PixelValueNoPercent {
1818                    inner: PixelValue::const_px(0),
1819                },
1820                color: ColorU {
1821                    r: 229,
1822                    g: 57,
1823                    b: 53,
1824                    a: 255,
1825                },
1826                blur_radius: PixelValueNoPercent {
1827                    inner: PixelValue::const_px(2),
1828                },
1829                spread_radius: PixelValueNoPercent {
1830                    inner: PixelValue::const_px(0),
1831                },
1832                clip_mode: BoxShadowClipMode::Outset,
1833            },
1834        )))),
1835        CssPropertyWithConditions::simple(CssProperty::BoxShadowBottom(
1836            StyleBoxShadowValue::Exact(BoxOrStatic::Static(&StyleBoxShadow {
1837                offset_x: PixelValueNoPercent {
1838                    inner: PixelValue::const_px(0),
1839                },
1840                offset_y: PixelValueNoPercent {
1841                    inner: PixelValue::const_px(0),
1842                },
1843                color: ColorU {
1844                    r: 229,
1845                    g: 57,
1846                    b: 53,
1847                    a: 255,
1848                },
1849                blur_radius: PixelValueNoPercent {
1850                    inner: PixelValue::const_px(2),
1851                },
1852                spread_radius: PixelValueNoPercent {
1853                    inner: PixelValue::const_px(0),
1854                },
1855                clip_mode: BoxShadowClipMode::Outset,
1856            })),
1857        )),
1858        CssPropertyWithConditions::simple(CssProperty::Cursor(StyleCursorValue::Exact(
1859            StyleCursor::Pointer,
1860        ))),
1861        CssPropertyWithConditions::simple(CssProperty::FontFamily(StyleFontFamilyVecValue::Exact(
1862            StyleFontFamilyVec::from_const_slice(STYLE_FONT_FAMILY_11383897783350685780_ITEMS),
1863        ))),
1864        CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
1865            LayoutHeight::Px(PixelValue::const_px(20)),
1866        ))),
1867        CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
1868            LayoutPosition::Absolute,
1869        ))),
1870        CssPropertyWithConditions::simple(CssProperty::TextAlign(StyleTextAlignValue::Exact(
1871            StyleTextAlign::Center,
1872        ))),
1873        CssPropertyWithConditions::simple(CssProperty::Transform(StyleTransformVecValue::Exact(
1874            StyleTransformVec::from_const_slice(STYLE_TRANSFORM_14683950870521466298_ITEMS),
1875        ))),
1876        CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
1877            LayoutWidth::Px(PixelValue::const_px(20)),
1878        ))),
1879    ];
1880    const CSS_MATCH_7395766480280098891: CssPropertyWithConditionsVec =
1881        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_7395766480280098891_PROPERTIES);
1882
1883    const CSS_MATCH_7432473243011547380_PROPERTIES: &[CssPropertyWithConditions] = &[
1884        // .node_content_wrapper
1885        CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
1886            StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
1887                STYLE_BACKGROUND_CONTENT_15813232491335471489_ITEMS,
1888            )),
1889        )),
1890        CssPropertyWithConditions::simple(CssProperty::BoxShadowLeft(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
1891            StyleBoxShadow {
1892                offset_x: PixelValueNoPercent {
1893                    inner: PixelValue::const_px(0),
1894                },
1895                offset_y: PixelValueNoPercent {
1896                    inner: PixelValue::const_px(0),
1897                },
1898                color: ColorU {
1899                    r: 0,
1900                    g: 0,
1901                    b: 0,
1902                    a: 255,
1903                },
1904                blur_radius: PixelValueNoPercent {
1905                    inner: PixelValue::const_px(4),
1906                },
1907                spread_radius: PixelValueNoPercent {
1908                    inner: PixelValue::const_px(0),
1909                },
1910                clip_mode: BoxShadowClipMode::Inset,
1911            },
1912        )))),
1913        CssPropertyWithConditions::simple(CssProperty::BoxShadowRight(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
1914            StyleBoxShadow {
1915                offset_x: PixelValueNoPercent {
1916                    inner: PixelValue::const_px(0),
1917                },
1918                offset_y: PixelValueNoPercent {
1919                    inner: PixelValue::const_px(0),
1920                },
1921                color: ColorU {
1922                    r: 0,
1923                    g: 0,
1924                    b: 0,
1925                    a: 255,
1926                },
1927                blur_radius: PixelValueNoPercent {
1928                    inner: PixelValue::const_px(4),
1929                },
1930                spread_radius: PixelValueNoPercent {
1931                    inner: PixelValue::const_px(0),
1932                },
1933                clip_mode: BoxShadowClipMode::Inset,
1934            },
1935        )))),
1936        CssPropertyWithConditions::simple(CssProperty::BoxShadowTop(StyleBoxShadowValue::Exact(BoxOrStatic::Static(&
1937            StyleBoxShadow {
1938                offset_x: PixelValueNoPercent {
1939                    inner: PixelValue::const_px(0),
1940                },
1941                offset_y: PixelValueNoPercent {
1942                    inner: PixelValue::const_px(0),
1943                },
1944                color: ColorU {
1945                    r: 0,
1946                    g: 0,
1947                    b: 0,
1948                    a: 255,
1949                },
1950                blur_radius: PixelValueNoPercent {
1951                    inner: PixelValue::const_px(4),
1952                },
1953                spread_radius: PixelValueNoPercent {
1954                    inner: PixelValue::const_px(0),
1955                },
1956                clip_mode: BoxShadowClipMode::Inset,
1957            },
1958        )))),
1959        CssPropertyWithConditions::simple(CssProperty::BoxShadowBottom(
1960            StyleBoxShadowValue::Exact(BoxOrStatic::Static(&StyleBoxShadow {
1961                offset_x: PixelValueNoPercent {
1962                    inner: PixelValue::const_px(0),
1963                },
1964                offset_y: PixelValueNoPercent {
1965                    inner: PixelValue::const_px(0),
1966                },
1967                color: ColorU {
1968                    r: 0,
1969                    g: 0,
1970                    b: 0,
1971                    a: 255,
1972                },
1973                blur_radius: PixelValueNoPercent {
1974                    inner: PixelValue::const_px(4),
1975                },
1976                spread_radius: PixelValueNoPercent {
1977                    inner: PixelValue::const_px(0),
1978                },
1979                clip_mode: BoxShadowClipMode::Inset,
1980            })),
1981        )),
1982        CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
1983            LayoutFlexGrow {
1984                inner: FloatValue::const_new(1),
1985            },
1986        ))),
1987    ];
1988    const CSS_MATCH_7432473243011547380: CssPropertyWithConditionsVec =
1989        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_7432473243011547380_PROPERTIES);
1990
1991    const CSS_MATCH_9863994880298313101_PROPERTIES: &[CssPropertyWithConditions] = &[
1992        // .node_input_container
1993        CssPropertyWithConditions::simple(CssProperty::Display(LayoutDisplayValue::Exact(
1994            LayoutDisplay::Flex,
1995        ))),
1996        CssPropertyWithConditions::simple(CssProperty::FlexDirection(
1997            LayoutFlexDirectionValue::Exact(LayoutFlexDirection::Row),
1998        )),
1999        CssPropertyWithConditions::simple(CssProperty::MarginTop(LayoutMarginTopValue::Exact(
2000            LayoutMarginTop {
2001                inner: PixelValue::const_px(10),
2002            },
2003        ))),
2004    ];
2005    const CSS_MATCH_9863994880298313101: CssPropertyWithConditionsVec =
2006        CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_9863994880298313101_PROPERTIES);
2007
2008    // NODE RENDER FUNCTION BEGIN
2009
2010    let node_transform = StyleTransformTranslate2D {
2011        x: PixelValue::px(graph_offset.0 + node.position.x),
2012        y: PixelValue::px(graph_offset.1 + node.position.y),
2013    };
2014
2015    // get names and colors for inputs / outputs
2016    let inputs = node_info
2017        .inputs
2018        .iter()
2019        .filter_map(|io_id| {
2020            let node_graph_ref = node_local_dataset
2021                .backref
2022                .downcast_ref::<NodeGraphLocalDataset>()?;
2023            let io_info = node_graph_ref
2024                .node_graph
2025                .input_output_types
2026                .iter()
2027                .find(|i| i.io_type_id == *io_id)?;
2028            Some((
2029                io_info.io_info.data_type.clone(),
2030                io_info.io_info.color,
2031            ))
2032        })
2033        .collect::<Vec<_>>();
2034
2035    let outputs = node_info
2036        .outputs
2037        .iter()
2038        .filter_map(|io_id| {
2039            let node_graph_ref = node_local_dataset
2040                .backref
2041                .downcast_ref::<NodeGraphLocalDataset>()?;
2042            let io_info = node_graph_ref
2043                .node_graph
2044                .input_output_types
2045                .iter()
2046                .find(|i| i.io_type_id == *io_id)?;
2047            Some((
2048                io_info.io_info.data_type.clone(),
2049                io_info.io_info.color,
2050            ))
2051        })
2052        .collect::<Vec<_>>();
2053
2054    let node_local_dataset = RefAny::new(node_local_dataset);
2055
2056    Dom::create_div()
2057    .with_css_props(vec![
2058        CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
2059            LayoutPosition::Absolute,
2060        ))),
2061    ].into())
2062    .with_children(vec![
2063        Dom::create_div()
2064        .with_callbacks(vec![
2065           CoreCallbackData {
2066               event: EventFilter::Hover(HoverEventFilter::LeftMouseDown),
2067               refany: node_local_dataset.clone(),
2068               callback: CoreCallback { cb: nodegraph_set_active_node as usize, ctx: OptionRefAny::None },
2069           },
2070        ].into())
2071        .with_css_props(vec![
2072           // .node_graph_node
2073           CssPropertyWithConditions::simple(CssProperty::OverflowX(
2074               LayoutOverflowValue::Exact(LayoutOverflow::Visible)
2075           )),
2076           CssPropertyWithConditions::simple(CssProperty::Position(LayoutPositionValue::Exact(
2077               LayoutPosition::Relative,
2078           ))),
2079           CssPropertyWithConditions::simple(CssProperty::OverflowY(
2080               LayoutOverflowValue::Exact(LayoutOverflow::Visible)
2081           )),
2082           CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
2083               StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
2084                   STYLE_BACKGROUND_CONTENT_11535310356736632656_ITEMS,
2085               )),
2086           )),
2087           CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
2088               StyleBorderTopColorValue::Exact(StyleBorderTopColor {
2089                   inner: ColorU {
2090                       r: 0,
2091                       g: 180,
2092                       b: 219,
2093                       a: 255,
2094                   },
2095               }),
2096           )),
2097           CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
2098               StyleBorderRightColorValue::Exact(StyleBorderRightColor {
2099                   inner: ColorU {
2100                       r: 0,
2101                       g: 180,
2102                       b: 219,
2103                       a: 255,
2104                   },
2105               }),
2106           )),
2107           CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
2108               StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
2109                   inner: ColorU {
2110                       r: 0,
2111                       g: 180,
2112                       b: 219,
2113                       a: 255,
2114                   },
2115               }),
2116           )),
2117           CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
2118               StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
2119                   inner: ColorU {
2120                       r: 0,
2121                       g: 180,
2122                       b: 219,
2123                       a: 255,
2124                   },
2125               }),
2126           )),
2127           CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
2128               StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
2129                   inner: BorderStyle::Solid,
2130               }),
2131           )),
2132           CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
2133               StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
2134                   inner: BorderStyle::Solid,
2135               }),
2136           )),
2137           CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
2138               StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
2139                   inner: BorderStyle::Solid,
2140               }),
2141           )),
2142           CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
2143               StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
2144                   inner: BorderStyle::Solid,
2145               }),
2146           )),
2147           CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
2148               LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
2149                   inner: PixelValue::const_px(1),
2150               }),
2151           )),
2152           CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
2153               LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
2154                   inner: PixelValue::const_px(1),
2155               }),
2156           )),
2157           CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
2158               LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
2159                   inner: PixelValue::const_px(1),
2160               }),
2161           )),
2162           CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
2163               LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
2164                   inner: PixelValue::const_px(1),
2165               }),
2166           )),
2167           CssPropertyWithConditions::simple(CssProperty::BoxShadowLeft(StyleBoxShadowValue::Exact(BoxOrStatic::heap(
2168               StyleBoxShadow {
2169                   offset_x: PixelValueNoPercent { inner: PixelValue::const_px(0) }, offset_y: PixelValueNoPercent { inner: PixelValue::const_px(0) },
2170                   color: ColorU {
2171                       r: 0,
2172                       g: 131,
2173                       b: 176,
2174                       a: 119,
2175                   },
2176                   blur_radius: PixelValueNoPercent {
2177                       inner: PixelValue::const_px(3),
2178                   },
2179                   spread_radius: PixelValueNoPercent {
2180                       inner: PixelValue::const_px(0),
2181                   },
2182                   clip_mode: BoxShadowClipMode::Outset,
2183               },
2184           )))),
2185           CssPropertyWithConditions::simple(CssProperty::BoxShadowRight(StyleBoxShadowValue::Exact(BoxOrStatic::heap(
2186               StyleBoxShadow {
2187                   offset_x: PixelValueNoPercent { inner: PixelValue::const_px(0) }, offset_y: PixelValueNoPercent { inner: PixelValue::const_px(0) },
2188                   color: ColorU {
2189                       r: 0,
2190                       g: 131,
2191                       b: 176,
2192                       a: 119,
2193                   },
2194                   blur_radius: PixelValueNoPercent {
2195                       inner: PixelValue::const_px(3),
2196                   },
2197                   spread_radius: PixelValueNoPercent {
2198                       inner: PixelValue::const_px(0),
2199                   },
2200                   clip_mode: BoxShadowClipMode::Outset,
2201               },
2202           )))),
2203           CssPropertyWithConditions::simple(CssProperty::BoxShadowTop(StyleBoxShadowValue::Exact(BoxOrStatic::heap(
2204               StyleBoxShadow {
2205                   offset_x: PixelValueNoPercent { inner: PixelValue::const_px(0) }, offset_y: PixelValueNoPercent { inner: PixelValue::const_px(0) },
2206                   color: ColorU {
2207                       r: 0,
2208                       g: 131,
2209                       b: 176,
2210                       a: 119,
2211                   },
2212                   blur_radius: PixelValueNoPercent {
2213                       inner: PixelValue::const_px(3),
2214                   },
2215                   spread_radius: PixelValueNoPercent {
2216                       inner: PixelValue::const_px(0),
2217                   },
2218                   clip_mode: BoxShadowClipMode::Outset,
2219               },
2220           )))),
2221           CssPropertyWithConditions::simple(CssProperty::BoxShadowBottom(
2222               StyleBoxShadowValue::Exact(BoxOrStatic::heap(StyleBoxShadow {
2223                   offset_x: PixelValueNoPercent { inner: PixelValue::const_px(0) }, offset_y: PixelValueNoPercent { inner: PixelValue::const_px(0) },
2224                   color: ColorU {
2225                       r: 0,
2226                       g: 131,
2227                       b: 176,
2228                       a: 119,
2229                   },
2230                   blur_radius: PixelValueNoPercent {
2231                       inner: PixelValue::const_px(3),
2232                   },
2233                   spread_radius: PixelValueNoPercent {
2234                       inner: PixelValue::const_px(0),
2235                   },
2236                   clip_mode: BoxShadowClipMode::Outset,
2237               })),
2238           )),
2239           CssPropertyWithConditions::simple(CssProperty::TextColor(StyleTextColorValue::Exact(
2240               StyleTextColor {
2241                   inner: ColorU {
2242                       r: 255,
2243                       g: 255,
2244                       b: 255,
2245                       a: 255,
2246                   },
2247               },
2248           ))),
2249
2250           CssPropertyWithConditions::simple(CssProperty::Display(LayoutDisplayValue::Exact(
2251               LayoutDisplay::Block
2252           ))),
2253           CssPropertyWithConditions::simple(CssProperty::FontFamily(StyleFontFamilyVecValue::Exact(
2254               StyleFontFamilyVec::from_const_slice(STYLE_FONT_FAMILY_8122988506401935406_ITEMS),
2255           ))),
2256           CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
2257               LayoutPaddingTop {
2258                   inner: PixelValue::const_px(10),
2259               },
2260           ))),
2261           CssPropertyWithConditions::simple(CssProperty::PaddingBottom(
2262               LayoutPaddingBottomValue::Exact(LayoutPaddingBottom {
2263                   inner: PixelValue::const_px(10),
2264               }),
2265           )),
2266           CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
2267               LayoutPaddingLeft {
2268                   inner: PixelValue::const_px(10),
2269               },
2270           ))),
2271           CssPropertyWithConditions::simple(CssProperty::PaddingRight(
2272               LayoutPaddingRightValue::Exact(LayoutPaddingRight {
2273                   inner: PixelValue::const_px(10),
2274               }),
2275           )),
2276           CssPropertyWithConditions::simple(CssProperty::Transform(StyleTransformVecValue::Exact(
2277               if scale_factor == 1.0 {
2278                    vec![
2279                         StyleTransform::Translate(node_transform)
2280                    ]
2281               } else {
2282                    vec![
2283                         StyleTransform::Translate(node_transform),
2284                         StyleTransform::ScaleX(PercentageValue::new(scale_factor * 100.0)),
2285                         StyleTransform::ScaleY(PercentageValue::new(scale_factor * 100.0)),
2286                    ]
2287               }.into()
2288           ))),
2289           CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
2290               LayoutWidth::Px(PixelValue::const_px(250),),
2291           ))),
2292        ].into())
2293        .with_ids_and_classes({
2294           const IDS_AND_CLASSES_4480169002427296613: &[IdOrClass] =
2295               &[Class(AzString::from_const_str("node_graph_node"))];
2296           IdOrClassVec::from_const_slice(IDS_AND_CLASSES_4480169002427296613)
2297        })
2298        .with_children(DomVec::from_vec(vec![
2299           Dom::create_text(AzString::from_const_str("X"))
2300               .with_css_props(CSS_MATCH_7395766480280098891)
2301               .with_callbacks(vec![
2302                   CoreCallbackData {
2303                       event: EventFilter::Hover(HoverEventFilter::MouseUp),
2304                       refany: node_local_dataset.clone(),
2305                       callback: CoreCallback { cb: nodegraph_delete_node as usize, ctx: OptionRefAny::None },
2306                   },
2307               ].into())
2308               .with_ids_and_classes({
2309                   const IDS_AND_CLASSES_7122017923389407516: &[IdOrClass] =
2310                       &[Class(AzString::from_const_str("node_close_button"))];
2311                   IdOrClassVec::from_const_slice(IDS_AND_CLASSES_7122017923389407516)
2312               }),
2313           Dom::create_text(node_info.node_type_name.clone())
2314               .with_css_props(CSS_MATCH_1739273067404038547)
2315               .with_ids_and_classes({
2316                   const IDS_AND_CLASSES_15777790571346582635: &[IdOrClass] =
2317                       &[Class(AzString::from_const_str("node_label"))];
2318                   IdOrClassVec::from_const_slice(IDS_AND_CLASSES_15777790571346582635)
2319               }),
2320           Dom::create_div()
2321               .with_css_props(CSS_MATCH_3354247437065914166)
2322               .with_ids_and_classes({
2323                   const IDS_AND_CLASSES_5590500152394859708: &[IdOrClass] =
2324                       &[Class(AzString::from_const_str("node_body"))];
2325                   IdOrClassVec::from_const_slice(IDS_AND_CLASSES_5590500152394859708)
2326               })
2327               .with_children(DomVec::from_vec(vec![
2328                   Dom::create_div()
2329                       .with_css_props(CSS_MATCH_16946967739775705757)
2330                       .with_ids_and_classes({
2331                           const IDS_AND_CLASSES_3626404106673061698: &[IdOrClass] =
2332                               &[Class(AzString::from_const_str("inputs"))];
2333                           IdOrClassVec::from_const_slice(IDS_AND_CLASSES_3626404106673061698)
2334                       })
2335                       .with_children(DomVec::from_vec(vec![Dom::create_div()
2336                           .with_css_props(CSS_MATCH_705881630351954657)
2337                           .with_ids_and_classes({
2338                               const IDS_AND_CLASSES_12825690349660780627: &[IdOrClass] =
2339                                   &[Class(AzString::from_const_str("node_input_wrapper"))];
2340                               IdOrClassVec::from_const_slice(
2341                                   IDS_AND_CLASSES_12825690349660780627,
2342                               )
2343                           })
2344                           .with_children(DomVec::from_vec(
2345                               inputs
2346                               .into_iter()
2347                               .enumerate()
2348                               .map(|(io_id, (input_label, input_color))| {
2349                                   use self::InputOrOutput::Input;
2350
2351                                   Dom::create_div()
2352                                       .with_css_props(CSS_MATCH_9863994880298313101)
2353                                       .with_ids_and_classes({
2354                                           const IDS_AND_CLASSES_5020681879750641508:
2355                                               &[IdOrClass] = &[Class(AzString::from_const_str(
2356                                               "node_input_container",
2357                                           ))];
2358                                           IdOrClassVec::from_const_slice(
2359                                               IDS_AND_CLASSES_5020681879750641508,
2360                                           )
2361                                       })
2362                                       .with_children(DomVec::from_vec(vec![
2363                                           Dom::create_div()
2364                                               .with_css_props(
2365                                                   CSS_MATCH_4700400755767504372,
2366                                               )
2367                                               .with_ids_and_classes({
2368                                                   const IDS_AND_CLASSES_9154857442066749879:
2369                                                       &[IdOrClass] =
2370                                                       &[Class(AzString::from_const_str(
2371                                                           "node_input_connection_label_wrapper",
2372                                                       ))];
2373                                                   IdOrClassVec::from_const_slice(
2374                                                       IDS_AND_CLASSES_9154857442066749879,
2375                                                   )
2376                                               })
2377                                               .with_children(DomVec::from_vec(vec![Dom::create_text(
2378                                                   input_label,
2379                                               )
2380                                               .with_css_props(
2381                                                   CSS_MATCH_11452431279102104133,
2382                                               )
2383                                               .with_ids_and_classes({
2384                                                   const IDS_AND_CLASSES_16291496011772407931:
2385                                                       &[IdOrClass] =
2386                                                       &[Class(AzString::from_const_str(
2387                                                           "node_input_connection_label",
2388                                                       ))];
2389                                                   IdOrClassVec::from_const_slice(
2390                                                       IDS_AND_CLASSES_16291496011772407931,
2391                                                   )
2392                                               })])),
2393                                           Dom::create_div()
2394                                               .with_callbacks(vec![
2395                                                   CoreCallbackData {
2396                                                       event: EventFilter::Hover(HoverEventFilter::LeftMouseUp),
2397                                                       refany: RefAny::new(NodeInputOutputLocalDataset {
2398                                                           io_id: Input(io_id),
2399                                                           backref: node_local_dataset.clone(),
2400                                                       }),
2401                                                       callback: CoreCallback { cb: nodegraph_input_output_connect as usize, ctx: OptionRefAny::None },
2402                                                   },
2403                                                   CoreCallbackData {
2404                                                       event: EventFilter::Hover(HoverEventFilter::MiddleMouseUp),
2405                                                       refany: RefAny::new(NodeInputOutputLocalDataset {
2406                                                           io_id: Input(io_id),
2407                                                           backref: node_local_dataset.clone(),
2408                                                       }),
2409                                                       callback: CoreCallback { cb: nodegraph_input_output_disconnect as usize, ctx: OptionRefAny::None },
2410                                                   },
2411                                               ].into())
2412                                               .with_css_props(CssPropertyWithConditionsVec::from_vec(vec![
2413                                                       // .node_input
2414                                                       CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
2415                                                           StyleBackgroundContentVecValue::Exact(vec![StyleBackgroundContent::Color(input_color)].into()),
2416                                                       )),
2417                                                       CssPropertyWithConditions::simple(CssProperty::Cursor(StyleCursorValue::Exact(
2418                                                           StyleCursor::Pointer,
2419                                                       ))),
2420                                                       CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
2421                                                           LayoutHeight::Px(PixelValue::const_px(15),),
2422                                                       ))),
2423                                                       CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
2424                                                           LayoutWidth::Px(PixelValue::const_px(15),),
2425                                                       ))),
2426                                                   ])
2427                                               )
2428                                               .with_ids_and_classes({
2429                                                   const IDS_AND_CLASSES_2128818677168244823:
2430                                                       &[IdOrClass] = &[Class(
2431                                                       AzString::from_const_str("node_input"),
2432                                                   )];
2433                                                   IdOrClassVec::from_const_slice(
2434                                                       IDS_AND_CLASSES_2128818677168244823,
2435                                                   )
2436                                               }),
2437                                       ]))
2438                               }).collect()
2439                           ))
2440                       ])),
2441                   Dom::create_div()
2442                       .with_css_props(CSS_MATCH_7432473243011547380)
2443                       .with_ids_and_classes({
2444                           const IDS_AND_CLASSES_746059979773622802: &[IdOrClass] =
2445                               &[Class(AzString::from_const_str("node_content_wrapper"))];
2446                           IdOrClassVec::from_const_slice(IDS_AND_CLASSES_746059979773622802)
2447                       })
2448                       .with_children({
2449
2450                           let mut fields = Vec::new();
2451
2452                           for (field_idx, field) in node.fields.iter().enumerate() {
2453
2454                               let field_local_dataset = RefAny::new(NodeFieldLocalDataset {
2455                                   field_idx,
2456                                   backref: node_local_dataset.clone(),
2457                               });
2458
2459                               let div = Dom::create_div()
2460                               .with_css_props(CSS_MATCH_2639191696846875011)
2461                               .with_ids_and_classes({
2462                                   const IDS_AND_CLASSES_4413230059125905311: &[IdOrClass] =
2463                                       &[Class(AzString::from_const_str(
2464                                           "node_configuration_field_container",
2465                                       ))];
2466                                   IdOrClassVec::from_const_slice(
2467                                       IDS_AND_CLASSES_4413230059125905311,
2468                                   )
2469                               })
2470                               .with_children(DomVec::from_vec(vec![
2471                                   Dom::create_text(field.key.clone())
2472                                   .with_css_props(CSS_MATCH_1198521124955124418)
2473                                   .with_ids_and_classes({
2474                                       const IDS_AND_CLASSES_12334207996395559585:
2475                                           &[IdOrClass] =
2476                                           &[Class(AzString::from_const_str(
2477                                               "node_configuration_field_label",
2478                                           ))];
2479                                       IdOrClassVec::from_const_slice(
2480                                           IDS_AND_CLASSES_12334207996395559585,
2481                                       )
2482                                   }),
2483
2484                                   match &field.value {
2485                                       NodeTypeFieldValue::TextInput(initial_text) => {
2486                                           let cb: TextInputOnFocusLostCallbackType = nodegraph_on_textinput_focus_lost;
2487                                           TextInput::create()
2488                                           .with_text(initial_text.clone())
2489                                           .with_on_focus_lost(field_local_dataset, cb)
2490                                           .dom()
2491                                       },
2492                                       NodeTypeFieldValue::NumberInput(initial_value) => {
2493                                           let cb: NumberInputOnFocusLostCallbackType = nodegraph_on_numberinput_focus_lost;
2494                                           NumberInput::create(*initial_value)
2495                                           .with_on_focus_lost(field_local_dataset, cb)
2496                                           .dom()
2497                                       },
2498                                       NodeTypeFieldValue::CheckBox(initial_checked) => {
2499                                           let cb: CheckBoxOnToggleCallbackType = nodegraph_on_checkbox_value_changed;
2500                                           CheckBox::create(*initial_checked)
2501                                           .with_on_toggle(field_local_dataset, cb)
2502                                           .dom()
2503                                       },
2504                                       NodeTypeFieldValue::ColorInput(initial_color) => {
2505                                           let cb: ColorInputOnValueChangeCallbackType = nodegraph_on_colorinput_value_changed;
2506                                           ColorInput::create(*initial_color)
2507                                           .with_on_value_change(field_local_dataset, cb)
2508                                           .dom()
2509                                       },
2510                                       NodeTypeFieldValue::FileInput(file_path) => {
2511                                           let cb: FileInputOnPathChangeCallbackType = nodegraph_on_fileinput_button_clicked;
2512                                           FileInput::create(file_path.clone())
2513                                           .with_on_path_change(field_local_dataset, cb)
2514                                           .dom()
2515                                       },
2516                                   }
2517                               ]));
2518
2519                               fields.push(div);
2520                           }
2521
2522                           DomVec::from_vec(fields)
2523                       }),
2524                   Dom::create_div()
2525                       .with_css_props(CSS_MATCH_14906563417280941890)
2526                       .with_ids_and_classes({
2527                           const IDS_AND_CLASSES_4737474624251936466: &[IdOrClass] =
2528                               &[Class(AzString::from_const_str("outputs"))];
2529                           IdOrClassVec::from_const_slice(IDS_AND_CLASSES_4737474624251936466)
2530                       })
2531                       .with_children(DomVec::from_vec(vec![Dom::create_div()
2532                           .with_css_props(CSS_MATCH_10339190304804100510)
2533                           .with_ids_and_classes({
2534                               const IDS_AND_CLASSES_12883576328110161157: &[IdOrClass] =
2535                                   &[Class(AzString::from_const_str("node_output_wrapper"))];
2536                               IdOrClassVec::from_const_slice(
2537                                   IDS_AND_CLASSES_12883576328110161157,
2538                               )
2539                           })
2540                           .with_children(DomVec::from_vec(
2541                               outputs
2542                               .into_iter()
2543                               .enumerate()
2544                               .map(|(io_id, (output_label, output_color))| {
2545                                   use self::InputOrOutput::Output;
2546                                   Dom::create_div()
2547                                       .with_css_props(CSS_MATCH_12400244273289328300)
2548                                       .with_ids_and_classes({
2549                                           const IDS_AND_CLASSES_10917819668096233812:
2550                                               &[IdOrClass] = &[Class(AzString::from_const_str(
2551                                               "node_output_container",
2552                                           ))];
2553                                           IdOrClassVec::from_const_slice(
2554                                               IDS_AND_CLASSES_10917819668096233812,
2555                                           )
2556                                       })
2557                                       .with_children(DomVec::from_vec(vec![
2558                                           Dom::create_div()
2559                                               .with_callbacks(vec![
2560                                                   CoreCallbackData {
2561                                                       event: EventFilter::Hover(HoverEventFilter::LeftMouseUp),
2562                                                       refany: RefAny::new(NodeInputOutputLocalDataset {
2563                                                           io_id: Output(io_id),
2564                                                           backref: node_local_dataset.clone(),
2565                                                       }),
2566                                                       callback: CoreCallback { cb: nodegraph_input_output_connect as usize, ctx: OptionRefAny::None },
2567                                                   },
2568                                                   CoreCallbackData {
2569                                                       event: EventFilter::Hover(HoverEventFilter::MiddleMouseUp),
2570                                                       refany: RefAny::new(NodeInputOutputLocalDataset {
2571                                                           io_id: Output(io_id),
2572                                                           backref: node_local_dataset.clone(),
2573                                                       }),
2574                                                       callback: CoreCallback { cb: nodegraph_input_output_disconnect as usize, ctx: OptionRefAny::None },
2575                                                   },
2576                                               ].into())
2577                                               .with_css_props(
2578                                                   CssPropertyWithConditionsVec::from_vec(vec![
2579                                                       // .node_output
2580                                                       CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
2581                                                           StyleBackgroundContentVecValue::Exact(vec![
2582                                                               StyleBackgroundContent::Color(output_color)
2583                                                           ].into()),
2584                                                       )),
2585                                                       CssPropertyWithConditions::simple(CssProperty::Cursor(StyleCursorValue::Exact(
2586                                                           StyleCursor::Pointer,
2587                                                       ))),
2588                                                       CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
2589                                                           LayoutHeight::Px(PixelValue::const_px(15),),
2590                                                       ))),
2591                                                       CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
2592                                                           LayoutWidth::Px(PixelValue::const_px(15),),
2593                                                       ))),
2594                                                   ])
2595                                               )
2596                                               .with_ids_and_classes({
2597                                                   const IDS_AND_CLASSES_17632471664405317563:
2598                                                       &[IdOrClass] = &[Class(
2599                                                       AzString::from_const_str("node_output"),
2600                                                   )];
2601                                                   IdOrClassVec::from_const_slice(
2602                                                       IDS_AND_CLASSES_17632471664405317563,
2603                                                   )
2604                                               }),
2605                                           Dom::create_div()
2606                                               .with_css_props(
2607                                                   CSS_MATCH_12038890904436132038,
2608                                               )
2609                                               .with_ids_and_classes({
2610                                                   const IDS_AND_CLASSES_1667960214206134147:
2611                                                       &[IdOrClass] =
2612                                                       &[Class(AzString::from_const_str(
2613                                                           "node_output_connection_label_wrapper",
2614                                                       ))];
2615                                                   IdOrClassVec::from_const_slice(
2616                                                       IDS_AND_CLASSES_1667960214206134147,
2617                                                   )
2618                                               })
2619                                               .with_children(DomVec::from_vec(vec![Dom::create_text(
2620                                                   output_label,
2621                                               )
2622                                               .with_css_props(
2623                                                   CSS_MATCH_2008162367868363199,
2624                                               )
2625                                               .with_ids_and_classes({
2626                                                   const IDS_AND_CLASSES_2974914452796301884:
2627                                                       &[IdOrClass] =
2628                                                       &[Class(AzString::from_const_str(
2629                                                           "node_output_connection_label",
2630                                                       ))];
2631                                                   IdOrClassVec::from_const_slice(
2632                                                       IDS_AND_CLASSES_2974914452796301884,
2633                                                   )
2634                                               })])),
2635                                       ]))
2636                               }).collect()
2637                           ))])),
2638               ])),
2639        ]))
2640        .with_dataset(Some(node_local_dataset).into())
2641    ].into())
2642}
2643
2644#[allow(clippy::too_many_lines)] // large but cohesive: single-purpose layout/render/parse routine (one branch per case)
2645fn render_connections(node_graph: &NodeGraph, root_marker_nodedata: RefAny) -> Dom {
2646    static NODEGRAPH_CONNECTIONS_CONTAINER_CLASS: &[IdOrClass] = &[Class(
2647        AzString::from_const_str("nodegraph-connections-container"),
2648    )];
2649
2650    static NODEGRAPH_CONNECTIONS_CONTAINER_PROPS: &[CssPropertyWithConditions] = &[
2651        CssPropertyWithConditions::simple(CssProperty::position(LayoutPosition::Absolute)),
2652        CssPropertyWithConditions::simple(CssProperty::flex_grow(LayoutFlexGrow::const_new(1))),
2653    ];
2654
2655    Dom::create_div()
2656        .with_ids_and_classes(IdOrClassVec::from_const_slice(
2657            NODEGRAPH_CONNECTIONS_CONTAINER_CLASS,
2658        ))
2659        .with_css_props(CssPropertyWithConditionsVec::from_const_slice(
2660            NODEGRAPH_CONNECTIONS_CONTAINER_PROPS,
2661        ))
2662        .with_dataset(Some(root_marker_nodedata).into())
2663        .with_children({
2664            let mut children = Vec::new();
2665
2666            for NodeIdNodeMap { node_id, node } in node_graph.nodes.as_ref() {
2667                let out_node_id = node_id;
2668                let node_type_info = match node_graph
2669                    .node_types
2670                    .iter()
2671                    .find(|i| i.node_type_id == node.node_type)
2672                {
2673                    Some(s) => &s.node_type_info,
2674                    None => continue,
2675                };
2676
2677                for OutputConnection {
2678                    output_index,
2679                    connects_to,
2680                } in node.connect_out.as_ref()
2681                {
2682                    let Some(output_type_id) = node_type_info.outputs.get(*output_index) else {
2683                        continue;
2684                    };
2685
2686                    let output_color = match node_graph
2687                        .input_output_types
2688                        .iter()
2689                        .find(|o| o.io_type_id == *output_type_id)
2690                    {
2691                        Some(s) => s.io_info.color,
2692                        None => continue,
2693                    };
2694
2695                    for InputNodeAndIndex {
2696                        node_id,
2697                        input_index,
2698                    } in connects_to.as_ref()
2699                    {
2700                        let in_node_id = node_id;
2701
2702                        let mut cld = ConnectionLocalDataset {
2703                            out_node_id: *out_node_id,
2704                            out_idx: *output_index,
2705                            in_node_id: *in_node_id,
2706                            in_idx: *input_index,
2707                            swap_vert: false,
2708                            swap_horz: false,
2709                            color: output_color,
2710                        };
2711
2712                        let Some((rect, swap_vert, swap_horz)) = get_rect(node_graph, cld) else {
2713                            continue;
2714                        };
2715
2716                        cld.swap_vert = swap_vert;
2717                        cld.swap_horz = swap_horz;
2718
2719                        let cld_refany = RefAny::new(cld);
2720                        let connection_div = Dom::create_image(ImageRef::callback(
2721                            draw_connection as usize,
2722                            cld_refany.clone(),
2723                        ))
2724                        .with_dataset(Some(cld_refany).into())
2725                        .with_css_props(
2726                            vec![
2727                                CssPropertyWithConditions::simple(CssProperty::Transform(
2728                                    StyleTransformVecValue::Exact(
2729                                        vec![
2730                                            StyleTransform::Translate(StyleTransformTranslate2D {
2731                                                x: PixelValue::px(
2732                                                    node_graph.offset.x + rect.origin.x,
2733                                                ),
2734                                                y: PixelValue::px(
2735                                                    node_graph.offset.y + rect.origin.y,
2736                                                ),
2737                                            }),
2738                                            StyleTransform::ScaleX(PercentageValue::new(
2739                                                node_graph.scale_factor * 100.0,
2740                                            )),
2741                                            StyleTransform::ScaleY(PercentageValue::new(
2742                                                node_graph.scale_factor * 100.0,
2743                                            )),
2744                                        ]
2745                                        .into(),
2746                                    ),
2747                                )),
2748                                CssPropertyWithConditions::simple(CssProperty::Width(
2749                                    LayoutWidthValue::Exact(LayoutWidth::Px(PixelValue::px(
2750                                        rect.size.width,
2751                                    ))),
2752                                )),
2753                                CssPropertyWithConditions::simple(CssProperty::Height(
2754                                    LayoutHeightValue::Exact(LayoutHeight::Px(PixelValue::px(
2755                                        rect.size.height,
2756                                    ))),
2757                                )),
2758                            ]
2759                            .into(),
2760                        );
2761
2762                        children.push(
2763                            Dom::create_div()
2764                                .with_css(
2765                                    "flex-grow: 1; position: absolute; overflow: hidden;",
2766                                )
2767                                .with_children(vec![connection_div].into()),
2768                        );
2769                    }
2770                }
2771            }
2772
2773            children.into()
2774        })
2775}
2776
2777#[allow(clippy::cast_possible_truncation, clippy::cast_sign_loss)] // bounded layout/render numeric cast
2778extern "C" fn draw_connection(mut refany: RefAny, _info: ()) -> ImageRef {
2779    // RenderImageCallbackInfo not available in memtest
2780    // let size = info.get_bounds().get_physical_size();
2781    let size = LogicalSize {
2782        width: 100.0,
2783        height: 100.0,
2784    };
2785    
2786
2787    // Cannot call draw_connection_inner without RenderImageCallbackInfo
2788    ImageRef::null_image(
2789        size.width as usize,
2790        size.height as usize,
2791        RawImageFormat::R8,
2792        Vec::new(),
2793    )
2794}
2795
2796const NODE_WIDTH: f32 = 250.0;
2797const V_OFFSET: f32 = 71.0;
2798const DIST_BETWEEN_NODES: f32 = 10.0;
2799const CONNECTION_DOT_HEIGHT: f32 = 15.0;
2800
2801// calculates the rect on which the connection is drawn in the UI
2802#[allow(clippy::suboptimal_flops)] // mul_add not guaranteed faster/available without target +fma; keep explicit a*b+c
2803#[allow(clippy::cast_precision_loss)] // bounded layout/render numeric cast
2804fn get_rect(
2805    node_graph: &NodeGraph,
2806    connection: ConnectionLocalDataset,
2807) -> Option<(LogicalRect, bool, bool)> {
2808    let ConnectionLocalDataset {
2809        out_node_id,
2810        out_idx,
2811        in_node_id,
2812        in_idx,
2813        ..
2814    } = connection;
2815    let out_node = node_graph.nodes.iter().find(|i| i.node_id == out_node_id)?;
2816    let in_node = node_graph.nodes.iter().find(|i| i.node_id == in_node_id)?;
2817
2818    let x_out = out_node.node.position.x + NODE_WIDTH;
2819    let y_out = out_node.node.position.y
2820        + V_OFFSET
2821        + (out_idx as f32 * (DIST_BETWEEN_NODES + CONNECTION_DOT_HEIGHT));
2822
2823    let x_in = in_node.node.position.x;
2824    let y_in = in_node.node.position.y
2825        + V_OFFSET
2826        + (in_idx as f32 * (DIST_BETWEEN_NODES + CONNECTION_DOT_HEIGHT));
2827
2828    let should_swap_vertical = y_in > y_out;
2829    let should_swap_horizontal = x_in < x_out;
2830
2831    let width = (x_in - x_out).abs();
2832    let height = (y_in - y_out).abs() + CONNECTION_DOT_HEIGHT;
2833
2834    let x = x_in.min(x_out);
2835    let y = y_in.min(y_out);
2836
2837    Some((
2838        LogicalRect {
2839            size: LogicalSize { width, height },
2840            origin: LogicalPosition { x, y },
2841        },
2842        should_swap_vertical,
2843        should_swap_horizontal,
2844    ))
2845}
2846
2847extern "C" fn nodegraph_set_active_node(mut refany: RefAny, _info: CallbackInfo) -> Update {
2848    let data_clone = refany.clone();
2849    if let Some(mut refany) = refany.downcast_mut::<NodeLocalDataset>() {
2850        let node_id = refany.node_id;
2851        if let Some(mut backref) = refany.backref.downcast_mut::<NodeGraphLocalDataset>() {
2852            backref.active_node_being_dragged = Some((node_id, data_clone));
2853        }
2854    }
2855    Update::DoNothing
2856}
2857
2858extern "C" fn nodegraph_unset_active_node(mut refany: RefAny, _info: CallbackInfo) -> Update {
2859    if let Some(mut refany) = refany.downcast_mut::<NodeGraphLocalDataset>() {
2860        refany.active_node_being_dragged = None;
2861    }
2862    Update::DoNothing
2863}
2864
2865// drag either the graph or the currently active nodes
2866#[allow(clippy::float_cmp)] // intentional exact compare: change-detection / identity fast-path / cache-key match
2867#[allow(clippy::too_many_lines)] // large but cohesive: single-purpose layout/render/parse routine (one branch per case)
2868#[allow(clippy::single_match_else)] // drag-node (Some) and drag-graph (None) are each ~135-line blocks; match labels the two modes far more clearly than if-let/else
2869extern "C" fn nodegraph_drag_graph_or_nodes(mut refany: RefAny, mut info: CallbackInfo) -> Update {
2870    let Some(mut refany) = refany.downcast_mut::<NodeGraphLocalDataset>() else {
2871        return Update::DoNothing;
2872    };
2873    let refany = &mut *refany;
2874
2875    let Some(prev) = info.get_previous_mouse_state() else {
2876        return Update::DoNothing;
2877    };
2878    let cur = info.get_current_mouse_state();
2879    if !(cur.left_down && prev.left_down) {
2880        // event is not a drag event
2881        return Update::DoNothing;
2882    }
2883
2884    let (InWindow(current_mouse_pos), InWindow(previous_mouse_pos)) =
2885        (cur.cursor_position, prev.cursor_position)
2886    else {
2887        return Update::DoNothing;
2888    };
2889
2890    let dx = (current_mouse_pos.x - previous_mouse_pos.x) * (1.0 / refany.node_graph.scale_factor);
2891    let dy = (current_mouse_pos.y - previous_mouse_pos.y) * (1.0 / refany.node_graph.scale_factor);
2892    let nodegraph_node = info.get_hit_node();
2893
2894    let should_update = match refany.active_node_being_dragged.clone() {
2895        // drag node
2896        Some((node_graph_node_id, data_marker)) => {
2897            let node_connection_marker = &mut refany.node_connection_marker;
2898
2899            let _nodegraph_node = info.get_hit_node();
2900            let result = match refany.callbacks.on_node_dragged.as_ref() {
2901                Some(OnNodeDragged { callback, refany }) => (callback.cb)(
2902                    refany.clone(),
2903                    info,
2904                    node_graph_node_id,
2905                    NodeDragAmount { x: dx, y: dy },
2906                ),
2907                None => Update::DoNothing,
2908            };
2909
2910            // update the visual transform of the node in the UI
2911            let node_position = match refany
2912                .node_graph
2913                .nodes
2914                .iter_mut()
2915                .find(|i| i.node_id == node_graph_node_id)
2916            {
2917                Some(s) => {
2918                    s.node.position.x += dx;
2919                    s.node.position.y += dy;
2920                    s.node.position
2921                }
2922                None => return Update::DoNothing,
2923            };
2924
2925            let Some(visual_node_id) = info.get_node_id_of_root_dataset(data_marker) else {
2926                return Update::DoNothing;
2927            };
2928
2929            let node_transform = StyleTransformTranslate2D {
2930                x: PixelValue::px(node_position.x + refany.node_graph.offset.x),
2931                y: PixelValue::px(node_position.y + refany.node_graph.offset.y),
2932            };
2933
2934            info.set_css_property(
2935                visual_node_id,
2936                CssProperty::transform(
2937                    if refany.node_graph.scale_factor == 1.0 {
2938                        vec![StyleTransform::Translate(node_transform)]
2939                    } else {
2940                        vec![
2941                            StyleTransform::Translate(node_transform),
2942                            StyleTransform::ScaleX(PercentageValue::new(
2943                                refany.node_graph.scale_factor * 100.0,
2944                            )),
2945                            StyleTransform::ScaleY(PercentageValue::new(
2946                                refany.node_graph.scale_factor * 100.0,
2947                            )),
2948                        ]
2949                    }
2950                    .into(),
2951                ),
2952            );
2953
2954            // get the NodeId of the node containing all the connection lines
2955            let Some(connection_container_nodeid) =
2956                info.get_node_id_of_root_dataset(node_connection_marker.clone())
2957            else {
2958                return result;
2959            };
2960
2961            // animate all the connections
2962            let mut first_connection_child = info.get_first_child(connection_container_nodeid);
2963
2964            while let Some(connection_nodeid) = first_connection_child {
2965                first_connection_child = info.get_next_sibling(connection_nodeid);
2966
2967                let Some(first_child) = info.get_first_child(connection_nodeid) else {
2968                    continue;
2969                };
2970
2971                let Some(mut dataset) = info.get_dataset(first_child) else {
2972                    continue;
2973                };
2974
2975                let Some(mut cld) = dataset.downcast_mut::<ConnectionLocalDataset>() else {
2976                    continue;
2977                };
2978
2979                if !(cld.out_node_id == node_graph_node_id || cld.in_node_id == node_graph_node_id)
2980                {
2981                    continue; // connection does not need to be modified
2982                }
2983
2984                let Some((new_rect, swap_vert, swap_horz)) = get_rect(&refany.node_graph, *cld)
2985                else {
2986                    continue;
2987                };
2988
2989                cld.swap_vert = swap_vert;
2990                cld.swap_horz = swap_horz;
2991
2992                let node_transform = StyleTransformTranslate2D {
2993                    x: PixelValue::px(refany.node_graph.offset.x + new_rect.origin.x),
2994                    y: PixelValue::px(refany.node_graph.offset.y + new_rect.origin.y),
2995                };
2996
2997                info.set_css_property(
2998                    first_child,
2999                    CssProperty::transform(
3000                        if refany.node_graph.scale_factor == 1.0 {
3001                            vec![StyleTransform::Translate(node_transform)]
3002                        } else {
3003                            vec![
3004                                StyleTransform::Translate(node_transform),
3005                                StyleTransform::ScaleX(PercentageValue::new(
3006                                    refany.node_graph.scale_factor * 100.0,
3007                                )),
3008                                StyleTransform::ScaleY(PercentageValue::new(
3009                                    refany.node_graph.scale_factor * 100.0,
3010                                )),
3011                            ]
3012                        }
3013                        .into(),
3014                    ),
3015                );
3016
3017                info.set_css_property(
3018                    first_child,
3019                    CssProperty::Width(LayoutWidthValue::Exact(LayoutWidth::Px(PixelValue::px(
3020                        new_rect.size.width,
3021                    )))),
3022                );
3023                info.set_css_property(
3024                    first_child,
3025                    CssProperty::Height(LayoutHeightValue::Exact(LayoutHeight::Px(
3026                        PixelValue::px(new_rect.size.height),
3027                    ))),
3028                );
3029            }
3030
3031            result
3032        }
3033        // drag graph
3034        None => {
3035            let result = match refany.callbacks.on_node_graph_dragged.as_ref() {
3036                Some(OnNodeGraphDragged { callback, refany }) => (callback.cb)(
3037                    refany.clone(),
3038                    info,
3039                    GraphDragAmount { x: dx, y: dy },
3040                ),
3041                None => Update::DoNothing,
3042            };
3043
3044            refany.node_graph.offset.x += dx;
3045            refany.node_graph.offset.y += dy;
3046
3047            // Update the visual node positions
3048            let Some(node_container) = info.get_first_child(nodegraph_node) else {
3049                return Update::DoNothing;
3050            };
3051
3052            let Some(node_container) = info.get_next_sibling(node_container) else {
3053                return Update::DoNothing;
3054            };
3055
3056            let Some(mut node) = info.get_first_child(node_container) else {
3057                return Update::DoNothing;
3058            };
3059
3060            loop {
3061                let Some(node_first_child) = info.get_first_child(node) else {
3062                    return Update::DoNothing;
3063                };
3064
3065                let mut node_local_dataset = match info.get_dataset(node_first_child) {
3066                    None => return Update::DoNothing,
3067                    Some(s) => s,
3068                };
3069
3070                let Some(node_graph_node_id) =
3071                    node_local_dataset.downcast_ref::<NodeLocalDataset>()
3072                else {
3073                    continue;
3074                };
3075
3076                let node_graph_node_id = node_graph_node_id.node_id;
3077
3078                let node_position = match refany
3079                    .node_graph
3080                    .nodes
3081                    .iter()
3082                    .find(|i| i.node_id == node_graph_node_id)
3083                {
3084                    Some(s) => s.node.position,
3085                    None => continue,
3086                };
3087
3088                let node_transform = StyleTransformTranslate2D {
3089                    x: PixelValue::px(node_position.x + refany.node_graph.offset.x),
3090                    y: PixelValue::px(node_position.y + refany.node_graph.offset.y),
3091                };
3092
3093                info.set_css_property(
3094                    node_first_child,
3095                    CssProperty::transform(
3096                        if refany.node_graph.scale_factor == 1.0 {
3097                            vec![StyleTransform::Translate(node_transform)]
3098                        } else {
3099                            vec![
3100                                StyleTransform::Translate(node_transform),
3101                                StyleTransform::ScaleX(PercentageValue::new(
3102                                    refany.node_graph.scale_factor * 100.0,
3103                                )),
3104                                StyleTransform::ScaleY(PercentageValue::new(
3105                                    refany.node_graph.scale_factor * 100.0,
3106                                )),
3107                            ]
3108                        }
3109                        .into(),
3110                    ),
3111                );
3112
3113                node = match info.get_next_sibling(node) {
3114                    Some(s) => s,
3115                    None => break,
3116                };
3117            }
3118
3119            let node_connection_marker = &mut refany.node_connection_marker;
3120
3121            // Update the connection positions
3122            let Some(connection_container_nodeid) =
3123                info.get_node_id_of_root_dataset(node_connection_marker.clone())
3124            else {
3125                return result;
3126            };
3127
3128            let mut first_connection_child = info.get_first_child(connection_container_nodeid);
3129
3130            while let Some(connection_nodeid) = first_connection_child {
3131                first_connection_child = info.get_next_sibling(connection_nodeid);
3132
3133                let Some(first_child) = info.get_first_child(connection_nodeid) else {
3134                    continue;
3135                };
3136
3137                let Some(mut dataset) = info.get_dataset(first_child) else {
3138                    continue;
3139                };
3140
3141                let Some(cld) = dataset.downcast_ref::<ConnectionLocalDataset>() else {
3142                    continue;
3143                };
3144
3145                let Some((new_rect, _, _)) = get_rect(&refany.node_graph, *cld) else {
3146                    continue;
3147                };
3148
3149                info.set_css_property(
3150                    first_child,
3151                    CssProperty::transform(
3152                        vec![
3153                            StyleTransform::Translate(StyleTransformTranslate2D {
3154                                x: PixelValue::px(refany.node_graph.offset.x + new_rect.origin.x),
3155                                y: PixelValue::px(refany.node_graph.offset.y + new_rect.origin.y),
3156                            }),
3157                            StyleTransform::ScaleX(PercentageValue::new(
3158                                refany.node_graph.scale_factor * 100.0,
3159                            )),
3160                            StyleTransform::ScaleY(PercentageValue::new(
3161                                refany.node_graph.scale_factor * 100.0,
3162                            )),
3163                        ]
3164                        .into(),
3165                    ),
3166                );
3167            }
3168
3169            result
3170        }
3171    };
3172
3173    info.stop_propagation();
3174
3175    should_update
3176}
3177
3178extern "C" fn nodegraph_duplicate_node(mut refany: RefAny, _info: CallbackInfo) -> Update {
3179    let Some(_data) = refany.downcast_mut::<NodeLocalDataset>() else {
3180        return Update::DoNothing;
3181    };
3182
3183    Update::DoNothing // TODO
3184}
3185
3186extern "C" fn nodegraph_delete_node(mut refany: RefAny, mut info: CallbackInfo) -> Update {
3187    let Some(mut refany) = refany.downcast_mut::<NodeLocalDataset>() else {
3188        return Update::DoNothing;
3189    };
3190
3191    let node_id = refany.node_id;
3192
3193    let Some(mut backref) = refany.backref.downcast_mut::<NodeGraphLocalDataset>() else {
3194        return Update::DoNothing;
3195    };
3196
3197    let result = match backref.callbacks.on_node_removed.as_ref() {
3198        Some(OnNodeRemoved { callback, refany }) => (callback.cb)(refany.clone(), info, node_id),
3199        None => Update::DoNothing,
3200    };
3201
3202    result
3203}
3204
3205#[allow(clippy::suboptimal_flops)] // mul_add not guaranteed faster/available without target +fma; keep explicit a*b+c
3206#[allow(clippy::match_same_arms)] // enum/value mapping/dispatch table: one arm per input variant (or cross-type bindings that can't merge)
3207extern "C" fn nodegraph_context_menu_click(mut refany: RefAny, mut info: CallbackInfo) -> Update {
3208    use azul_core::window::CursorPosition;
3209
3210    let Some(mut refany) = refany.downcast_mut::<ContextMenuEntryLocalDataset>() else {
3211        return Update::DoNothing;
3212    };
3213
3214    let new_node_type = refany.node_type;
3215
3216    let Some(node_graph_wrapper_id) = info.get_node_id_of_root_dataset(refany.backref.clone())
3217    else {
3218        return Update::DoNothing;
3219    };
3220
3221    let Some(mut backref) = refany.backref.downcast_mut::<NodeGraphLocalDataset>() else {
3222        return Update::DoNothing;
3223    };
3224
3225    let node_wrapper_offset = info
3226        .get_node_position(node_graph_wrapper_id)
3227        .map_or((0.0, 0.0), |p| (p.x, p.y));
3228
3229    let cursor_in_viewport = match info.get_current_mouse_state().cursor_position {
3230        InWindow(i) => i,
3231        CursorPosition::OutOfWindow(i) => i,
3232        CursorPosition::Uninitialized => LogicalPosition::zero(),
3233    };
3234
3235    let new_node_pos = NodeGraphNodePosition {
3236        x: (cursor_in_viewport.x - node_wrapper_offset.0) * (1.0 / backref.node_graph.scale_factor)
3237            - backref.node_graph.offset.x,
3238        y: (cursor_in_viewport.y - node_wrapper_offset.1) * (1.0 / backref.node_graph.scale_factor)
3239            - backref.node_graph.offset.y,
3240    };
3241
3242    let new_node_id = backref.node_graph.generate_unique_node_id();
3243
3244    let result = match backref.callbacks.on_node_added.as_ref() {
3245        Some(OnNodeAdded { callback, refany }) => (callback.cb)(
3246            refany.clone(),
3247            info,
3248            new_node_type,
3249            new_node_id,
3250            new_node_pos,
3251        ),
3252        None => Update::DoNothing,
3253    };
3254
3255    result
3256}
3257
3258extern "C" fn nodegraph_input_output_connect(mut refany: RefAny, mut info: CallbackInfo) -> Update {
3259    use self::InputOrOutput::{Input, Output};
3260
3261    let Some(mut refany) = refany.downcast_mut::<NodeInputOutputLocalDataset>() else {
3262        return Update::DoNothing;
3263    };
3264
3265    let io_id = refany.io_id;
3266
3267    let Some(mut backref) = refany.backref.downcast_mut::<NodeLocalDataset>() else {
3268        return Update::DoNothing;
3269    };
3270
3271    let node_id = backref.node_id;
3272
3273    let Some(mut backref) = backref.backref.downcast_mut::<NodeGraphLocalDataset>() else {
3274        return Update::DoNothing;
3275    };
3276
3277    let (input_node, input_index, output_node, output_index) =
3278        match backref.last_input_or_output_clicked {
3279            None => {
3280                backref.last_input_or_output_clicked = Some((node_id, io_id));
3281                return Update::DoNothing;
3282            }
3283            Some((prev_node_id, prev_io_id)) => {
3284                match (prev_io_id, io_id) {
3285                    (Input(i), Output(o)) => (prev_node_id, i, node_id, o),
3286                    (Output(o), Input(i)) => (node_id, i, prev_node_id, o),
3287                    _ => {
3288                        // error: trying to connect input to input or output to output
3289                        backref.last_input_or_output_clicked = None;
3290                        return Update::DoNothing;
3291                    }
3292                }
3293            }
3294        };
3295
3296    // verify that the nodetype matches
3297    match backref.node_graph.connect_input_output(
3298        input_node,
3299        input_index,
3300        output_node,
3301        output_index,
3302    ) {
3303        Ok(()) => {}
3304        Err(e) => {
3305            eprintln!("{e:?}");
3306            backref.last_input_or_output_clicked = None;
3307            return Update::DoNothing;
3308        }
3309    }
3310
3311    let result = match backref.callbacks.on_node_connected.as_ref() {
3312        Some(OnNodeConnected { callback, refany }) => {
3313            let r = (callback.cb)(
3314                refany.clone(),
3315                info,
3316                input_node,
3317                input_index,
3318                output_node,
3319                output_index,
3320            );
3321            backref.last_input_or_output_clicked = None;
3322            r
3323        }
3324        None => Update::DoNothing,
3325    };
3326
3327    result
3328}
3329
3330extern "C" fn nodegraph_input_output_disconnect(mut refany: RefAny, info: CallbackInfo) -> Update {
3331    use self::InputOrOutput::{Input, Output};
3332
3333    let Some(mut refany) = refany.downcast_mut::<NodeInputOutputLocalDataset>() else {
3334        return Update::DoNothing;
3335    };
3336
3337    let io_id = refany.io_id;
3338
3339    let Some(mut backref) = refany.backref.downcast_mut::<NodeLocalDataset>() else {
3340        return Update::DoNothing;
3341    };
3342
3343    let node_id = backref.node_id;
3344
3345    let Some(mut backref) = backref.backref.downcast_mut::<NodeGraphLocalDataset>() else {
3346        return Update::DoNothing;
3347    };
3348
3349    let mut result = Update::DoNothing;
3350    match io_id {
3351        Input(i) => {
3352            result.max_self(
3353                match backref.callbacks.on_node_input_disconnected.as_ref() {
3354                    Some(OnNodeInputDisconnected { callback, refany }) => {
3355                        (callback.cb)(refany.clone(), info, node_id, i)
3356                    }
3357                    None => Update::DoNothing,
3358                },
3359            );
3360        }
3361        Output(o) => {
3362            result.max_self(
3363                match backref.callbacks.on_node_output_disconnected.as_ref() {
3364                    Some(OnNodeOutputDisconnected { callback, refany }) => {
3365                        (callback.cb)(refany.clone(), info, node_id, o)
3366                    }
3367                    None => Update::DoNothing,
3368                },
3369            );
3370        }
3371    }
3372
3373    result
3374}
3375
3376extern "C" fn nodegraph_on_textinput_focus_lost(
3377    mut refany: RefAny,
3378    info: CallbackInfo,
3379    textinputstate: TextInputState,
3380) -> Update {
3381    let Some(mut refany) = refany.downcast_mut::<NodeFieldLocalDataset>() else {
3382        return Update::DoNothing;
3383    };
3384
3385    let field_idx = refany.field_idx;
3386
3387    let Some(mut node_local_dataset) = refany.backref.downcast_mut::<NodeLocalDataset>() else {
3388        return Update::DoNothing;
3389    };
3390
3391    let node_id = node_local_dataset.node_id;
3392
3393    let Some(mut node_graph) = node_local_dataset
3394        .backref
3395        .downcast_mut::<NodeGraphLocalDataset>()
3396    else {
3397        return Update::DoNothing;
3398    };
3399
3400    let node_type = match node_graph
3401        .node_graph
3402        .nodes
3403        .iter()
3404        .find(|i| i.node_id == node_id)
3405    {
3406        Some(s) => s.node.node_type,
3407        None => return Update::DoNothing,
3408    };
3409
3410    let result = match node_graph.callbacks.on_node_field_edited.as_ref() {
3411        Some(OnNodeFieldEdited { refany, callback }) => (callback.cb)(
3412            refany.clone(),
3413            info,
3414            node_id,
3415            field_idx,
3416            node_type,
3417            NodeTypeFieldValue::TextInput(textinputstate.get_text().into()),
3418        ),
3419        None => Update::DoNothing,
3420    };
3421
3422    result
3423}
3424
3425extern "C" fn nodegraph_on_numberinput_focus_lost(
3426    mut refany: RefAny,
3427    info: CallbackInfo,
3428    numberinputstate: NumberInputState,
3429) -> Update {
3430    let Some(mut refany) = refany.downcast_mut::<NodeFieldLocalDataset>() else {
3431        return Update::DoNothing;
3432    };
3433
3434    let field_idx = refany.field_idx;
3435
3436    let Some(mut node_local_dataset) = refany.backref.downcast_mut::<NodeLocalDataset>() else {
3437        return Update::DoNothing;
3438    };
3439
3440    let node_id = node_local_dataset.node_id;
3441
3442    let Some(mut node_graph) = node_local_dataset
3443        .backref
3444        .downcast_mut::<NodeGraphLocalDataset>()
3445    else {
3446        return Update::DoNothing;
3447    };
3448
3449    let node_type = match node_graph
3450        .node_graph
3451        .nodes
3452        .iter()
3453        .find(|i| i.node_id == node_id)
3454    {
3455        Some(s) => s.node.node_type,
3456        None => return Update::DoNothing,
3457    };
3458
3459    let result = match node_graph.callbacks.on_node_field_edited.as_ref() {
3460        Some(OnNodeFieldEdited { refany, callback }) => (callback.cb)(
3461            refany.clone(),
3462            info,
3463            node_id,
3464            field_idx,
3465            node_type,
3466            NodeTypeFieldValue::NumberInput(numberinputstate.number),
3467        ),
3468        None => Update::DoNothing,
3469    };
3470
3471    result
3472}
3473
3474extern "C" fn nodegraph_on_checkbox_value_changed(
3475    mut refany: RefAny,
3476    info: CallbackInfo,
3477    checkboxinputstate: CheckBoxState,
3478) -> Update {
3479    let Some(mut refany) = refany.downcast_mut::<NodeFieldLocalDataset>() else {
3480        return Update::DoNothing;
3481    };
3482
3483    let field_idx = refany.field_idx;
3484
3485    let Some(mut node_local_dataset) = refany.backref.downcast_mut::<NodeLocalDataset>() else {
3486        return Update::DoNothing;
3487    };
3488
3489    let node_id = node_local_dataset.node_id;
3490
3491    let Some(mut node_graph) = node_local_dataset
3492        .backref
3493        .downcast_mut::<NodeGraphLocalDataset>()
3494    else {
3495        return Update::DoNothing;
3496    };
3497
3498    let node_type = match node_graph
3499        .node_graph
3500        .nodes
3501        .iter()
3502        .find(|i| i.node_id == node_id)
3503    {
3504        Some(s) => s.node.node_type,
3505        None => return Update::DoNothing,
3506    };
3507
3508    let result = match node_graph.callbacks.on_node_field_edited.as_ref() {
3509        Some(OnNodeFieldEdited { refany, callback }) => (callback.cb)(
3510            refany.clone(),
3511            info,
3512            node_id,
3513            field_idx,
3514            node_type,
3515            NodeTypeFieldValue::CheckBox(checkboxinputstate.checked),
3516        ),
3517        None => Update::DoNothing,
3518    };
3519
3520    result
3521}
3522
3523extern "C" fn nodegraph_on_colorinput_value_changed(
3524    mut refany: RefAny,
3525    info: CallbackInfo,
3526    colorinputstate: ColorInputState,
3527) -> Update {
3528    let Some(mut refany) = refany.downcast_mut::<NodeFieldLocalDataset>() else {
3529        return Update::DoNothing;
3530    };
3531
3532    let field_idx = refany.field_idx;
3533
3534    let Some(mut node_local_dataset) = refany.backref.downcast_mut::<NodeLocalDataset>() else {
3535        return Update::DoNothing;
3536    };
3537
3538    let node_id = node_local_dataset.node_id;
3539    let Some(mut node_graph) = node_local_dataset
3540        .backref
3541        .downcast_mut::<NodeGraphLocalDataset>()
3542    else {
3543        return Update::DoNothing;
3544    };
3545
3546    let node_type = match node_graph
3547        .node_graph
3548        .nodes
3549        .iter()
3550        .find(|i| i.node_id == node_id)
3551    {
3552        Some(s) => s.node.node_type,
3553        None => return Update::DoNothing,
3554    };
3555
3556    let result = match node_graph.callbacks.on_node_field_edited.as_ref() {
3557        Some(OnNodeFieldEdited { refany, callback }) => (callback.cb)(
3558            refany.clone(),
3559            info,
3560            node_id,
3561            field_idx,
3562            node_type,
3563            NodeTypeFieldValue::ColorInput(colorinputstate.color),
3564        ),
3565        None => Update::DoNothing,
3566    };
3567
3568    result
3569}
3570
3571extern "C" fn nodegraph_on_fileinput_button_clicked(
3572    mut refany: RefAny,
3573    info: CallbackInfo,
3574    file: FileInputState,
3575) -> Update {
3576    let Some(mut refany) = refany.downcast_mut::<NodeFieldLocalDataset>() else {
3577        return Update::DoNothing;
3578    };
3579
3580    let field_idx = refany.field_idx;
3581
3582    let Some(mut node_local_dataset) = refany.backref.downcast_mut::<NodeLocalDataset>() else {
3583        return Update::DoNothing;
3584    };
3585
3586    let node_id = node_local_dataset.node_id;
3587    let Some(mut node_graph) = node_local_dataset
3588        .backref
3589        .downcast_mut::<NodeGraphLocalDataset>()
3590    else {
3591        return Update::DoNothing;
3592    };
3593
3594    let node_type = match node_graph
3595        .node_graph
3596        .nodes
3597        .iter()
3598        .find(|i| i.node_id == node_id)
3599    {
3600        Some(s) => s.node.node_type,
3601        None => return Update::DoNothing,
3602    };
3603
3604    // If a new file was selected, invoke callback
3605    let result = match node_graph.callbacks.on_node_field_edited.as_ref() {
3606        Some(OnNodeFieldEdited { refany, callback }) => (callback.cb)(
3607            refany.clone(),
3608            info,
3609            node_id,
3610            field_idx,
3611            node_type,
3612            NodeTypeFieldValue::FileInput(file.path),
3613        ),
3614        None => return Update::DoNothing,
3615    };
3616
3617    result
3618}