vue-echarts 8.2.0 → 8.3.0

package/README.md

@@ -122,7 +122,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 ```html
 <script src="https://cdn.jsdelivr.net/npm/echarts@6.1.0"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue@3.5.41"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.2.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.3.0"></script>
 ```
 
 <!-- scripts:end -->
@@ -152,6 +152,8 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/demo).
 
   Pass an empty string to use ECharts' default theme while overriding an injected theme.
 
+  ECharts recreates its model when changing themes. Vue ECharts reapplies the latest automatic option, but uncontrolled interaction state (such as legend selection or data zoom) may reset. Keep state that must survive a rebuild in `option`.
+
   Injection key: `THEME_KEY`.
 
 - `option: object`
@@ -160,9 +162,14 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/demo).
   Temporarily removing the prop pauses automatic updates without letting a later theme change roll the chart back to its initial option.
 
   #### Smart update
-  - If you supply `update-options` (via prop or injection), Vue ECharts forwards it directly to `setOption` and skips the planner. After you remove it, the first smart update rebuilds once to establish a safe structural baseline.
+
+  Reactive updates describe the complete configuration. Vue ECharts preserves existing models where merging can apply that configuration, and rebuilds when necessary to remove stale settings. A rebuild can reset interaction state such as legend selections and data zoom.
+
+  - If you supply `update-options` (via prop or injection), Vue ECharts forwards it directly to `setOption` and skips the planner. After you remove it, the first smart source-option update rebuilds once to establish a safe structural baseline.
+  - A failed option or theme submission invalidates that baseline. The next smart update rebuilds instead of trusting a potentially partial update.
+  - Automatic option, theme, and slot changes are batched after Vue updates. `clear()` takes effect immediately and cancels already queued automatic work; later changes can populate the chart again.
   - Manual `setOption` calls (only available when `manual-update` is `true`) behave like native ECharts, honouring only the per-call override you pass in and are not carried across re-initializations.
-  - Updates containing a graphic element `$action` keep normal merge for `graphic` so the command can target the existing element tree; safe removals of unrelated components still use `replaceMerge`.
+  - Updates containing a graphic element `$action` keep normal merge for `graphic` so the command can target the existing element tree; safe removals of unrelated components still use `replaceMerge`. Changes requiring a full rebuild cannot be applied together with these commands. For complete snapshot semantics, describe the resulting graphic tree without `$action` commands.
   - Otherwise, Vue ECharts analyses the change: component removals, reordering, and deletions inside anonymous components use `replaceMerge` when it can reproduce the requested order; deletions inside ID-matched components, identity ordering that `replaceMerge` cannot reproduce, newly introduced or shrinking non-component arrays, first-time ARIA configuration, and other risky changes fall back to `notMerge: true`.
 
 - `update-options: object`
@@ -542,6 +549,8 @@ Read more at [ECharts `option.graphic` →](https://echarts.apache.org/en/option
 > - Path components accept `auto-batch` to opt into ZRender's Canvas path batching.
 > - The `option` prop may be omitted for graphic-only charts.
 > - `#graphic` overrides `option.graphic`. In `manual-update` mode, call `chartRef.setOption(...)` to apply changes.
+> - Wrapper components and Fragments preserve their rendered graphic order. Compatible property changes update only changed elements, preserving unchanged elements and their running animations. Removing fields, changing types, or changing tree structure rebuilds the graphic component.
+> - Graphic-only changes omit unrelated source options when safe. Explicit `notMerge` or `replaceMerge` targeting other components still submits the full source option.
 
 <details>
 <summary>Usage</summary>

package/README.zh-Hans.md

@@ -122,7 +122,7 @@ import "echarts";
 ```html
 <script src="https://cdn.jsdelivr.net/npm/echarts@6.1.0"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue@3.5.41"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.2.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.3.0"></script>
 ```
 
 <!-- scripts:end -->
@@ -150,6 +150,8 @@ app.component('VChart', VueECharts)
 
   要应用的主题。请参考 `echarts.init` 的 `theme` 参数。[前往 →](https://echarts.apache.org/zh/api.html#echarts.init)
 
+  ECharts 在切换主题时会重建模型。Vue ECharts 会重新应用最新的自动更新配置，但未受控的交互状态（如图例选择、数据缩放）可能重置。需要跨重建保留的状态应维护在 `option` 中。
+
   传入空字符串可以在覆盖注入主题的同时使用 ECharts 默认主题。
 
   Inject 键名：`THEME_KEY`。
@@ -160,9 +162,15 @@ app.component('VChart', VueECharts)
   暂时移除该 prop 会暂停自动更新，之后的主题变更也不会让图表回退到初始 option。
 
   #### 智能更新
-  - 如果提供了 `update-options`（或通过 inject 注入），Vue ECharts 会直接把它传给 `setOption`，不会执行智能计划。移除它之后，首次智能更新会重建一次，以建立可靠的结构基线。
+
+  自动 option、theme 和插槽变化会在 Vue 更新后合并处理。`clear()` 立即生效并取消已经排队的自动更新，后续变化仍可重新填充图表。
+
+  响应式更新描述完整配置。Vue ECharts 会在合并能够正确应用配置时保留现有模型，并在必要时通过重建清除旧配置。重建可能重置图例选择、数据缩放等交互状态。
+
+  - 如果提供了 `update-options`（或通过 inject 注入），Vue ECharts 会直接把它传给 `setOption`，不会执行智能计划。移除它之后，首次源 option 智能更新会重建一次，以建立可靠的结构基线。
+  - option 或主题提交失败会使结构基线失效。下一次智能更新会重建，避免依赖可能只完成了一部分的更新。
   - 手动调用 `setOption`（仅当 `manual-update` 为 `true` 时可用）与原生 ECharts 保持一致，只使用本次调用传入的参数，重新初始化后不会保留这些调用的效果。
-  - 如果更新中有 graphic 元素使用 `$action`，`graphic` 会保留普通合并，让命令能够作用于现有元素树；无关组件的安全删除仍会使用 `replaceMerge`。
+  - 如果更新中有 graphic 元素使用 `$action`，`graphic` 会保留普通合并，让命令能够作用于现有元素树；无关组件的安全删除仍会使用 `replaceMerge`。需要完整重建的变更无法与这些命令一起应用。若需要完整快照语义，请直接描述更新后的 graphic 元素树，不使用 `$action` 命令。
   - 其他情况下，Vue ECharts 会分析差异：组件删除、重排及匿名组件内部的属性删除会在 `replaceMerge` 能还原目标顺序时使用它；已按 ID 匹配的组件内部属性删除、`replaceMerge` 无法还原的身份顺序变化、新增或缩短的非组件数组、首次 ARIA 配置及其他高风险变更会退回 `notMerge: true`。
 
 - `update-options: object`
@@ -540,6 +548,8 @@ import { GGroup, GRect, GText } from "vue-echarts/graphic";
 > - 路径组件支持通过 `auto-batch` 启用 ZRender 的 Canvas 路径批处理。
 > - 仅使用 graphic 插槽时可以省略 `option` prop。
 > - `#graphic` 会覆盖 `option.graphic`。`manual-update` 模式下需调用 `chartRef.setOption(...)` 提交变更。
+> - 包装组件和 Fragment 中的图形遵循实际渲染顺序。可合并的属性变化只更新变更节点，保留未变更元素及其正在运行的动画。删除字段、改变类型或树结构时，会重建 graphic 组件。
+> - 仅 graphic 变化时，会在安全的情况下省略无关的源配置。显式指定 `notMerge` 或针对其他组件的 `replaceMerge` 时，仍会提交完整源配置。
 
 <details>
 <summary>用法示例</summary>

package/dist/graphic.d.ts

@@ -234,7 +234,7 @@ declare const shapeProps: {
 };
 type GraphicShapeProps = ExtractPublicPropTypes<typeof shapeProps>;
 //#endregion
-//#region src/graphic/marker.d.ts
+//#region src/graphic/component-type.d.ts
 type GraphicComponentType = "group" | "rect" | "circle" | "ellipse" | "text" | "line" | "polyline" | "polygon" | "image" | "sector" | "ring" | "arc" | "bezierCurve";
 //#endregion
 //#region src/graphic/component-factory.d.ts
@@ -406,8 +406,7 @@ declare const componentProps: {
 };
 type NestedShapePropKey = "shape" | "shapeTransition";
 type NestedStylePropKey = "style" | "styleTransition";
-type SpecializedPropKey = GraphicCommonStyleKey | GraphicDisplayablePropKey | GraphicPathPropKey | GraphicPathStyleKey | GraphicTextStyleKey | GraphicImageStyleKey | NestedShapePropKey | NestedStylePropKey | keyof typeof shapeProps;
-type SharedPropKey<T extends GraphicComponentType> = Exclude<Exclude<keyof typeof componentProps, SpecializedPropKey> | GraphicCommonPropKey, T extends "text" ? GraphicTextAttachmentPropKey : never>;
+type SharedPropKey<T extends GraphicComponentType> = Exclude<GraphicCommonPropKey, T extends "text" ? GraphicTextAttachmentPropKey : never>;
 type StylePropKey<T extends GraphicComponentType> = T extends "group" ? never : NestedStylePropKey | (T extends "text" ? GraphicTextCommonStyleKey : GraphicCommonStyleKey) | (T extends keyof typeof SHAPE_KEYS_BY_TYPE ? GraphicPathStyleKey : T extends "text" ? GraphicTextStyleKey : T extends "image" ? GraphicImageStyleKey : never);
 type PathPropKey<T extends GraphicComponentType> = T extends keyof typeof SHAPE_KEYS_BY_TYPE ? NestedShapePropKey | GraphicPathPropKey | (typeof SHAPE_KEYS_BY_TYPE)[T][number] : never;
 type GroupPropKey<T extends GraphicComponentType> = T extends "group" ? GraphicGroupPropKey : never;

package/dist/graphic.js

@@ -1,5 +1,5 @@
-import { d as parseOnEvent, f as warn$1, i as hasEventHandler, o as isBrowser, r as createEventInvoker, t as registerRuntime } from "./runtime-BSiQKM1W.js";
-import { Teleport, defineComponent, getCurrentInstance, h, inject, onBeforeMount, onBeforeUnmount, onMounted, onScopeDispose, onUpdated, provide, shallowRef, watch } from "vue";
+import { a as hasEventHandler, c as isIgnorableWatchChange, f as parseOnEvent, i as createEventInvoker, n as registerRuntime, p as warn$1, s as isBrowser, t as planUpdate } from "./update-CWPvYl2M.js";
+import { Teleport, defineComponent, getCurrentInstance, h, inject, onBeforeMount, onBeforeUnmount, onMounted, onScopeDispose, onUpdated, provide, queuePostFlushCb, shallowRef, watch } from "vue";
 import { use } from "echarts/core";
 import { GraphicComponent } from "echarts/components";
 const COMMON_PROP_KEYS = [
@@ -497,7 +497,6 @@ function buildOption(nodes, rootId) {
 	return { graphic: { elements: [{
 		type: "group",
 		id: rootId,
-		$action: "replace",
 		children: childrenOf(null) ?? []
 	}] } };
 }
@@ -508,7 +507,41 @@ function createCollector(onFlush) {
 	const seenInPass = /* @__PURE__ */ new Map();
 	const warnedKeys = /* @__PURE__ */ new Set();
 	let order = 0;
+	let version = 0;
 	let pending = false;
+	let root;
+	let observer;
+	const byElement = /* @__PURE__ */ new WeakMap();
+	let orderedIds = [];
+	function syncOrder() {
+		if (!root) return false;
+		const ids = [];
+		const walker = root.ownerDocument.createTreeWalker(root, 1);
+		for (let element = walker.nextNode(); element; element = walker.nextNode()) {
+			const node = byElement.get(element);
+			if (node && nodes.get(node.id) === node) {
+				node.order = ids.length;
+				ids.push(node.id);
+			}
+		}
+		const changed = ids.length !== orderedIds.length || ids.some((id, index) => id !== orderedIds[index]);
+		orderedIds = ids;
+		return changed;
+	}
+	function setRoot(value) {
+		observer?.disconnect();
+		root = value;
+		orderedIds = [];
+		if (root) {
+			observer = new MutationObserver(() => {
+				if (syncOrder()) requestFlush();
+			});
+			observer.observe(root, {
+				childList: true,
+				subtree: true
+			});
+		}
+	}
 	function beginPass() {
 		order = 0;
 		seenInPass.clear();
@@ -525,14 +558,17 @@ function createCollector(onFlush) {
 		order = Math.max(order, nextOrder + 1);
 		const existing = nodes.get(node.id);
 		const sameSource = existing?.sourceId === node.sourceId;
-		const unchanged = sameSource && existing.type === node.type && existing.parentId === node.parentId && existing.props === node.props && existing.handlers === node.handlers && existing.order === nextOrder;
+		const unchanged = sameSource && existing.type === node.type && existing.parentId === node.parentId && existing.props === node.props && isIgnorableWatchChange(existing.handlers, node.handlers) && existing.element === node.element && (node.element !== void 0 || existing.order === nextOrder);
 		seenInPass.set(node.id, node.sourceId);
 		if (unchanged) return;
-		nodes.set(node.id, {
+		const registered = {
 			...node,
 			handlerCache: sameSource ? existing?.handlerCache : void 0,
-			order: nextOrder
-		});
+			order: nextOrder,
+			version: ++version
+		};
+		nodes.set(node.id, registered);
+		if (node.element) byElement.set(node.element, registered);
 		requestFlush();
 	}
 	function unregister(id, sourceId) {
@@ -541,10 +577,12 @@ function createCollector(onFlush) {
 		nodes.delete(id);
 		requestFlush();
 	}
-	function requestFlush() {
+	function requestFlush(id, sourceId) {
+		const node = id === void 0 ? void 0 : nodes.get(id);
+		if (node && node.sourceId === sourceId) node.version = ++version;
 		if (pending) return;
 		pending = true;
-		queueMicrotask(() => {
+		queuePostFlushCb(() => {
 			if (!pending) return;
 			pending = false;
 			beginPass();
@@ -552,10 +590,17 @@ function createCollector(onFlush) {
 		});
 	}
 	function getNodes() {
-		return nodes.values();
+		syncOrder();
+		return root ? orderedIds.map((id) => nodes.get(id)) : nodes.values();
+	}
+	function dispose() {
+		cancelPendingFlush();
+		setRoot(void 0);
+		nodes.clear();
 	}
 	function cancelPendingFlush() {
 		pending = false;
+		syncOrder();
 		beginPass();
 	}
 	return {
@@ -565,87 +610,15 @@ function createCollector(onFlush) {
 		warn,
 		getNodes,
 		requestFlush,
-		cancelPendingFlush
+		cancelPendingFlush,
+		setRoot,
+		dispose
 	};
 }
 //#endregion
 //#region src/graphic/context.ts
 const GRAPHIC_COLLECTOR_KEY = Symbol("vue-echarts:graphic-collector");
 const GRAPHIC_PARENT_ID_KEY = Symbol("vue-echarts:graphic-parent-id");
-const GRAPHIC_ORDER_KEY = Symbol("vue-echarts:graphic-order");
-//#endregion
-//#region src/graphic/identity.ts
-function toOrderKey(key) {
-	return typeof key === "string" ? `key:${key}` : key ?? void 0;
-}
-function resolveIdentity(propsId, vnodeKey, uid) {
-	if (propsId != null) {
-		const id = String(propsId);
-		return {
-			id,
-			orderKey: `id:${id}`
-		};
-	}
-	const orderKey = toOrderKey(vnodeKey);
-	if (orderKey !== void 0) return {
-		id: typeof vnodeKey === "string" ? vnodeKey : `__ve_graphic_${uid}`,
-		orderKey
-	};
-	return { id: `__ve_graphic_${uid}` };
-}
-function resolveOrderKey(propsId, vnodeKey) {
-	if (propsId != null) return `id:${String(propsId)}`;
-	return toOrderKey(vnodeKey) ?? null;
-}
-//#endregion
-//#region src/graphic/marker.ts
-const GRAPHIC_COMPONENT_MARKER = Symbol("vue-echarts:graphic-component");
-//#endregion
-//#region src/graphic/order.ts
-function isGraphic(vnode) {
-	const type = vnode.type;
-	if (!type || typeof type !== "object") return false;
-	return typeof type[GRAPHIC_COMPONENT_MARKER] === "string";
-}
-function collect(value, orderMap, order) {
-	if (Array.isArray(value)) {
-		for (const child of value) order = collect(child, orderMap, order);
-		return order;
-	}
-	if (!value || typeof value !== "object") return order;
-	const vnode = value;
-	const children = vnode.children;
-	const graphic = isGraphic(vnode);
-	const type = typeof vnode.type;
-	const opaqueComponent = !Array.isArray(children) && (type === "object" || type === "function");
-	const props = vnode.props;
-	const identity = graphic || opaqueComponent ? resolveOrderKey(props?.id, vnode.key) : null;
-	if (identity !== null) orderMap.set(identity, order);
-	if (graphic) return order + 1;
-	if (identity !== null) order++;
-	if (Array.isArray(children)) for (const child of children) order = collect(child, orderMap, order);
-	return order;
-}
-function isSameOrder(current, next) {
-	if (current.size !== next.size) return false;
-	for (const [key, order] of current) if (next.get(key) !== order) return false;
-	return true;
-}
-function createOrderTracker() {
-	let current = /* @__PURE__ */ new Map();
-	const ref = shallowRef(current);
-	return {
-		ref,
-		update(value) {
-			const next = /* @__PURE__ */ new Map();
-			collect(value, next, 0);
-			if (!isSameOrder(current, next)) {
-				current = next;
-				ref.value = current;
-			}
-		}
-	};
-}
 //#endregion
 //#region src/graphic/mount.ts
 const GraphicMount = defineComponent({
@@ -661,29 +634,30 @@ const GraphicMount = defineComponent({
 		const detachedRoot = shallowRef();
 		const contentReady = shallowRef(isBrowser() && !instance.vnode.el);
 		const parentId = shallowRef(null);
-		const order = createOrderTracker();
 		onBeforeMount(() => {
 			const host = instance.parent?.subTree.el;
 			if (host) {
 				const target = host.ownerDocument.createElement("div");
 				host.appendChild(target);
 				detachedRoot.value = target;
+				collector.setRoot(target);
 			}
 		});
 		onMounted(() => {
 			const ownerDocument = instance.vnode.el.ownerDocument;
 			const target = detachedRoot.value;
 			target?.remove();
-			if (target?.ownerDocument !== ownerDocument) detachedRoot.value = ownerDocument.createElement("div");
+			if (target?.ownerDocument !== ownerDocument) {
+				detachedRoot.value = ownerDocument.createElement("div");
+				collector.setRoot(detachedRoot.value);
+			}
 			contentReady.value = true;
 		});
 		provide(GRAPHIC_COLLECTOR_KEY, collector);
 		provide(GRAPHIC_PARENT_ID_KEY, parentId);
-		provide(GRAPHIC_ORDER_KEY, order.ref);
 		return () => {
 			beginPass();
 			const content = slots.default();
-			order.update(content);
 			const target = detachedRoot.value;
 			return h(Teleport, {
 				to: target ?? "body",
@@ -701,14 +675,19 @@ function registerExtension() {
 		const { slots, manualUpdate, requestUpdate } = ctx;
 		const collector = createCollector(handleFlush);
 		let hasGraphicSlot = Boolean(slots.graphic);
+		let signature;
+		let versions = /* @__PURE__ */ new Map();
 		function handleFlush() {
 			if (manualUpdate.value) {
+				const nodes = Array.from(collector.getNodes());
+				const changed = !slots.graphic || nodes.length !== versions.size || nodes.some((node) => versions.get(node.id) !== node.version);
+				if (!signature || !changed) return;
 				collector.warn("`#graphic` slot updates are ignored when `manual-update` is `true`.", "manual-update-graphic");
 				return;
 			}
 			requestUpdate();
 		}
-		onScopeDispose(collector.cancelPendingFlush);
+		onScopeDispose(collector.dispose);
 		onUpdated(() => {
 			const nextHasGraphicSlot = Boolean(slots.graphic);
 			if (nextHasGraphicSlot === hasGraphicSlot) return;
@@ -717,15 +696,44 @@ function registerExtension() {
 			handleFlush();
 		});
 		return {
-			patchOption(option) {
+			cancelPendingFlush: collector.cancelPendingFlush,
+			prepare(option, reset) {
 				hasGraphicSlot = Boolean(slots.graphic);
-				if (!hasGraphicSlot) return option;
-				if (option.graphic) collector.warn("`#graphic` slot is provided, so `option.graphic` is ignored. Remove one of them to avoid ambiguity.", "option-graphic-override");
-				const nextOption = buildOption(collector.getNodes(), ROOT_ID);
 				collector.cancelPendingFlush();
+				if (!hasGraphicSlot) return {
+					option,
+					replace: false,
+					commit: () => {
+						signature = void 0;
+						versions.clear();
+					}
+				};
+				if (option.graphic) collector.warn("`#graphic` slot is provided, so `option.graphic` is ignored. Remove one of them to avoid ambiguity.", "option-graphic-override");
+				const nodes = Array.from(collector.getNodes());
+				const nextOption = buildOption(nodes, ROOT_ID);
+				const planned = planUpdate(signature, nextOption);
+				const replace = reset || !signature || planned.plan.notMerge || Boolean(planned.plan.replaceMerge?.length);
+				const nextVersions = new Map(nodes.map((node) => [node.id, node.version]));
+				const elements = [];
+				function collectChanges(element, parentId) {
+					const { children, ...props } = element;
+					if (nextVersions.has(element.id) && nextVersions.get(element.id) !== versions.get(element.id)) elements.push({
+						...props,
+						parentId
+					});
+					children?.forEach((child) => collectChanges(child, element.id));
+				}
+				if (!replace) nextOption.graphic.elements.forEach((element) => collectChanges(element));
+				const patched = { ...option };
+				delete patched.graphic;
+				if (replace || elements.length) patched.graphic = replace ? nextOption.graphic : { elements };
 				return {
-					...option,
-					graphic: nextOption.graphic
+					option: patched,
+					replace,
+					commit: () => {
+						signature = planned.signature;
+						versions = nextVersions;
+					}
 				};
 			},
 			render() {
@@ -736,67 +744,91 @@ function registerExtension() {
 	});
 }
 //#endregion
+//#region src/graphic/identity.ts
+function resolveIdentity(propsId, vnodeKey, uid) {
+	if (propsId != null) return String(propsId);
+	return typeof vnodeKey === "string" ? vnodeKey : `__ve_graphic_${uid}`;
+}
+//#endregion
 //#region src/graphic/component-factory.ts
-const runtimeProps = {
+const componentProps = {
 	...commonProps,
-	...shapeProps,
-	width: textPropOverrides.width
+	...shapeProps
 };
+function getRuntimeProps(type) {
+	const keys = COMMON_PROP_KEYS.filter((key) => type !== "text" || key !== "textContent" && key !== "textConfig");
+	if (type === "group") keys.push(...GROUP_PROP_KEYS);
+	else {
+		const shapeKeys = SHAPE_KEYS_BY_TYPE[type];
+		const styleKeys = shapeKeys ? PATH_STYLE_KEYS : STYLE_KEYS_BY_TYPE[type];
+		const commonStyleKeys = type === "text" ? TEXT_COMMON_STYLE_KEYS : COMMON_STYLE_KEYS;
+		keys.push("style", "styleTransition", ...DISPLAYABLE_PROP_KEYS, ...commonStyleKeys, ...styleKeys);
+		if (shapeKeys) keys.push("shape", "shapeTransition", ...PATH_PROP_KEYS, ...shapeKeys);
+	}
+	const definitions = type === "text" ? {
+		...componentProps,
+		...textPropOverrides
+	} : {
+		...componentProps,
+		r: type === "rect" ? componentProps.r : Number
+	};
+	return Object.fromEntries(keys.map((key) => [key, definitions[key]]));
+}
 /* @__NO_SIDE_EFFECTS__ */
 function createComponent(name, type) {
-	const component = defineComponent({
+	return defineComponent({
 		name,
 		inheritAttrs: false,
-		props: runtimeProps,
+		props: getRuntimeProps(type),
 		emits: {},
 		setup(props, { attrs, slots }) {
 			const instance = getCurrentInstance();
 			const collector = inject(GRAPHIC_COLLECTOR_KEY, null);
 			const parentIdRef = inject(GRAPHIC_PARENT_ID_KEY, null);
-			const parentOrderRef = inject(GRAPHIC_ORDER_KEY, null);
 			if (!collector) {
 				warn$1(`\`${name}\` must be used inside \`#graphic\` slot.`);
 				return () => null;
 			}
 			const { register: registerNode, unregister, requestFlush } = collector;
 			let currentId = null;
-			watch([props, () => attrs], requestFlush, { deep: true });
+			let element;
+			watch([props, () => attrs], () => requestFlush(currentId ?? void 0, instance.uid), { deep: true });
 			function register() {
-				const { id, orderKey } = resolveIdentity(props.id, instance.vnode.key, instance.uid);
+				const id = resolveIdentity(props.id, instance.vnode.key, instance.uid);
 				if (currentId !== null && currentId !== id) unregister(currentId, instance.uid);
 				currentId = id;
-				registerNode({
+				if (element) registerNode({
 					id,
 					type,
 					parentId: parentIdRef.value,
-					order: orderKey !== void 0 ? parentOrderRef?.value.get(orderKey) : void 0,
+					element,
 					props,
-					handlers: attrs,
+					handlers: { ...attrs },
 					sourceId: instance.uid
 				});
 				return id;
 			}
+			const setElement = (value) => {
+				if (value === element) return;
+				element = value ?? void 0;
+				if (element) register();
+			};
 			onBeforeUnmount(() => unregister(currentId, instance.uid));
 			if (type === "group") {
 				const providedParent = shallowRef(null);
-				const childOrder = createOrderTracker();
 				provide(GRAPHIC_PARENT_ID_KEY, providedParent);
-				provide(GRAPHIC_ORDER_KEY, childOrder.ref);
 				return () => {
 					providedParent.value = register();
-					const content = slots.default?.() ?? null;
-					childOrder.update(content);
-					return content;
+					const content = slots.default?.() ?? [];
+					return h("div", { ref: setElement }, content);
 				};
 			}
 			return () => {
 				register();
-				return null;
+				return h("div", { ref: setElement });
 			};
 		}
 	});
-	component[GRAPHIC_COMPONENT_MARKER] = type;
-	return component;
 }
 //#endregion
 //#region src/graphic/components.ts