[feat] drag and drop order and folders

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)

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
 }
 

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
 }
 
 

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)
 }
 

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 ''