✨ feat(setting): add split preview setting

lobehub · Jun 28, 2023 · d17bab4 · d17bab4
1 parent 1b15781
commit d17bab4
Show file tree

Hide file tree

Showing 5 changed files with 542 additions and 206 deletions.
diff --git a/javascript/main.js b/javascript/main.js
diff --git a/src/pages/Content/index.tsx b/src/pages/Content/index.tsx
@@ -1,6 +1,7 @@
 import isEqual from 'fast-deep-equal';
 import { memo, useEffect, useRef } from 'react';
 
+import draggablePanel from '@/script/draggablePanel';
 import { useAppStore } from '@/store';
 import { DivProps } from '@/types';
 
@@ -19,31 +20,24 @@ const Content = memo<DivProps>(({ className, ...props }) => {
     if (main) {
       mainReference.current?.append(main);
     }
-    // tab_txt2img
-    const txt2imgToprow = gradioApp().querySelector('#txt2img_toprow') as HTMLDivElement;
-    const txt2imgSettings = gradioApp().querySelector('#txt2img_settings') as HTMLDivElement;
-    if (txt2imgToprow && txt2imgSettings) {
-      txt2imgSettings.prepend(txt2imgToprow);
-    }
-    // tab_img2img
-    const img2imgToprow = gradioApp().querySelector('#img2img_toprow') as HTMLDivElement;
-    const img2imgSettings = gradioApp().querySelector('#img2img_settings') as HTMLDivElement;
-    if (img2imgSettings && img2imgToprow) {
-      img2imgSettings.prepend(img2imgToprow);
-    }
     // remove prompt scroll-hide
     for (const textarea of gradioApp().querySelectorAll(`[id$="_prompt_container"] textarea`)) {
       textarea.classList.remove('scroll-hide');
     }
   }, []);
 
+  useEffect(() => {
+    if (!setting.layoutSplitPreviewer) draggablePanel();
+  }, [setting.layoutSplitPreviewer]);
+
   return (
     <div
       className={cx(
         styles.container,
         styles.textares,
         styles.text2img,
         styles.autocompleteResults,
+        setting.layoutSplitPreviewer ? styles.splitView : styles.draggableContainer,
         className,
       )}
       ref={mainReference}

diff --git a/src/pages/Content/style.ts b/src/pages/Content/style.ts
@@ -55,13 +55,31 @@ export const useStyles = createStyles(
           }
         }
       `,
-      text2img: css`
-        button[id$='_generate'] {
-          height: 44px !important;
-          min-height: 44px !important;
-          max-height: 44px !important;
+      draggableContainer: css`
+        .draggable-line {
+          flex: none !important;
+
+          width: 2px;
+          min-width: 2px !important;
+          max-width: 2px !important;
+
+          border-left: 1px dashed ${token.colorBorderSecondary};
+
+          transition: all 0.3s ease-in-out;
+
+          &:hover,
+          &:active {
+            cursor: col-resize;
+            border-left: 2px solid ${token.colorPrimary};
+          }
         }
 
+        .draggable-container {
+          flex-wrap: nowrap !important;
+          align-items: stretch !important;
+        }
+      `,
+      splitView: css`
         #txt2img_toprow,
         #img2img_toprow {
           flex-direction: column;
@@ -85,6 +103,13 @@ export const useStyles = createStyles(
             border-radius: ${token.borderRadius}px;
           }
         }
+      `,
+      text2img: css`
+        button[id$='_generate'] {
+          height: 44px !important;
+          min-height: 44px !important;
+          max-height: 44px !important;
+        }
 
         [id$='img_settings'],
         .gradio-column.compact {
@@ -189,10 +214,6 @@ export const useStyles = createStyles(
             gap: 8px !important;
           }
         }
-
-        #tab_extras > div > div {
-          display: block !important;
-        }
       `,
       textares: css`
         [id$='2img_prompt'],

diff --git a/src/pages/Preview/index.tsx b/src/pages/Preview/index.tsx
@@ -21,6 +21,18 @@ const Preview = memo<PreviewProps>(({ headerHeight }) => {
   const extras2imgReference = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    // tab_txt2img
+    const txt2imgToprow = gradioApp().querySelector('#txt2img_toprow') as HTMLDivElement;
+    const txt2imgSettings = gradioApp().querySelector('#txt2img_settings') as HTMLDivElement;
+    if (txt2imgToprow && txt2imgSettings) {
+      txt2imgSettings.prepend(txt2imgToprow);
+    }
+    // tab_img2img
+    const img2imgToprow = gradioApp().querySelector('#img2img_toprow') as HTMLDivElement;
+    const img2imgSettings = gradioApp().querySelector('#img2img_settings') as HTMLDivElement;
+    if (img2imgSettings && img2imgToprow) {
+      img2imgSettings.prepend(img2imgToprow);
+    }
     // tab_txt2img
     const txt2imgPreview = gradioApp().querySelector('#txt2img_results') as HTMLDivElement;
     const txt2imgButton = gradioApp().querySelector('#txt2img_generate_box') as HTMLDivElement;

diff --git a/src/script/draggablePanel.ts b/src/script/draggablePanel.ts
@@ -0,0 +1,78 @@
+const MIN_WIDTH = 240;
+
+const addDraggable = (tabId: string) => {
+  const settings = document.querySelector(`#${tabId}_settings`) as HTMLDivElement;
+  const checkDraggableLine = document.querySelector(
+    `#tab_${tabId} .draggable-line`,
+  ) as HTMLDivElement;
+  if (!settings || checkDraggableLine) return;
+
+  settings.style.minWidth = `min(${MIN_WIDTH}px, 100%)`;
+
+  const lineWrapper = document.createElement('div');
+  lineWrapper.classList.add('draggable-line');
+
+  settings.after(lineWrapper);
+
+  const container: HTMLElement | any = settings.parentElement;
+  container.classList.add('draggable-container');
+
+  let results: HTMLDivElement = document.querySelector(`#${tabId}_results`) as HTMLDivElement;
+
+  if (!results) return;
+
+  if (tabId === 'extras') results = results.parentElement as HTMLDivElement;
+
+  results.style.minWidth = `${MIN_WIDTH}px`;
+
+  let linePosition = 50;
+  settings.style.flexBasis = `${linePosition}%`;
+  results.style.flexBasis = `${100 - linePosition}%`;
+
+  let isDragging = false;
+
+  lineWrapper.addEventListener('mousedown', (e) => {
+    isDragging = true;
+    e.preventDefault();
+  });
+
+  document.addEventListener('mousemove', (event) => {
+    if (!isDragging) return;
+
+    const tab = document.querySelector(`#tab_${tabId}`) as HTMLDivElement;
+    if (!tab) return;
+
+    let offsetX = tab.offsetLeft;
+    let parent = tab.offsetParent as HTMLDivElement;
+
+    while (parent) {
+      offsetX += parent.offsetLeft;
+      parent = parent.offsetParent as HTMLDivElement;
+    }
+
+    const containerWidth = container.offsetWidth;
+    const mouseX = event.clientX;
+    const linePosition = ((mouseX - offsetX) / containerWidth) * 100;
+
+    if (linePosition <= (MIN_WIDTH / containerWidth) * 100) return;
+    if (linePosition >= (1 - MIN_WIDTH / containerWidth) * 100) return;
+
+    settings.style.flexBasis = `${linePosition}%`;
+    results.style.flexBasis = `${100 - linePosition}%`;
+  });
+
+  document.addEventListener('mouseup', () => {
+    isDragging = false;
+  });
+};
+
+export default () => {
+  addDraggable('txt2img');
+  addDraggable('img2img');
+  const extrasSetting = document.querySelector('#extras_results')?.parentElement
+    ?.previousElementSibling as HTMLDivElement;
+  if (extrasSetting) {
+    extrasSetting.id = 'extras_settings';
+    addDraggable('extras');
+  }
+};