1580158
/
Auto-Photoshop-StableDiffusion-Plugin
mirror of https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adjust prompt box size to accommodate larger text upon change

pull/378/head
Abdullah Alfaraj 2023-09-22 09:15:57 +03:00
parent d75129999e
commit 8d07ef0c15
3 changed files with 103 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
typescripts/multiTextarea.tsx
View File

@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client'
import { AStore } from './main/astore' import { AStore } from './main/astore'
import { ErrorBoundary } from './util/errorBoundary' import { ErrorBoundary } from './util/errorBoundary'
import { Collapsible } from './util/collapsible' import { Collapsible } from './util/collapsible'
import { autoResize } from './util/ts/general'
interface AStoreData { interface AStoreData {
positivePrompts: string[] positivePrompts: string[]
@ -92,7 +93,31 @@ export class MultiTextArea extends React.Component {
<sp-radio <sp-radio
key={index} key={index}
onClick={() => { onClick={() => {
this.switchTextArea(index) try {
this.switchTextArea(index)
autoResize(
document.getElementById(
'taPrompt'
),
store.data.positivePrompts[
store.data.current_index
],
10
)
autoResize(
document.getElementById(
'taNegativePrompt'
),
store.data.negativePrompts[
store.data.current_index
],
10
)
} catch (e) {
console.warn(e)
}
}} }}
value={index} value={index}
checked={ checked={
@ -108,10 +133,20 @@ export class MultiTextArea extends React.Component {
<sp-textarea <sp-textarea
id="taPrompt" id="taPrompt"
onInput={(event: any) => { onInput={(event: any) => {
this.changePositivePrompt( try {
event.target.value, this.changePositivePrompt(
store.data.current_index event.target.value,
) store.data.current_index
)
autoResize(
event.target,
store.data.positivePrompts[
store.data.current_index
]
)
} catch (e) {
console.warn(e)
}
}} }}
placeholder={`prompt ${store.data.current_index + 1}`} placeholder={`prompt ${store.data.current_index + 1}`}
value={store.data.positivePrompts[store.data.current_index]} value={store.data.positivePrompts[store.data.current_index]}
@ -119,10 +154,21 @@ export class MultiTextArea extends React.Component {
<sp-textarea <sp-textarea
id="taNegativePrompt" id="taNegativePrompt"
onInput={(event: any) => { onInput={(event: any) => {
this.changeNegativePrompt( try {
event.target.value, this.changeNegativePrompt(
store.data.current_index event.target.value,
) store.data.current_index
)
autoResize(
event.target,
store.data.negativePrompts[
store.data.current_index
]
)
} catch (e) {
console.warn(e)
}
}} }}
placeholder={`negative prompt ${ placeholder={`negative prompt ${
store.data.current_index + 1 store.data.current_index + 1

38
typescripts/one_button_prompt/one_button_prompt.tsx
View File

@ -13,6 +13,7 @@ import {
} from '../util/elements' } from '../util/elements'
import { ErrorBoundary } from '../util/errorBoundary' import { ErrorBoundary } from '../util/errorBoundary'
import { setPrompt } from '../multiTextarea' import { setPrompt } from '../multiTextarea'
import { autoResize } from '../util/ts/general'
declare let g_sd_url: string declare let g_sd_url: string
export const store = new AStore({ export const store = new AStore({
@ -63,46 +64,13 @@ export async function requestRandomPrompts(
} }
} }
function autoResize(textarea: any) {
// const textarea = event.target
let measure = document.getElementById('measure')!
if (!measure) {
measure = document.createElement('div')
measure.setAttribute('id', 'measure')
measure.style.visibility = 'hidden'
measure.style.whiteSpace = 'pre-wrap'
measure.style.position = 'absolute'
measure.style.fontSize = '14px'
// measure.style.paddingBottom = '10px'
// measure.style.paddingTop = '10px'
// measure.style.lineHeight = '14px'
document.body.appendChild(measure)
}
measure.style.width = textarea.offsetWidth + 'px'
// getComputedStyle(textarea).width
measure.textContent = textarea.value
try {
clearTimeout(g_style_timeout)
g_style_timeout = setTimeout(() => {
let height = measure.offsetHeight
//height between [60,450]
height = Math.max(60, height)
height = Math.min(450, height)
textarea.style.height = height + 'px'
}, 300)
} catch (e) {
console.warn(e)
}
}
let g_timeout: any let g_timeout: any
let g_style_timeout: any
function handleInput(event: any) { function handleInput(event: any) {
try { try {
// clearTimeout(g_timeout) // clearTimeout(g_timeout)
// g_timeout = setTimeout(() => autoResize(event.target), 1000) // g_timeout = setTimeout(() => autoResize(event.target), 1000)
autoResize(event.target) autoResize(event.target, event.target.value)
} catch (e) { } catch (e) {
console.warn(e) console.warn(e)
} }

45
typescripts/util/ts/general.ts Normal file
View File

@ -0,0 +1,45 @@
export function autoResize(textarea: any, text_content: string, delay = 300) {
try {
let g_style_timeout: any
const measure_id = `measure-${textarea.id}`
let measure = document.getElementById('measure')!
if (!measure) {
measure = document.createElement('div')
measure.setAttribute('id', measure_id)
measure.style.visibility = 'hidden'
measure.style.whiteSpace = 'pre-wrap'
measure.style.position = 'absolute'
measure.style.fontSize = '14px'
document.body.appendChild(measure)
}
measure.style.width = textarea.offsetWidth + 'px'
measure.textContent = text_content
let checkCount = 0
const checkHeight = () => {
if (measure.offsetHeight > 0 || checkCount >= 50) {
clearTimeout(g_style_timeout)
g_style_timeout = setTimeout(() => {
console.log('textarea id: ', textarea.id)
let height = measure.offsetHeight
height = Math.max(100, height)
height = Math.min(450, height)
textarea.style.height = height + 'px'
console.log('height: ', height)
}, delay)
} else {
checkCount++
setTimeout(checkHeight, delay)
}
}
checkHeight()
} catch (e) {
console.warn(
'failed to autoResize()',
textarea.id,
text_content,
delay,
e
)
}
}