mirror of
https://iceshrimp.dev/crimekillz/trashposs
synced 2024-11-25 10:19:06 +01:00
tweak client
This commit is contained in:
parent
5d6c624757
commit
bd76b1fed8
@ -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>
|
||||
|
@ -116,6 +116,10 @@ onMounted(() => {
|
||||
}, { passive: true });
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
showMenu: $$(showMenu),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
@ -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>;
|
||||
|
Loading…
Reference in New Issue
Block a user