Resize pane (#42)

* Resize pane #32

* Fix text selecting in preview pane

* Fix lint

* Set pane min-width

Author: Perkovec

src/components/header.vue

@@ -138,8 +138,8 @@
       drag-enter="handleDragEnter"
       drag-leave="handleDragLeave"
       drag-end="handleDragEnd"
-      v-on:mouseover="hoverTab($index)"
-      v-on:mouseleave="unhoverTab($index)"
+      @mouseover="hoverTab($index)"
+      @mouseleave="unhoverTab($index)"
       v-drag-and-drop>
       <div :class="{'dragzone': dragging}"></div>
       <span class="tab-title" v-if="tab && !tab.rename">

src/components/main.vue

@@ -8,6 +8,15 @@
     /* total - header - footer */
     height: calc(100% - 36px - 25px);
     display: flex;
+    &.resizing {
+      cursor: ew-resize;
+      .editor {
+        cursor: ew-resize;
+      }
+      .preview {
+        -webkit-user-select: none;
+      }
+    }
     &.vim-mode {
       /* height - editorDialog */
       .CodeMirror-scroll {
@@ -17,12 +26,15 @@
     }
   }
   .editor, .preview {
+    min-width: 100px;
     height: 100%;
-    flex: 1;
     overflow: auto;
   }
   .editor {
     cursor: text;
+    overflow-x: hidden !important;
+    position: relative;
+    border-right: 1px solid #e3e3e3;
     .editor-input {
       display: none;
     }
@@ -47,22 +59,37 @@
       tab-size: 2;
     }
   }
+  .resize-bar {
+    position: absolute;
+    z-index: 99;
+    top: 0;
+    bottom: 0;
+    right: -5px;
+    width: 10px;
+    cursor: ew-resize;
+  }
 </style>
 
 <template>
   <div
     class="main tab-body"
-    :class="['tab-body-' + $index, {'vim-mode': currentTab && currentTab.isVimMode}]"
+    :class="['tab-body-' + $index, {'vim-mode': currentTab && currentTab.isVimMode, 'resizing': resizing}]"
     v-for="tab in tabs"
+    @mousemove="resizeMove($event, $index)"
+    @mouseup="resizeEnd"
+    @mouseleave="resizeEnd"
     v-show="$index === currentTabIndex">
     <div
       class="editor"
       :class="{'focus-mode': tab.isFocusMode}"
+      :style="{ width: tab.split + '%' }"
       v-show="currentTab && currentTab.writingMode !== 'preview'">
       <textarea class="editor-input" :id="'editor-' + $index">{{ tab.content }}</textarea>
+      <div class="resize-bar" @mousedown="resizeStart($event, $index)"></div>
     </div>
     <div
       :class="'preview preview-' + $index"
+      :style="{ width: (100 - tab.split) + '%' }"
       v-show="currentTab && currentTab.writingMode !== 'writing'">
       <div :class="'markdown-body markdown-body-' + $index">
         {{{ tab.html }}}
@@ -114,7 +141,8 @@
     },
     data() {
       return {
-        isMac
+        isMac,
+        resizing: false
       }
     },
     created() {
@@ -252,7 +280,8 @@
           writingMode: 'default',
           isVimMode: false,
           pdf: '',
-          rename: false
+          rename: false,
+          split: 50
         })
 
         setTimeout(() => {
@@ -496,6 +525,26 @@
           }
           return false
         }
+      },
+      resizeStart(e, index) {
+        this.resizing = true
+        this.startX = e.pageX
+        this.startSplit = this.tabs[index].split
+      },
+      resizeMove(e, index) {
+        if (this.resizing) {
+          const dx = e.pageX - this.startX
+          const totalWidth = this.$el.parentNode.offsetWidth
+          this.$store.dispatch('UPDATE_EDITOR_SPLIT', {
+            index,
+            split: this.startSplit + (dx / totalWidth * 100)
+          })
+        }
+      },
+      resizeEnd() {
+        this.resizing = false
+        this.editor.refresh()
+        this.editor.focus()
       }
     }
   }

src/vuex/modules/editor.js

@@ -84,6 +84,9 @@ const mutations = {
   UPDATE_DRAGGING_STATUS(state, dragging) {
     state.draggingTab = dragging
   },
+  UPDATE_EDITOR_SPLIT(state, {index, split}) {
+    state.tabs[index].split = split
+  },
   SET_EDITOR(state, {index, editor}) {
     state.currentTabIndex = index
     state.tabs[index].editor = editor