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

2026-07-14 10:45:39 +03:00
parent 5b6bdc0a1f
commit fed7df1bea
8 changed files with 576 additions and 73 deletions
@@ -0,0 +1,119 @@
+import type { DiagramNodeData, NodeKind } from './types';
+
+const TYPE_LABELS: Record<NodeKind, string> = {
+  task: 'Задача',
+  gateway: 'Шлюз',
+  event: 'Событие',
+};
+
+interface NodeInspectorProps {
+  nodeId: string;
+  nodeType: NodeKind;
+  data: DiagramNodeData;
+  childCount: number;
+  mode: 'edit' | 'view';
+  onChange: (patch: Partial<DiagramNodeData>) => void;
+  onEnterSubProcess: (nodeId: string) => void;
+}
+
+export function NodeInspector({
+  nodeId,
+  nodeType,
+  data,
+  childCount,
+  mode,
+  onChange,
+  onEnterSubProcess,
+}: NodeInspectorProps) {
+  if (mode === 'view') {
+    const hasMeta = Boolean(data.responsible || data.duration);
+    return (
+      <div className="node-inspector">
+        <div className="node-inspector__header">
+          <span className="node-inspector__type">{TYPE_LABELS[nodeType]}</span>
+        </div>
+
+        <h3 className="node-inspector__label">{data.label}</h3>
+
+        {data.description && <p className="node-inspector__description">{data.description}</p>}
+
+        {hasMeta && (
+          <dl className="node-inspector__meta">
+            {data.responsible && (
+              <>
+                <dt>Ответственный</dt>
+                <dd>{data.responsible}</dd>
+              </>
+            )}
+            {data.duration && (
+              <>
+                <dt>Длительность</dt>
+                <dd>{data.duration}</dd>
+              </>
+            )}
+          </dl>
+        )}
+
+        {childCount > 0 && (
+          <button type="button" className="node-inspector__action" onClick={() => onEnterSubProcess(nodeId)}>
+            Открыть вложенный процесс →
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="node-inspector">
+      <div className="node-inspector__header">
+        <span className="node-inspector__type">{TYPE_LABELS[nodeType]}</span>
+        <code className="node-inspector__id">{nodeId}</code>
+      </div>
+
+      <label className="node-inspector__field">
+        Название
+        <input
+          type="text"
+          value={data.label}
+          onChange={(e) => onChange({ label: e.target.value })}
+        />
+      </label>
+
+      <label className="node-inspector__field">
+        Описание
+        <textarea
+          rows={3}
+          value={data.description ?? ''}
+          onChange={(e) => onChange({ description: e.target.value })}
+        />
+      </label>
+
+      <label className="node-inspector__field">
+        Ответственный
+        <input
+          type="text"
+          value={data.responsible ?? ''}
+          onChange={(e) => onChange({ responsible: e.target.value })}
+        />
+      </label>
+
+      <label className="node-inspector__field">
+        Длительность
+        <input
+          type="text"
+          value={data.duration ?? ''}
+          onChange={(e) => onChange({ duration: e.target.value })}
+        />
+      </label>
+
+      <button type="button" className="node-inspector__action" onClick={() => onEnterSubProcess(nodeId)}>
+        Войти в под-процесс →
+      </button>
+      <p className="node-inspector__hint">
+        {childCount > 0
+          ? `Внутри уже ${childCount} узл(ов). Двойной клик по узлу на схеме открывает то же самое.`
+          : 'Пока пусто — зайдя внутрь, можно добавить узлы детального разбора этого шага.'}
+      </p>
+    </div>
+  );
+}