@antv/infographic 0.2.12 → 0.2.13

package/esm/utils/viewbox.d.ts

@@ -4,3 +4,23 @@ export declare function getViewBox(svg: SVGSVGElement): {
     width: number;
     height: number;
 };
+export declare function calculateZoomedViewBox(current: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, factor: number, pivot: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function viewBoxToString(box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): string;

package/esm/utils/viewbox.js

@@ -10,3 +10,13 @@ export function getViewBox(svg) {
     const height = Number(heightStr) || 0;
     return { x: 0, y: 0, width, height };
 }
+export function calculateZoomedViewBox(current, factor, pivot) {
+    const newWidth = current.width * factor;
+    const newHeight = current.height * factor;
+    const newX = pivot.x - (pivot.x - current.x) * factor;
+    const newY = pivot.y - (pivot.y - current.y) * factor;
+    return { x: newX, y: newY, width: newWidth, height: newHeight };
+}
+export function viewBoxToString(box) {
+    return `${box.x} ${box.y} ${box.width} ${box.height}`;
+}

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.12";
+export declare const VERSION = "0.2.13";

package/esm/version.js

@@ -1 +1 @@
-export const VERSION = '0.2.12';
+export const VERSION = '0.2.13';

package/lib/designs/structures/chart-pie.d.ts

@@ -1,9 +1,34 @@
+import { type PieArcDatum } from 'd3';
 import type { ComponentType } from '../../jsx';
+import { ItemDatum } from '../../types';
 import type { BaseStructureProps } from './types';
 export interface ChartPieProps extends BaseStructureProps {
     radius?: number;
     innerRadius?: number;
     padding?: number;
     showPercentage?: boolean;
+    avoidLabelOverlap?: boolean;
+    minShowLabelPercent?: number | string;
 }
 export declare const ChartPie: ComponentType<ChartPieProps>;
+export interface LabelItem {
+    arcDatum: PieArcDatum<ItemDatum>;
+    originalIndex: number;
+    /** 标签中心点 Y 坐标 */
+    y: number;
+    x: number;
+    height: number;
+    isRight: boolean;
+    color: string;
+}
+/**
+ * 核心避障逻辑：蜘蛛腿算法 (Spider Leg Layout)
+ *
+ * 注意：y 坐标表示标签的中心点坐标
+ *
+ * @param items 待处理的标签数组（y 为中心点坐标）
+ * @param spacing 垂直最小间距（标签边缘之间的间距）
+ * @param minY 标签中心点的上边界
+ * @param maxY 标签中心点的下边界
+ */
+export declare function distributeLabels(items: LabelItem[], spacing: number, minY: number, maxY: number): LabelItem[];

package/lib/designs/structures/chart-pie.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartPie = void 0;
+exports.distributeLabels = distributeLabels;
 const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
 const d3_1 = require("d3");
 const jsx_1 = require("../../jsx");
@@ -8,9 +9,34 @@ const components_1 = require("../components");
 const layouts_1 = require("../layouts");
 const utils_1 = require("../utils");
 const registry_1 = require("./registry");
+// === 连线布局常量 ===
+/** 连线水平拉伸系数：控制拐点相对于外半径的延伸比例 */
+const EXTENSION_FACTOR = 1.35;
+/** 文本与连线终点之间的水平间距 */
+const TEXT_GAP = 8;
+/** 平滑系数：控制 Y 轴偏移对 X 轴补偿的影响幅度 */
+const SMOOTH_FACTOR = 0.3;
+/** 最大预期偏移系数：相对于外半径的比例 */
+const MAX_EXPECTED_SHIFT_FACTOR = 0.2;
+/** 文本锚点与拐点之间的固定间距 */
+const FIXED_TEXT_RADIUS_GAP = 20;
+/** 连线拐点半径系数：相对于外半径的比例 */
+const ELBOW_RADIUS_FACTOR = 1.15;
+/** 百分比文本位置系数：从内半径到外半径的比例 (0.5 = 中间) */
+const PERCENT_TEXT_POSITION = 0.5;
+/** 删除按钮半径系数：相对于外半径的比例 */
+const DELETE_BUTTON_RADIUS_FACTOR = 0.85;
+/** 添加按钮半径系数：相对于外半径的比例 */
+const ADD_BUTTON_RADIUS_FACTOR = 1.0;
+/** 连线透明度 */
+const CONNECTOR_STROKE_OPACITY = 0.45;
+/** 连线宽度 */
+const CONNECTOR_STROKE_WIDTH = 2;
 const ChartPie = (props) => {
     var _a;
-    const { Title, Item, data, radius = 140, innerRadius = 0, padding = 30, showPercentage = true, options, } = props;
+    const { Title, Item, data, radius = 140, innerRadius = 0, padding = 30, showPercentage = true, avoidLabelOverlap = false, minShowLabelPercent: rawMinShowLabelPercent = 0, options, } = props;
+    // 规范化百分比阈值
+    const minShowLabelPercent = (0, utils_1.normalizePercent)(rawMinShowLabelPercent);
     const { title, desc, items = [] } = data;
     const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
     const btnBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
@@ -21,12 +47,9 @@ const ChartPie = (props) => {
     const labelHeight = itemBounds.height || 32;
     // 基础半径设置
     const outerRadius = Math.max(radius, 60);
-    // 连线水平拉伸的系数
-    const extensionFactor = 1.35;
-    const textGap = 8;
     // 计算画布中心和总尺寸
     // 水平方向：半径 * 系数 + 间距 + 标签宽度 + 边缘padding
-    const maxHorizontalDistance = outerRadius * extensionFactor + textGap + labelWidth;
+    const maxHorizontalDistance = outerRadius * EXTENSION_FACTOR + TEXT_GAP + labelWidth;
     const maxVerticalDistance = outerRadius;
     const centerX = padding + maxHorizontalDistance;
     const centerY = padding + maxVerticalDistance;
@@ -57,24 +80,24 @@ const ChartPie = (props) => {
         .outerRadius(outerRadius);
     // 连线拐点
     const outerArc = (0, d3_1.arc)()
-        .innerRadius(outerRadius * 1.15)
-        .outerRadius(outerRadius * 1.15);
-    const percentTextRadius = innerRadius + (outerRadius - innerRadius) * 0.5;
+        .innerRadius(outerRadius * ELBOW_RADIUS_FACTOR)
+        .outerRadius(outerRadius * ELBOW_RADIUS_FACTOR);
+    const percentTextRadius = innerRadius + (outerRadius - innerRadius) * PERCENT_TEXT_POSITION;
     const percentageArc = (0, d3_1.arc)()
         .innerRadius(percentTextRadius)
         .outerRadius(percentTextRadius);
     // 删除按钮位置
     const deleteButtonArc = (0, d3_1.arc)()
-        .innerRadius(outerRadius * 0.85)
-        .outerRadius(outerRadius * 0.85);
+        .innerRadius(outerRadius * DELETE_BUTTON_RADIUS_FACTOR)
+        .outerRadius(outerRadius * DELETE_BUTTON_RADIUS_FACTOR);
     const sliceElements = [];
     const percentElements = [];
     const connectorElements = [];
     const itemElements = [];
     const btnElements = [];
+    const labelItems = [];
     // 3. 遍历生成图形
     arcData.forEach((arcDatum) => {
-        const currentItem = arcDatum.data;
         const originalIndex = arcDatum.index;
         const color = (0, utils_1.getPaletteColor)(options, [originalIndex]) ||
             themeColors.colorPrimary ||
@@ -84,20 +107,77 @@ const ChartPie = (props) => {
         sliceElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: pathD, fill: color, stroke: themeColors.colorBg, strokeWidth: 1, "data-element-type": "shape", width: outerRadius * 2, height: outerRadius * 2 }));
         // --- 计算关键点 ---
         const midAngle = arcDatum.startAngle + (arcDatum.endAngle - arcDatum.startAngle) / 2;
-        const isRight = midAngle < Math.PI;
-        // 1. 起点
+        const normalizedAngle = midAngle < 0 ? midAngle + Math.PI * 2 : midAngle;
+        const isRight = normalizedAngle < Math.PI;
+        // 计算扇形占比，如果小于 minShowLabelPercent 则跳过生成连线和标签
+        const slicePercent = totalValue > 0 ? (arcDatum.value / totalValue) * 100 : 0;
+        if (slicePercent < minShowLabelPercent) {
+            return;
+        }
+        const centroid = outerArc.centroid(arcDatum);
+        labelItems.push({
+            arcDatum,
+            originalIndex,
+            x: centroid[0],
+            y: centroid[1], // 中心点 Y 坐标
+            height: labelHeight,
+            isRight,
+            color,
+        });
+    });
+    let finalLabels = labelItems;
+    if (avoidLabelOverlap) {
+        // 标签中心点的上下边界（中心点不能超出此范围）
+        const labelMinY = -maxVerticalDistance * EXTENSION_FACTOR;
+        const labelMaxY = maxVerticalDistance * EXTENSION_FACTOR;
+        const leftItems = labelItems.filter((item) => !item.isRight);
+        const rightItems = labelItems.filter((item) => item.isRight);
+        const labelSpacing = labelHeight;
+        const adjustedRight = distributeLabels(rightItems, labelSpacing, labelMinY, labelMaxY);
+        const adjustedLeft = distributeLabels(leftItems, labelSpacing, labelMinY, labelMaxY);
+        finalLabels = [...adjustedLeft, ...adjustedRight];
+    }
+    finalLabels.forEach((item) => {
+        const { arcDatum, originalIndex, isRight, color, y: adjustedY } = item;
+        // 1. P0: 连线起点 (内部扇形质心)
         const p0 = innerArc.centroid(arcDatum);
-        // 2. 拐点
+        // 2. P1: 第一拐点 (外部扇形质心)
         const p1 = outerArc.centroid(arcDatum);
-        // 3. 终点 (水平拉伸)
-        const labelXOffset = outerRadius * extensionFactor * (isRight ? 1 : -1);
-        const p2 = [labelXOffset, p1[1]];
+        // 计算因避障算法导致的 Y 轴偏移量
+        // adjustedY 已经是中心点坐标
+        const labelCenterY = adjustedY;
+        const deltaY = Math.abs(labelCenterY - p1[1]);
+        // --- 动态补偿策略 (Dynamic Compensation) ---
+        // 根据 Y 轴的偏移量动态向外推移 X 轴，以缓解连线折角过于陡峭的问题
+        const dynamicShift = deltaY * SMOOTH_FACTOR;
+        // 计算基础拐点半径
+        const baseElbowRadius = outerRadius * EXTENSION_FACTOR;
+        // 计算实际拐点半径 (基础半径 + 动态补偿)
+        const currentElbowRadius = baseElbowRadius + dynamicShift;
+        // 设定文本锚点的固定半径，确保所有标签在垂直方向上对齐
+        const maxExpectedShift = outerRadius * MAX_EXPECTED_SHIFT_FACTOR;
+        const fixedTextRadius = baseElbowRadius + maxExpectedShift + FIXED_TEXT_RADIUS_GAP;
+        // 计算 P2 X 坐标 (注意方向性)
+        // 限制 Elbow X 不超过文本锚点半径，防止连线出现回折
+        const elbowRadiusClamped = Math.min(currentElbowRadius, fixedTextRadius);
+        const elbowX = elbowRadiusClamped * (isRight ? 1 : -1);
+        // 计算文本锚点 X 坐标 (始终对齐)
+        const textX = fixedTextRadius * (isRight ? 1 : -1);
+        // 3. P2: 第二拐点 (动态调整后的 Elbow 位置)
+        // 连线终点对齐标签垂直中心
+        const p2 = [elbowX, labelCenterY];
+        // 4. P3: 终点 (文本锚点)
+        const p3 = [textX, labelCenterY];
         // --- 绘制连线 ---
-        connectorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M${centerX + p0[0]} ${centerY + p0[1]} L${centerX + p1[0]} ${centerY + p1[1]} L${centerX + p2[0]} ${centerY + p2[1]}`, stroke: colorPrimary, strokeOpacity: 0.45, strokeWidth: 2, fill: "none", "data-element-type": "shape" }));
+        connectorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M${centerX + p0[0]} ${centerY + p0[1]} 
+        L${centerX + p1[0]} ${centerY + p1[1]} 
+        L${centerX + p2[0]} ${centerY + p2[1]}
+        L${centerX + p3[0]} ${centerY + p3[1]}
+        `, stroke: color, strokeOpacity: CONNECTOR_STROKE_OPACITY, strokeWidth: CONNECTOR_STROKE_WIDTH, fill: "none", "data-element-type": "shape" }));
         // --- 绘制 Item ---
-        const itemX = centerX + p2[0] + (isRight ? textGap : -textGap - labelWidth);
-        const itemY = centerY + p2[1] - labelHeight / 2;
-        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: [originalIndex], datum: currentItem, data: data, x: itemX, y: itemY, width: labelWidth, height: labelHeight, positionH: isRight ? 'normal' : 'flipped', positionV: "middle", themeColors: (0, utils_1.getThemeColors)({ colorPrimary: color }, options) }));
+        const itemX = centerX + p3[0] + (isRight ? TEXT_GAP : -TEXT_GAP - labelWidth);
+        const itemY = centerY + adjustedY - labelHeight / 2; // 转换为顶部坐标用于渲染
+        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: [originalIndex], datum: arcDatum.data, data: data, x: itemX, y: itemY, width: labelWidth, height: labelHeight, positionH: isRight ? 'normal' : 'flipped', positionV: "middle", themeColors: (0, utils_1.getThemeColors)({ colorPrimary: color }, options) }));
         // --- 绘制百分比 ---
         if (showPercentage && totalValue > 0) {
             const percentPos = percentageArc.centroid(arcDatum);
@@ -118,7 +198,7 @@ const ChartPie = (props) => {
         const currentEnd = arcDatum.endAngle;
         const nextStart = arcData[nextIndex].startAngle + (nextIndex === 0 ? Math.PI * 2 : 0);
         const midAngle = (currentEnd + nextStart) / 2;
-        const btnR = outerRadius * 1.0;
+        const btnR = outerRadius * ADD_BUTTON_RADIUS_FACTOR;
         const btnX = Math.sin(midAngle) * btnR;
         const btnY = -Math.cos(midAngle) * btnR;
         btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [index + 1], x: centerX + btnX - btnBounds.width / 2, y: centerY + btnY - btnBounds.height / 2 }));
@@ -130,3 +210,83 @@ exports.ChartPie = ChartPie;
     component: exports.ChartPie,
     composites: ['title', 'item'],
 });
+/**
+ * 核心避障逻辑：蜘蛛腿算法 (Spider Leg Layout)
+ *
+ * 注意：y 坐标表示标签的中心点坐标
+ *
+ * @param items 待处理的标签数组（y 为中心点坐标）
+ * @param spacing 垂直最小间距（标签边缘之间的间距）
+ * @param minY 标签中心点的上边界
+ * @param maxY 标签中心点的下边界
+ */
+function distributeLabels(items, spacing, minY, maxY) {
+    // 避免除零风险
+    if (items.length <= 1)
+        return items.map((item) => (Object.assign({}, item)));
+    // 按照 Y 坐标排序 (从上到下)
+    const sorted = items.map((item) => (Object.assign({}, item))).sort((a, b) => a.y - b.y);
+    // === 预检测：是否需要退避 ===
+    // 检查是否有任何标签重叠或超出边界
+    const hasOverlap = sorted.some((item, i) => {
+        if (i === 0)
+            return false;
+        const prev = sorted[i - 1];
+        // 中心点间距 < 两个半高度之和 → 有重叠
+        return item.y - prev.y < (prev.height + item.height) / 2;
+    });
+    const firstItem = sorted[0];
+    const lastItem = sorted[sorted.length - 1];
+    const isOutOfBounds = firstItem.y - firstItem.height / 2 < minY ||
+        lastItem.y + lastItem.height / 2 > maxY;
+    // 如果没有重叠且都在边界内，直接返回原位置
+    if (!hasOverlap && !isOutOfBounds) {
+        return sorted;
+    }
+    // === 第一步：计算总高度需求，动态调整间距 ===
+    const totalLabelsHeight = sorted.reduce((sum, item) => sum + item.height, 0);
+    const availableSpace = maxY - minY;
+    const requiredSpaceWithIdealSpacing = totalLabelsHeight + spacing * (sorted.length - 1);
+    // 如果理想间距放不下，动态压缩间距（最小为0）
+    let actualSpacing = spacing;
+    if (requiredSpaceWithIdealSpacing > availableSpace) {
+        const excessSpace = availableSpace - totalLabelsHeight;
+        actualSpacing = Math.max(0, excessSpace / (sorted.length - 1));
+    }
+    // === 第二步：向下挤压 (Downwards push) ===
+    // y 为中心点坐标
+    // 当前标签中心 必须 >= 前一标签中心 + 两个半高度之和 + 间距
+    for (let i = 1; i < sorted.length; i++) {
+        const prev = sorted[i - 1];
+        const curr = sorted[i];
+        const minAllowedY = prev.y + (prev.height + curr.height) / 2 + actualSpacing;
+        if (curr.y < minAllowedY) {
+            curr.y = minAllowedY;
+        }
+    }
+    // === 第三步：边界钳制 + 向上回推 (Upwards push) ===
+    // 如果最后一个标签超出下边界，从下往上回推
+    const lastIdx = sorted.length - 1;
+    const last = sorted[lastIdx];
+    if (last.y + last.height / 2 > maxY) {
+        // 先把最后一个钳制到边界内（中心点 = 下边界 - 半高度）
+        last.y = maxY - last.height / 2;
+        // 然后从下往上检查，如果上一个标签被挤到了，就往上推
+        for (let i = lastIdx - 1; i >= 0; i--) {
+            const next = sorted[i + 1];
+            const curr = sorted[i];
+            const maxAllowedY = next.y - (next.height + curr.height) / 2 - actualSpacing;
+            if (curr.y > maxAllowedY) {
+                curr.y = maxAllowedY;
+            }
+        }
+    }
+    // === 第四步：上边界钳制 ===
+    // 如果向上回推后，第一个标签超出上边界，整体往下移
+    const first = sorted[0];
+    if (first.y - first.height / 2 < minY) {
+        const shift = minY - (first.y - first.height / 2);
+        sorted.forEach((item) => (item.y += shift));
+    }
+    return sorted;
+}

package/lib/designs/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './color';
 export * from './hierarchy-color';
 export * from './item';
+export * from './normalize-percent';

package/lib/designs/utils/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./color"), exports);
 __exportStar(require("./hierarchy-color"), exports);
 __exportStar(require("./item"), exports);
+__exportStar(require("./normalize-percent"), exports);

package/lib/designs/utils/normalize-percent.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 规范化百分比输入
+ *
+ * 支持以下格式：
+ * - "2%" 或 "2.5%" → 2 或 2.5
+ * - 2 或 2.5 (数字直接作为百分比) → 2 或 2.5
+ *
+ * @param value - 百分比值，可以是数字或带 "%" 的字符串
+ * @returns 规范化后的百分比数值
+ *
+ * @example
+ * ```typescript
+ * normalizePercent("2%");   // 返回 2
+ * normalizePercent("2.5%"); // 返回 2.5
+ * normalizePercent(2);      // 返回 2
+ * normalizePercent(2.5);    // 返回 2.5
+ * ```
+ */
+export declare function normalizePercent(value: number | string | undefined): number;

package/lib/designs/utils/normalize-percent.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizePercent = normalizePercent;
+/**
+ * 规范化百分比输入
+ *
+ * 支持以下格式：
+ * - "2%" 或 "2.5%" → 2 或 2.5
+ * - 2 或 2.5 (数字直接作为百分比) → 2 或 2.5
+ *
+ * @param value - 百分比值，可以是数字或带 "%" 的字符串
+ * @returns 规范化后的百分比数值
+ *
+ * @example
+ * ```typescript
+ * normalizePercent("2%");   // 返回 2
+ * normalizePercent("2.5%"); // 返回 2.5
+ * normalizePercent(2);      // 返回 2
+ * normalizePercent(2.5);    // 返回 2.5
+ * ```
+ */
+function normalizePercent(value) {
+    if (value === undefined || value === null)
+        return 0;
+    // 处理字符串格式 (如 "2%" 或 "2.5%")
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        // 移除可能的 '%' 后缀，然后解析
+        const numStr = trimmed.endsWith('%') ? trimmed.slice(0, -1) : trimmed;
+        const num = parseFloat(numStr);
+        return isNaN(num) ? 0 : num;
+    }
+    // 数字直接作为百分比使用
+    return value;
+}

package/lib/editor/interactions/zoom-wheel.d.ts

@@ -3,6 +3,9 @@ import { Interaction } from './base';
 export declare class ZoomWheel extends Interaction implements IInteraction {
     name: string;
     private wheelListener;
+    private getMousePoint;
+    private getCenterPoint;
+    private shouldZoom;
     init(options: InteractionInitOptions): void;
     destroy(): void;
 }

package/lib/editor/interactions/zoom-wheel.js

@@ -2,43 +2,66 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZoomWheel = void 0;
 const lodash_es_1 = require("lodash-es");
-const utils_1 = require("../../utils");
+const viewbox_1 = require("../../utils/viewbox");
 const commands_1 = require("../commands");
+const utils_1 = require("../utils");
 const base_1 = require("./base");
-const MIN_VIEWBOX_SIZE = 1;
-const MIN_PADDING = -5000;
-const MAX_PADDING = 5000;
+const MIN_VIEWBOX_SIZE = 20;
+const MAX_VIEWBOX_SIZE = 2000;
+const ZOOM_FACTOR = 1.1;
 class ZoomWheel extends base_1.Interaction {
     constructor() {
         super(...arguments);
         this.name = 'zoom-wheel';
         this.wheelListener = (event) => {
-            var _a;
-            if (!this.interaction.isActive())
-                return;
-            if (!event.ctrlKey && !event.metaKey)
+            if (!this.shouldZoom(event))
                 return;
             event.preventDefault();
-            const factor = event.deltaY > 0 ? 1.1 : 0.9;
-            const current = this.state.getOptions();
-            const currentPadding = (_a = current.padding) !== null && _a !== void 0 ? _a : 0;
-            const parsed = (0, utils_1.parsePadding)(currentPadding);
+            // Standard Zoom: Scroll Up (deltaY < 0) = Zoom In
+            const isZoomIn = event.deltaY < 0;
+            const factor = isZoomIn ? 1 / ZOOM_FACTOR : ZOOM_FACTOR;
             const svg = this.editor.getDocument();
-            const bbox = svg.getBBox();
-            const scaled = parsed.map((value) => {
-                const base = value === 0 ? 1 : value;
-                return (0, lodash_es_1.clamp)(base * factor, MIN_PADDING, MAX_PADDING);
-            });
-            const [top, right, bottom, left] = scaled;
-            const newWidth = bbox.width + left + right;
-            const newHeight = bbox.height + top + bottom;
-            if (newWidth <= MIN_VIEWBOX_SIZE || newHeight <= MIN_VIEWBOX_SIZE)
+            const viewBox = (0, viewbox_1.getViewBox)(svg);
+            const { width, height } = viewBox;
+            const newWidth = width * factor;
+            const newHeight = height * factor;
+            if (!(0, lodash_es_1.inRange)(newWidth, MIN_VIEWBOX_SIZE, MAX_VIEWBOX_SIZE) ||
+                !(0, lodash_es_1.inRange)(newHeight, MIN_VIEWBOX_SIZE, MAX_VIEWBOX_SIZE))
+                return;
+            // TODO: Remove after implementing the reset UI plugin
+            if ((event.ctrlKey || event.metaKey) && event.shiftKey) {
+                const command = new commands_1.UpdateOptionsCommand({
+                    viewBox: undefined,
+                });
+                void this.commander.execute(command);
                 return;
+            }
+            const pivot = (event.ctrlKey || event.metaKey) && !event.shiftKey
+                ? this.getMousePoint(svg, event)
+                : this.getCenterPoint(viewBox);
+            const newViewBox = (0, viewbox_1.calculateZoomedViewBox)(viewBox, factor, pivot);
             const command = new commands_1.UpdateOptionsCommand({
-                padding: scaled,
+                viewBox: (0, viewbox_1.viewBoxToString)(newViewBox),
             });
             void this.commander.execute(command);
         };
+        this.getMousePoint = (svg, event) => {
+            return (0, utils_1.clientToViewport)(svg, event.clientX, event.clientY);
+        };
+        this.getCenterPoint = (viewBox) => {
+            const centerX = viewBox.x + viewBox.width / 2;
+            const centerY = viewBox.y + viewBox.height / 2;
+            return { x: centerX, y: centerY };
+        };
+        this.shouldZoom = (event) => {
+            if (!this.interaction.isActive())
+                return false;
+            if (event.deltaY === 0)
+                return false;
+            const isMouseZoom = event.ctrlKey || event.metaKey;
+            const isCenterZoom = event.shiftKey;
+            return isMouseZoom || isCenterZoom;
+        };
     }
     init(options) {
         super.init(options);

package/lib/editor/managers/state.js

@@ -79,8 +79,14 @@ class StateManager {
     }
     updateOptions(options) {
         this.options = Object.assign(Object.assign({}, this.options), options);
-        if (this.options.padding !== undefined) {
-            (0, utils_1.setSVGPadding)(this.editor.getDocument(), (0, utils_1.parsePadding)(this.options.padding));
+        if (this.options.viewBox) {
+            this.editor.getDocument().setAttribute('viewBox', this.options.viewBox);
+        }
+        else {
+            this.editor.getDocument().removeAttribute('viewBox');
+            if (this.options.padding !== undefined) {
+                (0, utils_1.setSVGPadding)(this.editor.getDocument(), (0, utils_1.parsePadding)(this.options.padding));
+            }
         }
         this.emitter.emit('options:change', {
             type: 'options:change',

package/lib/templates/built-in.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const chart_pie_1 = require("./chart-pie");
 const compare_quadrant_1 = require("./compare-quadrant");
 const hierarchy_mindmap_1 = require("./hierarchy-mindmap");
 const hierarchy_structure_1 = require("./hierarchy-structure");
@@ -9,7 +10,7 @@ const registry_1 = require("./registry");
 const relation_dagre_flow_1 = require("./relation-dagre-flow");
 const sequence_stairs_1 = require("./sequence-stairs");
 const word_cloud_1 = require("./word-cloud");
-const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'compare-hierarchy-left-right-circle-node-pill-badge': {
+const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'compare-hierarchy-left-right-circle-node-pill-badge': {
         design: {
             structure: {
                 type: 'compare-hierarchy-left-right',
@@ -625,82 +626,7 @@ const BUILT_IN_TEMPLATES = Object.assign(Object.assign(Object.assign(Object.assi
                 },
             ],
         },
-    }, 'chart-pie-plain-text': {
-        design: {
-            title: 'default',
-            structure: {
-                type: 'chart-pie',
-            },
-            items: [
-                {
-                    type: 'plain-text',
-                },
-            ],
-        },
-    }, 'chart-pie-compact-card': {
-        design: {
-            title: 'default',
-            structure: {
-                type: 'chart-pie',
-            },
-            items: [
-                {
-                    type: 'compact-card',
-                },
-            ],
-        },
-    }, 'chart-pie-pill-badge': {
-        design: {
-            title: 'default',
-            structure: {
-                type: 'chart-pie',
-            },
-            items: [
-                {
-                    type: 'pill-badge',
-                },
-            ],
-        },
-    }, 'chart-pie-donut-plain-text': {
-        design: {
-            title: 'default',
-            structure: {
-                type: 'chart-pie',
-                innerRadius: 90,
-            },
-            items: [
-                {
-                    type: 'plain-text',
-                },
-            ],
-        },
-    }, 'chart-pie-donut-compact-card': {
-        design: {
-            title: 'default',
-            structure: {
-                type: 'chart-pie',
-                innerRadius: 90,
-            },
-            items: [
-                {
-                    type: 'compact-card',
-                },
-            ],
-        },
-    }, 'chart-pie-donut-pill-badge': {
-        design: {
-            title: 'default',
-            structure: {
-                type: 'chart-pie',
-                innerRadius: 90,
-            },
-            items: [
-                {
-                    type: 'pill-badge',
-                },
-            ],
-        },
-    } }, compare_quadrant_1.compareQuadrantTemplates), hierarchy_tree_1.hierarchyTreeTemplates), hierarchy_mindmap_1.hierarchyMindmapTemplates), sequence_stairs_1.sequenceStairsTemplates), word_cloud_1.wordCloudTemplate), list_zigzag_1.listZigzagTemplates), relation_dagre_flow_1.relationDagreFlowTemplates), hierarchy_structure_1.hierarchyStructureTemplates);
+    } }, chart_pie_1.chartPieTemplates), compare_quadrant_1.compareQuadrantTemplates), hierarchy_tree_1.hierarchyTreeTemplates), hierarchy_mindmap_1.hierarchyMindmapTemplates), sequence_stairs_1.sequenceStairsTemplates), word_cloud_1.wordCloudTemplate), list_zigzag_1.listZigzagTemplates), relation_dagre_flow_1.relationDagreFlowTemplates), hierarchy_structure_1.hierarchyStructureTemplates);
 Object.entries(BUILT_IN_TEMPLATES).forEach(([name, options]) => {
     (0, registry_1.registerTemplate)(name, options);
 });

package/lib/templates/chart-pie.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateOptions } from './types';
+export declare const chartPieTemplates: Record<string, TemplateOptions>;