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

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

@@ -1,230 +0,0 @@
-import type { Node, XYPosition } from '@xyflow/react';
-import { canGoInContainer, getNodeSize, isGroupType } from './node-types';
-
-/**
- * Containers: domains and systems shown as boxes that other nodes sit in.
- * A node inside one has its parentId, and its position is relative to the container.
- */
-
-/** Room around what's in a container, and for its header */
-export const GROUP_PADDING = { top: 80, right: 40, bottom: 40, left: 40 };
-
-type Rect = { x: number; y: number; width: number; height: number };
-
-const byId = (nodes: Node[]) => new Map(nodes.map((node) => [node.id, node]));
-
-/** A node's size: as rendered (in the browser), as set (containers, notes), or what its type renders at */
-export const sizeOf = (node: Node) => ({
-  width: node.measured?.width ?? node.width ?? getNodeSize(node.type).width,
-  height: node.measured?.height ?? node.height ?? getNodeSize(node.type).height,
-});
-
-/** Nodes are positioned relative to their container, so walk up the chain to get the canvas position */
-export const getAbsolutePosition = (node: Node, lookup: Map<string, Node>): XYPosition => {
-  const parent = node.parentId ? lookup.get(node.parentId) : undefined;
-  if (!parent) return node.position;
-  const parentPosition = getAbsolutePosition(parent, lookup);
-  return { x: parentPosition.x + node.position.x, y: parentPosition.y + node.position.y };
-};
-
-export const getAbsoluteRect = (node: Node, lookup: Map<string, Node>): Rect => ({
-  ...getAbsolutePosition(node, lookup),
-  ...sizeOf(node),
-});
-
-const getDepth = (node: Node, lookup: Map<string, Node>): number => {
-  const parent = node.parentId ? lookup.get(node.parentId) : undefined;
-  return parent ? 1 + getDepth(parent, lookup) : 0;
-};
-
-const isDescendantOf = (node: Node, ancestorId: string, lookup: Map<string, Node>): boolean => {
-  if (!node.parentId) return false;
-  if (node.parentId === ancestorId) return true;
-  const parent = lookup.get(node.parentId);
-  return parent ? isDescendantOf(parent, ancestorId, lookup) : false;
-};
-
-const containsPoint = (rect: Rect, point: XYPosition) =>
-  point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
-
-/** React Flow needs containers before what's in them in the nodes array */
-export const sortByHierarchy = (nodes: Node[]): Node[] => {
-  const lookup = byId(nodes);
-  return nodes
-    .map((node, index) => ({ node, index, depth: getDepth(node, lookup) }))
-    .sort((a, b) => a.depth - b.depth || a.index - b.index)
-    .map(({ node }) => node);
-};
-
-/** The innermost container under the centre of a node (never itself, or one of its own children) */
-export const findDropTarget = (nodeId: string, nodes: Node[]): Node | undefined => {
-  const lookup = byId(nodes);
-  const node = lookup.get(nodeId);
-  // Sticky notes go anywhere, never in a container (one that's in one is taken out when it's next moved)
-  if (!node || !canGoInContainer(node.type)) return undefined;
-  const rect = getAbsoluteRect(node, lookup);
-  const center = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
-  return nodes
-    .filter((candidate) => isGroupType(candidate.type) && candidate.id !== nodeId && !isDescendantOf(candidate, nodeId, lookup))
-    .filter((candidate) => containsPoint(getAbsoluteRect(candidate, lookup), center))
-    .sort((a, b) => getDepth(b, lookup) - getDepth(a, lookup))[0];
-};
-
-/** The innermost container at a canvas point, for things dropped there */
-export const findGroupAtPoint = (point: XYPosition, nodes: Node[]): Node | undefined => {
-  const lookup = byId(nodes);
-  return nodes
-    .filter((candidate) => isGroupType(candidate.type) && containsPoint(getAbsoluteRect(candidate, lookup), point))
-    .sort((a, b) => getDepth(b, lookup) - getDepth(a, lookup))[0];
-};
-
-/** The container something added goes in: the one asked for (by id), else the one it's dropped on */
-export const containerFor = (point: XYPosition, nodes: Node[], inside?: string): Node | undefined =>
-  inside ? nodes.find((node) => node.id === inside && isGroupType(node.type)) : findGroupAtPoint(point, nodes);
-
-/** A node moved into (or out of, without a parentId) a container, staying in the same place on the canvas */
-export const withParent = (node: Node, parentId: string | undefined, nodes: Node[]): Node => {
-  const lookup = byId(nodes);
-  const absolute = getAbsolutePosition(node, lookup);
-  const parent = parentId ? lookup.get(parentId) : undefined;
-  const parentPosition = parent ? getAbsolutePosition(parent, lookup) : { x: 0, y: 0 };
-  const { parentId: _, extent: __, ...rest } = node;
-  return {
-    ...rest,
-    ...(parent && { parentId: parent.id }),
-    position: { x: absolute.x - parentPosition.x, y: absolute.y - parentPosition.y },
-  };
-};
-
-/** A canvas point, relative to a container */
-export const toRelativePosition = (point: XYPosition, parentId: string, nodes: Node[]): XYPosition => {
-  const lookup = byId(nodes);
-  const parent = lookup.get(parentId);
-  if (!parent) return point;
-  const parentPosition = getAbsolutePosition(parent, lookup);
-  return { x: point.x - parentPosition.x, y: point.y - parentPosition.y };
-};
-
-/** Nodes and everything inside them (deleted with their container) */
-export const withDescendants = (ids: string[], nodes: Node[]): Set<string> => {
-  const lookup = byId(nodes);
-  const result = new Set(ids);
-  nodes.forEach((node) => {
-    if (ids.some((id) => isDescendantOf(node, id, lookup))) result.add(node.id);
-  });
-  return result;
-};
-
-/**
- * The size a container needs to fit what's inside it, never smaller than it is, and how far its children
- * must shift when some sit above or left of its content area (so the header stays clear).
- */
-export const fitGroup = (groupId: string, nodes: Node[]) => {
-  const lookup = byId(nodes);
-  const group = lookup.get(groupId);
-  const children = nodes.filter((node) => node.parentId === groupId);
-  if (!group || children.length === 0) return undefined;
-  const rects = children.map((child) => ({ ...child.position, ...sizeOf(child) }));
-  const shift = {
-    x: Math.max(0, GROUP_PADDING.left - Math.min(...rects.map((rect) => rect.x))),
-    y: Math.max(0, GROUP_PADDING.top - Math.min(...rects.map((rect) => rect.y))),
-  };
-  const current = sizeOf(group);
-  return {
-    shift,
-    width: Math.max(current.width, Math.max(...rects.map((rect) => rect.x + rect.width)) + shift.x + GROUP_PADDING.right),
-    height: Math.max(current.height, Math.max(...rects.map((rect) => rect.y + rect.height)) + shift.y + GROUP_PADDING.bottom),
-  };
-};
-
-/** How far a dragged node's middle can go past a container's edge and still be kept in it (growing it) */
-export const KEEP_IN_CONTAINER_MARGIN = 160;
-
-type Size = { width: number; height: number };
-/** A node's place and size as shown while something's dragged */
-export type NodePreview = { position: XYPosition; width?: number; height?: number };
-
-/**
- * Containers growing to fit what's being dragged in them, on every side, as a preview of where things will be.
- * `containerIds` are the containers around what's dragged, innermost first. `start` is the canvas when the drag
- * started, and `now` the canvas as shown (with the dragged nodes where they are now). A dragged node is kept in a
- * container while its middle is within `KEEP_IN_CONTAINER_MARGIN` of where the container was, and dropping it
- * further away takes it out, so the container goes back to its size. A container growing up or left moves, and
- * what's in it moves the other way, so nothing moves on the canvas.
- *
- * Returns, by id, where containers and the nodes in them that aren't dragged go (positions relative to their
- * containers), and their sizes for containers.
- */
-export const previewContainerGrowth = (
-  containerIds: string[],
-  draggedIds: ReadonlySet<string>,
-  start: ReadonlyMap<string, Node>,
-  now: ReadonlyMap<string, Node>
-): Map<string, NodePreview> => {
-  const previews = new Map<string, NodePreview>();
-  // Where each container's top left was on the canvas when the drag started (moving a container grown up or
-  // left is offset by what's in it moving the other way, so only its own shift changes it)
-  const startOrigin = (id: string) => getAbsolutePosition(start.get(id)!, start as Map<string, Node>);
-  const shifts = new Map<string, XYPosition>();
-
-  for (const id of containerIds) {
-    const container = start.get(id);
-    if (!container) continue;
-    const origin = startOrigin(id);
-    const startSize = sizeOf(container);
-    // Everything in it, in its coordinates when the drag started
-    const items: { rect: Rect }[] = [];
-    for (const node of start.values()) {
-      if (node.parentId !== id) continue;
-      if (draggedIds.has(node.id)) {
-        const current = now.get(node.id);
-        if (!current) continue;
-        const at = getAbsoluteRect(current, now as Map<string, Node>);
-        const middle = { x: at.x + at.width / 2, y: at.y + at.height / 2 };
-        const kept =
-          middle.x >= origin.x - KEEP_IN_CONTAINER_MARGIN &&
-          middle.x <= origin.x + startSize.width + KEEP_IN_CONTAINER_MARGIN &&
-          middle.y >= origin.y - KEEP_IN_CONTAINER_MARGIN &&
-          middle.y <= origin.y + startSize.height + KEEP_IN_CONTAINER_MARGIN;
-        if (kept) items.push({ rect: { ...at, x: at.x - origin.x, y: at.y - origin.y } });
-        continue;
-      }
-      // A container inside it that's grown: where it's grown to
-      const inner = previews.get(node.id);
-      const innerShift = shifts.get(node.id) ?? { x: 0, y: 0 };
-      items.push({
-        rect: {
-          x: node.position.x - innerShift.x,
-          y: node.position.y - innerShift.y,
-          ...(inner?.width && inner.height ? { width: inner.width, height: inner.height } : sizeOf(node)),
-        },
-      });
-    }
-
-    const shift = { x: 0, y: 0 };
-    let width = startSize.width;
-    let height = startSize.height;
-    if (items.length > 0) {
-      shift.x = Math.max(0, GROUP_PADDING.left - Math.min(...items.map(({ rect }) => rect.x)));
-      shift.y = Math.max(0, GROUP_PADDING.top - Math.min(...items.map(({ rect }) => rect.y)));
-      width =
-        Math.max(startSize.width, Math.max(...items.map(({ rect }) => rect.x + rect.width)) + GROUP_PADDING.right) + shift.x;
-      height =
-        Math.max(startSize.height, Math.max(...items.map(({ rect }) => rect.y + rect.height)) + GROUP_PADDING.bottom) + shift.y;
-    }
-    shifts.set(id, shift);
-    previews.set(id, {
-      position: { x: container.position.x - shift.x, y: container.position.y - shift.y },
-      width,
-      height,
-    });
-    // What's in it moves the other way. Not what's dragged: React Flow places it against the container as it is.
-    for (const node of start.values()) {
-      if (node.parentId !== id || draggedIds.has(node.id)) continue;
-      const own = previews.get(node.id);
-      const base = own?.position ?? node.position;
-      previews.set(node.id, { ...own, position: { x: base.x + shift.x, y: base.y + shift.y } });
-    }
-  }
-  return previews;
-};

package/eventcatalog/src/features/studio/hooks/use-counter-scale.ts

@@ -1,20 +0,0 @@
-import { useLayoutEffect, type RefObject } from 'react';
-import { useStoreApi } from '@xyflow/react';
-
-/** 1 / zoom, for things drawn in the canvas's coordinates that stay the same size on screen (`scale(var(...))`) */
-export const COUNTER_SCALE = '--studio-counter-scale';
-
-/**
- * Keeps COUNTER_SCALE on an element as the canvas zooms, outside React: what's counter-scaled with it (e.g. comment
- * pins) stays the same size on screen without re-rendering on every frame of a zoom
- */
-export function useCounterScale(ref: RefObject<HTMLElement | null>) {
-  const store = useStoreApi();
-  useLayoutEffect(() => {
-    const apply = (zoom: number) => ref.current?.style.setProperty(COUNTER_SCALE, String(1 / zoom));
-    apply(store.getState().transform[2]);
-    return store.subscribe((state, previous) => {
-      if (state.transform[2] !== previous.transform[2]) apply(state.transform[2]);
-    });
-  }, [store, ref]);
-}

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

@@ -1,56 +0,0 @@
-import type { Edge, Node, XYPosition } from '@xyflow/react';
-import { layoutWithElk } from '@eventcatalog/visualiser/layout';
-import { getEdgeRoute, type EdgeRoute } from './canvas-doc';
-import { isGroupType, isOnLevel } from './node-types';
-
-/**
- * Lays a canvas out with the same ELK layout as EventCatalog's visualiser (left to right, edges routed
- * around nodes, containers laid out with what's in them and sized to fit). Nodes are sized as rendered when
- * they have been (in the browser), or by their type.
- */
-export const layoutGraph = (nodes: Node[], edges: Edge[]) => layoutWithElk({ nodes, edges });
-
-/** The layout sizes containers with style.width/height; the canvas sizes them with width/height */
-export const withGroupSizes = (nodes: Node[]) =>
-  nodes.map((node) => {
-    const { width, height, ...style } = node.style ?? {};
-    if (typeof width !== 'number' || typeof height !== 'number') return node;
-    return { ...node, width, height, style };
-  });
-
-export type LayoutResult = {
-  /** Where each node goes (relative to its container, if it's in one), and containers' new sizes */
-  nodes: Map<string, { position: XYPosition; size?: { width: number; height: number } }>;
-  /** How each connection is drawn (around the nodes), by edge id */
-  routes: Map<string, EdgeRoute>;
-};
-
-/**
- * The canvas laid out: new positions for its nodes, new sizes for containers, and routes for the connections
- * (drawn like the visualiser's: around the nodes, following them when they're moved, and as a plain step once
- * they've moved too far for it). Notes added on L1 or L2 aren't on this canvas, so they stay where they are.
- */
-export const getLayoutPositions = async (nodes: Node[], edges: Edge[]): Promise<LayoutResult> => {
-  const onCanvas = nodes.filter((node) => isOnLevel(node, 3));
-  if (onCanvas.length === 0) return { nodes: new Map(), routes: new Map() };
-  const ids = new Set(onCanvas.map((node) => node.id));
-  const between = edges.filter((edge) => ids.has(edge.source) && ids.has(edge.target));
-  const laidOut = await layoutGraph(onCanvas, between);
-  return {
-    nodes: new Map(
-      withGroupSizes(laidOut.nodes).map((node) => [
-        node.id,
-        {
-          position: node.position,
-          ...(isGroupType(node.type) && node.width && node.height && { size: { width: node.width, height: node.height } }),
-        },
-      ])
-    ),
-    routes: new Map(
-      laidOut.edges.flatMap((edge) => {
-        const route = getEdgeRoute(edge);
-        return route ? [[edge.id, route] as const] : [];
-      })
-    ),
-  };
-};

package/eventcatalog/src/features/studio/level-layout.ts

@@ -1,145 +0,0 @@
-import type { Edge, Node } from '@xyflow/react';
-import { getNodeSize as getLayoutSize } from '@eventcatalog/visualiser/layout';
-import type { LevelPlace } from './canvas-doc';
-import { fitGroup, getAbsolutePosition } from './grouping';
-import { getNodeSize, isGroupType } from './node-types';
-import { placeNodes } from './placement';
-
-/**
- * L1 and L2 as people arrange them. A level's content comes from the canvas (see levels.ts), but where things are on
- * it is its own: each level keeps a layout (a LevelPlace per node, in the canvas), so things stay where they're put.
- * Nothing on a level moves when something's added: new things are placed next to what they connect to (like agents
- * place what they add) and containers grow to fit.
- */
-
-type Graph = { nodes: Node[]; edges: Edge[] };
-
-/** A container's size: as it's being worked on (width and height), or as laid out (levels size containers with style) */
-const containerSize = (node: Node) => {
-  if (node.width && node.height) return { width: node.width, height: node.height };
-  const { width, height } = node.style ?? {};
-  return typeof width === 'number' && typeof height === 'number' ? { width, height } : undefined;
-};
-
-/** The size the visualiser's layout gives a container with nothing in it (levels leave containers' size to it) */
-const emptyContainerSize = ({ type }: Pick<Node, 'type'>) => getLayoutSize({ id: '', type, position: { x: 0, y: 0 }, data: {} });
-
-/**
- * The size something new of a type is shown at on L1 or L2: L1 shows domains and systems with nothing in them as
- * cards, L2 as empty containers
- */
-export const getLevelNodeSize = (type: string | undefined, level: 1 | 2) => {
-  if (!isGroupType(type)) return getNodeSize(type);
-  return level === 1 ? getNodeSize() : emptyContainerSize({ type });
-};
-
-/** Where a node is on a level, and a container's size */
-const placeOf = (node: Node): LevelPlace => ({
-  x: node.position.x,
-  y: node.position.y,
-  ...(isGroupType(node.type) && containerSize(node)),
-});
-
-/** A level's nodes where they are, by id (not its notes, which are kept on the canvas): what its layout keeps */
-export const levelPlaces = (nodes: Node[]) =>
-  new Map(nodes.filter((node) => node.type !== 'note').map((node) => [node.id, placeOf(node)]));
-
-/**
- * A level arranged: each node where the level's layout has it, else where the diagram the canvas was opened from had
- * it (`fallback`), and anything with neither placed next to what it connects to. Containers grow to fit what's in
- * them. `placed` is where things the layout didn't have were put, and containers that grew (to keep, so they stay
- * there). Undefined when nothing on the level has a place yet: it's laid out from scratch then.
- */
-export const arrangeLevel = (
-  graph: Graph,
-  layout: ReadonlyMap<string, LevelPlace>,
-  fallback: ReadonlyMap<string, LevelPlace> = new Map()
-): { graph: Graph; placed: Map<string, LevelPlace> } | undefined => {
-  const known = (id: string) => layout.get(id) ?? fallback.get(id);
-  if (!graph.nodes.some((node) => known(node.id))) return undefined;
-
-  const placed = new Map<string, LevelPlace>();
-  // Containers carry their size as width and height while they're worked on (what placement and fitting read)
-  let nodes: Node[] = graph.nodes.map((node) => {
-    const place = known(node.id);
-    const size = isGroupType(node.type)
-      ? place?.width && place.height
-        ? { width: place.width, height: place.height }
-        : (containerSize(node) ?? emptyContainerSize(node))
-      : undefined;
-    return { ...node, position: place ? { x: place.x, y: place.y } : { x: 0, y: 0 }, ...size };
-  });
-
-  // Anything new, next to what it connects to (on the level), moving nothing that's there
-  const toPlace = nodes.filter((node) => !known(node.id)).map((node) => node.id);
-  if (toPlace.length) {
-    const positions = placeNodes(nodes, toPlace, graph.edges);
-    const lookup = new Map(nodes.map((node) => [node.id, node]));
-    nodes = nodes.map((node) => {
-      const at = positions.get(node.id);
-      if (!at) return node;
-      const parent = node.parentId ? lookup.get(node.parentId) : undefined;
-      const origin = parent ? getAbsolutePosition(parent, lookup) : { x: 0, y: 0 };
-      const moved = { ...node, position: { x: at.x - origin.x, y: at.y - origin.y } };
-      placed.set(node.id, placeOf(moved));
-      return moved;
-    });
-  }
-
-  // Containers grow to fit what's in them (the innermost first), moving nothing on the level
-  const byId = new Map(nodes.map((node) => [node.id, node]));
-  const depth = (node: Node): number => {
-    const parent = node.parentId ? byId.get(node.parentId) : undefined;
-    return parent ? 1 + depth(parent) : 0;
-  };
-  const containers = nodes.filter((node) => isGroupType(node.type)).sort((a, b) => depth(b) - depth(a));
-  for (const { id } of containers) {
-    const fit = fitGroup(id, nodes);
-    const current = nodes.find((node) => node.id === id)!;
-    const { x: dx, y: dy } = fit?.shift ?? { x: 0, y: 0 };
-    if (!fit || (!dx && !dy && fit.width === current.width && fit.height === current.height)) continue;
-    nodes = nodes.map((node) => {
-      if (node.parentId === id && (dx || dy)) {
-        const shifted = { ...node, position: { x: node.position.x + dx, y: node.position.y + dy } };
-        placed.set(node.id, placeOf(shifted));
-        return shifted;
-      }
-      if (node.id !== id) return node;
-      const grown = {
-        ...node,
-        position: { x: node.position.x - dx, y: node.position.y - dy },
-        width: fit.width,
-        height: fit.height,
-      };
-      placed.set(id, placeOf(grown));
-      return grown;
-    });
-  }
-
-  return {
-    graph: {
-      edges: graph.edges,
-      // Containers drawn at their size with style, like levels laid out from scratch
-      nodes: nodes.map(({ width, height, ...node }) =>
-        isGroupType(node.type) && width && height ? { ...node, style: { ...node.style, width, height } } : node
-      ),
-    },
-    placed,
-  };
-};
-
-/**
- * A level's edges drawn along the routes the diagram the canvas was opened from had for the same connections (between
- * the same two nodes), once the level's worked out from the canvas: routes follow their nodes when they move, so
- * connections the diagram had stay drawn around what's in their way
- */
-export const withDiagramRoutes = (edges: Edge[], diagramEdges: Edge[] = []) => {
-  const routes = new Map(
-    diagramEdges.flatMap((edge) => (edge.data?.route ? [[`${edge.source}>${edge.target}`, edge.data.route] as const] : []))
-  );
-  if (routes.size === 0) return edges;
-  return edges.map((edge) => {
-    const route = routes.get(`${edge.source}>${edge.target}`);
-    return route && !edge.data?.route ? { ...edge, data: { ...edge.data, route } } : edge;
-  });
-};