iceshrimp-legacy/packages/client/src/components/MkTagCloud.vue

118 lines
2.3 KiB
Vue
Raw Normal View History

2022-06-29 14:22:15 +02:00
<template>
2023-04-08 02:01:42 +02:00
<div ref="rootEl" class="meijqfqm">
<canvas
:id="idForCanvas"
ref="canvasEl"
class="canvas"
:width="width"
height="300"
@contextmenu.prevent="() => {}"
></canvas>
<div :id="idForTags" ref="tagsEl" class="tags">
<ul>
<slot></slot>
</ul>
</div>
2022-06-29 14:22:15 +02:00
</div>
</template>
<script lang="ts" setup>
2023-04-08 02:01:42 +02:00
import { onMounted, ref, watch, PropType, onBeforeUnmount } from "vue";
import tinycolor from "tinycolor2";
2022-06-29 14:22:15 +02:00
const loaded = !!window.TagCanvas;
2023-04-08 02:01:42 +02:00
const SAFE_FOR_HTML_ID = "abcdefghijklmnopqrstuvwxyz";
2022-06-29 14:22:15 +02:00
const computedStyle = getComputedStyle(document.documentElement);
2023-04-08 02:01:42 +02:00
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("");
2022-06-29 14:22:15 +02:00
let available = $ref(false);
2022-06-30 03:13:27 +02:00
let rootEl = $ref<HTMLElement | null>(null);
2022-06-29 14:22:15 +02:00
let canvasEl = $ref<HTMLCanvasElement | null>(null);
let tagsEl = $ref<HTMLElement | null>(null);
2022-06-30 03:13:27 +02:00
let width = $ref(300);
2022-06-29 14:22:15 +02:00
watch($$(available), () => {
try {
window.TagCanvas.Start(idForCanvas, idForTags, {
2023-04-08 02:01:42 +02:00
textColour: "#ffffff",
outlineColour: tinycolor(
computedStyle.getPropertyValue("--accent")
).toHexString(),
outlineRadius: 10,
2023-04-08 02:01:42 +02:00
initial: [-0.03, -0.01],
frontSelect: true,
imageRadius: 8,
//dragControl: true,
dragThreshold: 3,
wheelZoom: false,
reverse: true,
depth: 0.5,
maxSpeed: 0.2,
minSpeed: 0.003,
stretchX: 0.8,
stretchY: 0.8,
});
2022-07-23 07:31:54 +02:00
} catch (err) {}
2022-06-29 14:22:15 +02:00
});
onMounted(() => {
2022-06-30 03:13:27 +02:00
width = rootEl.offsetWidth;
2022-06-29 14:22:15 +02:00
if (loaded) {
available = true;
} else {
2023-04-08 02:01:42 +02:00
document.head
.appendChild(
Object.assign(document.createElement("script"), {
async: true,
src: "/client-assets/tagcanvas.min.js",
})
)
.addEventListener("load", () => (available = true));
2022-06-29 14:22:15 +02:00
}
});
onBeforeUnmount(() => {
if (window.TagCanvas) window.TagCanvas.Delete(idForCanvas);
2022-06-29 14:22:15 +02:00
});
2022-06-30 03:13:27 +02:00
defineExpose({
update: () => {
window.TagCanvas.Update(idForCanvas);
},
});
2022-06-29 14:22:15 +02:00
</script>
<style lang="scss" scoped>
.meijqfqm {
2022-06-29 14:22:15 +02:00
position: relative;
2022-07-13 14:41:06 +02:00
overflow: clip;
2022-06-29 14:22:15 +02:00
display: grid;
place-items: center;
> .canvas {
display: block;
}
> .tags {
position: absolute;
top: 999px;
left: 999px;
}
}
</style>