@macroui/echarts-vue 1.0.0

package/dist/graphic.js

@@ -0,0 +1,673 @@
+import { c as parseOnEvent, l as warn$1, r as isBrowser, t as registerRuntime } from "./runtime-CcSlBnVC.js";
+import { Teleport, defineComponent, getCurrentInstance, h, inject, onScopeDispose, onUnmounted, provide, shallowRef } from "vue";
+import { use } from "echarts/core";
+import { GraphicComponent } from "echarts/components";
+//#region src/graphic/props-common.ts
+const COMMON_PROP_KEYS = [
+	"id",
+	"x",
+	"y",
+	"rotation",
+	"scaleX",
+	"scaleY",
+	"originX",
+	"originY",
+	"left",
+	"right",
+	"top",
+	"bottom",
+	"width",
+	"height",
+	"bounding",
+	"z",
+	"zlevel",
+	"silent",
+	"draggable",
+	"cursor",
+	"ignore",
+	"invisible",
+	"progressive",
+	"info",
+	"focus",
+	"blurScope",
+	"textContent",
+	"textConfig",
+	"transition",
+	"enterFrom",
+	"leaveTo",
+	"enterAnimation",
+	"updateAnimation",
+	"leaveAnimation",
+	"keyframeAnimation"
+];
+const BASE_STYLE_KEYS = [
+	"fill",
+	"stroke",
+	"lineWidth",
+	"lineDash",
+	"lineDashOffset",
+	"lineCap",
+	"lineJoin",
+	"miterLimit",
+	"shadowBlur",
+	"shadowOffsetX",
+	"shadowOffsetY",
+	"shadowColor",
+	"opacity",
+	"blend"
+];
+const STYLE_KEYS_BY_TYPE = {
+	text: [
+		"text",
+		"font",
+		"textFill",
+		"textStroke",
+		"textStrokeWidth",
+		"textAlign",
+		"textVerticalAlign",
+		"textLineHeight",
+		"textShadowBlur",
+		"textShadowOffsetX",
+		"textShadowOffsetY",
+		"textShadowColor",
+		"width",
+		"overflow",
+		"ellipsis"
+	],
+	image: [
+		"image",
+		"x",
+		"y",
+		"width",
+		"height"
+	]
+};
+const ImageElement = typeof HTMLImageElement === "undefined" ? Object : HTMLImageElement;
+const CanvasElement = typeof HTMLCanvasElement === "undefined" ? Object : HTMLCanvasElement;
+const VideoElement = typeof HTMLVideoElement === "undefined" ? Object : HTMLVideoElement;
+const graphicCommonOnlyProps = {
+	id: [String, Number],
+	x: Number,
+	y: Number,
+	rotation: Number,
+	scaleX: Number,
+	scaleY: Number,
+	originX: Number,
+	originY: Number,
+	left: [String, Number],
+	right: [String, Number],
+	top: [String, Number],
+	bottom: [String, Number],
+	width: [String, Number],
+	height: [String, Number],
+	bounding: String,
+	z: Number,
+	zlevel: Number,
+	silent: Boolean,
+	draggable: [Boolean, String],
+	cursor: String,
+	ignore: Boolean,
+	invisible: Boolean,
+	progressive: Number,
+	info: null,
+	focus: String,
+	blurScope: String,
+	textContent: Object,
+	textConfig: Object,
+	transition: [String, Array],
+	enterFrom: Object,
+	leaveTo: Object,
+	enterAnimation: Object,
+	updateAnimation: Object,
+	leaveAnimation: Object,
+	keyframeAnimation: Object
+};
+const baseStyleProps = {
+	fill: String,
+	stroke: String,
+	lineWidth: Number,
+	lineDash: [String, Array],
+	lineDashOffset: Number,
+	lineCap: String,
+	lineJoin: String,
+	miterLimit: Number,
+	shadowBlur: Number,
+	shadowOffsetX: Number,
+	shadowOffsetY: Number,
+	shadowColor: String,
+	opacity: Number,
+	blend: String
+};
+const textStyleProps = {
+	text: String,
+	font: String,
+	textFill: String,
+	textStroke: String,
+	textStrokeWidth: Number,
+	textAlign: String,
+	textVerticalAlign: String,
+	textLineHeight: Number,
+	textShadowBlur: Number,
+	textShadowOffsetX: Number,
+	textShadowOffsetY: Number,
+	textShadowColor: String,
+	overflow: String,
+	ellipsis: String
+};
+const imageStyleProps = { image: [
+	String,
+	ImageElement,
+	CanvasElement,
+	VideoElement
+] };
+const commonProps = {
+	...graphicCommonOnlyProps,
+	shape: Object,
+	style: Object,
+	shapeTransition: [String, Array],
+	styleTransition: [String, Array],
+	...baseStyleProps,
+	...textStyleProps,
+	...imageStyleProps
+};
+//#endregion
+//#region src/graphic/props-shape.ts
+const SHAPE_KEYS_BY_TYPE = {
+	rect: [
+		"x",
+		"y",
+		"width",
+		"height",
+		"r"
+	],
+	circle: [
+		"cx",
+		"cy",
+		"r"
+	],
+	sector: [
+		"cx",
+		"cy",
+		"r",
+		"r0",
+		"startAngle",
+		"endAngle",
+		"clockwise",
+		"cornerRadius"
+	],
+	ring: [
+		"cx",
+		"cy",
+		"r",
+		"r0"
+	],
+	arc: [
+		"cx",
+		"cy",
+		"r",
+		"r0",
+		"startAngle",
+		"endAngle",
+		"clockwise"
+	],
+	line: [
+		"x1",
+		"y1",
+		"x2",
+		"y2",
+		"percent"
+	],
+	polyline: [
+		"points",
+		"smooth",
+		"smoothConstraint"
+	],
+	polygon: [
+		"points",
+		"smooth",
+		"smoothConstraint"
+	],
+	bezierCurve: [
+		"x1",
+		"y1",
+		"x2",
+		"y2",
+		"cpx1",
+		"cpy1",
+		"cpx2",
+		"cpy2",
+		"percent"
+	],
+	compoundPath: ["paths"]
+};
+const shapeProps = {
+	x: Number,
+	y: Number,
+	cx: Number,
+	cy: Number,
+	r: [Number, Array],
+	r0: Number,
+	x1: Number,
+	y1: Number,
+	x2: Number,
+	y2: Number,
+	cpx1: Number,
+	cpy1: Number,
+	cpx2: Number,
+	cpy2: Number,
+	startAngle: Number,
+	endAngle: Number,
+	percent: Number,
+	points: Array,
+	smooth: [Boolean, Number],
+	smoothConstraint: Array,
+	paths: Array,
+	clockwise: Boolean,
+	cornerRadius: [Number, Array]
+};
+//#endregion
+//#region src/graphic/build.ts
+const EMPTY_PROP_KEYS = [];
+function resolveShapeKeys(type) {
+	return SHAPE_KEYS_BY_TYPE[type] ?? EMPTY_PROP_KEYS;
+}
+function resolveStyleKeys(type) {
+	return STYLE_KEYS_BY_TYPE[type] ?? EMPTY_PROP_KEYS;
+}
+function mergeProps(target, keys, props) {
+	for (const key of keys) if (props[key] !== void 0) target[key] = props[key];
+}
+function buildStyle(props, extraKeys) {
+	const style = { ...props.style };
+	mergeProps(style, BASE_STYLE_KEYS, props);
+	mergeProps(style, extraKeys, props);
+	if (props.styleTransition !== void 0) style.transition = props.styleTransition;
+	return Object.keys(style).length > 0 ? style : void 0;
+}
+function buildShape(type, props) {
+	const shape = { ...props.shape };
+	mergeProps(shape, resolveShapeKeys(type), props);
+	if (props.shapeTransition !== void 0) shape.transition = props.shapeTransition;
+	return Object.keys(shape).length > 0 ? shape : void 0;
+}
+function buildCommon(type, props) {
+	const out = {};
+	const shapeKeys = resolveShapeKeys(type);
+	const styleKeys = resolveStyleKeys(type);
+	for (const key of COMMON_PROP_KEYS) {
+		if (shapeKeys.includes(key) || styleKeys.includes(key)) continue;
+		if (props[key] !== void 0) out[key] = props[key];
+	}
+	return out;
+}
+function toEventHandler(value, once) {
+	const handlers = [];
+	if (typeof value === "function") handlers.push(value);
+	else if (Array.isArray(value)) {
+		for (const item of value) if (typeof item === "function") handlers.push(item);
+	}
+	if (handlers.length === 0) return;
+	const invoke = (...args) => {
+		for (const handler of handlers) handler(...args);
+	};
+	if (!once) return invoke;
+	let called = false;
+	return (...args) => {
+		if (called) return;
+		called = true;
+		invoke(...args);
+	};
+}
+function buildHandlers(handlers) {
+	const out = {};
+	for (const [key, value] of Object.entries(handlers)) {
+		const descriptor = parseOnEvent(key);
+		if (!descriptor) continue;
+		const handler = toEventHandler(value, descriptor.once);
+		if (!handler) continue;
+		const eventKey = `on${descriptor.event}`;
+		const existing = out[eventKey];
+		if (!existing) {
+			out[eventKey] = handler;
+			continue;
+		}
+		out[eventKey] = (...args) => {
+			existing(...args);
+			handler(...args);
+		};
+	}
+	return Object.keys(out).length > 0 ? out : void 0;
+}
+function toElement(node, children) {
+	const { type, id, props } = node;
+	const styleKeys = resolveStyleKeys(type);
+	const out = {
+		type,
+		id
+	};
+	Object.assign(out, buildCommon(type, props));
+	const handlers = buildHandlers(node.handlers);
+	if (handlers) Object.assign(out, handlers);
+	if (props.info !== void 0) out.info = props.info;
+	if (type === "group") {
+		if (children?.length) out.children = children;
+		return out;
+	}
+	const shape = buildShape(type, props);
+	if (shape) out.shape = shape;
+	const style = buildStyle(props, styleKeys);
+	if (style) out.style = style;
+	return out;
+}
+function buildOption(nodes, rootId) {
+	const byParent = /* @__PURE__ */ new Map();
+	for (const node of nodes) {
+		const list = byParent.get(node.parentId);
+		if (list) {
+			list.push(node);
+			continue;
+		}
+		byParent.set(node.parentId, [node]);
+	}
+	for (const list of byParent.values()) list.sort((a, b) => a.order - b.order);
+	const childrenOf = (parentId) => {
+		return (byParent.get(parentId) ?? []).map((node) => {
+			if (node.type !== "group") return toElement(node);
+			return toElement(node, childrenOf(node.id));
+		});
+	};
+	return { graphic: { elements: [{
+		type: "group",
+		id: rootId,
+		$action: "replace",
+		children: childrenOf(null)
+	}] } };
+}
+//#endregion
+//#region src/graphic/collector.ts
+function createCollector(options) {
+	const { onFlush } = options;
+	const nodes = /* @__PURE__ */ new Map();
+	const warnedKeys = /* @__PURE__ */ new Set();
+	const seenInPass = /* @__PURE__ */ new Map();
+	let order = 0;
+	let pending = false;
+	let disposed = false;
+	function beginPass() {
+		order = 0;
+		seenInPass.clear();
+	}
+	function warn(message, options) {
+		warn$1(message, options ? {
+			...options,
+			onceStore: warnedKeys
+		} : void 0);
+	}
+	function register(node) {
+		if (disposed) return;
+		const seenSource = seenInPass.get(node.id);
+		if (seenSource != null && seenSource !== node.sourceId) warn(`Duplicate graphic id "${node.id}" detected. Updates may be unstable.`, { onceKey: `duplicate-id:${node.id}` });
+		const nextOrder = node.order ?? order;
+		order = Math.max(order, nextOrder + 1);
+		nodes.set(node.id, {
+			...node,
+			order: nextOrder
+		});
+		seenInPass.set(node.id, node.sourceId);
+		requestFlush();
+	}
+	function unregister(id, sourceId) {
+		if (disposed) return;
+		const existing = nodes.get(id);
+		if (!existing) return;
+		if (sourceId != null && existing.sourceId !== sourceId) return;
+		nodes.delete(id);
+		requestFlush();
+	}
+	function requestFlush() {
+		if (disposed || pending) return;
+		pending = true;
+		queueMicrotask(() => {
+			pending = false;
+			if (disposed) return;
+			onFlush();
+		});
+	}
+	function getNodes() {
+		return nodes.values();
+	}
+	function dispose() {
+		disposed = true;
+		pending = false;
+		nodes.clear();
+		seenInPass.clear();
+		warnedKeys.clear();
+	}
+	return {
+		beginPass,
+		register,
+		unregister,
+		warn,
+		getNodes,
+		dispose
+	};
+}
+//#endregion
+//#region src/graphic/context.ts
+const GRAPHIC_COLLECTOR_KEY = Symbol("@macroui/echarts-vue:graphic-collector");
+const GRAPHIC_PARENT_ID_KEY = Symbol("@macroui/echarts-vue:graphic-parent-id");
+const GRAPHIC_ORDER_KEY = Symbol("@macroui/echarts-vue:graphic-order");
+//#endregion
+//#region src/graphic/identity.ts
+function resolveIdentity(propsId, vnodeKey, uid) {
+	if (propsId != null) {
+		const id = String(propsId);
+		return {
+			id,
+			orderKey: `id:${id}`,
+			missingIdentity: false
+		};
+	}
+	if (vnodeKey != null) {
+		const id = String(vnodeKey);
+		return {
+			id,
+			orderKey: `key:${id}`,
+			missingIdentity: false
+		};
+	}
+	return {
+		id: `__ve_graphic_${uid}`,
+		missingIdentity: true
+	};
+}
+function resolveOrderKey(propsId, vnodeKey) {
+	if (propsId != null) return `id:${String(propsId)}`;
+	if (vnodeKey != null) return `key:${String(vnodeKey)}`;
+	return null;
+}
+//#endregion
+//#region src/graphic/marker.ts
+const GRAPHIC_COMPONENT_MARKER = Symbol("@macroui/echarts-vue:graphic-component");
+//#endregion
+//#region src/graphic/order.ts
+function getType(vnode) {
+	if (!vnode || typeof vnode !== "object") return null;
+	const type = vnode.type;
+	if (!type || typeof type !== "object") return null;
+	const mark = type[GRAPHIC_COMPONENT_MARKER];
+	return typeof mark === "string" ? mark : null;
+}
+function collectOrder(value, orderMap, order) {
+	if (Array.isArray(value)) {
+		for (const child of value) order = collectOrder(child, orderMap, order);
+		return order;
+	}
+	if (!value || typeof value !== "object") return order;
+	const vnode = value;
+	const type = getType(vnode);
+	if (type) {
+		const props = vnode.props;
+		const identity = resolveOrderKey(props?.id, vnode.key);
+		if (identity) orderMap.set(identity, order);
+		order += 1;
+	}
+	if (type === "group") {
+		const slot = vnode.children?.default;
+		if (slot) return collectOrder(slot(), orderMap, order);
+	}
+	const children = vnode.children;
+	if (Array.isArray(children)) for (const child of children) order = collectOrder(child, orderMap, order);
+	return order;
+}
+//#endregion
+//#region src/graphic/mount.ts
+const GraphicMount = defineComponent({
+	name: "GraphicMount",
+	props: { collector: {
+		type: Object,
+		required: true
+	} },
+	setup(props, { slots }) {
+		const { collector } = props;
+		const { beginPass } = collector;
+		const detachedRoot = isBrowser() ? document.createElement("div") : void 0;
+		const parentId = shallowRef(null);
+		const orderMapRef = shallowRef(/* @__PURE__ */ new Map());
+		provide(GRAPHIC_COLLECTOR_KEY, collector);
+		provide(GRAPHIC_PARENT_ID_KEY, parentId);
+		provide(GRAPHIC_ORDER_KEY, orderMapRef);
+		onUnmounted(() => {
+			detachedRoot?.remove();
+		});
+		return () => {
+			beginPass();
+			const content = slots.default?.();
+			const orderMap = /* @__PURE__ */ new Map();
+			collectOrder(content, orderMap, 0);
+			orderMapRef.value = orderMap;
+			return detachedRoot ? h(Teleport, { to: detachedRoot }, h("div", { style: { display: "contents" } }, content)) : null;
+		};
+	}
+});
+//#endregion
+//#region src/graphic/extension.ts
+const ROOT_ID = "__ve_graphic_root__";
+const UPDATE_OPTIONS = { replaceMerge: ["graphic"] };
+let componentRegistered = false;
+function registerExtension() {
+	if (!componentRegistered) {
+		use([GraphicComponent]);
+		componentRegistered = true;
+	}
+	registerRuntime((ctx) => {
+		const { slots, manualUpdate, requestUpdate } = ctx;
+		let warnedOverride = false;
+		const collector = createCollector({ onFlush: handleFlush });
+		const { dispose, getNodes, warn } = collector;
+		function handleFlush() {
+			if (!requestUpdate(UPDATE_OPTIONS) && manualUpdate.value) warn("`#graphic` slot updates are ignored when `manual-update` is `true`.", { onceKey: "manual-update-graphic" });
+		}
+		onScopeDispose(dispose);
+		return {
+			patchOption(option) {
+				if (!slots.graphic) return option;
+				if (option.graphic && !warnedOverride) {
+					warn("`#graphic` slot is provided, so `option.graphic` is ignored. Remove one of them to avoid ambiguity.");
+					warnedOverride = true;
+				}
+				const nextOption = buildOption(getNodes(), ROOT_ID);
+				return {
+					...option,
+					graphic: nextOption.graphic
+				};
+			},
+			render() {
+				if (!slots.graphic) return null;
+				return h(GraphicMount, { collector }, { default: slots.graphic });
+			}
+		};
+	});
+}
+//#endregion
+//#region src/graphic/component-factory.ts
+const componentProps = {
+	...commonProps,
+	...shapeProps
+};
+function createComponent(name, type) {
+	const component = defineComponent({
+		name,
+		inheritAttrs: false,
+		props: componentProps,
+		emits: {},
+		setup(props, { attrs, slots }) {
+			const instance = getCurrentInstance();
+			const collector = inject(GRAPHIC_COLLECTOR_KEY, null);
+			const parentIdRef = inject(GRAPHIC_PARENT_ID_KEY, null);
+			const orderRef = inject(GRAPHIC_ORDER_KEY, null);
+			if (!collector) {
+				warn$1(`\`${name}\` must be used inside \`#graphic\` slot.`);
+				return () => null;
+			}
+			const { register: registerNode, unregister, warn: warnScoped } = collector;
+			let currentId = null;
+			function register() {
+				const identity = resolveIdentity(props.id, instance.vnode.key, instance.uid);
+				if (identity.missingIdentity) warnScoped(`\`${name}\` is missing \`id\` and \`key\`. Updates might be unstable in \`v-for\`.`, { onceKey: `missing-id:${instance.uid}` });
+				if (currentId && currentId !== identity.id) unregister(currentId, instance.uid);
+				currentId = identity.id;
+				const hintedOrder = identity.orderKey ? orderRef?.value.get(identity.orderKey) : void 0;
+				registerNode({
+					id: currentId,
+					type,
+					parentId: parentIdRef?.value ?? null,
+					order: hintedOrder,
+					props,
+					handlers: attrs,
+					sourceId: instance.uid
+				});
+				return currentId;
+			}
+			onUnmounted(() => {
+				if (currentId) unregister(currentId, instance.uid);
+			});
+			if (type === "group") {
+				const providedParent = shallowRef(null);
+				provide(GRAPHIC_PARENT_ID_KEY, providedParent);
+				return () => {
+					providedParent.value = register();
+					return slots.default?.() ?? null;
+				};
+			}
+			return () => {
+				register();
+				return null;
+			};
+		}
+	});
+	component[GRAPHIC_COMPONENT_MARKER] = type;
+	return component;
+}
+//#endregion
+//#region src/graphic/components.ts
+const GGroup = createComponent("GGroup", "group");
+const GRect = createComponent("GRect", "rect");
+const GCircle = createComponent("GCircle", "circle");
+const GText = createComponent("GText", "text");
+const GLine = createComponent("GLine", "line");
+const GPolyline = createComponent("GPolyline", "polyline");
+const GPolygon = createComponent("GPolygon", "polygon");
+const GImage = createComponent("GImage", "image");
+const GSector = createComponent("GSector", "sector");
+const GRing = createComponent("GRing", "ring");
+const GArc = createComponent("GArc", "arc");
+const GBezierCurve = createComponent("GBezierCurve", "bezierCurve");
+const GCompoundPath = createComponent("GCompoundPath", "compoundPath");
+//#endregion
+//#region src/graphic/index.ts
+registerExtension();
+//#endregion
+export { GArc, GBezierCurve, GCircle, GCompoundPath, GGroup, GImage, GLine, GPolygon, GPolyline, GRect, GRing, GSector, GText };
+
+//# sourceMappingURL=graphic.js.map