mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hotkeys

Browse Source
This commit is contained in:
Kwaroran
2024-11-27 08:29:59 +09:00
parent e0de68cf9e
commit 096d2fe62c
5 changed files with 89 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/ChatScreens/Chat.svelte
View File

@@ -304,7 +304,7 @@
<div class="flex-grow flex items-center justify-end" class:text-textcolor2={options?.applyTextColors !== false}> <div class="flex-grow flex items-center justify-end" class:text-textcolor2={options?.applyTextColors !== false}>
<span class="text-xs">{statusMessage}</span> <span class="text-xs">{statusMessage}</span>
{#if DBState.db.useChatCopy && !blankMessage} {#if DBState.db.useChatCopy && !blankMessage}
<button class="ml-2 hover:text-blue-500 transition-colors" onclick={async ()=>{ <button class="ml-2 hover:text-blue-500 transition-colors button-icon-copy" onclick={async ()=>{
if(window.navigator.clipboard.write){ if(window.navigator.clipboard.write){
alertWait(language.loading) alertWait(language.loading)
const root = document.querySelector(':root') as HTMLElement; const root = document.querySelector(':root') as HTMLElement;
@@ -408,7 +408,7 @@
{/if} {/if}
{#if idx > -1} {#if idx > -1}
{#if DBState.db.characters[selIdState.selId].type !== 'group' && DBState.db.characters[selIdState.selId].ttsMode !== 'none' && (DBState.db.characters[selIdState.selId].ttsMode)} {#if DBState.db.characters[selIdState.selId].type !== 'group' && DBState.db.characters[selIdState.selId].ttsMode !== 'none' && (DBState.db.characters[selIdState.selId].ttsMode)}
<button class="ml-2 hover:text-blue-500 transition-colors" onclick={()=>{ <button class="ml-2 hover:text-blue-500 transition-colors button-icon-tts" onclick={()=>{
return sayTTS(null, message) return sayTTS(null, message)
}}> }}>
<Volume2Icon size={20}/> <Volume2Icon size={20}/>
@@ -416,7 +416,7 @@
{/if} {/if}
{#if !$ConnectionOpenStore} {#if !$ConnectionOpenStore}
<button class={"ml-2 hover:text-blue-500 transition-colors "+(editMode?'text-blue-400':'')} onclick={() => { <button class={"ml-2 hover:text-blue-500 transition-colors button-icon-edit "+(editMode?'text-blue-400':'')} onclick={() => {
if(!editMode){ if(!editMode){
editMode = true editMode = true
} }
@@ -427,13 +427,13 @@
}}> }}>
<PencilIcon size={20}/> <PencilIcon size={20}/>
</button> </button>
<button class="ml-2 hover:text-blue-500 transition-colors" onclick={(e) => rm(e, false)} use:longpress={(e) => rm(e, true)}> <button class="ml-2 hover:text-blue-500 transition-colors button-icon-remove" onclick={(e) => rm(e, false)} use:longpress={(e) => rm(e, true)}>
<TrashIcon size={20}/> <TrashIcon size={20}/>
</button> </button>
{/if} {/if}
{/if} {/if}
{#if DBState.db.translator !== '' && !blankMessage} {#if DBState.db.translator !== '' && !blankMessage}
<button class={"ml-2 cursor-pointer hover:text-blue-500 transition-colors " + (translated ? 'text-blue-400':'')} class:translating={translating} onclick={async () => { <button class={"ml-2 cursor-pointer hover:text-blue-500 transition-colors button-icon-translate " + (translated ? 'text-blue-400':'')} class:translating={translating} onclick={async () => {
translated = !translated translated = !translated
}}> }}>
<LanguagesIcon /> <LanguagesIcon />
@@ -441,14 +441,14 @@
{/if} {/if}
{#if rerollIcon || altGreeting} {#if rerollIcon || altGreeting}
{#if DBState.db.swipe || altGreeting} {#if DBState.db.swipe || altGreeting}
<button class="ml-2 hover:text-blue-500 transition-colors" onclick={unReroll}> <button class="ml-2 hover:text-blue-500 transition-colors button-icon-unreroll" onclick={unReroll}>
<ArrowLeft size={22}/> <ArrowLeft size={22}/>
</button> </button>
<button class="ml-2 hover:text-blue-500 transition-colors" onclick={onReroll}> <button class="ml-2 hover:text-blue-500 transition-colors button-icon-reroll" onclick={onReroll}>
<ArrowRight size={22}/> <ArrowRight size={22}/>
</button> </button>
{:else} {:else}
<button class="ml-2 hover:text-blue-500 transition-colors" onclick={onReroll}> <button class="ml-2 hover:text-blue-500 transition-colors button-icon-reroll" onclick={onReroll}>
<RefreshCcwIcon size={20}/> <RefreshCcwIcon size={20}/>
</button> </button>
{/if} {/if}
@@ -672,7 +672,7 @@
</div> </div>
{#if editMode} {#if editMode}
<textarea class="flex-grow h-138 sm:h-96 overflow-y-auto bg-transparent text-black p-2 mb-2 resize-none" bind:value={message}></textarea> <textarea class="flex-grow h-138 sm:h-96 overflow-y-auto bg-transparent text-black p-2 mb-2 resize-none message-edit-area" bind:value={message}></textarea>
{:else} {:else}
<div class="flex-grow h-138 sm:h-96 overflow-y-auto p-2 mb-2 sm:mb-0"> <div class="flex-grow h-138 sm:h-96 overflow-y-auto p-2 mb-2 sm:mb-0">
{@render textBox()} {@render textBox()}

4
src/lib/ChatScreens/DefaultChatScreen.svelte
View File

@@ -447,7 +447,7 @@
{/if} {/if}
{#if !DBState.db.useAdvancedEditor} {#if !DBState.db.useAdvancedEditor}
<textarea class="peer focus:border-textcolor transition-colors outline-none text-textcolor p-2 min-w-0 border border-r-0 bg-transparent rounded-md rounded-r-none input-text text-xl flex-grow ml-4 border-darkborderc resize-none overflow-y-hidden overflow-x-hidden max-w-full" <textarea class="peer text-input-area focus:border-textcolor transition-colors outline-none text-textcolor p-2 min-w-0 border border-r-0 bg-transparent rounded-md rounded-r-none input-text text-xl flex-grow ml-4 border-darkborderc resize-none overflow-y-hidden overflow-x-hidden max-w-full"
bind:value={messageInput} bind:value={messageInput}
bind:this={inputEle} bind:this={inputEle}
onkeydown={(e) => { onkeydown={(e) => {
@@ -483,7 +483,7 @@
{:else} {:else}
<button <button
onclick={send} onclick={send}
class="flex justify-center border-y border-darkborderc items-center text-gray-100 p-3 peer-focus:border-textcolor hover:bg-blue-500 transition-colors" class="flex justify-center border-y border-darkborderc items-center text-gray-100 p-3 peer-focus:border-textcolor hover:bg-blue-500 transition-colors button-icon-send"
style:height={inputHeight} style:height={inputHeight}
> >
<Send /> <Send />

2
src/lib/UI/GUI/TextAreaResizable.svelte
View File

@@ -35,7 +35,7 @@
oninput={handleInput} oninput={handleInput}
use:longpress={handleLongPress} use:longpress={handleLongPress}
bind:value={value} bind:value={value}
class="rounded-md p-2 text-textcolor bg-transparent resize-none overflow-y-hidden border border-darkborderc w-full" class="rounded-md p-2 text-textcolor bg-transparent resize-none overflow-y-hidden border border-darkborderc w-full message-edit-area"
style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem" style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem"
style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem" style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem"
></textarea> ></textarea>

2
src/ts/alert.ts
View File

@@ -165,7 +165,7 @@ export function alertMd(msg:string){
} }
export function doingAlert(){ export function doingAlert(){
return get(alertStoreImported).type !== 'none' && get(alertStoreImported).type !== 'toast' return get(alertStoreImported).type !== 'none' && get(alertStoreImported).type !== 'toast' && get(alertStoreImported).type !== 'wait'
} }
export function alertToast(msg:string){ export function alertToast(msg:string){

77
src/ts/hotkey.ts
View File

@@ -1,13 +1,62 @@
import { get } from "svelte/store" import { get } from "svelte/store"
import { alertSelect, alertToast, doingAlert } from "./alert" import { alertSelect, alertToast, doingAlert } from "./alert"
import { changeToPreset as changeToPreset2, getDatabase } from "./storage/database.svelte" import { changeToPreset as changeToPreset2, getDatabase } from "./storage/database.svelte"
import { MobileGUIStack, MobileSideBar, openPersonaList, openPresetList, SafeModeStore, selectedCharID, settingsOpen } from "./stores.svelte" import { alertStore, MobileGUIStack, MobileSideBar, openPersonaList, openPresetList, SafeModeStore, selectedCharID, settingsOpen } from "./stores.svelte"
import { language } from "src/lang" import { language } from "src/lang"
import { updateTextThemeAndCSS } from "./gui/colorscheme" import { updateTextThemeAndCSS } from "./gui/colorscheme"
export function initHotkey(){ export function initHotkey(){
document.addEventListener('keydown', (ev) => { document.addEventListener('keydown', (ev) => {
if(ev.ctrlKey){ if(ev.ctrlKey){
if(ev.altKey){
switch(ev.key){
case "r":{
ev.preventDefault()
clickQuery('.button-icon-reroll')
return
}
case "f":{
ev.preventDefault()
clickQuery('.button-icon-unreroll')
return
}
case "t":{
ev.preventDefault()
clickQuery('.button-icon-translate')
return
}
case "r":{
ev.preventDefault()
clickQuery('.button-icon-remove')
return
}
case 'e':{
ev.preventDefault()
clickQuery('.button-icon-edit')
setTimeout(() => {
focusQuery('.message-edit-area')
}, 100)
return
}
case 'c':{
ev.preventDefault()
clickQuery('.button-icon-copy')
return
}
case 'i':{
ev.preventDefault()
focusQuery('.text-input-area')
return
}
case 'Enter':{
ev.preventDefault()
clickQuery('.button-icon-send')
return
}
}
}
switch (ev.key){ switch (ev.key){
case "1":{ case "1":{
changeToPreset(0) changeToPreset(0)
@@ -105,6 +154,15 @@ export function initHotkey(){
} }
ev.preventDefault() ev.preventDefault()
} }
if(ev.key === 'Enter'){
const alertType = get(alertStore).type
if(alertType === 'ask' || alertType === 'normal' || alertType === 'error'){
alertStore.set({
type: 'none',
msg: 'yes'
})
}
}
}) })
@@ -143,6 +201,23 @@ export function initHotkey(){
}) })
} }
function clickQuery(query:string){
let ele = document.querySelector(query) as HTMLElement
console.log(ele)
if(ele){
ele.click()
}
}
function focusQuery(query:string){
let ele = document.querySelector(query) as HTMLElement
if(ele){
ele.focus()
}
}
export function initMobileGesture(){ export function initMobileGesture(){
let pressingPointers = new Map<number, {x:number, y:number}>() let pressingPointers = new Map<number, {x:number, y:number}>()