npm - @xingwangzhe/tags-cloud - Versions diffs - 0.5.0 → 0.9.0 - Mend

@xingwangzhe/tags-cloud 0.5.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -6,12 +6,12 @@
 ## Features
-- **Zero DOM overhead** — pure math output, render via callback
+- **Multi-modal** — text, images, SVG, HTML, video, Web Components
 - **Fibonacci sphere distribution** — tags evenly placed on 3D sphere
 - **Arcball interaction** — drag to rotate with quaternion-based Shoemake arcball
 - **Auto-spin** — configurable per-axis spin (X/Y) with independent speed and direction
 - **TypeScript** — fully typed
-- **~2.3KB** gzipped
+- **~3KB** gzipped
 ## Install
@@ -24,54 +24,78 @@ bun add @xingwangzhe/tags-cloud
 ```ts
 import { TagCloud } from "@xingwangzhe/tags-cloud";
-// Zero config — auto-creates Canvas and renders text
 new TagCloud(document.getElementById("cloud"), {
-  tags: ["TypeScript", "Canvas", "3D"],
+  tags: [
+    "plain text",
+    { type: "image", src: "/avatar.webp", width: 40, height: 40, onClick: () => open("/profile") },
+    { type: "element", element: myComponent, onClick: () => console.log("clicked") },
+    { type: "svg", content: "<svg>...</svg>", width: 48, height: 48 },
+    { type: "html", html: "<b>bold</b>" },
+    { type: "video", src: "/clip.mp4", width: 120, height: 68 },
+  ],
   radius: 300,
+  spinY: 0.15,
+  onTagClick(item) { console.log("clicked", item); },
 });
 ```
+## Tag Types
+| TagItem | Renderer | Example |
+|---|---|---|
+| `string` | Canvas | `"TypeScript"` |
+| `{ type:"image" }` | Canvas | `{ type:"image", src, width, height, onClick? }` |
+| `{ type:"svg" }` | DOM | `{ type:"svg", content, width, height, onClick? }` |
+| `{ type:"html" }` | DOM | `{ type:"html", html, onClick? }` |
+| `{ type:"video" }` | DOM | `{ type:"video", src, width, height, onClick? }` |
+| `{ type:"element" }` | DOM | `{ type:"element", element, onClick? }` |
 ## API
 ### `new TagCloud(container, options)`
-| Option            | Type             | Default         | Description                     |
-| ----------------- | ---------------- | --------------- | ------------------------------- |
-| `tags`            | `string[]`       | —               | Tag text list                   |
-| `radius`          | `number`         | `300`           | Sphere radius (px)              |
-| `spinY`           | `number`         | `0`             | Y-axis spin: +right -left 0=off |
-| `spinX`           | `number`         | `0`             | X-axis spin: +down -up 0=off    |
-| `reverse`         | `boolean`        | `false`         | Reverse both drag axes          |
-| `reverseX`        | `boolean`        | `false`         | Reverse X-axis drag only        |
-| `reverseY`        | `boolean`        | `false`         | Reverse Y-axis drag only        |
-| `inertiaDecay`    | `number`         | `0.96`          | Inertia decay per frame         |
-| `dragSensitivity` | `number`         | `3`             | Drag sensitivity multiplier     |
-| `fontFamily`      | `string`         | `system-ui`     | Font family                     |
-| `fontSize`        | `number`         | `14`            | Base font size (px)             |
-| `color`           | `string`         | `#fff`          | Text color                      |
-| `onRender`        | `(tags) => void` | built-in Canvas | Custom render callback          |
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `tags` | `TagItem[]` | — | Tag list (string or object) |
+| `radius` | `number` | `300` | Sphere radius (px) |
+| `width` | `number` | `0` | Canvas width in px (0 = auto) |
+| `height` | `number` | `0` | Canvas height in px (0 = auto) |
+| `spinY` | `number` | `0` | Y-axis spin: +right -left 0=off |
+| `spinX` | `number` | `0` | X-axis spin: +down -up 0=off |
+| `reverse` | `boolean` | `false` | Reverse both drag axes |
+| `reverseX` | `boolean` | `false` | Reverse X-axis drag only |
+| `reverseY` | `boolean` | `false` | Reverse Y-axis drag only |
+| `inertiaDecay` | `number` | `0.96` | Inertia decay per frame |
+| `dragSensitivity` | `number` | `3` | Drag sensitivity multiplier |
+| `fontFamily` | `string` | `system-ui` | Font family |
+| `fontSize` | `number` | `14` | Base font size (px) |
+| `color` | `string` | `#fff` | Text color |
+| `videoFullscreen` | `boolean` | `true` | Video tags click to fullscreen |
+| `onTagClick` | `(item) => void` | — | Global click callback for all tags |
+| `onRender` | `(tags) => void` | built-in | Custom render callback |
 ### Instance Methods
 ```ts
-cloud.setTags(["new", "tags"]); // Update tags
-cloud.pause(); // Pause
-cloud.resume(); // Resume
-cloud.destroy(); // Destroy (cleanup events + rAF)
+cloud.setTags(["new", "tags"]);
+cloud.pause();
+cloud.resume();
+cloud.destroy();
 ```
 ## Development
 ```bash
 bun install
-bun run build    # vite build
-bun run lint     # oxlint
-bun run fmt      # oxfmt
+bun run build       # vite build → dist/
+bun run build:demo  # vite build → out/ (deployable HTML)
+bun run lint        # oxlint
+bun run fmt         # oxfmt
 ```
 ## Credits
-Core algorithm ported from [cong-min/TagCloud](https://github.com/cong-min/TagCloud)
+**Special thanks to [cong-min/TagCloud](https://github.com/cong-min/TagCloud)** — the original 3D tag cloud library that inspired this project. Core sphere distribution and rotation algorithms are ported from TagCloud.js.
 ## License

package/dist/index.js CHANGED Viewed

@@ -15,6 +15,8 @@ function e(e, t) {
 //#region src/TagCloud.ts
 var t = {
 	radius: 300,
+	width: 0,
+	height: 0,
 	spinY: 0,
 	spinX: 0,
 	reverse: !1,
@@ -24,8 +26,13 @@ var t = {
 	dragSensitivity: 3,
 	fontFamily: "system-ui, sans-serif",
 	fontSize: 14,
+	videoFullscreen: !0,
 	color: "#ffffff"
-}, n = class {
+};
+function n(e) {
+	return typeof e != "string";
+}
+var r = class {
 	#e;
 	#t = [];
 	#n;
@@ -46,40 +53,28 @@ var t = {
 	#s = 0;
 	#c = !1;
 	#l = !1;
-	#u = {
+	#u = !1;
+	#d = {
 		x: 0,
 		y: 0,
 		z: 0
 	};
-	#d = 0;
-	#f;
+	#f = 0;
 	#p;
 	#m;
 	#h;
+	#g;
+	#_;
+	#v = /* @__PURE__ */ new Map();
+	#y = [];
 	constructor(e, n) {
-		this.#f = e, this.#e = {
+		this.#p = e, this.#e = {
 			...t,
 			...n
-		}, this.#n = this.#e.radius, this.#r = 2 * this.#n, this.#e.onRender || (this.#e.onRender = this.#g), this.#v(this.#e.tags), this.#y(), this.#x();
-	}
-	#g = (e) => {
-		if (!this.#m) {
-			let e = document.createElement("canvas");
-			e.style.width = "100%", e.style.height = "100%", this.#f.appendChild(e), this.#m = e, this.#h = e.getContext("2d"), this.#_();
-		}
-		let { width: t, height: n } = this.#m.getBoundingClientRect(), r = this.#h;
-		r.clearRect(0, 0, t, n);
-		let { fontFamily: i, fontSize: a, color: o } = this.#e;
-		for (let t of e) r.save(), r.globalAlpha = t.alpha, r.font = `${a + t.scale * 5}px ${i}`, r.fillStyle = o, r.textAlign = "center", r.textBaseline = "middle", r.fillText(t.text, t.x, t.y), r.restore();
-	};
-	#_() {
-		let e = this.#m;
-		if (!e) return;
-		let t = window.devicePixelRatio || 1, { width: n, height: r } = e.getBoundingClientRect();
-		e.width = n * t, e.height = r * t, this.#h.setTransform(t, 0, 0, t, 0, 0);
+		}, this.#n = this.#e.radius, this.#r = 2 * this.#n, this.#e.onRender || (this.#e.onRender = this.#w), this.#b(this.#e.tags), this.#x(), this.#S(), this.#D();
 	}
 	setTags(e) {
-		this.#v(e);
+		this.#b(e);
 	}
 	pause() {
 		this.#c = !0;
@@ -88,29 +83,30 @@ var t = {
 		this.#c = !1;
 	}
 	destroy() {
-		cancelAnimationFrame(this.#d);
-		let e = this.#p;
-		this.#f.removeEventListener("pointerdown", e.down), window.removeEventListener("pointermove", e.move), window.removeEventListener("pointerup", e.up), this.#m && this.#m.remove();
+		cancelAnimationFrame(this.#f);
+		let e = this.#m;
+		this.#p.removeEventListener("pointerdown", e.down), window.removeEventListener("pointermove", e.move), window.removeEventListener("pointerup", e.up), this.#h && this.#h.remove(), this.#_ && this.#_.remove();
 	}
-	#v(t) {
+	#b(t) {
 		let n = 1.5 * this.#n, r = e(t.length, n / 2);
 		this.#t = r.map((e, n) => ({
 			...e,
-			text: t[n]
+			item: t[n]
 		}));
 	}
-	#y() {
-		this.#f.style.cursor = "grab";
-		let e = () => this.#f.getBoundingClientRect();
-		this.#p = {
+	#x() {
+		this.#p.style.cursor = "grab";
+		let e = () => this.#p.getBoundingClientRect();
+		this.#m = {
 			down: ((t) => {
-				this.#l = !0, this.#f.style.cursor = "grabbing", this.#a = { ...this.#i };
+				this.#l = !0, this.#p.style.cursor = "grabbing", this.#a = { ...this.#i };
 				let n = e();
-				this.#u = this.#b(t.clientX - n.left, t.clientY - n.top, n.width, n.height), this.#o = 0, this.#s = 0;
+				this.#d = this.#C(t.clientX - n.left, t.clientY - n.top, n.width, n.height), this.#o = 0, this.#s = 0;
 			}),
 			move: ((t) => {
 				if (!this.#l) return;
-				let n = e(), r = this.#b(t.clientX - n.left, t.clientY - n.top, n.width, n.height), i = this.#u, a = i.x * r.x + i.y * r.y + i.z * r.z, o = this.#e.reverse || this.#e.reverseX ? -1 : 1, s = this.#e.reverse || this.#e.reverseY ? -1 : 1, c = {
+				this.#u = !0;
+				let n = e(), r = this.#C(t.clientX - n.left, t.clientY - n.top, n.width, n.height), i = this.#d, a = i.x * r.x + i.y * r.y + i.z * r.z, o = this.#e.reverse || this.#e.reverseX ? -1 : 1, s = this.#e.reverse || this.#e.reverseY ? -1 : 1, c = {
 					w: 1 + a,
 					x: (i.y * r.z - i.z * r.y) * o,
 					y: (i.x * r.z - i.z * r.x) * s,
@@ -128,11 +124,31 @@ var t = {
 				this.#o = c.y / l * d, this.#s = c.x / l * d;
 			}),
 			up: () => {
-				this.#l = !1, this.#f.style.cursor = "grab";
+				this.#l = !1, this.#p.style.cursor = "grab", setTimeout(() => {
+					this.#u = !1;
+				}, 0);
 			}
-		}, this.#f.addEventListener("pointerdown", this.#p.down), window.addEventListener("pointermove", this.#p.move), window.addEventListener("pointerup", this.#p.up);
+		}, this.#p.addEventListener("pointerdown", this.#m.down), window.addEventListener("pointermove", this.#m.move), window.addEventListener("pointerup", this.#m.up);
+	}
+	#S() {
+		this.#p.addEventListener("click", (e) => {
+			if (this.#u) return;
+			let t = this.#p.getBoundingClientRect(), r = e.clientX - t.left, i = e.clientY - t.top, a = null;
+			for (let e of this.#y) {
+				if (typeof e.item != "string" && !e.item.onClick) continue;
+				let t = r - e.x, n = i - e.y, o = Math.sqrt(t * t + n * n);
+				o < (e.item.type === "image" ? e.item.width / 2 : 30) * e.scale && (!a || o < a.dist) && (a = {
+					item: e.item,
+					dist: o
+				});
+			}
+			if (a) {
+				let e = a.item;
+				n(e) && e.onClick && e.onClick(), this.#e.onTagClick && this.#e.onTagClick(e);
+			}
+		});
 	}
-	#b(e, t, n, r) {
+	#C(e, t, n, r) {
 		let i = e / n * 2 - 1, a = -(t / r * 2 - 1), o = i * i + a * a;
 		if (o > 1) {
 			let e = 1 / Math.sqrt(o);
@@ -148,10 +164,73 @@ var t = {
 			z: Math.sqrt(1 - o)
 		};
 	}
-	#x = () => {
-		this.#c || this.#w(), this.#d = requestAnimationFrame(this.#x);
+	#w = (e) => {
+		if (!this.#h) {
+			let e = document.createElement("canvas");
+			this.#e.width ? (e.style.width = `${this.#e.width}px`, this.#p.style.width = `${this.#e.width}px`) : e.style.width = "100%", this.#e.height ? (e.style.height = `${this.#e.height}px`, this.#p.style.height = `${this.#e.height}px`) : e.style.height = "100%", this.#p.appendChild(e), this.#h = e, this.#g = e.getContext("2d"), this.#E();
+		}
+		if (!this.#_) {
+			this.#p.style.position = "relative";
+			let e = document.createElement("div");
+			e.style.position = "absolute", e.style.inset = "0", e.style.pointerEvents = "none", e.style.overflow = "hidden", this.#p.appendChild(e), this.#_ = e;
+		}
+		let { width: t, height: n } = this.#h.getBoundingClientRect(), r = this.#g;
+		r.clearRect(0, 0, t, n);
+		let i = [], a = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Map(), s = [];
+		for (let t of e) if (typeof t.item == "string") {
+			let { fontFamily: e, fontSize: n, color: a } = this.#e;
+			r.save(), r.globalAlpha = t.alpha, r.font = `${n + t.scale * 5}px ${e}`, r.fillStyle = a, r.textAlign = "center", r.textBaseline = "middle", r.fillText(t.item, t.x, t.y), r.restore(), i.push({
+				item: t.item,
+				x: t.x,
+				y: t.y,
+				scale: t.scale
+			});
+		} else if (t.item.type === "image") {
+			let e = o.get(t.item.src);
+			e || (e = new Image(), e.src = t.item.src, o.set(t.item.src, e), s.push(new Promise((t) => {
+				e.onload = () => t();
+			})));
+			let { width: n, height: a } = t.item, c = n * t.scale, l = a * t.scale;
+			r.save(), r.globalAlpha = t.alpha, r.drawImage(e, t.x - c / 2, t.y - l / 2, c, l), r.restore(), i.push({
+				item: t.item,
+				x: t.x,
+				y: t.y,
+				scale: t.scale
+			});
+		} else {
+			a.add(t.item);
+			let e = this.#v.get(t.item);
+			e || (e = this.#T(t.item), this.#v.set(t.item, e), this.#_.appendChild(e)), e.style.transform = `translate3d(${t.x.toFixed(1)}px, ${t.y.toFixed(1)}px, 0) scale(${t.scale.toFixed(2)})`, e.style.opacity = String(t.alpha), e.style.zIndex = String(Math.round(t.scale * 100)), i.push({
+				item: t.item,
+				x: t.x,
+				y: t.y,
+				scale: t.scale
+			});
+		}
+		for (let [e, t] of this.#v) a.has(e) || (t.remove(), this.#v.delete(e));
+		this.#y = i;
 	};
-	#S(e) {
+	#T(e) {
+		let t = document.createElement("div");
+		t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.willChange = "transform, opacity";
+		let n = !!(e.onClick || e.type === "video" && this.#e.videoFullscreen);
+		return t.style.cursor = n ? "pointer" : "default", t.style.pointerEvents = n ? "auto" : "none", e.type === "element" ? t.appendChild(e.element) : e.type === "html" ? t.innerHTML = e.html : e.type === "svg" ? t.innerHTML = e.content : e.type === "video" && (t.innerHTML = `<video src="${e.src}" width="${e.width}" height="${e.height}" autoplay muted loop playsinline></video>`, this.#e.videoFullscreen && t.addEventListener("click", () => {
+			let e = t.querySelector("video");
+			document.fullscreenElement ? document.exitFullscreen() : (e.play(), e.requestFullscreen());
+		})), (e.onClick || this.#e.onTagClick) && t.addEventListener("click", (t) => {
+			t.stopPropagation(), e.onClick && e.onClick(), this.#e.onTagClick && this.#e.onTagClick(e);
+		}), t;
+	}
+	#E() {
+		let e = this.#h;
+		if (!e) return;
+		let t = window.devicePixelRatio || 1, { width: n, height: r } = e.getBoundingClientRect();
+		e.width = n * t, e.height = r * t, this.#g.setTransform(t, 0, 0, t, 0, 0);
+	}
+	#D = () => {
+		this.#c || this.#A(), this.#f = requestAnimationFrame(this.#D);
+	};
+	#O(e) {
 		let t = e * Math.PI / 360, n = {
 			w: Math.cos(t),
 			x: 0,
@@ -165,7 +244,7 @@ var t = {
 			z: n.w * r.z - n.y * r.x
 		};
 	}
-	#C(e) {
+	#k(e) {
 		let t = e * Math.PI / 360, n = {
 			w: Math.cos(t),
 			x: Math.sin(t),
@@ -179,14 +258,14 @@ var t = {
 			z: n.w * r.z + n.x * r.y
 		};
 	}
-	#w() {
-		let e = this.#f.getBoundingClientRect(), t = e.width / 2, n = e.height / 2, r = this.#e.reverse || this.#e.reverseY ? -1 : 1, i = this.#e.reverse || this.#e.reverseX ? -1 : 1, a = this.#e.inertiaDecay;
-		this.#l || (this.#S((this.#e.spinY + this.#o) * r), this.#C((this.#e.spinX + this.#s) * i), this.#o *= a, this.#s *= a);
+	#A() {
+		let e = this.#p.getBoundingClientRect(), t = e.width / 2, n = e.height / 2, r = this.#e.reverse || this.#e.reverseY ? -1 : 1, i = this.#e.reverse || this.#e.reverseX ? -1 : 1, a = this.#e.inertiaDecay;
+		this.#l || (this.#O((this.#e.spinY + this.#o) * r), this.#k((this.#e.spinX + this.#s) * i), this.#o *= a, this.#s *= a);
 		let { w: o, x: s, y: c, z: l } = this.#i, u = 1 - 2 * (c * c + l * l), d = 2 * (s * c - o * l), f = 2 * (s * l + o * c), p = 2 * (s * c + o * l), m = 1 - 2 * (s * s + l * l), h = 2 * (c * l - o * s), g = 2 * (s * l - o * c), _ = 2 * (c * l + o * s), v = this.#r * 2, y = [];
 		for (let e of this.#t) {
 			let r = u * e.x + d * e.y + f * e.z, i = p * e.x + m * e.y + h * e.z, a = g * e.x + _ * e.y + (1 - 2 * (s * s + c * c)) * e.z, o = v / (v + a), l = Math.min(1, Math.max(0, o * o - .25));
 			y.push({
-				text: e.text,
+				item: e.item,
 				x: t + r * o,
 				y: n + i * o,
 				z: a,
@@ -199,7 +278,7 @@ var t = {
 };
 //#endregion
 //#region src/core/rotation.ts
-function r(e, t, n) {
+function i(e, t, n) {
 	let r = Math.sin(t), i = Math.cos(t), a = Math.sin(n), o = Math.cos(n), s = e.y * i + e.z * -r, c = e.y * r + e.z * i;
 	return {
 		x: e.x * o + c * a,
@@ -207,7 +286,7 @@ function r(e, t, n) {
 		z: c * o - e.x * a
 	};
 }
-function i(e, t, n) {
+function a(e, t, n) {
 	let r = Math.sin(t), i = Math.cos(t), a = Math.sin(n), o = Math.cos(n);
 	return e.map((e) => {
 		let t = e.y * i + e.z * -r, n = e.y * r + e.z * i;
@@ -220,7 +299,7 @@ function i(e, t, n) {
 }
 //#endregion
 //#region src/core/projection.ts
-function a(e, t) {
+function o(e, t) {
 	let n = 2 * t;
 	return e.map((e) => {
 		let t = n / (n + e.z), r = Math.min(1, Math.max(0, t * t - .25));
@@ -234,6 +313,6 @@ function a(e, t) {
 	});
 }
 //#endregion
-export { n as TagCloud, e as fibonacciSphere, a as project, r as rotatePoint, i as rotatePoints };
+export { r as TagCloud, e as fibonacciSphere, o as project, i as rotatePoint, a as rotatePoints };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["#container","#opts","#radius","#depth","#canvasRender","#initTags","#bindEvents","#loop","#canvas","#ctx","#resizeCanvas","#paused","#raf","#handlers","#points","#dragging","#qDown","#qNow","#vDown","#screenToSphere","#velY","#velX","#tick","#rotateY","#rotateX"],"sources":["../src/core/distribution.ts","../src/TagCloud.ts","../src/core/rotation.ts","../src/core/projection.ts"],"sourcesContent":["/*\n 斐波那契球面分布\n * Fibonacci sphere distribution\n \n 将 N 个点均匀分布在球面上，避免两极聚集\n * Evenly distributes N points on a sphere, avoiding polar clustering\n \n ported from TagCloud.js _computePosition\n /\n\nexport interface Vec3 {\n x: number;\n y: number;\n z: number;\n}\n\n/\n 生成球面上均匀分布的 N 个点\n * Generate N evenly distributed points on a sphere of radius R\n /\nexport function fibonacciSphere(n: number, R: number): Vec3[] {\n const points: Vec3[] = [];\n for (let i = 0; i < n; i++) {\n // φ = acos(1 - 2(i+0.5)/N) — 纬度均匀分布\n // φ = acos(1 - 2(i+0.5)/N) — uniform latitude\n const phi = Math.acos(-1 + (2 i + 1) / n);\n // θ = √(Nπ) × φ — 经度黄金比例螺旋\n // θ = √(Nπ) × φ — golden ratio spiral for longitude\n const theta = Math.sqrt(n * Math.PI) * phi;\n points.push({\n x: R * Math.cos(theta) * Math.sin(phi),\n y: R * Math.sin(theta) * Math.sin(phi),\n z: R * Math.cos(phi),\n });\n }\n return points;\n}\n","/*\n 3D 标签云 — 纯数学引擎\n * 3D Tag Cloud — Pure Math Engine\n \n 零 DOM 渲染，每帧通过 onRender 回调输出投影坐标\n * Zero DOM rendering, outputs projected coords via onRender callback each frame\n \n 基于 cong-min/TagCloud 算法\n * Based on cong-min/TagCloud algorithm\n /\nimport { fibonacciSphere } from \"./core/distribution\";\n\n// ── 类型\n// ── Types\n\n/* 投影后的标签数据 /\n/* Projected tag data /\nexport interface TagData {\n text: string;\n /* 容器内 X 坐标（像素） /\n /* X coordinate in container (px) /\n x: number;\n /* 容器内 Y 坐标（像素） /\n /* Y coordinate in container (px) /\n y: number;\n /* Z 深度（-radius ~ +radius） /\n /* Z depth /\n z: number;\n /* 缩放比例 (0 ~ 1+) /\n /* scale factor /\n scale: number;\n /* 透明度 (0 ~ 1) /\n /* opacity /\n alpha: number;\n}\n\nexport interface TagCloudOptions {\n /* 标签文本数组 /\n /* tag text array /\n tags: string[];\n /* 球面半径（px） /\n /* sphere radius (px) (default 300) /\n radius?: number;\n /* 绕 Y 轴自旋速度（°/帧）: +右转 -左转 0=关 /\n /* Y-axis auto-spin speed (°/frame): +right -left 0=off (default 0) /\n spinY?: number;\n /* 绕 X 轴自旋速度（°/帧）: +下转 -上转 0=关 /\n /* X-axis auto-spin speed (°/frame): +down -up 0=off (default 0) /\n spinX?: number;\n /* 反转方向（X+Y 同时） /\n /* reverse both axes (default false) /\n reverse?: boolean;\n /* 单独反转 X 轴（上下拖拽） /\n /* reverse X-axis drag only (default false) /\n reverseX?: boolean;\n /* 反转 Y 轴拖拽方向 /\n /* reverse Y-axis drag direction (default false) /\n reverseY?: boolean;\n /* 惯性衰减系数（每帧乘以此值） /\n /* inertia decay per frame (default 0.96) /\n inertiaDecay?: number;\n /* 拖拽灵敏度（松手后惯性速度倍率） /\n /* drag sensitivity for release velocity (default 3) /\n dragSensitivity?: number;\n /* 字体 /\n /* font family (default \"system-ui, sans-serif\") /\n fontFamily?: string;\n /* 基础字号（px） /\n /* base font size in px (default 14) /\n fontSize?: number;\n /* 文字颜色 /\n /* text color (default \"#ffffff\") /\n color?: string;\n /* 自定义渲染回调（如不提供则用内置 Canvas） /\n /* custom render callback (built-in Canvas if omitted) /\n onRender?: (tags: TagData[]) => void;\n}\n\n// ── 内部类型\n// ── Internal Types\n\ninterface SpherePoint {\n x: number;\n y: number;\n z: number;\n text: string;\n}\n\ntype ResolvedOptions = TagCloudOptions & Required<Omit<TagCloudOptions, \"onRender\">>;\n\nconst DEFAULTS: Omit<ResolvedOptions, \"tags\" \| \"onRender\"> = {\n radius: 300,\n spinY: 0,\n spinX: 0,\n reverse: false,\n reverseX: false,\n reverseY: false,\n inertiaDecay: 0.96,\n dragSensitivity: 3,\n fontFamily: \"system-ui, sans-serif\",\n fontSize: 14,\n color: \"#ffffff\",\n};\n\n// ── 主类\n// ── Main Class\n\nexport class TagCloud {\n #opts: ResolvedOptions;\n #points: SpherePoint[] = [];\n #radius: number;\n #depth: number;\n\n // 旋转状态 — 四元数\n // rotation state as quaternion\n #qNow = { w: 1, x: 0, y: 0, z: 0 };\n #qDown = { w: 1, x: 0, y: 0, z: 0 };\n #velY = 0;\n #velX = 0;\n #paused = false;\n\n // 拖拽状态\n // arcball drag state\n #dragging = false;\n #vDown = { x: 0, y: 0, z: 0 };\n\n // 动画\n // animation\n #raf = 0;\n #container: HTMLElement;\n #handlers!: { down: EventListener; move: EventListener; up: EventListener };\n\n // 内置 Canvas（仅当 onRender 未提供时创建）\n // built-in Canvas (only when onRender is not provided)\n #canvas?: HTMLCanvasElement;\n #ctx?: CanvasRenderingContext2D;\n\n constructor(container: HTMLElement, options: TagCloudOptions) {\n this.#container = container;\n this.#opts = { ...DEFAULTS, ...options } as ResolvedOptions;\n this.#radius = this.#opts.radius;\n this.#depth = 2 this.#radius;\n\n // 内置 Canvas 渲染器\n // built-in Canvas renderer\n if (!this.#opts.onRender) {\n this.#opts.onRender = this.#canvasRender;\n }\n\n this.#initTags(this.#opts.tags);\n this.#bindEvents();\n this.#loop();\n }\n\n /** 内置 Canvas 渲染器 /\n /* Built-in Canvas renderer /\n #canvasRender = (tags: TagData[]): void => {\n if (!this.#canvas) {\n const c = document.createElement(\"canvas\");\n c.style.width = \"100%\";\n c.style.height = \"100%\";\n this.#container.appendChild(c);\n this.#canvas = c;\n this.#ctx = c.getContext(\"2d\")!;\n this.#resizeCanvas();\n }\n const { width, height } = this.#canvas.getBoundingClientRect();\n const ctx = this.#ctx!;\n ctx.clearRect(0, 0, width, height);\n const { fontFamily, fontSize, color } = this.#opts;\n for (const t of tags) {\n ctx.save();\n ctx.globalAlpha = t.alpha;\n ctx.font = `${fontSize + t.scale 5}px ${fontFamily}`;\n ctx.fillStyle = color;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(t.text, t.x, t.y);\n ctx.restore();\n }\n };\n\n #resizeCanvas(): void {\n const c = this.#canvas;\n if (!c) return;\n const dpr = window.devicePixelRatio \|\| 1;\n const { width, height } = c.getBoundingClientRect();\n c.width = width * dpr;\n c.height = height * dpr;\n this.#ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);\n }\n\n // ── 公开 API\n // ── Public API\n\n setTags(tags: string[]): void {\n this.#initTags(tags);\n }\n pause(): void {\n this.#paused = true;\n }\n resume(): void {\n this.#paused = false;\n }\n\n destroy(): void {\n cancelAnimationFrame(this.#raf);\n const h = this.#handlers;\n this.#container.removeEventListener(\"pointerdown\", h.down);\n window.removeEventListener(\"pointermove\", h.move);\n window.removeEventListener(\"pointerup\", h.up);\n if (this.#canvas) this.#canvas.remove();\n }\n\n // ── 内部方法\n // ── Internal\n\n #initTags(tags: string[]): void {\n const size = 1.5 * this.#radius;\n const positions = fibonacciSphere(tags.length, size / 2);\n this.#points = positions.map((p, i) => ({ ...p, text: tags[i]! }));\n }\n\n #bindEvents(): void {\n this.#container.style.cursor = \"grab\";\n\n const rect = () => this.#container.getBoundingClientRect();\n\n this.#handlers = {\n down: ((e: PointerEvent) => {\n this.#dragging = true;\n this.#container.style.cursor = \"grabbing\";\n this.#qDown = { ...this.#qNow };\n const r = rect();\n this.#vDown = this.#screenToSphere(\n e.clientX - r.left,\n e.clientY - r.top,\n r.width,\n r.height,\n );\n this.#velY = 0;\n this.#velX = 0;\n }) as EventListener,\n move: ((e: PointerEvent) => {\n if (!this.#dragging) return;\n const r = rect();\n const vCur = this.#screenToSphere(e.clientX - r.left, e.clientY - r.top, r.width, r.height);\n const vA = this.#vDown;\n const dot = vA.x * vCur.x + vA.y * vCur.y + vA.z * vCur.z;\n // Shoemake arcball 四元数\n // Shoemake arcball quaternion\n const revX = this.#opts.reverse \|\| this.#opts.reverseX ? -1 : 1;\n const revY = this.#opts.reverse \|\| this.#opts.reverseY ? -1 : 1;\n const qDrag = {\n w: 1 + dot,\n x: (vA.y * vCur.z - vA.z * vCur.y) * revX,\n y: (vA.x * vCur.z - vA.z * vCur.x) * revY,\n z: (vA.x * vCur.y - vA.y * vCur.x) * revX * revY,\n };\n const len = Math.sqrt(qDrag.w 2 + qDrag.x 2 + qDrag.y 2 + qDrag.z 2);\n qDrag.w /= len;\n qDrag.x /= len;\n qDrag.y /= len;\n qDrag.z /= len;\n // 组合\n // compose\n const qD = this.#qDown;\n this.#qNow = {\n w: qDrag.w * qD.w - qDrag.x * qD.x - qDrag.y * qD.y - qDrag.z * qD.z,\n x: qDrag.w * qD.x + qDrag.x * qD.w + qDrag.y * qD.z - qDrag.z * qD.y,\n y: qDrag.w * qD.y - qDrag.x * qD.z + qDrag.y * qD.w + qDrag.z * qD.x,\n z: qDrag.w * qD.z + qDrag.x * qD.y - qDrag.y * qD.x + qDrag.z * qD.w,\n };\n // 拖拽速度\n // drag velocity\n const sens = this.#opts.dragSensitivity;\n this.#velY = (qDrag.y / len) * sens;\n this.#velX = (qDrag.x / len) * sens;\n }) as EventListener,\n up: () => {\n this.#dragging = false;\n this.#container.style.cursor = \"grab\";\n },\n };\n\n this.#container.addEventListener(\"pointerdown\", this.#handlers.down);\n window.addEventListener(\"pointermove\", this.#handlers.move);\n window.addEventListener(\"pointerup\", this.#handlers.up);\n }\n\n /** 屏幕坐标 → 球面 3D 点 /\n /* screen coords → sphere 3D point /\n #screenToSphere(\n sx: number,\n sy: number,\n w: number,\n h: number,\n ): { x: number; y: number; z: number } {\n const x = (sx / w) 2 - 1;\n const y = -((sy / h) * 2 - 1);\n const r2 = x * x + y * y;\n if (r2 > 1) {\n // 球外 → 投影到球边缘\n // outside sphere → project to edge\n const inv = 1 / Math.sqrt(r2);\n return { x: x * inv, y: y * inv, z: 0 };\n }\n return { x, y, z: Math.sqrt(1 - r2) };\n }\n\n #loop = (): void => {\n if (!this.#paused) this.#tick();\n this.#raf = requestAnimationFrame(this.#loop);\n };\n\n /** 绕 Y 轴旋转 /\n /* rotate around Y axis /\n #rotateY(deg: number): void {\n const half = (deg Math.PI) / 360;\n const qY = { w: Math.cos(half), x: 0, y: Math.sin(half), z: 0 };\n const q = this.#qNow;\n this.#qNow = {\n w: qY.w * q.w - qY.y * q.y,\n x: qY.w * q.x + qY.y * q.z,\n y: qY.w * q.y + qY.y * q.w,\n z: qY.w * q.z - qY.y * q.x,\n };\n }\n\n /** 绕 X 轴旋转 /\n /* rotate around X axis /\n #rotateX(deg: number): void {\n const half = (deg Math.PI) / 360;\n const qX = { w: Math.cos(half), x: Math.sin(half), y: 0, z: 0 };\n const q = this.#qNow;\n this.#qNow = {\n w: qX.w * q.w - qX.x * q.x,\n x: qX.w * q.x + qX.x * q.w,\n y: qX.w * q.y - qX.x * q.z,\n z: qX.w * q.z + qX.x * q.y,\n };\n }\n\n #tick(): void {\n const rect = this.#container.getBoundingClientRect();\n const cx = rect.width / 2;\n const cy = rect.height / 2;\n\n // 自旋 + 惯性\n // auto-spin + inertia\n const revY = this.#opts.reverse \|\| this.#opts.reverseY ? -1 : 1;\n const revX = this.#opts.reverse \|\| this.#opts.reverseX ? -1 : 1;\n const decay = this.#opts.inertiaDecay;\n if (!this.#dragging) {\n this.#rotateY((this.#opts.spinY + this.#velY) * revY);\n this.#rotateX((this.#opts.spinX + this.#velX) * revX);\n this.#velY = decay;\n this.#velX = decay;\n }\n\n // 四元数构造 3×3 旋转矩阵\n // build 3×3 rotation matrix from quaternion\n const { w, x, y, z } = this.#qNow;\n const m00 = 1 - 2 * (y * y + z * z);\n const m01 = 2 * (x * y - w * z);\n const m02 = 2 * (x * z + w * y);\n const m10 = 2 * (x * y + w * z);\n const m11 = 1 - 2 * (x * x + z * z);\n const m12 = 2 * (y * z - w * x);\n const m20 = 2 * (x * z - w * y);\n const m21 = 2 * (y * z + w * x);\n\n const d2 = this.#depth * 2;\n const projected: TagData[] = [];\n\n for (const p of this.#points) {\n // 矩阵 × 点\n // matrix × point\n const rx = m00 * p.x + m01 * p.y + m02 * p.z;\n const ry = m10 * p.x + m11 * p.y + m12 * p.z;\n const rz = m20 * p.x + m21 * p.y + (1 - 2 * (x * x + y * y)) * p.z;\n\n const per = d2 / (d2 + rz);\n const alpha = Math.min(1, Math.max(0, per * per - 0.25));\n\n projected.push({\n text: p.text,\n x: cx + rx * per,\n y: cy + ry * per,\n z: rz,\n scale: per,\n alpha,\n });\n }\n\n this.#opts.onRender(projected.sort((a, b) => b.z - a.z));\n }\n}\n\nexport default TagCloud;\n","/*\n 3D 旋转变换\n * 3D rotation transforms\n \n 绕 Y 轴和 X 轴旋转球面上的所有点\n * Rotates all points around Y and X axes\n \n ported from TagCloud.js _next() rotation logic\n /\n\nimport type { Vec3 } from \"./distribution\";\n\n/\n 旋转单个 3D 点\n * Rotate a single 3D point\n \n @param p - 待旋转的点\n * @param p - point to rotate\n * @param a - 绕 Y 轴的旋转角（弧度）\n * @param a - Y-axis rotation angle (radians)\n * @param b - 绕 X 轴的旋转角（弧度）\n * @param b - X-axis rotation angle (radians)\n /\nexport function rotatePoint(p: Vec3, a: number, b: number): Vec3 {\n const sinA = Math.sin(a);\n const cosA = Math.cos(a);\n const sinB = Math.sin(b);\n const cosB = Math.cos(b);\n\n // Y 轴旋转\n // Y-axis rotation\n const y1 = p.y cosA + p.z * -sinA;\n const z1 = p.y * sinA + p.z * cosA;\n\n // X 轴旋转\n // X-axis rotation\n const x2 = p.x * cosB + z1 * sinB;\n const z2 = z1 * cosB - p.x * sinB;\n\n return { x: x2, y: y1, z: z2 };\n}\n\n/*\n 批量旋转所有点\n * Rotate all points in batch\n /\nexport function rotatePoints(points: Vec3[], a: number, b: number): Vec3[] {\n const sinA = Math.sin(a);\n const cosA = Math.cos(a);\n const sinB = Math.sin(b);\n const cosB = Math.cos(b);\n\n return points.map((p) => {\n const y1 = p.y cosA + p.z * -sinA;\n const z1 = p.y * sinA + p.z * cosA;\n const x2 = p.x * cosB + z1 * sinB;\n return { x: x2, y: y1, z: z1 * cosB - p.x * sinB };\n });\n}\n","/*\n 透视投影\n * Perspective projection\n \n 根据 Z 深度计算每个标签的缩放比例和透明度\n * Calculates scale and alpha for each tag based on Z depth\n \n per = (2 × depth) / (2 × depth + z)\n * scale = per\n * alpha = per² − 0.25 → clamped [0, 1]\n \n ported from TagCloud.js _next() projection logic\n /\n\nexport interface ProjectedTag {\n /* 原始 X 坐标 /\n /* original X coordinate /\n x: number;\n /* 原始 Y 坐标 /\n /* original Y coordinate /\n y: number;\n /* 原始 Z 深度 /\n /* original Z depth /\n z: number;\n /* 缩放比例 (1 = 最近, 0 = 最远) /\n /* scale factor (1 = nearest, 0 = farthest) /\n scale: number;\n /* 透明度 (1 = 最前, 0 = 最后) /\n /* opacity (1 = front, 0 = back) /\n alpha: number;\n}\n\n/\n 对旋转后的点做透视投影\n * Apply perspective projection to rotated points\n \n @param points — 旋转后的 3D 点\n * @param points — rotated 3D points\n * @param depth — 透视深度 = 2 × 球半径\n * @param depth — perspective depth = 2 × sphere radius\n /\nexport function project(\n points: { x: number; y: number; z: number }[],\n depth: number,\n): ProjectedTag[] {\n const d2 = 2 depth;\n return points.map((p) => {\n // 透视缩放\n // perspective scale\n const per = d2 / (d2 + p.z);\n // 透明度从 per² − 0.25 计算\n // alpha derived from per² − 0.25\n const alpha = Math.min(1, Math.max(0, per * per - 0.25));\n return { x: p.x, y: p.y, z: p.z, scale: per, alpha };\n });\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["#container","#opts","#radius","#depth","#canvasRender","#initTags","#bindEvents","#bindClicks","#loop","#paused","#raf","#handlers","#canvas","#overlay","#points","#dragging","#qDown","#qNow","#vDown","#screenToSphere","#velY","#velX","#dragged","#lastCanvasTags","#ctx","#resizeCanvas","#domEls","#createDomTag","#tick","#rotateY","#rotateX"],"sources":["../src/core/distribution.ts","../src/TagCloud.ts","../src/core/rotation.ts","../src/core/projection.ts"],"sourcesContent":["/*\n 斐波那契球面分布\n * Fibonacci sphere distribution\n \n 将 N 个点均匀分布在球面上，避免两极聚集\n * Evenly distributes N points on a sphere, avoiding polar clustering\n \n ported from TagCloud.js _computePosition\n /\n\nexport interface Vec3 {\n x: number;\n y: number;\n z: number;\n}\n\n/\n 生成球面上均匀分布的 N 个点\n * Generate N evenly distributed points on a sphere of radius R\n /\nexport function fibonacciSphere(n: number, R: number): Vec3[] {\n const points: Vec3[] = [];\n for (let i = 0; i < n; i++) {\n // φ = acos(1 - 2(i+0.5)/N) — 纬度均匀分布\n // φ = acos(1 - 2(i+0.5)/N) — uniform latitude\n const phi = Math.acos(-1 + (2 i + 1) / n);\n // θ = √(Nπ) × φ — 经度黄金比例螺旋\n // θ = √(Nπ) × φ — golden ratio spiral for longitude\n const theta = Math.sqrt(n * Math.PI) * phi;\n points.push({\n x: R * Math.cos(theta) * Math.sin(phi),\n y: R * Math.sin(theta) * Math.sin(phi),\n z: R * Math.cos(phi),\n });\n }\n return points;\n}\n","/*\n 3D 标签云 — 纯数学引擎\n * 3D Tag Cloud — Pure Math Engine\n \n 零 DOM 渲染，每帧通过 onRender 回调输出投影坐标\n * Zero DOM rendering, outputs projected coords via onRender callback each frame\n \n 基于 cong-min/TagCloud 算法\n * Based on cong-min/TagCloud algorithm\n /\nimport { fibonacciSphere } from \"./core/distribution\";\n\n// ── 标签项类型\n// ── Tag Item Types\n\n/* 图片标签 /\nexport interface ImageTag {\n type: \"image\";\n src: string;\n width: number;\n height: number;\n onClick?: () => void;\n}\n\n/* SVG 标签 /\nexport interface SvgTag {\n type: \"svg\";\n content: string;\n width: number;\n height: number;\n onClick?: () => void;\n}\n\n/* HTML 标签（支持 innerHTML 字符串） /\nexport interface HtmlTag {\n type: \"html\";\n html: string;\n onClick?: () => void;\n}\n\n/* 视频标签 /\nexport interface VideoTag {\n type: \"video\";\n src: string;\n width: number;\n height: number;\n onClick?: () => void;\n}\n\n/* 任意 DOM 元素标签 /\nexport interface ElementTag {\n type: \"element\";\n element: HTMLElement;\n onClick?: () => void;\n}\n\n/* 标签内容：字符串 = 纯文本（Canvas 渲染），对象 = 富媒体 /\n/* Tag content: string = plain text (Canvas), object = rich media /\nexport type TagItem = string \| ImageTag \| SvgTag \| HtmlTag \| VideoTag \| ElementTag;\n\n// ── 通用类型\n// ── Common Types\n\n/* 投影后的标签数据 /\n/* Projected tag data /\nexport interface TagData {\n /* 原始标签项 /\n item: TagItem;\n /* 容器内 X 坐标（像素） /\n x: number;\n /* 容器内 Y 坐标（像素） /\n y: number;\n /* Z 深度（-radius ~ +radius） /\n z: number;\n /* 缩放比例 (0 ~ 1+) /\n scale: number;\n /* 透明度 (0 ~ 1) /\n alpha: number;\n}\n\nexport interface TagCloudOptions {\n /* 标签列表（字符串 = 纯文本，对象 = 富媒体） /\n /* tag list (string = plain text, object = rich media) /\n tags: TagItem[];\n /* 球面半径（px） /\n /* sphere radius (px) (default 300) /\n radius?: number;\n /* Canvas 宽度（px） /\n /* canvas width in px (default follows container) /\n width?: number;\n /* Canvas 高度（px） /\n /* canvas height in px (default follows container) /\n height?: number;\n /* 绕 Y 轴自旋速度（°/帧）: +右转 -左转 0=关 /\n /* Y-axis auto-spin speed (°/frame): +right -left 0=off (default 0) /\n spinY?: number;\n /* 绕 X 轴自旋速度（°/帧）: +下转 -上转 0=关 /\n /* X-axis auto-spin speed (°/frame): +down -up 0=off (default 0) /\n spinX?: number;\n /* 反转方向（X+Y 同时） /\n /* reverse both axes (default false) /\n reverse?: boolean;\n /* 单独反转 X 轴（上下拖拽） /\n /* reverse X-axis drag only (default false) /\n reverseX?: boolean;\n /* 反转 Y 轴拖拽方向 /\n /* reverse Y-axis drag direction (default false) /\n reverseY?: boolean;\n /* 惯性衰减系数（每帧乘以此值） /\n /* inertia decay per frame (default 0.96) /\n inertiaDecay?: number;\n /* 拖拽灵敏度（松手后惯性速度倍率） /\n /* drag sensitivity for release velocity (default 3) /\n dragSensitivity?: number;\n /* 字体 /\n /* font family (default \"system-ui, sans-serif\") /\n fontFamily?: string;\n /* 基础字号（px） /\n /* base font size in px (default 14) /\n fontSize?: number;\n /* 文字颜色 /\n /* text color (default \"#ffffff\") /\n color?: string;\n /* 全局标签点击回调（所有标签共用，通过 tag 文本区分） /\n /* global click callback for all tags (distinguish by tag text) /\n onTagClick?: (item: TagItem) => void;\n /* 视频标签点击全屏 / video tags click to fullscreen (default true) /\n videoFullscreen?: boolean;\n /* 自定义渲染回调（如不提供则用内置 Canvas） /\n /* custom render callback (built-in Canvas if omitted) /\n onRender?: (tags: TagData[]) => void;\n}\n\n// ── 内部类型\n// ── Internal Types\n\ninterface SpherePoint {\n x: number;\n y: number;\n z: number;\n item: TagItem;\n}\n\ntype ResolvedOptions = TagCloudOptions & Required<Omit<TagCloudOptions, \"onRender\">>;\n\nconst DEFAULTS: Omit<ResolvedOptions, \"tags\" \| \"onRender\"> = {\n radius: 300,\n width: 0,\n height: 0,\n spinY: 0,\n spinX: 0,\n reverse: false,\n reverseX: false,\n reverseY: false,\n inertiaDecay: 0.96,\n dragSensitivity: 3,\n fontFamily: \"system-ui, sans-serif\",\n fontSize: 14,\n videoFullscreen: true,\n color: \"#ffffff\",\n};\n\n/* 判断是否为对象类型的标签 /\nfunction isObjectTag(item: TagItem): item is Exclude<TagItem, string> {\n return typeof item !== \"string\";\n}\n\n// ── 主类\n// ── Main Class\n\nexport class TagCloud {\n #opts: ResolvedOptions;\n #points: SpherePoint[] = [];\n #radius: number;\n #depth: number;\n\n // 旋转状态 — 四元数\n #qNow = { w: 1, x: 0, y: 0, z: 0 };\n #qDown = { w: 1, x: 0, y: 0, z: 0 };\n #velY = 0;\n #velX = 0;\n #paused = false;\n\n // 拖拽状态\n #dragging = false;\n #dragged = false;\n #vDown = { x: 0, y: 0, z: 0 };\n\n // 内存\n #raf = 0;\n #container: HTMLElement;\n #handlers!: { down: EventListener; move: EventListener; up: EventListener };\n\n // 内置 Canvas\n #canvas?: HTMLCanvasElement;\n #ctx?: CanvasRenderingContext2D;\n\n // DOM overlay（渲染 element/html/svg/video 标签）\n #overlay?: HTMLDivElement;\n #domEls: Map<TagItem, HTMLElement> = new Map();\n\n // 点击：存储上一帧的 Canvas 标签投影坐标，供 raycast 查找\n #lastCanvasTags: { item: TagItem; x: number; y: number; scale: number }[] = [];\n\n constructor(container: HTMLElement, options: TagCloudOptions) {\n this.#container = container;\n this.#opts = { ...DEFAULTS, ...options } as ResolvedOptions;\n this.#radius = this.#opts.radius;\n this.#depth = 2 this.#radius;\n\n if (!this.#opts.onRender) {\n this.#opts.onRender = this.#canvasRender;\n }\n\n this.#initTags(this.#opts.tags);\n this.#bindEvents();\n this.#bindClicks();\n this.#loop();\n }\n\n // ── 公开 API\n // ── Public API\n\n setTags(tags: TagItem[]): void {\n this.#initTags(tags);\n }\n pause(): void {\n this.#paused = true;\n }\n resume(): void {\n this.#paused = false;\n }\n\n destroy(): void {\n cancelAnimationFrame(this.#raf);\n const h = this.#handlers;\n this.#container.removeEventListener(\"pointerdown\", h.down);\n window.removeEventListener(\"pointermove\", h.move);\n window.removeEventListener(\"pointerup\", h.up);\n if (this.#canvas) this.#canvas.remove();\n if (this.#overlay) this.#overlay.remove();\n }\n\n // ── 内部方法\n // ── Internal\n\n #initTags(tags: TagItem[]): void {\n const size = 1.5 * this.#radius;\n const positions = fibonacciSphere(tags.length, size / 2);\n this.#points = positions.map((p, i) => ({ ...p, item: tags[i]! }));\n }\n\n #bindEvents(): void {\n this.#container.style.cursor = \"grab\";\n const rect = () => this.#container.getBoundingClientRect();\n\n this.#handlers = {\n down: ((e: PointerEvent) => {\n this.#dragging = true;\n this.#container.style.cursor = \"grabbing\";\n this.#qDown = { ...this.#qNow };\n const r = rect();\n this.#vDown = this.#screenToSphere(\n e.clientX - r.left,\n e.clientY - r.top,\n r.width,\n r.height,\n );\n this.#velY = 0;\n this.#velX = 0;\n }) as EventListener,\n move: ((e: PointerEvent) => {\n if (!this.#dragging) return;\n this.#dragged = true;\n const r = rect();\n const vCur = this.#screenToSphere(e.clientX - r.left, e.clientY - r.top, r.width, r.height);\n const vA = this.#vDown;\n const dot = vA.x * vCur.x + vA.y * vCur.y + vA.z * vCur.z;\n // Shoemake arcball 四元数\n const revX = this.#opts.reverse \|\| this.#opts.reverseX ? -1 : 1;\n const revY = this.#opts.reverse \|\| this.#opts.reverseY ? -1 : 1;\n const qDrag = {\n w: 1 + dot,\n x: (vA.y * vCur.z - vA.z * vCur.y) * revX,\n y: (vA.x * vCur.z - vA.z * vCur.x) * revY,\n z: (vA.x * vCur.y - vA.y * vCur.x) * revX * revY,\n };\n const len = Math.sqrt(qDrag.w 2 + qDrag.x 2 + qDrag.y 2 + qDrag.z 2);\n qDrag.w /= len;\n qDrag.x /= len;\n qDrag.y /= len;\n qDrag.z /= len;\n const qD = this.#qDown;\n this.#qNow = {\n w: qDrag.w * qD.w - qDrag.x * qD.x - qDrag.y * qD.y - qDrag.z * qD.z,\n x: qDrag.w * qD.x + qDrag.x * qD.w + qDrag.y * qD.z - qDrag.z * qD.y,\n y: qDrag.w * qD.y - qDrag.x * qD.z + qDrag.y * qD.w + qDrag.z * qD.x,\n z: qDrag.w * qD.z + qDrag.x * qD.y - qDrag.y * qD.x + qDrag.z * qD.w,\n };\n const sens = this.#opts.dragSensitivity;\n this.#velY = (qDrag.y / len) * sens;\n this.#velX = (qDrag.x / len) * sens;\n }) as EventListener,\n up: () => {\n this.#dragging = false;\n this.#container.style.cursor = \"grab\";\n setTimeout(() => { this.#dragged = false; }, 0);\n },\n };\n\n this.#container.addEventListener(\"pointerdown\", this.#handlers.down);\n window.addEventListener(\"pointermove\", this.#handlers.move);\n window.addEventListener(\"pointerup\", this.#handlers.up);\n }\n\n #bindClicks(): void {\n this.#container.addEventListener(\"click\", (e) => {\n if (this.#dragged) return;\n const r = this.#container.getBoundingClientRect();\n const cx = e.clientX - r.left;\n const cy = e.clientY - r.top;\n let best: { item: TagItem; dist: number } \| null = null;\n for (const t of this.#lastCanvasTags) {\n if (typeof t.item !== \"string\" && !t.item.onClick) continue;\n const dx = cx - t.x;\n const dy = cy - t.y;\n const d = Math.sqrt(dx * dx + dy * dy);\n const rw = t.item.type === \"image\" ? t.item.width / 2 : 30;\n const hitRadius = rw * t.scale;\n if (d < hitRadius && (!best \|\| d < best.dist)) {\n best = { item: t.item, dist: d };\n }\n }\n if (best) {\n const item = best.item;\n if (isObjectTag(item) && item.onClick) item.onClick();\n if (this.#opts.onTagClick) this.#opts.onTagClick(item);\n }\n });\n }\n\n /** 屏幕坐标 → 球面 3D 点 /\n #screenToSphere(\n sx: number,\n sy: number,\n w: number,\n h: number,\n ): { x: number; y: number; z: number } {\n const x = (sx / w) 2 - 1;\n const y = -((sy / h) * 2 - 1);\n const r2 = x * x + y * y;\n if (r2 > 1) {\n const inv = 1 / Math.sqrt(r2);\n return { x: x * inv, y: y * inv, z: 0 };\n }\n return { x, y, z: Math.sqrt(1 - r2) };\n }\n\n /** 内置 Canvas 渲染器（文本 + 图片） /\n #canvasRender = (tags: TagData[]): void => {\n if (!this.#canvas) {\n const c = document.createElement(\"canvas\");\n if (this.#opts.width) { c.style.width = `${this.#opts.width}px`; this.#container.style.width = `${this.#opts.width}px`; }\n else c.style.width = \"100%\";\n if (this.#opts.height) { c.style.height = `${this.#opts.height}px`; this.#container.style.height = `${this.#opts.height}px`; }\n else c.style.height = \"100%\";\n this.#container.appendChild(c);\n this.#canvas = c;\n this.#ctx = c.getContext(\"2d\")!;\n this.#resizeCanvas();\n }\n // 初始化 DOM overlay\n if (!this.#overlay) {\n this.#container.style.position = \"relative\";\n const o = document.createElement(\"div\");\n o.style.position = \"absolute\";\n o.style.inset = \"0\";\n o.style.pointerEvents = \"none\";\n o.style.overflow = \"hidden\";\n this.#container.appendChild(o);\n this.#overlay = o;\n }\n const { width, height } = this.#canvas.getBoundingClientRect();\n const ctx = this.#ctx!;\n ctx.clearRect(0, 0, width, height);\n\n // 保存文本标签坐标（用于点击 raycast）\n const canvasTags: { item: TagItem; x: number; y: number; scale: number }[] = [];\n const currentDoms = new Set<TagItem>();\n\n // 先加载需要的图片\n const imageCache = new Map<string, HTMLImageElement>();\n const pendingImages: Promise<void>[] = [];\n\n for (const t of tags) {\n if (typeof t.item === \"string\") {\n // 文本标签\n const { fontFamily, fontSize, color } = this.#opts;\n ctx.save();\n ctx.globalAlpha = t.alpha;\n ctx.font = `${fontSize + t.scale 5}px ${fontFamily}`;\n ctx.fillStyle = color;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(t.item, t.x, t.y);\n ctx.restore();\n canvasTags.push({ item: t.item, x: t.x, y: t.y, scale: t.scale });\n } else if (t.item.type === \"image\") {\n // 图片标签 — Canvas drawImage()\n let img = imageCache.get(t.item.src);\n if (!img) {\n img = new Image();\n img.src = t.item.src;\n imageCache.set(t.item.src, img);\n pendingImages.push(\n new Promise((r) => {\n img!.onload = () => r();\n }),\n );\n }\n const { width: iw, height: ih } = t.item;\n const sw = iw * t.scale;\n const sh = ih * t.scale;\n ctx.save();\n ctx.globalAlpha = t.alpha;\n ctx.drawImage(img, t.x - sw / 2, t.y - sh / 2, sw, sh);\n ctx.restore();\n canvasTags.push({ item: t.item, x: t.x, y: t.y, scale: t.scale });\n } else {\n // DOM 标签（element/html/svg/video）→ overlay 渲染\n currentDoms.add(t.item);\n let el = this.#domEls.get(t.item);\n if (!el) {\n el = this.#createDomTag(t.item);\n this.#domEls.set(t.item, el);\n this.#overlay!.appendChild(el);\n }\n el.style.transform = `translate3d(${t.x.toFixed(1)}px, ${t.y.toFixed(1)}px, 0) scale(${t.scale.toFixed(2)})`;\n el.style.opacity = String(t.alpha);\n el.style.zIndex = String(Math.round(t.scale * 100));\n canvasTags.push({ item: t.item, x: t.x, y: t.y, scale: t.scale });\n }\n }\n\n // 清理已移除的 DOM 标签\n for (const [item, el] of this.#domEls) {\n if (!currentDoms.has(item)) {\n el.remove();\n this.#domEls.delete(item);\n }\n }\n\n this.#lastCanvasTags = canvasTags;\n };\n\n /** 为富媒体标签创建 DOM 元素 /\n #createDomTag(item: Exclude<TagItem, string>): HTMLElement {\n const el = document.createElement(\"div\");\n el.style.position = \"absolute\";\n el.style.top = \"0\";\n el.style.left = \"0\";\n el.style.willChange = \"transform, opacity\";\n const clickable = !!(item.onClick \|\| (item.type === \"video\" && this.#opts.videoFullscreen));\n el.style.cursor = clickable ? \"pointer\" : \"default\";\n el.style.pointerEvents = clickable ? \"auto\" : \"none\";\n if (item.type === \"element\") el.appendChild(item.element);\n else if (item.type === \"html\") el.innerHTML = item.html;\n else if (item.type === \"svg\") el.innerHTML = item.content;\n else if (item.type === \"video\") {\n el.innerHTML = `<video src=\"${item.src}\" width=\"${item.width}\" height=\"${item.height}\" autoplay muted loop playsinline></video>`;\n if (this.#opts.videoFullscreen) {\n el.addEventListener(\"click\", () => {\n const v = el.querySelector(\"video\")!;\n if (document.fullscreenElement) { document.exitFullscreen(); }\n else { v.play(); v.requestFullscreen(); }\n });\n }\n }\n if (item.onClick \|\| this.#opts.onTagClick) {\n el.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n if (item.onClick) item.onClick();\n if (this.#opts.onTagClick) this.#opts.onTagClick(item);\n });\n }\n return el;\n }\n\n #resizeCanvas(): void {\n const c = this.#canvas;\n if (!c) return;\n const dpr = window.devicePixelRatio \|\| 1;\n const { width, height } = c.getBoundingClientRect();\n c.width = width dpr;\n c.height = height * dpr;\n this.#ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);\n }\n\n #loop = (): void => {\n if (!this.#paused) this.#tick();\n this.#raf = requestAnimationFrame(this.#loop);\n };\n\n #rotateY(deg: number): void {\n const half = (deg * Math.PI) / 360;\n const qY = { w: Math.cos(half), x: 0, y: Math.sin(half), z: 0 };\n const q = this.#qNow;\n this.#qNow = {\n w: qY.w * q.w - qY.y * q.y,\n x: qY.w * q.x + qY.y * q.z,\n y: qY.w * q.y + qY.y * q.w,\n z: qY.w * q.z - qY.y * q.x,\n };\n }\n\n #rotateX(deg: number): void {\n const half = (deg * Math.PI) / 360;\n const qX = { w: Math.cos(half), x: Math.sin(half), y: 0, z: 0 };\n const q = this.#qNow;\n this.#qNow = {\n w: qX.w * q.w - qX.x * q.x,\n x: qX.w * q.x + qX.x * q.w,\n y: qX.w * q.y - qX.x * q.z,\n z: qX.w * q.z + qX.x * q.y,\n };\n }\n\n #tick(): void {\n const rect = this.#container.getBoundingClientRect();\n const cx = rect.width / 2;\n const cy = rect.height / 2;\n\n // 自旋 + 惯性\n const revY = this.#opts.reverse \|\| this.#opts.reverseY ? -1 : 1;\n const revX = this.#opts.reverse \|\| this.#opts.reverseX ? -1 : 1;\n const decay = this.#opts.inertiaDecay;\n if (!this.#dragging) {\n this.#rotateY((this.#opts.spinY + this.#velY) * revY);\n this.#rotateX((this.#opts.spinX + this.#velX) * revX);\n this.#velY = decay;\n this.#velX = decay;\n }\n\n // 四元数构造旋转矩阵\n const { w, x, y, z } = this.#qNow;\n const m00 = 1 - 2 * (y * y + z * z);\n const m01 = 2 * (x * y - w * z);\n const m02 = 2 * (x * z + w * y);\n const m10 = 2 * (x * y + w * z);\n const m11 = 1 - 2 * (x * x + z * z);\n const m12 = 2 * (y * z - w * x);\n const m20 = 2 * (x * z - w * y);\n const m21 = 2 * (y * z + w * x);\n\n const d2 = this.#depth * 2;\n const projected: TagData[] = [];\n\n for (const p of this.#points) {\n const rx = m00 * p.x + m01 * p.y + m02 * p.z;\n const ry = m10 * p.x + m11 * p.y + m12 * p.z;\n const rz = m20 * p.x + m21 * p.y + (1 - 2 * (x * x + y * y)) * p.z;\n\n const per = d2 / (d2 + rz);\n const alpha = Math.min(1, Math.max(0, per * per - 0.25));\n\n projected.push({\n item: p.item,\n x: cx + rx * per,\n y: cy + ry * per,\n z: rz,\n scale: per,\n alpha,\n });\n }\n\n this.#opts.onRender(projected.sort((a, b) => b.z - a.z));\n }\n}\n\nexport default TagCloud;\n","/*\n 3D 旋转变换\n * 3D rotation transforms\n \n 绕 Y 轴和 X 轴旋转球面上的所有点\n * Rotates all points around Y and X axes\n \n ported from TagCloud.js _next() rotation logic\n /\n\nimport type { Vec3 } from \"./distribution\";\n\n/\n 旋转单个 3D 点\n * Rotate a single 3D point\n \n @param p - 待旋转的点\n * @param p - point to rotate\n * @param a - 绕 Y 轴的旋转角（弧度）\n * @param a - Y-axis rotation angle (radians)\n * @param b - 绕 X 轴的旋转角（弧度）\n * @param b - X-axis rotation angle (radians)\n /\nexport function rotatePoint(p: Vec3, a: number, b: number): Vec3 {\n const sinA = Math.sin(a);\n const cosA = Math.cos(a);\n const sinB = Math.sin(b);\n const cosB = Math.cos(b);\n\n // Y 轴旋转\n // Y-axis rotation\n const y1 = p.y cosA + p.z * -sinA;\n const z1 = p.y * sinA + p.z * cosA;\n\n // X 轴旋转\n // X-axis rotation\n const x2 = p.x * cosB + z1 * sinB;\n const z2 = z1 * cosB - p.x * sinB;\n\n return { x: x2, y: y1, z: z2 };\n}\n\n/*\n 批量旋转所有点\n * Rotate all points in batch\n /\nexport function rotatePoints(points: Vec3[], a: number, b: number): Vec3[] {\n const sinA = Math.sin(a);\n const cosA = Math.cos(a);\n const sinB = Math.sin(b);\n const cosB = Math.cos(b);\n\n return points.map((p) => {\n const y1 = p.y cosA + p.z * -sinA;\n const z1 = p.y * sinA + p.z * cosA;\n const x2 = p.x * cosB + z1 * sinB;\n return { x: x2, y: y1, z: z1 * cosB - p.x * sinB };\n });\n}\n","/*\n 透视投影\n * Perspective projection\n \n 根据 Z 深度计算每个标签的缩放比例和透明度\n * Calculates scale and alpha for each tag based on Z depth\n \n per = (2 × depth) / (2 × depth + z)\n * scale = per\n * alpha = per² − 0.25 → clamped [0, 1]\n \n ported from TagCloud.js _next() projection logic\n /\n\nexport interface ProjectedTag {\n /* 原始 X 坐标 /\n /* original X coordinate /\n x: number;\n /* 原始 Y 坐标 /\n /* original Y coordinate /\n y: number;\n /* 原始 Z 深度 /\n /* original Z depth /\n z: number;\n /* 缩放比例 (1 = 最近, 0 = 最远) /\n /* scale factor (1 = nearest, 0 = farthest) /\n scale: number;\n /* 透明度 (1 = 最前, 0 = 最后) /\n /* opacity (1 = front, 0 = back) /\n alpha: number;\n}\n\n/\n 对旋转后的点做透视投影\n * Apply perspective projection to rotated points\n \n @param points — 旋转后的 3D 点\n * @param points — rotated 3D points\n * @param depth — 透视深度 = 2 × 球半径\n * @param depth — perspective depth = 2 × sphere radius\n /\nexport function project(\n points: { x: number; y: number; z: number }[],\n depth: number,\n): ProjectedTag[] {\n const d2 = 2 depth;\n return points.map((p) => {\n // 透视缩放\n // perspective scale\n const per = d2 / (d2 + p.z);\n // 透明度从 per² − 0.25 计算\n // alpha derived from per² − 0.25\n const alpha = Math.min(1, Math.max(0, per * per - 0.25));\n return { x: p.x, y: p.y, z: p.z, scale: per, alpha };\n });\n}\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,10 +1,21 @@
 {
   "name": "@xingwangzhe/tags-cloud",
-  "version": "0.5.0",
+  "version": "0.9.0",
   "description": "Canvas-driven 3D tag cloud engine",
-  "keywords": ["3d", "canvas", "sphere", "tag-cloud", "tags"],
+  "keywords": [
+    "3d",
+    "canvas",
+    "sphere",
+    "tag-cloud",
+    "tags"
+  ],
   "license": "MIT",
-  "files": ["dist", "src/core", "src/index.ts", "src/TagCloud.ts"],
+  "files": [
+    "dist",
+    "src/core",
+    "src/index.ts",
+    "src/TagCloud.ts"
+  ],
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -18,6 +29,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:demo": "vite build -c vite.demo.config.ts",
     "fmt": "oxfmt",
     "fmt:check": "oxfmt --check",
     "lint": "oxlint",

package/src/TagCloud.ts CHANGED Viewed

@@ -10,37 +10,87 @@
  */
 import { fibonacciSphere } from "./core/distribution";
-// ── 类型
-// ── Types
+// ── 标签项类型
+// ── Tag Item Types
+/** 图片标签 */
+export interface ImageTag {
+  type: "image";
+  src: string;
+  width: number;
+  height: number;
+  onClick?: () => void;
+}
+/** SVG 标签 */
+export interface SvgTag {
+  type: "svg";
+  content: string;
+  width: number;
+  height: number;
+  onClick?: () => void;
+}
+/** HTML 标签（支持 innerHTML 字符串） */
+export interface HtmlTag {
+  type: "html";
+  html: string;
+  onClick?: () => void;
+}
+/** 视频标签 */
+export interface VideoTag {
+  type: "video";
+  src: string;
+  width: number;
+  height: number;
+  onClick?: () => void;
+}
+/** 任意 DOM 元素标签 */
+export interface ElementTag {
+  type: "element";
+  element: HTMLElement;
+  onClick?: () => void;
+}
+/** 标签内容：字符串 = 纯文本（Canvas 渲染），对象 = 富媒体 */
+/** Tag content: string = plain text (Canvas), object = rich media */
+export type TagItem = string | ImageTag | SvgTag | HtmlTag | VideoTag | ElementTag;
+// ── 通用类型
+// ── Common Types
 /** 投影后的标签数据 */
 /** Projected tag data */
 export interface TagData {
-  text: string;
+  /** 原始标签项 */
+  item: TagItem;
   /** 容器内 X 坐标（像素） */
-  /** X coordinate in container (px) */
   x: number;
   /** 容器内 Y 坐标（像素） */
-  /** Y coordinate in container (px) */
   y: number;
   /** Z 深度（-radius ~ +radius） */
-  /** Z depth */
   z: number;
   /** 缩放比例 (0 ~ 1+) */
-  /** scale factor */
   scale: number;
   /** 透明度 (0 ~ 1) */
-  /** opacity */
   alpha: number;
 }
 export interface TagCloudOptions {
-  /** 标签文本数组 */
-  /** tag text array */
-  tags: string[];
+  /** 标签列表（字符串 = 纯文本，对象 = 富媒体） */
+  /** tag list (string = plain text, object = rich media) */
+  tags: TagItem[];
   /** 球面半径（px） */
   /** sphere radius (px) (default 300) */
   radius?: number;
+  /** Canvas 宽度（px） */
+  /** canvas width in px (default follows container) */
+  width?: number;
+  /** Canvas 高度（px） */
+  /** canvas height in px (default follows container) */
+  height?: number;
   /** 绕 Y 轴自旋速度（°/帧）: +右转 -左转 0=关 */
   /** Y-axis auto-spin speed (°/frame): +right -left 0=off (default 0) */
   spinY?: number;
@@ -71,6 +121,11 @@ export interface TagCloudOptions {
   /** 文字颜色 */
   /** text color (default "#ffffff") */
   color?: string;
+  /** 全局标签点击回调（所有标签共用，通过 tag 文本区分） */
+  /** global click callback for all tags (distinguish by tag text) */
+  onTagClick?: (item: TagItem) => void;
+  /** 视频标签点击全屏 / video tags click to fullscreen (default true) */
+  videoFullscreen?: boolean;
   /** 自定义渲染回调（如不提供则用内置 Canvas） */
   /** custom render callback (built-in Canvas if omitted) */
   onRender?: (tags: TagData[]) => void;
@@ -83,13 +138,15 @@ interface SpherePoint {
   x: number;
   y: number;
   z: number;
-  text: string;
+  item: TagItem;
 }
 type ResolvedOptions = TagCloudOptions & Required<Omit<TagCloudOptions, "onRender">>;
 const DEFAULTS: Omit<ResolvedOptions, "tags" | "onRender"> = {
   radius: 300,
+  width: 0,
+  height: 0,
   spinY: 0,
   spinX: 0,
   reverse: false,
@@ -99,9 +156,15 @@ const DEFAULTS: Omit<ResolvedOptions, "tags" | "onRender"> = {
   dragSensitivity: 3,
   fontFamily: "system-ui, sans-serif",
   fontSize: 14,
+  videoFullscreen: true,
   color: "#ffffff",
 };
+/** 判断是否为对象类型的标签 */
+function isObjectTag(item: TagItem): item is Exclude<TagItem, string> {
+  return typeof item !== "string";
+}
 // ── 主类
 // ── Main Class
@@ -112,7 +175,6 @@ export class TagCloud {
   #depth: number;
   // 旋转状态 — 四元数
-  // rotation state as quaternion
   #qNow = { w: 1, x: 0, y: 0, z: 0 };
   #qDown = { w: 1, x: 0, y: 0, z: 0 };
   #velY = 0;
@@ -120,80 +182,46 @@ export class TagCloud {
   #paused = false;
   // 拖拽状态
-  // arcball drag state
   #dragging = false;
+  #dragged = false;
   #vDown = { x: 0, y: 0, z: 0 };
-  // 动画
-  // animation
+  // 内存
   #raf = 0;
   #container: HTMLElement;
   #handlers!: { down: EventListener; move: EventListener; up: EventListener };
-  // 内置 Canvas（仅当 onRender 未提供时创建）
-  // built-in Canvas (only when onRender is not provided)
+  // 内置 Canvas
   #canvas?: HTMLCanvasElement;
   #ctx?: CanvasRenderingContext2D;
+  // DOM overlay（渲染 element/html/svg/video 标签）
+  #overlay?: HTMLDivElement;
+  #domEls: Map<TagItem, HTMLElement> = new Map();
+  // 点击：存储上一帧的 Canvas 标签投影坐标，供 raycast 查找
+  #lastCanvasTags: { item: TagItem; x: number; y: number; scale: number }[] = [];
   constructor(container: HTMLElement, options: TagCloudOptions) {
     this.#container = container;
     this.#opts = { ...DEFAULTS, ...options } as ResolvedOptions;
     this.#radius = this.#opts.radius;
     this.#depth = 2 * this.#radius;
-    // 内置 Canvas 渲染器
-    // built-in Canvas renderer
     if (!this.#opts.onRender) {
       this.#opts.onRender = this.#canvasRender;
     }
     this.#initTags(this.#opts.tags);
     this.#bindEvents();
+    this.#bindClicks();
     this.#loop();
   }
-  /** 内置 Canvas 渲染器 */
-  /** Built-in Canvas renderer */
-  #canvasRender = (tags: TagData[]): void => {
-    if (!this.#canvas) {
-      const c = document.createElement("canvas");
-      c.style.width = "100%";
-      c.style.height = "100%";
-      this.#container.appendChild(c);
-      this.#canvas = c;
-      this.#ctx = c.getContext("2d")!;
-      this.#resizeCanvas();
-    }
-    const { width, height } = this.#canvas.getBoundingClientRect();
-    const ctx = this.#ctx!;
-    ctx.clearRect(0, 0, width, height);
-    const { fontFamily, fontSize, color } = this.#opts;
-    for (const t of tags) {
-      ctx.save();
-      ctx.globalAlpha = t.alpha;
-      ctx.font = `${fontSize + t.scale * 5}px ${fontFamily}`;
-      ctx.fillStyle = color;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-      ctx.fillText(t.text, t.x, t.y);
-      ctx.restore();
-    }
-  };
-  #resizeCanvas(): void {
-    const c = this.#canvas;
-    if (!c) return;
-    const dpr = window.devicePixelRatio || 1;
-    const { width, height } = c.getBoundingClientRect();
-    c.width = width * dpr;
-    c.height = height * dpr;
-    this.#ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);
-  }
   // ── 公开 API
   // ── Public API
-  setTags(tags: string[]): void {
+  setTags(tags: TagItem[]): void {
     this.#initTags(tags);
   }
   pause(): void {
@@ -210,20 +238,20 @@ export class TagCloud {
     window.removeEventListener("pointermove", h.move);
     window.removeEventListener("pointerup", h.up);
     if (this.#canvas) this.#canvas.remove();
+    if (this.#overlay) this.#overlay.remove();
   }
   // ── 内部方法
   // ── Internal
-  #initTags(tags: string[]): void {
+  #initTags(tags: TagItem[]): void {
     const size = 1.5 * this.#radius;
     const positions = fibonacciSphere(tags.length, size / 2);
-    this.#points = positions.map((p, i) => ({ ...p, text: tags[i]! }));
+    this.#points = positions.map((p, i) => ({ ...p, item: tags[i]! }));
   }
   #bindEvents(): void {
     this.#container.style.cursor = "grab";
     const rect = () => this.#container.getBoundingClientRect();
     this.#handlers = {
@@ -243,12 +271,12 @@ export class TagCloud {
       }) as EventListener,
       move: ((e: PointerEvent) => {
         if (!this.#dragging) return;
+        this.#dragged = true;
         const r = rect();
         const vCur = this.#screenToSphere(e.clientX - r.left, e.clientY - r.top, r.width, r.height);
         const vA = this.#vDown;
         const dot = vA.x * vCur.x + vA.y * vCur.y + vA.z * vCur.z;
         // Shoemake arcball 四元数
-        // Shoemake arcball quaternion
         const revX = this.#opts.reverse || this.#opts.reverseX ? -1 : 1;
         const revY = this.#opts.reverse || this.#opts.reverseY ? -1 : 1;
         const qDrag = {
@@ -262,8 +290,6 @@ export class TagCloud {
         qDrag.x /= len;
         qDrag.y /= len;
         qDrag.z /= len;
-        // 组合
-        // compose
         const qD = this.#qDown;
         this.#qNow = {
           w: qDrag.w * qD.w - qDrag.x * qD.x - qDrag.y * qD.y - qDrag.z * qD.z,
@@ -271,8 +297,6 @@ export class TagCloud {
           y: qDrag.w * qD.y - qDrag.x * qD.z + qDrag.y * qD.w + qDrag.z * qD.x,
           z: qDrag.w * qD.z + qDrag.x * qD.y - qDrag.y * qD.x + qDrag.z * qD.w,
         };
-        // 拖拽速度
-        // drag velocity
         const sens = this.#opts.dragSensitivity;
         this.#velY = (qDrag.y / len) * sens;
         this.#velX = (qDrag.x / len) * sens;
@@ -280,6 +304,7 @@ export class TagCloud {
       up: () => {
         this.#dragging = false;
         this.#container.style.cursor = "grab";
+        setTimeout(() => { this.#dragged = false; }, 0);
       },
     };
@@ -288,8 +313,33 @@ export class TagCloud {
     window.addEventListener("pointerup", this.#handlers.up);
   }
+  #bindClicks(): void {
+    this.#container.addEventListener("click", (e) => {
+      if (this.#dragged) return;
+      const r = this.#container.getBoundingClientRect();
+      const cx = e.clientX - r.left;
+      const cy = e.clientY - r.top;
+      let best: { item: TagItem; dist: number } | null = null;
+      for (const t of this.#lastCanvasTags) {
+        if (typeof t.item !== "string" && !t.item.onClick) continue;
+        const dx = cx - t.x;
+        const dy = cy - t.y;
+        const d = Math.sqrt(dx * dx + dy * dy);
+        const rw = t.item.type === "image" ? t.item.width / 2 : 30;
+        const hitRadius = rw * t.scale;
+        if (d < hitRadius && (!best || d < best.dist)) {
+          best = { item: t.item, dist: d };
+        }
+      }
+      if (best) {
+        const item = best.item;
+        if (isObjectTag(item) && item.onClick) item.onClick();
+        if (this.#opts.onTagClick) this.#opts.onTagClick(item);
+      }
+    });
+  }
   /** 屏幕坐标 → 球面 3D 点 */
-  /** screen coords → sphere 3D point */
   #screenToSphere(
     sx: number,
     sy: number,
@@ -300,21 +350,157 @@ export class TagCloud {
     const y = -((sy / h) * 2 - 1);
     const r2 = x * x + y * y;
     if (r2 > 1) {
-      // 球外 → 投影到球边缘
-      // outside sphere → project to edge
       const inv = 1 / Math.sqrt(r2);
       return { x: x * inv, y: y * inv, z: 0 };
     }
     return { x, y, z: Math.sqrt(1 - r2) };
   }
+  /** 内置 Canvas 渲染器（文本 + 图片） */
+  #canvasRender = (tags: TagData[]): void => {
+    if (!this.#canvas) {
+      const c = document.createElement("canvas");
+      if (this.#opts.width) { c.style.width = `${this.#opts.width}px`; this.#container.style.width = `${this.#opts.width}px`; }
+      else c.style.width = "100%";
+      if (this.#opts.height) { c.style.height = `${this.#opts.height}px`; this.#container.style.height = `${this.#opts.height}px`; }
+      else c.style.height = "100%";
+      this.#container.appendChild(c);
+      this.#canvas = c;
+      this.#ctx = c.getContext("2d")!;
+      this.#resizeCanvas();
+    }
+    // 初始化 DOM overlay
+    if (!this.#overlay) {
+      this.#container.style.position = "relative";
+      const o = document.createElement("div");
+      o.style.position = "absolute";
+      o.style.inset = "0";
+      o.style.pointerEvents = "none";
+      o.style.overflow = "hidden";
+      this.#container.appendChild(o);
+      this.#overlay = o;
+    }
+    const { width, height } = this.#canvas.getBoundingClientRect();
+    const ctx = this.#ctx!;
+    ctx.clearRect(0, 0, width, height);
+    // 保存文本标签坐标（用于点击 raycast）
+    const canvasTags: { item: TagItem; x: number; y: number; scale: number }[] = [];
+    const currentDoms = new Set<TagItem>();
+    // 先加载需要的图片
+    const imageCache = new Map<string, HTMLImageElement>();
+    const pendingImages: Promise<void>[] = [];
+    for (const t of tags) {
+      if (typeof t.item === "string") {
+        // 文本标签
+        const { fontFamily, fontSize, color } = this.#opts;
+        ctx.save();
+        ctx.globalAlpha = t.alpha;
+        ctx.font = `${fontSize + t.scale * 5}px ${fontFamily}`;
+        ctx.fillStyle = color;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(t.item, t.x, t.y);
+        ctx.restore();
+        canvasTags.push({ item: t.item, x: t.x, y: t.y, scale: t.scale });
+      } else if (t.item.type === "image") {
+        // 图片标签 — Canvas drawImage()
+        let img = imageCache.get(t.item.src);
+        if (!img) {
+          img = new Image();
+          img.src = t.item.src;
+          imageCache.set(t.item.src, img);
+          pendingImages.push(
+            new Promise((r) => {
+              img!.onload = () => r();
+            }),
+          );
+        }
+        const { width: iw, height: ih } = t.item;
+        const sw = iw * t.scale;
+        const sh = ih * t.scale;
+        ctx.save();
+        ctx.globalAlpha = t.alpha;
+        ctx.drawImage(img, t.x - sw / 2, t.y - sh / 2, sw, sh);
+        ctx.restore();
+        canvasTags.push({ item: t.item, x: t.x, y: t.y, scale: t.scale });
+      } else {
+        // DOM 标签（element/html/svg/video）→ overlay 渲染
+        currentDoms.add(t.item);
+        let el = this.#domEls.get(t.item);
+        if (!el) {
+          el = this.#createDomTag(t.item);
+          this.#domEls.set(t.item, el);
+          this.#overlay!.appendChild(el);
+        }
+        el.style.transform = `translate3d(${t.x.toFixed(1)}px, ${t.y.toFixed(1)}px, 0) scale(${t.scale.toFixed(2)})`;
+        el.style.opacity = String(t.alpha);
+        el.style.zIndex = String(Math.round(t.scale * 100));
+        canvasTags.push({ item: t.item, x: t.x, y: t.y, scale: t.scale });
+      }
+    }
+    // 清理已移除的 DOM 标签
+    for (const [item, el] of this.#domEls) {
+      if (!currentDoms.has(item)) {
+        el.remove();
+        this.#domEls.delete(item);
+      }
+    }
+    this.#lastCanvasTags = canvasTags;
+  };
+  /** 为富媒体标签创建 DOM 元素 */
+  #createDomTag(item: Exclude<TagItem, string>): HTMLElement {
+    const el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.top = "0";
+    el.style.left = "0";
+    el.style.willChange = "transform, opacity";
+    const clickable = !!(item.onClick || (item.type === "video" && this.#opts.videoFullscreen));
+    el.style.cursor = clickable ? "pointer" : "default";
+    el.style.pointerEvents = clickable ? "auto" : "none";
+    if (item.type === "element") el.appendChild(item.element);
+    else if (item.type === "html") el.innerHTML = item.html;
+    else if (item.type === "svg") el.innerHTML = item.content;
+    else if (item.type === "video") {
+      el.innerHTML = `<video src="${item.src}" width="${item.width}" height="${item.height}" autoplay muted loop playsinline></video>`;
+      if (this.#opts.videoFullscreen) {
+        el.addEventListener("click", () => {
+          const v = el.querySelector("video")!;
+          if (document.fullscreenElement) { document.exitFullscreen(); }
+          else { v.play(); v.requestFullscreen(); }
+        });
+      }
+    }
+    if (item.onClick || this.#opts.onTagClick) {
+      el.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (item.onClick) item.onClick();
+        if (this.#opts.onTagClick) this.#opts.onTagClick(item);
+      });
+    }
+    return el;
+  }
+  #resizeCanvas(): void {
+    const c = this.#canvas;
+    if (!c) return;
+    const dpr = window.devicePixelRatio || 1;
+    const { width, height } = c.getBoundingClientRect();
+    c.width = width * dpr;
+    c.height = height * dpr;
+    this.#ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
   #loop = (): void => {
     if (!this.#paused) this.#tick();
     this.#raf = requestAnimationFrame(this.#loop);
   };
-  /** 绕 Y 轴旋转 */
-  /** rotate around Y axis */
   #rotateY(deg: number): void {
     const half = (deg * Math.PI) / 360;
     const qY = { w: Math.cos(half), x: 0, y: Math.sin(half), z: 0 };
@@ -327,8 +513,6 @@ export class TagCloud {
     };
   }
-  /** 绕 X 轴旋转 */
-  /** rotate around X axis */
   #rotateX(deg: number): void {
     const half = (deg * Math.PI) / 360;
     const qX = { w: Math.cos(half), x: Math.sin(half), y: 0, z: 0 };
@@ -347,7 +531,6 @@ export class TagCloud {
     const cy = rect.height / 2;
     // 自旋 + 惯性
-    // auto-spin + inertia
     const revY = this.#opts.reverse || this.#opts.reverseY ? -1 : 1;
     const revX = this.#opts.reverse || this.#opts.reverseX ? -1 : 1;
     const decay = this.#opts.inertiaDecay;
@@ -358,8 +541,7 @@ export class TagCloud {
       this.#velX *= decay;
     }
-    // 四元数构造 3×3 旋转矩阵
-    // build 3×3 rotation matrix from quaternion
+    // 四元数构造旋转矩阵
     const { w, x, y, z } = this.#qNow;
     const m00 = 1 - 2 * (y * y + z * z);
     const m01 = 2 * (x * y - w * z);
@@ -374,8 +556,6 @@ export class TagCloud {
     const projected: TagData[] = [];
     for (const p of this.#points) {
-      // 矩阵 × 点
-      // matrix × point
       const rx = m00 * p.x + m01 * p.y + m02 * p.z;
       const ry = m10 * p.x + m11 * p.y + m12 * p.z;
       const rz = m20 * p.x + m21 * p.y + (1 - 2 * (x * x + y * y)) * p.z;
@@ -384,7 +564,7 @@ export class TagCloud {
       const alpha = Math.min(1, Math.max(0, per * per - 0.25));
       projected.push({
-        text: p.text,
+        item: p.item,
         x: cx + rx * per,
         y: cy + ry * per,
         z: rz,

package/src/index.ts CHANGED Viewed

@@ -25,7 +25,16 @@
  */
 export { TagCloud } from "./TagCloud";
-export type { TagCloudOptions, TagData } from "./TagCloud";
+export type {
+  TagCloudOptions,
+  TagData,
+  TagItem,
+  ImageTag,
+  SvgTag,
+  HtmlTag,
+  VideoTag,
+  ElementTag,
+} from "./TagCloud";
 export { fibonacciSphere } from "./core/distribution";
 export type { Vec3 } from "./core/distribution";
 export { rotatePoint, rotatePoints } from "./core/rotation";