diff --git a/packages/client/src/components/tag-cloud.vue b/packages/client/src/components/tag-cloud.vue index 43ab49357b5268a10da990213298f5f4db5f07a3..8df8d0b05bc7de8e9aa98ffcae068997968ea7ee 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 28933f272a8a84bd9d7e2e1b6d9fe921668fde7d..09be12d6899a953d12873f4e4761f5f3fb97de17 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 aa76c37a000e1dd3b37806c6d07638e4474b00d3..cb66c5fa36ece2795202642567aafb13b5bc020a 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>;