Skip to content

Add rf-node-label class to node labels and protect settings gear #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
philippjfr merged 4 commits into from
Feb 11, 2026
Merged

Add rf-node-label class to node labels and protect settings gear #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
846f45a
Initial plan
Copilot Feb 9, 2026
0c54ea0
Add rf-node-label class to label div
Copilot Feb 9, 2026
4a2a50c
review feedback
MarcSkovMadsen Feb 9, 2026
cc9cc9e
Merge pull request #44 from MarcSkovMadsen/copilot/add-class-name-to-…
MarcSkovMadsen Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/panel_reactflow/dist/css/reactflow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,15 @@
}

.rf-node-toolbar-button {
position: absolute;
Copy link
Contributor

@MarcSkovMadsen MarcSkovMadsen Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This solves #41. Don't know if its the best way to do it.

top: 7px;
right: 7px;
float: right;
border: none;
background: transparent;
font-size: 17px;
line-height: 18px;
cursor: pointer;
z-index: 2;
padding: 0;
margin: 0 0 0 6px;
transition: color 0.1s;
}

Expand Down
104 changes: 28 additions & 76 deletions src/panel_reactflow/models/reactflow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,5 @@
import React from "react";
import {
Background,
Controls,
Handle,
MiniMap,
NodeToolbar,
Panel,
Position,
ReactFlow,
ReactFlowProvider,
addEdge,
useEdgesState,
useNodesState,
useReactFlow,
} from "@xyflow/react";
import { Background, Controls, Handle, MiniMap, NodeToolbar, Panel, Position, ReactFlow, ReactFlowProvider, addEdge, useEdgesState, useNodesState, useReactFlow } from "@xyflow/react";
import "@xyflow/react/dist/style.css";

const { useCallback, useEffect, useMemo, useRef } = React;
Expand All @@ -26,12 +12,7 @@ const BUILTIN_NODE_TYPES = {

function renderHandles(direction, handles) {
if (!handles?.length) {
return (
<Handle
type={direction === "input" ? "target" : "source"}
position={direction === "input" ? Position.Left : Position.Right}
/>
);
return <Handle type={direction === "input" ? "target" : "source"} position={direction === "input" ? Position.Left : Position.Right} />;
}
const spacing = 100 / (handles.length + 1);
return handles.map((handle, index) => (
Expand All @@ -51,7 +32,7 @@ function makeNodeComponent(typeName, typeSpec, editorMode) {
const spec = typeSpec || {};
const hasEditor = data?._hasEditor;
const showGear = editorMode === "toolbar" && hasEditor;
const showToolbar = (editorMode === "toolbar" && toolbarOpen && hasEditor);
const showToolbar = editorMode === "toolbar" && toolbarOpen && hasEditor;
const showInlineEditor = editorMode === "node" && hasEditor;
const showView = data?.view && !spec.minimal;

Expand All @@ -65,43 +46,31 @@ function makeNodeComponent(typeName, typeSpec, editorMode) {
return (
<div className="rf-node-content">
{showToolbar ? (
<NodeToolbar
isVisible={true}
position={Position.Top}
style={{background: "white"}}
>
<NodeToolbar isVisible={true} position={Position.Top} style={{ background: "white" }}>
{data.editor}
</NodeToolbar>
): null}
) : null}
{showGear && (
<button
aria-label={showToolbar ? "Hide node toolbar" : "Show node toolbar"}
onClick={handleGearClick}
className={`rf-node-toolbar-button ${
showToolbar
? "rf-node-toolbar-button--open"
: "rf-node-toolbar-button--closed"
}`}
className={`rf-node-toolbar-button ${showToolbar ? "rf-node-toolbar-button--open" : "rf-node-toolbar-button--closed"}`}
tabIndex={0}
type="button"
title={showToolbar ? "Hide node toolbar" : "Show node toolbar"}
>
<img
src={import.meta.url.replace(/(\/[^\/?#]+)?(\?.*)?$/,"/icons/gear.svg")}
src={import.meta.url.replace(/(\/[^\/?#]+)?(\?.*)?$/, "/icons/gear.svg")}
alt=""
width={14}
height={14}
aria-hidden="true"
className={`rf-node-toolbar-icon ${
showToolbar
? "rf-node-toolbar-icon--open"
: "rf-node-toolbar-icon--closed"
}`}
className={`rf-node-toolbar-icon ${showToolbar ? "rf-node-toolbar-icon--open" : "rf-node-toolbar-icon--closed"}`}
/>
</button>
)}
{renderHandles("input", spec.inputs)}
<div style={{ fontWeight: 600, margin: displayLabel ? "0.2em 0 0.5em 0.5em" : "0" }}>
<div className="rf-node-label" style={{ fontWeight: 600, margin: displayLabel ? "0.2em 0 0.5em 0.5em" : "0" }}>
{displayLabel}
</div>
{(showView || showInlineEditor) && (
Expand Down Expand Up @@ -130,7 +99,7 @@ function useDebouncedSync(syncMode, debounceMs, syncFn) {
syncFn(payload);
}
},
[syncMode, debounceMs, syncFn]
[syncMode, debounceMs, syncFn],
);
}

Expand Down Expand Up @@ -193,7 +162,7 @@ function FlowInner({
}
const data = { ...(node.data || {}), ...(msg.patch || {}) };
return { ...node, data };
})
}),
);
return;
}
Expand All @@ -206,7 +175,7 @@ function FlowInner({
const data = { ...(edge.data || {}), ...(msg.patch || {}) };
const nextLabel = msg.patch?.label ?? edge.label;
return { ...edge, data, label: nextLabel };
})
}),
);
}
};
Expand All @@ -226,13 +195,8 @@ function FlowInner({

useEffect(() => {
const nodesSig = signature(pyNodes);
const viewsSig = signature(
(views || []).map((view) => view?.props?.id ?? null)
);
if (
nodesSig === lastHydrated.current.nodesSig &&
viewsSig === lastHydrated.current.viewsRef
) {
const viewsSig = signature((views || []).map((view) => view?.props?.id ?? null));
if (nodesSig === lastHydrated.current.nodesSig && viewsSig === lastHydrated.current.viewsRef) {
return;
}
lastHydrated.current.nodesSig = nodesSig;
Expand Down Expand Up @@ -279,7 +243,7 @@ function FlowInner({
}
model.send_msg(payload);
},
[model]
[model],
);

const schedulePatch = useDebouncedSync(syncMode, debounceMs, sendPatch);
Expand All @@ -295,15 +259,13 @@ function FlowInner({
setEdges(updated);
sendPatch({ type: "edge_added", edge: newEdge });
},
[enableConnect, sendPatch, setEdges]
[enableConnect, sendPatch, setEdges],
);

const handleNodesChange = useCallback(
(changes) => {
onNodesChange(changes);
const moved = changes.filter(
(change) => change.type === "position" && change.dragging !== true
);
const moved = changes.filter((change) => change.type === "position" && change.dragging !== true);
if (!moved.length) {
return;
}
Expand All @@ -315,7 +277,7 @@ function FlowInner({
});
});
},
[onNodesChange, schedulePatch]
[onNodesChange, schedulePatch],
);

const onSelectionChange = useCallback(
Expand All @@ -334,7 +296,7 @@ function FlowInner({
edges: selection.edges,
});
},
[currentSelection, schedulePatch, selectionSetter]
[currentSelection, schedulePatch, selectionSetter],
);

const onNodesDelete = useCallback(
Expand Down Expand Up @@ -363,21 +325,18 @@ function FlowInner({
...node,
data: { ...node.data, view_idx: viewIdx - shift },
};
})
}),
);
}
const deletedEdges = edgesRef.current.filter(
(edge) =>
deletedIds.includes(edge.source) || deletedIds.includes(edge.target)
);
const deletedEdges = edgesRef.current.filter((edge) => deletedIds.includes(edge.source) || deletedIds.includes(edge.target));
schedulePatch({
type: "node_deleted",
node_id: deletedIds.length === 1 ? deletedIds[0] : null,
node_ids: deletedIds,
deleted_edges: deletedEdges.map((edge) => edge.id),
});
},
[schedulePatch, setNodes]
[schedulePatch, setNodes],
);

const onEdgesDelete = useCallback(
Expand All @@ -388,7 +347,7 @@ function FlowInner({
edge_ids: deletedEdges.map((edge) => edge.id),
});
},
[schedulePatch]
[schedulePatch],
);

const onMoveEnd = useCallback(
Expand All @@ -397,7 +356,7 @@ function FlowInner({
viewportSetter(nextViewport);
}
},
[viewport, viewportSetter]
[viewport, viewportSetter],
);

return (
Expand Down Expand Up @@ -452,10 +411,7 @@ export function render({ model, view }) {
const leftPanels = model.get_child("left_panel");
const rightPanels = model.get_child("right_panel");

const allNodeTypes = useMemo(
() => ({ ...BUILTIN_NODE_TYPES, ...(pyNodeTypes || {}) }),
[pyNodeTypes]
);
const allNodeTypes = useMemo(() => ({ ...BUILTIN_NODE_TYPES, ...(pyNodeTypes || {}) }), [pyNodeTypes]);

const nodeEditorMap = {};
const nodeHasEditorMap = {};
Expand Down Expand Up @@ -515,11 +471,7 @@ export function render({ model, view }) {
const hydratedNodeTypes = useMemo(() => {
const mapping = {};
Object.entries({ ...BUILTIN_NODE_TYPES, ...(pyNodeTypes || {}) }).forEach(([typeName, spec]) => {
mapping[typeName] = makeNodeComponent(
typeName,
spec,
editorMode,
);
mapping[typeName] = makeNodeComponent(typeName, spec, editorMode);
});
return mapping;
}, [editorMode, pyNodeTypes]);
Expand Down Expand Up @@ -558,8 +510,8 @@ export function render({ model, view }) {
</Panel>
<Panel key="right-panel" position="center-right">
{rightPanels}
{(selection.nodes.length && editorMode === "side" && nodeHasEditorMap[selection.nodes[0]]) ? nodeEditorMap[selection.nodes[0]] : null}
{(selection.edges.length && !selection.nodes.length && edgeHasEditorMap[selection.edges[0]]) ? edgeEditorMap[selection.edges[0]] : null}
{selection.nodes.length && editorMode === "side" && nodeHasEditorMap[selection.nodes[0]] ? nodeEditorMap[selection.nodes[0]] : null}
{selection.edges.length && !selection.nodes.length && edgeHasEditorMap[selection.edges[0]] ? edgeEditorMap[selection.edges[0]] : null}
</Panel>
</ReactFlowProvider>
</div>
Expand Down