vccs 0.1.0 → 0.3.0

package/dist/es/components/legend/Legend.mjs

@@ -1,82 +1,93 @@
-import { LegendVueProps as e } from "./type.mjs";
-import { useLegend as t } from "./hooks/useLegend.mjs";
-import { useLegendContent as n } from "./hooks/useLegendContent.mjs";
-import r from "../../container/Surface.mjs";
-import { LegendSymbol as i } from "./LegendSymbol.mjs";
-import { Teleport as a, createVNode as o, defineComponent as s, isVNode as c, watchEffect as l } from "vue";
+import Surface from "../../container/Surface.mjs";
+import { LegendVueProps } from "./type.mjs";
+import { useLegend } from "./hooks/useLegend.mjs";
+import { useLegendContent } from "./hooks/useLegendContent.mjs";
+import { LegendSymbol } from "./LegendSymbol.mjs";
+import { Teleport, createVNode, defineComponent, isVNode, watchEffect } from "vue";
 //#region src/components/legend/Legend.tsx
-function u(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !c(e);
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var d = /* @__PURE__ */ s({
+var Legend_default = /* @__PURE__ */ defineComponent({
 	name: "Legend",
-	props: e,
-	setup(e, { slots: s }) {
-		let { legendRef: c, processedPayload: d, outerStyle: f, legendPortal: p, syncSettings: m, syncSize: h } = t(e), { getItemStyle: g, getSvgStyle: _, formatValue: v, handleClick: y, handleMouseEnter: b, handleMouseLeave: x } = n(e);
-		l(() => {
-			m(), h();
+	props: LegendVueProps,
+	setup(props, { slots }) {
+		const { legendRef, processedPayload, outerStyle, legendPortal, syncSettings, syncSize } = useLegend(props);
+		const { getItemStyle, getSvgStyle, formatValue, handleClick, handleMouseEnter, handleMouseLeave } = useLegendContent(props);
+		watchEffect(() => {
+			syncSettings();
+			syncSize();
 		});
-		let S = () => {
-			if (!d.value || d.value.length === 0) return null;
-			let { layout: t = "horizontal", align: n = "center", iconSize: a = 14 } = e;
-			return o("ul", {
-				class: "v-charts-default-legend",
-				style: {
-					padding: 0,
-					margin: 0,
-					textAlign: t === "horizontal" ? n : "left"
-				}
-			}, [d.value.map((n, s) => n.type === "none" ? null : o("li", {
-				key: `legend-item-${s}`,
-				class: "v-charts-legend-item",
-				style: g(t),
-				tabindex: 0,
-				role: "button",
-				"aria-label": `Toggle ${v(n)} series`,
-				onClick: () => y(n, s),
-				onKeydown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), y(n, s));
-				},
-				onMouseenter: () => b(n, s),
-				onMouseleave: () => x(n, s)
-			}, [o(r, {
-				width: a,
-				height: a,
-				viewBox: {
-					x: 0,
-					y: 0,
-					width: 32,
-					height: 32
-				},
-				style: _(),
-				"aria-label": `${v(n)} legend icon`
-			}, { default: () => [o(i, {
-				type: e.iconType ?? n.type,
-				color: n.inactive ? "#a3a3a3" : n.color,
-				size: a,
-				data: n
-			}, null)] }), o("span", {
-				class: "v-charts-legend-item-text",
-				style: { color: n.inactive ? "#a3a3a3" : n.color }
-			}, [v(n)])]))]);
-		}, C = () => {
-			if (!d.value || d.value.length === 0) return null;
-			let t = {
-				...e,
-				payload: d.value
+		const renderDefaultContent = () => {
+			if (!processedPayload.value || processedPayload.value.length === 0) return null;
+			const { layout = "horizontal", align = "center", iconSize = 14 } = props;
+			const finalStyle = {
+				padding: 0,
+				margin: 0,
+				textAlign: layout === "horizontal" ? align : "left"
 			};
-			return s.content ? s.content(t) : S();
+			return createVNode("ul", {
+				"class": "v-charts-default-legend",
+				"style": finalStyle
+			}, [processedPayload.value.map((entry, index) => {
+				if (entry.type === "none") return null;
+				return createVNode("li", {
+					"key": `legend-item-${index}`,
+					"class": "v-charts-legend-item",
+					"style": getItemStyle(layout),
+					"tabindex": 0,
+					"role": "button",
+					"aria-label": `Toggle ${formatValue(entry)} series`,
+					"onClick": () => handleClick(entry, index),
+					"onKeydown": (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							handleClick(entry, index);
+						}
+					},
+					"onMouseenter": () => handleMouseEnter(entry, index),
+					"onMouseleave": () => handleMouseLeave(entry, index)
+				}, [createVNode(Surface, {
+					"width": iconSize,
+					"height": iconSize,
+					"viewBox": {
+						x: 0,
+						y: 0,
+						width: 32,
+						height: 32
+					},
+					"style": getSvgStyle(),
+					"aria-label": `${formatValue(entry)} legend icon`
+				}, { default: () => [createVNode(LegendSymbol, {
+					"type": props.iconType ?? entry.type,
+					"color": entry.inactive ? "#a3a3a3" : entry.color,
+					"size": iconSize,
+					"data": entry
+				}, null)] }), createVNode("span", {
+					"class": "v-charts-legend-item-text",
+					"style": { color: entry.inactive ? "#a3a3a3" : entry.color }
+				}, [formatValue(entry)])]);
+			})]);
+		};
+		const renderContent = () => {
+			if (!processedPayload.value || processedPayload.value.length === 0) return null;
+			const contentProps = {
+				...props,
+				payload: processedPayload.value
+			};
+			if (slots.content) return slots.content(contentProps);
+			return renderDefaultContent();
 		};
 		return () => {
-			if (p.value == null) return null;
-			let e = o("div", {
-				class: "v-charts-legend-wrapper",
-				style: f.value,
-				ref: c
-			}, [C()]);
-			return o("foreignObject", null, [o(a, { to: p.value }, u(e) ? e : { default: () => [e] })]);
+			if (legendPortal.value == null) return null;
+			const legendElement = createVNode("div", {
+				"class": "v-charts-legend-wrapper",
+				"style": outerStyle.value,
+				"ref": legendRef
+			}, [renderContent()]);
+			return createVNode("foreignObject", null, [createVNode(Teleport, { "to": legendPortal.value }, _isSlot(legendElement) ? legendElement : { default: () => [legendElement] })]);
 		};
 	}
 });
 //#endregion
-export { d as default };
+export { Legend_default as default };

package/dist/es/components/legend/LegendSymbol.mjs

@@ -1,6 +1,6 @@
-import { Symbols as e } from "../../shape/Symbols.mjs";
-import { createVNode as t, defineComponent as n } from "vue";
-var r = /* @__PURE__ */ n({
+import { Symbols } from "../../shape/Symbols.mjs";
+import { createVNode, defineComponent } from "vue";
+var LegendSymbol = /* @__PURE__ */ defineComponent({
 	name: "LegendSymbol",
 	props: {
 		type: String,
@@ -11,50 +11,52 @@ var r = /* @__PURE__ */ n({
 		},
 		data: { type: Object }
 	},
-	setup(n) {
+	setup(props) {
 		return () => {
-			let { type: r, color: i, data: a } = n;
-			if (r === "none") return null;
-			let o = 32 / 3, s = 32 / 6;
-			switch (r) {
-				case "line": return t("path", {
+			const { type, color, data } = props;
+			if (type === "none") return null;
+			const halfSize = 32 / 2;
+			const thirdSize = 32 / 3;
+			const sixthSize = 32 / 6;
+			switch (type) {
+				case "line": return createVNode("path", {
 					"stroke-width": 4,
-					fill: "none",
-					stroke: i,
-					d: `M0,16h${o}
-            A${s},${s},0,1,1,${2 * o},16
-            H32M${2 * o},16
-            A${s},${s},0,1,1,${o},16`,
-					class: "v-charts-legend-icon"
+					"fill": "none",
+					"stroke": color,
+					"d": `M0,${halfSize}h${thirdSize}
+            A${sixthSize},${sixthSize},0,1,1,${2 * thirdSize},${halfSize}
+            H32M${2 * thirdSize},${halfSize}
+            A${sixthSize},${sixthSize},0,1,1,${thirdSize},${halfSize}`,
+					"class": "v-charts-legend-icon"
 				}, null);
-				case "plainline": return t("line", {
+				case "plainline": return createVNode("line", {
 					"stroke-width": 4,
-					fill: "none",
-					stroke: i,
-					"stroke-dasharray": a?.payload?.strokeDasharray,
-					x1: 0,
-					y1: 16,
-					x2: 32,
-					y2: 16,
-					class: "v-charts-legend-icon"
+					"fill": "none",
+					"stroke": color,
+					"stroke-dasharray": data?.payload?.strokeDasharray,
+					"x1": 0,
+					"y1": halfSize,
+					"x2": 32,
+					"y2": halfSize,
+					"class": "v-charts-legend-icon"
 				}, null);
-				case "rect": return t("path", {
-					stroke: "none",
-					fill: i,
-					d: `M0,${32 / 8}h32v${96 / 4}h-32z`,
-					class: "v-charts-legend-icon"
+				case "rect": return createVNode("path", {
+					"stroke": "none",
+					"fill": color,
+					"d": `M0,${32 / 8}h32v${96 / 4}h-32z`,
+					"class": "v-charts-legend-icon"
 				}, null);
-				default: return t(e, {
-					fill: i,
-					cx: 16,
-					cy: 16,
-					size: 32,
-					sizeType: "diameter",
-					type: r
+				default: return createVNode(Symbols, {
+					"fill": color,
+					"cx": halfSize,
+					"cy": halfSize,
+					"size": 32,
+					"sizeType": "diameter",
+					"type": type
 				}, null);
 			}
 		};
 	}
 });
 //#endregion
-export { r as LegendSymbol };
+export { LegendSymbol };

package/dist/es/components/legend/hooks/useLegend.mjs

@@ -1,52 +1,77 @@
-import { selectLegendPayload as e } from "../../../state/selectors/legendSelectors.mjs";
-import { useAppDispatch as t, useAppSelector as n } from "../../../state/hooks.mjs";
-import { useChartHeight as r, useChartWidth as i, useMargin as a } from "../../../context/chartLayoutContext.mjs";
-import { setLegendSettings as o, setLegendSize as s } from "../../../state/legendSlice.mjs";
-import { useLegendPortal as c } from "../../../chart/LegendPortalContext.mjs";
-import { getUniqPayload as l } from "../../../utils/payload/getUniqPayload.mjs";
-import { defaultUniqBy as u, getDefaultPosition as d, getWidthOrHeight as f } from "../utils.mjs";
-import { computed as p, ref as m } from "vue";
-import { sortBy as h } from "es-toolkit/compat";
-import { useElementBounding as g } from "@vueuse/core";
+import { selectLegendPayload } from "../../../state/selectors/legendSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../../state/hooks.mjs";
+import { useChartHeight, useChartWidth, useMargin } from "../../../context/chartLayoutContext.mjs";
+import { setLegendSettings, setLegendSize } from "../../../state/legendSlice.mjs";
+import { useLegendPortal } from "../../../chart/LegendPortalContext.mjs";
+import { getUniqPayload } from "../../../utils/payload/getUniqPayload.mjs";
+import { defaultUniqBy, getDefaultPosition, getWidthOrHeight } from "../utils.mjs";
+import { computed, ref } from "vue";
+import { sortBy } from "es-toolkit/compat";
+import { useElementBounding } from "@vueuse/core";
 //#region src/components/legend/hooks/useLegend.ts
-function _(_) {
-	let v = t(), y = n(e), b = c(), x = a(), S = i(), C = r(), w = m(), { width: T, height: E } = g(w), D = p(() => S.value - (x.value.left || 0) - (x.value.right || 0)), O = p(() => f(_.layout, _.height, _.width, D.value)), k = p(() => ({
-		width: T.value,
-		height: E.value
+function useLegend(props) {
+	const dispatch = useAppDispatch();
+	const contextPayload = useAppSelector(selectLegendPayload);
+	const legendPortalFromContext = useLegendPortal();
+	const margin = useMargin();
+	const chartWidth = useChartWidth();
+	const chartHeight = useChartHeight();
+	const legendRef = ref();
+	const { width: boundingWidth, height: boundingHeight } = useElementBounding(legendRef);
+	const maxWidth = computed(() => chartWidth.value - (margin.value.left || 0) - (margin.value.right || 0));
+	const widthOrHeight = computed(() => getWidthOrHeight(props.layout, props.height, props.width, maxWidth.value));
+	const boundingBox = computed(() => ({
+		width: boundingWidth.value,
+		height: boundingHeight.value
 	}));
-	return {
-		legendRef: w,
-		boundingBox: k,
-		widthOrHeight: O,
-		processedPayload: p(() => {
-			if (!y.value || y.value.length === 0) return [];
-			let e = l(y.value, _.payloadUniqBy, u);
-			return _.itemSorter && (typeof _.itemSorter == "string" || typeof _.itemSorter == "function") && (e = h(e, _.itemSorter)), Array.from(e);
-		}),
-		outerStyle: p(() => {
-			if (_.portal) return _.wrapperStyle || {};
-			let e = {
-				position: "absolute",
-				width: O.value?.width ? `${O.value.width}px` : _.width ? `${_.width}px` : "auto",
-				height: O.value?.height ? `${O.value.height}px` : _.height ? `${_.height}px` : "auto"
-			}, t = d(_.wrapperStyle, _, x.value, S.value, C.value, k.value);
-			return Object.assign({}, e, t, _.wrapperStyle || {});
-		}),
-		legendPortal: p(() => _.portal ?? b?.value),
-		syncSettings: () => {
-			v(o({
-				layout: _.layout,
-				align: _.align,
-				verticalAlign: _.verticalAlign
-			}));
-		},
-		syncSize: () => {
-			v(s({
-				width: k.value.width,
-				height: k.value.height
-			}));
+	const processedPayload = computed(() => {
+		if (!contextPayload.value || contextPayload.value.length === 0) return [];
+		let finalPayload = getUniqPayload(contextPayload.value, props.payloadUniqBy, defaultUniqBy);
+		if (props.itemSorter) {
+			if (typeof props.itemSorter === "string") finalPayload = sortBy(finalPayload, props.itemSorter);
+			else if (typeof props.itemSorter === "function") finalPayload = sortBy(finalPayload, props.itemSorter);
 		}
+		return Array.from(finalPayload);
+	});
+	const outerStyle = computed(() => {
+		const userStyle = props.wrapperStyle ? { ...props.wrapperStyle } : {};
+		if (props.portal) return userStyle;
+		const baseStyle = {
+			position: "absolute",
+			width: widthOrHeight.value?.width ? `${widthOrHeight.value.width}px` : props.width ? `${props.width}px` : "auto",
+			height: widthOrHeight.value?.height ? `${widthOrHeight.value.height}px` : props.height ? `${props.height}px` : "auto"
+		};
+		const positionStyle = getDefaultPosition(userStyle, props, margin.value, chartWidth.value, chartHeight.value, boundingBox.value);
+		return {
+			...baseStyle,
+			...positionStyle,
+			...userStyle
+		};
+	});
+	const legendPortal = computed(() => props.portal ?? legendPortalFromContext?.value);
+	const syncSettings = () => {
+		dispatch(setLegendSettings({
+			layout: props.layout,
+			align: props.align,
+			verticalAlign: props.verticalAlign
+		}));
+	};
+	const syncSize = () => {
+		dispatch(setLegendSize({
+			width: boundingBox.value.width,
+			height: boundingBox.value.height
+		}));
+	};
+	return {
+		legendRef,
+		boundingBox,
+		widthOrHeight,
+		processedPayload,
+		outerStyle,
+		legendPortal,
+		syncSettings,
+		syncSize
 	};
 }
 //#endregion
-export { _ as useLegend };
+export { useLegend };

package/dist/es/components/legend/hooks/useLegendContent.mjs

@@ -1,47 +1,68 @@
 //#region src/components/legend/hooks/useLegendContent.ts
-function e(e) {
-	return {
-		getWrapperStyle: (t = "horizontal", n = "center", r = "bottom") => ({
+function useLegendContent(props) {
+	const getWrapperStyle = (layout = "horizontal", align = "center", verticalAlign = "bottom") => {
+		return {
 			display: "flex",
-			flexDirection: t === "horizontal" ? "row" : "column",
-			justifyContent: n === "left" ? "flex-start" : n === "right" ? "flex-end" : "center",
-			alignItems: r === "top" ? "flex-start" : r === "bottom" ? "flex-end" : "center",
+			flexDirection: layout === "horizontal" ? "row" : "column",
+			justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
+			alignItems: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
 			flexWrap: "wrap",
 			gap: "8px",
-			...e.wrapperStyle || {}
-		}),
-		getContentStyle: (t = "horizontal") => ({
+			...props.wrapperStyle || {}
+		};
+	};
+	const getContentStyle = (layout = "horizontal") => {
+		return {
 			display: "flex",
-			flexDirection: t === "horizontal" ? "row" : "column",
-			gap: t === "horizontal" ? "16px" : "8px",
-			...e.contentStyle || {}
-		}),
-		getItemStyle: (e = "horizontal") => ({
-			display: e === "horizontal" ? "inline-block" : "block",
+			flexDirection: layout === "horizontal" ? "row" : "column",
+			gap: layout === "horizontal" ? "16px" : "8px",
+			...props.contentStyle || {}
+		};
+	};
+	const getItemStyle = (layout = "horizontal") => {
+		return {
+			display: layout === "horizontal" ? "inline-block" : "block",
 			marginRight: "10px"
-		}),
-		getViewBox: () => ({
+		};
+	};
+	const getViewBox = () => {
+		return {
 			x: 0,
 			y: 0,
 			width: 32,
 			height: 32
-		}),
-		getSvgStyle: () => ({
+		};
+	};
+	const getSvgStyle = () => {
+		return {
 			display: "inline-block",
 			verticalAlign: "middle",
 			marginRight: "4px"
-		}),
-		formatValue: (t) => e.formatter ? e.formatter(t.value, t) : t.value,
-		handleClick: (t, n) => {
-			e.onClick?.(t, n);
-		},
-		handleMouseEnter: (t, n) => {
-			e.onMouseEnter?.(t, n);
-		},
-		handleMouseLeave: (t, n) => {
-			e.onMouseLeave?.(t, n);
-		}
+		};
+	};
+	const formatValue = (entry) => {
+		return props.formatter ? props.formatter(entry.value, entry) : entry.value;
+	};
+	const handleClick = (entry, index) => {
+		props.onClick?.(entry, index);
+	};
+	const handleMouseEnter = (entry, index) => {
+		props.onMouseEnter?.(entry, index);
+	};
+	const handleMouseLeave = (entry, index) => {
+		props.onMouseLeave?.(entry, index);
+	};
+	return {
+		getWrapperStyle,
+		getContentStyle,
+		getItemStyle,
+		getViewBox,
+		getSvgStyle,
+		formatValue,
+		handleClick,
+		handleMouseEnter,
+		handleMouseLeave
 	};
 }
 //#endregion
-export { e as useLegendContent };
+export { useLegendContent };

package/dist/es/components/legend/type.mjs

@@ -1,5 +1,5 @@
 //#region src/components/legend/type.ts
-var e = {
+var LegendVueProps = {
 	layout: {
 		type: String,
 		default: "horizontal"
@@ -38,4 +38,4 @@ var e = {
 	onBBoxUpdate: Function
 };
 //#endregion
-export { e as LegendVueProps };
+export { LegendVueProps };

package/dist/es/components/legend/utils.mjs

@@ -1,17 +1,25 @@
-import { isNumber as e } from "../../utils/validate.mjs";
+import { isNumber } from "../../utils/validate.mjs";
 //#region src/components/legend/utils.ts
-function t(e, t, n, r, i, a) {
-	let { layout: o, align: s, verticalAlign: c } = t, l = {}, u = {};
-	return (!e || (e.left === void 0 || e.left === null) && (e.right === void 0 || e.right === null)) && (l = s === "center" && o === "vertical" ? { left: `${((r || 0) - a.width) / 2}px` } : s === "right" ? { right: `${n?.right || 0}px` } : { left: `${n?.left || 0}px` }), (!e || (e.top === void 0 || e.top === null) && (e.bottom === void 0 || e.bottom === null)) && (u = c === "middle" ? { top: `${((i || 0) - a.height) / 2}px` } : c === "bottom" ? { bottom: `${n?.bottom || 0}px` } : { top: `${n?.top || 0}px` }), {
-		...l,
-		...u
+function getDefaultPosition(style, props, margin, chartWidth, chartHeight, box) {
+	const { layout, align, verticalAlign } = props;
+	let hPos = {};
+	let vPos = {};
+	if (!style || (style.left === void 0 || style.left === null) && (style.right === void 0 || style.right === null)) if (align === "center" && layout === "vertical") hPos = { left: `${((chartWidth || 0) - box.width) / 2}px` };
+	else hPos = align === "right" ? { right: `${margin?.right || 0}px` } : { left: `${margin?.left || 0}px` };
+	if (!style || (style.top === void 0 || style.top === null) && (style.bottom === void 0 || style.bottom === null)) if (verticalAlign === "middle") vPos = { top: `${((chartHeight || 0) - box.height) / 2}px` };
+	else vPos = verticalAlign === "bottom" ? { bottom: `${margin?.bottom || 0}px` } : { top: `${margin?.top || 0}px` };
+	return {
+		...hPos,
+		...vPos
 	};
 }
-function n(t, n, r, i) {
-	return t === "vertical" && e(n) ? { height: n } : t === "horizontal" ? { width: r || i } : null;
+function getWidthOrHeight(layout, height, width, maxWidth) {
+	if (layout === "vertical" && isNumber(height)) return { height };
+	if (layout === "horizontal") return { width: width || maxWidth };
+	return null;
 }
-function r(e) {
-	return e.value;
+function defaultUniqBy(entry) {
+	return entry.value;
 }
 //#endregion
-export { r as defaultUniqBy, t as getDefaultPosition, n as getWidthOrHeight };
+export { defaultUniqBy, getDefaultPosition, getWidthOrHeight };

package/dist/es/components/utils.mjs

@@ -1,31 +1,44 @@
-import { polarToCartesian as e } from "../utils/polar.mjs";
+import { polarToCartesian } from "../utils/polar.mjs";
 //#region src/components/utils.ts
-function t(t) {
-	let { cx: n, cy: r, radius: i, startAngle: a, endAngle: o } = t;
+function getRadialCursorPoints(activeCoordinate) {
+	const { cx, cy, radius, startAngle, endAngle } = activeCoordinate;
 	return {
-		points: [e(n, r, i, a), e(n, r, i, o)],
-		cx: n,
-		cy: r,
-		radius: i,
-		startAngle: a,
-		endAngle: o
+		points: [polarToCartesian(cx, cy, radius, startAngle), polarToCartesian(cx, cy, radius, endAngle)],
+		cx,
+		cy,
+		radius,
+		startAngle,
+		endAngle
 	};
 }
-function n(n, r, i) {
-	let a, o, s, c;
-	if (n === "horizontal") a = r.x, s = a, o = i.top, c = i.top + i.height;
-	else if (n === "vertical") o = r.y, c = o, a = i.left, s = i.left + i.width;
-	else if (r.cx != null && r.cy != null) if (n === "centric") {
-		let { cx: t, cy: n, innerRadius: i, outerRadius: l, angle: u } = r, d = e(t, n, i, u), f = e(t, n, l, u);
-		a = d.x, o = d.y, s = f.x, c = f.y;
-	} else return t(r);
+function getCursorPoints(layout, activeCoordinate, offset) {
+	let x1, y1, x2, y2;
+	if (layout === "horizontal") {
+		x1 = activeCoordinate.x;
+		x2 = x1;
+		y1 = offset.top;
+		y2 = offset.top + offset.height;
+	} else if (layout === "vertical") {
+		y1 = activeCoordinate.y;
+		y2 = y1;
+		x1 = offset.left;
+		x2 = offset.left + offset.width;
+	} else if (activeCoordinate.cx != null && activeCoordinate.cy != null) if (layout === "centric") {
+		const { cx, cy, innerRadius, outerRadius, angle } = activeCoordinate;
+		const innerPoint = polarToCartesian(cx, cy, innerRadius, angle);
+		const outerPoint = polarToCartesian(cx, cy, outerRadius, angle);
+		x1 = innerPoint.x;
+		y1 = innerPoint.y;
+		x2 = outerPoint.x;
+		y2 = outerPoint.y;
+	} else return getRadialCursorPoints(activeCoordinate);
 	return [{
-		x: a,
-		y: o
+		x: x1,
+		y: y1
 	}, {
-		x: s,
-		y: c
+		x: x2,
+		y: y2
 	}];
 }
 //#endregion
-export { n as getCursorPoints };
+export { getCursorPoints };

package/dist/es/container/ClipPath.mjs

@@ -1,25 +1,25 @@
-import { useOffset as e } from "../context/chartLayoutContext.mjs";
-import { createVNode as t, defineComponent as n } from "vue";
+import { useOffset } from "../context/chartLayoutContext.mjs";
+import { createVNode, defineComponent } from "vue";
 //#region src/container/ClipPath.tsx
-var r = /* @__PURE__ */ n({
+var ClipPath_default = /* @__PURE__ */ defineComponent({
 	name: "ClipPath",
 	props: { clipPathId: {
 		type: String,
-		required: !0
+		required: true
 	} },
-	setup(n) {
-		let r = e();
+	setup(props) {
+		const offset = useOffset();
 		return () => {
-			if (!r.value) return null;
-			let { left: e, top: i, height: a, width: o } = r.value;
-			return t("defs", null, [t("clipPath", { id: n.clipPathId }, [t("rect", {
-				x: e,
-				y: i,
-				height: a,
-				width: o
+			if (!offset.value) return null;
+			const { left, top, height, width } = offset.value;
+			return createVNode("defs", null, [createVNode("clipPath", { "id": props.clipPathId }, [createVNode("rect", {
+				"x": left,
+				"y": top,
+				"height": height,
+				"width": width
 			}, null)])]);
 		};
 	}
 });
 //#endregion
-export { r as default };
+export { ClipPath_default as default };