n.kalitov/Portal-Chart-Builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI правки после созвона

Browse Source
This commit is contained in:
NikitaKalitov
2026-07-23 08:52:17 +03:00
parent 6692028045
commit 88997a338b
1 changed files with 133 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NodeInspector.tsx
+133 -87
View File
@@ -1,8 +1,8 @@
import { useRef, useState, type RefObject } from 'react';
import { Button } from '@consta/uikit/Button';
import { TextField } from '@consta/uikit/TextField';
import { ColorPicker, hexModel } from '@consta/uikit/ColorPicker';
import { Text } from '@consta/uikit/Text';
import { useRef, useState, type RefObject } from "react";
import { Button } from "@consta/uikit/Button";
import { TextField } from "@consta/uikit/TextField";
import { ColorPicker, hexModel } from "@consta/uikit/ColorPicker";
import { Text } from "@consta/uikit/Text";
import {
DEFAULT_CAPTION_TEXT_COLOR,
DEFAULT_NODE_BACKGROUND,
@@ -10,51 +10,51 @@ import {
DEFAULT_NODE_FONT_SIZE,
DEFAULT_NODE_TEXT_COLOR,
DEFAULT_TASK_BORDER_RADIUS,
} from './nodes';
import type { DiagramNodeData, NodeKind } from './types';
} from "./nodes";
import type { DiagramNodeData, NodeKind } from "./types";
// Every gradient defined in palette.css, across its three "for diagrams /
// flowcharts / semantic highlights" sections. Consta's ColorPicker `palette`
// prop can't render these — it goes through hexModel, which only understands
// flat colors — so these render as our own swatch row instead.
const GRADIENT_PRESETS: { name: string; label: string }[] = [
{ name: 'navy', label: 'Тёмно-синий' },
{ name: 'azure', label: 'Лазурный' },
{ name: 'sky', label: 'Небесный' },
{ name: 'teal-dark', label: 'Тёмная бирюза' },
{ name: 'teal-light', label: 'Светлая бирюза' },
{ name: 'navy-dark', label: 'Глубокий синий' },
{ name: 'ice', label: 'Лёд' },
{ name: 'frost', label: 'Иней' },
{ name: 'purple', label: 'Пурпурный' },
{ name: 'red', label: 'Красный' },
{ name: 'orange', label: 'Оранжевый' },
{ name: 'olive', label: 'Оливковый' },
{ name: 'green', label: 'Зелёный' },
{ name: 'green-dark', label: 'Тёмно-зелёный' },
{ name: 'blue', label: 'Синий' },
{ name: 'cyan', label: 'Циан' },
{ name: 'violet', label: 'Виолет' },
{ name: 'lavender', label: 'Лавандовый' },
{ name: 'pink', label: 'Розовый' },
{ name: "navy", label: "Тёмно-синий" },
{ name: "azure", label: "Лазурный" },
{ name: "sky", label: "Небесный" },
{ name: "teal-dark", label: "Тёмная бирюза" },
{ name: "teal-light", label: "Светлая бирюза" },
{ name: "navy-dark", label: "Глубокий синий" },
{ name: "ice", label: "Лёд" },
{ name: "frost", label: "Иней" },
{ name: "purple", label: "Пурпурный" },
{ name: "red", label: "Красный" },
{ name: "orange", label: "Оранжевый" },
{ name: "olive", label: "Оливковый" },
{ name: "green", label: "Зелёный" },
{ name: "green-dark", label: "Тёмно-зелёный" },
{ name: "blue", label: "Синий" },
{ name: "cyan", label: "Циан" },
{ name: "violet", label: "Виолет" },
{ name: "lavender", label: "Лавандовый" },
{ name: "pink", label: "Розовый" },
];
// "Цвета текста" from palette.css.
const TEXT_COLOR_PRESETS: { hex: string; label: string }[] = [
{ hex: '#0079C2', label: 'Синий' },
{ hex: '#525A64', label: 'Тёмный' },
{ hex: '#929AA4', label: 'Серый' },
{ hex: '#FFFFFF', label: 'Белый' },
{ hex: "#0079C2", label: "Синий" },
{ hex: "#525A64", label: "Тёмный" },
{ hex: "#929AA4", label: "Серый" },
{ hex: "#FFFFFF", label: "Белый" },
];
const TYPE_LABELS: Record<NodeKind, string> = {
task: 'Задача',
startEvent: 'Начальное событие',
intermediateEvent: 'Промежуточное событие',
endEvent: 'Конечное событие',
exclusiveGateway: 'Исключающий шлюз',
parallelGateway: 'Параллельный шлюз',
inclusiveGateway: 'Включающий шлюз',
task: "Задача",
startEvent: "Начальное событие",
intermediateEvent: "Промежуточное событие",
endEvent: "Конечное событие",
exclusiveGateway: "Исключающий шлюз",
parallelGateway: "Параллельный шлюз",
inclusiveGateway: "Включающий шлюз",
};
interface NodeInspectorProps {
@@ -62,7 +62,7 @@ interface NodeInspectorProps {
nodeType: NodeKind;
data: DiagramNodeData;
childCount: number;
mode: 'edit' | 'view';
mode: "edit" | "view";
onChange: (patch: Partial<DiagramNodeData>) => void;
onEnterSubProcess: (nodeId: string) => void;
onDuplicate: () => void;
@@ -86,20 +86,28 @@ export function NodeInspector({
}: NodeInspectorProps) {
const [colorPickerOpen, setColorPickerOpen] = useState(false);
// Consta's ref props still use the pre-React-19 non-nullable RefObject shape.
const colorButtonRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement>;
const colorButtonRef = useRef<HTMLDivElement>(
null,
) as RefObject<HTMLDivElement>;
// data.color can be a `var(--gradient-x)` reference from the preset row —
// hexModel tries to parse that as a hex color and produces NaN, so the
// hex-only ColorControl/ColorPicker always need a real flat hex fallback.
const flatColor = data.color && !data.color.startsWith('var(') ? data.color : DEFAULT_NODE_COLOR[nodeType];
const flatColor =
data.color && !data.color.startsWith("var(") ?
data.color
: DEFAULT_NODE_COLOR[nodeType];
const [textColorPickerOpen, setTextColorPickerOpen] = useState(false);
const textColorButtonRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement>;
const textColorButtonRef = useRef<HTMLDivElement>(
null,
) as RefObject<HTMLDivElement>;
// Text sits directly on the colored fill for tasks (needs a light default)
// but on the plain canvas for every other shape's caption (needs a dark one).
const defaultTextColor = nodeType === 'task' ? DEFAULT_NODE_TEXT_COLOR : DEFAULT_CAPTION_TEXT_COLOR;
const defaultTextColor =
nodeType === "task" ? DEFAULT_NODE_TEXT_COLOR : DEFAULT_CAPTION_TEXT_COLOR;
const currentTextColor = data.textColor ?? defaultTextColor;
if (mode === 'view') {
if (mode === "view") {
const hasMeta = Boolean(data.responsible || data.duration);
return (
<div className="node-inspector">
@@ -114,7 +122,11 @@ export function NodeInspector({
</Text>
{data.description && (
<Text size="s" view="secondary" className="node-inspector__description">
<Text
size="s"
view="secondary"
className="node-inspector__description"
>
{data.description}
</Text>
)}
@@ -160,13 +172,28 @@ export function NodeInspector({
</div>
<div className="node-inspector__toolbar">
<Button size="s" view="secondary" label="Дублировать" onClick={onDuplicate} />
<Button
size="s"
view="secondary"
label="Дублировать"
onClick={onDuplicate}
/>
<Button size="s" view="secondary" label="Удалить" onClick={onDelete} />
</div>
<div className="node-inspector__toolbar">
<Button size="s" view="secondary" label="На передний план" onClick={onBringToFront} />
<Button size="s" view="secondary" label="На задний план" onClick={onSendToBack} />
<Button
size="s"
view="secondary"
label="На передний план"
onClick={onBringToFront}
/>
<Button
size="s"
view="secondary"
label="На задний план"
onClick={onSendToBack}
/>
</div>
<div className="node-inspector__field">
@@ -176,14 +203,15 @@ export function NodeInspector({
<div className="node-inspector__presets">
{GRADIENT_PRESETS.map(({ name, label }) => {
const value = `var(--gradient-${name})`;
const isActive = (data.color ?? DEFAULT_NODE_BACKGROUND[nodeType]) === value;
const isActive =
(data.color ?? DEFAULT_NODE_BACKGROUND[nodeType]) === value;
return (
<button
key={name}
type="button"
title={label}
aria-label={label}
className={`node-inspector__preset${isActive ? ' node-inspector__preset--active' : ''}`}
className={`node-inspector__preset${isActive ? " node-inspector__preset--active" : ""}`}
style={{ background: value }}
onClick={() => onChange({ color: value })}
/>
@@ -191,7 +219,12 @@ export function NodeInspector({
})}
</div>
<div ref={colorButtonRef} className="node-inspector__color-trigger">
<Button size="s" view="secondary" label="Настроить цвет" onClick={() => setColorPickerOpen(true)} />
<Button
size="s"
view="secondary"
label="Настроить цвет"
onClick={() => setColorPickerOpen(true)}
/>
</div>
{colorPickerOpen && (
<ColorPicker
@@ -216,14 +249,19 @@ export function NodeInspector({
type="button"
title={presetLabel}
aria-label={presetLabel}
className={`node-inspector__preset${currentTextColor === hex ? ' node-inspector__preset--active' : ''}`}
className={`node-inspector__preset${currentTextColor === hex ? " node-inspector__preset--active" : ""}`}
style={{ background: hex }}
onClick={() => onChange({ textColor: hex })}
/>
))}
</div>
<div ref={textColorButtonRef} className="node-inspector__color-trigger">
<Button size="s" view="secondary" label="Настроить цвет" onClick={() => setTextColorPickerOpen(true)} />
<Button
size="s"
view="secondary"
label="Настроить цвет"
onClick={() => setTextColorPickerOpen(true)}
/>
</div>
{textColorPickerOpen && (
<ColorPicker
@@ -256,7 +294,7 @@ export function NodeInspector({
rows={2}
size="s"
value={data.label}
onChange={(value) => onChange({ label: value ?? '' })}
onChange={(value) => onChange({ label: value ?? "" })}
/>
<TextField
@@ -264,45 +302,53 @@ export function NodeInspector({
type="textarea"
rows={3}
size="s"
value={data.description ?? ''}
onChange={(value) => onChange({ description: value ?? '' })}
value={data.description ?? ""}
onChange={(value) => onChange({ description: value ?? "" })}
/>
<TextField
label="Ответственный"
size="s"
value={data.responsible ?? ''}
onChange={(value) => onChange({ responsible: value ?? '' })}
/>
{nodeType === "task" && (
<>
<TextField
label="Ответственный"
size="s"
value={data.responsible ?? ""}
onChange={(value) => onChange({ responsible: value ?? "" })}
/>
<TextField
label="Длительность"
size="s"
value={data.duration ?? ''}
onChange={(value) => onChange({ duration: value ?? '' })}
/>
<TextField
label="Длительность"
size="s"
value={data.duration ?? ""}
onChange={(value) => onChange({ duration: value ?? "" })}
/>
{nodeType === 'task' && (
<TextField
label="Скругление углов"
type="number"
size="s"
min={0}
max={25}
value={String(data.borderRadius ?? DEFAULT_TASK_BORDER_RADIUS)}
onChange={(value) => {
const n = Number(value);
if (value && !Number.isNaN(n)) onChange({ borderRadius: n });
}}
/>
<TextField
label="Скругление углов"
type="number"
size="s"
min={0}
max={25}
value={String(data.borderRadius ?? DEFAULT_TASK_BORDER_RADIUS)}
onChange={(value) => {
const n = Number(value);
if (value && !Number.isNaN(n)) onChange({ borderRadius: n });
}}
/>
<Button
size="s"
view="ghost"
label="Войти в под-процесс →"
onClick={() => onEnterSubProcess(nodeId)}
/>
<Text size="xs" view="secondary" className="node-inspector__hint">
{childCount > 0 ?
`Внутри уже ${childCount} узл(ов).`
: "Пока пусто — зайдя внутрь, можно добавить узлы детального разбора этого шага."
}
</Text>
</>
)}
<Button size="s" view="ghost" label="Войти в под-процесс →" onClick={() => onEnterSubProcess(nodeId)} />
<Text size="xs" view="secondary" className="node-inspector__hint">
{childCount > 0
? `Внутри уже ${childCount} узл(ов).`
: 'Пока пусто — зайдя внутрь, можно добавить узлы детального разбора этого шага.'}
</Text>
</div>
);
}