enhance(frontend): tagcanvas実装を変更 (#17753)

* enhance(frontend): tagcanvas実装を変更

* fix indent

* fix

* fix

* review fixes

packages/frontend-embed/@types/global.d.ts

@@ -13,8 +13,3 @@ declare const _PERF_PREFIX_: string;
 
 // for dev-mode
 declare const _LANGS_FULL_: string[][];
-
-// TagCanvas
-interface Window {
-	TagCanvas: any;
-}

packages/frontend-shared/@types/global.d.ts

@@ -14,9 +14,3 @@ declare const _PERF_PREFIX_: string;
 
 // for dev-mode
 declare const _LANGS_FULL_: string[][];
-
-// TagCanvas
-interface Window {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	TagCanvas: any;
-}

packages/frontend/@types/global.d.ts

@@ -13,8 +13,3 @@ declare const _PERF_PREFIX_: string;
 
 // for dev-mode
 declare const _LANGS_FULL_: string[][];
-
-// TagCanvas
-interface Window {
-	TagCanvas: any;
-}

packages/frontend/package.json

@@ -22,6 +22,7 @@
 		"@mcaptcha/core-glue": "0.1.0-alpha-5",
 		"@misskey-dev/browser-image-resizer": "2024.1.0",
 		"@misskey-dev/emoji-data": "17.0.3",
+		"@misskey-dev/tagcanvas-es": "0.1.2",
 		"@sentry/vue": "10.65.0",
 		"@simplewebauthn/browser": "13.3.0",
 		"@syuilo/aiscript": "1.2.1",

packages/frontend/src/components/MkTagCloud.vue

@@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div ref="rootEl" :class="$style.root">
-	<canvas :id="idForCanvas" ref="canvasEl" style="display: block;" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
-	<div :id="idForTags" ref="tagsEl" :class="$style.tags">
+	<canvas ref="canvasEl" style="display: block;" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
+	<div ref="tagsEl" :class="$style.tags">
 		<ul>
 			<slot></slot>
 		</ul>
@@ -15,62 +15,68 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch, onBeforeUnmount, ref, useTemplateRef } from 'vue';
+import { onMounted, onBeforeUnmount, nextTick, ref, shallowRef, useTemplateRef } from 'vue';
 import { themeManager } from '@/theme.js';
 import tinycolor from 'tinycolor2';
+import { TagCanvas } from '@misskey-dev/tagcanvas-es';
 
-const loaded = !!window.TagCanvas;
-const SAFE_FOR_HTML_ID = 'abcdefghijklmnopqrstuvwxyz';
-const idForCanvas = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
-const idForTags = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
-const available = ref(false);
 const rootEl = useTemplateRef('rootEl');
 const canvasEl = useTemplateRef('canvasEl');
 const tagsEl = useTemplateRef('tagsEl');
+const tagCanvas = shallowRef<TagCanvas | null>(null);
 const width = ref(300);
 
-watch(available, () => {
-	try {
-		window.TagCanvas.Start(idForCanvas, idForTags, {
-			textColour: '#ffffff',
-			outlineColour: tinycolor(themeManager.currentCompiledTheme!.accent).toHexString(),
-			outlineRadius: 10,
-			initial: [-0.030, -0.010],
-			frontSelect: true,
-			imageRadius: 8,
-			//dragControl: true,
-			dragThreshold: 3,
-			wheelZoom: false,
-			reverse: true,
-			depth: 0.5,
-			maxSpeed: 0.2,
-			minSpeed: 0.003,
-			stretchX: 0.8,
-			stretchY: 0.8,
-		});
-	} catch (err) {}
-});
+function createTagCanvas() {
+	if (tagCanvas.value) {
+		tagCanvas.value.destroy();
+		tagCanvas.value = null;
+	}
+
+	if (tagsEl.value == null || canvasEl.value == null) return;
+	if (tagsEl.value.children[0].children.length === 0) return;
+
+	tagCanvas.value = new TagCanvas(canvasEl.value, {
+		tagContainer: tagsEl.value,
+		textColor: '#ffffff',
+		outlineColor: tinycolor(themeManager.currentCompiledTheme!.accent).toHexString(),
+		outlineRadius: 10,
+		initial: [-0.030, -0.010],
+		frontSelect: true,
+		imageRadius: 8,
+		// dragControl: true,
+		dragThreshold: 3,
+		wheelZoom: false,
+		reverse: true,
+		depth: 0.5,
+		maxSpeed: 0.2,
+		minSpeed: 0.003,
+		stretchX: 0.8,
+		stretchY: 0.8,
+	});
+}
 
 onMounted(() => {
 	if (rootEl.value) width.value = rootEl.value.offsetWidth;
 
-	if (loaded) {
-		available.value = true;
-	} else {
-		window.document.head.appendChild(Object.assign(window.document.createElement('script'), {
-			async: true,
-			src: '/client-assets/tagcanvas.min.js',
-		})).addEventListener('load', () => available.value = true);
-	}
+	nextTick(() => {
+		createTagCanvas();
+	});
 });
 
 onBeforeUnmount(() => {
-	if (window.TagCanvas) window.TagCanvas.Delete(idForCanvas);
+	if (tagCanvas.value) {
+		tagCanvas.value.destroy();
+		tagCanvas.value = null;
+	}
 });
 
 defineExpose({
 	update: () => {
-		window.TagCanvas.Update(idForCanvas);
+		if (tagCanvas.value) {
+			tagCanvas.value.update();
+		} else {
+			createTagCanvas();
+		}
 	},
 });
 </script>

pnpm-lock.yaml

@@ -673,6 +673,9 @@ importers:
       '@misskey-dev/emoji-data':
         specifier: 17.0.3
         version: 17.0.3
+      '@misskey-dev/tagcanvas-es':
+        specifier: 0.1.2
+        version: 0.1.2
       '@sentry/vue':
         specifier: 10.65.0
         version: 10.65.0(vue@3.5.39(typescript@6.0.2))
@@ -2447,6 +2450,9 @@ packages:
   '@misskey-dev/summaly@5.5.1':
     resolution: {integrity: sha512-CfpVtmFgltjNS1FAS5+bOluKAF/irZuQnUxAw66ydnp/uesiNNu62ltf9gEgwutT5S+itGtlnP87AOx6DDn/1A==}
 
+  '@misskey-dev/tagcanvas-es@0.1.2':
+    resolution: {integrity: sha512-SGqyu30/CCQyIC95Zcmj3k1vYXwfX66/arsxpl1UUulUqvlRpTpuhB7kEAAps1lqXin0rQzXknb31EeveNKsaw==}
+
   '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.4':
     resolution: {integrity: sha512-LCkGo6JDfaBhgST7UpPWgNgLINpcpabaHfyz5OBx75nUYxBsaEPxjnyNjWpeb/xBup/682QnBfRBy2/LvPutZQ==}
     cpu: [arm64]
@@ -10505,6 +10511,8 @@ snapshots:
     optionalDependencies:
       fastify: 5.8.5
 
+  '@misskey-dev/tagcanvas-es@0.1.2': {}
+
   '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.4':
     optional: true