[feat] drag and drop order and folders

2023-05-23 04:51:47 +09:00
parent d174aa0796
commit c42a8710e1
12 changed files with 895 additions and 340 deletions
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -16,6 +16,7 @@
    import RegexData from "./RegexData.svelte";
    import { exportChar } from "src/ts/characterCards";
    import { getElevenTTSVoices, getWebSpeechTTSVoices } from "src/ts/process/tts";
+  import { checkCharOrder } from "src/ts/globalApi";

    let subMenu = 0
    let subberMenu = 0
@@ -671,6 +672,7 @@
        }
        let chars = $DataBase.characters
        chars.splice($selectedCharID, 1)
+        checkCharOrder()
        $selectedCharID = -1
        $DataBase.characters = chars

--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -6,7 +6,7 @@
    settingsOpen,
    sideBarStore,
  } from "../../ts/stores";
-  import { DataBase } from "../../ts/database";
+  import { DataBase, setDatabase, type folder } from "../../ts/database";
  import BarIcon from "./BarIcon.svelte";
  import SidebarIndicator from "./SidebarIndicator.svelte";
  import {
@@ -21,6 +21,8 @@
    ListIcon,
    LayoutGridIcon,
    PlusIcon,
+    FolderIcon,
+    FolderOpenIcon,
  } from "lucide-svelte";
  import {
    characterFormatUpdate,
@@ -36,6 +38,10 @@
  import { isEqual } from "lodash";
  import SidebarAvatar from "./SidebarAvatar.svelte";
  import BaseRoundedButton from "../UI/BaseRoundedButton.svelte";
+  import { get } from "svelte/store";
+  import { findCharacterIndexbyId, findCharacterbyId, getCharacterIndexObject } from "src/ts/util";
+  import { v4 } from "uuid";
+  import { checkCharOrder } from "src/ts/globalApi";
  let openPresetList = false;
  let sideBarMode = 0;
  let editMode = false;
@@ -72,13 +78,47 @@
    CharEmotion.set({});
  }

-  let charImages: string[] = [];
+  type sortTypeNormal = { type:'normal',img: string; index: number; }
+  type sortType =  sortTypeNormal|{type:'folder',folder:sortTypeNormal[],id:string}
+  let charImages: sortType[] = [];
  let IconRounded = false
+  let openFolders:string[] = []

  const unsub = DataBase.subscribe((db) => {
-    let newCharImages: string[] = [];
-    for (const cha of db.characters) {
-      newCharImages.push(cha.image ?? "");
+    let newCharImages: sortType[] = [];
+    const idObject = getCharacterIndexObject()
+    for (const id of db.characterOrder) {
+      if(typeof(id) === 'string'){
+        const index = idObject[id] ?? -1
+        if(index !== -1){
+          const cha = db.characters[index]
+          newCharImages.push({
+            img:cha.image ?? "",
+            index:index,
+            type: "normal"
+          });
+        }
+      }
+      else{
+        const folder = id
+        let folderCharImages: sortTypeNormal[] = []
+        for(const id of folder.data){
+          const index = idObject[id] ?? -1
+          if(index !== -1){
+            const cha = db.characters[index]
+            folderCharImages.push({
+              img:cha.image ?? "",
+              index:index,
+              type: "normal"
+            });
+          }
+        }
+        newCharImages.push({
+          folder: folderCharImages,
+          type: "folder",
+          id: folder.id
+        });
+      }
    }
    if (!isEqual(charImages, newCharImages)) {
      charImages = newCharImages;
@@ -88,11 +128,160 @@
    }
  });

+  const inserter = (mainIndex:DragData, targetIndex:DragData) => {
+    if(mainIndex.index === targetIndex.index && mainIndex.folder === targetIndex.folder){
+      return
+    }
+    let db = get(DataBase)
+    let mainFolderIndex = mainIndex.folder ? getFolderIndex(mainIndex.folder) : null
+    let targetFolderIndex = targetIndex.folder ? getFolderIndex(targetIndex.folder) : null
+    let mainFolderId = mainIndex.folder ? (db.characterOrder[mainFolderIndex] as folder).id : ''
+    let mainId = ''
+    if(mainIndex.folder){
+      mainId = (db.characterOrder[mainFolderIndex] as folder).data[mainIndex.index]
+    }
+    else{
+      const da = db.characterOrder[mainIndex.index]
+      if(typeof(da) !== 'string'){
+        return
+      }
+      mainId = da
+    }
+    if(targetIndex.folder){
+        const folder = db.characterOrder[targetFolderIndex] as folder
+        folder.data.splice(targetIndex.index,0,mainId)
+        db.characterOrder[targetFolderIndex] = folder
+    }
+    else{
+        db.characterOrder.splice(targetIndex.index,0,mainId)
+    }
+    if(mainIndex.folder){
+      mainFolderIndex = -1
+      for(let i=0;i<db.characterOrder.length;i++){
+        const a =db.characterOrder[i]
+        if(typeof(a) !== 'string'){
+          if(a.id === mainFolderId){
+            mainFolderIndex = i
+            break
+          }
+        }
+      }
+      if(mainFolderIndex !== -1){
+        const folder:folder = db.characterOrder[mainFolderIndex] as folder
+        const ind = mainIndex.index > targetIndex.index ? folder.data.lastIndexOf(mainId) : folder.data.indexOf(mainId) 
+        if(ind !== -1){
+          folder.data.splice(ind, 1)
+        }
+        db.characterOrder[mainFolderIndex] = folder
+      }
+      else{
+        console.log('folder not found')
+      }
+    }
+    else{
+      const ind = mainIndex.index > targetIndex.index ? db.characterOrder.lastIndexOf(mainId) : db.characterOrder.indexOf(mainId) 
+      if(ind !== -1){
+        db.characterOrder.splice(ind, 1)
+      }
+    }
+
+    setDatabase(db)
+    checkCharOrder()
+  }
+
+  function getFolderIndex(id:string){
+    let db = get(DataBase)
+    for(let i=0;i<db.characterOrder.length;i++){
+      const data = db.characterOrder[i]
+      if(typeof(data) !== 'string' && data.id === id){
+        return i
+      }
+    }
+    return -1
+  }
+
+  const createFolder = (mainIndex:DragData, targetIndex:DragData) => {
+    if(mainIndex.index === targetIndex.index && mainIndex.folder === targetIndex.folder){
+      return
+    }
+    let db = get(DataBase)
+    let mainFolderIndex = mainIndex.folder ? getFolderIndex(mainIndex.folder) : null
+    let mainFolder = db.characterOrder[mainFolderIndex] as folder
+    if(targetIndex.folder){
+      return
+    }
+    const main = mainIndex.folder ? mainFolder.data[mainIndex.index] : db.characterOrder[mainIndex.index]
+    const target = db.characterOrder[targetIndex.index]
+    if(typeof(main) !== 'string'){
+      return
+    }
+    if(typeof (target) === 'string'){
+      const newFolder:folder = {
+        name: "New Folder",
+        data: [main, target],
+        color: "",
+        id: v4()
+      }
+      db.characterOrder[targetIndex.index] = newFolder
+      if(mainIndex.folder){
+        mainFolder.data.splice(mainIndex.index, 1)
+        db.characterOrder[mainFolderIndex] = mainFolder
+      }
+      else{
+        db.characterOrder.splice(mainIndex.index, 1)
+      }
+    }
+    else{
+      target.data.push(main)
+      if(mainIndex.folder){
+        mainFolder.data.splice(mainIndex.index, 1)
+        db.characterOrder[mainFolderIndex] = mainFolder
+      }
+      else{
+        db.characterOrder.splice(mainIndex.index, 1)
+      }
+    }
+    setDatabase(db)
+  }
+
+  type DragEv = DragEvent & {
+    currentTarget: EventTarget & HTMLDivElement;
+  }
+  type DragData = {
+    index:number,
+    folder?:string
+  }
+  const avatarDragStart = (ind:DragData, e:DragEv) => {
+    e.dataTransfer.setData("application/json", JSON.stringify({
+      type: "risuDrag",
+      index: ind
+    }))
+    const avatar = e.currentTarget.querySelector('.avatar')
+      if(avatar){
+        e.dataTransfer.setDragImage(avatar, 10, 10);
+      }
+  }
+
+  const avatarDragOver = (e:DragEv) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+  }
+
+  const avatarDrop = (ind:DragData, e:DragEv) => {
+    e.preventDefault()
+    try {
+      const da = JSON.parse(e.dataTransfer.getData("application/json"))
+      if(da.type === "risuDrag"){
+        createFolder(da.index,ind)
+      }
+    } catch (error) {}
+  }
+
  onDestroy(unsub);
 </script>

 <div
-  class="flex h-full w-20 min-w-20 flex-col items-center overflow-x-hidden overflow-y-scroll bg-bgcolor text-white shadow-lg gap-2"
+  class="flex h-full w-20 min-w-20 flex-col items-center overflow-x-hidden overflow-y-scroll bg-bgcolor text-white shadow-lg"
  class:editMode
 >
  <button
@@ -102,57 +291,148 @@
    }}><ListIcon /></button
  >
  <div class="h-8 min-h-8 w-14 min-w-14 bg-transparent" />
+  <div class="h-3 w-14" on:dragover={(e) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    e.currentTarget.classList.add('bg-green-500')
+  }} on:dragleave={(e) => {
+    e.currentTarget.classList.remove('bg-green-500')
+  }} on:drop={(e) => {
+    e.preventDefault()
+    e.currentTarget.classList.remove('bg-green-500')
+    const da = JSON.parse(e.dataTransfer.getData("application/json"))
+    if(da.type === "risuDrag"){
+      inserter(da.index,{index:0})
+    }
+  }} />
  {#if menuMode === 0}
-    {#each charImages as charimg, i}
-      <div class="group relative flex items-center px-2">
+    {#each charImages as char, ind}
+      <div class="group relative flex items-center px-2"
+        draggable="true"
+        on:dragstart={(e) => {avatarDragStart({index:ind}, e)}}
+        on:dragover={avatarDragOver}
+        on:drop={(e) => {avatarDrop({index:ind}, e)}}
+      >
        <SidebarIndicator
-          isActive={$selectedCharID === i && sideBarMode !== 1}
+          isActive={char.type === 'normal' && $selectedCharID === char.index && sideBarMode !== 1}
        />
        <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
        <div
-          on:click={() => {
-            changeChar(i);
-          }}
-          on:keydown={(e) => {
-            if (e.key === "Enter") {
-              changeChar(i);
+            on:click={() => {
+              if(char.type === "normal"){
+                changeChar(char.index);
+              }
+            }}
+            on:keydown={(e) => {
+              if (e.key === "Enter") {
+                if(char.type === "normal"){
+                  changeChar(char.index);
+                }
+              }
+            }}
+            tabindex="0"
+          >
+          {#if char.type === 'normal'}
+            <SidebarAvatar src={char.img ? getCharImage(char.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} />
+          {:else if char.type === "folder"}
+            <SidebarAvatar src="slot" size="56" rounded={IconRounded} onClick={() => {
+              if(char.type !== 'folder'){
+                return
+              }
+              if(openFolders.includes(char.id)){
+                openFolders.splice(openFolders.indexOf(char.id), 1)
+              }
+              else{
+                openFolders.push(char.id)
+              }
+              openFolders = openFolders
+            }}>
+              {#if openFolders.includes(char.id)}
+                <FolderOpenIcon />
+              {:else}
+                <FolderIcon />
+              {/if}
+            </SidebarAvatar>
+          {/if}
+        </div>
+      </div>
+      {#if char.type === 'folder' && openFolders.includes(char.id)}
+        <div class="w-full flex flex-col items-center py-1 mt-1 rounded-lg relative">
+          <div class="absolute top-0 left-1 bg-darkbg w-full h-full rounded-lg z-0"></div>
+          <div class="h-3 w-14 relative z-10" on:dragover={(e) => {
+            e.preventDefault()
+            e.dataTransfer.dropEffect = 'move'
+            e.currentTarget.classList.add('bg-green-500')
+          }} on:dragleave={(e) => {
+            e.currentTarget.classList.remove('bg-green-500')
+          }} on:drop={(e) => {
+            e.preventDefault()
+            e.currentTarget.classList.remove('bg-green-500')
+            const da = JSON.parse(e.dataTransfer.getData("application/json"))
+            if(da.type === "risuDrag", char.type === 'folder'){
+              inserter(da.index,{index:0,folder:char.id})
            }
-          }}
-          tabindex="0"
-        >
-        <SidebarAvatar src={charImages[i] ? getCharImage(charImages[i], "plain") : "/none.webp"} size="56" rounded={IconRounded} />
-      </div>
-        {#if editMode}
-          <div class="mt-2 flex flex-col">
-            <button
-              on:click={() => {
-                let chars = $DataBase.characters;
-                if (chars[i - 1]) {
-                  const currentchar = chars[i];
-                  chars[i] = chars[i - 1];
-                  chars[i - 1] = currentchar;
-                  $DataBase.characters = chars;
-                }
-              }}
+          }} />
+          {#each char.folder as char2, ind}
+              <div class="group relative flex items-center px-2 z-10"
+              draggable="true"
+              on:dragstart={(e) => {if(char.type === 'folder'){avatarDragStart({index: ind, folder:char.id}, e)}}}
+              on:dragover={avatarDragOver}
+              on:drop={(e) => {if(char.type === 'folder'){avatarDrop({index: ind, folder:char.id}, e)}}}
            >
-              <ArrowUp size={20} />
-            </button>
-            <button
-              on:click={() => {
-                let chars = $DataBase.characters;
-                if (chars[i + 1]) {
-                  const currentchar = chars[i];
-                  chars[i] = chars[i + 1];
-                  chars[i + 1] = currentchar;
-                  $DataBase.characters = chars;
-                }
-              }}
-            >
-              <ArrowDown size={22} />
-            </button>
-          </div>
-        {/if}
-      </div>
+              <SidebarIndicator
+                isActive={$selectedCharID === char2.index && sideBarMode !== 1}
+              />
+              <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+              <div
+                  on:click={() => {
+                    if(char2.type === "normal"){
+                      changeChar(char2.index);
+                    }
+                  }}
+                  on:keydown={(e) => {
+                    if (e.key === "Enter") {
+                      if(char2.type === "normal"){
+                        changeChar(char2.index);
+                      }
+                    }
+                  }}
+                  tabindex="0"
+                >
+                <SidebarAvatar src={char2.img ? getCharImage(char2.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} />
+              </div>
+            </div>
+            <div class="h-3 w-14 relative z-10" on:dragover={(e) => {
+              e.preventDefault()
+              e.dataTransfer.dropEffect = 'move'
+              e.currentTarget.classList.add('bg-green-500')
+            }} on:dragleave={(e) => {
+              e.currentTarget.classList.remove('bg-green-500')
+            }} on:drop={(e) => {
+              e.preventDefault()
+              e.currentTarget.classList.remove('bg-green-500')
+              const da = JSON.parse(e.dataTransfer.getData("application/json"))
+              if(da.type === "risuDrag" && char.type === 'folder'){
+                inserter(da.index,{index:ind+1,folder:char.id})
+              }
+            }} />
+          {/each}
+        </div>
+      {/if}
+      <div class="h-3 w-14" on:dragover={(e) => {
+        e.preventDefault()
+        e.dataTransfer.dropEffect = 'move'
+        e.currentTarget.classList.add('bg-green-500')
+      }} on:dragleave={(e) => {
+        e.currentTarget.classList.remove('bg-green-500')
+      }} on:drop={(e) => {
+        e.preventDefault()
+        e.currentTarget.classList.remove('bg-green-500')
+        const da = JSON.parse(e.dataTransfer.getData("application/json"))
+        if(da.type === "risuDrag"){
+          inserter(da.index,{index:ind+1})
+        }
+      }} />
    {/each}
    <div class="flex flex-col items-center space-y-2 px-2">
      <BaseRoundedButton
--- a/src/lib/SideBars/SidebarAvatar.svelte
+++ b/src/lib/SideBars/SidebarAvatar.svelte
@@ -2,29 +2,41 @@
  export let rounded:boolean
  export let src:string|Promise<string>;
  export let size = "22";
+  export let onClick = () => {}
 </script>

-<span class="flex shrink-0 items-center justify-center">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<span class="flex shrink-0 items-center justify-center avatar" on:click={onClick}>
  {#if src}
-    {#await src}
+    {#if src === "slot"}
      <div
-        class="bg-skin-border sidebar-avatar rounded-md bg-top"
+        class="bg-skin-border sidebar-avatar rounded-md bg-top bg-darkbg flex items-center justify-center"
        style:width={size + "px"}
        style:height={size + "px"}
        style:minWidth={size + "px"}
        class:rounded-md={!rounded} class:rounded-full={rounded} 
-      />
-    {:then img}
-      <img
-        src={img}
-        class="bg-skin-border sidebar-avatar rounded-md object-cover object-top"
-        style:width={size + "px"}
-        style:height={size + "px"}
-        style:minWidth={size + "px"}
-        class:rounded-md={!rounded} class:rounded-full={rounded} 
-        alt="avatar"
-      />
-    {/await}
+      ><slot /></div>
+    {:else}
+      {#await src}
+        <div
+          class="bg-skin-border sidebar-avatar rounded-md bg-top"
+          style:width={size + "px"}
+          style:height={size + "px"}
+          style:minWidth={size + "px"}
+          class:rounded-md={!rounded} class:rounded-full={rounded} 
+        />
+      {:then img}
+        <img
+          src={img}
+          class="bg-skin-border sidebar-avatar rounded-md object-cover object-top"
+          style:width={size + "px"}
+          style:height={size + "px"}
+          style:minWidth={size + "px"}
+          class:rounded-md={!rounded} class:rounded-full={rounded} 
+          alt="avatar"
+        />
+      {/await}
+    {/if}
  {:else}
    <div
      class="bg-skin-border sidebar-avatar rounded-md bg-top"
--- a/src/ts/characterCards.ts
+++ b/src/ts/characterCards.ts
@@ -8,7 +8,7 @@ import { v4 as uuidv4 } from 'uuid';
 import exifr from 'exifr'
 import { PngMetadata } from "./exif"
 import { characterFormatUpdate } from "./characters"
-import { downloadFile, readImage, saveAsset } from "./globalApi"
+import { checkCharOrder, downloadFile, readImage, saveAsset } from "./globalApi"
 import { cloneDeep } from "lodash"


@@ -21,6 +21,7 @@ export async function importCharacter() {

        for(const f of files){
            await importCharacterProcess(f)
+            checkCharOrder()
        }
    } catch (error) {
        alertError(`${error}`)
@@ -145,7 +146,7 @@ export async function characterHubImport() {
            {
                const charaData:CharacterCardV2 = JSON.parse(Buffer.from(readed.chara, 'base64').toString('utf-8'))
                if(await importSpecv2(charaData, img)){
-                    
+                    checkCharOrder()
                    return
                }
            }
@@ -156,6 +157,7 @@ export async function characterHubImport() {
                db.characters.push(convertOldTavernAndJSON(charaData, imgp))
    
                DataBase.set(db)
+                checkCharOrder()
                alertNormal(language.importedCharacter)
                return
            }
@@ -431,6 +433,7 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole

    db.characters.push(char)
    
+
    setDatabase(db)

    alertNormal(language.importedCharacter)
--- a/src/ts/characters.ts
+++ b/src/ts/characters.ts
@@ -8,12 +8,13 @@ import { encode as encodeMsgpack, decode as decodeMsgpack } from "@msgpack/msgpa
 import { checkNullish, findCharacterbyId, selectMultipleFile, selectSingleFile, sleep } from "./util";
 import { v4 as uuidv4 } from 'uuid';
 import { selectedCharID } from "./stores";
-import { downloadFile, getFileSrc, readImage } from "./globalApi";
+import { checkCharOrder, downloadFile, getFileSrc, readImage } from "./globalApi";

 export function createNewCharacter() {
    let db = get(DataBase)
    db.characters.push(createBlankChar())
    setDatabase(db)
+    checkCharOrder()
    return db.characters.length - 1
 }

--- a/src/ts/database.ts
+++ b/src/ts/database.ts
@@ -219,6 +219,8 @@ export function setDatabase(data:Database){
            FontColorItalicBold: "#8C8D93"
        }
    }
+
+
    changeLanguage(data.language)
    DataBase.set(data)
 }
@@ -424,6 +426,14 @@ export interface Database{
    textBorder?:boolean
    textScreenRounded?:boolean
    textScreenBorder?:string
+    characterOrder:(string|folder)[]
+}
+
+export interface folder{
+    name:string
+    data:string[]
+    color:string
+    id:string
 }


--- a/src/ts/globalApi.ts
+++ b/src/ts/globalApi.ts
@@ -17,6 +17,7 @@ import { alertError, alertStore } from "./alert";
 import { checkDriverInit } from "./drive/drive";
 import { hasher } from "./parser";
 import { characterHubImport } from "./characterCards";
+import { cloneDeep } from "lodash";

 //@ts-ignore
 export const isTauri = !!window.__TAURI__
@@ -620,6 +621,65 @@ async function checkNewFormat() {

        db.formatversion = 3
    }
+    if(!db.characterOrder){
+        db.characterOrder = []
+    }
+
+
+    setDatabase(db)
+    checkCharOrder()
+}
+
+export function checkCharOrder() {
+    let db = get(DataBase)
+    let ordered = cloneDeep(db.characterOrder ?? [])
+    for(let i=0;i<db.characterOrder.length;i++){
+        const folder =db.characterOrder[i]
+        if(typeof(folder) !== 'string'){
+            console.log(folder)
+            for(const f of folder.data){
+                ordered.push(f)
+            }
+        }
+    }
+
+    let charIdList:string[] = []
+
+    for(let i=0;i<db.characters.length;i++){
+        const charId = db.characters[i].chaId
+        charIdList.push(charId)
+        if(!ordered.includes(charId)){
+            db.characterOrder.push(charId)
+        }
+    }
+
+
+    for(let i=0;i<db.characterOrder.length;i++){
+        const data =db.characterOrder[i]
+        if(typeof(data) !== 'string'){
+            if(data.data.length === 0){
+                db.characterOrder.splice(i,1)
+                i--;
+                continue
+            }
+            for(let i2=0;i2<data.data.length;i2++){
+                const data2 = data.data[i2]
+                if(!charIdList.includes(data2)){
+                    data.data.splice(i2,1)
+                    i2--;
+                }
+            }
+            db.characterOrder[i] = data
+        }
+        else{
+            if(!charIdList.includes(data)){
+                db.characterOrder.splice(i,1)
+                i--;
+            }
+        }
+    }
+
+
    setDatabase(db)
 }

--- a/src/ts/util.ts
+++ b/src/ts/util.ts
@@ -188,6 +188,29 @@ export function findCharacterbyId(id:string) {
    return unknown
 }

+export function findCharacterIndexbyId(id:string) {
+    const db = get(DataBase)
+    let i=0;
+    for(const char of db.characters){
+        if(char.chaId === id){
+            return i
+        }
+        i += 1
+    }
+    return -1
+}
+
+export function getCharacterIndexObject() {
+    const db = get(DataBase)
+    let i=0;
+    let result:{[key:string]:number} = {}
+    for(const char of db.characters){
+        result[char.chaId] = i
+        i += 1
+    }
+    return result
+}
+
 export function defaultEmotion(em:[string,string][]){
    if(!em){
        return ''