Init commit

src/App.css

@@ -0,0 +1,31 @@
+.app-shell {
+  display: flex;
+  height: 100%;
+}
+
+.app-canvas {
+  flex: 1;
+  min-width: 0;
+}
+
+.app-inspector {
+  width: 360px;
+  flex-shrink: 0;
+  border-left: 1px solid color-mix(in srgb, currentcolor 20%, transparent);
+  padding: 12px;
+  overflow: auto;
+}
+
+.app-inspector h2 {
+  margin: 0 0 8px;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.7;
+}
+
+.app-inspector pre {
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}

src/App.tsx

@@ -0,0 +1,54 @@
+import { useCallback, useState } from 'react';
+import { DiagramEditor } from './DiagramEditor';
+import { createDevAdapter } from './host/devAdapter';
+import type { DiagramDocument } from './types';
+import './App.css';
+
+const SAMPLE_DOCUMENT: DiagramDocument = {
+  nodes: [
+    { id: 'start', type: 'event', position: { x: 0, y: 80 }, data: { label: 'Заявка получена' } },
+    {
+      id: 'review',
+      type: 'task',
+      position: { x: 220, y: 60 },
+      data: {
+        label: 'Приём заявок',
+        description: 'Приём заявок проводится ответственным лицом, занимает 1-2 дня.',
+        responsible: 'Иван Иванов',
+        duration: '1-2 дня',
+        linkType: 'description',
+      },
+    },
+    { id: 'decision', type: 'gateway', position: { x: 480, y: 68 }, data: { label: 'Одобрено?' } },
+  ],
+  edges: [
+    { id: 'start-review', source: 'start', target: 'review' },
+    { id: 'review-decision', source: 'review', target: 'decision' },
+  ],
+};
+
+const adapter = createDevAdapter();
+
+function App() {
+  const [initialDoc] = useState<DiagramDocument>(() => adapter.getInitialValue() ?? SAMPLE_DOCUMENT);
+  const [doc, setDoc] = useState<DiagramDocument>(initialDoc);
+
+  const handleChange = useCallback((next: DiagramDocument) => {
+    adapter.onChange(next);
+    setDoc(next);
+  }, []);
+
+  return (
+    <div className="app-shell">
+      <div className="app-canvas">
+        <DiagramEditor initialValue={initialDoc} onChange={handleChange} />
+      </div>
+      <aside className="app-inspector">
+        <h2>Текущий doc (для демо)</h2>
+        <pre>{JSON.stringify(doc, null, 2)}</pre>
+      </aside>
+    </div>
+  );
+}
+
+export default App;

src/DiagramEditor.tsx

@@ -0,0 +1,114 @@
+import { useCallback, useMemo, useState } from 'react';
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  MiniMap,
+  addEdge,
+  applyNodeChanges,
+  applyEdgeChanges,
+  type Node,
+  type Edge,
+  type OnConnect,
+  type NodeChange,
+  type EdgeChange,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { nodeTypes } from './nodes';
+import { debounce, serializeDocument } from './serialize';
+import type { DiagramDocument } from './types';
+import './diagram.css';
+
+interface DiagramEditorProps {
+  initialValue: DiagramDocument | null;
+  onChange: (doc: DiagramDocument) => void;
+}
+
+function toRfNodes(doc: DiagramDocument | null): Node[] {
+  return (doc?.nodes ?? []).map((node) => ({
+    id: node.id,
+    type: node.type,
+    position: node.position,
+    data: node.data,
+  }));
+}
+
+function toRfEdges(doc: DiagramDocument | null): Edge[] {
+  return (doc?.edges ?? []).map((edge) => ({
+    id: edge.id,
+    source: edge.source,
+    target: edge.target,
+    type: edge.type,
+    data: edge.data,
+  }));
+}
+
+function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
+  const [nodes, setNodes] = useState<Node[]>(() => toRfNodes(initialValue));
+  const [edges, setEdges] = useState<Edge[]>(() => toRfEdges(initialValue));
+
+  const emitChange = useMemo(
+    () => debounce((n: Node[], e: Edge[]) => onChange(serializeDocument(n, e)), 400),
+    [onChange],
+  );
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      setNodes((current) => {
+        const next = applyNodeChanges(changes, current);
+        emitChange(next, edges);
+        return next;
+      });
+    },
+    [edges, emitChange],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      setEdges((current) => {
+        const next = applyEdgeChanges(changes, current);
+        emitChange(nodes, next);
+        return next;
+      });
+    },
+    [nodes, emitChange],
+  );
+
+  const onConnect: OnConnect = useCallback(
+    (connection) => {
+      setEdges((current) => {
+        const next = addEdge(connection, current);
+        emitChange(nodes, next);
+        return next;
+      });
+    },
+    [nodes, emitChange],
+  );
+
+  return (
+    <div className="diagram-canvas">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        fitView
+      >
+        <Background />
+        <Controls />
+        <MiniMap />
+      </ReactFlow>
+    </div>
+  );
+}
+
+export function DiagramEditor(props: DiagramEditorProps) {
+  return (
+    <ReactFlowProvider>
+      <DiagramCanvas {...props} />
+    </ReactFlowProvider>
+  );
+}

src/diagram.css

@@ -0,0 +1,44 @@
+.diagram-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.diagram-node {
+  min-width: 120px;
+  padding: 10px 16px;
+  border: 1px solid #555;
+  border-radius: 6px;
+  background: canvas;
+  color: canvastext;
+  font-size: 12px;
+  text-align: center;
+}
+
+.diagram-node--gateway {
+  width: 64px;
+  height: 64px;
+  min-width: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transform: rotate(45deg);
+}
+
+.diagram-node--gateway span {
+  display: inline-block;
+  transform: rotate(-45deg);
+  font-size: 11px;
+}
+
+.diagram-node--event {
+  width: 64px;
+  height: 64px;
+  min-width: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}

src/host/HostAdapter.ts

@@ -0,0 +1,12 @@
+import type { DiagramDocument } from '../types';
+
+/**
+ * Seam between the diagram app and whatever embeds it.
+ * Dev builds read/write localStorage; the Bitrix build will read the
+ * initial value from the bridged hidden input and push changes back
+ * to it (see bitrix-diagram-constructor-summary.md).
+ */
+export interface HostAdapter {
+  getInitialValue: () => DiagramDocument | null;
+  onChange: (doc: DiagramDocument) => void;
+}

src/host/devAdapter.ts

@@ -0,0 +1,21 @@
+import type { DiagramDocument } from '../types';
+import type { HostAdapter } from './HostAdapter';
+
+const STORAGE_KEY = 'diagram-builder:dev-doc';
+
+export function createDevAdapter(): HostAdapter {
+  return {
+    getInitialValue() {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return null;
+      try {
+        return JSON.parse(raw) as DiagramDocument;
+      } catch {
+        return null;
+      }
+    },
+    onChange(doc) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(doc));
+    },
+  };
+}

src/index.css

@@ -0,0 +1,15 @@
+:root {
+  color-scheme: light dark;
+  font: 14px/1.4 system-ui, 'Segoe UI', Roboto, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/nodes.tsx

@@ -0,0 +1,46 @@
+import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
+import type { DiagramNodeData, NodeKind } from './types';
+
+type ShapeNode = Node<DiagramNodeData, NodeKind>;
+
+function ShapeHandles() {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+}
+
+function TaskNode({ data }: NodeProps<ShapeNode>) {
+  return (
+    <div className="diagram-node diagram-node--task">
+      <ShapeHandles />
+      <span>{data.label}</span>
+    </div>
+  );
+}
+
+function GatewayNode({ data }: NodeProps<ShapeNode>) {
+  return (
+    <div className="diagram-node diagram-node--gateway">
+      <ShapeHandles />
+      <span>{data.label}</span>
+    </div>
+  );
+}
+
+function EventNode({ data }: NodeProps<ShapeNode>) {
+  return (
+    <div className="diagram-node diagram-node--event">
+      <ShapeHandles />
+      <span>{data.label}</span>
+    </div>
+  );
+}
+
+export const nodeTypes = {
+  task: TaskNode,
+  gateway: GatewayNode,
+  event: EventNode,
+};

src/serialize.ts

@@ -0,0 +1,36 @@
+import type { Node, Edge } from '@xyflow/react';
+import type { DiagramDocument, DiagramEdge, DiagramNode, NodeKind } from './types';
+
+/**
+ * React Flow's runtime Node/Edge carry UI-only fields (measured, selected,
+ * dragging, zIndex, ...). Only this subset gets persisted.
+ */
+export function serializeDocument(nodes: Node[], edges: Edge[]): DiagramDocument {
+  return {
+    nodes: nodes.map(
+      (node): DiagramNode => ({
+        id: node.id,
+        type: (node.type ?? 'task') as NodeKind,
+        position: { x: node.position.x, y: node.position.y },
+        data: node.data as DiagramNode['data'],
+      }),
+    ),
+    edges: edges.map(
+      (edge): DiagramEdge => ({
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        type: edge.type,
+        data: edge.data as DiagramEdge['data'],
+      }),
+    ),
+  };
+}
+
+export function debounce<Args extends unknown[]>(fn: (...args: Args) => void, delayMs: number) {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  return (...args: Args) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), delayMs);
+  };
+}

src/types.ts

@@ -0,0 +1,38 @@
+export type NodeKind = 'task' | 'gateway' | 'event';
+
+export type NodeLinkType = 'description' | 'subDiagram';
+
+export interface DiagramNodeData extends Record<string, unknown> {
+  label: string;
+  description?: string;
+  responsible?: string;
+  duration?: string;
+  linkType?: NodeLinkType;
+  subDiagramId?: string;
+}
+
+export interface DiagramNode {
+  id: string;
+  type: NodeKind;
+  position: { x: number; y: number };
+  data: DiagramNodeData;
+}
+
+export interface DiagramEdgeData extends Record<string, unknown> {
+  label?: string;
+}
+
+export interface DiagramEdge {
+  id: string;
+  source: string;
+  target: string;
+  type?: string;
+  data?: DiagramEdgeData;
+}
+
+export interface DiagramDocument {
+  nodes: DiagramNode[];
+  edges: DiagramEdge[];
+}
+
+export const EMPTY_DOCUMENT: DiagramDocument = { nodes: [], edges: [] };