Frontend: Removed pointless tag cloud eye candy

fe_calckey/frontend/client/src/components/MkTagCloud.vue

@@ -1,117 +0,0 @@
-<template>
-    <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>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref, watch, PropType, onBeforeUnmount } from "vue";
-import tinycolor from "tinycolor2";
-
-const loaded = !!window.TagCanvas;
-const SAFE_FOR_HTML_ID = "abcdefghijklmnopqrstuvwxyz";
-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), () => {
-    try {
-        window.TagCanvas.Start(idForCanvas, idForTags, {
-            textColour: "#ffffff",
-            outlineColour: tinycolor(
-                computedStyle.getPropertyValue("--accent")
-            ).toHexString(),
-            outlineRadius: 10,
-            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,
-        });
-    } catch (err) {}
-});
-
-onMounted(() => {
-    width = rootEl.offsetWidth;
-
-    if (loaded) {
-        available = true;
-    } else {
-        document.head
-            .appendChild(
-                Object.assign(document.createElement("script"), {
-                    async: true,
-                    src: "/client-assets/tagcanvas.min.js",
-                })
-            )
-            .addEventListener("load", () => (available = true));
-    }
-});
-
-onBeforeUnmount(() => {
-    if (window.TagCanvas) window.TagCanvas.Delete(idForCanvas);
-});
-
-defineExpose({
-    update: () => {
-        window.TagCanvas.Update(idForCanvas);
-    },
-});
-</script>
-
-<style lang="scss" scoped>
-.meijqfqm {
-    position: relative;
-    overflow: clip;
-    display: grid;
-    place-items: center;
-
-    > .canvas {
-        display: block;
-    }
-
-    > .tags {
-        position: absolute;
-        top: 999px;
-        left: 999px;
-    }
-}
-</style>

fe_calckey/frontend/client/src/pages/admin/overview.vue

@@ -60,13 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
+import { markRaw, nextTick, onBeforeUnmount, onMounted } from "vue";
-    markRaw,
-    version as vueVersion,
-    onMounted,
-    onBeforeUnmount,
-    nextTick,
-} from "vue";
 import XFederation from "./overview.federation.vue";
 import XInstances from "./overview.instances.vue";
 import XQueue from "./overview.queue.vue";
@@ -77,14 +71,10 @@ import XStats from "./overview.stats.vue";
 import XModerators from "./overview.moderators.vue";
 import XHeatmap from "./overview.heatmap.vue";
 // import XMetrics from "./overview.metrics.vue";
-import MkTagCloud from "@/components/MkTagCloud.vue";
-import { version, url } from "@/config";
 import * as os from "@/os";
 import { stream } from "@/stream";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { defaultStore } from "@/store";
-import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
 import MkFolder from "@/components/MkFolder.vue";
 
 const rootEl = $shallowRef<HTMLElement>();

fe_calckey/frontend/client/src/widgets/index.ts

@@ -73,10 +73,6 @@ export default function (app: App) {
         "MkwJobQueue",
         defineAsyncComponent(() => import("./job-queue.vue"))
     );
-    app.component(
-        "MkwInstanceCloud",
-        defineAsyncComponent(() => import("./instance-cloud.vue"))
-    );
     app.component(
         "MkwButton",
         defineAsyncComponent(() => import("./button.vue"))
@@ -110,7 +106,6 @@ export const widgets = [
     "digitalClock",
     "unixClock",
     "federation",
-    "instanceCloud",
     "postForm",
     "slideshow",
     "serverMetric",

fe_calckey/frontend/client/src/widgets/instance-cloud.vue

@@ -1,100 +0,0 @@
-<template>
-    <MkContainer
-        :naked="widgetProps.transparent"
-        :show-header="false"
-        class="mkw-instance-cloud"
-    >
-        <div class="">
-            <MkTagCloud v-if="activeInstances">
-                <li v-for="instance in activeInstances" :key="instance.id">
-                    <a @click.prevent="onInstanceClick(instance)">
-                        <img
-                            style="width: 32px"
-                            :src="getInstanceIcon(instance)"
-                        />
-                    </a>
-                </li>
-            </MkTagCloud>
-        </div>
-    </MkContainer>
-</template>
-
-<script lang="ts" setup>
-import {} from "vue";
-import {
-    useWidgetPropsManager,
-    WidgetComponentEmits,
-    WidgetComponentProps,
-} from "./widget";
-import type { Widget, WidgetComponentExpose } from "./widget";
-import type { GetFormResultType } from "@/scripts/form";
-import MkContainer from "@/components/MkContainer.vue";
-import MkTagCloud from "@/components/MkTagCloud.vue";
-import * as os from "@/os";
-import { useInterval } from "@/scripts/use-interval";
-import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
-
-const name = "instanceCloud";
-
-const widgetPropsDef = {
-    transparent: {
-        type: "boolean" as const,
-        default: false,
-    },
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps> }>();
-const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(
-    name,
-    widgetPropsDef,
-    props,
-    emit
-);
-
-let cloud = $ref<InstanceType<typeof MkTagCloud> | null>();
-let activeInstances = $shallowRef(null);
-
-function onInstanceClick(i) {
-    os.pageWindow(`/instance-info/${i.host}`);
-}
-
-useInterval(
-    () => {
-        os.api("federation/instances", {
-            sort: "+lastCommunicatedAt",
-            limit: 25,
-        }).then((res) => {
-            activeInstances = res;
-            if (cloud) cloud.update();
-        });
-    },
-    1000 * 60 * 3,
-    {
-        immediate: true,
-        afterMounted: true,
-    }
-);
-
-function getInstanceIcon(instance): string {
-    return (
-        getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
-        getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
-        "/client-assets/dummy.png"
-    );
-}
-
-defineExpose<WidgetComponentExpose>({
-    name,
-    configure,
-    id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped></style>