From 70bb7e834aa61050e960c89b5056366857aac998 Mon Sep 17 00:00:00 2001
From: XiNGRZ <hi@xingrz.me>
Date: Sat, 23 Mar 2024 20:53:14 +0800
Subject: [PATCH] Migrate to n-split

---
 src/App.vue                  | 46 ++++++++++++++-----------
 src/components/Resizable.vue | 66 ------------------------------------
 src/stores/editor.ts         |  8 ++---
 3 files changed, 31 insertions(+), 89 deletions(-)
 delete mode 100644 src/components/Resizable.vue

diff --git a/src/App.vue b/src/App.vue
index 876afbb..3ba256c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,45 +1,38 @@
 <template>
   <n-config-provider>
-    <resizable v-model:width="width">
-      <template v-slot:default>
+    <n-split direction="horizontal" :resize-trigger-size="8" v-model:size="editorStore.split">
+      <template #1>
         <editor v-model:content="editorStore.content" v-model:selection="editorStore.selection"
           v-model:scroll="editorStore.scroll" :icons="iconStore.icons" :size="editorStore.size" />
       </template>
-      <template v-slot:fixed>
+      <template #2>
         <scroller v-model:scroll="editorStore.scroll">
           <BSMap :content="editorStore.content" :size="editorStore.size" />
         </scroller>
       </template>
-    </resizable>
+      <template #resize-trigger>
+        <div :class="$style.resizer">
+        </div>
+      </template>
+    </n-split>
   </n-config-provider>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { NConfigProvider } from 'naive-ui';
+import {
+  NConfigProvider,
+  NSplit,
+} from 'naive-ui';
 
 import { useEditorStore } from '@/stores/editor';
 import { useIconStore } from '@/stores/icon';
 
-import Resizable from './components/Resizable.vue';
 import Scroller from './components/Scroller.vue';
 import BSMap from './components/BSMap.vue';
 import Editor from './components/Editor.vue';
 
 const editorStore = useEditorStore();
 const iconStore = useIconStore();
-
-const width = computed({
-  get(): number {
-    const max = window.innerWidth - 200;
-    const min = 200;
-    const width = editorStore.width;
-    return Math.max(Math.min(width, max), min);
-  },
-  set(v: number) {
-    editorStore.width = v;
-  }
-});
 </script>
 
 <style lang="scss" module>
@@ -49,4 +42,19 @@ const width = computed({
   padding: 0;
   overscroll-behavior: none;
 }
+
+.resizer {
+  height: 100%;
+  background: #cccccc;
+
+  transition: background-color 200ms;
+
+  &:hover {
+    background: #d5d5d5;
+  }
+
+  &:active {
+    background: #c0c0c0;
+  }
+}
 </style>
diff --git a/src/components/Resizable.vue b/src/components/Resizable.vue
deleted file mode 100644
index 50a4dd7..0000000
--- a/src/components/Resizable.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div :class="{ [$style.resizable]: true, [$style.resizing]: resizing }" @mousemove="onResizeMove"
-    @mouseup="onResizeEnd">
-    <div :class="$style.main">
-      <slot></slot>
-    </div>
-    <div :class="$style.resizer" v-on:mousedown="onResizeStart"></div>
-    <div :style="{ width: `${width || 200}px` }">
-      <slot name="fixed"></slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { defineEmits, defineProps, ref } from 'vue';
-
-const props = defineProps<{
-  width: number;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:width', width: number): void;
-}>();
-
-const resizing = ref(false);
-const clientX = ref(0);
-
-function onResizeStart(evt: MouseEvent): void {
-  resizing.value = true;
-  clientX.value = evt.clientX;
-}
-
-function onResizeMove(evt: MouseEvent): void {
-  if (resizing.value) {
-    emit('update:width', props.width - (evt.clientX - clientX.value));
-    clientX.value = evt.clientX;
-  }
-}
-
-function onResizeEnd(): void {
-  if (resizing.value) {
-    resizing.value = false;
-  }
-}
-</script>
-
-<style lang="scss" module>
-.resizable {
-  display: flex;
-  align-items: stretch;
-
-  >.main {
-    flex: 1;
-  }
-
-  >.resizer {
-    width: 8px;
-    cursor: col-resize;
-    background: #ccc;
-  }
-
-  &.resizing>.resizer {
-    background: #bbb;
-  }
-}
-</style>
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
index 1f4b82b..7201002 100644
--- a/src/stores/editor.ts
+++ b/src/stores/editor.ts
@@ -8,7 +8,7 @@ const debouncedSetItem = debounce({ delay: 200 }, localStorage.setItem.bind(loca
 
 export const useEditorStore = defineStore('editor', () => {
   const size = ref(parseInt(localStorage.getItem('size') || '') || 20);
-  const width = ref(parseInt(localStorage.getItem('width') || '') || 200);
+  const split = ref(parseFloat(localStorage.getItem('split') || '') || 0.75);
   const content = ref(localStorage.getItem('content') || '');
   const scroll = ref(0);
   const selection = ref<ISelection>();
@@ -17,8 +17,8 @@ export const useEditorStore = defineStore('editor', () => {
     debouncedSetItem('size', String(value));
   });
 
-  watch(width, (value) => {
-    debouncedSetItem('width', String(value));
+  watch(split, (value) => {
+    debouncedSetItem('split', String(value));
   });
 
   watch(content, (value) => {
@@ -27,7 +27,7 @@ export const useEditorStore = defineStore('editor', () => {
 
   return {
     size,
-    width,
+    split,
     content,
     scroll,
     selection,