@eventcatalog/core 5.0.0-beta.1 → 5.0.0-beta.11

package/eventcatalog/src/features/studio/components/Presence.tsx

@@ -0,0 +1,286 @@
+import { Fragment, memo, useEffect, useLayoutEffect, useRef, useSyncExternalStore, type MutableRefObject } from 'react';
+import { useInternalNode, useStore, useStoreApi, ViewportPortal, type XYPosition } from '@xyflow/react';
+import { Bot, Eye, EyeOff } from 'lucide-react';
+import { sizeOf } from '../grouping';
+import { usePeople, type Peer, type PresenceStore } from '../hooks/presence-store';
+import { useFollowCamera } from '../hooks/use-follow-camera';
+import Picture from './Picture';
+
+/**
+ * Other people on the canvas: their pointers, selections and the connections they're dragging. Drawn in the
+ * canvas's own coordinates (React Flow's viewport portal), so panning and zooming move them without
+ * re-rendering, and counter-scaled so they stay the same size on screen. Each person's pointer and marks follow
+ * them on their own, so one pointer moving doesn't re-render anyone else's.
+ */
+export const RemotePresence = memo(function RemotePresence({
+  store,
+  clientId,
+}: {
+  store: PresenceStore | null;
+  clientId: number | null;
+}) {
+  const people = usePeople(store);
+  const zoom = useStore((state) => state.transform[2]);
+  const scale = 1 / zoom;
+  const others = store ? people.filter((peer) => peer.clientId !== clientId) : [];
+
+  return (
+    <ViewportPortal>
+      {/* Above nodes (selected ones are raised to 1000) */}
+      <div className="pointer-events-none absolute left-0 top-0" style={{ zIndex: 2000 }}>
+        {others.map((peer) => (
+          <Fragment key={peer.clientId}>
+            <PeerMarks store={store!} clientId={peer.clientId} scale={scale} />
+            {peer.pointer && <PeerPointer store={store!} peer={peer} scale={scale} />}
+          </Fragment>
+        ))}
+      </div>
+    </ViewportPortal>
+  );
+});
+
+const findPeer = (store: PresenceStore, clientId: number) => store.getPeers().find((peer) => peer.clientId === clientId);
+
+/** What a peer's marks show: re-rendered only when it changes */
+const marksKey = (peer: Peer | undefined) =>
+  peer
+    ? [
+        peer.selection.join(','),
+        peer.connecting && peer.pointer ? [peer.connecting.x, peer.connecting.y, peer.pointer.x, peer.pointer.y].join(',') : '',
+      ].join('|')
+    : '';
+
+/** Someone's selection, and the connection they're dragging (a dashed line from where it starts to their pointer) */
+const PeerMarks = memo(function PeerMarks({ store, clientId, scale }: { store: PresenceStore; clientId: number; scale: number }) {
+  useSyncExternalStore(store.subscribe, () => marksKey(findPeer(store, clientId)));
+  const peer = findPeer(store, clientId);
+  if (!peer) return null;
+  return (
+    <>
+      {peer.selection.map((id) => (
+        <SelectionOutline key={id} nodeId={id} name={peer.name} color={peer.color} scale={scale} />
+      ))}
+      {peer.pointer && peer.connecting && (
+        <svg className="absolute left-0 top-0 overflow-visible" width={1} height={1}>
+          <line
+            x1={peer.connecting.x}
+            y1={peer.connecting.y}
+            x2={peer.pointer.x}
+            y2={peer.pointer.y}
+            stroke={peer.color}
+            strokeWidth={2 * scale}
+            strokeDasharray={`${6 * scale} ${4 * scale}`}
+          />
+          <circle cx={peer.connecting.x} cy={peer.connecting.y} r={4 * scale} fill={peer.color} />
+        </svg>
+      )}
+    </>
+  );
+});
+
+/** Longest a pointer takes to glide to where it was last seen (updates come about every 33 ms) */
+const MAX_GLIDE_MS = 120;
+
+/**
+ * Someone's pointer, gliding from where it was to each new position over the time since the last one (so a
+ * steady stream of updates looks like steady movement). Moved with a transform outside React: no re-renders.
+ */
+const PeerPointer = memo(function PeerPointer({ store, peer, scale }: { store: PresenceStore; peer: Peer; scale: number }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const shown = useRef<XYPosition | null>(null);
+  const scaleRef = useRef(scale);
+  scaleRef.current = scale;
+
+  const draw = () => {
+    if (ref.current && shown.current)
+      ref.current.style.transform = `translate(${shown.current.x}px, ${shown.current.y}px) scale(${scaleRef.current})`;
+  };
+
+  useLayoutEffect(draw, [scale]);
+
+  useLayoutEffect(() => {
+    let target: XYPosition | null = null;
+    let from: XYPosition = { x: 0, y: 0 };
+    let start = 0;
+    let duration = 0;
+    let lastSeen = 0;
+    let frame = 0;
+
+    const step = (now: number) => {
+      const t = Math.min(1, (now - start) / duration);
+      if (target) shown.current = { x: from.x + (target.x - from.x) * t, y: from.y + (target.y - from.y) * t };
+      draw();
+      frame = t < 1 ? requestAnimationFrame(step) : 0;
+    };
+
+    const follow = () => {
+      const pointer = findPeer(store, peer.clientId)?.pointer;
+      if (!pointer || (target && pointer.x === target.x && pointer.y === target.y)) return;
+      const now = performance.now();
+      target = pointer;
+      if (!shown.current) {
+        shown.current = pointer;
+        lastSeen = now;
+        return draw();
+      }
+      from = shown.current;
+      start = now;
+      duration = Math.min(MAX_GLIDE_MS, Math.max(16, now - lastSeen));
+      lastSeen = now;
+      if (!frame) frame = requestAnimationFrame(step);
+    };
+
+    follow();
+    const unsubscribe = store.subscribe(follow);
+    return () => {
+      unsubscribe();
+      cancelAnimationFrame(frame);
+    };
+  }, [store, peer.clientId]);
+
+  return (
+    <div ref={ref} className="absolute left-0 top-0 will-change-transform" style={{ transformOrigin: '0 0' }}>
+      {/* The pointer's outline is a light border on any background */}
+      <svg width="18" height="18" viewBox="0 0 24 24" fill={peer.color} stroke="white" strokeWidth="1.5">
+        <path d="M4 2l16 9-7 2-3 7z" />
+      </svg>
+      <span
+        className="absolute left-4 top-4 flex items-center gap-1 whitespace-nowrap rounded px-1.5 py-0.5 text-[11px] font-medium text-white"
+        style={{ backgroundColor: peer.color }}
+      >
+        {peer.agent && <Bot size={12} />}
+        <Picture src={peer.picture} className="-ml-0.5 h-4 w-4 shrink-0" />
+        {peer.name}
+        {peer.activity && <span className="font-normal opacity-90">· {peer.activity}</span>}
+      </span>
+    </div>
+  );
+});
+
+/** Someone's selection around a node: follows that node only, so other nodes moving don't re-render it */
+const SelectionOutline = memo(function SelectionOutline({
+  nodeId,
+  name,
+  color,
+  scale,
+}: {
+  nodeId: string;
+  name: string;
+  color: string;
+  scale: number;
+}) {
+  const node = useInternalNode(nodeId);
+  if (!node) return null;
+  const { width, height } = sizeOf(node);
+  const { x, y } = node.internals.positionAbsolute;
+  return (
+    <div
+      className="absolute"
+      style={{
+        left: x - 4 * scale,
+        top: y - 4 * scale,
+        width: width + 8 * scale,
+        height: height + 8 * scale,
+        border: `${2 * scale}px solid ${color}`,
+        borderRadius: 8 * scale,
+      }}
+    >
+      <span
+        className="absolute right-0 top-0 whitespace-nowrap rounded px-1.5 text-[10px] leading-4 text-white"
+        style={{ backgroundColor: color, transform: `translateY(-100%) scale(${scale})`, transformOrigin: 'bottom right' }}
+      >
+        {name}
+      </span>
+    </div>
+  );
+});
+
+/**
+ * Shares what we're looking at, so others can jump to it: the canvas position in the middle of the screen,
+ * and the zoom. Follows React Flow's store (people's moves and code's, e.g. fit view) without rendering.
+ */
+export const ViewportSharer = memo(function ViewportSharer({
+  onChange,
+}: {
+  onChange: (viewport: { x: number; y: number; zoom: number }) => void;
+}) {
+  const store = useStoreApi();
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const share = () => {
+      const {
+        transform: [x, y, zoom],
+        width,
+        height,
+      } = store.getState();
+      onChange({ x: (width / 2 - x) / zoom, y: (height / 2 - y) / zoom, zoom });
+    };
+    const unsubscribe = store.subscribe((state, previous) => {
+      if (state.transform === previous.transform && state.width === previous.width && state.height === previous.height) return;
+      clearTimeout(timer);
+      timer = setTimeout(share, 150);
+    });
+    share();
+    return () => {
+      unsubscribe();
+      clearTimeout(timer);
+    };
+  }, [store, onChange]);
+  return null;
+});
+
+/**
+ * Agents at work: who's working (with a button to follow them or stop), and the camera following them while
+ * they work (on by default inside a chat). `pause` is set for whoever moves the camera themselves.
+ */
+export const AgentActivity = memo(function AgentActivity({
+  store,
+  clientId,
+  enabled,
+  following,
+  onToggleFollowing,
+  pauseRef,
+}: {
+  store: PresenceStore | null;
+  clientId: number | null;
+  /** Off in the read only levels */
+  enabled: boolean;
+  following: boolean;
+  onToggleFollowing: () => void;
+  pauseRef: MutableRefObject<() => void>;
+}) {
+  const people = usePeople(store);
+  const working = people.filter((peer) => peer.clientId !== clientId && peer.agent && peer.pointer);
+  const camera = useFollowCamera({
+    enabled: following && enabled,
+    agentsWorking: working.length > 0,
+    getAgents: () => (store?.getPeers() ?? []).filter((peer: Peer) => peer.clientId !== clientId && peer.agent && peer.pointer),
+  });
+  pauseRef.current = camera.pause;
+
+  if (!enabled || working.length === 0) return null;
+  return (
+    <div className="absolute left-1/2 top-16 z-10 flex -translate-x-1/2 items-center gap-2 rounded-full border px-3 py-1 text-xs shadow-sm bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]">
+      <span className="flex -space-x-1">
+        {working.map((agent) => (
+          <span
+            key={agent.clientId}
+            className="h-2.5 w-2.5 rounded-full ring-2 ring-[rgb(var(--ec-card-bg))]"
+            style={{ backgroundColor: agent.color }}
+          />
+        ))}
+      </span>
+      <span>
+        {following ? 'Following' : ''} <span className="font-semibold">{working.map((agent) => agent.name).join(', ')}</span>
+        {following ? '' : ` ${working.length === 1 ? 'is' : 'are'} working`}
+      </span>
+      <button
+        onClick={onToggleFollowing}
+        className="flex items-center gap-1 rounded-full px-2 py-0.5 font-medium text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))]"
+      >
+        {following ? <EyeOff size={12} /> : <Eye size={12} />}
+        {following ? 'Stop' : 'Follow'}
+      </button>
+    </div>
+  );
+});

package/eventcatalog/src/features/studio/components/PropertiesPanel.tsx

@@ -0,0 +1,212 @@
+import { memo, useState, type FormEvent, type ReactNode } from 'react';
+import type { Node } from '@xyflow/react';
+import { Box, ExternalLink, Library, Trash2, X } from 'lucide-react';
+import { getCatalogLink } from '../catalog';
+import { getNodeLabel, getResource, isVersioned, updateResource } from '../node-types';
+import type { UpdateNodeData } from './canvas-nodes';
+import { NODE_ICONS } from './icons';
+import { STATUS } from './status';
+
+const inputClass =
+  'w-full rounded-lg border px-3 py-2 text-sm shadow-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:border-[rgb(var(--ec-accent))] focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.25)] read-only:cursor-default read-only:opacity-70 read-only:shadow-none read-only:focus:ring-0 read-only:focus:border-[rgb(var(--ec-input-border))]';
+const buttonClass = 'rounded-lg px-4 py-2 text-sm font-medium transition-colors';
+
+// Versions are usually semantic versions (1.0.0), but any text is allowed
+const LOOKS_LIKE_A_VERSION = /^v?\d+(\.\d+){0,2}([-+][\w.-]+)?$/;
+
+/** How to name each type, shown under the name */
+const NAME_HINTS: Record<string, string> = {
+  event: 'The name of the event. Use a verb-noun format in the past tense (e.g., OrderPlaced).',
+  command: 'The name of the command. Use an instruction (e.g., PlaceOrder).',
+  query: 'The name of the query. Ask for something (e.g., GetOrder).',
+  service: 'The name of the service (e.g., Orders Service).',
+  channel: 'The name of the channel (e.g., orders.events).',
+};
+
+type Field = 'name' | 'version' | 'summary';
+
+/**
+ * The details of the node being edited: its name, version and summary, saved together with Save changes (one
+ * change for everyone, and one step to undo). Catalog resources are read only: they're changed in the catalog.
+ * Notes and text are edited on the canvas.
+ */
+export default memo(function PropertiesPanel({
+  node,
+  onChange,
+  onDelete,
+  onClose,
+}: {
+  /** What's shown of the node (not its position, so dragging it doesn't re-render the panel) */
+  node: Pick<Node, 'id' | 'type' | 'data'>;
+  onChange: UpdateNodeData;
+  onDelete: (ids: string[]) => void;
+  onClose: () => void;
+}) {
+  const resource = getResource(node.type, node.data);
+  const link = getCatalogLink(node);
+  const label = getNodeLabel(node.type);
+  const noun = label.toLowerCase();
+  const { icon: Icon, className: iconClassName } = NODE_ICONS[node.type ?? ''] ?? { icon: Box, className: '' };
+  const versioned = isVersioned(node.type);
+
+  // What's been changed here and not saved. Fields not changed show the node as it is, so changes others make while
+  // it's open show up.
+  const [draft, setDraft] = useState<Partial<Record<Field, string>>>({});
+  const saved: Record<Field, string> = {
+    name: String(resource.name ?? ''),
+    version: String(link?.version ?? resource.version ?? ''),
+    summary: String(resource.summary ?? ''),
+  };
+  const value = (field: Field) => draft[field] ?? saved[field];
+  const edit = (field: Field) => (event: { target: { value: string } }) =>
+    setDraft((current) => ({ ...current, [field]: event.target.value }));
+
+  const changes = Object.entries(draft).filter(([field, text]) => text !== saved[field as Field]);
+  const missing = !value('name').trim() || (versioned && !value('version').trim());
+  const canSave = !link && changes.length > 0 && !missing;
+  const version = value('version');
+
+  const save = (event?: FormEvent) => {
+    event?.preventDefault();
+    if (!canSave) return;
+    onChange(node.id, (data) => updateResource(node.type, data, Object.fromEntries(changes)));
+    setDraft({});
+    onClose();
+  };
+
+  return (
+    <aside className="flex w-[22rem] shrink-0 flex-col border-l bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]">
+      <header className="flex items-center gap-3 border-b px-5 py-4 border-[rgb(var(--ec-page-border))]">
+        <Icon size={22} className={`shrink-0 ${iconClassName}`} />
+        <h2 className="min-w-0 flex-1 truncate text-lg font-semibold">{label}</h2>
+        <button
+          type="button"
+          onClick={onClose}
+          title="Close"
+          aria-label="Close"
+          className="shrink-0 rounded-md p-1 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)] hover:text-[rgb(var(--ec-icon-hover))]"
+        >
+          <X size={18} />
+        </button>
+      </header>
+
+      <form
+        onSubmit={save}
+        // ⌘/Ctrl + Enter saves from any field (Enter alone adds a line to the summary)
+        onKeyDown={(event) => (event.metaKey || event.ctrlKey) && event.key === 'Enter' && save(event)}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-5 py-5">
+          {link && (
+            <div className="space-y-2 rounded-lg border p-3 text-xs bg-[rgb(var(--ec-accent-subtle)/0.5)] border-[rgb(var(--ec-accent)/0.25)]">
+              <p className="flex items-center gap-1.5 font-semibold text-[rgb(var(--ec-page-text))]">
+                <Library size={14} className="text-[rgb(var(--ec-accent))]" />
+                From your catalog
+              </p>
+              <p className="text-[rgb(var(--ec-page-text-muted))]">
+                Its name, version and summary come from the catalog: change them there and they're kept in sync here.
+              </p>
+              <a
+                href={link.url}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 font-medium text-[rgb(var(--ec-accent))] hover:underline"
+              >
+                Open in catalog <ExternalLink size={12} />
+              </a>
+            </div>
+          )}
+
+          <FormField label="Name" hint={NAME_HINTS[node.type ?? ''] ?? `The name of the ${noun}.`} required={!link}>
+            <input
+              autoFocus={!link}
+              value={value('name')}
+              readOnly={!!link}
+              onChange={edit('name')}
+              placeholder={`Name this ${noun}`}
+              className={inputClass}
+            />
+          </FormField>
+          {versioned && (
+            <FormField label="Version" hint="The version number (e.g., 1.0.0)." required={!link}>
+              <input
+                value={version}
+                readOnly={!!link}
+                onChange={edit('version')}
+                placeholder="0.0.1"
+                spellCheck={false}
+                className={inputClass}
+              />
+              {!link && version && !LOOKS_LIKE_A_VERSION.test(version) && (
+                <p className={`text-xs ${STATUS.warning.text}`}>Versions are usually like 1.0.0</p>
+              )}
+            </FormField>
+          )}
+          <FormField label="Summary" hint={`A brief summary of the ${noun}.`}>
+            <textarea
+              rows={5}
+              value={value('summary')}
+              readOnly={!!link}
+              onChange={edit('summary')}
+              placeholder={`What does this ${noun} do?`}
+              className={`${inputClass} resize-y`}
+            />
+          </FormField>
+        </div>
+
+        <footer className="flex items-center gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
+          <button
+            type="button"
+            onClick={() => onDelete([node.id])}
+            title={`Delete ${noun}`}
+            aria-label={`Delete ${noun}`}
+            className={`mr-auto rounded-lg p-2 ${STATUS.danger.text} ${STATUS.danger.hover}`}
+          >
+            <Trash2 size={16} />
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className={`${buttonClass} border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)]`}
+          >
+            {link ? 'Close' : 'Cancel'}
+          </button>
+          {!link && (
+            <button
+              type="submit"
+              disabled={!canSave}
+              className={`${buttonClass} bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))] disabled:cursor-not-allowed disabled:opacity-50`}
+            >
+              Save changes
+            </button>
+          )}
+        </footer>
+      </form>
+    </aside>
+  );
+});
+
+function FormField({
+  label,
+  hint,
+  required = false,
+  children,
+}: {
+  label: string;
+  hint: string;
+  required?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <label className="block space-y-2">
+      <span className="block">
+        <span className="block text-sm font-semibold text-[rgb(var(--ec-page-text))]">
+          {label}
+          {required && <span className={`ml-0.5 ${STATUS.danger.text}`}>*</span>}
+        </span>
+        <span className="mt-0.5 block text-xs text-[rgb(var(--ec-page-text-muted))]">{hint}</span>
+      </span>
+      {children}
+    </label>
+  );
+}