Добавление нового функционала

src/NodeInspector.tsx

@@ -1,9 +1,14 @@
+import { DEFAULT_NODE_COLOR } from './nodes';
 import type { DiagramNodeData, NodeKind } from './types';
 
 const TYPE_LABELS: Record<NodeKind, string> = {
   task: 'Задача',
-  gateway: 'Шлюз',
-  event: 'Событие',
+  startEvent: 'Начальное событие',
+  intermediateEvent: 'Промежуточное событие',
+  endEvent: 'Конечное событие',
+  exclusiveGateway: 'Исключающий шлюз',
+  parallelGateway: 'Параллельный шлюз',
+  inclusiveGateway: 'Включающий шлюз',
 };
 
 interface NodeInspectorProps {
@@ -14,6 +19,8 @@ interface NodeInspectorProps {
   mode: 'edit' | 'view';
   onChange: (patch: Partial<DiagramNodeData>) => void;
   onEnterSubProcess: (nodeId: string) => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
 }
 
 export function NodeInspector({
@@ -24,6 +31,8 @@ export function NodeInspector({
   mode,
   onChange,
   onEnterSubProcess,
+  onDuplicate,
+  onDelete,
 }: NodeInspectorProps) {
   if (mode === 'view') {
     const hasMeta = Boolean(data.responsible || data.duration);
@@ -70,10 +79,28 @@ export function NodeInspector({
         <code className="node-inspector__id">{nodeId}</code>
       </div>
 
+      <div className="node-inspector__toolbar">
+        <button type="button" onClick={onDuplicate}>
+          Дублировать
+        </button>
+        <button type="button" onClick={onDelete}>
+          Удалить
+        </button>
+      </div>
+
+      <label className="node-inspector__field node-inspector__field--color">
+        Цвет фона
+        <input
+          type="color"
+          value={data.color ?? DEFAULT_NODE_COLOR[nodeType]}
+          onChange={(e) => onChange({ color: e.target.value })}
+        />
+      </label>
+
       <label className="node-inspector__field">
         Название
-        <input
-          type="text"
+        <textarea
+          rows={2}
           value={data.label}
           onChange={(e) => onChange({ label: e.target.value })}
         />
@@ -111,7 +138,7 @@ export function NodeInspector({
       </button>
       <p className="node-inspector__hint">
         {childCount > 0
-          ? `Внутри уже ${childCount} узл(ов). Двойной клик по узлу на схеме открывает то же самое.`
+          ? `Внутри уже ${childCount} узл(ов).`
           : 'Пока пусто — зайдя внутрь, можно добавить узлы детального разбора этого шага.'}
       </p>
     </div>