tweak client
This commit is contained in:
parent
ca6afd40ad
commit
9ac526b6b6
|
@ -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>
|
||||||
|
|
|
@ -116,6 +116,10 @@ onMounted(() => {
|
||||||
}, { passive: true });
|
}, { passive: true });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
showMenu: $$(showMenu),
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -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>;
|
||||||
|
|
Loading…
Reference in New Issue