fix: 修复toolbar问题.

JackySoft · Aug 26, 2024 · 19494a6 · 19494a6
1 parent cf09e6b
commit 19494a6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -100,7 +100,6 @@ git merge upstream/main
 
 - 2024-08-17: 项目[在线文档](http://docs.marsview.cc/)发布
 - 2024-08-13: 开源文章登上掘金论坛热榜第一
-  - 掘金[文章热榜](https://juejin.cn/hot/articles/)
 - 2024-08-10: 项目开源
   - 公告项目开源，发布开源文章：[我的低代码平台 Marsview 终于开源了](https://juejin.cn/post/7401009128204894244)
 - 2024-07-16: 项目首次在掘金论坛预告

diff --git a/packages/editor/src/components/Toolbar/Toolbar.tsx b/packages/editor/src/components/Toolbar/Toolbar.tsx
@@ -6,7 +6,7 @@ import { usePageStore } from '@/stores/pageStore';
 import './index.less';
 const Toolbar = memo(({ hoverTarget, copyElement, pastElement, delElement }: any) => {
   // 页面组件
-  const { selectedElement, elements, isFirstNode, nodeNav, isUpdateToolbar, setSelectedElement, moveElements } = usePageStore((state) => {
+  const { selectedElement, elements, nodeNav, isUpdateToolbar, setSelectedElement, moveElements } = usePageStore((state) => {
     const currentId = state.selectedElement?.id;
     const element = currentId ? state.page.elementsMap[currentId] : null;
     const nodeNav: { [key: string]: { id: string; type: string; name: string } } = {};
@@ -27,7 +27,6 @@ const Toolbar = memo(({ hoverTarget, copyElement, pastElement, delElement }: any
     return {
       selectedElement: state.selectedElement,
       elements: state.page.elements,
-      isFirstNode: state.page.elements[0]?.id === currentId,
       nodeNav,
       isUpdateToolbar: state.isUpdateToolbar,
       setSelectedElement: state.setSelectedElement,
@@ -37,15 +36,24 @@ const Toolbar = memo(({ hoverTarget, copyElement, pastElement, delElement }: any
 
   const [selectedStyle, setSelectedStyle] = useState({});
   const [hoverStyle, setHoverStyle] = useState({});
+  const [direction, setDirection] = useState<string>('rightTop');
 
   /**
    * 当元素属性发生变化时，重新渲染工具条
    */
   useEffect(() => {
     if (!selectedElement) return;
     setTimeout(() => {
-      const target = document.querySelector(`[data-id=${selectedElement?.id}]`);
+      const target: HTMLElement | null = document.querySelector(`[data-id=${selectedElement?.id}]`);
+      if (!target) return;
       const style = getBoundingClientRect(target);
+      if (target.offsetLeft < 144 - style.width) {
+        setDirection('bottomLeft');
+      } else if (target.offsetTop < 24) {
+        setDirection('bottomRight');
+      } else {
+        setDirection('rightTop');
+      }
       setSelectedStyle(style);
     });
   }, [selectedElement, elements, isUpdateToolbar]);
@@ -88,7 +96,7 @@ const Toolbar = memo(({ hoverTarget, copyElement, pastElement, delElement }: any
   return (
     <>
       <div className={selectedElement ? 'toolbar-box selected' : 'toolbar-box'} style={selectedStyle} id="editorToolbar">
-        <div className={isFirstNode ? 'tool-bar first' : 'tool-bar'}>
+        <div className={'tool-bar ' + direction}>
           {/* 节点导航：只渲染父节点、当前节点和子节点 */}
           <div className="node-nav">
             {nodeNav.parent && (

diff --git a/packages/editor/src/components/Toolbar/index.less b/packages/editor/src/components/Toolbar/index.less
@@ -72,10 +72,16 @@
       background-color: @primary-color;
       color: #fff;
       pointer-events: auto;
-      &.first {
+      min-width: 144px;
+      &.bottomRight {
         top: auto;
         bottom: -25px;
       }
+      &.bottomLeft {
+        left: -1px;
+        top: auto;
+        bottom: -24px;
+      }
     }
   }
 }