Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
S
Stable Diffusion Webui
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Packages
Packages
List
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issues
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
novelai-storage
Stable Diffusion Webui
Commits
a3c8510c
Commit
a3c8510c
authored
Aug 20, 2023
by
catboxanon
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add resize-handler extension
parent
9d2299ed
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
116 additions
and
0 deletions
+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
No files found.
extensions-builtin/resize-handle/javascript/resize-handle.js
0 → 100644
View file @
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
View file @
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment