feat: 画布拖拽时打开大纲树

gene9831 · Apr 19, 2024 · fd26007 · fd26007
1 parent c958d02
commit fd26007
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
@@ -573,8 +573,6 @@ export const dragMove = (event, isHover) => {
   const { element } = dragState
   const absolute = canvasState.type === 'absolute'
 
-  dragState.draging = dragState.keydown
-
   dragState.mouse = { x: clientX, y: clientY }
 
   // 如果仅仅是mouseover事件直接return,并重置拖拽位置状态，优化性能
@@ -585,6 +583,8 @@ export const dragMove = (event, isHover) => {
     return
   }
 
+  dragState.draging = dragState.keydown
+
   setHoverRect(getElement(event.target), dragState.data)
 
   if (dragState.draging) {

diff --git a/packages/canvas/src/index.js b/packages/canvas/src/index.js
@@ -19,6 +19,7 @@ import Builtin from './components/builtin/builtin.json'
 import RenderMain, { api as renderApi } from './components/render/RenderMain'
 import { createRender } from './components/render/runner'
 import {
+  dragState,
   dragStart,
   updateRect,
   getContext,
@@ -66,6 +67,7 @@ export {
   RenderMain,
   renderApi,
   Builtin,
+  dragState,
   dragStart,
   dragMove,
   updateRect,

diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
@@ -10,15 +10,20 @@
           </div>
         </div>
         <div class="tiny-engine-right-wrap">
-          <design-settings v-show="layoutState.settings.showDesignSettings" ref="right"></design-settings>
+          <design-settings
+            v-show="layoutState.settings.showDesignSettings && !showTreePlugin"
+            ref="right"
+          ></design-settings>
+          <!-- 画布拖动节点时，显示大纲树 -->
+          <component v-show="showTreePlugin" :is="treePlugin.component"></component>
         </div>
       </div>
     </div>
   </tiny-config-provider>
 </template>
 
 <script>
-import { reactive, ref, watch, onUnmounted } from 'vue'
+import { computed, reactive, ref, watch, onUnmounted } from 'vue'
 import { ConfigProvider as TinyConfigProvider } from '@opentiny/vue'
 import designSmbConfig from '@opentiny/vue-design-smb'
 import { useResource, useLayout, useEditorInfo, useModal, useApp, useNotify } from '@opentiny/tiny-engine-controller'
@@ -33,6 +38,7 @@ import blockPlugin from '@opentiny/tiny-engine-plugin-block'
 import materials from '@opentiny/tiny-engine-plugin-materials'
 import { useBroadcastChannel } from '@vueuse/core'
 import { constants } from '@opentiny/tiny-engine-utils'
+import { dragState } from '@opentiny/tiny-engine-canvas'
 
 const { message } = useModal()
 const { requestInitBlocks } = blockPlugin.api
@@ -67,6 +73,9 @@ export default {
     const { plugins } = layoutState
     const right = ref(null)
 
+    const treePlugin = addons.plugins.find((plugin) => plugin.id === 'OutlineTree')
+    const showTreePlugin = computed(() => treePlugin && dragState.draging && plugins.render !== 'OutlineTree')
+
     // 此处接收画布内部的错误和警告提示
     const { data } = useBroadcastChannel({ name: BROADCAST_CHANNEL.Notify })
 
@@ -122,6 +131,8 @@ export default {
       right,
       plugins,
       toggleNav,
+      treePlugin,
+      showTreePlugin,
       addons,
       layoutState,
       designSmbConfig
@@ -154,6 +165,7 @@ export default {
     }
   }
   .tiny-engine-right-wrap {
+    width: var(--base-right-panel-width);
     z-index: 4;
   }
   :deep(.monaco-editor .suggest-widget) {