Fix layout when editing existing node (#12814)

Fixes #12760

The issue is addressed by keeping WidgetPorts rects when starting editing + make minimum width of Component Browser, so no edges will be dangling.


https://github.com/user-attachments/assets/cdd4bb70-54e1-4174-85ec-4d2b31892986

Author: farmaazon

app/gui/src/project-view/components/ComponentBrowser.vue

@@ -45,6 +45,7 @@ const COMPONENT_EDITOR_PADDING = NODE_CONTENT_PADDING
 const ICON_WIDTH = 24
 // Component editor is larger than a typical node, so the edge should touch it a bit higher.
 const EDGE_Y_OFFSET = -8
+const MIN_WIDTH = 295
 
 const cssComponentEditorPadding = `${COMPONENT_EDITOR_PADDING}px`
 
@@ -162,6 +163,13 @@ const transform = computed(() => {
   return `translate(${x}px, ${y}px)`
 })
 
+const minWidth = computed(() => {
+  if (props.usage.type !== 'editNode') return `${MIN_WIDTH}px`
+  const rect = graphStore.nodeRects.get(props.usage.node)
+  if (rect == null) return `${MIN_WIDTH}px`
+  return `${rect.width * props.navigator.scale}px`
+})
+
 // === Selection ===
 
 const selected = ref<Component | null>(null)
@@ -375,7 +383,7 @@ const listsHandler = listBindings.handler({
   <div
     ref="cbRoot"
     class="ComponentBrowser"
-    :style="{ transform }"
+    :style="{ transform, minWidth }"
     :data-self-argument="input.selfArgument"
     tabindex="-1"
     @focusout="handleDefocus"
@@ -443,7 +451,6 @@ const listsHandler = listBindings.handler({
   --radius-default: 20px;
   --background-color: #fff;
   --doc-panel-bottom-clip: 4px;
-  min-width: 295px;
   width: min-content;
   color: rgba(0, 0, 0, 0.6);
   font-size: 11.5px;

app/gui/src/project-view/components/GraphEditor/GraphNode.vue

@@ -430,6 +430,7 @@ const nodeClass = computed(() => {
     outputNode: props.node.type === 'output',
     menuVisible: menuVisible.value,
     menuFull: menuFull.value,
+    edited: props.edited,
   }
 })
 
@@ -489,7 +490,6 @@ onWindowBlur(() => {
 
 <template>
   <div
-    v-show="!edited"
     ref="rootNode"
     class="GraphNode define-node-colors"
     :style="nodeStyle"
@@ -730,4 +730,10 @@ onWindowBlur(() => {
 .dragged {
   cursor: grabbing !important;
 }
+
+/* We use this instead of "v-show", because we want the node content being still laid out,
+   so the edges won't jump. */
+.edited {
+  visibility: hidden;
+}
 </style>