From 9ac526b6b6d66ceaceda6ef0d3662fd8484510da Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 30 Jun 2022 10:13:27 +0900
Subject: [PATCH] tweak client

---
 packages/client/src/components/tag-cloud.vue   | 14 ++++++++++++--
 packages/client/src/ui/visitor/b.vue           |  4 ++++
 packages/client/src/widgets/instance-cloud.vue |  6 +-----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/tag-cloud.vue b/packages/client/src/components/tag-cloud.vue
index 43ab49357b..8df8d0b05b 100644
--- a/packages/client/src/components/tag-cloud.vue
+++ b/packages/client/src/components/tag-cloud.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="root">
-	<canvas :id="idForCanvas" ref="canvasEl" class="canvas" width="300" height="300"></canvas>
+<div ref="rootEl" class="root">
+	<canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
 	<div :id="idForTags" ref="tagsEl" class="tags">
 		<ul>
 			<slot></slot>
@@ -21,8 +21,10 @@ const computedStyle = getComputedStyle(document.documentElement);
 const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
 const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
 let available = $ref(false);
+let rootEl = $ref<HTMLElement | null>(null);
 let canvasEl = $ref<HTMLCanvasElement | null>(null);
 let tagsEl = $ref<HTMLElement | null>(null);
+let width = $ref(300);
 
 watch($$(available), () => {
 	window.TagCanvas.Start(idForCanvas, idForTags, {
@@ -45,6 +47,8 @@ watch($$(available), () => {
 });
 
 onMounted(() => {
+	width = rootEl.offsetWidth;
+
 	if (loaded) {
 		available = true;
 	} else {
@@ -58,6 +62,12 @@ onMounted(() => {
 onBeforeUnmount(() => {
 	window.TagCanvas.Delete(idForCanvas);
 });
+
+defineExpose({
+	update: () => {
+		window.TagCanvas.Update(idForCanvas);
+	},
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 28933f272a..09be12d689 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -116,6 +116,10 @@ onMounted(() => {
 		}, { passive: true });
 	}
 });
+
+defineExpose({
+	showMenu: $$(showMenu),
+});
 </script>
 
 <style>
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
index aa76c37a00..cb66c5fa36 100644
--- a/packages/client/src/widgets/instance-cloud.vue
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -1,5 +1,5 @@
 <template>
-<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-instance-cloud">
+<MkContainer :naked="widgetProps.transparent" class="mkw-instance-cloud">
 	<div class="">
 		<MkTagCloud v-if="activeInstances">
 			<li v-for="instance in activeInstances">
@@ -28,10 +28,6 @@ const widgetPropsDef = {
 		type: 'boolean' as const,
 		default: false,
 	},
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
 };
 
 type WidgetProps = GetFormResultType<typeof widgetPropsDef>;