[echarts-examples] branch gh-pages updated: fix(editor): improve resize experience

[wa...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wangzx pushed a commit to branch gh-pages
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git


The following commit(s) were added to refs/heads/gh-pages by this push:
     new 6fed4ecb fix(editor): improve resize experience
6fed4ecb is described below

commit 6fed4ecb766669ddb2930b94869f55980cf7f7a9
Author: wangzhongxiang <wa...@hn.bd>
AuthorDate: Tue Jul 11 00:23:06 2023 +0800

    fix(editor): improve resize experience
---
 src/editor/Editor.vue | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index 9c1bd50d..b3a23db2 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="main-container">
+  <div id="main-container" :class="{ 'is-dragging': draggingMouseDown }">
     <div
       id="editor-left-container"
       :style="{ width: leftContainerSize + '%' }"
@@ -392,7 +392,7 @@
     <div
       class="handler"
       id="h-handler"
-      @mousedown="onSplitterDragStart"
+      @mousedown="draggingMouseDown = true"
       :style="{ left: leftContainerSize + '%' }"
       v-if="!shared.isMobile"
     ></div>
@@ -463,7 +463,9 @@ export default {
       isPRLoading: false,
       prLatestReview: null,
       isPRReviewLoading: false,
-      isPRDiffLoading: false
+      isPRDiffLoading: false,
+
+      draggingMouseDown: false
     };
   },
 
@@ -490,7 +492,7 @@ export default {
       });
 
       window.addEventListener('mousemove', (e) => {
-        if (this.mousedown) {
+        if (this.draggingMouseDown) {
           let percentage = e.clientX / window.innerWidth;
           percentage = Math.min(0.9, Math.max(0.1, percentage));
           this.leftContainerSize = percentage * 100;
@@ -498,7 +500,7 @@ export default {
       });
 
       window.addEventListener('mouseup', () => {
-        this.mousedown = false;
+        this.draggingMouseDown = false;
       });
 
       // Save code as a sharable link when ctrl/cmd + s is pressed.
@@ -545,9 +547,6 @@ export default {
         assets.css
       );
     },
-    onSplitterDragStart() {
-      this.mousedown = true;
-    },
     disposeAndRun() {
       this.$refs.preview.refreshAll();
     },
@@ -822,7 +821,7 @@ export default {
 
 $control-panel-height: 30px;
 $pd-basic: 10px;
-$handler-width: 5px;
+$handler-width: 15px;
 
 #main-container {
   .handler {
@@ -839,6 +838,21 @@ $handler-width: 5px;
     border-left: 1px solid #ececec;
     // border-right: 1px solid $clr-border;
   }
+
+  &.is-dragging {
+    user-select: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      cursor: col-resize;
+      z-index: 9999;
+    }
+  }
 }
 
 #editor-left-container {


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org