fix module description position (#3860)

CCBlueX · Sep 1, 2024 · 59b0a84 · 59b0a84
1 parent f94de09
commit 59b0a84
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/src-theme/src/routes/clickgui/ClickGui.svelte b/src-theme/src/routes/clickgui/ClickGui.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import {onMount} from "svelte";
-    import {getComponents, getGameWindow, getModules, getModuleSettings} from "../../integration/rest";
+    import {getGameWindow, getModules, getModuleSettings} from "../../integration/rest";
     import {groupByCategory} from "../../integration/util";
     import type {GroupedModules, Module} from "../../integration/types";
     import Panel from "./Panel.svelte";
@@ -9,13 +9,15 @@
     import {fade} from "svelte/transition";
     import {listen} from "../../integration/ws";
     import type {ClickGuiScaleChangeEvent, ScaleFactorChangeEvent} from "../../integration/events";
+    import {scaleFactor} from "./clickgui_store";
 
     let categories: GroupedModules = {};
     let modules: Module[] = [];
     let minecraftScaleFactor = 2;
     let clickGuiScaleFactor = 1;
-    $: scaleFactor = minecraftScaleFactor * clickGuiScaleFactor;
-    $: zoom = scaleFactor * 50;
+    $: {
+        scaleFactor.set(minecraftScaleFactor * clickGuiScaleFactor);
+    }
 
     onMount(async () => {
         const gameWindow = await getGameWindow();
@@ -38,12 +40,12 @@
 </script>
 
 <div class="clickgui" transition:fade|global={{duration: 200}}
-     style="transform: scale({zoom}%); width: {2 / scaleFactor * 100}vw; height: {2 / scaleFactor * 100}vh;">
+     style="transform: scale({$scaleFactor * 50}%); width: {2 / $scaleFactor * 100}vw; height: {2 / $scaleFactor * 100}vh;">
     <Description/>
     <Search modules={structuredClone(modules)}/>
 
     {#each Object.entries(categories) as [category, modules], panelIndex}
-        <Panel {category} {modules} {panelIndex} {scaleFactor}/>
+        <Panel {category} {modules} {panelIndex}/>
     {/each}
 </div>
 

diff --git a/src-theme/src/routes/clickgui/Module.svelte b/src-theme/src/routes/clickgui/Module.svelte
@@ -12,6 +12,7 @@
     import {description as descriptionStore, highlightModuleName} from "./clickgui_store";
     import {setItem} from "../../integration/persistent_storage";
     import {convertToSpacedString, spaceSeperatedNames} from "../../theme/theme_config";
+    import {scaleFactor} from "./clickgui_store";
 
     export let name: string;
     export let enabled: boolean;
@@ -63,9 +64,10 @@
         if (aliases.length > 0) {
             moduleDescription += ` (aka ${aliases.map(a => $spaceSeperatedNames ? convertToSpacedString(a) : a).join(", ")})`;
         }
+        console.log($scaleFactor)
         descriptionStore.set({
-            x,
-            y,
+            x: x * (2 / $scaleFactor),
+            y: y * (2 / $scaleFactor),
             description: moduleDescription
         });
     }

diff --git a/src-theme/src/routes/clickgui/Panel.svelte b/src-theme/src/routes/clickgui/Panel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {afterUpdate, onMount} from "svelte";
+    import {onMount} from "svelte";
     import type {Module as TModule} from "../../integration/types";
     import {listen} from "../../integration/ws";
     import Module from "./Module.svelte";
@@ -8,11 +8,11 @@
     import {quintOut} from "svelte/easing";
     import {highlightModuleName, maxPanelZIndex} from "./clickgui_store";
     import {setItem} from "../../integration/persistent_storage";
+    import {scaleFactor} from "./clickgui_store";
 
     export let category: string;
     export let modules: TModule[];
     export let panelIndex: number;
-    export let scaleFactor: number;
 
     let panelElement: HTMLElement;
     let modulesElement: HTMLElement;
@@ -77,8 +77,8 @@
     }
 
     function fixPosition() {
-        panelConfig.left = clamp(panelConfig.left, 0, document.documentElement.clientWidth * (2 / scaleFactor) - panelElement.offsetWidth);
-        panelConfig.top = clamp(panelConfig.top, 0, document.documentElement.clientHeight * (2 / scaleFactor) - panelElement.offsetHeight);
+        panelConfig.left = clamp(panelConfig.left, 0, document.documentElement.clientWidth * (2 / $scaleFactor) - panelElement.offsetWidth);
+        panelConfig.top = clamp(panelConfig.top, 0, document.documentElement.clientHeight * (2 / $scaleFactor) - panelElement.offsetHeight);
     }
 
     function onMouseDown() {
@@ -89,8 +89,8 @@
 
     function onMouseMove(e: MouseEvent) {
         if (moving) {
-            panelConfig.left += (e.screenX - prevX) * (2 / scaleFactor);
-            panelConfig.top += (e.screenY - prevY) * (2 / scaleFactor);
+            panelConfig.left += (e.screenX - prevX) * (2 / $scaleFactor);
+            panelConfig.top += (e.screenY - prevY) * (2 / $scaleFactor);
         }
 
         prevX = e.screenX;

diff --git a/src-theme/src/routes/clickgui/clickgui_store.ts b/src-theme/src/routes/clickgui/clickgui_store.ts
@@ -10,4 +10,6 @@ export const description: Writable<TDescription | null> = writable(null);
 
 export const maxPanelZIndex: Writable<number> = writable(0);
 
-export const highlightModuleName: Writable<string | null> = writable(null);
+export const highlightModuleName: Writable<string | null> = writable(null);
+
+export const scaleFactor: Writable<number> = writable(2);