worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

tweak client

Browse source
This commit is contained in:
syuilo 2022-06-30 10:13:27 +09:00
parent ca6afd40ad
commit 9ac526b6b6
3 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/client/src/components/tag-cloud.vue
View file

@ -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>

4
packages/client/src/ui/visitor/b.vue
View file

@ -116,6 +116,10 @@ onMounted(() => {
}, { passive: true });
}
});
defineExpose({
showMenu: $$(showMenu),
});
</script>
<style>

6
packages/client/src/widgets/instance-cloud.vue
View file

@ -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>;