soaska/my-sd
soaska/my-sd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Merge pull request #15002 from light-and-ray/support_resizable_columns_for_touch_(tablets)

Browse Source 
support resizable columns for touch (tablets)
This commit is contained in:
AUTOMATIC1111 2024-02-22 22:59:26 +03:00 committed by GitHub
commit 18819723c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 58 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
javascript/resizeHandle.js
View File

@ -65,21 +65,31 @@
resizeHandle.classList.add('resize-handle'); resizeHandle.classList.add('resize-handle');
parent.insertBefore(resizeHandle, rightCol); parent.insertBefore(resizeHandle, rightCol);
resizeHandle.addEventListener('mousedown', (evt) => { ['mousedown', 'touchstart'].forEach((eventType) => {
if (evt.button !== 0) return; resizeHandle.addEventListener(eventType, (evt) => {
if (eventType.startsWith('mouse')) {
if (evt.button !== 0) return;
} else {
if (evt.changedTouches.length !== 1) return;
}
evt.preventDefault(); evt.preventDefault();
evt.stopPropagation(); evt.stopPropagation();
document.body.classList.add('resizing'); document.body.classList.add('resizing');
R.tracking = true; R.tracking = true;
R.parent = parent; R.parent = parent;
R.parentWidth = parent.offsetWidth; R.parentWidth = parent.offsetWidth;
R.handle = resizeHandle; R.handle = resizeHandle;
R.leftCol = leftCol; R.leftCol = leftCol;
R.leftColStartWidth = leftCol.offsetWidth; R.leftColStartWidth = leftCol.offsetWidth;
R.screenX = evt.screenX; if (eventType.startsWith('mouse')) {
R.screenX = evt.screenX;
} else {
R.screenX = evt.changedTouches[0].screenX;
}
});
}); });
resizeHandle.addEventListener('dblclick', (evt) => { resizeHandle.addEventListener('dblclick', (evt) => {
@ -92,30 +102,49 @@
afterResize(parent); afterResize(parent);
} }
window.addEventListener('mousemove', (evt) => { ['mousemove', 'touchmove'].forEach((eventType) => {
if (evt.button !== 0) return; window.addEventListener(eventType, (evt) => {
if (eventType.startsWith('mouse')) {
if (evt.button !== 0) return;
} else {
if (evt.changedTouches.length !== 1) return;
}
if (R.tracking) { if (R.tracking) {
evt.preventDefault(); if (eventType.startsWith('mouse')) {
evt.stopPropagation(); evt.preventDefault();
}
evt.stopPropagation();
const delta = R.screenX - evt.screenX; let delta = 0;
const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH); if (eventType.startsWith('mouse')) {
setLeftColGridTemplate(R.parent, leftColWidth); delta = R.screenX - evt.screenX;
} } else {
delta = R.screenX - evt.changedTouches[0].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', (evt) => { ['mouseup', 'touchend'].forEach((eventType) => {
if (evt.button !== 0) return; window.addEventListener(eventType, (evt) => {
if (eventType.startsWith('mouse')) {
if (evt.button !== 0) return;
} else {
if (evt.changedTouches.length !== 1) return;
}
if (R.tracking) { if (R.tracking) {
evt.preventDefault(); evt.preventDefault();
evt.stopPropagation(); evt.stopPropagation();
R.tracking = false; R.tracking = false;
document.body.classList.remove('resizing'); document.body.classList.remove('resizing');
} }
});
}); });