From da18842e42456b7cba55c8c0dc69c0b197ecf738 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 12 Jun 2023 19:34:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E4=BC=98=E5=8C=96=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8C=BA=E9=97=B4=E5=A4=A7=E5=B0=8F=E6=8B=96=E5=8A=A8?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/{layouts => components}/Resizer.vue   | 19 +++++++---
 .../components/{Layout.vue => SplitView.vue}  |  2 +-
 packages/editor/src/index.ts                  |  3 +-
 packages/editor/src/layouts/Framework.vue     |  6 ++--
 .../sidebar/code-block/CodeBlockEditor.vue    |  6 ++--
 packages/editor/src/theme/resizer.scss        | 35 +++++++++++++------
 6 files changed, 48 insertions(+), 23 deletions(-)
 rename packages/editor/src/{layouts => components}/Resizer.vue (55%)
 rename packages/editor/src/components/{Layout.vue => SplitView.vue} (98%)

diff --git a/packages/editor/src/layouts/Resizer.vue b/packages/editor/src/components/Resizer.vue
similarity index 55%
rename from packages/editor/src/layouts/Resizer.vue
rename to packages/editor/src/components/Resizer.vue
index bfd6d0ab..af9ce030 100644
--- a/packages/editor/src/layouts/Resizer.vue
+++ b/packages/editor/src/components/Resizer.vue
@@ -1,5 +1,5 @@
 <template>
-  <span ref="target" class="m-editor-resizer">
+  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-draging': isDraging }">
     <slot></slot>
   </span>
 </template>
@@ -15,6 +15,7 @@ defineOptions({
 const emit = defineEmits(['change']);
 
 const target = ref<HTMLSpanElement>();
+const isDraging = ref(false);
 
 let getso: Gesto;
 
@@ -23,14 +24,22 @@ onMounted(() => {
   getso = new Gesto(target.value, {
     container: window,
     pinchOutside: true,
-  }).on('drag', (e) => {
-    if (!target.value) return;
+  })
+    .on('drag', (e) => {
+      if (!target.value) return;
 
-    emit('change', e.deltaX);
-  });
+      emit('change', e.deltaX);
+    })
+    .on('dragStart', () => {
+      isDraging.value = true;
+    })
+    .on('dragEnd', () => {
+      isDraging.value = false;
+    });
 });
 
 onUnmounted(() => {
   getso?.unset();
+  isDraging.value = false;
 });
 </script>
diff --git a/packages/editor/src/components/Layout.vue b/packages/editor/src/components/SplitView.vue
similarity index 98%
rename from packages/editor/src/components/Layout.vue
rename to packages/editor/src/components/SplitView.vue
index 30db2ae2..f495ee3e 100644
--- a/packages/editor/src/components/Layout.vue
+++ b/packages/editor/src/components/SplitView.vue
@@ -23,7 +23,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
-import Resizer from '@editor/layouts/Resizer.vue';
+import Resizer from './Resizer.vue';
 
 defineOptions({
   name: 'MEditorLayout',
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index 70997458..819b0b76 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -60,7 +60,8 @@ export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
-export { default as LayoutContainer } from './components/Layout.vue';
+export { default as LayoutContainer } from './components/SplitView.vue';
+export { default as SplitView } from './components/SplitView.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // @todo, 自定义图片上传方法等编辑器依赖的外部选项
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index a6001e67..7b9469ec 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -10,7 +10,7 @@
       <CodeEditor class="m-editor-content" :init-values="root" :options="codeOptions" @save="saveCode"></CodeEditor>
     </slot>
 
-    <Layout
+    <SplitView
       v-else
       class="m-editor-content"
       left-class="m-editor-framework-left"
@@ -38,7 +38,7 @@
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
       </template>
-    </Layout>
+    </SplitView>
 
     <slot name="content-after"></slot>
     <slot name="footer"></slot>
@@ -50,7 +50,7 @@ import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 
-import Layout from '@editor/components/Layout.vue';
+import SplitView from '@editor/components/SplitView.vue';
 import type { GetColumnWidth, Services } from '@editor/type';
 
 import AddPageBox from './AddPageBox.vue';
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index e84a3646..3bd3b02d 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -10,7 +10,7 @@
     :size="size"
     :before-close="handleClose"
   >
-    <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
+    <SplitView v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 右侧区域 -->
       <template #center>
         <div v-if="!isEmpty(codeConfig)" class="m-editor-code-block-editor-panel">
@@ -28,7 +28,7 @@
           ></FunctionEditor>
         </div>
       </template>
-    </Layout>
+    </SplitView>
   </TMagicDrawer>
 </template>
 
@@ -41,7 +41,7 @@ import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent } from '@tmagic/schema';
 
 import FunctionEditor from '@editor/components/FunctionEditor.vue';
-import Layout from '@editor/components/Layout.vue';
+import SplitView from '@editor/components/SplitView.vue';
 import type { ListState, Services } from '@editor/type';
 import { serializeConfig } from '@editor/utils/editor';
 
diff --git a/packages/editor/src/theme/resizer.scss b/packages/editor/src/theme/resizer.scss
index 2567ba4e..6f199b61 100644
--- a/packages/editor/src/theme/resizer.scss
+++ b/packages/editor/src/theme/resizer.scss
@@ -4,14 +4,38 @@
   width: 8px;
   margin: 0 -5px;
   height: 100%;
-  opacity: 0.9;
+  opacity: 0.8;
   background: padding-box #d8dee8;
   box-sizing: border-box;
   cursor: col-resize;
   z-index: 1;
+  position: relative;
 
   &:hover {
     border-color: #d8dee8;
+
+    .icon-container {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &.m-editor-resizer-draging {
+    &::after {
+      content: "";
+      position: absolute;
+      width: 600px;
+      height: 100%;
+      left: 0;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 600px;
+      height: 100%;
+      right: 0;
+    }
   }
 
   .icon-container {
@@ -40,12 +64,3 @@
     font-size: 18px;
   }
 }
-
-.magic-editor-resizer:hover {
-  .icon-container {
-    visibility: visible;
-    opacity: 1;
-  }
-  // border-left: 5px solid rgba(0,0,0,.5);
-  // border-right: 5px solid rgba(0,0,0,.5);
-}