@eventcatalog/core 5.0.0-beta.8 → 5.0.0

package/eventcatalog/src/features/studio/components/canvas-nodes.tsx

@@ -1,255 +0,0 @@
-import { createContext, memo, useCallback, useContext, useRef, useState } from 'react';
-import { NodeResizeControl, NodeResizer, ResizeControlVariant, useStoreApi, type NodeProps, type NodeTypes } from '@xyflow/react';
-import { DomainCardNode, nodeComponents, SystemGroupNode } from '@eventcatalog/visualiser';
-import { GROUP_PADDING } from '../grouping';
-import { getNodeName, GROUP_TYPES, nodeDefinitions } from '../node-types';
-
-/** How the canvas draws each kind of node: the visualiser's nodes, notes and text written on the canvas, and resizable containers */
-
-export type UpdateNodeData = (id: string, updater: (data: Record<string, unknown>) => Record<string, unknown>) => void;
-
-// Notes are edited in place, so their callbacks need to reach the shared design
-export const UpdateNodeDataContext = createContext<UpdateNodeData>(() => {});
-
-// Which container something dragged would drop into, to highlight it
-export const DropTargetContext = createContext<string | null>(null);
-
-// The visualiser types its node components' props as nodes (Node<Data>) rather than React Flow's NodeProps, so
-// they don't type-check as NodeTypes, though that's what React Flow renders them with
-const visualiserNodes = nodeComponents as unknown as NodeTypes;
-const SystemGroupComponent: NodeTypes[string] = SystemGroupNode;
-
-/** The handles that set a node's width, on either side (its height follows what's written in it) */
-function WidthHandles() {
-  return (
-    <>
-      {/* Horizontal only: otherwise React Flow saves the height too, and it stops growing with what's written */}
-      <NodeResizeControl
-        position="left"
-        variant={ResizeControlVariant.Line}
-        resizeDirection="horizontal"
-        minWidth={80}
-        className="studio-width-handle"
-      />
-      <NodeResizeControl
-        position="right"
-        variant={ResizeControlVariant.Line}
-        resizeDirection="horizontal"
-        minWidth={80}
-        className="studio-width-handle"
-      />
-    </>
-  );
-}
-
-/**
- * What's written on a note or text, and writing it: Enter starts a new line, Escape or ⌘/Ctrl + Enter (or clicking
- * away) finishes, and it's saved for everyone then
- */
-function Writing({
-  id,
-  text,
-  editing,
-  onDone,
-  placeholder,
-  className,
-}: {
-  id: string;
-  text: string;
-  editing: boolean;
-  onDone: () => void;
-  placeholder: string;
-  className: string;
-}) {
-  const updateNodeData = useContext(UpdateNodeDataContext);
-  // The box grows with what's written (the node's height follows it)
-  const fit = (area: HTMLTextAreaElement) => {
-    area.style.height = 'auto';
-    area.style.height = `${area.scrollHeight}px`;
-  };
-  if (!editing) return <p className={className}>{text || <span className="opacity-50">{placeholder}</span>}</p>;
-  return (
-    <textarea
-      ref={(area) => {
-        if (area) fit(area);
-      }}
-      autoFocus
-      defaultValue={text}
-      placeholder={placeholder}
-      onFocus={(event) => event.currentTarget.select()}
-      onInput={(event) => fit(event.currentTarget)}
-      onBlur={(event) => {
-        const value = event.currentTarget.value;
-        onDone();
-        if (value !== text) updateNodeData(id, (current) => ({ ...current, text: value }));
-      }}
-      onKeyDown={(event) => {
-        if (event.key === 'Escape' || (event.key === 'Enter' && (event.metaKey || event.ctrlKey))) event.currentTarget.blur();
-      }}
-      className={`nodrag nopan nowheel block w-full resize-none overflow-hidden bg-transparent outline-none ${className}`}
-    />
-  );
-}
-
-/** A sticky note's colours: soft paper colours, readable in light and dark themes (the names are the visualiser's) */
-const NOTE_COLORS: Record<string, { fill: string; border: string }> = {
-  yellow: { fill: '#fef9c3', border: '#fde047' },
-  blue: { fill: '#dbeafe', border: '#93c5fd' },
-  green: { fill: '#dcfce7', border: '#86efac' },
-  pink: { fill: '#fce7f3', border: '#f9a8d4' },
-  purple: { fill: '#ede9fe', border: '#c4b5fd' },
-  gray: { fill: '#f3f4f6', border: '#d1d5db' },
-};
-
-/**
- * A sticky note: a few lines on paper, about as wide as a card and as tall as what's on it. Double click it to
- * write; when it's selected, its colour can be changed and its width set.
- */
-const StickyNote = memo(function StickyNote({ id, data, selected }: NodeProps) {
-  const updateNodeData = useContext(UpdateNodeDataContext);
-  const [editing, setEditing] = useState(false);
-  const colorName = typeof data.color === 'string' && NOTE_COLORS[data.color] ? data.color : 'yellow';
-  const color = NOTE_COLORS[colorName];
-  return (
-    <div
-      className="studio-note"
-      style={{ background: color.fill, borderColor: color.border }}
-      onDoubleClick={() => setEditing(true)}
-    >
-      {selected && !editing && (
-        <>
-          <WidthHandles />
-          <div className="nodrag nopan studio-note-colors" role="radiogroup" aria-label="Note colour">
-            {Object.entries(NOTE_COLORS).map(([name, { fill, border }]) => (
-              <button
-                key={name}
-                role="radio"
-                aria-checked={name === colorName}
-                title={name.charAt(0).toUpperCase() + name.slice(1)}
-                onClick={() => updateNodeData(id, (current) => ({ ...current, color: name }))}
-                className="studio-note-color"
-                style={{ background: fill, borderColor: name === colorName ? 'rgb(var(--ec-page-text))' : border }}
-              />
-            ))}
-          </div>
-        </>
-      )}
-      <Writing
-        id={id}
-        text={String(data.text ?? '')}
-        editing={editing}
-        onDone={() => setEditing(false)}
-        placeholder="Double-click to write a note"
-        className="studio-note-body"
-      />
-    </div>
-  );
-});
-
-/**
- * Text written straight on the canvas (titles, labels, notes to self): double click it to write. Its width is set
- * with the handles on either side; its height follows what's written.
- */
-const TextNode = memo(function TextNode({ id, data, selected }: NodeProps) {
-  const [editing, setEditing] = useState(false);
-  return (
-    <div className="studio-text" onDoubleClick={() => setEditing(true)}>
-      {selected && !editing && <WidthHandles />}
-      <Writing
-        id={id}
-        text={String(data.text ?? '')}
-        editing={editing}
-        onDone={() => setEditing(false)}
-        placeholder="Double-click to write"
-        className="studio-text-body"
-      />
-    </div>
-  );
-});
-
-/**
- * A domain or system as a container: resizable when selected, highlighted when something's dragged over it.
- * Like frames in design tools, it's moved and selected by its header, and dragging inside it draws a selection
- * box (its body lets the pointer through to the canvas: see studio.css).
- */
-const GroupNode = memo(function GroupNode(props: NodeProps) {
-  const isDropTarget = useContext(DropTargetContext) === props.id;
-  const store = useStoreApi();
-  // Where what's inside has to stay (with room around it and for the header), in the container's parent's
-  // coordinates: found when a resize starts, so it can't be resized smaller than what's in it
-  const contents = useRef<{ left: number; top: number; right: number; bottom: number } | null>(null);
-  const onResizeStart = useCallback(() => {
-    const { nodeLookup } = store.getState();
-    const container = nodeLookup.get(props.id);
-    const children = [...nodeLookup.values()].filter((node) => node.parentId === props.id);
-    if (!container || children.length === 0) {
-      contents.current = null;
-      return;
-    }
-    const { x, y } = container.position;
-    const size = (node: (typeof children)[number]) => ({
-      width: node.measured.width ?? node.width ?? 0,
-      height: node.measured.height ?? node.height ?? 0,
-    });
-    const own = size(container);
-    // A side already closer in than that (e.g. something placed in the padding) can still move out, just not in
-    contents.current = {
-      left: Math.max(x + Math.min(...children.map((node) => node.position.x)) - GROUP_PADDING.left, x),
-      top: Math.max(y + Math.min(...children.map((node) => node.position.y)) - GROUP_PADDING.top, y),
-      right: Math.min(
-        x + Math.max(...children.map((node) => node.position.x + size(node).width)) + GROUP_PADDING.right,
-        x + own.width
-      ),
-      bottom: Math.min(
-        y + Math.max(...children.map((node) => node.position.y + size(node).height)) + GROUP_PADDING.bottom,
-        y + own.height
-      ),
-    };
-  }, [store, props.id]);
-  const shouldResize = useCallback(
-    (_: unknown, { x, y, width, height }: { x: number; y: number; width: number; height: number }) => {
-      const bounds = contents.current;
-      return !bounds || (x <= bounds.left && y <= bounds.top && x + width >= bounds.right && y + height >= bounds.bottom);
-    },
-    []
-  );
-  return (
-    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
-      <NodeResizer
-        isVisible={props.selected}
-        onResizeStart={onResizeStart}
-        shouldResize={shouldResize}
-        minWidth={240}
-        minHeight={160}
-        lineClassName="!border-[rgb(var(--ec-accent))]"
-        handleClassName="!h-2.5 !w-2.5 !rounded-sm !border-2 !bg-[rgb(var(--ec-card-bg))] !border-[rgb(var(--ec-accent))]"
-      />
-      <SystemGroupComponent {...props} />
-      {/* The header (and the badge on its border) */}
-      <div className="ec-group-grip absolute inset-x-0 -top-3 h-[60px] cursor-grab" />
-      {isDropTarget ? (
-        // What's dragged over it goes in it when it's dropped
-        <div className="ec-drop-target">
-          <span className="ec-drop-target-label">Drop to add to {getNodeName(props.type, props.data, 'this container')}</span>
-        </div>
-      ) : (
-        props.selected && <div className="ec-group-selected" />
-      )}
-    </div>
-  );
-});
-
-export const nodeTypes: NodeTypes = {
-  ...Object.fromEntries(
-    nodeDefinitions.map((definition) => [
-      definition.type,
-      definition.type === 'note' ? StickyNote : definition.type === 'text' ? TextNode : visualiserNodes[definition.type],
-    ])
-  ),
-  // Only dropped in from the catalog
-  system: visualiserNodes.system,
-  'context-domain': DomainCardNode,
-  // Domains and systems as containers
-  [GROUP_TYPES.domain]: GroupNode,
-  [GROUP_TYPES.system]: GroupNode,
-};

package/eventcatalog/src/features/studio/components/icons.ts

@@ -1,53 +0,0 @@
-import type { LucideIcon } from 'lucide-react';
-import {
-  ArrowRightLeft,
-  Bot,
-  Boxes,
-  Database,
-  Globe,
-  Group,
-  Mail,
-  MonitorSmartphone,
-  Search,
-  ServerIcon,
-  StickyNote,
-  Type,
-  User,
-  Zap,
-} from 'lucide-react';
-import { GROUP_TYPES } from '../node-types';
-
-/** How each kind of node, and each catalog collection, looks in the canvas's lists (the colours are each kind's own) */
-export type NodeIcon = { icon: LucideIcon; className: string };
-
-export const NODE_ICONS: Record<string, NodeIcon> = {
-  [GROUP_TYPES.domain]: { icon: Boxes, className: 'text-yellow-500' },
-  [GROUP_TYPES.system]: { icon: Group, className: 'text-violet-600' },
-  // Catalog domains and systems added as cards
-  'context-domain': { icon: Boxes, className: 'text-yellow-500' },
-  system: { icon: Group, className: 'text-violet-600' },
-  service: { icon: ServerIcon, className: 'text-pink-600' },
-  event: { icon: Zap, className: 'text-orange-600' },
-  command: { icon: Mail, className: 'text-blue-600' },
-  query: { icon: Search, className: 'text-green-600' },
-  channel: { icon: ArrowRightLeft, className: 'text-gray-600' },
-  data: { icon: Database, className: 'text-blue-600' },
-  view: { icon: MonitorSmartphone, className: 'text-sky-600' },
-  externalSystem: { icon: Globe, className: 'text-purple-600' },
-  agent: { icon: Bot, className: 'text-violet-600' },
-  actor: { icon: User, className: 'text-sky-600' },
-  note: { icon: StickyNote, className: 'text-yellow-500' },
-  text: { icon: Type, className: 'text-[rgb(var(--ec-icon-color))]' },
-};
-
-/** The catalog's collections, in the order the catalog list shows them, with the icon of the node each becomes */
-export const CATALOG_GROUPS: ({ collection: string; label: string } & NodeIcon)[] = [
-  { collection: 'domains', label: 'Domains', ...NODE_ICONS[GROUP_TYPES.domain] },
-  { collection: 'systems', label: 'Systems', ...NODE_ICONS[GROUP_TYPES.system] },
-  { collection: 'services', label: 'Services', ...NODE_ICONS.service },
-  { collection: 'events', label: 'Events', ...NODE_ICONS.event },
-  { collection: 'commands', label: 'Commands', ...NODE_ICONS.command },
-  { collection: 'queries', label: 'Queries', ...NODE_ICONS.query },
-  { collection: 'channels', label: 'Channels', ...NODE_ICONS.channel },
-  { collection: 'containers', label: 'Data Stores', ...NODE_ICONS.data },
-];

package/eventcatalog/src/features/studio/components/status.ts

@@ -1,51 +0,0 @@
-import type { CanvasStatus } from '../canvas-doc';
-import type { Status } from '../hooks/use-studio-flow';
-
-/**
- * Status and destructive colours for the canvas, from the theme's badge colours (EventCatalog has no status
- * variables), so they follow light, dark and custom themes. Kept here rather than repeated in each component.
- */
-export const STATUS = {
-  success: { text: 'text-[rgb(var(--ec-badge-color-green-text))]', dot: 'bg-[rgb(var(--ec-badge-color-green-text))]' },
-  warning: { text: 'text-[rgb(var(--ec-badge-color-yellow-text))]', dot: 'bg-[rgb(var(--ec-badge-color-yellow-text))]' },
-  danger: {
-    text: 'text-[rgb(var(--ec-badge-color-red-text))]',
-    dot: 'bg-[rgb(var(--ec-badge-color-red-text))]',
-    hover: 'hover:bg-[rgb(var(--ec-badge-color-red-background))]',
-  },
-} as const;
-
-/** The dot showing whether the canvas is connected */
-export const CONNECTION_DOT: Record<Status, string> = {
-  connected: STATUS.success.dot,
-  connecting: STATUS.warning.dot,
-  disconnected: STATUS.danger.dot,
-};
-
-/** How each canvas status looks and what it means (from the theme's badge colours) */
-export const CANVAS_STATUS_LOOK: Record<CanvasStatus, { label: string; description: string; pill: string; dot: string }> = {
-  draft: {
-    label: 'Draft',
-    description: 'Being worked on',
-    pill: 'bg-[rgb(var(--ec-badge-color-gray-background))] text-[rgb(var(--ec-badge-color-gray-text))] border-[rgb(var(--ec-badge-color-gray-text)/0.25)]',
-    dot: 'bg-[rgb(var(--ec-badge-color-gray-text))]',
-  },
-  proposed: {
-    label: 'Proposed',
-    description: 'Ready for review',
-    pill: 'bg-[rgb(var(--ec-badge-color-yellow-background))] text-[rgb(var(--ec-badge-color-yellow-text))] border-[rgb(var(--ec-badge-color-yellow-text)/0.3)]',
-    dot: 'bg-[rgb(var(--ec-badge-color-yellow-text))]',
-  },
-  accepted: {
-    label: 'Accepted',
-    description: 'The agreed design',
-    pill: 'bg-[rgb(var(--ec-badge-color-green-background))] text-[rgb(var(--ec-badge-color-green-text))] border-[rgb(var(--ec-badge-color-green-text)/0.3)]',
-    dot: 'bg-[rgb(var(--ec-badge-color-green-text))]',
-  },
-  rejected: {
-    label: 'Rejected',
-    description: 'Decided against, kept for the record',
-    pill: 'bg-[rgb(var(--ec-badge-color-red-background))] text-[rgb(var(--ec-badge-color-red-text))] border-[rgb(var(--ec-badge-color-red-text)/0.3)]',
-    dot: 'bg-[rgb(var(--ec-badge-color-red-text))]',
-  },
-};

package/eventcatalog/src/features/studio/edges.ts

@@ -1,56 +0,0 @@
-import type { Connection, Edge, EdgeMarker } from '@xyflow/react';
-
-/** Connections on a canvas, labelled with EventCatalog's wording (e.g. "publishes event", "subscribed by") */
-
-/** Node types that are messages, and their catalog collection */
-export const MESSAGE_COLLECTIONS: Record<string, string> = {
-  event: 'events',
-  command: 'commands',
-  query: 'queries',
-};
-
-export const EDGE_COLOR = '#6b7280';
-export const EDGE_MARKER: EdgeMarker = { type: 'arrowclosed', color: EDGE_COLOR, width: 18, height: 18 };
-
-const PRODUCERS = ['service', 'agent', 'actor', 'externalSystem', 'view'];
-const PRODUCER_LABELS: Record<string, string> = { commands: 'invokes', events: 'publishes \nevent', queries: 'requests' };
-const MESSAGE_LABELS: Record<string, string> = { commands: 'accepts', events: 'subscribed by', queries: 'accepts' };
-
-const getCollection = (sourceType?: string, targetType?: string) =>
-  MESSAGE_COLLECTIONS[sourceType ?? ''] ?? MESSAGE_COLLECTIONS[targetType ?? ''];
-
-export const getEdgeLabel = (sourceType = '', targetType = ''): string => {
-  const sourceCollection = MESSAGE_COLLECTIONS[sourceType];
-  const targetCollection = MESSAGE_COLLECTIONS[targetType];
-
-  if (PRODUCERS.includes(sourceType) && targetCollection) return PRODUCER_LABELS[targetCollection];
-  // One message leading to another (e.g. an event that causes a command)
-  if (sourceCollection && targetCollection) return 'triggers';
-  if (sourceCollection && targetType === 'channel') return 'sent to';
-  if (sourceCollection) return MESSAGE_LABELS[sourceCollection];
-  if (sourceType === 'channel') return 'routes to';
-  if (targetType === 'channel') return 'publishes to';
-  if (targetType === 'data') return 'writes to';
-  if (sourceType === 'data') return 'read by';
-  if (sourceType === 'actor') return 'uses';
-  if (targetType === 'view') return 'serves';
-  if (targetType === 'externalSystem') return 'calls';
-  if (targetType === 'actor') return 'notifies';
-  return '';
-};
-
-/** Message edges get the animated envelope edge from the visualiser, everything else a labelled smooth step edge */
-export const createEdge = (connection: Connection, sourceType?: string, targetType?: string): Edge => {
-  const collection = getCollection(sourceType, targetType);
-  return {
-    id: `edge-${crypto.randomUUID().slice(0, 8)}`,
-    source: connection.source,
-    target: connection.target,
-    sourceHandle: connection.sourceHandle ?? null,
-    targetHandle: connection.targetHandle ?? null,
-    type: collection ? 'animated' : 'smoothstep',
-    label: getEdgeLabel(sourceType, targetType),
-    markerEnd: EDGE_MARKER,
-    data: collection ? { message: { collection } } : {},
-  };
-};

package/eventcatalog/src/features/studio/flow-state.ts

@@ -1,92 +0,0 @@
-import type { Edge, Node, XYPosition } from '@xyflow/react';
-
-/**
- * The design (nodes and edges) comes from the shared document; some state stays with each person: what they
- * have selected, what they're dragging and resizing, and the sizes React Flow measured in their browser.
- */
-export const LOCAL_NODE_KEYS = ['selected', 'dragging', 'resizing', 'measured'] as const satisfies readonly (keyof Node)[];
-export const LOCAL_EDGE_KEYS = ['selected'] as const satisfies readonly (keyof Edge)[];
-
-/** A shared item with the local-only state of the one already shown. Nothing else is kept from the local one. */
-export const withLocalState = <T extends object>(shared: T, local: T | undefined, localKeys: readonly (keyof T)[]): T => {
-  if (!local) return shared;
-  const kept: Partial<T> = {};
-  for (const key of localKeys) if (local[key] !== undefined) kept[key] = local[key];
-  return { ...shared, ...kept };
-};
-
-/**
- * Applies changes to shared items (by id) to the items shown, keeping every unchanged item as the same object
- * (so React Flow doesn't re-render it) and the order they were first seen in (new ones go at the end).
- * `getShared` returns an item's shared value, or undefined if it was deleted. Returns `local` itself when
- * nothing changed.
- */
-export const patchShared = <T extends { id: string }>(
-  local: T[],
-  changedIds: Iterable<string>,
-  getShared: (id: string) => T | undefined,
-  localKeys: readonly (keyof T)[]
-): T[] => {
-  const indexById = new Map(local.map((item, index) => [item.id, index]));
-  let next: T[] | undefined;
-  const removed = new Set<string>();
-  const added: T[] = [];
-
-  for (const id of changedIds) {
-    const shared = getShared(id);
-    const index = indexById.get(id);
-    if (!shared) {
-      if (index !== undefined) removed.add(id);
-      continue;
-    }
-    if (index === undefined) {
-      added.push(shared);
-      continue;
-    }
-    next ??= [...local];
-    next[index] = withLocalState(shared, local[index], localKeys);
-  }
-
-  if (!next && removed.size === 0 && added.length === 0) return local;
-  const patched = next ?? local;
-  return [...(removed.size ? patched.filter((item) => !removed.has(item.id)) : patched), ...added];
-};
-
-/** Where nodes being dragged are, by id, until they're dropped (and saved) */
-export type Moves = ReadonlyMap<string, XYPosition>;
-
-const samePosition = (a: XYPosition, b: XYPosition) => a.x === b.x && a.y === b.y;
-
-/**
- * Nodes moved to the positions given (e.g. where someone else is dragging them), except ones being dragged
- * here. Returns `nodes` itself when none move.
- */
-export const withPositions = (nodes: Node[], positions: Moves): Node[] => {
-  if (positions.size === 0) return nodes;
-  let next: Node[] | undefined;
-  nodes.forEach((node, index) => {
-    const position = positions.get(node.id);
-    if (!position || node.dragging || samePosition(position, node.position)) return;
-    next ??= [...nodes];
-    next[index] = { ...node, position };
-  });
-  return next ?? nodes;
-};
-
-/**
- * After shared changes are applied (`next`, from `previous`): nodes being dragged here stay where they're being
- * dragged (when they're dropped, the drop is saved and wins). Returns `next` itself when none are.
- */
-export const keepDragged = (next: Node[], previous: Node[]): Node[] => {
-  if (next === previous) return next;
-  const dragged = new Map(previous.filter((node) => node.dragging).map((node) => [node.id, node.position]));
-  if (dragged.size === 0) return next;
-  let kept: Node[] | undefined;
-  next.forEach((node, index) => {
-    const position = dragged.get(node.id);
-    if (!position || samePosition(position, node.position)) return;
-    kept ??= [...next];
-    kept[index] = { ...node, position };
-  });
-  return kept ?? next;
-};