Добавил перекючатель редактирования и просмотра

src/nodes.tsx

@@ -1,8 +1,12 @@
+import { createContext, useContext } from 'react';
 import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
 import type { DiagramNodeData, NodeKind } from './types';
 
 type ShapeNode = Node<DiagramNodeData, NodeKind>;
 
+/** Ids of nodes that currently have children (i.e. render as a drill-into-able sub-process). */
+export const NodesWithChildrenContext = createContext<Set<string>>(new Set());
+
 function ShapeHandles() {
   return (
     <>
@@ -12,28 +16,41 @@ function ShapeHandles() {
   );
 }
 
-function TaskNode({ data }: NodeProps<ShapeNode>) {
+function SubProcessBadge({ id }: { id: string }) {
+  const withChildren = useContext(NodesWithChildrenContext);
+  if (!withChildren.has(id)) return null;
+  return (
+    <span className="diagram-node__badge" title="Есть вложенные узлы — двойной клик, чтобы открыть">
+      ⊞
+    </span>
+  );
+}
+
+function TaskNode({ id, data }: NodeProps<ShapeNode>) {
   return (
     <div className="diagram-node diagram-node--task">
       <ShapeHandles />
+      <SubProcessBadge id={id} />
       <span>{data.label}</span>
     </div>
   );
 }
 
-function GatewayNode({ data }: NodeProps<ShapeNode>) {
+function GatewayNode({ id, data }: NodeProps<ShapeNode>) {
   return (
     <div className="diagram-node diagram-node--gateway">
       <ShapeHandles />
+      <SubProcessBadge id={id} />
       <span>{data.label}</span>
     </div>
   );
 }
 
-function EventNode({ data }: NodeProps<ShapeNode>) {
+function EventNode({ id, data }: NodeProps<ShapeNode>) {
   return (
     <div className="diagram-node diagram-node--event">
       <ShapeHandles />
+      <SubProcessBadge id={id} />
       <span>{data.label}</span>
     </div>
   );