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

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

@@ -2,7 +2,8 @@ import { memo, useCallback, useMemo, useState, type ReactNode } from 'react';
 import { Check, ChevronRight, Plus, Search } from 'lucide-react';
 import type { CatalogResource } from '../catalog-resources';
 import { catalogNodeData } from '../catalog';
-import { NODE_CATEGORIES, nodeDefinitions } from '../node-types';
+import { isShownOnLevel, NODE_CATEGORIES, nodeDefinitions } from '../node-types';
+import type { Level } from '../levels';
 import type { Thread } from '../hooks/use-comments';
 import { CommentList } from './Comments';
 import { useDragGhost, type StartDrag } from './DragGhost';
@@ -70,6 +71,8 @@ type Tab = 'components' | 'catalog' | 'comments';
 
 /** Components and catalog resources to drag onto the canvas, and the comments on it */
 export default memo(function LeftPanel({
+  level,
+  onShowAll,
   resources,
   keysOnCanvas,
   onAddComponent,
@@ -79,6 +82,10 @@ export default memo(function LeftPanel({
   onToggleResolved,
   onOpenThread,
 }: {
+  /** The level shown: only what it shows is listed, so what's added stays on it */
+  level: Level;
+  /** Goes to L3, which shows everything */
+  onShowAll: () => void;
   resources: CatalogResource[];
   /** The catalog resources on the canvas */
   keysOnCanvas: Set<string>;
@@ -94,6 +101,10 @@ export default memo(function LeftPanel({
   const { startDrag, ghost } = useDragGhost();
   const sections = useCollapsed();
   const openThreads = threads.filter((thread) => !thread.resolved).length;
+  const shownResources = useMemo(
+    () => (level === 3 ? resources : resources.filter((resource) => isShownOnLevel(resource.node.type, level))),
+    [resources, level]
+  );
   const tabClass = (active: boolean) =>
     `flex flex-1 items-center justify-center gap-1 whitespace-nowrap rounded-md px-1.5 py-1 text-xs font-medium ${
       active ? 'bg-[rgb(var(--ec-page-bg))] shadow-sm' : 'text-[rgb(var(--ec-page-text-muted))]'
@@ -117,10 +128,11 @@ export default memo(function LeftPanel({
           )}
         </button>
       </div>
-      {tab === 'components' && <ComponentList onAdd={onAddComponent} startDrag={startDrag} sections={sections} />}
+      {tab !== 'comments' && level !== 3 && <LevelHint level={level} onShowAll={onShowAll} />}
+      {tab === 'components' && <ComponentList level={level} onAdd={onAddComponent} startDrag={startDrag} sections={sections} />}
       {tab === 'catalog' && (
         <CatalogList
-          resources={resources}
+          resources={shownResources}
           keysOnCanvas={keysOnCanvas}
           onAdd={onAddResource}
           startDrag={startDrag}
@@ -140,16 +152,30 @@ const listedDefinitions = NODE_CATEGORIES.map((category) => ({
   definitions: nodeDefinitions.filter((definition) => definition.category === category.id && !definition.unlisted),
 }));
 
+/** On L1 and L2: only what the level shows is listed (added there, it stays there), the rest is on L3 */
+function LevelHint({ level, onShowAll }: { level: Level; onShowAll: () => void }) {
+  return (
+    <p className="mx-3 mb-2 text-[11px] leading-snug text-[rgb(var(--ec-page-text-muted))]">
+      Showing what L{level} shows.{' '}
+      <button onClick={onShowAll} className="font-medium text-[rgb(var(--ec-accent))] hover:underline">
+        Go to L3 for everything
+      </button>
+    </p>
+  );
+}
+
 // Each component's data, made once, for the node shown while it's dragged
 const componentPreviews = new Map(
   nodeDefinitions.map((definition) => [definition.type, { type: definition.type, data: definition.createData() }])
 );
 
 const ComponentList = memo(function ComponentList({
+  level,
   onAdd,
   startDrag,
   sections: { collapsed, toggle },
 }: {
+  level: Level;
   onAdd: (type: string) => void;
   startDrag: StartDrag;
   sections: Collapsed;
@@ -157,6 +183,8 @@ const ComponentList = memo(function ComponentList({
   return (
     <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3">
       {listedDefinitions.map((category) => {
+        const definitions = category.definitions.filter((definition) => isShownOnLevel(definition.type, level));
+        if (definitions.length === 0) return null;
         const id = `components:${category.id}`;
         const open = !collapsed.has(id);
         return (
@@ -165,7 +193,7 @@ const ComponentList = memo(function ComponentList({
               {category.label}
             </SectionHeading>
             {open &&
-              category.definitions.map(({ type, label }) => {
+              definitions.map(({ type, label }) => {
                 const { icon: Icon, className } = NODE_ICONS[type];
                 return (
                   <div

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 './status';
+
+/**
+ * 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

@@ -3,14 +3,15 @@ import { useInternalNode, useStore, useStoreApi, ViewportPortal, type XYPosition
 import { Bot, Eye, EyeOff } from 'lucide-react';
 import { sizeOf } from '../grouping';
 import { usePeople, type Peer, type PresenceStore } from '../hooks/presence-store';
+import { COUNTER_SCALE, useCounterScale } from '../hooks/use-counter-scale';
 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,18 +21,18 @@ 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>
       {/* 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>
@@ -51,33 +52,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 +92,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 };
@@ -157,17 +160,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 +181,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 +261,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),
   });