Change DataBase inside svelte to DBState for performance

This commit is contained in:
kwaroran
2024-10-23 23:46:32 +09:00
parent a9f1819044
commit 2044d9b63b
122 changed files with 1372 additions and 1424 deletions

View File

@@ -4,7 +4,7 @@
import Button from "src/lib/UI/GUI/Button.svelte";
import TextInput from "src/lib/UI/GUI/TextInput.svelte";
import type { RisuModule } from "src/ts/process/modules";
import { DataBase } from "src/ts/storage/database";
import { DBState } from "src/ts/storage/database.svelte";
import { selectedCharID } from "src/ts/stores";
import { SettingsMenuIndex, settingsOpen } from "src/ts/stores";
interface Props {
@@ -16,7 +16,7 @@
let moduleSearch = $state('')
function sortModules(modules:RisuModule[], search:string){
const db = $DataBase
const db = DBState.db
return modules.filter((v) => {
if(search === '') return true
return v.name.toLowerCase().includes(search.toLowerCase())
@@ -48,15 +48,15 @@
<TextInput className="mt-4" placeholder={language.search} bind:value={moduleSearch} />
<div class="contain w-full max-w-full mt-4 flex flex-col border-selected border-1 rounded-md">
{#if $DataBase.modules.length === 0}
{#if DBState.db.modules.length === 0}
<div class="text-textcolor2 p-3">{language.noModules}</div>
{:else}
{#each sortModules($DataBase.modules, moduleSearch) as rmodule, i}
{#each sortModules(DBState.db.modules, moduleSearch) as rmodule, i}
{#if i !== 0}
<div class="border-t-1 border-selected"></div>
{/if}
<div class="pl-3 py-3 text-left flex">
{#if !alertMode && $DataBase.enabledModules.includes(rmodule.id)}
{#if !alertMode && DBState.db.enabledModules.includes(rmodule.id)}
<span class="text-textcolor2">{rmodule.name}</span>
{:else}
<span class="">{rmodule.name}</span>
@@ -71,23 +71,23 @@
}}>
<CheckCircle2Icon size={18}/>
</button>
{:else if $DataBase.enabledModules.includes(rmodule.id)}
{:else if DBState.db.enabledModules.includes(rmodule.id)}
<button class="mr-2 text-textcolor2 cursor-not-allowed">
</button>
{:else}
<button class={(!$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)) ?
<button class={(!DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)) ?
"text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" :
"mr-2 cursor-pointer text-blue-500"
} onclick={async (e) => {
e.stopPropagation()
if($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)){
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.splice($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.indexOf(rmodule.id), 1)
if(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)){
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.splice(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.indexOf(rmodule.id), 1)
}
else{
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.push(rmodule.id)
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.push(rmodule.id)
}
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules
}}>
<CheckCircle2Icon size={18}/>
</button>

View File

@@ -4,18 +4,15 @@
import LoreBookData from "src/lib/SideBars/LoreBook/LoreBookData.svelte";
import type { RisuModule } from "src/ts/process/modules";
import { DownloadIcon, FolderUpIcon, PlusIcon, TrashIcon } from "lucide-svelte";
import { alertConfirm } from "src/ts/alert";
import RegexList from "src/lib/SideBars/Scripts/RegexList.svelte";
import TriggerList from "src/lib/SideBars/Scripts/TriggerList.svelte";
import Check from "src/lib/UI/GUI/CheckInput.svelte";
import Help from "src/lib/Others/Help.svelte";
import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
import Button from "src/lib/UI/GUI/Button.svelte";
import { getFileSrc, openURL, saveAsset } from "src/ts/storage/globalApi";
import { hubURL } from "src/ts/characterCards";
import { exportRegex, importRegex } from "src/ts/process/scripts";
import { selectMultipleFile } from "src/ts/util";
import { DataBase } from 'src/ts/storage/database';
import { DBState } from 'src/ts/storage/database.svelte';
let submenu = $state(0)
interface Props {
@@ -27,7 +24,7 @@
let assetFilePath:string[] = $state([])
$effect.pre(() => {
if($DataBase.useAdditionalAssetsPreview){
if(DBState.db.useAdditionalAssetsPreview){
if(currentModule?.assets){
for(let i = 0; i < currentModule.assets.length; i++){
if(currentModule.assets[i].length > 2 && currentModule.assets[i][2]) {
@@ -202,7 +199,7 @@
{#each currentModule.assets as assets, i}
<tr>
<td class="font-medium truncate">
{#if assetFilePath[i] && $DataBase.useAdditionalAssetsPreview}
{#if assetFilePath[i] && DBState.db.useAdditionalAssetsPreview}
{#if assetFileExtensions[i] === 'mp4'}
<!-- svelte-ignore a11y_media_has_caption -->
<video controls class="mt-2 px-2 w-full m-1 rounded-md"><source src={assetFilePath[i]} type="video/mp4"></video>

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { language } from "src/lang";
import { DataBase } from "src/ts/storage/database";
import { DBState } from "src/ts/storage/database.svelte";
import Button from "src/lib/UI/GUI/Button.svelte";
import ModuleMenu from "src/lib/Setting/Pages/Module/ModuleMenu.svelte";
import { exportModule, importModule, type RisuModule } from "src/ts/process/modules";
@@ -9,7 +9,7 @@
import { tooltip } from "src/ts/gui/tooltip";
import { alertCardExport, alertConfirm, alertError } from "src/ts/alert";
import TextInput from "src/lib/UI/GUI/TextInput.svelte";
import { ShowRealmFrameStore } from "src/ts/stores";
import { ShowRealmFrameStore } from "src/ts/stores";
let tempModule:RisuModule = $state({
name: '',
description: '',
@@ -20,7 +20,6 @@
let moduleSearch = $state('')
function sortModules(modules:RisuModule[], search:string){
const db = $DataBase
return modules.filter((v) => {
if(search === '') return true
return v.name.toLowerCase().includes(search.toLowerCase())
@@ -37,10 +36,10 @@
<TextInput className="mt-4" placeholder={language.search} bind:value={moduleSearch} />
<div class="contain w-full max-w-full mt-4 flex flex-col border-selected border-1 rounded-md flex-1 overflow-y-auto">
{#if $DataBase.modules.length === 0}
{#if DBState.db.modules.length === 0}
<div class="text-textcolor2 p-3">{language.noModules}</div>
{:else}
{#each sortModules($DataBase.modules, moduleSearch) as rmodule, i}
{#each sortModules(DBState.db.modules, moduleSearch) as rmodule, i}
{#if i !== 0}
<div class="border-t-1 border-selected"></div>
{/if}
@@ -48,18 +47,18 @@
<div class="pl-3 pt-3 text-left flex">
<span class="text-lg">{rmodule.name}</span>
<div class="flex-grow flex justify-end">
<button class={(!$DataBase.enabledModules.includes(rmodule.id)) ?
<button class={(!DBState.db.enabledModules.includes(rmodule.id)) ?
"text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" :
"mr-2 cursor-pointer text-blue-500"
} use:tooltip={language.enableGlobal} onclick={async (e) => {
e.stopPropagation()
if($DataBase.enabledModules.includes(rmodule.id)){
$DataBase.enabledModules.splice($DataBase.enabledModules.indexOf(rmodule.id), 1)
if(DBState.db.enabledModules.includes(rmodule.id)){
DBState.db.enabledModules.splice(DBState.db.enabledModules.indexOf(rmodule.id), 1)
}
else{
$DataBase.enabledModules.push(rmodule.id)
DBState.db.enabledModules.push(rmodule.id)
}
$DataBase.enabledModules = $DataBase.enabledModules
DBState.db.enabledModules = DBState.db.enabledModules
}}>
<Globe size={18}/>
</button>
@@ -71,7 +70,7 @@
</button>
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.edit} onclick={async (e) => {
e.stopPropagation()
const index = $DataBase.modules.findIndex((v) => v.id === rmodule.id)
const index = DBState.db.modules.findIndex((v) => v.id === rmodule.id)
tempModule = rmodule
editModuleIndex = index
mode = 2
@@ -82,9 +81,9 @@
e.stopPropagation()
const d = await alertConfirm(`${language.removeConfirm}` + rmodule.name)
if(d){
const index = $DataBase.modules.findIndex((v) => v.id === rmodule.id)
$DataBase.modules.splice(index, 1)
$DataBase.modules = $DataBase.modules
const index = DBState.db.modules.findIndex((v) => v.id === rmodule.id)
DBState.db.modules.splice(index, 1)
DBState.db.modules = DBState.db.modules
}
}}>
<TrashIcon size={18}/>
@@ -110,7 +109,7 @@
<h2 class="mb-2 text-2xl font-bold mt-2">{language.createModule}</h2>
<ModuleMenu bind:currentModule={tempModule}/>
<Button className="mt-6" onclick={() => {
$DataBase.modules.push(tempModule)
DBState.db.modules.push(tempModule)
mode = 0
}}>{language.createModule}</Button>
{:else if mode === 2}
@@ -118,7 +117,7 @@
<ModuleMenu bind:currentModule={tempModule}/>
{#if tempModule.name !== ''}
<Button className="mt-6" onclick={() => {
$DataBase.modules[editModuleIndex] = tempModule
DBState.db.modules[editModuleIndex] = tempModule
mode = 0
}}>{language.editModule}</Button>
{/if}