@dcrackel/hematournamentui 1.0.711 → 1.0.713

package/src/stories/Organisms/Containers/Tableau/layout/TableauLayoutEngine.js

@@ -1,145 +1,145 @@
-const toNodeKey = value => String(value);
-
-const snapToPixel = value => Math.round(value) + 0.5;
-
-const getPointRelativeToRoot = (rootElement, element) => {
-  const rootBounds = rootElement.getBoundingClientRect();
-  const elementBounds = element.getBoundingClientRect();
-
-  return {
-    x: snapToPixel(elementBounds.left - rootBounds.left + elementBounds.width / 2),
-    y: snapToPixel(elementBounds.top - rootBounds.top + elementBounds.height / 2)
-  };
-};
-
-export const createDomAnchorLayout = ({ rootElement, getInputAnchor, getOutputAnchor }) => ({
-  size: {
-    width: Math.ceil(rootElement.scrollWidth),
-    height: Math.ceil(rootElement.scrollHeight)
-  },
-  getInputPoint: nodeId => {
-    const element = getInputAnchor(toNodeKey(nodeId));
-    return element ? getPointRelativeToRoot(rootElement, element) : null;
-  },
-  getOutputPoint: nodeId => {
-    const element = getOutputAnchor(toNodeKey(nodeId));
-    return element ? getPointRelativeToRoot(rootElement, element) : null;
-  }
-});
-
-const groupChildrenByParent = bouts => {
-  const childrenByParent = new Map();
-
-  bouts.forEach(bout => {
-    if (!bout?.DEBoutId || !bout?.DENextBoutId) return;
-    const parentId = toNodeKey(bout.DENextBoutId);
-    const childIds = childrenByParent.get(parentId) || [];
-    childrenByParent.set(parentId, [...childIds, toNodeKey(bout.DEBoutId)]);
-  });
-
-  return childrenByParent;
-};
-
-const clamp = (value, minimum, maximum) => Math.max(minimum, Math.min(maximum, value));
-
-const getTrunkX = (childPoints, parentPoint) => {
-  const averageChildX = childPoints.reduce((total, point) => total + point.x, 0) / childPoints.length;
-  const childrenAreRightOfParent = averageChildX > parentPoint.x;
-  const minimumChildX = Math.min(...childPoints.map(point => point.x));
-  const maximumChildX = Math.max(...childPoints.map(point => point.x));
-
-  if (childrenAreRightOfParent) {
-    return clamp(parentPoint.x + 120, parentPoint.x + 6, minimumChildX - 16);
-  }
-
-  return clamp(parentPoint.x - 120, maximumChildX + 16, parentPoint.x - 6);
-};
-
-const createSingleChildPath = ({ childId, childPoint, parentId, parentPoint }) => {
-  const trunkX = getTrunkX([childPoint], parentPoint);
-  return {
-    key: `${childId}->${parentId}`,
-    path: `M ${childPoint.x} ${childPoint.y} L ${trunkX} ${childPoint.y} L ${trunkX} ${parentPoint.y} L ${parentPoint.x} ${parentPoint.y}`,
-    segmentRole: 'single',
-    sourceBoutId: childId,
-    sourceBoutIds: [childId],
-    targetBoutId: parentId
-  };
-};
-
-const createPairedChildPaths = ({ childIds, childPoints, parentId, parentPoint }) => {
-  const trunkX = getTrunkX(childPoints, parentPoint);
-  const [firstPoint, secondPoint] = childPoints;
-  const top = firstPoint.y <= secondPoint.y ? firstPoint : secondPoint;
-  const bottom = firstPoint.y <= secondPoint.y ? secondPoint : firstPoint;
-  const middleY = (top.y + bottom.y) / 2;
-
-  return [
-    {
-      key: `${childIds[0]}->join(${parentId})`,
-      path: `M ${firstPoint.x} ${firstPoint.y} L ${trunkX} ${firstPoint.y}`,
-      segmentRole: 'child',
-      sourceBoutId: childIds[0],
-      sourceBoutIds: [childIds[0]],
-      targetBoutId: parentId
-    },
-    {
-      key: `${childIds[1]}->join(${parentId})`,
-      path: `M ${secondPoint.x} ${secondPoint.y} L ${trunkX} ${secondPoint.y}`,
-      segmentRole: 'child',
-      sourceBoutId: childIds[1],
-      sourceBoutIds: [childIds[1]],
-      targetBoutId: parentId
-    },
-    {
-      key: `trunk(${parentId})`,
-      path: `M ${trunkX} ${top.y} L ${trunkX} ${bottom.y}`,
-      segmentRole: 'merge',
-      sourceBoutIds: [...childIds],
-      targetBoutId: parentId
-    },
-    {
-      key: `join(${parentId})->parent`,
-      path: `M ${trunkX} ${middleY} L ${parentPoint.x} ${middleY} L ${parentPoint.x} ${parentPoint.y}`,
-      segmentRole: 'parent',
-      sourceBoutIds: [...childIds],
-      targetBoutId: parentId
-    }
-  ];
-};
-
-export const buildBracketPaths = ({ bouts, getInputPoint, getOutputPoint }) => {
-  const paths = [];
-
-  groupChildrenByParent(bouts).forEach((childIds, parentId) => {
-    const parentPoint = getInputPoint(parentId);
-    const children = childIds
-      .map(childId => ({ id: childId, point: getOutputPoint(childId) }))
-      .filter(child => child.point);
-    if (!parentPoint || children.length === 0) return;
-
-    if (children.length === 1) {
-      paths.push(
-        createSingleChildPath({
-          childId: children[0].id,
-          childPoint: children[0].point,
-          parentId,
-          parentPoint
-        })
-      );
-      return;
-    }
-
-    const pairedChildren = children.slice(0, 2);
-    paths.push(
-      ...createPairedChildPaths({
-        childIds: pairedChildren.map(child => child.id),
-        childPoints: pairedChildren.map(child => child.point),
-        parentId,
-        parentPoint
-      })
-    );
-  });
-
-  return paths;
-};
+const toNodeKey = value => String(value);
+
+const snapToPixel = value => Math.round(value) + 0.5;
+
+const getPointRelativeToRoot = (rootElement, element) => {
+  const rootBounds = rootElement.getBoundingClientRect();
+  const elementBounds = element.getBoundingClientRect();
+
+  return {
+    x: snapToPixel(elementBounds.left - rootBounds.left + elementBounds.width / 2),
+    y: snapToPixel(elementBounds.top - rootBounds.top + elementBounds.height / 2)
+  };
+};
+
+export const createDomAnchorLayout = ({ rootElement, getInputAnchor, getOutputAnchor }) => ({
+  size: {
+    width: Math.ceil(rootElement.scrollWidth),
+    height: Math.ceil(rootElement.scrollHeight)
+  },
+  getInputPoint: nodeId => {
+    const element = getInputAnchor(toNodeKey(nodeId));
+    return element ? getPointRelativeToRoot(rootElement, element) : null;
+  },
+  getOutputPoint: nodeId => {
+    const element = getOutputAnchor(toNodeKey(nodeId));
+    return element ? getPointRelativeToRoot(rootElement, element) : null;
+  }
+});
+
+const groupChildrenByParent = bouts => {
+  const childrenByParent = new Map();
+
+  bouts.forEach(bout => {
+    if (!bout?.DEBoutId || !bout?.DENextBoutId) return;
+    const parentId = toNodeKey(bout.DENextBoutId);
+    const childIds = childrenByParent.get(parentId) || [];
+    childrenByParent.set(parentId, [...childIds, toNodeKey(bout.DEBoutId)]);
+  });
+
+  return childrenByParent;
+};
+
+const clamp = (value, minimum, maximum) => Math.max(minimum, Math.min(maximum, value));
+
+const getTrunkX = (childPoints, parentPoint) => {
+  const averageChildX = childPoints.reduce((total, point) => total + point.x, 0) / childPoints.length;
+  const childrenAreRightOfParent = averageChildX > parentPoint.x;
+  const minimumChildX = Math.min(...childPoints.map(point => point.x));
+  const maximumChildX = Math.max(...childPoints.map(point => point.x));
+
+  if (childrenAreRightOfParent) {
+    return clamp(parentPoint.x + 120, parentPoint.x + 6, minimumChildX - 16);
+  }
+
+  return clamp(parentPoint.x - 120, maximumChildX + 16, parentPoint.x - 6);
+};
+
+const createSingleChildPath = ({ childId, childPoint, parentId, parentPoint }) => {
+  const trunkX = getTrunkX([childPoint], parentPoint);
+  return {
+    key: `${childId}->${parentId}`,
+    path: `M ${childPoint.x} ${childPoint.y} L ${trunkX} ${childPoint.y} L ${trunkX} ${parentPoint.y} L ${parentPoint.x} ${parentPoint.y}`,
+    segmentRole: 'single',
+    sourceBoutId: childId,
+    sourceBoutIds: [childId],
+    targetBoutId: parentId
+  };
+};
+
+const createPairedChildPaths = ({ childIds, childPoints, parentId, parentPoint }) => {
+  const trunkX = getTrunkX(childPoints, parentPoint);
+  const [firstPoint, secondPoint] = childPoints;
+  const top = firstPoint.y <= secondPoint.y ? firstPoint : secondPoint;
+  const bottom = firstPoint.y <= secondPoint.y ? secondPoint : firstPoint;
+  const middleY = (top.y + bottom.y) / 2;
+
+  return [
+    {
+      key: `${childIds[0]}->join(${parentId})`,
+      path: `M ${firstPoint.x} ${firstPoint.y} L ${trunkX} ${firstPoint.y}`,
+      segmentRole: 'child',
+      sourceBoutId: childIds[0],
+      sourceBoutIds: [childIds[0]],
+      targetBoutId: parentId
+    },
+    {
+      key: `${childIds[1]}->join(${parentId})`,
+      path: `M ${secondPoint.x} ${secondPoint.y} L ${trunkX} ${secondPoint.y}`,
+      segmentRole: 'child',
+      sourceBoutId: childIds[1],
+      sourceBoutIds: [childIds[1]],
+      targetBoutId: parentId
+    },
+    {
+      key: `trunk(${parentId})`,
+      path: `M ${trunkX} ${top.y} L ${trunkX} ${bottom.y}`,
+      segmentRole: 'merge',
+      sourceBoutIds: [...childIds],
+      targetBoutId: parentId
+    },
+    {
+      key: `join(${parentId})->parent`,
+      path: `M ${trunkX} ${middleY} L ${parentPoint.x} ${middleY} L ${parentPoint.x} ${parentPoint.y}`,
+      segmentRole: 'parent',
+      sourceBoutIds: [...childIds],
+      targetBoutId: parentId
+    }
+  ];
+};
+
+export const buildBracketPaths = ({ bouts, getInputPoint, getOutputPoint }) => {
+  const paths = [];
+
+  groupChildrenByParent(bouts).forEach((childIds, parentId) => {
+    const parentPoint = getInputPoint(parentId);
+    const children = childIds
+      .map(childId => ({ id: childId, point: getOutputPoint(childId) }))
+      .filter(child => child.point);
+    if (!parentPoint || children.length === 0) return;
+
+    if (children.length === 1) {
+      paths.push(
+        createSingleChildPath({
+          childId: children[0].id,
+          childPoint: children[0].point,
+          parentId,
+          parentPoint
+        })
+      );
+      return;
+    }
+
+    const pairedChildren = children.slice(0, 2);
+    paths.push(
+      ...createPairedChildPaths({
+        childIds: pairedChildren.map(child => child.id),
+        childPoints: pairedChildren.map(child => child.point),
+        parentId,
+        parentPoint
+      })
+    );
+  });
+
+  return paths;
+};

package/src/stories/Organisms/Containers/Tableau/layout/TableauLayoutEngine.test.js

@@ -1,64 +1,64 @@
-import { describe, expect, it } from 'vitest';
-import { buildBracketPaths, createDomAnchorLayout } from './TableauLayoutEngine';
-
-const createElement = ({ left, top, width = 0, height = 0 }) => ({
-  getBoundingClientRect: () => ({ left, top, width, height })
-});
-
-describe('createDomAnchorLayout', () => {
-  it('measures anchors relative to the tableau root', () => {
-    const rootElement = {
-      ...createElement({ left: 10, top: 20 }),
-      scrollWidth: 400,
-      scrollHeight: 300
-    };
-    const inputAnchor = createElement({ left: 110, top: 70 });
-    const layout = createDomAnchorLayout({
-      rootElement,
-      getInputAnchor: () => inputAnchor,
-      getOutputAnchor: () => null
-    });
-
-    expect(layout.size).toEqual({ width: 400, height: 300 });
-    expect(layout.getInputPoint('3')).toEqual({ x: 100.5, y: 50.5 });
-    expect(layout.getOutputPoint('3')).toBeNull();
-  });
-});
-
-describe('buildBracketPaths', () => {
-  const bouts = [
-    { DEBoutId: 1, DENextBoutId: 3 },
-    { DEBoutId: 2, DENextBoutId: 3 },
-    { DEBoutId: 3, DENextBoutId: null }
-  ];
-
-  it('joins two child bouts to their next bout', () => {
-    const outputPoints = {
-      1: { x: 160, y: 30 },
-      2: { x: 160, y: 100 }
-    };
-    const paths = buildBracketPaths({
-      bouts,
-      getInputPoint: id => (id === '3' ? { x: 200, y: 65 } : null),
-      getOutputPoint: id => outputPoints[id] || null
-    });
-
-    expect(paths).toHaveLength(4);
-    expect(paths.map(path => path.key)).toEqual(['1->join(3)', '2->join(3)', 'trunk(3)', 'join(3)->parent']);
-    expect(paths.map(path => path.segmentRole)).toEqual(['child', 'child', 'merge', 'parent']);
-    expect(paths[0]).toMatchObject({ sourceBoutId: '1', sourceBoutIds: ['1'], targetBoutId: '3' });
-    expect(paths[2]).toMatchObject({ sourceBoutIds: ['1', '2'], targetBoutId: '3' });
-  });
-
-  it('keeps the correct child id when only one anchor is mounted', () => {
-    const paths = buildBracketPaths({
-      bouts,
-      getInputPoint: id => (id === '3' ? { x: 200, y: 65 } : null),
-      getOutputPoint: id => (id === '2' ? { x: 160, y: 100 } : null)
-    });
-
-    expect(paths).toHaveLength(1);
-    expect(paths[0].key).toBe('2->3');
-    expect(paths[0]).toMatchObject({ segmentRole: 'single', sourceBoutId: '2', targetBoutId: '3' });
-  });
-});
+import { describe, expect, it } from 'vitest';
+import { buildBracketPaths, createDomAnchorLayout } from './TableauLayoutEngine';
+
+const createElement = ({ left, top, width = 0, height = 0 }) => ({
+  getBoundingClientRect: () => ({ left, top, width, height })
+});
+
+describe('createDomAnchorLayout', () => {
+  it('measures anchors relative to the tableau root', () => {
+    const rootElement = {
+      ...createElement({ left: 10, top: 20 }),
+      scrollWidth: 400,
+      scrollHeight: 300
+    };
+    const inputAnchor = createElement({ left: 110, top: 70 });
+    const layout = createDomAnchorLayout({
+      rootElement,
+      getInputAnchor: () => inputAnchor,
+      getOutputAnchor: () => null
+    });
+
+    expect(layout.size).toEqual({ width: 400, height: 300 });
+    expect(layout.getInputPoint('3')).toEqual({ x: 100.5, y: 50.5 });
+    expect(layout.getOutputPoint('3')).toBeNull();
+  });
+});
+
+describe('buildBracketPaths', () => {
+  const bouts = [
+    { DEBoutId: 1, DENextBoutId: 3 },
+    { DEBoutId: 2, DENextBoutId: 3 },
+    { DEBoutId: 3, DENextBoutId: null }
+  ];
+
+  it('joins two child bouts to their next bout', () => {
+    const outputPoints = {
+      1: { x: 160, y: 30 },
+      2: { x: 160, y: 100 }
+    };
+    const paths = buildBracketPaths({
+      bouts,
+      getInputPoint: id => (id === '3' ? { x: 200, y: 65 } : null),
+      getOutputPoint: id => outputPoints[id] || null
+    });
+
+    expect(paths).toHaveLength(4);
+    expect(paths.map(path => path.key)).toEqual(['1->join(3)', '2->join(3)', 'trunk(3)', 'join(3)->parent']);
+    expect(paths.map(path => path.segmentRole)).toEqual(['child', 'child', 'merge', 'parent']);
+    expect(paths[0]).toMatchObject({ sourceBoutId: '1', sourceBoutIds: ['1'], targetBoutId: '3' });
+    expect(paths[2]).toMatchObject({ sourceBoutIds: ['1', '2'], targetBoutId: '3' });
+  });
+
+  it('keeps the correct child id when only one anchor is mounted', () => {
+    const paths = buildBracketPaths({
+      bouts,
+      getInputPoint: id => (id === '3' ? { x: 200, y: 65 } : null),
+      getOutputPoint: id => (id === '2' ? { x: 160, y: 100 } : null)
+    });
+
+    expect(paths).toHaveLength(1);
+    expect(paths[0].key).toBe('2->3');
+    expect(paths[0]).toMatchObject({ segmentRole: 'single', sourceBoutId: '2', targetBoutId: '3' });
+  });
+});

package/src/stories/Organisms/Containers/Tableau/plannedAssignments.js

@@ -1,57 +1,36 @@
-const toKey = value => String(value ?? '');
-
-const hasIdentity = value => value !== null && value !== undefined && String(value).length > 0;
-
-export const createStationByRing = stations =>
-  Object.fromEntries(
-    (stations || []).filter(station => hasIdentity(station?.RingId)).map(station => [toKey(station.RingId), station])
-  );
-
-export const createPlannedStationByBout = ({ assignments, stations }) => {
-  const stationByRing = createStationByRing(stations);
-
-  return Object.fromEntries(
-    (assignments || [])
-      .filter(assignment => hasIdentity(assignment?.DEBoutId))
-      .map(assignment => [toKey(assignment.DEBoutId), stationByRing[toKey(assignment.RingId)]])
-      .filter(([, station]) => station)
-  );
-};
-
-export const getPlannedStationForBout = (plannedStationByBout, bout) =>
-  plannedStationByBout[toKey(bout?.DEBoutId ?? bout?.BoutId)] || null;
-
-export const isBoutSuggestedForViewer = ({ bout, plannedStationByBout, viewerPersonId }) => {
-  if (!hasIdentity(viewerPersonId)) return false;
-  const directorId = getPlannedStationForBout(plannedStationByBout, bout)?.Director?.PersonId;
-  return hasIdentity(directorId) && toKey(directorId) === toKey(viewerPersonId);
-};
-
-const getStationColor = (plannedStationByBout, boutId) => plannedStationByBout[toKey(boutId)]?.Color || null;
-
-const getSharedSourceColor = (plannedStationByBout, sourceBoutIds) => {
-  const colors = sourceBoutIds.map(boutId => getStationColor(plannedStationByBout, boutId));
-  if (colors.some(color => !color)) return null;
-  return new Set(colors).size === 1 ? colors[0] : null;
-};
-
-const connectorStrokeRules = [
-  {
-    matches: connector => ['child', 'single'].includes(connector.segmentRole),
-    resolve: (connector, stations) => getStationColor(stations, connector.sourceBoutId)
-  },
-  {
-    matches: connector => connector.segmentRole === 'merge',
-    resolve: (connector, stations) => getSharedSourceColor(stations, connector.sourceBoutIds || [])
-  },
-  {
-    matches: connector => connector.segmentRole === 'parent',
-    resolve: (connector, stations) => getStationColor(stations, connector.targetBoutId)
-  }
-];
-
-export const addPlannedStrokesToConnectors = (connectors, plannedStationByBout) =>
-  connectors.map(connector => ({
-    ...connector,
-    stroke: connectorStrokeRules.find(rule => rule.matches(connector))?.resolve(connector, plannedStationByBout) || null
-  }));
+const toKey = value => String(value ?? '');
+
+const hasIdentity = value => value !== null && value !== undefined && String(value).length > 0;
+
+export const createStationByRing = stations =>
+  Object.fromEntries(
+    (stations || []).filter(station => hasIdentity(station?.RingId)).map(station => [toKey(station.RingId), station])
+  );
+
+export const createPlannedStationByBout = ({ assignments, stations }) => {
+  const stationByRing = createStationByRing(stations);
+
+  return Object.fromEntries(
+    (assignments || [])
+      .filter(assignment => hasIdentity(assignment?.DEBoutId))
+      .map(assignment => [toKey(assignment.DEBoutId), stationByRing[toKey(assignment.RingId)]])
+      .filter(([, station]) => station)
+  );
+};
+
+export const getPlannedStationForBout = (plannedStationByBout, bout) =>
+  plannedStationByBout[toKey(bout?.DEBoutId ?? bout?.BoutId)] || null;
+
+export const isBoutSuggestedForViewer = ({ bout, plannedStationByBout, viewerPersonId }) => {
+  if (!hasIdentity(viewerPersonId)) return false;
+  const directorId = getPlannedStationForBout(plannedStationByBout, bout)?.Director?.PersonId;
+  return hasIdentity(directorId) && toKey(directorId) === toKey(viewerPersonId);
+};
+
+const getStationColor = (plannedStationByBout, boutId) => plannedStationByBout[toKey(boutId)]?.Color || null;
+
+export const addPlannedStrokesToConnectors = (connectors, plannedStationByBout) =>
+  connectors.map(connector => ({
+    ...connector,
+    stroke: getStationColor(plannedStationByBout, connector.targetBoutId)
+  }));