feat(editor): 优化工作区间大小拖动体验

Tencent · Jun 12, 2023 · da18842 · da18842
1 parent 06d289a
commit da18842
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 24 deletions.
diff --git a/packages/editor/src/layouts/Resizer.vue → packages/editor/src/components/Resizer.vue b/packages/editor/src/layouts/Resizer.vue → 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;
-
-    emit('change', e.deltaX);
-  });
+  })
+    .on('drag', (e) => {
+      if (!target.value) return;
+
+      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 → packages/editor/src/components/SplitView.vue b/packages/editor/src/components/Layout.vue → 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
@@ -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
@@ -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
@@ -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
@@ -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);
-}