vue-echarts 8.2.0 → 8.3.1

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, t as planUpdate } from "./update-DiQcDAnW.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 = [
@@ -459,6 +459,7 @@ function toElement(node, children) {
 		id
 	};
 	for (const key of COMMON_PROP_KEYS) {
+		if (key === "id") continue;
 		const value = props[key];
 		if (value !== void 0 && !shapeKeys?.includes(key) && !styleKeys?.includes(key)) out[key] = value;
 	}
@@ -476,6 +477,7 @@ function toElement(node, children) {
 	if (style) out.style = style;
 	return out;
 }
+/** Build the tree in the order supplied by the collector. */
 function buildOption(nodes, rootId) {
 	const byParent = /* @__PURE__ */ new Map();
 	const occupiedRootIds = /* @__PURE__ */ new Set();
@@ -489,7 +491,6 @@ function buildOption(nodes, rootId) {
 		byParent.set(node.parentId, [node]);
 	}
 	while (occupiedRootIds.has(rootId)) rootId += "_";
-	for (const list of byParent.values()) list.sort((a, b) => a.order - b.order);
 	const childrenOf = (parentId) => byParent.get(parentId)?.map((node) => {
 		if (node.type !== "group") return toElement(node);
 		return toElement(node, childrenOf(node.id));
@@ -497,7 +498,6 @@ function buildOption(nodes, rootId) {
 	return { graphic: { elements: [{
 		type: "group",
 		id: rootId,
-		$action: "replace",
 		children: childrenOf(null) ?? []
 	}] } };
 }
@@ -507,10 +507,45 @@ function createCollector(onFlush) {
 	const nodes = /* @__PURE__ */ new Map();
 	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 orderedNodes = [];
+	let orderDirty = true;
+	function syncOrder() {
+		if (!root) return false;
+		if (observer?.takeRecords().length) orderDirty = true;
+		if (!orderDirty) return false;
+		orderDirty = false;
+		const nextNodes = [];
+		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) nextNodes.push(node);
+		}
+		const changed = nextNodes.length !== orderedNodes.length || nextNodes.some((node, index) => node.id !== orderedNodes[index].id);
+		orderedNodes = nextNodes;
+		return changed;
+	}
+	function setRoot(value) {
+		observer?.disconnect();
+		root = value;
+		orderedNodes = [];
+		orderDirty = true;
+		if (root) {
+			observer = new MutationObserver(() => {
+				orderDirty = true;
+				if (syncOrder()) requestFlush();
+			});
+			observer.observe(root, {
+				childList: true,
+				subtree: true
+			});
+		}
+	}
 	function beginPass() {
-		order = 0;
 		seenInPass.clear();
 	}
 	function warn(message, onceKey) {
@@ -521,30 +556,34 @@ function createCollector(onFlush) {
 	function register(node) {
 		const seenSource = seenInPass.get(node.id);
 		if (seenSource !== void 0 && seenSource !== node.sourceId) warn(`Duplicate graphic id "${node.id}" detected. Updates may be unstable.`, `duplicate-id:${node.id}`);
-		const nextOrder = node.order ?? order;
-		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;
 		seenInPass.set(node.id, node.sourceId);
 		if (unchanged) return;
-		nodes.set(node.id, {
+		const registered = {
 			...node,
 			handlerCache: sameSource ? existing?.handlerCache : void 0,
-			order: nextOrder
-		});
+			version: ++version
+		};
+		nodes.set(node.id, registered);
+		orderDirty = true;
+		if (node.element) byElement.set(node.element, registered);
 		requestFlush();
 	}
 	function unregister(id, sourceId) {
 		const existing = nodes.get(id);
 		if (!existing || existing.sourceId !== sourceId) return;
 		nodes.delete(id);
+		orderDirty = true;
 		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 +591,17 @@ function createCollector(onFlush) {
 		});
 	}
 	function getNodes() {
-		return nodes.values();
+		syncOrder();
+		return root ? orderedNodes : Array.from(nodes.values());
+	}
+	function dispose() {
+		cancelPendingFlush();
+		setRoot(void 0);
+		nodes.clear();
 	}
 	function cancelPendingFlush() {
 		pending = false;
+		syncOrder();
 		beginPass();
 	}
 	return {
@@ -565,87 +611,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({
@@ -659,36 +633,33 @@ const GraphicMount = defineComponent({
 		const { collector } = props;
 		const { beginPass } = collector;
 		const detachedRoot = shallowRef();
-		const contentReady = shallowRef(isBrowser() && !instance.vnode.el);
+		const hydrating = Boolean(instance.vnode.el);
 		const parentId = shallowRef(null);
-		const order = createOrderTracker();
 		onBeforeMount(() => {
 			const host = instance.parent?.subTree.el;
-			if (host) {
+			if (host && !hydrating) {
 				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");
-			contentReady.value = true;
+			if (target?.ownerDocument !== ownerDocument) {
+				detachedRoot.value = ownerDocument.createElement("div");
+				collector.setRoot(detachedRoot.value);
+			}
 		});
 		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",
-				disabled: !target
-			}, target && contentReady.value ? content : []);
+			if (!target) return null;
+			return h(Teleport, { to: target }, slots.default());
 		};
 	}
 });
@@ -701,14 +672,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 = 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 +693,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 = 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) {
+					if (nextVersions.has(element.id) && nextVersions.get(element.id) !== versions.get(element.id)) {
+						const { children: _, ...props } = element;
+						props.parentId = parentId;
+						elements.push(props);
+					}
+					element.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 +741,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 currentId;
+			let element;
+			watch([props, () => attrs], () => requestFlush(currentId, instance.uid), { deep: true });
 			function register() {
-				const { id, orderKey } = resolveIdentity(props.id, instance.vnode.key, instance.uid);
-				if (currentId !== null && currentId !== id) unregister(currentId, instance.uid);
+				const id = resolveIdentity(props.id, instance.vnode.key, instance.uid);
+				if (currentId !== void 0 && 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