optimize: 优化拖拽效果

opentiny · Oct 23, 2024 · 9af9a40 · 9af9a40
1 parent f388a91
commit 9af9a40
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 9 deletions.
diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
@@ -70,7 +70,7 @@ export default {
   },
   emits: ['close'],
   setup(props, { emit }) {
-    const { getPluginWidth, changePluginWidth, getPluginByLayout } = useLayout()
+    const { getPluginWidth, changePluginWidth, getPluginByLayout, changeMoveDragBarState } = useLayout()
     const panelState = inject('panelState')
     const closePanel = () => {
       useLayout().closePlugin()
@@ -129,23 +129,27 @@ export default {
     const throttledMouseMoveLeft = throttle(onMouseMoveLeft, 50)
 
     const onMouseUpRight = () => {
+      changeMoveDragBarState(false)
       document.removeEventListener('mousemove', throttledMouseMoveRight)
       document.removeEventListener('mouseup', onMouseUpRight)
     }
 
     const onMouseUpLeft = () => {
+      changeMoveDragBarState(false)
       document.removeEventListener('mousemove', throttledMouseMoveLeft)
       document.removeEventListener('mouseup', onMouseUpLeft)
     }
 
     const onMouseDownRight = (event) => {
+      changeMoveDragBarState(true)
       startX = event.clientX
       startWidth = panel.value.offsetWidth
       document.addEventListener('mousemove', throttledMouseMoveRight)
       document.addEventListener('mouseup', onMouseUpRight)
     }
 
     const onMouseDownLeft = (event) => {
+      changeMoveDragBarState(true)
       startX = event.clientX
       startWidth = panel.value.offsetWidth
       document.addEventListener('mousemove', throttledMouseMoveLeft)

diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js
@@ -51,6 +51,7 @@ const pluginState = reactive({
 })
 
 const layoutState = reactive({
+  isMoveDragBar: false,
   deviceType: 'desktop',
   iframeWidth: '1200px',
   dimension: {
@@ -82,6 +83,12 @@ const layoutState = reactive({
   },
   pageStatus: ''
 })
+const getMoveDragBarState = () => {
+  return layoutState.isMoveDragBar
+}
+const changeMoveDragBarState = (state) => {
+  layoutState.isMoveDragBar = state
+}
 const leftMenuShownStorage = useStorage('leftMenuShown', layoutState.plugins.isShow)
 const rightMenuShownStorage = useStorage('rightMenuShown', layoutState.settings.isShow)
 const changeMenuShown = (menuName) => {
@@ -312,6 +319,8 @@ export default () => {
     isSameSide,
     getPluginShown,
     changePluginShown,
-    changeMenuShown
+    changeMenuShown,
+    getMoveDragBarState,
+    changeMoveDragBarState
   }
 }
diff --git a/packages/design-core/src/DesignCanvas.vue b/packages/design-core/src/DesignCanvas.vue
@@ -1,6 +1,11 @@
 <template>
   <div id="canvas-wrap" ref="canvasRef">
-    <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
+    <div
+      ref="siteCanvas"
+      class="site-canvas"
+      :style="siteCanvasStyle"
+      :class="{ 'not-selected': getMoveDragBarState() }"
+    >
       <canvas-container
         :controller="controller"
         :materials-panel="materialsPanel"
@@ -52,6 +57,7 @@ export default {
     const showMask = ref(true)
     const canvasRef = ref(null)
     let showModal = false // 弹窗标识
+    const { getMoveDragBarState } = useLayout()
 
     const removeNode = (node) => {
       const { pageState } = useCanvas()
@@ -193,7 +199,8 @@ export default {
         ast
       },
       siteCanvasStyle,
-      canvasRef
+      canvasRef,
+      getMoveDragBarState
     }
   }
 }
@@ -216,4 +223,8 @@ export default {
     transform-origin: top;
   }
 }
+.not-selected {
+  pointer-events: none;
+  user-select: none;
+}
 </style>
diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue
@@ -104,7 +104,7 @@
     </div>
   </div>
 
-  <div>
+  <div :class="{ 'not-selected': getMoveDragBarState() }">
     <!-- 插件面板 -->
     <div
       v-show="renderPanel && components[renderPanel]"
@@ -185,7 +185,8 @@ export default {
       dragPluginLayout,
       isSameSide,
       getPluginShown,
-      closePlugin
+      closePlugin,
+      getMoveDragBarState
     } = useLayout()
 
     const rightMenu = ref(null)
@@ -311,7 +312,8 @@ export default {
       PLUGIN_POSITION,
       getPluginShown,
       switchAlign,
-      rightMenu
+      rightMenu,
+      getMoveDragBarState
     }
   }
 }
@@ -454,4 +456,7 @@ export default {
 :deep(.svg-icon.icon-plugin-icon-plugin-help) {
   font-size: 22px;
 }
+.not-selected {
+  user-select: none;
+}
 </style>
diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue
@@ -1,7 +1,7 @@
 <!-- 右侧插件栏-->
 <template>
   <!-- 插件面板 -->
-  <div>
+  <div :class="{ 'not-selected': getMoveDragBarState() }">
     <div
       v-show="renderPanel && components[renderPanel]"
       id="tiny-engine-right-panel"
@@ -83,6 +83,7 @@ export default {
       dragPluginLayout,
       isSameSide,
       getPluginShown,
+      getMoveDragBarState,
       layoutState: { settings: settingsState }
     } = useLayout()
 
@@ -172,7 +173,8 @@ export default {
       PLUGIN_POSITION,
       getPluginShown,
       switchAlign,
-      rightMenu
+      rightMenu,
+      getMoveDragBarState
     }
   }
 }