mirrors/stable-diffusion-webui
1
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2026-02-01 05:11:19 -08:00
Code Issues Projects Releases Packages Wiki Activity

Fix bugs with resize grid. Add documentation. Add example code.

Browse source
This commit is contained in:
Sj-Si 2024-05-23 17:11:49 -04:00
parent ee81dadda8
commit 4a2c806448
7 changed files with 865 additions and 641 deletions
Download patch file Download diff file Expand all files Collapse all files

178
javascript/resizeGridExample.html Normal file
View file

@ -0,0 +1,178 @@
<html>
<head>
<style>
body {
background: #333333;
margin: 50px;
}
.my-content {
display: block;
width: 100%;
height: 100%;
}
#cell_0_0 {
background: #ffb3ba;
}
#cell_0_1 {
background: #ffdfba;
}
#cell_1_0 {
background: #baffc9;
}
#cell_1_1 {
background: #bae1ff;
}
.hidden {
display: none !important;
}
body.resizing {
cursor: col-resize !important;
}
body.resizing * {
pointer-events: none !important;
}
body.resizing .resize-grid--handle {
pointer-events: initial !important;
}
body.resizing.resize-grid-col {
cursor: col-resize !important;
}
body.resizing.resize-grid-row {
cursor: row-resize !important;
}
.container {
position: relative;
display: flex;
width: 50vw;
height: 70vh;
overflow: hidden;
border: 1px solid white;
padding: 10px;
min-width: 0;
min-height: 0;
resize: both;
}
.resize-grid,
.resize-grid--row,
.resize-grid--col,
.resize-grid--cell {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
gap: 0 !important;
min-width: 0;
min-height: 0;
}
.resize-grid {
width: 100%;
height: 100%;
}
.resize-grid--row {
flex-direction: row;
}
.resize-grid--col {
flex-direction: column;
}
.resize-grid--handle {
position: relative;
height: 100%;
width: 100%;
z-index: 0;
background: transparent;
}
.resize-grid--handle::after {
content: "";
position: absolute;
z-index: -1;
}
.resize-grid--row-handle {
cursor: row-resize;
}
.resize-grid--row-handle::after {
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
border-top: 1px dashed white;
}
.resize-grid--col-handle {
cursor: col-resize;
}
.resize-grid--col-handle::after {
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-left: 1px dashed white;
}
</style>
</head>
<body>
<div class="container">
<div class="resize-grid">
<div class="resize-grid--row" style="flex: 1 0 50px;" data-min-size="25px">
<div class="resize-grid--cell" style="flex: 0 0 50px;" data-min-size="25px">
<div id="cell_0_0" class="my-content">0</div>
</div>
<div class="resize-grid--cell" style="flex: 1 0 50px;" data-min-size="25px">
<div id="cell_0_1" class="my-content">1</div>
</div>
</div>
<div class="resize-grid--row" style="flex: 0 0 50px;" data-min-size="25px">
<div class="resize-grid--cell" style="flex: 1 0 50px;" data-min-size="25px">
<div id="cell_1_0" class="my-content">2</div>
</div>
<div class="resize-grid--cell" style="flex: 0 0 50px;" data-min-size="25px">
<div id="cell_1_1" class="my-content">3</div>
</div>
</div>
</div>
</div>
<button class="toggle-button" data-grid-elem-id="cell_0_0">HIDE cell_0_0</button>
<button class="toggle-button" data-grid-elem-id="cell_0_1">HIDE cell_0_1</button>
<button class="toggle-button" data-grid-elem-id="cell_1_0">HIDE cell_1_0</button>
<button class="toggle-button" data-grid-elem-id="cell_1_1">HIDE cell_1_1</button>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="resizeGrid.js"></script>
<script type="text/javascript">
const grid_elem = document.querySelector(".resize-grid");
const grid = resizeGridSetup(grid_elem);
const btns = document.querySelectorAll(".toggle-button");
btns.forEach(btn => {
btn.addEventListener("click", onToggleButton);
});
function onToggleButton(event) {
const btn = event.target.closest("button");
const id = btn.dataset.gridElemId;
const grid_elem = document.querySelector(`#${id}`);
grid.toggle({ elem: grid_elem });
btn.textContent = btn.textContent === `HIDE ${id}` ? `SHOW ${id}` : `HIDE ${id}`;
}
</script>
</body>
</html>