tweak client

This commit is contained in:
syuilo 2022-06-30 10:13:27 +09:00
parent 5d6c624757
commit bd76b1fed8
3 changed files with 17 additions and 7 deletions

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="root"> <div ref="rootEl" class="root">
<canvas :id="idForCanvas" ref="canvasEl" class="canvas" width="300" height="300"></canvas> <canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
<div :id="idForTags" ref="tagsEl" class="tags"> <div :id="idForTags" ref="tagsEl" class="tags">
<ul> <ul>
<slot></slot> <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 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(''); 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 available = $ref(false);
let rootEl = $ref<HTMLElement | null>(null);
let canvasEl = $ref<HTMLCanvasElement | null>(null); let canvasEl = $ref<HTMLCanvasElement | null>(null);
let tagsEl = $ref<HTMLElement | null>(null); let tagsEl = $ref<HTMLElement | null>(null);
let width = $ref(300);
watch($$(available), () => { watch($$(available), () => {
window.TagCanvas.Start(idForCanvas, idForTags, { window.TagCanvas.Start(idForCanvas, idForTags, {
@ -45,6 +47,8 @@ watch($$(available), () => {
}); });
onMounted(() => { onMounted(() => {
width = rootEl.offsetWidth;
if (loaded) { if (loaded) {
available = true; available = true;
} else { } else {
@ -58,6 +62,12 @@ onMounted(() => {
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.TagCanvas.Delete(idForCanvas); window.TagCanvas.Delete(idForCanvas);
}); });
defineExpose({
update: () => {
window.TagCanvas.Update(idForCanvas);
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View file

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

View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-instance-cloud"> <MkContainer :naked="widgetProps.transparent" class="mkw-instance-cloud">
<div class=""> <div class="">
<MkTagCloud v-if="activeInstances"> <MkTagCloud v-if="activeInstances">
<li v-for="instance in activeInstances"> <li v-for="instance in activeInstances">
@ -28,10 +28,6 @@ const widgetPropsDef = {
type: 'boolean' as const, type: 'boolean' as const,
default: false, default: false,
}, },
showHeader: {
type: 'boolean' as const,
default: true,
},
}; };
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;