[feat] added lorebook sorting

2023-07-20 17:17:09 +09:00
parent bfcf6766f0
commit 6f10461e2e
8 changed files with 213 additions and 150 deletions
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
    "pngjs": "^7.0.0",
    "rollup": "^3.21.3",
    "showdown": "^2.1.0",
+    "sortablejs": "^1.15.0",
    "three": "^0.154.0",
    "tippy.js": "^6.3.7",
    "uuid": "^9.0.0",
@@ -64,6 +65,7 @@
    "@types/node": "^18.7.10",
    "@types/pngjs": "^6.0.1",
    "@types/showdown": "^2.0.0",
+    "@types/sortablejs": "^1.15.1",
    "@types/three": "^0.154.0",
    "@types/uuid": "^9.0.1",
    "@types/wicg-file-system-access": "^2020.9.6",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ dependencies:
  showdown:
    specifier: ^2.1.0
    version: 2.1.0
+  sortablejs:
+    specifier: ^1.15.0
+    version: 1.15.0
  three:
    specifier: ^0.154.0
    version: 0.154.0
@@ -151,6 +154,9 @@ devDependencies:
  '@types/showdown':
    specifier: ^2.0.0
    version: 2.0.0
+  '@types/sortablejs':
+    specifier: ^1.15.1
+    version: 1.15.1
  '@types/three':
    specifier: ^0.154.0
    version: 0.154.0
@@ -836,6 +842,10 @@ packages:
    resolution: {integrity: sha512-70xBJoLv+oXjB5PhtA8vo7erjLDp9/qqI63SRHm4REKrwuPOLs8HhXwlZJBJaB4kC18cCZ1UUZ6Fb/PLFW4TCA==}
    dev: true

+  /@types/sortablejs@1.15.1:
+    resolution: {integrity: sha512-g/JwBNToh6oCTAwNS8UGVmjO7NLDKsejVhvE4x1eWiPTC3uCuNsa/TD4ssvX3du+MLiM+SHPNDuijp8y76JzLQ==}
+    dev: true
+
  /@types/stats.js@0.17.0:
    resolution: {integrity: sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==}
    dev: true
@@ -2621,6 +2631,10 @@ packages:
      sander: 0.5.1
    dev: true

+  /sortablejs@1.15.0:
+    resolution: {integrity: sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==}
+    dev: false
+
  /source-map-js@1.0.2:
    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
    engines: {node: '>=0.10.0'}
--- a/src/lib/Setting/Pages/GlobalLoreBookSettings.svelte
+++ b/src/lib/Setting/Pages/GlobalLoreBookSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { language } from "src/lang";
  import Help from "src/lib/Others/Help.svelte";
-  import LoreBookSetting from "src/lib/SideBars/LoreBookSetting.svelte";
+  import LoreBookSetting from "src/lib/SideBars/LoreBook/LoreBookSetting.svelte";
  import { DataBase } from "src/ts/storage/database";
  export let openLoreList = false
 </script>
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -6,7 +6,7 @@
    import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, LoaderIcon, User, DnaIcon, CurlyBraces, Volume2Icon, XIcon } from 'lucide-svelte'
    import Check from "../UI/GUI/Check.svelte";
    import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
-    import LoreBook from "./LoreBookSetting.svelte";
+    import LoreBook from "./LoreBook/LoreBookSetting.svelte";
    import { alertConfirm, alertError, alertNormal, alertSelectChar, alertTOS } from "../../ts/alert";
    import BarIcon from "./BarIcon.svelte";
    import { findCharacterbyId, selectMultipleFile } from "../../ts/util";
--- a/src/lib/SideBars/LoreBook/LoreBookData.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookData.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
    import { XIcon } from "lucide-svelte";
-    import { language } from "../../lang";
-    import type { loreBook } from "../../ts/storage/database";
-    import { alertConfirm } from "../../ts/alert";
-    import Check from "../UI/GUI/Check.svelte";
-    import Help from "../Others/Help.svelte";
-    import TextInput from "../UI/GUI/TextInput.svelte";
-    import NumberInput from "../UI/GUI/NumberInput.svelte";
-  import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
+    import { language } from "../../../lang";
+    import type { loreBook } from "../../../ts/storage/database";
+    import { alertConfirm } from "../../../ts/alert";
+    import Check from "../../UI/GUI/Check.svelte";
+    import Help from "../../Others/Help.svelte";
+    import TextInput from "../../UI/GUI/TextInput.svelte";
+    import NumberInput from "../../UI/GUI/NumberInput.svelte";
+    import TextAreaInput from "../../UI/GUI/TextAreaInput.svelte";
    export let value:loreBook
    export let onRemove: () => void = () => {}
+    export let idx:number
    let open = false
 </script>

-<div class="w-full flex flex-col">
+<div class="w-full flex flex-col pt-2 mt-2 border-t border-t-selected first:pt-0 first:mt-0 first:border-0" data-risu-idx={idx}>
    <div class="flex items-center transition-colors w-full ">
        <button class="endflex valuer border-borderc" on:click={() => {
            value.secondkey = value.secondkey ?? ''
--- a/src/lib/SideBars/LoreBook/LoreBookList.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookList.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+    import { DataBase, type loreBook } from "src/ts/storage/database";
+    import LoreBookData from "./LoreBookData.svelte";
+    import { selectedCharID } from "src/ts/stores";
+    import Sortable from 'sortablejs/modular/sortable.core.esm.js';
+    import { onDestroy, onMount } from "svelte";
+    import { sleep } from "src/ts/util";
+
+    export let globalMode = false
+    export let submenu = 0
+    let stb: Sortable = null
+    let ele: HTMLDivElement
+    let sorted = 0
+    const createStb = () => {
+        stb = Sortable.create(ele, {
+            onEnd: async () => {
+                let idx:number[] = []
+                ele.querySelectorAll('[data-risu-idx]').forEach((e, i) => {
+                    idx.push(parseInt(e.getAttribute('data-risu-idx')))
+                })
+                if(globalMode){
+                    let newLore:loreBook[] = []
+                    idx.forEach((i) => {
+                        newLore.push($DataBase.loreBook[$DataBase.loreBookPage].data[i])
+                    })
+                    $DataBase.loreBook[$DataBase.loreBookPage].data = newLore
+                }
+                else if(submenu === 1){
+                    let newLore:loreBook[] = []
+                    idx.forEach((i) => {
+                        newLore.push($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i])
+                    })
+                    $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore = newLore
+                }
+                else{
+                    let newLore:loreBook[] = []
+                    idx.forEach((i) => {
+                        newLore.push($DataBase.characters[$selectedCharID].globalLore[i])
+                    })
+                    $DataBase.characters[$selectedCharID].globalLore = newLore
+                }
+                stb.destroy()
+                sorted += 1
+                await sleep(1)
+                createStb()
+            }
+        })
+    }
+    onMount(createStb)
+
+    onDestroy(() => {
+        if(stb){
+            stb.destroy()
+        }
+    })
+</script>
+
+
+<div class="border-solid border-selected p-2 flex flex-col border-1 rounded-md" bind:this={ele}>
+    {#key sorted}
+        {#if globalMode}
+            {#if $DataBase.loreBook[$DataBase.loreBookPage].data.length === 0}
+                <span class="text-gray-500">No Lorebook</span>
+            {:else}
+                {#each $DataBase.loreBook[$DataBase.loreBookPage].data as book, i}
+                    <LoreBookData bind:value={$DataBase.loreBook[$DataBase.loreBookPage].data[i]} idx={i} onRemove={() => {
+                        let lore = $DataBase.loreBook[$DataBase.loreBookPage].data
+                        lore.splice(i, 1)
+                        $DataBase.loreBook[$DataBase.loreBookPage].data = lore
+                    }}/>
+                {/each}
+            {/if}
+        {:else if submenu === 0}
+            {#if $DataBase.characters[$selectedCharID].globalLore.length === 0}
+                <span class="text-gray-500">No Lorebook</span>
+            {:else}
+                {#each $DataBase.characters[$selectedCharID].globalLore as book, i}
+                    <LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} idx={i} onRemove={() => {
+                        let lore  = $DataBase.characters[$selectedCharID].globalLore
+                        lore.splice(i, 1)
+                        $DataBase.characters[$selectedCharID].globalLore = lore
+                    }}/>
+                {/each}
+            {/if}
+        {:else if submenu === 1}
+            {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore.length === 0}
+                <span class="text-gray-500">No Lorebook</span>
+            {:else}
+                {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore as book, i}
+                    <LoreBookData bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i]} idx={i} onRemove={() => {
+                        let lore  = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore
+                        lore.splice(i, 1)
+                        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore = lore
+                    }}/>
+                {/each}
+            {/if}
+        {/if}
+    {/key}
+</div>
--- a/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { DataBase } from "../../../ts/storage/database";
+    import { language } from "../../../lang";
+    import {selectedCharID} from '../../../ts/stores'
+    import { DownloadIcon, FolderUpIcon, ImportIcon, PlusIcon } from "lucide-svelte";
+    import { addLorebook, exportLoreBook, importLoreBook } from "../../../ts/process/lorebook";
+    import Check from "../../UI/GUI/Check.svelte";
+    import NumberInput from "../../UI/GUI/NumberInput.svelte";
+    import LoreBookList from "./LoreBookList.svelte";
+
+    let submenu = 0
+    export let globalMode = false
+</script>
+
+{#if !globalMode}
+    <div class="flex w-full rounded-md border border-selected">
+        <button on:click={() => {
+            submenu = 0
+        }} class="p-2 flex-1" class:bg-selected={submenu === 0}>
+            <span>{$DataBase.characters[$selectedCharID].type === 'group' ? language.group : language.character}</span>
+        </button>
+        <button on:click={() => {
+            submenu = 1
+        }} class="p2 flex-1 border-r border-l border-selected" class:bg-selected={submenu === 1}>
+            <span>{language.Chat}</span>
+        </button>
+        <button on:click={() => {
+            submenu = 2
+        }} class="p-2 flex-1" class:bg-selected={submenu === 2}>
+            <span>{language.settings}</span>
+        </button>
+    </div>
+{/if}
+{#if submenu !== 2}
+    {#if !globalMode}
+        <span class="text-gray-500 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
+    {/if}
+    <LoreBookList bind:globalMode bind:submenu />
+{:else}
+    {#if $DataBase.characters[$selectedCharID].loreSettings}
+        <div class="flex items-center mt-4">
+            <Check check={false} onChange={() => {
+                $DataBase.characters[$selectedCharID].loreSettings = undefined
+            }}
+            name={language.useGlobalSettings}
+            />
+        </div>
+        <div class="flex items-center mt-4">
+            <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.recursiveScanning} name={language.recursiveScanning}/>
+        </div>
+        <span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
+        <NumberInput size="sm" min={0} max={20} bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth} />
+        <span class="text-neutral-200">{language.loreBookToken}</span>
+        <NumberInput size="sm" min={0} max={4096} bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget} />
+    {:else}
+        <div class="flex items-center mt-4">
+            <Check check={true} onChange={() => {
+                $DataBase.characters[$selectedCharID].loreSettings = {
+                    tokenBudget: $DataBase.loreBookToken,
+                    scanDepth:$DataBase.loreBookDepth,
+                    recursiveScanning: false
+                }
+            }}
+            name={language.useGlobalSettings}
+            />
+        </div>
+    {/if}
+{/if}
+{#if submenu !== 2}
+
+<div class="text-gray-500 mt-2 flex">
+    <button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-neutral-200 cursor-pointer">
+        <PlusIcon />
+    </button>
+    <button on:click={() => {
+        exportLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
+    }} class="hover:text-neutral-200 ml-1  cursor-pointer">
+        <DownloadIcon />
+    </button>
+    <button on:click={() => {
+        importLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
+    }} class="hover:text-neutral-200 ml-2  cursor-pointer">
+        <FolderUpIcon />
+    </button>
+</div>
+{/if}
--- a/src/lib/SideBars/LoreBookSetting.svelte
+++ b/src/lib/SideBars/LoreBookSetting.svelte
@@ -1,139 +0,0 @@
-<script lang="ts">
-    import { DataBase } from "../../ts/storage/database";
-    import { language } from "../../lang";
-    import {selectedCharID} from '../../ts/stores'
-    import { DownloadIcon, FolderUpIcon, ImportIcon, PlusIcon } from "lucide-svelte";
-    import { addLorebook, exportLoreBook, importLoreBook } from "../../ts/process/lorebook";
-    import LoreBookData from "./LoreBookData.svelte";
-    import Check from "../UI/GUI/Check.svelte";
-  import NumberInput from "../UI/GUI/NumberInput.svelte";
-    let submenu = 0
-    export let globalMode = false
-</script>
-
-{#if !globalMode}
-    <div class="flex w-full rounded-md border border-selected">
-        <button on:click={() => {
-            submenu = 0
-        }} class="p-2 flex-1" class:bg-selected={submenu === 0}>
-            <span>{$DataBase.characters[$selectedCharID].type === 'group' ? language.group : language.character}</span>
-        </button>
-        <button on:click={() => {
-            submenu = 1
-        }} class="p2 flex-1 border-r border-l border-selected" class:bg-selected={submenu === 1}>
-            <span>{language.Chat}</span>
-        </button>
-        <button on:click={() => {
-            submenu = 2
-        }} class="p-2 flex-1" class:bg-selected={submenu === 2}>
-            <span>{language.settings}</span>
-        </button>
-    </div>
-{/if}
-{#if submenu !== 2}
-    {#if !globalMode}
-        <span class="text-gray-500 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
-    {/if}
-    <div class="border-solid border-selected p-2 flex flex-col border-1 rounded-md">
-        {#if globalMode}
-            {#if $DataBase.loreBook[$DataBase.loreBookPage].data.length === 0}
-                <span class="text-gray-500">No Lorebook</span>
-            {:else}
-                {#each $DataBase.loreBook[$DataBase.loreBookPage].data as book, i}
-                    {#if i !== 0}
-                        <div class="border-selected mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
-                    {/if}
-                    <LoreBookData bind:value={$DataBase.loreBook[$DataBase.loreBookPage].data[i]} onRemove={() => {
-                        let lore = $DataBase.loreBook[$DataBase.loreBookPage].data
-                        lore.splice(i, 1)
-                        $DataBase.loreBook[$DataBase.loreBookPage].data = lore
-                    }}/>
-                {/each}
-            {/if}
-        {:else if submenu === 0}
-            {#if $DataBase.characters[$selectedCharID].globalLore.length === 0}
-                <span class="text-gray-500">No Lorebook</span>
-            {:else}
-                {#each $DataBase.characters[$selectedCharID].globalLore as book, i}
-                    {#if i !== 0}
-                        <div class="border-selected mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
-                    {/if}
-                    <LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} onRemove={() => {
-                        let lore  = $DataBase.characters[$selectedCharID].globalLore
-                        lore.splice(i, 1)
-                        $DataBase.characters[$selectedCharID].globalLore = lore
-                    }}/>
-                {/each}
-            {/if}
-        {:else if submenu === 1}
-            {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore.length === 0}
-                <span class="text-gray-500">No Lorebook</span>
-            {:else}
-                {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore as book, i}
-                    {#if i !== 0}
-                        <div class="border-selected mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
-                    {/if}
-                    <LoreBookData bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i]} onRemove={() => {
-                        let lore  = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore
-                        lore.splice(i, 1)
-                        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore = lore
-                    }}/>
-                {/each}
-            {/if}
-        {/if}
-    </div>
-{:else}
-    {#if $DataBase.characters[$selectedCharID].loreSettings}
-        <div class="flex items-center mt-4">
-            <Check check={false} onChange={() => {
-                $DataBase.characters[$selectedCharID].loreSettings = undefined
-            }}
-            name={language.useGlobalSettings}
-            />
-        </div>
-        <div class="flex items-center mt-4">
-            <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.recursiveScanning} name={language.recursiveScanning}/>
-        </div>
-        <span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
-        <NumberInput size="sm" min={0} max={20} bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth} />
-        <span class="text-neutral-200">{language.loreBookToken}</span>
-        <NumberInput size="sm" min={0} max={4096} bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget} />
-    {:else}
-        <div class="flex items-center mt-4">
-            <Check check={true} onChange={() => {
-                $DataBase.characters[$selectedCharID].loreSettings = {
-                    tokenBudget: $DataBase.loreBookToken,
-                    scanDepth:$DataBase.loreBookDepth,
-                    recursiveScanning: false
-                }
-            }}
-            name={language.useGlobalSettings}
-            />
-        </div>
-    {/if}
-{/if}
-{#if submenu !== 2}
-
-<div class="text-gray-500 mt-2 flex">
-    <button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-neutral-200 cursor-pointer">
-        <PlusIcon />
-    </button>
-    <button on:click={() => {
-        exportLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
-    }} class="hover:text-neutral-200 ml-1  cursor-pointer">
-        <DownloadIcon />
-    </button>
-    <button on:click={() => {
-        importLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
-    }} class="hover:text-neutral-200 ml-2  cursor-pointer">
-        <FolderUpIcon />
-    </button>
-</div>
-{/if}
-<style>
-    .seperator{
-        border-top: 0px;
-        border-left: 0px;
-        border-right: 0px;
-    }
-</style>