stable-diffusion-webui

1
(function() {
2
    const GRADIO_MIN_WIDTH = 320;
3
    const PAD = 16;
4
    const DEBOUNCE_TIME = 100;
5
    const DOUBLE_TAP_DELAY = 200; //ms
6

7
    const R = {
8
        tracking: false,
9
        parent: null,
10
        parentWidth: null,
11
        leftCol: null,
12
        leftColStartWidth: null,
13
        screenX: null,
14
        lastTapTime: null,
15
    };
16

17
    let resizeTimer;
18
    let parents = [];
19

20
    function setLeftColGridTemplate(el, width) {
21
        el.style.gridTemplateColumns = `${width}px 16px 1fr`;
22
    }
23

24
    function displayResizeHandle(parent) {
25
        if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) {
26
            parent.style.display = 'flex';
27
            parent.resizeHandle.style.display = "none";
28
            return false;
29
        } else {
30
            parent.style.display = 'grid';
31
            parent.resizeHandle.style.display = "block";
32
            return true;
33
        }
34
    }
35

36
    function afterResize(parent) {
37
        if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != parent.style.originalGridTemplateColumns) {
38
            const oldParentWidth = R.parentWidth;
39
            const newParentWidth = parent.offsetWidth;
40
            const widthL = parseInt(parent.style.gridTemplateColumns.split(' ')[0]);
41

42
            const ratio = newParentWidth / oldParentWidth;
43

44
            const newWidthL = Math.max(Math.floor(ratio * widthL), GRADIO_MIN_WIDTH);
45
            setLeftColGridTemplate(parent, newWidthL);
46

47
            R.parentWidth = newParentWidth;
48
        }
49
    }
50

51
    function setup(parent) {
52

53
        function onDoubleClick(evt) {
54
            evt.preventDefault();
55
            evt.stopPropagation();
56

57
            parent.style.gridTemplateColumns = parent.style.originalGridTemplateColumns;
58
        }
59

60
        const leftCol = parent.firstElementChild;
61
        const rightCol = parent.lastElementChild;
62

63
        parents.push(parent);
64

65
        parent.style.display = 'grid';
66
        parent.style.gap = '0';
67
        const gridTemplateColumns = `${parent.children[0].style.flexGrow}fr ${PAD}px ${parent.children[1].style.flexGrow}fr`;
68
        parent.style.gridTemplateColumns = gridTemplateColumns;
69
        parent.style.originalGridTemplateColumns = gridTemplateColumns;
70

71
        const resizeHandle = document.createElement('div');
72
        resizeHandle.classList.add('resize-handle');
73
        parent.insertBefore(resizeHandle, rightCol);
74
        parent.resizeHandle = resizeHandle;
75

76
        ['mousedown', 'touchstart'].forEach((eventType) => {
77
            resizeHandle.addEventListener(eventType, (evt) => {
78
                if (eventType.startsWith('mouse')) {
79
                    if (evt.button !== 0) return;
80
                } else {
81
                    if (evt.changedTouches.length !== 1) return;
82

83
                    const currentTime = new Date().getTime();
84
                    if (R.lastTapTime && currentTime - R.lastTapTime <= DOUBLE_TAP_DELAY) {
85
                        onDoubleClick(evt);
86
                        return;
87
                    }
88

89
                    R.lastTapTime = currentTime;
90
                }
91

92
                evt.preventDefault();
93
                evt.stopPropagation();
94

95
                document.body.classList.add('resizing');
96

97
                R.tracking = true;
98
                R.parent = parent;
99
                R.parentWidth = parent.offsetWidth;
100
                R.leftCol = leftCol;
101
                R.leftColStartWidth = leftCol.offsetWidth;
102
                if (eventType.startsWith('mouse')) {
103
                    R.screenX = evt.screenX;
104
                } else {
105
                    R.screenX = evt.changedTouches[0].screenX;
106
                }
107
            });
108
        });
109

110
        resizeHandle.addEventListener('dblclick', onDoubleClick);
111

112
        afterResize(parent);
113
    }
114

115
    ['mousemove', 'touchmove'].forEach((eventType) => {
116
        window.addEventListener(eventType, (evt) => {
117
            if (eventType.startsWith('mouse')) {
118
                if (evt.button !== 0) return;
119
            } else {
120
                if (evt.changedTouches.length !== 1) return;
121
            }
122

123
            if (R.tracking) {
124
                if (eventType.startsWith('mouse')) {
125
                    evt.preventDefault();
126
                }
127
                evt.stopPropagation();
128

129
                let delta = 0;
130
                if (eventType.startsWith('mouse')) {
131
                    delta = R.screenX - evt.screenX;
132
                } else {
133
                    delta = R.screenX - evt.changedTouches[0].screenX;
134
                }
135
                const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
136
                setLeftColGridTemplate(R.parent, leftColWidth);
137
            }
138
        });
139
    });
140

141
    ['mouseup', 'touchend'].forEach((eventType) => {
142
        window.addEventListener(eventType, (evt) => {
143
            if (eventType.startsWith('mouse')) {
144
                if (evt.button !== 0) return;
145
            } else {
146
                if (evt.changedTouches.length !== 1) return;
147
            }
148

149
            if (R.tracking) {
150
                evt.preventDefault();
151
                evt.stopPropagation();
152

153
                R.tracking = false;
154

155
                document.body.classList.remove('resizing');
156
            }
157
        });
158
    });
159

160

161
    window.addEventListener('resize', () => {
162
        clearTimeout(resizeTimer);
163

164
        resizeTimer = setTimeout(function() {
165
            for (const parent of parents) {
166
                afterResize(parent);
167
            }
168
        }, DEBOUNCE_TIME);
169
    });
170

171
    setupResizeHandle = setup;
172
})();
173

174
onUiLoaded(function() {
175
    for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) {
176
        if (!elem.querySelector('.resize-handle')) {
177
            setupResizeHandle(elem);
178
        }
179
    }
180
});
181