@bpmn-nova/studio 0.3.0-preview

package/dist/selection-layout.js

@@ -0,0 +1,229 @@
+import {
+  NODE_DEFINITIONS,
+  autoLayout,
+  elementScopeId,
+  getNode,
+} from '@bpmn-nova/core';
+
+const LAYOUT_KINDS = new Set(['event', 'task', 'container', 'gateway']);
+const GROUPABLE_KINDS = new Set(['event', 'task', 'container', 'gateway', 'data', 'dataStore', 'annotation']);
+const RESIZABLE_KINDS = new Set(['group', 'participant', 'lane']);
+
+function nodeKind(node) {
+  return (NODE_DEFINITIONS[node?.type] || NODE_DEFINITIONS.generic).kind;
+}
+
+export function isMarqueeSelectableNode(node) {
+  return isGroupableNode(node);
+}
+
+export function isGroupableNode(node) {
+  return Boolean(node && GROUPABLE_KINDS.has(nodeKind(node)));
+}
+
+export function isResizableNode(node) {
+  return Boolean(node && RESIZABLE_KINDS.has(nodeKind(node)) && !(nodeKind(node) === 'lane' && node.containerId));
+}
+
+export function isSelectionLayoutNode(node) {
+  return Boolean(node && LAYOUT_KINDS.has(nodeKind(node)));
+}
+
+export function normalizeRect(rect = {}) {
+  const x1 = Number(rect.x) || 0;
+  const y1 = Number(rect.y) || 0;
+  const x2 = x1 + (Number(rect.width) || 0);
+  const y2 = y1 + (Number(rect.height) || 0);
+  return {
+    x: Math.min(x1, x2),
+    y: Math.min(y1, y2),
+    width: Math.abs(x2 - x1),
+    height: Math.abs(y2 - y1),
+  };
+}
+
+function intersects(node, rect) {
+  return node.x < rect.x + rect.width
+    && node.x + node.width > rect.x
+    && node.y < rect.y + rect.height
+    && node.y + node.height > rect.y;
+}
+
+export function nodesInSelectionRect(model, scopeId, rawRect) {
+  const rect = normalizeRect(rawRect);
+  return model.nodes.filter((node) => (
+    elementScopeId(model, node) === scopeId
+    && isMarqueeSelectableNode(node)
+    && intersects(node, rect)
+  ));
+}
+
+export function selectedDiagramNodes(model, selection, scopeId) {
+  const refs = selection?.kind === 'multi'
+    ? selection.items
+    : selection?.kind === 'node'
+      ? [selection]
+      : [];
+  const seen = new Set();
+  const nodes = [];
+  for (const ref of refs) {
+    if (ref.kind !== 'node' || seen.has(ref.id)) continue;
+    const node = getNode(model, ref.id);
+    if (!node || elementScopeId(model, node) !== scopeId) continue;
+    seen.add(node.id);
+    nodes.push(node);
+  }
+  return nodes;
+}
+
+export function selectedGroupableNodes(model, selection, scopeId) {
+  return selectedDiagramNodes(model, selection, scopeId).filter(isGroupableNode);
+}
+
+export function selectedLayoutNodes(model, selection, scopeId) {
+  return selectedDiagramNodes(model, selection, scopeId).filter(isSelectionLayoutNode);
+}
+
+export function selectionBounds(nodes = []) {
+  if (!nodes.length) return null;
+  const left = Math.min(...nodes.map((node) => node.x));
+  const top = Math.min(...nodes.map((node) => node.y));
+  const right = Math.max(...nodes.map((node) => node.x + node.width));
+  const bottom = Math.max(...nodes.map((node) => node.y + node.height));
+  return { x: left, y: top, width: right - left, height: bottom - top };
+}
+
+export function mergeSelectionRefs(currentNodes, hitNodes, mode = 'replace') {
+  if (mode === 'replace') return hitNodes.map((node) => ({ kind: 'node', id: node.id }));
+  const order = currentNodes.map((node) => node.id);
+  const ids = new Set(order);
+  for (const node of hitNodes) {
+    if (mode === 'toggle' && ids.has(node.id)) {
+      ids.delete(node.id);
+      order.splice(order.indexOf(node.id), 1);
+    } else if (!ids.has(node.id)) {
+      ids.add(node.id);
+      order.push(node.id);
+    }
+  }
+  return order.map((id) => ({ kind: 'node', id }));
+}
+
+function incidentEdges(model, nodeIds) {
+  return model.edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
+}
+
+function alignNodes(nodes, alignment) {
+  const bounds = selectionBounds(nodes);
+  for (const node of nodes) {
+    if (alignment === 'left') node.x = bounds.x;
+    else if (alignment === 'centerX') node.x = Math.round(bounds.x + (bounds.width - node.width) / 2);
+    else if (alignment === 'right') node.x = bounds.x + bounds.width - node.width;
+    else if (alignment === 'top') node.y = bounds.y;
+    else if (alignment === 'centerY') node.y = Math.round(bounds.y + (bounds.height - node.height) / 2);
+    else if (alignment === 'bottom') node.y = bounds.y + bounds.height - node.height;
+  }
+}
+
+function distributeNodes(nodes, axis) {
+  const horizontal = axis === 'horizontal';
+  const ordered = [...nodes].sort((a, b) => (horizontal ? a.x - b.x : a.y - b.y));
+  const first = ordered[0];
+  const last = ordered[ordered.length - 1];
+  const start = horizontal ? first.x : first.y;
+  const end = horizontal ? last.x + last.width : last.y + last.height;
+  const totalSize = ordered.reduce((sum, node) => sum + (horizontal ? node.width : node.height), 0);
+  const gap = Math.max(0, (end - start - totalSize) / Math.max(1, ordered.length - 1));
+  let cursor = start;
+  for (const node of ordered) {
+    if (horizontal) node.x = Math.round(cursor);
+    else node.y = Math.round(cursor);
+    cursor += (horizontal ? node.width : node.height) + gap;
+  }
+}
+
+function overlaps(a, b, margin = 16) {
+  return a.x < b.x + b.width + margin
+    && a.x + a.width + margin > b.x
+    && a.y < b.y + b.height + margin
+    && a.y + a.height + margin > b.y;
+}
+
+function collisionOffset(model, scopeId, selectedIds, selectedNodes) {
+  const blockers = model.nodes.filter((node) => (
+    elementScopeId(model, node) === scopeId
+    && isSelectionLayoutNode(node)
+    && !selectedIds.has(node.id)
+  ));
+  const clear = (dx, dy) => !selectedNodes.some((selected) => blockers.some((node) => overlaps(
+    { x: selected.x + dx, y: selected.y + dy, width: selected.width, height: selected.height },
+    node,
+  )));
+  if (clear(0, 0)) return { x: 0, y: 0 };
+  const step = Math.max(16, model.settings?.gridSize || 16);
+  for (let ring = 1; ring <= 80; ring += 1) {
+    const candidates = [];
+    for (let x = -ring; x <= ring; x += 1) {
+      candidates.push({ x: x * step, y: -ring * step }, { x: x * step, y: ring * step });
+    }
+    for (let y = -ring + 1; y < ring; y += 1) {
+      candidates.push({ x: -ring * step, y: y * step }, { x: ring * step, y: y * step });
+    }
+    candidates.sort((a, b) => a.x * a.x + a.y * a.y - (b.x * b.x + b.y * b.y));
+    const match = candidates.find((candidate) => clear(candidate.x, candidate.y));
+    if (match) return match;
+  }
+  return { x: 0, y: 0 };
+}
+
+function moveAttachedBoundaryEvents(model, scopeId, originalById) {
+  for (const boundary of model.nodes) {
+    const definition = NODE_DEFINITIONS[boundary.type] || NODE_DEFINITIONS.generic;
+    if (definition.kind !== 'boundary' || elementScopeId(model, boundary) !== scopeId) continue;
+    const hostId = boundary.properties?.attachedToRef;
+    const original = originalById.get(hostId);
+    const host = original && getNode(model, hostId);
+    if (!host) continue;
+    boundary.x = Math.round(boundary.x + host.x - original.x);
+    boundary.y = Math.round(boundary.y + host.y - original.y);
+  }
+}
+
+export function applySelectionArrangement(model, selection, scopeId, operation = {}) {
+  const nodes = selectedLayoutNodes(model, selection, scopeId);
+  const minimum = operation.type === 'reroute' ? 1 : 2;
+  if (nodes.length < minimum) return false;
+  if (operation.type === 'distribute' && nodes.length < 3) return false;
+  const selectedIds = new Set(nodes.map((node) => node.id));
+  const originalById = new Map(nodes.map((node) => [node.id, { x: node.x, y: node.y }]));
+
+  const alignments = new Set(['left', 'centerX', 'right', 'top', 'centerY', 'bottom']);
+  if (operation.type === 'align' && alignments.has(operation.alignment)) alignNodes(nodes, operation.alignment);
+  else if (operation.type === 'distribute' && ['horizontal', 'vertical'].includes(operation.axis)) distributeNodes(nodes, operation.axis);
+  else if (operation.type === 'layout') {
+    const previousBounds = selectionBounds(nodes);
+    const graph = {
+      id: model.id,
+      engine: model.engine,
+      settings: { ...(model.settings || {}) },
+      nodes,
+      edges: model.edges.filter((edge) => selectedIds.has(edge.source) && selectedIds.has(edge.target)),
+    };
+    autoLayout(graph, {
+      direction: model.settings?.direction || 'horizontal',
+      density: model.settings?.layoutDensity || 'balanced',
+      startX: 0,
+      startY: 0,
+    });
+    const nextBounds = selectionBounds(nodes);
+    const dx = Math.round(previousBounds.x + previousBounds.width / 2 - nextBounds.x - nextBounds.width / 2);
+    const dy = Math.round(previousBounds.y + previousBounds.height / 2 - nextBounds.y - nextBounds.height / 2);
+    for (const node of nodes) { node.x += dx; node.y += dy; }
+    const collision = collisionOffset(model, scopeId, selectedIds, nodes);
+    for (const node of nodes) { node.x += collision.x; node.y += collision.y; }
+  } else if (operation.type !== 'reroute') return false;
+
+  for (const edge of incidentEdges(model, selectedIds)) edge.waypoints = null;
+  moveAttachedBoundaryEvents(model, scopeId, originalById);
+  return true;
+}