feat: toggle rule cliplINE

src/pages/EditPage/Content/BottomTools.tsx

@@ -0,0 +1,41 @@
+import { observer } from "mobx-react-lite";
+// import { MainTools } from "@/pages/EditPage/components/Tools/Tools";
+import { stores as store } from "@/pages/EditPage/store/main";
+import Icon from "@/HbsUI/Icon";
+
+import "./index.less";
+
+const BottomTools = () => {
+  /** 尺子 */
+  const toggleRuler = () => {
+    store.canvasStore.toggleRuler();
+  };
+
+  /** 隐藏|显示 安全线 */
+  const toggleClipLine = () => {
+    store.canvasStore.toggleClipLine();
+  };
+
+  /** 出血线  */
+  const toggleSafeLine = () => {
+    store.canvasStore.toggleSafeLine();
+  };
+
+  return (
+    <>
+      <div className="section-bottom-tool">
+        <div onClick={toggleSafeLine}>
+          <Icon fontSize={18} color="grey" icon="jiandao" />
+        </div>
+        <div onClick={toggleClipLine}>
+          <Icon fontSize={18} icon="dunpaibaowei_o" />
+        </div>
+        <div onClick={toggleRuler}>
+          <Icon fontSize={18} icon="ruler" />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default observer(BottomTools);

src/pages/EditPage/Content/TopTools.less

@@ -1,7 +1,7 @@
 .section-top-tool {
     position: absolute;
     justify-content: flex-end;
-    top: 0;
+    bottom: 0;
     right: 0;
     background: #fff;
     width: 100%;

src/pages/EditPage/Content/TopTools.tsx

@@ -7,13 +7,13 @@ import "./TopTools.less";
 const TopTools = () => {
   return (
     <>
-      {store?.canvasStore?.activeType ? (
+      {/* {store?.canvasStore?.activeType ? (
         <div className="section-top-tool">
           <MainTools />
         </div>
-      ) : (
-        <div className="section-top-tool">{store?.canvasStore?.activeType}</div>
-      )}
+      ) : ( */}
+      <div className="section-top-tool">{store?.canvasStore?.activeType}</div>
+      {/* )} */}
     </>
   );
 };

src/pages/EditPage/Content/index.less

@@ -0,0 +1,19 @@
+.section-bottom-tool{
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 48px;
+    border: 1px solid #f5f5f5;
+    border-top: none;
+    display: flex;
+    gap: 24px;
+    align-items: center;
+    padding: 0 24px;
+    color: black;
+    justify-content: center;
+    .icon{
+        cursor: pointer;
+        color: pink;
+    }
+}

src/pages/EditPage/Content/index.tsx

@@ -1,6 +1,7 @@
 import { useRef, useEffect } from "react";
 import * as fabric from "fabric";
 import TopTools from "./TopTools";
+import BottomTools from "./BottomTools";
 import { observer } from "mobx-react-lite";
 import { stores as store } from "@/pages/EditPage/store/main";
 // import { FabricCanvas } from "@/extension/fabricCanvas";
@@ -9,29 +10,25 @@ const MainContent = () => {
   const canvasBoxRef = useRef<HTMLInputElement>(null);
   const canvasEl = useRef<HTMLCanvasElement>(null);
 
-  const handleEnter = () => {
-    console.log("-->回车");
-  };
+  // const handleEnter = () => {
+  //   console.log("-->回车");
+  // };
 
-  const onKeyDown = (e: { code: any }) => {
-    const code = e.code;
-    switch (code) {
-      case "Enter":
-        handleEnter();
-        break;
-      default:
-        break;
-    }
-  };
+  // const onKeyDown = (e: { code: any }) => {
+  //   const code = e.code;
+  //   switch (code) {
+  //     case "Enter":
+  //       handleEnter();
+  //       break;
+  //     default:
+  //       break;
+  //   }
+  // };
 
   useEffect(() => {
     const wrapperWidth = canvasBoxRef.current?.getBoundingClientRect().width;
     const wrapperHeight = canvasBoxRef.current?.getBoundingClientRect().height;
-
-    console.log("===>", canvasBoxRef.current, wrapperHeight, wrapperWidth);
-
     const options = {
-      backgroundColor: "pink",
       absolutePositioned: true,
       selectable: false,
       width: wrapperWidth,
@@ -66,6 +63,7 @@ const MainContent = () => {
     >
       <TopTools />
       <canvas ref={canvasEl} />
+      <BottomTools />
     </div>
   );
 };

src/pages/EditPage/Header/index.tsx

@@ -63,7 +63,7 @@ const MJHeader = () => {
   };
 
   const handleRule = () => {
-    new FabricRuler(store.canvasStore.canvas);
+    // new FabricRuler(store.canvasStore.canvas);
     store.canvasStore.canvas?.renderAll();
   };
 
@@ -82,10 +82,33 @@ const MJHeader = () => {
         </Button>
       </div>
       <div className="btns-box">
-        <Button onClick={handleClickPic}>下载图片</Button>
-        <Button onClick={handleDownloadGroup}>下载Group</Button>
-        <Button onClick={handleClickJson}>下载JSON</Button>
-        <Button onClick={handleClickJson}>下载PDF</Button>
+        <Button>编组</Button>
+        <Button>解除编组</Button>
+        <Button
+          onClick={() => {
+            store.canvasStore.toggleClipLine();
+          }}
+        >
+          出血线
+        </Button>
+        <Button
+          onClick={() => {
+            store.canvasStore.toggleSafeLine();
+          }}
+        >
+          安全线
+        </Button>
+        <Button
+          onClick={() => {
+            store.canvasStore.toggleRuler();
+          }}
+        >
+          尺子
+        </Button>
+        {/* <Button onClick={handleClickPic}>下载图片</Button> */}
+        {/* <Button onClick={handleDownloadGroup}>下载Group</Button> */}
+        {/* <Button onClick={handleClickJson}>下载JSON</Button> */}
+        {/* <Button onClick={handleClickJson}>下载PDF</Button> */}
         {/* <Button onClick={handleOnSave}>暂存</Button> */}
         <Button onClick={handleReset}>清除</Button>
         <Button onClick={handleReset}>保存</Button>
@@ -100,7 +123,6 @@ const MJHeader = () => {
           }}
           onChange={handleFontChange}
         />
-        <Button onClick={handleRule}>画尺子</Button>
       </div>
     </div>
   );

src/pages/EditPage/index.tsx

@@ -36,6 +36,9 @@ const HomePage = () => {
           <Content style={contentStyle}>
             <MainContent />
           </Content>
+          <Sider width={260} style={{ background: "#fff" }}>
+            工具库
+          </Sider>
         </Layout>
       </Layout>
     </div>