fix glitching settings panel animation

CCBlueX · Dec 27, 2024 · 539a8a7 · 539a8a7
1 parent c0c7e7d
commit 539a8a7
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 57 deletions.
diff --git a/src/lib/main/settings/GeneralSettings.svelte b/src/lib/main/settings/GeneralSettings.svelte
@@ -6,14 +6,14 @@
     import ToggleSetting from "../../settings/ToggleSetting.svelte";
     import ButtonSetting from "../../settings/ButtonSetting.svelte";
     import LauncherVersion from "../../settings/LauncherVersion.svelte";
-    import {onMount} from "svelte";
-    import {invoke} from "@tauri-apps/api/core";
+    import { onMount } from "svelte";
+    import { invoke } from "@tauri-apps/api/core";
 
     export let options;
 
     let launcherVersion = "";
     let defaultDataFolder = "";
-    let systemMemory = 0;
+    let systemMemory = options.start.memory;
 
     async function clearData() {
         try {
@@ -27,7 +27,7 @@
 
     async function logout() {
         try {
-            await invoke("logout", {accountData: options.start.account});
+            await invoke("logout", { accountData: options.start.account });
             options.start.account = null;
             await options.store();
         } catch (error) {
@@ -40,7 +40,7 @@
         const [version, folder, memory] = await Promise.all([
             invoke("get_launcher_version"),
             invoke("default_data_folder_path"),
-            invoke("sys_memory")
+            invoke("sys_memory"),
         ]);
 
         systemMemory = memory;
@@ -50,79 +50,73 @@
 </script>
 
 <SelectSetting
-        title="JVM Distribution"
-        items={[
+    title="JVM Distribution"
+    items={[
         { value: "automatic", text: "Automatic" },
         { value: "manual", text: "Manual" },
-        { value: "custom", text: "Custom" }
+        { value: "custom", text: "Custom" },
     ]}
-        bind:value={options.start.javaDistribution.type}
+    bind:value={options.start.javaDistribution.type}
 />
 
 {#if options.start.javaDistribution.type === "manual"}
     <SelectSetting
-            title="Distribution"
-            items={[
+        title="Distribution"
+        items={[
             { value: "temurin", text: "Eclipse Temurin" },
-            { value: "graalvm", text: "GraalVM" }
+            { value: "graalvm", text: "GraalVM" },
         ]}
-            bind:value={options.start.javaDistribution.value}
+        bind:value={options.start.javaDistribution.value}
     />
 {/if}
 
 {#if options.start.javaDistribution.type === "custom"}
     <FileSelectorSetting
-            title="Custom JVM Path"
-            placeholder="Select Java wrapper location"
-            bind:value={options.start.javaDistribution.value}
-            filters={[{ name: "javaw", extensions: [] }]}
-            windowTitle="Select custom Java wrapper"
+        title="Custom JVM Path"
+        placeholder="Select Java wrapper location"
+        bind:value={options.start.javaDistribution.value}
+        filters={[{ name: "javaw", extensions: [] }]}
+        windowTitle="Select custom Java wrapper"
     />
 {/if}
 
 <DirectorySelectorSetting
-        title="Data Location"
-        placeholder={defaultDataFolder}
-        bind:value={options.start.customDataPath}
-        windowTitle="Select custom data directory"
+    title="Data Location"
+    placeholder={defaultDataFolder}
+    bind:value={options.start.customDataPath}
+    windowTitle="Select custom data directory"
 />
 
-{#if systemMemory > 0}
-    <RangeSetting
-            title="Memory"
-            min={2048}
-            max={systemMemory}
-            bind:value={options.start.memory}
-            valueSuffix=" MB"
-            step={128}
-    />
-{/if}
+<RangeSetting
+    title="Memory"
+    min={2048}
+    max={systemMemory}
+    bind:value={options.start.memory}
+    valueSuffix=" MB"
+    step={128}
+/>
 
 <RangeSetting
-        title="Concurrent Downloads"
-        min={1}
-        max={50}
-        bind:value={options.launcher.concurrentDownloads}
-        valueSuffix=" connections"
-        step={1}
+    title="Concurrent Downloads"
+    min={1}
+    max={50}
+    bind:value={options.launcher.concurrentDownloads}
+    valueSuffix=" connections"
+    step={1}
 />
 
 <ToggleSetting
-        title="Keep launcher running"
-        disabled={false}
-        bind:value={options.launcher.keepLauncherOpen}
+    title="Keep launcher running"
+    disabled={false}
+    bind:value={options.launcher.keepLauncherOpen}
 />
 
 <ButtonSetting
-        text="Sign out of Minecraft Account"
-        on:click={logout}
-        color="#4677FF"
+    text="Sign out of Minecraft Account"
+    on:click={logout}
+    color="#4677FF"
 />
 
-<ButtonSetting
-        text="Clear Data"
-        on:click={clearData}
-        color="#B83529"
-/>
+<ButtonSetting text="Clear Data" on:click={clearData} color="#B83529" />
 
-<LauncherVersion version={launcherVersion} />
+<LauncherVersion version={launcherVersion} />
diff --git a/src/lib/settings/RangeSetting.svelte b/src/lib/settings/RangeSetting.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { onMount } from "svelte";
+    import { beforeUpdate, onMount } from "svelte";
     import noUiSlider from "nouislider";
     import "nouislider/dist/nouislider.min.css";
     import "./RangeSettingStyles.css";
@@ -23,6 +23,7 @@
     }
 
     let slider = null;
+
     onMount(() => {
         const start = value;
 
@@ -34,22 +35,39 @@
                 min: min,
                 max: max,
             },
-            step: step
+            step: step,
         });
 
-        slider.noUiSlider.on("update", values => {
+        slider.noUiSlider.on("update", (values) => {
             value = parseFloat(values[0]);
         });
     });
 
-    let v = 2000;
-</script>
+    beforeUpdate(() => {
+        if (!slider) return;
 
+        console.log("Ok");
+
+        slider.noUiSlider.updateOptions({
+            start: value,
+            range: {
+                min,
+                max,
+            },
+        });
+    });
+</script>
 
 <div class="range-setting">
     <div class="title">{title}</div>
     <div class="value">
-        <span class="input-value" contenteditable="true" bind:textContent={value} on:keypress={updateSliderKeypress} on:blur={updateSliderBlur}></span>
+        <span
+            class="input-value"
+            contenteditable="true"
+            bind:textContent={value}
+            on:keypress={updateSliderKeypress}
+            on:blur={updateSliderBlur}
+        ></span>
         <span class="value-suffix">{valueSuffix}</span>
     </div>
     <div bind:this={slider} class="slider" />
@@ -92,4 +110,4 @@
         font-family: "Inter", sans-serif;
         user-select: unset;
     }
-</style>
+</style>