vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/animation/useKeyedTransition.mjs

@@ -0,0 +1,355 @@
+import { isServerRender, shouldSkipEntrance, useChartGesture, useChartInView, useChartSize, useSeriesMotion } from "../model/runtime.mjs";
+import { useReducedMotion } from "./useReducedMotion.mjs";
+import { cascadeTiming, motionTokens } from "./motion.mjs";
+import { getCurrentInstance, nextTick, onMounted, onScopeDispose, shallowRef, watch } from "vue";
+import { animate } from "motion-v";
+import { isEqual } from "es-toolkit";
+//#region src/animation/useKeyedTransition.ts
+var clamp01 = (t) => t < 0 ? 0 : t > 1 ? 1 : t;
+/**
+* Keyed enter/update/exit transitions on one clock.
+*
+* - Items match by `key`, so inserting at the front slides the others instead of morphing
+*   every item into its neighbour, and DOM nodes keyed by `key` stay mounted.
+* - A change during a transition starts from what is on screen now.
+* - Exiting items stay in `items` (phase 'exit') until they have left.
+* - Reduced motion, `isActive() === false`, server render and hydration show the target
+*   at once without start/end callbacks.
+*/
+function useKeyedTransition(target, options) {
+	const items = shallowRef([]);
+	const isAnimating = shallowRef(false);
+	const reducedMotion = useReducedMotion();
+	const component = getCurrentInstance();
+	let mounted = component == null;
+	let skipEntrance = shouldSkipEntrance();
+	const onServer = isServerRender();
+	let hasEntered = false;
+	const chartSize = useChartSize();
+	const gesture = useChartGesture();
+	const inView = useChartInView();
+	let lastSize;
+	let resizing = false;
+	let entering = false;
+	let entranceClock;
+	let turns = /* @__PURE__ */ new Map();
+	let lastTarget;
+	if (!options.followsSeries) useSeriesMotion().register(options.isActive);
+	let controls;
+	function stop() {
+		controls?.stop();
+		controls = void 0;
+	}
+	function settle(plan) {
+		items.value = plan.filter((p) => p.phase !== "exit").map(({ key, to }) => ({
+			key,
+			value: to,
+			phase: "update"
+		}));
+	}
+	function keyed(next) {
+		const seen = /* @__PURE__ */ new Map();
+		return next.map((value, i) => {
+			const base = options.key(value, i);
+			const count = seen.get(base) ?? 0;
+			seen.set(base, count + 1);
+			return {
+				key: count === 0 ? base : `${String(base)}\u0000${count}`,
+				value
+			};
+		});
+	}
+	function snap(next) {
+		lastTarget = next;
+		stop();
+		entering = false;
+		items.value = keyed(next).map(({ key, value }) => ({
+			key,
+			value,
+			phase: "update"
+		}));
+		isAnimating.value = false;
+	}
+	function plan(next, reveal) {
+		const drawn = items.value;
+		const onScreen = new Map(drawn.map((item) => [item.key, item.value]));
+		const nextItems = keyed(next);
+		const nextKeys = new Set(nextItems.map((item) => item.key));
+		const nearest = (length, qualifies) => {
+			const before = Array.from({ length });
+			const after = Array.from({ length });
+			for (let i = 0, last = -1; i < length; i++) {
+				before[i] = last;
+				if (qualifies(i)) last = i;
+			}
+			for (let i = length - 1, last = -1; i >= 0; i--) {
+				after[i] = last;
+				if (qualifies(i)) last = i;
+			}
+			return {
+				before,
+				after
+			};
+		};
+		const onScreenAround = onScreen.size ? nearest(nextItems.length, (i) => onScreen.has(nextItems[i].key)) : void 0;
+		const moveInNext = (i) => i < 0 ? void 0 : {
+			from: onScreen.get(nextItems[i].key),
+			to: nextItems[i].value
+		};
+		const neighborsInNext = (index) => {
+			if (!onScreenAround) return {};
+			const previousMove = moveInNext(onScreenAround.before[index]);
+			const nextMove = moveInNext(onScreenAround.after[index]);
+			return {
+				previous: previousMove?.from,
+				next: nextMove?.from,
+				previousMove,
+				nextMove
+			};
+		};
+		const staying = nextItems.map(({ key, value: to }, index) => {
+			const from = onScreen.get(key);
+			return from === void 0 ? {
+				key,
+				from: reveal?.from?.(to) ?? options.enterFrom(to, neighborsInNext(index)),
+				to,
+				phase: "enter"
+			} : {
+				key,
+				from,
+				to,
+				phase: "update"
+			};
+		});
+		const targetOf = new Map(staying.map((item) => [item.key, item.to]));
+		const stayingAround = nearest(drawn.length, (i) => nextKeys.has(drawn[i].key));
+		const moveInDrawn = (i) => i < 0 ? void 0 : {
+			from: drawn[i].value,
+			to: targetOf.get(drawn[i].key)
+		};
+		const neighborsInDrawn = (index) => {
+			const previousMove = moveInDrawn(stayingAround.before[index]);
+			const nextMove = moveInDrawn(stayingAround.after[index]);
+			return {
+				previous: previousMove?.to,
+				next: nextMove?.to,
+				previousMove,
+				nextMove
+			};
+		};
+		const exitsBefore = /* @__PURE__ */ new Map();
+		const trailingExits = [];
+		drawn.forEach((item, index) => {
+			if (nextKeys.has(item.key)) return;
+			const exit = {
+				key: item.key,
+				from: item.value,
+				to: options.exitTo(item.value, neighborsInDrawn(index)),
+				phase: "exit"
+			};
+			const anchor = stayingAround.after[index];
+			if (anchor >= 0) {
+				const group = exitsBefore.get(drawn[anchor].key) ?? [];
+				group.push(exit);
+				exitsBefore.set(drawn[anchor].key, group);
+			} else trailingExits.push(exit);
+		});
+		return [...staying.flatMap((item) => [...exitsBefore.get(item.key) ?? [], item]), ...trailingExits];
+	}
+	function transitionState() {
+		return {
+			next: target(),
+			active: options.isActive(),
+			reduced: reducedMotion.value,
+			size: chartSize(),
+			dragging: gesture.value,
+			seen: inView.value
+		};
+	}
+	function update(state) {
+		if (!state) return;
+		const { next, active, reduced, size, dragging, seen } = state;
+		const nextItems = next ?? [];
+		if (!mounted && !onServer && active) {
+			items.value = plan(nextItems, options.reveal?.()).map(({ key, from }) => ({
+				key,
+				value: from,
+				phase: "enter",
+				progress: 0
+			}));
+			return;
+		}
+		let skip = skipEntrance && !hasEntered;
+		if (skip && (options.entranceAfterHydration ?? !options.followsSeries) && active && nextItems.length) {
+			items.value = [];
+			const start = plan(nextItems, options.reveal?.()).map(({ key, from }) => ({
+				key,
+				value: from,
+				phase: "enter",
+				progress: 0
+			}));
+			if (onServer) {
+				items.value = start;
+				skipEntrance = false;
+				return;
+			}
+			if (reduced === "reduce") {
+				items.value = start;
+				skipEntrance = false;
+				nextTick(() => snap(nextItems));
+				hasEntered = true;
+				return;
+			}
+			if (size === null || !seen) {
+				items.value = start;
+				return;
+			}
+			items.value = [];
+			skip = false;
+		}
+		if ((size === null || !seen) && !skip && !hasEntered && !onServer && active && reduced !== "reduce") {
+			items.value = [];
+			return;
+		}
+		const resized = size != null && size !== lastSize && (lastSize !== void 0 || hasEntered && !entering);
+		lastSize = size ?? lastSize;
+		skipEntrance = false;
+		if (resized) {
+			resizing = true;
+			if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => {
+				resizing = false;
+			});
+			else resizing = false;
+		}
+		const followsResize = resizing && !resized;
+		let keepDrawing = false;
+		if ((resized || followsResize) && entering && options.keepEntrance && active && reduced !== "reduce" && !dragging) {
+			const current = new Map(items.value.map((item) => [item.key, item.value]));
+			items.value = keyed(nextItems).map(({ key, value }) => {
+				const shown = current.get(key);
+				return {
+					key,
+					phase: "update",
+					value: shown === void 0 ? value : options.keepEntrance(shown, value)
+				};
+			});
+			keepDrawing = true;
+		}
+		if (skip || !active || reduced === "reduce" || (resized || followsResize) && !keepDrawing || dragging) {
+			hasEntered = true;
+			snap(nextItems);
+			return;
+		}
+		const first = !hasEntered;
+		if (!first && isEqual(nextItems, lastTarget)) return;
+		lastTarget = nextItems;
+		const reveal = first ? options.reveal?.() : void 0;
+		const steps = plan(nextItems, reveal);
+		if (!first && steps.every((step) => step.phase === "update" && isEqual(step.from, step.to))) {
+			stop();
+			entering = false;
+			isAnimating.value = false;
+			settle(steps);
+			return;
+		}
+		const cascade = first ? reveal?.order && !options.entrance : entering && turns.size > 0;
+		if (first) turns = new Map(cascade ? steps.map((step) => [step.key, clamp01(reveal.order(step.to)) * cascadeTiming.spread * cascadeTiming.duration]) : []);
+		const elapsedBefore = entering ? entranceClock?.elapsed ?? 0 : 0;
+		let entrance = first ? options.entrance?.() ?? (cascade ? cascadeTiming : motionTokens.enter) : void 0;
+		if (first) entranceClock = {
+			elapsed: 0,
+			timing: entrance
+		};
+		else if (entering && entranceClock) {
+			const rest = continueTiming(entranceClock.timing, elapsedBefore);
+			if (rest.duration >= motionTokens.update.duration) entrance = rest;
+		}
+		const timing = (phase) => entrance ?? motionTokens[options.connected ? "update" : phase];
+		hasEntered = true;
+		stop();
+		entering ||= first;
+		isAnimating.value = true;
+		options.onStart?.();
+		const render = (progressOf) => {
+			items.value = steps.map((step) => {
+				const { key, from, to, phase } = step;
+				const t = progressOf(step);
+				return {
+					key,
+					phase,
+					progress: clamp01(t),
+					value: t === 1 ? to : options.interpolate(from, to, t)
+				};
+			});
+		};
+		const finish = () => {
+			controls = void 0;
+			entering = false;
+			settle(steps);
+			isAnimating.value = false;
+			options.onEnd?.();
+		};
+		const userTransition = options.transition?.();
+		if (userTransition) {
+			render(() => 0);
+			controls = animate(0, 1, {
+				...userTransition,
+				onUpdate: (t) => render(() => t),
+				onComplete: finish
+			});
+			return;
+		}
+		const total = Math.max(...steps.map((s) => timing(s.phase).duration), 0);
+		const cascadeItem = cascadeTiming.duration * (1 - cascadeTiming.spread);
+		render(() => 0);
+		controls = animate(0, total, {
+			duration: total,
+			ease: "linear",
+			onUpdate: (elapsed) => {
+				if (entering && entranceClock) entranceClock.elapsed = elapsedBefore + elapsed;
+				render((step) => {
+					const delay = entrance && cascade ? turns.get(step.key) : void 0;
+					if (delay !== void 0) {
+						const start = cascadeTiming.ease(clamp01((elapsedBefore - delay) / cascadeItem));
+						const current = cascadeTiming.ease(clamp01((elapsedBefore + elapsed - delay) / cascadeItem));
+						return start >= 1 ? 1 : (current - start) / (1 - start);
+					}
+					const { duration, ease } = timing(step.phase);
+					return ease(clamp01(elapsed / duration));
+				});
+			},
+			onComplete: finish
+		});
+	}
+	watch(transitionState, update, { immediate: true });
+	if (component) onMounted(() => {
+		mounted = true;
+		if (options.isActive() && reducedMotion.value !== "reduce") {
+			items.value = [];
+			update(transitionState());
+		}
+	});
+	onScopeDispose(stop);
+	return {
+		items,
+		isAnimating
+	};
+}
+/**
+* The rest of a timing already `elapsed` seconds in, as a timing of its own: eased progress
+* from where it is now to 1 that follows the original curve exactly.
+*/
+function continueTiming({ duration, ease }, elapsed) {
+	const done = Math.min(1, Math.max(0, elapsed / duration));
+	const from = ease(done);
+	if (done >= 1 || from >= 1) return {
+		duration: .001,
+		ease: () => 1
+	};
+	return {
+		duration: duration * (1 - done),
+		ease: (t) => (ease(done + t * (1 - done)) - from) / (1 - from)
+	};
+}
+//#endregion
+export { useKeyedTransition };

package/dist/es/animation/usePointTransition.mjs

@@ -0,0 +1,119 @@
+import { useAnimationCallbacks } from "./useAnimationCallbacks.mjs";
+import { useKeyedTransition } from "./useKeyedTransition.mjs";
+import { computed, shallowRef, watch } from "vue";
+//#region src/animation/usePointTransition.ts
+function stable(read) {
+	let last = [];
+	return computed(() => {
+		const next = read();
+		if (next.length === last.length && next.every((value, i) => value === last[i])) return last;
+		return last = next;
+	});
+}
+/** Top and baseline share identity and a clock, including the initial clip sweep. */
+function usePointTransition(target, options) {
+	let appeared = false;
+	const callbacks = useAnimationCallbacks(options.onStart, options.onEnd);
+	const mixPoint = (from, to, t) => {
+		if (from.x === to.x && from.y === to.y) return to;
+		return {
+			...to,
+			x: from.x == null || to.x == null ? to.x : from.x + (to.x - from.x) * t,
+			y: from.y == null || to.y == null ? to.y : from.y + (to.y - from.y) * t
+		};
+	};
+	const folded = shallowRef([]);
+	const { items, isAnimating } = useKeyedTransition(() => {
+		if (options.hidden?.()) return folded.value;
+		const baseline = options.baseline?.();
+		return target()?.map((point, index) => ({
+			point,
+			index,
+			reveal: 1,
+			baseline: typeof baseline === "number" ? baseline : baseline?.[index]
+		}));
+	}, {
+		key: ({ point, index }) => options.key(point, index),
+		interpolate: (from, to, t) => from.point === to.point && from.baseline === to.baseline ? from.reveal === to.reveal ? to : {
+			...to,
+			reveal: from.reveal + (to.reveal - from.reveal) * t
+		} : {
+			...to,
+			point: mixPoint(from.point, to.point, t),
+			baseline: typeof from.baseline === "number" && typeof to.baseline === "number" ? from.baseline + (to.baseline - from.baseline) * t : typeof from.baseline === "object" && typeof to.baseline === "object" ? mixPoint(from.baseline, to.baseline, t) : to.baseline,
+			reveal: from.reveal + (to.reveal - from.reveal) * t
+		},
+		enterFrom: (to, { previous, next }) => {
+			const neighbor = previous ?? next;
+			if (!appeared || !neighbor) return {
+				...to,
+				reveal: 0
+			};
+			return {
+				...to,
+				point: {
+					...to.point,
+					x: neighbor.point.x,
+					y: neighbor.point.y
+				},
+				baseline: neighbor.baseline
+			};
+		},
+		exitTo: (from, { previous, next }) => {
+			const neighbor = previous ?? next;
+			if (!neighbor) return {
+				...from,
+				reveal: 0
+			};
+			return {
+				...from,
+				point: {
+					...from.point,
+					x: neighbor.point.x,
+					y: neighbor.point.y
+				},
+				baseline: neighbor.baseline
+			};
+		},
+		isActive: options.isActive,
+		connected: true,
+		transition: options.transition,
+		entrance: options.entrance,
+		keepEntrance: (current, target) => ({
+			...target,
+			reveal: current.reveal
+		}),
+		entranceAfterHydration: options.entranceAfterHydration,
+		onStart: () => {
+			if (target()?.length || appeared) callbacks.onStart();
+			if (target()?.length) appeared = true;
+		},
+		onEnd: () => {
+			if (appeared) callbacks.onEnd();
+		}
+	});
+	watch(() => options.hidden?.() ?? false, (hidden) => {
+		if (!hidden) return;
+		const axis = options.valueAxis?.() ?? "y";
+		folded.value = items.value.filter((item) => item.phase !== "exit" && item.value.baseline != null).map(({ value }) => ({
+			...value,
+			point: {
+				...value.point,
+				[axis]: typeof value.baseline === "number" ? value.baseline : value.baseline[axis]
+			}
+		}));
+	}, { flush: "sync" });
+	const baselinePoints = stable(() => items.value.map((item) => item.value.baseline).filter((point) => point != null && typeof point === "object"));
+	return {
+		items,
+		points: stable(() => items.value.map((item) => item.value.point)),
+		baseline: computed(() => {
+			const first = items.value[0]?.value.baseline;
+			return typeof first === "number" ? first : baselinePoints.value;
+		}),
+		reveal: computed(() => items.value.reduce((min, item) => Math.min(min, item.value.reveal), 1)),
+		isAnimating
+	};
+}
+//#endregion
+export { usePointTransition };

package/dist/es/animation/useReducedMotion.mjs

@@ -0,0 +1,12 @@
+import { computed, getCurrentInstance } from "vue";
+import { useMounted, usePreferredReducedMotion } from "@vueuse/core";
+//#region src/animation/useReducedMotion.ts
+/** The server and the first hydration render cannot know the browser's preference. */
+function useReducedMotion() {
+	const outsideComponent = getCurrentInstance() == null;
+	const mounted = useMounted();
+	const preference = usePreferredReducedMotion();
+	return computed(() => outsideComponent || mounted.value ? preference.value : "no-preference");
+}
+//#endregion
+export { useReducedMotion };

package/dist/es/animation/useTickMotion.mjs

@@ -0,0 +1,62 @@
+import { useSeriesMotion } from "../model/runtime.mjs";
+import { useKeyedTransition } from "./useKeyedTransition.mjs";
+import { onMounted } from "vue";
+//#region src/animation/useTickMotion.ts
+/**
+* Axis ticks and grid lines follow their values when the scale changes, on the same clock as the
+* series: a tick that stays slides to its new place, a new tick fades in from where the old scale
+* would have put its value, and a leaving tick fades out towards its place on the new scale. So
+* labels never disagree with the bars and lines they describe while those move.
+*
+* The first render, server render, hydration and reduced motion show the ticks at once.
+*/
+function useTickMotion(ticks, scale, range) {
+	const seriesMotion = useSeriesMotion();
+	let ready = false;
+	onMounted(() => {
+		ready = true;
+	});
+	let shownScale;
+	const clampToRange = (coordinate) => {
+		const [a, b] = range();
+		return Math.min(Math.max(a, b), Math.max(Math.min(a, b), coordinate));
+	};
+	const placeOn = (tick, on, reference) => {
+		const at = on?.(tick.value);
+		const ref = reference?.(tick.value);
+		if (typeof at !== "number" || !Number.isFinite(at) || typeof ref !== "number" || !Number.isFinite(ref)) return {
+			...tick,
+			opacity: 0
+		};
+		const shift = at - ref;
+		return {
+			...tick,
+			coordinate: clampToRange(tick.coordinate + shift),
+			...typeof tick.tickCoord === "number" ? { tickCoord: clampToRange(tick.tickCoord + shift) } : {},
+			opacity: 0
+		};
+	};
+	const mix = (a, b, t) => a + (b - a) * t;
+	return useKeyedTransition(() => ticks().map((tick) => ({
+		...tick,
+		opacity: 1
+	})), {
+		key: (tick, index) => tick.value == null ? index : String(tick.value),
+		interpolate: (from, to, t) => ({
+			...to,
+			coordinate: mix(from.coordinate, to.coordinate, t),
+			...typeof from.tickCoord === "number" && typeof to.tickCoord === "number" ? { tickCoord: mix(from.tickCoord, to.tickCoord, t) } : {},
+			opacity: Math.min(1, Math.max(0, mix(from.opacity, to.opacity, t)))
+		}),
+		enterFrom: (to) => placeOn(to, shownScale, scale()),
+		exitTo: (from) => placeOn(from, scale(), shownScale),
+		connected: true,
+		followsSeries: true,
+		isActive: () => ready && seriesMotion.anyActive(),
+		onStart: () => {
+			shownScale = scale();
+		}
+	});
+}
+//#endregion
+export { useTickMotion };

package/dist/es/cartesian/ActivePoints.mjs

@@ -0,0 +1,65 @@
+import { useTooltipEntry } from "../model/tooltip.mjs";
+import { useChart } from "../model/chart.mjs";
+import { Layer } from "../container/Layer.mjs";
+import { Dot } from "../shape/Dot.mjs";
+import { ActiveDot } from "../animation/ActiveDot.mjs";
+import { createVNode, defineComponent } from "vue";
+//#region src/cartesian/ActivePoints.tsx
+/** The highlighted point of Area, Line and Radar at the active tooltip index. */
+var ActivePoints = /* @__PURE__ */ defineComponent({
+	name: "ActivePoints",
+	props: {
+		isAnimationActive: {
+			type: Boolean,
+			default: true
+		},
+		points: {
+			type: Array,
+			required: true
+		},
+		/** The series main colour (see core/color mainColor). */
+		mainColor: {
+			type: String,
+			default: void 0
+		},
+		itemDataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			required: true
+		},
+		activeDot: {
+			type: [Object, Boolean],
+			required: true
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const entry = useTooltipEntry();
+		if (!entry) throw new Error("vccs: ActivePoints requires its series tooltip entry.");
+		const activeIndex = useChart().tooltip.activeIndexFor(entry);
+		return () => {
+			const index = activeIndex.value;
+			const point = index == null ? void 0 : props.points[index];
+			if (index == null || point == null || props.activeDot === false) return null;
+			const dotProps = {
+				index,
+				"dataKey": props.itemDataKey,
+				"cx": point.x,
+				"cy": point.y,
+				"r": 4,
+				"fill": props.mainColor,
+				"stroke-width": 2,
+				"stroke": "var(--v-charts-background, #fff)",
+				"payload": point.payload,
+				"value": point.value,
+				...typeof props.activeDot === "object" ? props.activeDot : {}
+			};
+			return createVNode(Layer, { "class": "v-charts-active-dot" }, { default: () => [createVNode(ActiveDot, { "isAnimationActive": props.isAnimationActive }, { default: () => [slots.activeDot ? slots.activeDot(dotProps) : createVNode(Dot, dotProps, null)] })] });
+		};
+	}
+});
+//#endregion
+export { ActivePoints };

package/dist/es/cartesian/GraphicalItemClipPath.mjs

@@ -1,4 +1,5 @@
-import { useOffset } from "../context/chartLayoutContext.mjs";
+import { useChartPresentation } from "../model/presentation.mjs";
+import { isClipDot } from "../core/coordinates.mjs";
 import { useNeedsClip } from "./useNeedsClip.mjs";
 import { createVNode, defineComponent } from "vue";
 //#region src/cartesian/GraphicalItemClipPath.tsx
@@ -19,19 +20,59 @@ var GraphicalItemClipPath = /* @__PURE__ */ defineComponent({
 		}
 	},
 	setup(props) {
-		const offset = useOffset();
-		const { needClipX, needClipY, needClip } = useNeedsClip(props.xAxisId, props.yAxisId);
+		const offset = useChartPresentation().offset;
+		const { needClipX, needClipY, needClip } = useNeedsClip(() => props.xAxisId, () => props.yAxisId);
 		return () => {
-			if (!needClip) return null;
+			if (!needClip.value) return null;
+			const clipX = needClipX.value;
+			const clipY = needClipY.value;
 			const { left, top, width, height } = offset.value;
 			return createVNode("clipPath", { "id": `clipPath-${props.clipPathId}` }, [createVNode("rect", {
-				"x": needClipX ? left : left - width / 2,
-				"y": needClipY ? top : top - height / 2,
-				"width": needClipX ? width : width * 2,
-				"height": needClipY ? height : height * 2
+				"x": clipX ? left : left - width / 2,
+				"y": clipY ? top : top - height / 2,
+				"width": clipX ? width : width * 2,
+				"height": clipY ? height : height * 2
+			}, null)]);
+		};
+	}
+});
+/**
+* Dots with `clipDot: false` may overflow the plot by their own size; Line and Area clip them
+* with this rect instead of the series clip (Recharts rule: dot size = 2 * r + strokeWidth).
+*/
+var DotsClipPath = /* @__PURE__ */ defineComponent({
+	name: "DotsClipPath",
+	props: {
+		clipPathId: {
+			type: String,
+			required: true
+		},
+		dot: {
+			type: [
+				Boolean,
+				Object,
+				Function
+			],
+			default: void 0
+		}
+	},
+	setup(props) {
+		const offset = useChartPresentation().offset;
+		return () => {
+			if (isClipDot(props.dot)) return null;
+			const dot = typeof props.dot === "object" && props.dot !== null ? props.dot : {};
+			const r = "r" in dot ? Number(dot.r) : 3;
+			const strokeWidth = "strokeWidth" in dot ? Number(dot.strokeWidth) : 2;
+			const size = r * 2 + strokeWidth;
+			const { left, top, width, height } = offset.value;
+			return createVNode("clipPath", { "id": `clipPath-dots-${props.clipPathId}` }, [createVNode("rect", {
+				"x": left - size / 2,
+				"y": top - size / 2,
+				"width": width + size,
+				"height": height + size
 			}, null)]);
 		};
 	}
 });
 //#endregion
-export { GraphicalItemClipPath };
+export { DotsClipPath, GraphicalItemClipPath };