Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Overbill1683
Stable Diffusion Webui
提交
a3c8510c
S
Stable Diffusion Webui
项目概览
Overbill1683
/
Stable Diffusion Webui
11 个月 前同步成功
通知
1771
Star
81
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
分析
仓库
DevOps
项目成员
Pages
S
Stable Diffusion Webui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Pages
分析
分析
仓库分析
DevOps
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
提交
体验新版 GitCode,发现更多精彩内容 >>
提交
a3c8510c
编写于
8月 20, 2023
作者:
C
catboxanon
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add resize-handler extension
上级
9d2299ed
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
116 addition
and
0 deletion
+116
-0
extensions-builtin/resize-handle/javascript/resize-handle.js
extensions-builtin/resize-handle/javascript/resize-handle.js
+106
-0
extensions-builtin/resize-handle/style.css
extensions-builtin/resize-handle/style.css
+10
-0
未找到文件。
extensions-builtin/resize-handle/javascript/resize-handle.js
0 → 100644
浏览文件 @
a3c8510c
onUiLoaded
(
async
()
=>
{
const
GRADIO_MIN_WIDTH
=
320
;
const
GRID_TEMPLATE_COLUMNS
=
'
1fr 16px 1fr
'
;
const
PAD
=
16
;
const
DEBOUNCE_TIME
=
100
;
const
R
=
{
tracking
:
false
,
parent
:
null
,
parentWidth
:
null
,
leftCol
:
null
,
leftColStartWidth
:
null
,
screenX
:
null
,
};
let
resizeTimer
;
const
leftCols
=
[
gradioApp
().
querySelector
(
'
#txt2img_settings
'
),
gradioApp
().
querySelector
(
'
#img2img_settings
'
),
];
function
setLeftColGridTemplate
(
el
,
width
)
{
el
.
style
.
gridTemplateColumns
=
`
${
width
}
px 16px 1fr`
;
}
function
displayResizeHandle
(
parent
)
{
if
(
window
.
innerWidth
<
GRADIO_MIN_WIDTH
*
2
+
PAD
*
4
)
{
parent
.
style
.
display
=
'
flex
'
;
if
(
R
.
handle
!=
null
)
{
R
.
handle
.
style
.
opacity
=
'
0
'
;
}
return
false
;
}
else
{
parent
.
style
.
display
=
'
grid
'
;
if
(
R
.
handle
!=
null
)
{
R
.
handle
.
style
.
opacity
=
'
100
'
;
}
return
true
;
}
}
function
setup
()
{
for
(
const
leftCol
of
leftCols
)
{
const
parent
=
leftCol
.
parentElement
;
const
rightCol
=
parent
.
lastElementChild
;
if
(
!
displayResizeHandle
(
parent
))
{
return
;
}
parent
.
style
.
display
=
'
grid
'
;
parent
.
style
.
gap
=
'
0
'
;
parent
.
style
.
gridTemplateColumns
=
GRID_TEMPLATE_COLUMNS
;
const
resizeHandle
=
document
.
createElement
(
'
div
'
);
resizeHandle
.
classList
.
add
(
'
resize-handle
'
);
parent
.
insertBefore
(
resizeHandle
,
rightCol
);
resizeHandle
.
addEventListener
(
'
mousedown
'
,
(
evt
)
=>
{
R
.
tracking
=
true
;
R
.
parent
=
parent
;
R
.
parentWidth
=
parent
.
offsetWidth
;
R
.
handle
=
resizeHandle
;
R
.
leftCol
=
leftCol
;
R
.
leftColStartWidth
=
leftCol
.
offsetWidth
;
R
.
screenX
=
evt
.
screenX
;
});
}
}
window
.
addEventListener
(
'
mousemove
'
,
(
evt
)
=>
{
if
(
R
.
tracking
)
{
const
delta
=
R
.
screenX
-
evt
.
screenX
;
const
leftColWidth
=
Math
.
max
(
Math
.
min
(
R
.
leftColStartWidth
-
delta
,
R
.
parent
.
offsetWidth
-
GRADIO_MIN_WIDTH
-
PAD
),
GRADIO_MIN_WIDTH
);
setLeftColGridTemplate
(
R
.
parent
,
leftColWidth
);
}
});
window
.
addEventListener
(
'
mouseup
'
,
()
=>
R
.
tracking
=
false
);
window
.
addEventListener
(
'
resize
'
,
()
=>
{
clearTimeout
(
resizeTimer
);
resizeTimer
=
setTimeout
(()
=>
{
for
(
const
leftCol
of
leftCols
)
{
const
parent
=
leftCol
.
parentElement
;
if
(
displayResizeHandle
(
parent
)
&&
parent
.
style
.
gridTemplateColumns
!=
GRID_TEMPLATE_COLUMNS
)
{
const
oldParentWidth
=
R
.
parentWidth
;
const
newParentWidth
=
parent
.
offsetWidth
;
const
widthL
=
parseInt
(
parent
.
style
.
gridTemplateColumns
.
split
(
'
'
)[
0
]);
const
ratio
=
newParentWidth
/
oldParentWidth
;
const
newWidthL
=
Math
.
max
(
Math
.
floor
(
ratio
*
widthL
),
GRADIO_MIN_WIDTH
);
setLeftColGridTemplate
(
parent
,
newWidthL
);
R
.
parentWidth
=
newParentWidth
;
}
}
},
DEBOUNCE_TIME
);
});
setup
();
});
extensions-builtin/resize-handle/style.css
0 → 100644
浏览文件 @
a3c8510c
.resize-handle
{
cursor
:
col-resize
;
grid-column
:
2
/
3
;
min-width
:
8px
!important
;
max-width
:
8px
!important
;
height
:
100%
;
border-left
:
1px
dashed
var
(
--border-color-primary
);
user-select
:
none
;
margin-left
:
8px
;
}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录