optimize：Cj subsequent optimization (#842)

* optimize：后续优化 * optimize: 绑定插件根据固定状态判断点击画布时是否关闭代码逻辑 * optimize: 优化拖拽效果 * fix：撤销优化代码提交2 * optimize: 绑定插件根据固定状态判断点击画布时是否关闭代码逻辑 * fix:补充右侧插件面板不可选中样式
opentiny · Oct 30, 2024 · de7ac4d · de7ac4d
1 parent ba679fc
commit de7ac4d
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 13 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()
@@ -129,11 +135,15 @@ export default {
     )
 
     const nodeSelected = (node, parent, type) => {
-      const { toolbars } = useLayout().layoutState
-      if (type !== 'clickTree') {
-        useLayout().closePlugin()
+      const { toolbars, plugins, settings } = useLayout().layoutState
+      const leftPanels = localStorage.getItem('leftPanels')
+      const rightPanels = localStorage.getItem('rightPanels')
+      if (type !== 'clickTree' && plugins.render && !leftPanels.includes(plugins.render)) {
+        useLayout().closePlugin(true)
+      }
+      if (settings.render && !rightPanels.includes(settings.render)) {
+        useLayout().closeSetting(true)
       }
-
       const { getSchema, getNodePath } = useCanvas().canvasApi.value
 
       const schema = getSchema()
@@ -189,7 +199,8 @@ export default {
         ast
       },
       siteCanvasStyle,
-      canvasRef
+      canvasRef,
+      getMoveDragBarState
     }
   }
 }
@@ -212,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]"
@@ -166,6 +166,7 @@ export default {
   },
   emits: ['click', 'node-click', 'changeLeftAlign'],
   setup(props, { emit }) {
+    // TODO：后续优化
     const components = {}
     const iconComponents = {}
     const pluginRef = ref(null)
@@ -184,7 +185,8 @@ export default {
       dragPluginLayout,
       isSameSide,
       getPluginShown,
-      closePlugin
+      closePlugin,
+      getMoveDragBarState
     } = useLayout()
 
     const rightMenu = ref(null)
@@ -310,7 +312,8 @@ export default {
       PLUGIN_POSITION,
       getPluginShown,
       switchAlign,
-      rightMenu
+      rightMenu,
+      getMoveDragBarState
     }
   }
 }
@@ -453,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
     }
   }
 }
@@ -315,4 +317,7 @@ export default {
   opacity: 0.5;
   background: #f2f2f2;
 }
+.not-selected {
+  user-select: none;
+}
 </style>