@visactor/vchart-extension 2.1.0-alpha.2 → 2.1.0-alpha.20

package/cjs/charts/storyline/layout.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.computeStorylineLayout = exports.normalizeLayout = exports.normalizePadding = void 0;
+
+const DEFAULT_LAYOUT = "landscape", DEFAULT_PADDING = 24, normalizePadding = padding => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (Array.isArray(padding)) return {
+        top: null !== (_a = padding[0]) && void 0 !== _a ? _a : 0,
+        right: null !== (_b = padding[1]) && void 0 !== _b ? _b : 0,
+        bottom: null !== (_c = padding[2]) && void 0 !== _c ? _c : 0,
+        left: null !== (_d = padding[3]) && void 0 !== _d ? _d : 0
+    };
+    if (padding && "object" == typeof padding && "top" in padding) return {
+        top: null !== (_e = padding.top) && void 0 !== _e ? _e : 0,
+        right: null !== (_f = padding.right) && void 0 !== _f ? _f : 0,
+        bottom: null !== (_g = padding.bottom) && void 0 !== _g ? _g : 0,
+        left: null !== (_h = padding.left) && void 0 !== _h ? _h : 0
+    };
+    const value = null !== (_j = padding) && void 0 !== _j ? _j : 24;
+    return {
+        top: value,
+        right: value,
+        bottom: value,
+        left: value
+    };
+};
+
+exports.normalizePadding = normalizePadding;
+
+const normalizeLayout = layout => layout ? "string" == typeof layout ? {
+    type: layout
+} : layout : {
+    type: "landscape"
+};
+
+exports.normalizeLayout = normalizeLayout;
+
+const computeStorylineLayout = (data, options) => {
+    var _a, _b, _c;
+    const layout = (0, exports.normalizeLayout)(options.layout), padding = (0, exports.normalizePadding)(null !== (_a = layout.padding) && void 0 !== _a ? _a : options.padding), gap = null !== (_b = options.gap) && void 0 !== _b ? _b : 40, lineDistance = null !== (_c = options.lineDistance) && void 0 !== _c ? _c : 8, blocks = computeBlockPositions(data, layout, options.viewBox, options.block, padding, gap), circleGuide = "clock" === layout.type ? computeClockCircleGuide(options.viewBox, options.block, padding, layout) : void 0;
+    return {
+        blocks: blocks,
+        links: computeLinks(blocks, lineDistance),
+        circleGuide: circleGuide
+    };
+};
+
+exports.computeStorylineLayout = computeStorylineLayout;
+
+const computeBlockPositions = (data, layout, viewBox, block, padding, gap) => {
+    const count = data.length;
+    if (!count) return [];
+    const inner = {
+        x: padding.left,
+        y: padding.top,
+        width: Math.max(viewBox.width - padding.left - padding.right, block.width),
+        height: Math.max(viewBox.height - padding.top - padding.bottom, block.height)
+    }, center = {
+        x: inner.x + inner.width / 2,
+        y: inner.y + inner.height / 2
+    };
+    let centers;
+    switch (layout.type) {
+      case "portrait":
+        centers = lineCenters(count, center.x, inner.y + block.height / 2, center.x, inner.y + inner.height - block.height / 2);
+        break;
+
+      case "ladder":
+        {
+            const isDown = "down" === layout.direction, x0 = inner.x + block.width / 2, x1 = inner.x + inner.width - block.width / 2, yTop = inner.y + block.height / 2, yBot = inner.y + inner.height - block.height / 2, y0 = isDown ? yTop : yBot, y1 = isDown ? yBot : yTop, anchors = lineCenters(count, x0, y0, x1, y1), dx = x1 - x0, dy = y1 - y0, len = Math.hypot(dx, dy) || 1, nx = -dy / len, ny = dx / len, offset = 1.2 * Math.max(80, Math.min(240, Math.round(.42 * inner.height)));
+            centers = anchors.map(((p, i) => {
+                const sign = i % 2 == 0 ? 1 : -1;
+                return {
+                    x: p.x + nx * offset * sign,
+                    y: p.y + ny * offset * sign
+                };
+            }));
+            break;
+        }
+
+      case "spiral":
+        centers = alternatingVerticalCenters(count, inner, block, gap);
+        break;
+
+      case "clock":
+        centers = circularCenters(count, viewBox, block, padding, layout);
+        break;
+
+      case "arc":
+        {
+            const isDown = "down" === layout.direction, [s, e] = isDown ? [ 20, 160 ] : [ 200, 340 ];
+            centers = arcCenters(count, inner, block, layout, s, e);
+            break;
+        }
+
+      case "wing":
+        {
+            const direction = "right" === layout.direction ? "right" : "left", [s, e] = "right" === direction ? [ 110, 250 ] : [ -70, 70 ];
+            centers = arcCenters(count, inner, block, layout, s, e);
+            break;
+        }
+
+      default:
+        centers = lineCenters(count, inner.x + block.width / 2, center.y, inner.x + inner.width - block.width / 2, center.y);
+    }
+    return centers.map(((point, index) => {
+        var _a, _b;
+        return {
+            id: null !== (_b = null === (_a = data[index]) || void 0 === _a ? void 0 : _a.id) && void 0 !== _b ? _b : index,
+            index: index,
+            datum: data[index],
+            width: block.width,
+            height: block.height,
+            x: point.x - block.width / 2,
+            y: point.y - block.height / 2,
+            center: point
+        };
+    }));
+}, lineCenters = (count, x0, y0, x1, y1) => 1 === count ? [ {
+    x: (x0 + x1) / 2,
+    y: (y0 + y1) / 2
+} ] : Array.from({
+    length: count
+}, ((_, index) => {
+    const t = index / (count - 1);
+    return {
+        x: x0 + (x1 - x0) * t,
+        y: y0 + (y1 - y0) * t
+    };
+})), alternatingVerticalCenters = (count, inner, block, gap) => {
+    const baseX = inner.x + inner.width / 2, offset = Math.min(Math.max(.65 * block.width + gap / 2, 0), Math.max((inner.width - block.width) / 2, 0));
+    return lineCenters(count, baseX, inner.y + block.height / 2, baseX, inner.y + inner.height - block.height / 2).map(((point, index) => ({
+        x: point.x + (index % 2 == 0 ? -offset : offset),
+        y: point.y
+    })));
+}, circularCenters = (count, viewBox, block, padding, layout) => {
+    var _a;
+    const guide = computeClockCircleGuide(viewBox, block, padding, layout), startAngle = null !== (_a = layout.startAngle) && void 0 !== _a ? _a : -90;
+    if (1 === count) {
+        const angle = degreeToRadian(startAngle);
+        return [ {
+            x: guide.center.x + Math.cos(angle) * guide.radius,
+            y: guide.center.y + Math.sin(angle) * guide.radius
+        } ];
+    }
+    return Array.from({
+        length: count
+    }, ((_, index) => {
+        const angle = degreeToRadian(startAngle + 360 * index / count);
+        return {
+            x: guide.center.x + Math.cos(angle) * guide.radius,
+            y: guide.center.y + Math.sin(angle) * guide.radius
+        };
+    }));
+}, computeClockCircleGuide = (viewBox, block, padding, layout) => {
+    var _a;
+    const innerWidth = Math.max(viewBox.width - padding.left - padding.right, 1), innerHeight = Math.max(viewBox.height - padding.top - padding.bottom, 1), center = {
+        x: padding.left + innerWidth / 2,
+        y: padding.top + innerHeight / 2
+    }, ratio = null !== (_a = layout.radiusRatio) && void 0 !== _a ? _a : .7, maxRadius = Math.max(Math.min(innerWidth - block.width, innerHeight - block.height) / 2, 1);
+    return {
+        center: center,
+        radius: Math.max(1, maxRadius * ratio)
+    };
+}, arcCenters = (count, inner, block, layout, fallbackStartAngle, fallbackEndAngle, defaultRatio = .88) => {
+    var _a, _b, _c, _d, _e;
+    const startAngle = null !== (_b = null !== (_a = layout.startAngle) && void 0 !== _a ? _a : fallbackStartAngle) && void 0 !== _b ? _b : -90, endAngle = null !== (_d = null !== (_c = layout.endAngle) && void 0 !== _c ? _c : fallbackEndAngle) && void 0 !== _d ? _d : 270, ratio = null !== (_e = layout.radiusRatio) && void 0 !== _e ? _e : defaultRatio, rx = Math.max((inner.width - block.width) / 2, 1) * ratio, ry = Math.max((inner.height - block.height) / 2, 1) * ratio, center_x = inner.x + inner.width / 2, center_y = inner.y + inner.height / 2;
+    if (1 === count) {
+        const angle = degreeToRadian((startAngle + endAngle) / 2);
+        return [ {
+            x: center_x + Math.cos(angle) * rx,
+            y: center_y + Math.sin(angle) * ry
+        } ];
+    }
+    return Array.from({
+        length: count
+    }, ((_, index) => {
+        const t = index / (count - 1), angle = degreeToRadian(startAngle + angleDelta(startAngle, endAngle) * t);
+        return {
+            x: center_x + Math.cos(angle) * rx,
+            y: center_y + Math.sin(angle) * ry
+        };
+    }));
+}, angleDelta = (startAngle, endAngle) => {
+    const delta = endAngle - startAngle;
+    return Math.abs(delta) >= 360 ? 360 : delta;
+}, degreeToRadian = degree => degree / 180 * Math.PI, computeLinks = (blocks, distance) => {
+    const links = [];
+    for (let i = 0; i < blocks.length - 1; i++) {
+        const from = blocks[i], to = blocks[i + 1], start = pointOnBlockEdge(from, to.center, distance), end = pointOnBlockEdge(to, from.center, distance);
+        links.push({
+            from: from,
+            to: to,
+            start: start,
+            end: end,
+            points: [ start, end ]
+        });
+    }
+    return links;
+}, pointOnBlockEdge = (block, toward, distance) => {
+    const dx = toward.x - block.center.x, dy = toward.y - block.center.y;
+    if (0 === dx && 0 === dy) return {
+        x: block.center.x,
+        y: block.center.y
+    };
+    const scaleX = 0 === dx ? Number.POSITIVE_INFINITY : block.width / 2 / Math.abs(dx), scaleY = 0 === dy ? Number.POSITIVE_INFINITY : block.height / 2 / Math.abs(dy), scale = Math.min(scaleX, scaleY), length = Math.sqrt(dx * dx + dy * dy) || 1;
+    return {
+        x: block.center.x + dx * scale + dx / length * distance,
+        y: block.center.y + dy * scale + dy / length * distance
+    };
+};
+//# sourceMappingURL=layout.js.map

package/cjs/charts/storyline/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/storyline/layout.ts"],"names":[],"mappings":"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","file":"layout.js","sourcesContent":["import type { IStorylineBlock, IStorylineLayoutOptions, StorylineLayoutType } from './interface';\n\nexport interface StorylineSize {\n  width: number;\n  height: number;\n}\n\nexport interface StorylinePadding {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\nexport interface StorylinePoint {\n  x: number;\n  y: number;\n}\n\nexport interface StorylineBlockPosition extends StorylinePoint, StorylineSize {\n  id: string | number;\n  index: number;\n  datum: IStorylineBlock;\n  center: StorylinePoint;\n}\n\nexport interface StorylineLinkPosition {\n  from: StorylineBlockPosition;\n  to: StorylineBlockPosition;\n  start: StorylinePoint;\n  end: StorylinePoint;\n  points: StorylinePoint[];\n}\n\nexport interface StorylineCircleGuide {\n  center: StorylinePoint;\n  radius: number;\n}\n\nexport interface StorylineLayoutResult {\n  blocks: StorylineBlockPosition[];\n  links: StorylineLinkPosition[];\n  circleGuide?: StorylineCircleGuide;\n}\n\nexport interface StorylineComputeOptions {\n  layout: StorylineLayoutType | IStorylineLayoutOptions | undefined;\n  viewBox: StorylineSize;\n  block: StorylineSize;\n  gap?: number;\n  padding?: number | [number, number, number, number];\n  lineDistance?: number;\n}\n\nconst DEFAULT_LAYOUT: StorylineLayoutType = 'landscape';\nconst DEFAULT_PADDING = 24;\n\nexport const normalizePadding = (\n  padding?: number | [number, number, number, number] | { top?: number; right?: number; bottom?: number; left?: number }\n): StorylinePadding => {\n  if (Array.isArray(padding)) {\n    return {\n      top: padding[0] ?? 0,\n      right: padding[1] ?? 0,\n      bottom: padding[2] ?? 0,\n      left: padding[3] ?? 0\n    };\n  }\n  if (padding && typeof padding === 'object' && 'top' in padding) {\n    return {\n      top: (padding as { top?: number }).top ?? 0,\n      right: (padding as { right?: number }).right ?? 0,\n      bottom: (padding as { bottom?: number }).bottom ?? 0,\n      left: (padding as { left?: number }).left ?? 0\n    };\n  }\n  const value = (padding as number | undefined) ?? DEFAULT_PADDING;\n  return { top: value, right: value, bottom: value, left: value };\n};\n\nexport const normalizeLayout = (layout?: StorylineLayoutType | IStorylineLayoutOptions): IStorylineLayoutOptions => {\n  if (!layout) {\n    return { type: DEFAULT_LAYOUT };\n  }\n  if (typeof layout === 'string') {\n    return { type: layout };\n  }\n  return layout;\n};\n\nexport const computeStorylineLayout = (\n  data: IStorylineBlock[],\n  options: StorylineComputeOptions\n): StorylineLayoutResult => {\n  const layout = normalizeLayout(options.layout);\n  const padding = normalizePadding(layout.padding ?? options.padding);\n  const gap = options.gap ?? 40;\n  const lineDistance = options.lineDistance ?? 8;\n  const blocks = computeBlockPositions(data, layout, options.viewBox, options.block, padding, gap);\n  const circleGuide =\n    layout.type === 'clock' ? computeClockCircleGuide(options.viewBox, options.block, padding, layout) : undefined;\n  return {\n    blocks,\n    links: computeLinks(blocks, lineDistance),\n    circleGuide\n  };\n};\n\nconst computeBlockPositions = (\n  data: IStorylineBlock[],\n  layout: IStorylineLayoutOptions,\n  viewBox: StorylineSize,\n  block: StorylineSize,\n  padding: StorylinePadding,\n  gap: number\n): StorylineBlockPosition[] => {\n  const count = data.length;\n  if (!count) {\n    return [];\n  }\n\n  const inner = {\n    x: padding.left,\n    y: padding.top,\n    width: Math.max(viewBox.width - padding.left - padding.right, block.width),\n    height: Math.max(viewBox.height - padding.top - padding.bottom, block.height)\n  };\n  const center = {\n    x: inner.x + inner.width / 2,\n    y: inner.y + inner.height / 2\n  };\n\n  let centers: StorylinePoint[];\n  switch (layout.type) {\n    case 'portrait':\n      centers = lineCenters(\n        count,\n        center.x,\n        inner.y + block.height / 2,\n        center.x,\n        inner.y + inner.height - block.height / 2\n      );\n      break;\n    case 'ladder': {\n      // 沿对角线均匀采样 anchor 点，偶/奇 index 沿对角线\"法向\"做左/右偏移。\n      // direction = 'up' (默认)：左下 → 右上；direction = 'down'：左上 → 右下。\n      const isDown = layout.direction === 'down';\n      const x0 = inner.x + block.width / 2;\n      const x1 = inner.x + inner.width - block.width / 2;\n      const yTop = inner.y + block.height / 2;\n      const yBot = inner.y + inner.height - block.height / 2;\n      const y0 = isDown ? yTop : yBot;\n      const y1 = isDown ? yBot : yTop;\n      const anchors = lineCenters(count, x0, y0, x1, y1);\n      // 对角线方向向量\n      const dx = x1 - x0;\n      const dy = y1 - y0;\n      const len = Math.hypot(dx, dy) || 1;\n      // 法向单位向量\n      const nx = -dy / len;\n      const ny = dx / len;\n      // 偏移量：与 headline fontSize 联动 —— 与 ladder.ts 中保持同一公式\n      // headline fontSize = clamp(innerHeight * 0.42, 80, 240)\n      // 偏移量 = headline fontSize * 1.2，让 block 与 headline 大字之间留出充足留白\n      const headlineFontSize = Math.max(80, Math.min(240, Math.round(inner.height * 0.42)));\n      const offset = headlineFontSize * 1.2;\n      centers = anchors.map((p, i) => {\n        // 偶数 index → 法向 +；奇数 index → 法向 -\n        const sign = i % 2 === 0 ? 1 : -1;\n        return {\n          x: p.x + nx * offset * sign,\n          y: p.y + ny * offset * sign\n        };\n      });\n      break;\n    }\n    case 'spiral':\n      centers = alternatingVerticalCenters(count, inner, block, gap);\n      break;\n    case 'clock':\n      centers = circularCenters(count, viewBox, block, padding, layout);\n      break;\n    case 'arc': {\n      // arc 布局：通过 direction 控制 dome（穹顶）/ bowl（碗形）方向\n      // - 'up'（默认）：弧线在上方（穹顶），等同原 dome\n      // - 'down'：弧线在下方（碗形），等同原 bowl\n      const isDown = layout.direction === 'down';\n      const [s, e] = isDown ? [20, 160] : [200, 340];\n      centers = arcCenters(count, inner, block, layout, s, e);\n      break;\n    }\n    case 'wing': {\n      const direction = layout.direction === 'right' ? 'right' : 'left';\n      const [s, e] = direction === 'right' ? [110, 250] : [-70, 70];\n      centers = arcCenters(count, inner, block, layout, s, e);\n      break;\n    }\n    case 'landscape':\n    default:\n      centers = lineCenters(\n        count,\n        inner.x + block.width / 2,\n        center.y,\n        inner.x + inner.width - block.width / 2,\n        center.y\n      );\n      break;\n  }\n\n  return centers.map((point, index) => ({\n    id: data[index]?.id ?? index,\n    index,\n    datum: data[index],\n    width: block.width,\n    height: block.height,\n    x: point.x - block.width / 2,\n    y: point.y - block.height / 2,\n    center: point\n  }));\n};\n\nconst lineCenters = (count: number, x0: number, y0: number, x1: number, y1: number): StorylinePoint[] => {\n  if (count === 1) {\n    return [{ x: (x0 + x1) / 2, y: (y0 + y1) / 2 }];\n  }\n  return Array.from({ length: count }, (_, index) => {\n    const t = index / (count - 1);\n    return {\n      x: x0 + (x1 - x0) * t,\n      y: y0 + (y1 - y0) * t\n    };\n  });\n};\n\nconst alternatingVerticalCenters = (\n  count: number,\n  inner: { x: number; y: number; width: number; height: number },\n  block: StorylineSize,\n  gap: number\n) => {\n  const baseX = inner.x + inner.width / 2;\n  const offset = Math.min(Math.max(block.width * 0.65 + gap / 2, 0), Math.max((inner.width - block.width) / 2, 0));\n  const points = lineCenters(\n    count,\n    baseX,\n    inner.y + block.height / 2,\n    baseX,\n    inner.y + inner.height - block.height / 2\n  );\n  return points.map((point, index) => ({\n    x: point.x + (index % 2 === 0 ? -offset : offset),\n    y: point.y\n  }));\n};\n\nconst circularCenters = (\n  count: number,\n  viewBox: StorylineSize,\n  block: StorylineSize,\n  padding: StorylinePadding,\n  layout: IStorylineLayoutOptions\n) => {\n  const guide = computeClockCircleGuide(viewBox, block, padding, layout);\n  const startAngle = layout.startAngle ?? -90;\n  const delta = 360;\n\n  if (count === 1) {\n    const angle = degreeToRadian(startAngle);\n    return [\n      {\n        x: guide.center.x + Math.cos(angle) * guide.radius,\n        y: guide.center.y + Math.sin(angle) * guide.radius\n      }\n    ];\n  }\n\n  return Array.from({ length: count }, (_, index) => {\n    const angle = degreeToRadian(startAngle + (delta * index) / count);\n    return {\n      x: guide.center.x + Math.cos(angle) * guide.radius,\n      y: guide.center.y + Math.sin(angle) * guide.radius\n    };\n  });\n};\n\nconst computeClockCircleGuide = (\n  viewBox: StorylineSize,\n  block: StorylineSize,\n  padding: StorylinePadding,\n  layout: IStorylineLayoutOptions\n): StorylineCircleGuide => {\n  const innerWidth = Math.max(viewBox.width - padding.left - padding.right, 1);\n  const innerHeight = Math.max(viewBox.height - padding.top - padding.bottom, 1);\n  const center = {\n    x: padding.left + innerWidth / 2,\n    y: padding.top + innerHeight / 2\n  };\n  const ratio = layout.radiusRatio ?? 0.7;\n  const maxRadius = Math.max(Math.min(innerWidth - block.width, innerHeight - block.height) / 2, 1);\n\n  return {\n    center,\n    radius: Math.max(1, maxRadius * ratio)\n  };\n};\n\nconst arcCenters = (\n  count: number,\n  inner: { x: number; y: number; width: number; height: number },\n  block: StorylineSize,\n  layout: IStorylineLayoutOptions,\n  fallbackStartAngle?: number,\n  fallbackEndAngle?: number,\n  defaultRatio = 0.88\n) => {\n  const startAngle = layout.startAngle ?? fallbackStartAngle ?? -90;\n  const endAngle = layout.endAngle ?? fallbackEndAngle ?? 270;\n  const ratio = layout.radiusRatio ?? defaultRatio;\n  const rx = Math.max((inner.width - block.width) / 2, 1) * ratio;\n  const ry = Math.max((inner.height - block.height) / 2, 1) * ratio;\n  const center = {\n    x: inner.x + inner.width / 2,\n    y: inner.y + inner.height / 2\n  };\n\n  if (count === 1) {\n    const angle = degreeToRadian((startAngle + endAngle) / 2);\n    return [{ x: center.x + Math.cos(angle) * rx, y: center.y + Math.sin(angle) * ry }];\n  }\n\n  return Array.from({ length: count }, (_, index) => {\n    const t = index / (count - 1);\n    const angle = degreeToRadian(startAngle + angleDelta(startAngle, endAngle) * t);\n    return {\n      x: center.x + Math.cos(angle) * rx,\n      y: center.y + Math.sin(angle) * ry\n    };\n  });\n};\n\nconst angleDelta = (startAngle: number, endAngle: number) => {\n  const delta = endAngle - startAngle;\n  return Math.abs(delta) >= 360 ? 360 : delta;\n};\n\nconst degreeToRadian = (degree: number) => (degree / 180) * Math.PI;\n\nconst computeLinks = (blocks: StorylineBlockPosition[], distance: number): StorylineLinkPosition[] => {\n  const links: StorylineLinkPosition[] = [];\n  for (let i = 0; i < blocks.length - 1; i++) {\n    const from = blocks[i];\n    const to = blocks[i + 1];\n    const start = pointOnBlockEdge(from, to.center, distance);\n    const end = pointOnBlockEdge(to, from.center, distance);\n    links.push({\n      from,\n      to,\n      start,\n      end,\n      points: [start, end]\n    });\n  }\n  return links;\n};\n\nconst pointOnBlockEdge = (block: StorylineBlockPosition, toward: StorylinePoint, distance: number): StorylinePoint => {\n  const dx = toward.x - block.center.x;\n  const dy = toward.y - block.center.y;\n  if (dx === 0 && dy === 0) {\n    return { x: block.center.x, y: block.center.y };\n  }\n  const scaleX = dx === 0 ? Number.POSITIVE_INFINITY : block.width / 2 / Math.abs(dx);\n  const scaleY = dy === 0 ? Number.POSITIVE_INFINITY : block.height / 2 / Math.abs(dy);\n  const scale = Math.min(scaleX, scaleY);\n  const length = Math.sqrt(dx * dx + dy * dy) || 1;\n  return {\n    x: block.center.x + dx * scale + (dx / length) * distance,\n    y: block.center.y + dy * scale + (dy / length) * distance\n  };\n};\n"]}

package/cjs/charts/storyline/layouts/arc.d.ts

@@ -0,0 +1,5 @@
+import type { IExtensionGroupMarkSpec } from '@visactor/vchart';
+import type { IStorylineBlock, IStorylineSpec } from '../interface';
+export declare const buildArcMark: (spec: IStorylineSpec) => IExtensionGroupMarkSpec | null;
+export declare const buildArcCenterImageMark: (spec: IStorylineSpec) => IExtensionGroupMarkSpec | null;
+export declare const buildArcBlockMark: (spec: IStorylineSpec, block: IStorylineBlock, index: number) => IExtensionGroupMarkSpec;

package/cjs/charts/storyline/layouts/arc.js

@@ -0,0 +1,327 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.buildArcBlockMark = exports.buildArcCenterImageMark = exports.buildArcMark = void 0;
+
+const vchart_1 = require("@visactor/vchart"), common_1 = require("./common"), ARC_BLOCK_IMAGE_SIZE = 240, ARC_BLOCK_IMAGE_BORDER = 3, ARC_BLOCK_IMAGE_HALO_PADDING = 6, ARC_TEXT_GAP_FROM_IMAGE = 10, ARC_TITLE_FONT_SIZE = 32, ARC_TITLE_LINE_HEIGHT = 34, ARC_CONTENT_LINE_HEIGHT = 26, ARC_CONTENT_FONT_SIZE = 20, ARC_TEXT_BOX_HEIGHT = 240, ARC_TITLE_TO_CONTENT_GAP = 4, ARC_TEXT_PADDING = 20, ARC_TEXT_BOX_MIN_WIDTH = 240, ARC_CENTER_IMAGE_SIZE_RATIO = .55, ARC_CENTER_IMAGE_TO_SYMBOL_RATIO = .8, ARC_GAP_FROM_CENTER_IMAGE = 200, isDownArc = spec => "down" === (0, 
+common_1.normalizeLayout)(spec.layout).direction, getArcCenterImageRect = (spec, ctx) => {
+    var _a, _b, _c, _e;
+    const {width: width, height: height, startX: startX, startY: startY} = (0, common_1.getRegionGeometry)(ctx), innerWidth = Math.max(width, 1), innerHeight = Math.max(height, 1), baseSize = .55 * Math.min(innerWidth, innerHeight), w = Math.max(null !== (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.width) && void 0 !== _b ? _b : baseSize, 80), h = Math.max(null !== (_e = null === (_c = spec.centerImage) || void 0 === _c ? void 0 : _c.height) && void 0 !== _e ? _e : baseSize, 80);
+    return {
+        x: startX + innerWidth / 2 - w / 2,
+        y: isDownArc(spec) ? startY : startY + innerHeight - h,
+        width: w,
+        height: h
+    };
+}, getArcGeometry = (spec, ctx) => {
+    var _a, _b, _c;
+    const {width: width, startX: startX} = (0, common_1.getRegionGeometry)(ctx), innerWidth = Math.max(width, 1), blockWidth = (0, 
+    common_1.resolveBlockWidth)(spec, width), layoutOpt = (0, common_1.normalizeLayout)(spec.layout), isDown = "down" === layoutOpt.direction, startAngle = null !== (_a = layoutOpt.startAngle) && void 0 !== _a ? _a : isDown ? 20 : 200, endAngle = null !== (_b = layoutOpt.endAngle) && void 0 !== _b ? _b : isDown ? 160 : 340, ratio = null !== (_c = layoutOpt.radiusRatio) && void 0 !== _c ? _c : .88, rx = Math.max((innerWidth - blockWidth) / 2, 1) * ratio, centerRect = getArcCenterImageRect(spec, ctx), centerTop = centerRect.y, centerBottom = centerRect.y + centerRect.height, sinStart = Math.sin(startAngle / 180 * Math.PI);
+    let cy, ry;
+    if (isDown) {
+        const denom = Math.max(1 - sinStart, .05);
+        ry = (centerRect.height + 200) / denom, cy = centerTop - ry * sinStart;
+    } else {
+        const denom = Math.max(1 + sinStart, .05);
+        ry = (centerRect.height + 200) / denom, cy = centerBottom - ry * sinStart;
+    }
+    return {
+        cx: startX + innerWidth / 2,
+        cy: cy,
+        rx: rx,
+        ry: ry,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        centerTop: centerTop,
+        centerBottom: centerBottom
+    };
+}, getArcBlockCenter = (spec, ctx, index) => {
+    var _a, _b, _c, _e;
+    const arc = getArcGeometry(spec, ctx), count = null !== (_b = null === (_a = spec.data) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0;
+    if (count <= 0) return {
+        x: arc.cx,
+        y: arc.cy
+    };
+    const t = 1 === count ? .5 : index / (count - 1), angle = (arc.startAngle + (arc.endAngle - arc.startAngle) * t) / 180 * Math.PI, px = arc.cx + Math.cos(angle) * arc.rx, py = arc.cy + Math.sin(angle) * arc.ry, nxRaw = Math.cos(angle) / arc.rx, nyRaw = Math.sin(angle) / arc.ry, nLen = Math.hypot(nxRaw, nyRaw) || 1, nx = nxRaw / nLen, ny = nyRaw / nLen, offset = (null !== (_e = null === (_c = spec.image) || void 0 === _c ? void 0 : _c.height) && void 0 !== _e ? _e : 240) / 2;
+    return {
+        x: px + nx * offset,
+        y: py + ny * offset
+    };
+}, buildArcMark = spec => {
+    var _a;
+    if (!0 !== (null === (_a = spec.line) || void 0 === _a ? void 0 : _a.visible)) return null;
+    const themeColor = (0, common_1.getThemeColor)(spec);
+    return {
+        type: "group",
+        name: "storyline-arc",
+        zIndex: vchart_1.LayoutZIndex.Mark,
+        children: [ {
+            type: "path",
+            name: "storyline-arc-path",
+            interactive: !1,
+            style: {
+                stroke: themeColor,
+                lineWidth: 2,
+                lineCap: "round",
+                fill: "transparent",
+                fillOpacity: 0,
+                path: (_d, ctx) => {
+                    const arc = getArcGeometry(spec, ctx), span = arc.endAngle - arc.startAngle, segments = [];
+                    for (let i = 0; i <= 64; i++) {
+                        const t = i / 64, angle = (arc.startAngle + span * t) / 180 * Math.PI, x = arc.cx + Math.cos(angle) * arc.rx, y = arc.cy + Math.sin(angle) * arc.ry;
+                        segments.push(`${0 === i ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`);
+                    }
+                    return segments.join(" ");
+                }
+            }
+        } ]
+    };
+};
+
+exports.buildArcMark = buildArcMark;
+
+const buildArcCenterImageMark = spec => {
+    var _a, _b, _c, _e;
+    if (!(!1 !== (null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.visible))) return null;
+    const themeColor = (0, common_1.getThemeColor)(spec), hasImage = !!(null === (_b = spec.centerImage) || void 0 === _b ? void 0 : _b.image), symbolGradient = {
+        gradient: "linear",
+        x0: .5,
+        y0: 0,
+        x1: .5,
+        y1: 1,
+        stops: [ {
+            offset: 0,
+            color: (0, common_1.withAlpha)(themeColor, .15)
+        }, {
+            offset: 1,
+            color: themeColor
+        } ]
+    };
+    return {
+        type: "group",
+        name: "storyline-arc-center",
+        zIndex: vchart_1.LayoutZIndex.Mark,
+        children: [ {
+            type: "symbol",
+            name: "storyline-arc-center-symbol",
+            interactive: !1,
+            style: {
+                x: (_d, ctx) => {
+                    const r = getArcCenterImageRect(spec, ctx);
+                    return r.x + r.width / 2;
+                },
+                y: (_d, ctx) => {
+                    const r = getArcCenterImageRect(spec, ctx);
+                    return r.y + r.height / 2;
+                },
+                size: (_d, ctx) => {
+                    const r = getArcCenterImageRect(spec, ctx);
+                    return Math.max(r.width, r.height);
+                },
+                symbolType: "circle",
+                fill: hasImage ? symbolGradient : "#ffffff",
+                stroke: themeColor,
+                lineWidth: 2
+            }
+        }, hasImage ? Object.assign(Object.assign({
+            type: "image",
+            name: "storyline-arc-center-image",
+            interactive: !1
+        }, spec.centerImage), {
+            style: Object.assign({
+                x: (_d, ctx) => {
+                    var _a, _b;
+                    const r = getArcCenterImageRect(spec, ctx), userWidth = null === (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.width, w = "number" == typeof userWidth ? userWidth : .8 * Math.max(r.width, r.height);
+                    return r.x + (r.width - w) / 2;
+                },
+                y: (_d, ctx) => {
+                    var _a, _b;
+                    const r = getArcCenterImageRect(spec, ctx), userHeight = null === (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.height, h = "number" == typeof userHeight ? userHeight : .8 * Math.max(r.width, r.height);
+                    return r.y + (r.height - h) / 2;
+                },
+                width: (_d, ctx) => {
+                    var _a, _b;
+                    const r = getArcCenterImageRect(spec, ctx), userWidth = null === (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.width;
+                    return "number" == typeof userWidth ? userWidth : .8 * Math.max(r.width, r.height);
+                },
+                height: (_d, ctx) => {
+                    var _a, _b;
+                    const r = getArcCenterImageRect(spec, ctx), userHeight = null === (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.height;
+                    return "number" == typeof userHeight ? userHeight : .8 * Math.max(r.width, r.height);
+                },
+                cornerRadius: (_d, ctx) => {
+                    var _a, _b, _c, _e;
+                    const r = getArcCenterImageRect(spec, ctx), userWidth = null === (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.width, userHeight = null === (_e = null === (_c = spec.centerImage) || void 0 === _c ? void 0 : _c.style) || void 0 === _e ? void 0 : _e.height, w = "number" == typeof userWidth ? userWidth : .8 * Math.max(r.width, r.height), h = "number" == typeof userHeight ? userHeight : .8 * Math.max(r.width, r.height);
+                    return Math.max(w, h) / 2;
+                },
+                image: null === (_c = spec.centerImage) || void 0 === _c ? void 0 : _c.image,
+                repeatX: "no-repeat",
+                repeatY: "no-repeat",
+                imageMode: "cover",
+                imagePosition: "center",
+                anchor: (_d, ctx) => {
+                    const r = getArcCenterImageRect(spec, ctx);
+                    return [ r.x + r.width / 2, r.y + r.height / 2 ];
+                }
+            }, null === (_e = spec.centerImage) || void 0 === _e ? void 0 : _e.style)
+        }) : null ].filter(Boolean)
+    };
+};
+
+exports.buildArcCenterImageMark = buildArcCenterImageMark;
+
+const getArcBlockMetrics = (spec, index = 0) => {
+    var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    const titleFontSize = Number(null !== (_c = null === (_b = null === (_a = spec.title) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fontSize) && void 0 !== _c ? _c : 32), titleLineHeight = Number(null !== (_g = null === (_f = null === (_e = spec.title) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.lineHeight) && void 0 !== _g ? _g : Math.max(34, Math.round(1.35 * titleFontSize))), contentFontSize = Number(null !== (_k = null === (_j = null === (_h = spec.content) || void 0 === _h ? void 0 : _h.style) || void 0 === _j ? void 0 : _j.fontSize) && void 0 !== _k ? _k : 20), contentLineHeight = Number(null !== (_o = null === (_m = null === (_l = spec.content) || void 0 === _l ? void 0 : _l.style) || void 0 === _m ? void 0 : _m.lineHeight) && void 0 !== _o ? _o : 26), contentHeight = Math.max(240 - titleLineHeight - 4, contentLineHeight), imageDiameter = Math.max(null !== (_q = null === (_p = spec.image) || void 0 === _p ? void 0 : _p.width) && void 0 !== _q ? _q : 240, null !== (_s = null === (_r = spec.image) || void 0 === _r ? void 0 : _r.height) && void 0 !== _s ? _s : 240), imageWidth = imageDiameter, imageHeight = imageDiameter, isDown = isDownArc(spec), count = Math.max(null !== (_u = null === (_t = spec.data) || void 0 === _t ? void 0 : _t.length) && void 0 !== _u ? _u : 0, 1), canvasWidth = Number(null !== (_v = spec.width) && void 0 !== _v ? _v : imageWidth * count), defaultTextWidth = Math.round(canvasWidth / (count + 1)), textBoxWidth = Math.max(Number(null !== (_x = null === (_w = spec.block) || void 0 === _w ? void 0 : _w.width) && void 0 !== _x ? _x : defaultTextWidth), 240), isLeftSide = index < count / 2, imageBox = {
+        x: -imageWidth / 2,
+        y: -imageHeight / 2,
+        width: imageWidth,
+        height: imageHeight
+    }, textBox = {
+        x: isLeftSide ? -20 : 20,
+        y: isDown ? imageBox.y + imageHeight + 10 : imageBox.y - 10 - 240,
+        width: textBoxWidth,
+        height: 240
+    };
+    return {
+        titleFontSize: titleFontSize,
+        titleLineHeight: titleLineHeight,
+        contentFontSize: contentFontSize,
+        contentLineHeight: contentLineHeight,
+        imageBox: imageBox,
+        textBox: textBox,
+        contentBox: {
+            x: textBox.x,
+            y: textBox.y + titleLineHeight + 4,
+            width: textBox.width,
+            height: contentHeight
+        },
+        isDown: isDown,
+        textAlign: isLeftSide ? "right" : "left"
+    };
+}, buildArcBlockMark = (spec, block, index) => {
+    var _a, _b, _c, _e, _f;
+    const hasImage = !!block.image, contentText = Array.isArray(block.content) ? block.content : block.content ? [ block.content ] : [], themeColor = (0, 
+    common_1.getThemeColor)(spec), metrics = getArcBlockMetrics(spec, index), connectorY = metrics.isDown ? metrics.imageBox.y + metrics.imageBox.height : metrics.textBox.y, connectorHeight = metrics.isDown ? Math.max(metrics.textBox.y + metrics.textBox.height - (metrics.imageBox.y + metrics.imageBox.height), 0) : Math.max(metrics.imageBox.y - metrics.textBox.y, 0);
+    return {
+        type: "group",
+        id: `storyline-block-${null !== (_a = block.id) && void 0 !== _a ? _a : index}`,
+        name: `storyline-block-${index}`,
+        zIndex: vchart_1.LayoutZIndex.Mark + 1,
+        style: {
+            x: (_d, ctx) => getArcBlockCenter(spec, ctx, index).x,
+            y: (_d, ctx) => getArcBlockCenter(spec, ctx, index).y
+        },
+        children: [ {
+            type: "rect",
+            name: `storyline-block-connector-${index}`,
+            interactive: !1,
+            zIndex: vchart_1.LayoutZIndex.Mark + 2,
+            style: {
+                x: -1,
+                y: connectorY,
+                width: 2,
+                height: connectorHeight,
+                fill: themeColor,
+                fillOpacity: .6
+            }
+        }, hasImage ? Object.assign(Object.assign({
+            type: "image",
+            name: `storyline-block-image-${index}`,
+            interactive: !1,
+            zIndex: vchart_1.LayoutZIndex.Mark + 3
+        }, (0, common_1.omitImageLayoutSpec)(spec.image)), {
+            style: Object.assign({
+                x: metrics.imageBox.x,
+                y: metrics.imageBox.y,
+                width: metrics.imageBox.width,
+                height: metrics.imageBox.height,
+                cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2,
+                image: block.image,
+                repeatX: "no-repeat",
+                repeatY: "no-repeat",
+                imageMode: "cover",
+                imagePosition: "center"
+            }, null === (_b = spec.image) || void 0 === _b ? void 0 : _b.style)
+        }) : {
+            type: "symbol",
+            name: `storyline-block-image-bg-${index}`,
+            interactive: !1,
+            zIndex: vchart_1.LayoutZIndex.Mark + 3,
+            style: {
+                x: 0,
+                y: 0,
+                size: Math.min(metrics.imageBox.width, metrics.imageBox.height),
+                symbolType: "circle",
+                fill: "#ffffff",
+                stroke: themeColor,
+                lineWidth: 2
+            }
+        }, !0 === (null === (_c = spec.image) || void 0 === _c ? void 0 : _c.showBackground) ? {
+            type: "symbol",
+            name: `storyline-block-image-halo-${index}`,
+            interactive: !1,
+            zIndex: vchart_1.LayoutZIndex.Mark + 3,
+            style: {
+                x: 0,
+                y: 0,
+                size: Math.min(metrics.imageBox.width, metrics.imageBox.height) + 12,
+                symbolType: "circle",
+                fill: "transparent",
+                stroke: themeColor,
+                lineWidth: 3
+            }
+        } : null, block.title ? Object.assign(Object.assign({
+            type: "text",
+            name: `storyline-block-title-${index}`,
+            interactive: !1,
+            zIndex: vchart_1.LayoutZIndex.Mark + 5
+        }, spec.title), {
+            style: Object.assign({
+                x: metrics.textBox.x,
+                y: metrics.textBox.y,
+                text: block.title,
+                maxLineWidth: metrics.textBox.width,
+                fontSize: metrics.titleFontSize,
+                lineHeight: metrics.titleLineHeight,
+                fontWeight: "bold",
+                fill: "#1f2430",
+                stroke: "#fff",
+                lineWidth: 5,
+                lineJoin: "round",
+                textAlign: metrics.textAlign,
+                textBaseline: "top"
+            }, null === (_e = spec.title) || void 0 === _e ? void 0 : _e.style)
+        }) : null, contentText.length ? Object.assign(Object.assign({
+            type: "text",
+            name: `storyline-block-content-${index}`,
+            interactive: !1,
+            zIndex: vchart_1.LayoutZIndex.Mark + 4
+        }, spec.content), {
+            textType: "rich",
+            style: Object.assign({
+                x: metrics.contentBox.x,
+                y: metrics.contentBox.y,
+                width: metrics.contentBox.width,
+                height: metrics.contentBox.height,
+                maxLineWidth: metrics.contentBox.width,
+                heightLimit: metrics.contentBox.height,
+                text: (0, common_1.buildRichContent)(contentText, spec, {
+                    fontSize: metrics.contentFontSize,
+                    lineHeight: metrics.contentLineHeight,
+                    fill: "#596173",
+                    align: metrics.textAlign
+                }),
+                textAlign: metrics.textAlign,
+                textBaseline: "top",
+                wordBreak: "break-word",
+                ellipsis: "...",
+                fill: "#596173"
+            }, null === (_f = spec.content) || void 0 === _f ? void 0 : _f.style)
+        }) : null ].filter(Boolean)
+    };
+};
+
+exports.buildArcBlockMark = buildArcBlockMark;
+//# sourceMappingURL=arc.js.map