fix(layouter): resize

Author: gorillamoe

src/main/parser/DocumentParser.ts

@@ -6,7 +6,7 @@ export interface Header {
   value: string
 }
 
-export interface RequestFormData {
+export interface RequestMultipartFormData {
   key: string
   value: string
 }
@@ -17,7 +17,7 @@ interface Request {
   httpVersion: string
   headers: Header[]
   body: string | null
-  formData: RequestFormData[] | null
+  multipartFormData: RequestMultipartFormData[] | null
 }
 
 interface Metadata {
@@ -139,7 +139,7 @@ const parse = (content: string): Document | null => {
     let url: string = ''
     let httpVersion: string = ''
     let body: string | null = null
-    let formData: RequestFormData[] | null = null
+    let multipartFormData: RequestMultipartFormData[] | null = null
 
     bn.children.forEach((node) => {
       if (node.type === 'pre_request_script') {
@@ -270,7 +270,7 @@ const parse = (content: string): Document | null => {
             if (child.children.length > 1 && child.children[1].type === 'external_body') {
               return
             }
-            if (!formData) formData = []
+            if (!multipartFormData) multipartFormData = []
             let key: string | null = null
             let value: string | null = null
             // The value looks something like this:
@@ -294,8 +294,8 @@ const parse = (content: string): Document | null => {
                 value += part
                 value = value.trim()
               }
-              if (formData && key && value) {
-                formData.push({ key, value })
+              if (multipartFormData && key && value) {
+                multipartFormData.push({ key, value })
                 key = null
                 value = null
               }
@@ -318,7 +318,7 @@ const parse = (content: string): Document | null => {
         httpVersion,
         headers,
         body,
-        formData
+        multipartFormData: multipartFormData
       }
     })
     if (block.request?.url.length || block.metadata.length > 0 || block.comments.length > 0) {

src/renderer/src/app.css

@@ -1,11 +1,7 @@
 @import 'tailwindcss';
 @plugin 'daisyui';
 
-.ui-resizable.ui-resizable-width {
-  position: relative;
-}
-
-.ui-resizable.ui-resizable-width::after {
+.ui-resizable.ui-resizable-width .ui-resizable-handle::after {
   content: "";
   position: absolute;
   top: 0;
@@ -17,15 +13,15 @@
   transition: background-color 0.2s ease;
 }
 
-.ui-resizable.ui-resizable-width::after:hover,
-.ui-resizable.ui-resizable-width::after:active {
+.ui-resizable.ui-resizable-width .ui-resizable-handle::after:hover,
+.ui-resizable.ui-resizable-width .ui-resizable-handle::after:active {
   background-color: rgba(0, 0, 0, 0.7);
 }
 
-.ui-resizable.ui-resizable-width::after {
+.ui-resizable.ui-resizable-width .ui-resizable-handle::after {
     box-shadow: 1px 0 2px rgba(0,0,0,0.05);
 }
 
-.ui-resizable.ui-resizable-width::after {
+.ui-resizable.ui-resizable-width .ui-resizable-handle::after {
     border-radius: 2px;
 }

src/renderer/src/views/explorer.svelte

@@ -20,6 +20,7 @@
   let responseEditorContainer: HTMLElement
   let responseIsVisible = false
   let editorSyntaxIsVisible = true
+  let isMultipartFormRequest = false
 
   let loadingModal: HTMLDialogElement
   let addFilesModal: HTMLDialogElement
@@ -110,18 +111,36 @@
     $collections = await window.KulalaApi.getCollectionNames()
   }
 
-  const setFormDataValues = (formData: RequestFormData) => {
+  const setMultipartFormDataValues = (formData: RequestFormData): void => {
     requestBodyTypeSelect.value = 'form-data'
     console.log({ formData })
   }
 
+  const setRequestType = (block: Block): void => {
+    if (block.request.multipartFormData) {
+      requestBodyTypeSelect.value = 'form-data'
+    } else if (block.request.formData) {
+      requestBodyTypeSelect.value = 'x-www-form-urlencoded'
+    } else if (block.request.body) {
+      requestBodyTypeSelect.value = 'raw'
+    } else {
+      requestBodyTypeSelect.value = 'none'
+    }
+  }
+
   const setValuesBasedOnBlock = (block: Block): void => {
     requestMethodSelect.value = block.request.method
     requestUrlInput.value = block.request.url
     const body = block.request.body?.trim() || ''
-    if (block.request.formData) {
-      setFormDataValues(block.request.formData)
+    if (block.request.multipartFormData) {
+      isMultipartFormRequest = true
+      editorSyntaxIsVisible = false
+      setMultipartFormDataValues(block.request.multipartFormData)
+    } else {
+      isMultipartFormRequest = false
+      editorSyntaxIsVisible = true
     }
+    setRequestType(block)
     editor.setValue(body)
   }
 
@@ -196,8 +215,8 @@
         processResponse(data)
       })
       .catch((err) => {
-        showInfoModal = true
-        infoModalContent = err
+        console.error(err)
+        // TODO: show error via modal
       })
       .finally(() => {
         isLoading = false
@@ -229,17 +248,28 @@
     })
     responseEditor.setModel(monaco.editor.createModel('', 'text'))
 
-    window.addEventListener('resize', () => {
+    const layoutEditors = (): void => {
       editor.layout()
       responseEditor.layout()
-    })
+    }
+    window.addEventListener('resize', layoutEditors)
     const layout = await window.KulalaApi.getLayout()
+    NewResizer(
+      containerLeftSection,
+      true,
+      false,
+      async (w) => {
+        await window.KulalaApi.saveLayout({
+          leftSectionWidth: w
+        })
+      },
+      () => {
+        layoutEditors()
+      }
+    )
+    console.log(layout.leftSectionWidth)
     containerLeftSection.style.width = layout.leftSectionWidth + 'px'
-    NewResizer(containerLeftSection, true, false, (w) => {
-      window.KulalaApi.saveLayout({
-        leftSectionWidth: w
-      })
-    })
+    layoutEditors()
   })
   onDestroy(() => {
     monaco?.editor.getModels().forEach((model) => model.dispose())
@@ -278,12 +308,6 @@
   $: if (editor) {
     onRawSyntaxSelectChange = createOnSyntaxChangeHandler(editor)
   }
-  $: editorSyntax,
-    (): void => {
-      alert('Syntax changed to ' + editorSyntax)
-      editorSyntaxIsVisible =
-        editorSyntax !== 'form-data' && editorSyntax !== 'x-www-form-urlencoded'
-    }
   $: $collections, onCollectionsChange()
 </script>
 
@@ -356,7 +380,7 @@
 
 <div class="join w-full">
   <div
-    class="join-item ui-resizable ui-resizable-width w-full p-5"
+    class="relative join-item ui-resizable ui-resizable-width w-full p-5"
     bind:this={containerLeftSection}
   >
     <div>
@@ -470,6 +494,7 @@
         {/each}
       </div>
     </div>
+    <div class="ui-resizable-handle"></div>
   </div>
   <div class="join-item w-full p-5">
     {#if selectedRequest.block}
@@ -581,21 +606,37 @@
       </select>
     </div>
 
-    <div class="field mt-5">
-      <div class="control">
-        <div>
-          <div class="editor-wrap">
-            <div class="editor-container" bind:this={editorContainer} />
-          </div>
-        </div>
+    <div class="mt-5 {isMultipartFormRequest ? 'hidden' : ''}">
+      <div class="editor-wrap">
+        <div class="editor-container" bind:this={editorContainer} />
       </div>
     </div>
 
-    <div class="field mt-5">
-      <div class="control">
-        <div class="editor-wrap {responseIsVisible ? '' : 'hidden'}">
-          <div class="editor-container" bind:this={responseEditorContainer} />
-        </div>
+    <div class="mt-5 {isMultipartFormRequest ? '' : 'hidden'}">
+      {#if isMultipartFormRequest}
+        {#each selectedRequest.block.request.multipartFormData as item}
+          <div class="join w-full mb-5">
+            <input type="text" value={item.key} class="join-item input w-full" placeholder="Name" />
+            <input type="text" value={item.value} class="join-item input w-full" placeholder="Value" />
+            <button class="join-item btn btn-error">
+              <span class="icon">
+                <i class="fa fa-trash"></i>
+              </span>
+            </button>
+          </div>
+        {/each}
+        <button class="btn btn-success">
+          <span class="icon">
+            <i class="fa fa-plus"></i>
+            Add a new field
+          </span>
+        </button>
+      {/if}
+    </div>
+
+    <div class="mt-5">
+      <div class="editor-wrap {responseIsVisible ? '' : 'hidden'}">
+        <div class="editor-container" bind:this={responseEditorContainer} />
       </div>
     </div>
   </div>

src/renderer/src/views/explorer/resizer.ts

@@ -2,13 +2,18 @@ export const NewResizer = (
   container: HTMLElement,
   width: boolean = true,
   height: boolean = true,
-  cb: (w: number, h: number) => void | undefined
+  cbWhenDone: (w: number, h: number) => void | undefined,
+  cbWhileDragging: (w: number, h: number) => void | undefined
 ): void => {
-  const resizer = container
+  const resizer = container.querySelector('.ui-resizable-handle') as HTMLDivElement
+
   let isResizing = false
   let startX: number, startY: number, startWidth: number, startHeight: number
+  let target: HTMLElement
 
   resizer.addEventListener('mousedown', (e: MouseEvent) => {
+    target = e.target as HTMLElement
+    if (target !== resizer) return
     isResizing = true
     startX = e.clientX
     startY = e.clientY
@@ -20,13 +25,18 @@ export const NewResizer = (
     if (isResizing) {
       const w = startWidth + e.clientX - startX
       const h = startHeight + e.clientY - startY
-      if (width) container.style.width = w + 'px'
-      if (height) container.style.height = h + 'px'
+      if (width && w) container.style.width = w + 'px'
+      if (height && h) container.style.height = h + 'px'
+      if (cbWhileDragging && w && h) cbWhileDragging(w, h)
     }
   })
 
   document.addEventListener('mouseup', () => {
+    if (!isResizing) return
     isResizing = false
-    if (cb) cb(container.offsetWidth, container.offsetHeight)
+    if (target !== resizer) return
+    if (!container.offsetWidth || !container.offsetHeight) return
+    if (startWidth !== container.offsetWidth && startHeight !== container.offsetHeight) return
+    if (cbWhenDone) cbWhenDone(container.offsetWidth, container.offsetHeight)
   })
 }