add padding for scope

aiida_workgraph/web/frontend/src/rete/default.ts

@@ -125,14 +125,21 @@ function createDynamicNode(nodeData: any) {
   return node;
 }
 
+const customPadding = () => ({
+  top: 80,
+  left: 30,
+  right: 30,
+  bottom: 50
+});
+
 export async function createEditor(container: HTMLElement, workgraphData: any) {
   container.innerHTML = ''
 
   const editor = new NodeEditor<Schemes>();
   const area = new AreaPlugin<Schemes, AreaExtra>(container);
   const connection = new ConnectionPlugin<Schemes, AreaExtra>();
   const render = new ReactPlugin<Schemes, AreaExtra>();
-  const scopes = new ScopesPlugin<Schemes>();
+  const scopes = new ScopesPlugin<Schemes>({padding: customPadding});
   const arrange = new AutoArrangePlugin<Schemes>();
   const contextMenu = new ContextMenuPlugin<Schemes>({
     items: ContextMenuPresets.classic.setup([

aiida_workgraph/widget/js/default_rete.ts

@@ -172,14 +172,26 @@ export async function removeNode(editor, name) {
   });
 }
 
+/**
+ * Defines custom padding for a scope layout.
+ * The padding values are used by the ScopesPlugin to avoid node overlapping with the socket of the parent node.
+ */
+const customScopePadding = () => ({
+  top: 80,
+  left: 30,
+  right: 30,
+  bottom: 50
+});
+
+
 export async function createEditor(container: HTMLElement, settings: any) {
   container.innerHTML = ''
 
   const editor = new NodeEditor<Schemes>();
   const area = new AreaPlugin<Schemes, AreaExtra>(container);
   const connection = new ConnectionPlugin<Schemes, AreaExtra>();
   const render = new ReactPlugin<Schemes, AreaExtra>();
-  const scopes = new ScopesPlugin<Schemes>();
+  const scopes = new ScopesPlugin<Schemes>({padding: customScopePadding});
   const arrange = new AutoArrangePlugin<Schemes>();
   const contextMenu = new ContextMenuPlugin<Schemes>({
     items: ContextMenuPresets.classic.setup([

aiida_workgraph/widget/src/widget/html_template.py

@@ -162,14 +162,26 @@ class Connection extends ClassicPreset.Connection {}
           }
         }
 
+        /**
+        * Defines custom padding for a scope layout.
+        * The padding values are used by the ScopesPlugin to avoid node overlapping with the socket of the parent node.
+        */
+        const customScopePadding = () => ({
+          top: 80,
+          left: 30,
+          right: 30,
+          bottom: 50
+        });
+
+
         async function createEditor(container) {
             const socket = new ClassicPreset.Socket("socket");
 
             const editor = new NodeEditor(Schemes);
             const area = new AreaPlugin(container);
             const connection = new ConnectionPlugin();
             const render = new ReactPlugin({ createRoot });
-            const scopes = new ScopesPlugin();
+            const scopes = new ScopesPlugin({padding: customScopePadding});
             const arrange = new AutoArrangePlugin();
 
             const minimap = new MinimapPlugin({

docs/source/howto/html/if_task.html

@@ -61,7 +61,7 @@
         const { RenderUtils } = ReteRenderUtils;
         const styled = window.styled;
 
-        const workgraphData = {"name": "if_task", "uuid": "e9a9ef7a-5a57-11ef-a2bf-906584de3e5b", "state": "CREATED", "nodes": {"add1": {"label": "add1", "node_type": "CALCFUNCTION", "inputs": [{"name": "x", "identifier": "workgraph.any", "uuid": "e9b4afe6-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9b4a8ca-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "workgraph.any", "uuid": "e9b4b0b8-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9b4a8ca-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "result"}, {"name": "result"}], "position": [30, 30], "children": []}, "condition1": {"label": "condition1", "node_type": "CALCFUNCTION", "inputs": [{"name": "x", "identifier": "workgraph.any", "uuid": "e9be3a20-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9be3462-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "workgraph.any", "uuid": "e9be3a70-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9be3462-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}], "outputs": [{"name": "result"}, {"name": "result"}, {"name": "result"}], "position": [60, 60], "children": []}, "add2": {"label": "add2", "node_type": "CALCFUNCTION", "inputs": [{"name": "x", "identifier": "workgraph.any", "uuid": "e9c7f3a8-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9c7ec32-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "add1", "from_socket": "result", "from_socket_uuid": "e9b4b1e4-5a57-11ef-a2bf-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "workgraph.any", "uuid": "e9c7f402-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9c7ec32-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "x"}], "outputs": [{"name": "result"}], "position": [90, 90], "children": []}, "if_true": {"label": "if_true", "node_type": "IF", "inputs": [{"name": "conditions"}], "outputs": [], "position": [120, 120], "children": ["add2"]}, "multiply1": {"label": "multiply1", "node_type": "CALCFUNCTION", "inputs": [{"name": "x", "identifier": "workgraph.any", "uuid": "e9daaba6-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9daa5ac-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "add1", "from_socket": "result", "from_socket_uuid": "e9b4b1e4-5a57-11ef-a2bf-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "workgraph.any", "uuid": "e9daac00-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9daa5ac-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "x"}], "outputs": [{"name": "result"}], "position": [150, 150], "children": []}, "if_false": {"label": "if_false", "node_type": "IF", "inputs": [{"name": "conditions"}], "outputs": [], "position": [180, 180], "children": ["multiply1"]}, "select1": {"label": "select1", "node_type": "NORMAL", "inputs": [{"name": "condition", "identifier": "workgraph.any", "uuid": "e9ebced6-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9ebcd14-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "condition1", "from_socket": "result", "from_socket_uuid": "e9be3b42-5a57-11ef-a2bf-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "true", "identifier": "workgraph.any", "uuid": "e9ebcf9e-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9ebcd14-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "add2", "from_socket": "result", "from_socket_uuid": "e9c7f4ca-5a57-11ef-a2bf-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "false", "identifier": "workgraph.any", "uuid": "e9ebd002-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9ebcd14-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "multiply1", "from_socket": "result", "from_socket_uuid": "e9daaf34-5a57-11ef-a2bf-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "true"}, {"name": "false"}, {"name": "condition"}], "outputs": [{"name": "result"}], "position": [210, 210], "children": []}, "add3": {"label": "add3", "node_type": "CALCFUNCTION", "inputs": [{"name": "x", "identifier": "workgraph.any", "uuid": "e9f4696a-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9f4633e-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [{"from_node": "select1", "from_socket": "result", "from_socket_uuid": "e9ebd0c0-5a57-11ef-a2bf-906584de3e5b"}], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "y", "identifier": "workgraph.any", "uuid": "e9f469ce-5a57-11ef-a2bf-906584de3e5b", "node_uuid": "e9f4633e-5a57-11ef-a2bf-906584de3e5b", "type": "INPUT", "link_limit": 1, "links": [], "serialize": {"path": "node_graph.serializer", "name": "serialize_pickle"}, "deserialize": {"path": "node_graph.serializer", "name": "deserialize_pickle"}}, {"name": "x"}], "outputs": [], "position": [240, 240], "children": []}}, "links": [{"from_socket": "result", "from_node": "add1", "from_socket_uuid": "e9b4b1e4-5a57-11ef-a2bf-906584de3e5b", "to_socket": "x", "to_node": "add2", "state": false}, {"from_socket": "result", "from_node": "condition1", "from_socket_uuid": "e9be3b42-5a57-11ef-a2bf-906584de3e5b", "to_socket": "conditions", "to_node": "if_true", "state": false}, {"from_socket": "result", "from_node": "add1", "from_socket_uuid": "e9b4b1e4-5a57-11ef-a2bf-906584de3e5b", "to_socket": "x", "to_node": "multiply1", "state": false}, {"from_socket": "result", "from_node": "condition1", "from_socket_uuid": "e9be3b42-5a57-11ef-a2bf-906584de3e5b", "to_socket": "conditions", "to_node": "if_false", "state": false}, {"from_socket": "result", "from_node": "add2", "from_socket_uuid": "e9c7f4ca-5a57-11ef-a2bf-906584de3e5b", "to_socket": "true", "to_node": "select1", "state": false}, {"from_socket": "result", "from_node": "multiply1", "from_socket_uuid": "e9daaf34-5a57-11ef-a2bf-906584de3e5b", "to_socket": "false", "to_node": "select1", "state": false}, {"from_socket": "result", "from_node": "condition1", "from_socket_uuid": "e9be3b42-5a57-11ef-a2bf-906584de3e5b", "to_socket": "condition", "to_node": "select1", "state": false}, {"from_socket": "result", "from_node": "select1", "from_socket_uuid": "e9ebd0c0-5a57-11ef-a2bf-906584de3e5b", "to_socket": "x", "to_node": "add3", "state": false}]}
+        const workgraphData = {"name": "if_task", "uuid": "ff2de966-7724-11ef-ad13-906584de3e5b", "state": "CREATED", "nodes": {"add1": {"label": "add1", "node_type": "CALCFUNCTION", "inputs": [{"name": "x"}, {"name": "y"}], "properties": {"metadata": null, "metadata.store_provenance": null, "metadata.description": null, "metadata.label": null, "metadata.call_link_label": null, "metadata.disable_cache": null, "x": null, "y": null, "_wait": null}, "outputs": [{"name": "result"}, {"name": "result"}], "position": [30, 30], "children": []}, "condition1": {"label": "condition1", "node_type": "CALCFUNCTION", "inputs": [{"name": "x"}, {"name": "y"}], "properties": {"metadata": null, "metadata.store_provenance": null, "metadata.description": null, "metadata.label": null, "metadata.call_link_label": null, "metadata.disable_cache": null, "x": null, "y": null, "_wait": null}, "outputs": [{"name": "result"}, {"name": "result"}, {"name": "result"}], "position": [60, 60], "children": []}, "add2": {"label": "add2", "node_type": "CALCFUNCTION", "inputs": [{"name": "x"}, {"name": "y"}, {"name": "x"}], "properties": {"metadata": null, "metadata.store_provenance": null, "metadata.description": null, "metadata.label": null, "metadata.call_link_label": null, "metadata.disable_cache": null, "x": null, "y": null, "_wait": null}, "outputs": [{"name": "result"}], "position": [90, 90], "children": []}, "if_true": {"label": "if_true", "node_type": "IF", "inputs": [{"name": "conditions"}], "properties": {"_wait": null, "conditions": null, "invert_condition": null}, "outputs": [], "position": [120, 120], "children": ["add2"]}, "multiply1": {"label": "multiply1", "node_type": "CALCFUNCTION", "inputs": [{"name": "x"}, {"name": "y"}, {"name": "x"}], "properties": {"metadata": null, "metadata.store_provenance": null, "metadata.description": null, "metadata.label": null, "metadata.call_link_label": null, "metadata.disable_cache": null, "x": null, "y": null, "_wait": null}, "outputs": [{"name": "result"}], "position": [150, 150], "children": []}, "if_false": {"label": "if_false", "node_type": "IF", "inputs": [{"name": "conditions"}], "properties": {"_wait": null, "conditions": null, "invert_condition": null}, "outputs": [], "position": [180, 180], "children": ["multiply1"]}, "select1": {"label": "select1", "node_type": "NORMAL", "inputs": [{"name": "condition"}, {"name": "true"}, {"name": "false"}, {"name": "true"}, {"name": "false"}, {"name": "condition"}], "properties": {"condition": null, "true": null, "false": null, "_wait": null}, "outputs": [{"name": "result"}], "position": [210, 210], "children": []}, "add3": {"label": "add3", "node_type": "CALCFUNCTION", "inputs": [{"name": "x"}, {"name": "y"}, {"name": "x"}], "properties": {"metadata": null, "metadata.store_provenance": null, "metadata.description": null, "metadata.label": null, "metadata.call_link_label": null, "metadata.disable_cache": null, "x": null, "y": null, "_wait": null}, "outputs": [], "position": [240, 240], "children": []}}, "links": [{"from_socket": "result", "from_node": "add1", "to_socket": "x", "to_node": "add2", "state": false}, {"from_socket": "result", "from_node": "condition1", "to_socket": "conditions", "to_node": "if_true", "state": false}, {"from_socket": "result", "from_node": "add1", "to_socket": "x", "to_node": "multiply1", "state": false}, {"from_socket": "result", "from_node": "condition1", "to_socket": "conditions", "to_node": "if_false", "state": false}, {"from_socket": "result", "from_node": "add2", "to_socket": "true", "to_node": "select1", "state": false}, {"from_socket": "result", "from_node": "multiply1", "to_socket": "false", "to_node": "select1", "state": false}, {"from_socket": "result", "from_node": "condition1", "to_socket": "condition", "to_node": "select1", "state": false}, {"from_socket": "result", "from_node": "select1", "to_socket": "x", "to_node": "add3", "state": false}]}
 
         // Define Schemes to use in vanilla JS
         const Schemes = {
@@ -162,14 +162,22 @@
           }
         }
 
+        const customPadding = () => ({
+          top: 80,
+          left: 30,
+          right: 30,
+          bottom: 50
+        });
+
+
         async function createEditor(container) {
             const socket = new ClassicPreset.Socket("socket");
 
             const editor = new NodeEditor(Schemes);
             const area = new AreaPlugin(container);
             const connection = new ConnectionPlugin();
             const render = new ReactPlugin({ createRoot });
-            const scopes = new ScopesPlugin();
+            const scopes = new ScopesPlugin({padding: customPadding});
             const arrange = new AutoArrangePlugin();
 
             const minimap = new MinimapPlugin({