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

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

@@ -0,0 +1,183 @@
+import { memo, type RefObject } from 'react';
+import type { Node } from '@xyflow/react';
+import { Box, ExternalLink, Library } from 'lucide-react';
+import { getCatalogLink } from '../catalog';
+import {
+  EditableText,
+  EditStatus,
+  Field,
+  NodeCard,
+  getNodeLabel,
+  getResource,
+  isVersioned,
+  updateResource,
+  useSavedFlash,
+  type UpdateNodeData,
+  NODE_ICONS,
+} from '@eventcatalog/visualiser/studio';
+
+/** Something it's connected to: the node at the other end, and the connection's label */
+export type NodeConnection = { id: string; name: string; type?: string; label?: string; outgoing: boolean };
+
+/**
+ * A node's details, in a card next to it (as Studio on the web's): its type and where it is, and its name, version
+ * and summary, saved as they're typed, and what it's connected to (click one to go to it). Catalog resources are read only (they're changed in the catalog), as is
+ * everything on a locked canvas. Notes and text are edited on the canvas.
+ */
+export default memo(function NodeDetails({
+  node,
+  parentName,
+  connections,
+  onOpenNode,
+  containerRef,
+  locked,
+  onChange,
+  onClose,
+}: {
+  /** What's shown of the node (not its position: the card follows the node on screen by itself) */
+  node: Pick<Node, 'id' | 'type' | 'data'>;
+  /** The domain or system it's in, if it's in one */
+  parentName?: string;
+  connections: NodeConnection[];
+  /** Goes to a node it's connected to (and shows its card) */
+  onOpenNode: (id: string) => void;
+  /** The canvas, to put the card next to the node */
+  containerRef: RefObject<HTMLElement | null>;
+  locked: boolean;
+  onChange: UpdateNodeData;
+  onClose: () => void;
+}) {
+  const { saved, showSaved } = useSavedFlash();
+  const resource = getResource(node.type, node.data);
+  const link = getCatalogLink(node);
+  const label = getNodeLabel(node.type);
+  const { icon: Icon, className: iconClassName } = NODE_ICONS[node.type ?? ''] ?? { icon: Box, className: '' };
+  const versioned = isVersioned(node.type);
+  const name = String(resource.name ?? '');
+  const version = String(link?.version ?? resource.version ?? '');
+  const summary = String(resource.summary ?? '');
+  const save = (fields: Record<string, string>) => onChange(node.id, (data) => updateResource(node.type, data, fields));
+
+  return (
+    <NodeCard
+      nodeId={node.id}
+      containerRef={containerRef}
+      label={name || label}
+      onClose={onClose}
+      kicker={
+        <>
+          {/* Its type, in its colour (as the web's type pill) */}
+          <span className={`flex-none ${iconClassName}`}>
+            <span className="inline-flex items-center gap-1 rounded bg-current px-1.5 text-[9px] font-bold uppercase leading-4 tracking-wider">
+              <Icon aria-hidden size={10} className="text-white" />
+              <span className="text-white">{label}</span>
+            </span>
+          </span>
+          {parentName && <span className="ec-doc-card-breadcrumb">in {parentName}</span>}
+        </>
+      }
+      header={
+        link || locked ? (
+          <>
+            <h2 className="ec-doc-card-title">
+              {name}
+              {version && <span className="ec-doc-card-version">v{version}</span>}
+            </h2>
+            {summary && <p className="ec-doc-card-summary">{summary}</p>}
+            {link && (
+              <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-[rgb(var(--ec-page-text-muted))]">
+                <span className="inline-flex items-center gap-1.5">
+                  <Library aria-hidden size={13} className="text-[rgb(var(--ec-accent))]" />
+                  From your catalog: change it there
+                </span>
+                <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 EventCatalog <ExternalLink aria-hidden size={12} />
+                </a>
+              </div>
+            )}
+          </>
+        ) : (
+          // A small form: what's typed is saved as it's typed (there's nothing to press), and shown on the node
+          <div className="ec-edit-form" key={node.id}>
+            <Field label="Name">
+              <EditableText
+                label="Name"
+                value={name}
+                onSave={(next) => save({ name: next })}
+                onSaved={showSaved}
+                placeholder={`Name this ${label.toLowerCase()}`}
+                className="ec-editable-title"
+                required
+              />
+            </Field>
+            {versioned && (
+              <Field label="Version" className="ec-field-version">
+                <EditableText
+                  label="Version"
+                  value={version || '0.0.1'}
+                  onSave={(next) => save({ version: next })}
+                  onSaved={showSaved}
+                  placeholder="0.0.1"
+                  required
+                />
+              </Field>
+            )}
+            <Field label="Summary">
+              <EditableText
+                label="Summary"
+                value={summary}
+                onSave={(next) => save({ summary: next })}
+                onSaved={showSaved}
+                placeholder="What it does, in a sentence or two"
+                className="ec-editable-summary"
+                multiline
+              />
+            </Field>
+            <EditStatus saved={saved} />
+          </div>
+        )
+      }
+    >
+      <div className="ec-doc-card-body px-4 pb-3.5 pt-1 empty:hidden">
+        {(['Connects to', 'Connected from'] as const).map((heading) => {
+          const items = connections.filter((connection) => connection.outgoing === (heading === 'Connects to'));
+          if (!items.length) return null;
+          return (
+            <section key={heading} className="mt-3">
+              <h3 className="mb-1.5 text-xs font-semibold text-[rgb(var(--ec-page-text-muted))]">{heading}</h3>
+              <ul className="space-y-0.5">
+                {items.map((item) => {
+                  const { icon: ItemIcon, className: itemIconClassName } = NODE_ICONS[item.type ?? ''] ?? {
+                    icon: Box,
+                    className: '',
+                  };
+                  return (
+                    <li key={`${item.id}-${item.label}`}>
+                      <button
+                        type="button"
+                        title={`Go to ${item.name}`}
+                        onClick={() => onOpenNode(item.id)}
+                        className="flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-sm hover:bg-[rgb(var(--ec-content-hover))]"
+                      >
+                        <ItemIcon aria-hidden size={15} className={`flex-none ${itemIconClassName}`} />
+                        <span className="min-w-0 flex-1 truncate">{item.name}</span>
+                        {item.label && (
+                          <span className="flex-none text-[11px] text-[rgb(var(--ec-page-text-muted))]">{item.label}</span>
+                        )}
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+            </section>
+          );
+        })}
+      </div>
+    </NodeCard>
+  );
+});

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

@@ -0,0 +1,79 @@
+import { useState, type FormEvent } from 'react';
+import { MAX_TITLE_LENGTH } from '../limits';
+import Dialog, { PRIMARY_BUTTON, SECONDARY_BUTTON } from './Dialog';
+import { STATUS } from '@eventcatalog/visualiser/studio';
+
+/**
+ * Naming the canvas a diagram is opened in (the visualiser's "Open in Studio"), named after the diagram to start
+ * with, like a new canvas on the Studio page. Loaded with the visualiser, so it imports nothing that loads a canvas.
+ */
+export default function OpenInStudioDialog({
+  title,
+  onOpen,
+  onClose,
+}: {
+  /** The diagram's title */
+  title?: string;
+  /** Makes the canvas with this name and opens it (rejects with what went wrong) */
+  onOpen: (title: string | undefined) => Promise<void>;
+  onClose: () => void;
+}) {
+  const [name, setName] = useState((title ?? '').slice(0, MAX_TITLE_LENGTH));
+  const [opening, setOpening] = useState(false);
+  const [error, setError] = useState<string>();
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    setOpening(true);
+    setError(undefined);
+    try {
+      // Stays open (and busy) while the canvas page loads
+      await onOpen(name.trim() || undefined);
+    } catch (failure) {
+      setError((failure as Error).message);
+      setOpening(false);
+    }
+  };
+
+  return (
+    <Dialog labelledBy="open-in-studio-title" busy={opening} onClose={onClose}>
+      <form onSubmit={submit}>
+        <div className="border-b px-5 py-4 border-[rgb(var(--ec-page-border))]">
+          <h2 id="open-in-studio-title" className="text-base font-semibold">
+            Open in Studio
+          </h2>
+          <p className="mt-0.5 text-sm text-[rgb(var(--ec-page-text-muted))]">
+            A new canvas starts with this diagram. Name it for what you're designing, so your team can find it.
+          </p>
+        </div>
+        <div className="px-5 py-4">
+          <label htmlFor="open-in-studio-name" className="block text-sm font-semibold">
+            Name
+          </label>
+          <input
+            id="open-in-studio-name"
+            // Ready to type a new name, or keep the diagram's
+            autoFocus
+            onFocus={(event) => event.target.select()}
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            maxLength={MAX_TITLE_LENGTH}
+            autoComplete="off"
+            placeholder="e.g. Payments redesign"
+            disabled={opening}
+            className="mt-2 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)]"
+          />
+          {error && <p className={`mt-2 text-sm ${STATUS.danger.text}`}>{error}</p>}
+        </div>
+        <div className="flex justify-end gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
+          <button type="button" onClick={onClose} disabled={opening} className={SECONDARY_BUTTON}>
+            Cancel
+          </button>
+          <button type="submit" disabled={opening} className={PRIMARY_BUTTON}>
+            {opening ? 'Opening…' : 'Open in Studio'}
+          </button>
+        </div>
+      </form>
+    </Dialog>
+  );
+}

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

@@ -1,16 +1,15 @@
 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 { useInternalNode, useStore, useStoreApi, type XYPosition } from '@xyflow/react';
+import { Eye, EyeOff } from 'lucide-react';
+import { CanvasPortal, sizeOf, COUNTER_SCALE, useCounterScale, Picture, AgentMark } from '@eventcatalog/visualiser/studio';
 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.
+ * re-rendering, and counter-scaled (COUNTER_SCALE, set outside React) 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,
@@ -20,22 +19,22 @@ export const RemotePresence = memo(function RemotePresence({
   clientId: number | null;
 }) {
   const people = usePeople(store);
-  const zoom = useStore((state) => state.transform[2]);
-  const scale = 1 / zoom;
+  const layer = useRef<HTMLDivElement>(null);
+  useCounterScale(layer);
   const others = store ? people.filter((peer) => peer.clientId !== clientId) : [];
 
   return (
-    <ViewportPortal>
+    <CanvasPortal>
       {/* Above nodes (selected ones are raised to 1000) */}
-      <div className="pointer-events-none absolute left-0 top-0" style={{ zIndex: 2000 }}>
+      <div ref={layer} 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} />}
+            <PeerMarks store={store!} clientId={peer.clientId} />
+            {peer.pointer && <PeerPointer store={store!} peer={peer} />}
           </Fragment>
         ))}
       </div>
-    </ViewportPortal>
+    </CanvasPortal>
   );
 });
 
@@ -51,33 +50,39 @@ const marksKey = (peer: Peer | undefined) =>
     : '';
 
 /** 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 }) {
+const PeerMarks = memo(function PeerMarks({ store, clientId }: { store: PresenceStore; clientId: 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} />
+        <SelectionOutline key={id} nodeId={id} name={peer.name} color={peer.color} />
       ))}
-      {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>
-      )}
+      {peer.pointer && peer.connecting && <ConnectingLine from={peer.connecting} to={peer.pointer} color={peer.color} />}
     </>
   );
 });
 
+/** A connection someone's dragging: only shown while they drag one, so it can follow the zoom itself */
+function ConnectingLine({ from, to, color }: { from: XYPosition; to: XYPosition; color: string }) {
+  const scale = 1 / useStore((state) => state.transform[2]);
+  return (
+    <svg className="absolute left-0 top-0 overflow-visible" width={1} height={1}>
+      <line
+        x1={from.x}
+        y1={from.y}
+        x2={to.x}
+        y2={to.y}
+        stroke={color}
+        strokeWidth={2 * scale}
+        strokeDasharray={`${6 * scale} ${4 * scale}`}
+      />
+      <circle cx={from.x} cy={from.y} r={4 * scale} fill={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;
 
@@ -85,19 +90,15 @@ 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 PeerPointer = memo(function PeerPointer({ store, peer }: { store: PresenceStore; peer: Peer }) {
   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})`;
+      ref.current.style.transform = `translate(${shown.current.x}px, ${shown.current.y}px) scale(var(${COUNTER_SCALE}, 1))`;
   };
 
-  useLayoutEffect(draw, [scale]);
-
   useLayoutEffect(() => {
     let target: XYPosition | null = null;
     let from: XYPosition = { x: 0, y: 0 };
@@ -148,7 +149,7 @@ const PeerPointer = memo(function PeerPointer({ store, peer, scale }: { store: P
         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} />}
+        {peer.agent && <AgentMark name={peer.name} 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>}
@@ -157,17 +158,18 @@ const PeerPointer = memo(function PeerPointer({ store, peer, scale }: { store: P
   );
 });
 
+// Screen pixels, in the canvas's coordinates (counter-scaled by the layer's COUNTER_SCALE)
+const onScreen = (px: number) => `calc(${px}px * var(${COUNTER_SCALE}, 1))`;
+
 /** 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;
@@ -177,17 +179,21 @@ const SelectionOutline = memo(function SelectionOutline({
     <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,
+        left: `calc(${x}px - ${onScreen(4)})`,
+        top: `calc(${y}px - ${onScreen(4)})`,
+        width: `calc(${width}px + ${onScreen(8)})`,
+        height: `calc(${height}px + ${onScreen(8)})`,
+        border: `${onScreen(2)} solid ${color}`,
+        borderRadius: onScreen(8),
       }}
     >
       <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' }}
+        style={{
+          backgroundColor: color,
+          transform: `translateY(-100%) scale(var(${COUNTER_SCALE}, 1))`,
+          transformOrigin: 'bottom right',
+        }}
       >
         {name}
       </span>
@@ -253,6 +259,7 @@ export const AgentActivity = memo(function AgentActivity({
   const working = people.filter((peer) => peer.clientId !== clientId && peer.agent && peer.pointer);
   const camera = useFollowCamera({
     enabled: following && enabled,
+    fitsContent: enabled,
     agentsWorking: working.length > 0,
     getAgents: () => (store?.getPeers() ?? []).filter((peer: Peer) => peer.clientId !== clientId && peer.agent && peer.pointer),
   });