vccs 0.1.0 → 0.2.0

package/dist/es/cartesian/area/ClipRect.mjs

@@ -1,104 +1,125 @@
-import { isNumber as e, isWellBehavedNumber as t } from "../../utils/validate.mjs";
-import { useAreaContext as n } from "./hooks/useArea.mjs";
-import { Animate as r } from "../../animation/Animate.mjs";
-import { createVNode as i, defineComponent as a, ref as o, watch as s } from "vue";
+import { isNumber, isWellBehavedNumber } from "../../utils/validate.mjs";
+import { useAreaContext } from "./hooks/useArea.mjs";
+import { Animate } from "../../animation/Animate.mjs";
+import { createVNode, defineComponent, ref, watch } from "vue";
 //#region src/cartesian/area/ClipRect.tsx
-var c = /* @__PURE__ */ a({
+var HorizontalRect = /* @__PURE__ */ defineComponent({
 	name: "HorizontalRect",
 	props: {
 		alpha: {
 			type: Number,
-			required: !0
+			required: true
 		},
 		points: {
 			type: Array,
-			required: !0
+			required: true
 		},
 		baseLine: {
 			type: [Number, Array],
-			required: !0
+			required: true
 		},
 		strokeWidth: {
 			type: Number,
-			required: !0
+			required: true
 		}
 	},
-	setup(t) {
-		let { points: n } = t;
+	setup(props) {
+		const { points } = props;
 		return () => {
-			let { alpha: r, baseLine: a, strokeWidth: o } = t, s = n[0].x, c = n[n.length - 1].x, l = r * Math.abs(s - c), u = Math.max(...n.map((e) => e.y || 0));
-			return e(a) ? u = Math.max(a, u) : a && Array.isArray(a) && a.length && (u = Math.max(...a.map((e) => e.y || 0), u)), e(u) ? i("rect", {
-				x: s < c ? s : s - l,
-				y: 0,
-				width: l,
-				height: Math.floor(u + (o ? parseInt(`${o}`, 10) : 1))
-			}, null) : null;
+			const { alpha, baseLine, strokeWidth } = props;
+			const startX = points[0].x;
+			const endX = points[points.length - 1].x;
+			const width = alpha * Math.abs(startX - endX);
+			let maxY = Math.max(...points.map((entry) => entry.y || 0));
+			if (isNumber(baseLine)) maxY = Math.max(baseLine, maxY);
+			else if (baseLine && Array.isArray(baseLine) && baseLine.length) maxY = Math.max(...baseLine.map((entry) => entry.y || 0), maxY);
+			if (isNumber(maxY)) return createVNode("rect", {
+				"x": startX < endX ? startX : startX - width,
+				"y": 0,
+				"width": width,
+				"height": Math.floor(maxY + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1))
+			}, null);
+			return null;
 		};
 	}
-}), l = /* @__PURE__ */ a({
+});
+var VerticalRect = /* @__PURE__ */ defineComponent({
 	name: "VerticalRect",
 	props: {
 		alpha: {
 			type: Number,
-			required: !0
+			required: true
 		},
 		points: {
 			type: Array,
-			required: !0
+			required: true
 		},
 		baseLine: {
 			type: [Number, Array],
-			required: !0
+			required: true
 		},
 		strokeWidth: {
 			type: Number,
-			required: !0
+			required: true
 		}
 	},
-	setup(n) {
-		let { points: r } = n;
+	setup(props) {
+		const { points } = props;
 		return () => {
-			let { alpha: a, baseLine: o, strokeWidth: s } = n, c = r[0].y, l = r[r.length - 1].y;
-			if (!t(c) || !t(l)) return null;
-			let u = a * Math.abs(c - l), d = Math.max(...r.map((e) => e.x || 0));
-			return e(o) ? d = Math.max(o, d) : o && Array.isArray(o) && o.length && (d = Math.max(...o.map((e) => e.x || 0), d)), i("rect", {
-				x: 0,
-				y: c < l ? c : c - u,
-				width: d + (s ? parseInt(`${s}`, 10) : 1),
-				height: Math.floor(u)
+			const { alpha, baseLine, strokeWidth } = props;
+			const startY = points[0].y;
+			const endY = points[points.length - 1].y;
+			if (!isWellBehavedNumber(startY) || !isWellBehavedNumber(endY)) return null;
+			const height = alpha * Math.abs(startY - endY);
+			let maxX = Math.max(...points.map((entry) => entry.x || 0));
+			if (isNumber(baseLine)) maxX = Math.max(baseLine, maxX);
+			else if (baseLine && Array.isArray(baseLine) && baseLine.length) maxX = Math.max(...baseLine.map((entry) => entry.x || 0), maxX);
+			return createVNode("rect", {
+				"x": 0,
+				"y": startY < endY ? startY : startY - height,
+				"width": maxX + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1),
+				"height": Math.floor(height)
 			}, null);
 		};
 	}
-}), u = /* @__PURE__ */ a({
+});
+var ClipRect = /* @__PURE__ */ defineComponent({
 	name: "ClipRect",
 	setup() {
-		let { points: e, props: t, areaData: a, layout: u, isClipRectAnimating: d } = n(), f = o(!1);
-		s(e, (e) => {
-			e && e.length > 0 && !f.value && (f.value = !0);
-		}, { immediate: !0 });
-		let p = () => {
-			f.value = !1, d.value = !1, t.onAnimationEnd?.();
+		const { points, props, areaData, layout, isClipRectAnimating } = useAreaContext();
+		const isAnimationActive = ref(false);
+		watch(points, (newPoints) => {
+			if (newPoints && newPoints.length > 0 && !isAnimationActive.value) isAnimationActive.value = true;
+		}, { immediate: true });
+		const handleAnimationEnd = () => {
+			isAnimationActive.value = false;
+			isClipRectAnimating.value = false;
+			props.onAnimationEnd?.();
 		};
 		return () => {
-			let n = a.value?.baseLine;
-			return !e.value || e.value.length === 0 ? null : i(r, {
-				isActive: f.value,
-				transition: t.transition,
-				onAnimationStart: t.onAnimationStart,
-				onAnimationEnd: p
-			}, { default: (r) => u.value === "horizontal" ? i(c, {
-				alpha: r,
-				points: e.value,
-				baseLine: n,
-				strokeWidth: t.strokeWidth || 2
-			}, null) : i(l, {
-				alpha: r,
-				points: e.value,
-				baseLine: n,
-				strokeWidth: t.strokeWidth || 2
-			}, null) });
+			const baseLine = areaData.value?.baseLine;
+			if (!points.value || points.value.length === 0) return null;
+			return createVNode(Animate, {
+				"isActive": isAnimationActive.value,
+				"transition": props.transition,
+				"onAnimationStart": props.onAnimationStart,
+				"onAnimationEnd": handleAnimationEnd
+			}, { default: (t) => {
+				if (layout.value === "horizontal") return createVNode(HorizontalRect, {
+					"alpha": t,
+					"points": points.value,
+					"baseLine": baseLine,
+					"strokeWidth": props.strokeWidth || 2
+				}, null);
+				return createVNode(VerticalRect, {
+					"alpha": t,
+					"points": points.value,
+					"baseLine": baseLine,
+					"strokeWidth": props.strokeWidth || 2
+				}, null);
+			} });
 		};
 	}
 });
 //#endregion
-export { u as ClipRect };
+export { ClipRect };

package/dist/es/cartesian/area/RenderArea.mjs

@@ -1,151 +1,185 @@
-import { isNan as e, isNullish as t, isNumber as n } from "../../utils/validate.mjs";
-import { interpolate as r } from "../../utils/data-utils.mjs";
-import { Curve as i } from "../../shape/Curve.mjs";
-import { isClipDot as a } from "../../utils/chart.mjs";
-import { useOffset as o } from "../../context/chartLayoutContext.mjs";
-import { useAreaContext as s } from "./hooks/useArea.mjs";
-import { Layer as c } from "../../container/Layer.mjs";
-import { Dot as l } from "../../shape/Dot.mjs";
-import { LabelList as u } from "../../components/label/LabelList.mjs";
-import { Fragment as d, createVNode as f, defineComponent as p, mergeProps as m, ref as h, watch as g } from "vue";
-import { animate as _ } from "motion-v";
+import { isNan, isNullish, isNumber } from "../../utils/validate.mjs";
+import { interpolate } from "../../utils/data-utils.mjs";
+import { Curve } from "../../shape/Curve.mjs";
+import { isClipDot } from "../../utils/chart.mjs";
+import { useOffset } from "../../context/chartLayoutContext.mjs";
+import { useAreaContext } from "./hooks/useArea.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Dot } from "../../shape/Dot.mjs";
+import { LabelList } from "../../components/label/LabelList.mjs";
+import { Fragment, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
+import { animate } from "motion-v";
 //#region src/cartesian/area/RenderArea.tsx
-var v = /* @__PURE__ */ p({
+var Dots = /* @__PURE__ */ defineComponent({
 	name: "Dots",
 	props: { points: {
 		type: Array,
 		default: () => []
 	} },
-	setup(e) {
-		let { clipPathId: t, props: n, attrs: r, dotSlot: i } = s();
+	setup(_props) {
+		const { clipPathId, props, attrs, dotSlot } = useAreaContext();
 		return () => {
-			let { points: o } = e;
-			if (!b(o, n.dot)) return null;
-			let s = a(n.dot), u = {
-				fill: n.fill,
-				"fill-opacity": n.fillOpacity,
-				"stroke-width": n.strokeWidth,
-				stroke: n.stroke
+			const { points } = _props;
+			if (!shouldRenderDots(points, props.dot)) return null;
+			const clipDot = isClipDot(props.dot);
+			const dotsProps = {
+				"fill": props.fill,
+				"fill-opacity": props.fillOpacity,
+				"stroke-width": props.strokeWidth,
+				"stroke": props.stroke
 			};
-			return f(c, {
-				class: "v-charts-area-dots",
-				"clip-path": n.needClip ? `url(#clipPath-${s ? "" : "dots-"}${t.value})` : void 0
-			}, { default: () => [o?.map((e) => {
-				let t = {
-					...u,
-					...r,
+			return createVNode(Layer, {
+				"class": "v-charts-area-dots",
+				"clip-path": props.needClip ? `url(#clipPath-${clipDot ? "" : "dots-"}${clipPathId.value})` : void 0
+			}, { default: () => [points?.map((point) => {
+				const dotProps = {
+					...dotsProps,
+					...attrs,
 					r: 3,
-					cx: e.x,
-					cy: e.y,
+					cx: point.x,
+					cy: point.y,
 					class: "v-charts-area-dot",
-					clipDot: s
+					clipDot
 				};
-				return i ? i(t) : f(l, t, null);
+				if (dotSlot) return dotSlot(dotProps);
+				return createVNode(Dot, dotProps, null);
 			})] });
 		};
 	}
-}), y = /* @__PURE__ */ p({
+});
+var StaticArea = /* @__PURE__ */ defineComponent({
 	name: "StaticArea",
 	setup() {
-		let { points: a, clipPathId: l, layout: p, attrs: y, areaData: b, props: x, isAnimating: S, isClipRectAnimating: C } = s(), w = o(), T = h(a.value || []), E = h(b.value?.baseLine || []), D = T.value || [], O = b.value?.baseLine || [], k = !1;
-		return g(a, (i, a, o) => {
-			if (C.value) {
-				T.value = i, E.value = b.value?.baseLine || [];
+		const { points, clipPathId, layout, attrs, areaData, props, isAnimating, isClipRectAnimating } = useAreaContext();
+		const offset = useOffset();
+		const currentPoints = ref(points.value || []);
+		const currentBaseLine = ref(areaData.value?.baseLine || []);
+		let prevPoints = currentPoints.value || [];
+		let prevBaseLine = areaData.value?.baseLine || [];
+		let animationStopped = false;
+		watch(points, (newPoints, _, onCleanup) => {
+			if (isClipRectAnimating.value) {
+				currentPoints.value = newPoints;
+				currentBaseLine.value = areaData.value?.baseLine || [];
 				return;
 			}
-			if (i && i.length > 0) {
-				k = !1, S.value = !0;
-				let a = _(0, 1, {
-					...x.transition,
-					onUpdate(a) {
-						if (!k && D.length) {
-							let o = D.length / i.length, s = a === 1 ? i : i.map((e, t) => {
-								let n = Math.floor(t * o);
-								if (D[n]) {
-									let t = D[n];
+			if (newPoints && newPoints.length > 0) {
+				animationStopped = false;
+				isAnimating.value = true;
+				const animation = animate(0, 1, {
+					...props.transition,
+					onUpdate(t) {
+						if (animationStopped) return;
+						if (prevPoints.length) {
+							const prevPointsDiffFactor = prevPoints.length / newPoints.length;
+							const stepPoints = t === 1 ? newPoints : newPoints.map((entry, index) => {
+								const prevPointIndex = Math.floor(index * prevPointsDiffFactor);
+								if (prevPoints[prevPointIndex]) {
+									const prev = prevPoints[prevPointIndex];
 									return {
-										...e,
-										x: r(t.x, e.x, a),
-										y: r(t.y, e.y, a)
+										...entry,
+										x: interpolate(prev.x, entry.x, t),
+										y: interpolate(prev.y, entry.y, t)
 									};
 								}
-								return e;
-							}), c;
-							c = n(b.value?.baseLine) ? r(O, b.value?.baseLine, a) : t(b.value?.baseLine) || e(b.value?.baseLine) ? r(O, 0, a) : b?.value.baseLine.map((e, t) => {
-								let n = Math.floor(t * o);
-								if (Array.isArray(O) && O[n]) {
-									let t = O[n];
+								return entry;
+							});
+							let stepBaseLine;
+							if (isNumber(areaData.value?.baseLine)) stepBaseLine = interpolate(prevBaseLine, areaData.value?.baseLine, t);
+							else if (isNullish(areaData.value?.baseLine) || isNan(areaData.value?.baseLine)) stepBaseLine = interpolate(prevBaseLine, 0, t);
+							else stepBaseLine = areaData?.value.baseLine.map((entry, index) => {
+								const prevPointIndex = Math.floor(index * prevPointsDiffFactor);
+								if (Array.isArray(prevBaseLine) && prevBaseLine[prevPointIndex]) {
+									const prev = prevBaseLine[prevPointIndex];
 									return {
-										...e,
-										x: r(t.x, e.x, a),
-										y: r(t.y, e.y, a)
+										...entry,
+										x: interpolate(prev.x, entry.x, t),
+										y: interpolate(prev.y, entry.y, t)
 									};
 								}
-								return e;
-							}), T.value = s, E.value = c;
+								return entry;
+							});
+							currentPoints.value = stepPoints;
+							currentBaseLine.value = stepBaseLine;
 						}
 					},
 					onPlay() {
-						x.onAnimationStart?.();
+						props.onAnimationStart?.();
 					},
 					onComplete() {
-						S.value = !1, x.onAnimationEnd?.();
+						isAnimating.value = false;
+						props.onAnimationEnd?.();
 					}
 				});
-				o(() => {
-					k = !0, a.stop(), D = T.value, O = E.value;
+				onCleanup(() => {
+					animationStopped = true;
+					animation.stop();
+					prevPoints = currentPoints.value;
+					prevBaseLine = currentBaseLine.value;
 				});
-			} else S.value = !1, T.value = i || [], E.value = b.value?.baseLine || [], D = T.value, O = E.value;
-		}, { immediate: !0 }), () => {
-			let e = {
-				...y,
-				fill: x.fill,
-				"fill-opacity": x.fillOpacity,
-				height: w.value.height,
-				width: w.value.width,
-				"stroke-width": x.strokeWidth
-			}, t = b.value?.isRange, n = !S.value && x.label, r = typeof x.label == "object" ? x.label : {};
-			return f(d, null, [
-				T.value && T.value.length > 1 && f(c, { "clip-path": x.needClip ? `url(#clipPath-${l.value})` : void 0 }, { default: () => [
-					f(i, m(e, {
-						points: T.value,
-						connectNulls: x.connectNulls,
-						type: x.type,
-						layout: p.value,
-						baseLine: E.value,
-						stroke: "none",
-						class: "v-charts-area-area"
+			} else {
+				isAnimating.value = false;
+				currentPoints.value = newPoints || [];
+				currentBaseLine.value = areaData.value?.baseLine || [];
+				prevPoints = currentPoints.value;
+				prevBaseLine = currentBaseLine.value;
+			}
+		}, { immediate: true });
+		return () => {
+			const curveAttrs = {
+				...attrs,
+				"fill": props.fill,
+				"fill-opacity": props.fillOpacity,
+				"height": offset.value.height,
+				"width": offset.value.width,
+				"stroke-width": props.strokeWidth
+			};
+			const isRange = areaData.value?.isRange;
+			const showLabels = !isAnimating.value && props.label;
+			const labelProps = typeof props.label === "object" ? props.label : {};
+			return createVNode(Fragment, null, [
+				currentPoints.value && currentPoints.value.length > 1 && createVNode(Layer, { "clip-path": props.needClip ? `url(#clipPath-${clipPathId.value})` : void 0 }, { default: () => [
+					createVNode(Curve, mergeProps(curveAttrs, {
+						"points": currentPoints.value,
+						"connectNulls": props.connectNulls,
+						"type": props.type,
+						"layout": layout.value,
+						"baseLine": currentBaseLine.value,
+						"stroke": "none",
+						"class": "v-charts-area-area"
 					}), null),
-					y.stroke !== "none" && f(i, m(e, {
-						layout: p.value,
-						type: x.type,
-						connectNulls: x.connectNulls,
-						fill: "none",
-						points: T.value,
-						stroke: x.stroke,
-						class: "v-charts-area-curve"
+					attrs.stroke !== "none" && createVNode(Curve, mergeProps(curveAttrs, {
+						"layout": layout.value,
+						"type": props.type,
+						"connectNulls": props.connectNulls,
+						"fill": "none",
+						"points": currentPoints.value,
+						"stroke": props.stroke,
+						"class": "v-charts-area-curve"
 					}), null),
-					y.stroke !== "none" && t && f(i, m(e, {
-						class: "v-charts-area-curve",
-						layout: p.value,
-						type: x.type,
-						connectNulls: x.connectNulls,
-						fill: "none",
-						points: E.value,
-						stroke: x.stroke
+					attrs.stroke !== "none" && isRange && createVNode(Curve, mergeProps(curveAttrs, {
+						"class": "v-charts-area-curve",
+						"layout": layout.value,
+						"type": props.type,
+						"connectNulls": props.connectNulls,
+						"fill": "none",
+						"points": currentBaseLine.value,
+						"stroke": props.stroke
 					}), null)
 				] }),
-				f(v, { points: T.value }, null),
-				n && f(u, m(r, {
-					data: b.value?.points ?? [],
-					dataKey: x.dataKey
+				createVNode(Dots, { "points": currentPoints.value }, null),
+				showLabels && createVNode(LabelList, mergeProps(labelProps, {
+					"data": areaData.value?.points ?? [],
+					"dataKey": props.dataKey
 				}), null)
 			]);
 		};
 	}
 });
-function b(e, t) {
-	return e == null || !e.length ? !1 : t ? !0 : e.length === 1;
+function shouldRenderDots(points, dot) {
+	if (points == null || !points.length) return false;
+	if (dot) return true;
+	return points.length === 1;
 }
 //#endregion
-export { y as StaticArea };
+export { StaticArea };

package/dist/es/cartesian/area/hooks/useArea.mjs

@@ -1,57 +1,81 @@
-import { uniqueId as e } from "../../../utils/data-utils.mjs";
-import { useIsPanorama as t } from "../../../context/PanoramaContextProvider.mjs";
-import { isClipDot as n } from "../../../utils/chart.mjs";
-import { useAppSelector as r } from "../../../state/hooks.mjs";
-import { useChartLayout as i } from "../../../context/chartLayoutContext.mjs";
-import { useChartName as a } from "../../../state/selectors/selectors.mjs";
-import { selectArea as o } from "../../../state/selectors/areaSelectors.mjs";
-import { filterProps as s } from "../../../utils/VueUtils.mjs";
-import { computed as c, inject as l, provide as u, ref as d, watch as f } from "vue";
+import { uniqueId } from "../../../utils/data-utils.mjs";
+import { useIsPanorama } from "../../../context/PanoramaContextProvider.mjs";
+import { isClipDot } from "../../../utils/chart.mjs";
+import { useAppSelector } from "../../../state/hooks.mjs";
+import { useChartLayout } from "../../../context/chartLayoutContext.mjs";
+import { useChartName } from "../../../state/selectors/selectors.mjs";
+import { selectArea } from "../../../state/selectors/areaSelectors.mjs";
+import { useIsAnimating } from "../../../hooks/useIsAnimating.mjs";
+import { filterProps } from "../../../utils/VueUtils.mjs";
+import { computed, inject, provide, ref, watch } from "vue";
 //#region src/cartesian/area/hooks/useArea.ts
-var p = Symbol("AreaContext");
-function m(e) {
-	u(p, e);
+var AreaContextKey = Symbol("AreaContext");
+function provideAreaContext(context) {
+	provide(AreaContextKey, context);
 }
-function h() {
-	let e = l(p);
-	if (!e) throw Error("useAreaContext must be used within Area component");
-	return e;
+function useAreaContext() {
+	const context = inject(AreaContextKey);
+	if (!context) throw new Error("useAreaContext must be used within Area component");
+	return context;
 }
-function g(l, u = {}, p) {
-	let h = i(), g = a(), _ = e("v-charts-area-"), v = c(() => l.id || _), y = t(), b = d(l.isAnimationActive), x = c(() => (h.value === "horizontal" || h.value === "vertical") && (g.value === "AreaChart" || g.value === "ComposedChart") && !l.hide), S = c(() => ({
-		baseValue: l.baseValue,
-		stackId: l.stackId,
-		connectNulls: l.connectNulls,
-		data: l.data,
-		dataKey: l.dataKey
-	})), C = r((e) => o(e, l.xAxisId, l.yAxisId, y, S.value)), w = d(!0);
-	f(() => l.hide, (e) => {
-		e || (w.value = !0);
+function useArea(props, attrs = {}, dotSlot) {
+	const layout = useChartLayout();
+	const chartName = useChartName();
+	const localId = uniqueId("v-charts-area-");
+	const clipPathId = computed(() => props.id || localId);
+	const isPanorama = useIsPanorama();
+	/**
+	* is Area animating
+	*/
+	const isAnimating = useIsAnimating(() => props.isAnimationActive);
+	/**
+	* render only when layout is horizontal or vertical and chartName is AreaChart or ComposedChart
+	*/
+	const shouldRender = computed(() => (layout.value === "horizontal" || layout.value === "vertical") && (chartName.value === "AreaChart" || chartName.value === "ComposedChart") && !props.hide);
+	const areaSettings = computed(() => ({
+		baseValue: props.baseValue,
+		stackId: props.stackId,
+		connectNulls: props.connectNulls,
+		data: props.data,
+		dataKey: props.dataKey
+	}));
+	const areaData = useAppSelector((state) => selectArea(state, props.xAxisId, props.yAxisId, isPanorama, areaSettings.value));
+	const isClipRectAnimating = ref(true);
+	watch(() => props.hide, (v) => {
+		if (!v) isClipRectAnimating.value = true;
 	});
-	let T = c(() => l.isAnimationActive && C.value?.points?.length && w.value), E = l.dot, D = n(E), { r: O = 3, strokeWidth: k = 2 } = s(E, !1) ?? {
+	const shouldShowAnimation = computed(() => {
+		return props.isAnimationActive && areaData.value?.points?.length && isClipRectAnimating.value;
+	});
+	const dot = props.dot;
+	const clipDot = isClipDot(dot);
+	const { r = 3, strokeWidth = 2 } = filterProps(dot, false) ?? {
 		r: 3,
 		strokeWidth: 2
-	}, A = O * 2 + k, j = {
-		clipPathId: v,
-		layout: h,
-		points: c(() => C.value?.points),
-		props: l,
-		attrs: u,
-		dot: E,
-		clipDot: D,
-		dotSize: A,
-		dotSlot: p,
-		areaData: C,
-		isAnimating: b,
-		isClipRectAnimating: w
 	};
-	return m(j), {
-		shouldRender: x,
-		areaData: C,
-		points: j.points,
-		clipPathId: v,
-		shouldShowAnimation: T
+	const dotSize = r * 2 + strokeWidth;
+	const areaContext = {
+		clipPathId,
+		layout,
+		points: computed(() => areaData.value?.points),
+		props,
+		attrs,
+		dot,
+		clipDot,
+		dotSize,
+		dotSlot,
+		areaData,
+		isAnimating,
+		isClipRectAnimating
+	};
+	provideAreaContext(areaContext);
+	return {
+		shouldRender,
+		areaData,
+		points: areaContext.points,
+		clipPathId,
+		shouldShowAnimation
 	};
 }
 //#endregion
-export { g as useArea, h as useAreaContext };
+export { useArea, useAreaContext };