@terraware/web-components 5.0.12 → 5.0.13

package/components/TimelineSliderV2/layout.d.ts

@@ -0,0 +1,16 @@
+import type { BuildLayoutParams, ColorWeight, LayoutMark, PositionedMark, TimelineCluster, TimelineLayout } from './types';
+export declare const DOT_SIZE_PX = 12;
+export declare const CLUSTER_DOT_SIZE_PX = 18;
+export declare const EXPANDED_SPACING_PX = 20;
+export declare const MIN_SQUEEZE_PITCH_PX = 12;
+export declare const BAND_PADDING_PX = 8;
+export declare const SQUEEZE_GAP_PX = 12;
+export declare const MAX_BAND_RATIO = 0.8;
+export declare const DEFAULT_CLUSTER_THRESHOLD_PX = 16;
+export declare const DIMMED_OPACITY = 0.35;
+export declare const normalizePositions: (marks: LayoutMark[], containerWidth: number) => PositionedMark[];
+export declare const toColorWeights: (colors: string[]) => ColorWeight[];
+export declare const buildClusters: (marks: LayoutMark[], containerWidth: number, thresholdPx: number) => TimelineCluster[];
+export declare const toConicGradient: (colorWeights: ColorWeight[]) => string;
+export declare const buildLayout: ({ containerWidth, expandedClusterId, marks, thresholdPx, }: BuildLayoutParams) => TimelineLayout;
+//# sourceMappingURL=layout.d.ts.map

package/components/TimelineSliderV2/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSliderV2/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,cAAc,EACd,eAAe,EACf,cAAc,EAEf,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,oBAAoB,KAAc,CAAC;AAChD,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAC/C,eAAO,MAAM,cAAc,OAAO,CAAC;AAEnC,eAAO,MAAM,kBAAkB,GAAI,OAAO,UAAU,EAAE,EAAE,gBAAgB,MAAM,KAAG,cAAc,EAkB9F,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,KAAG,WAAW,EAQ5D,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,UAAU,EAAE,EAAE,gBAAgB,MAAM,EAAE,aAAa,MAAM,KAAG,eAAe,EAkC/G,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,cAAc,WAAW,EAAE,KAAG,MAiB7D,CAAC;AAkCF,eAAO,MAAM,WAAW,GAAI,4DAKzB,iBAAiB,KAAG,cAyDtB,CAAC"}

package/components/TimelineSliderV2/layout.js

@@ -0,0 +1,168 @@
+const DOT_SIZE_PX = 12;
+const CLUSTER_DOT_SIZE_PX = 18;
+const EXPANDED_SPACING_PX = 20;
+const MIN_SQUEEZE_PITCH_PX = DOT_SIZE_PX;
+const BAND_PADDING_PX = 8;
+const SQUEEZE_GAP_PX = 12;
+const MAX_BAND_RATIO = 0.8;
+const DEFAULT_CLUSTER_THRESHOLD_PX = 16;
+const DIMMED_OPACITY = 0.35;
+const normalizePositions = (marks, containerWidth) => {
+  if (marks.length === 0) {
+    return [];
+  }
+  const values = marks.map(mark => mark.value);
+  const minValue = Math.min(...values);
+  const maxValue = Math.max(...values);
+  const range = maxValue - minValue;
+
+  // Mirrors TimelineSlider's behavior: when every mark shares one value, they all land at the right edge.
+  return marks.map(mark => ({
+    color: mark.color,
+    id: mark.id,
+    positionPx: (range === 0 ? 1 : (mark.value - minValue) / range) * containerWidth
+  })).sort((a, b) => a.positionPx - b.positionPx);
+};
+const toColorWeights = colors => {
+  const weights = new Map();
+  colors.forEach(color => {
+    weights.set(color, (weights.get(color) ?? 0) + 1);
+  });
+  return [...weights.entries()].map(([color, weight]) => ({
+    color,
+    weight
+  }));
+};
+const buildClusters = (marks, containerWidth, thresholdPx) => {
+  const positioned = normalizePositions(marks, containerWidth);
+  const clusters = [];
+  let current = [];
+  const flush = () => {
+    if (current.length === 0) {
+      return;
+    }
+    const total = current.reduce((sum, member) => sum + member.positionPx, 0);
+    clusters.push({
+      anchorPx: total / current.length,
+      id: `cluster-${current[0].id}`,
+      members: current
+    });
+    current = [];
+  };
+  positioned.forEach(mark => {
+    const previous = current[current.length - 1];
+    if (previous !== undefined && mark.positionPx - previous.positionPx >= thresholdPx) {
+      flush();
+    }
+    current.push(mark);
+  });
+  flush();
+  return clusters;
+};
+const toConicGradient = colorWeights => {
+  if (colorWeights.length <= 1) {
+    return colorWeights[0]?.color ?? 'transparent';
+  }
+  const total = colorWeights.reduce((sum, {
+    weight
+  }) => sum + weight, 0);
+  let consumed = 0;
+  const stops = colorWeights.map(({
+    color,
+    weight
+  }) => {
+    const startDeg = consumed / total * 360;
+    consumed += weight;
+    const endDeg = consumed / total * 360;
+    return `${color} ${startDeg}deg ${endDeg}deg`;
+  });
+  return `conic-gradient(${stops.join(', ')})`;
+};
+const toCollapsedNode = (cluster, dimmed) => ({
+  colorWeights: toColorWeights(cluster.members.map(member => member.color)),
+  dimmed,
+  id: cluster.id,
+  leftPx: cluster.anchorPx,
+  markIds: cluster.members.map(member => member.id),
+  sizePx: cluster.members.length > 1 ? CLUSTER_DOT_SIZE_PX : DOT_SIZE_PX
+});
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const expandedSpacing = (memberCount, containerWidth, maxBandWidth) => {
+  if (memberCount <= 1) {
+    return EXPANDED_SPACING_PX;
+  }
+  const cap = Math.min(containerWidth * MAX_BAND_RATIO, maxBandWidth);
+  const fitted = (cap - DOT_SIZE_PX - 2 * BAND_PADDING_PX) / (memberCount - 1);
+  return Math.max(0, Math.min(EXPANDED_SPACING_PX, fitted));
+};
+const rescale = (value, fromStart, fromEnd, toStart, toEnd) => {
+  const fromSpan = fromEnd - fromStart;
+  if (fromSpan <= 0) {
+    return toStart;
+  }
+  return toStart + (value - fromStart) / fromSpan * (toEnd - toStart);
+};
+const buildLayout = ({
+  containerWidth,
+  expandedClusterId,
+  marks,
+  thresholdPx = DEFAULT_CLUSTER_THRESHOLD_PX
+}) => {
+  if (containerWidth <= 0 || marks.length === 0) {
+    return {
+      nodes: []
+    };
+  }
+  const clusters = buildClusters(marks, containerWidth, thresholdPx);
+  const expanded = clusters.find(cluster => cluster.id === expandedClusterId && cluster.members.length > 1);
+  if (expanded === undefined) {
+    return {
+      nodes: clusters.map(cluster => toCollapsedNode(cluster, false))
+    };
+  }
+  const sideClusters = clusters.filter(cluster => cluster.id !== expanded.id);
+  const leftCount = sideClusters.filter(cluster => cluster.anchorPx < expanded.anchorPx).length;
+  const rightCount = sideClusters.length - leftCount;
+  const reserve = count => count === 0 ? 0 : SQUEEZE_GAP_PX + (count - 1) * MIN_SQUEEZE_PITCH_PX;
+  const leftReserve = reserve(leftCount);
+  const rightReserve = reserve(rightCount);
+  const minBandWidth = DOT_SIZE_PX + 2 * BAND_PADDING_PX;
+  const maxBandWidth = Math.max(minBandWidth, containerWidth - leftReserve - rightReserve);
+  const spacing = expandedSpacing(expanded.members.length, containerWidth, maxBandWidth);
+  const widthPx = Math.min(maxBandWidth, (expanded.members.length - 1) * spacing + minBandWidth);
+  const leftPx = clamp(expanded.anchorPx - widthPx / 2, leftReserve, Math.max(leftReserve, containerWidth - widthPx - rightReserve));
+  const band = {
+    leftPx,
+    memberCount: expanded.members.length,
+    widthPx
+  };
+  const leftLimit = Math.max(0, leftPx - SQUEEZE_GAP_PX);
+  const rightLimit = Math.min(containerWidth, leftPx + widthPx + SQUEEZE_GAP_PX);
+  const nodes = clusters.flatMap(cluster => {
+    if (cluster.id === expanded.id) {
+      return cluster.members.map((member, index) => ({
+        colorWeights: [{
+          color: member.color,
+          weight: 1
+        }],
+        dimmed: false,
+        id: member.id,
+        leftPx: leftPx + BAND_PADDING_PX + DOT_SIZE_PX / 2 + index * spacing,
+        markIds: [member.id],
+        sizePx: DOT_SIZE_PX
+      }));
+    }
+    const collapsed = toCollapsedNode(cluster, true);
+    const squeezed = cluster.anchorPx < expanded.anchorPx ? rescale(cluster.anchorPx, 0, expanded.anchorPx, 0, leftLimit) : rescale(cluster.anchorPx, expanded.anchorPx, containerWidth, rightLimit, containerWidth);
+    return [{
+      ...collapsed,
+      leftPx: squeezed
+    }];
+  });
+  return {
+    band,
+    nodes
+  };
+};
+
+export { BAND_PADDING_PX, CLUSTER_DOT_SIZE_PX, DEFAULT_CLUSTER_THRESHOLD_PX, DIMMED_OPACITY, DOT_SIZE_PX, EXPANDED_SPACING_PX, MAX_BAND_RATIO, MIN_SQUEEZE_PITCH_PX, SQUEEZE_GAP_PX, buildClusters, buildLayout, normalizePositions, toColorWeights, toConicGradient };

package/components/TimelineSliderV2/types.d.ts

@@ -0,0 +1,43 @@
+export type LayoutMark = {
+    color: string;
+    id: string;
+    value: number;
+};
+export type ColorWeight = {
+    color: string;
+    weight: number;
+};
+export type PositionedMark = {
+    color: string;
+    id: string;
+    positionPx: number;
+};
+export type TimelineCluster = {
+    anchorPx: number;
+    id: string;
+    members: PositionedMark[];
+};
+export type TimelineNode = {
+    colorWeights: ColorWeight[];
+    dimmed: boolean;
+    id: string;
+    leftPx: number;
+    markIds: string[];
+    sizePx: number;
+};
+export type ExpandedBand = {
+    leftPx: number;
+    memberCount: number;
+    widthPx: number;
+};
+export type TimelineLayout = {
+    band?: ExpandedBand;
+    nodes: TimelineNode[];
+};
+export type BuildLayoutParams = {
+    containerWidth: number;
+    expandedClusterId?: string;
+    marks: LayoutMark[];
+    thresholdPx?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/components/TimelineSliderV2/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSliderV2/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/components/TimelineSliderV2/types.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "5.0.12",
+  "version": "5.0.13",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {