@exellix/diagrams-toolkit 0.2.0

package/src/lib/graphViewportResizePan.js

@@ -0,0 +1,99 @@
+/** Default node card dimensions for screen-bounds estimation. */
+export const GRAPH_NODE_CARD_WIDTH = 320;
+export const GRAPH_NODE_CARD_APPROX_HEIGHT = 240;
+export const GRAPH_VIEWPORT_RESIZE_EDGE_PAD = 48;
+
+/**
+ * @param {{ nodes: object[], extraNodes?: object[] }} opts
+ */
+export function canvasNodesForViewportBounds({ nodes, extraNodes = [] }) {
+  const list = [...(extraNodes || []), ...(nodes || [])];
+  return list;
+}
+
+/**
+ * @param {object[]} list
+ * @param {{ scale: number, x: number, y: number }} transform
+ */
+export function graphContentScreenBounds(
+  list,
+  transform,
+  {
+    cardWidth = GRAPH_NODE_CARD_WIDTH,
+    cardHeight = GRAPH_NODE_CARD_APPROX_HEIGHT,
+  } = {},
+) {
+  if (!list?.length) return null;
+  const { scale, x: tx, y: ty } = transform;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const n of list) {
+    minX = Math.min(minX, n.x * scale + tx);
+    minY = Math.min(minY, n.y * scale + ty);
+    maxX = Math.max(maxX, (n.x + cardWidth) * scale + tx);
+    maxY = Math.max(maxY, (n.y + cardHeight) * scale + ty);
+  }
+  return { minX, minY, maxX, maxY };
+}
+
+/**
+ * @param {{
+ *   prevSize: { width: number, height: number },
+ *   nextSize: { width: number, height: number },
+ *   transform: { scale: number, x: number, y: number },
+ *   nodes: object[],
+ *   extraNodes?: object[],
+ *   cardWidth?: number,
+ *   cardHeight?: number,
+ * }} opts
+ * @returns {{ x: number, y: number }}
+ */
+export function computeGraphViewportResizePan({
+  prevSize,
+  nextSize,
+  transform,
+  nodes,
+  extraNodes = [],
+  cardWidth = GRAPH_NODE_CARD_WIDTH,
+  cardHeight = GRAPH_NODE_CARD_APPROX_HEIGHT,
+}) {
+  const dx = nextSize.width - prevSize.width;
+  const dy = nextSize.height - prevSize.height;
+  if (Math.abs(dx) < 1 && Math.abs(dy) < 1) return { x: 0, y: 0 };
+
+  const list = canvasNodesForViewportBounds({ nodes, extraNodes });
+  const bounds = graphContentScreenBounds(list, transform, { cardWidth, cardHeight });
+  if (!bounds) return { x: 0, y: 0 };
+
+  const pad = GRAPH_VIEWPORT_RESIZE_EDGE_PAD;
+  let panX = 0;
+  let panY = 0;
+
+  if (dx < -1) {
+    const rightLimit = nextSize.width - pad;
+    if (bounds.maxX > rightLimit) {
+      panX = Math.min(0, rightLimit - bounds.maxX);
+    }
+  } else if (dx > 1) {
+    const leftLimit = pad;
+    if (bounds.minX < leftLimit) {
+      panX = Math.max(0, leftLimit - bounds.minX);
+    }
+  }
+
+  if (dy < -1) {
+    const bottomLimit = nextSize.height - pad;
+    if (bounds.maxY > bottomLimit) {
+      panY = Math.min(0, bottomLimit - bounds.maxY);
+    }
+  } else if (dy > 1) {
+    const topLimit = pad;
+    if (bounds.minY < topLimit) {
+      panY = Math.max(0, topLimit - bounds.minY);
+    }
+  }
+
+  return { x: panX, y: panY };
+}

package/src/styles.css

@@ -0,0 +1,4 @@
+/* Optional base styles for diagrams-toolkit consumers */
+.dt-root {
+  font-family: ui-sans-serif, system-ui, sans-serif;
+}