fix: 1

public/css/iconfont/demo_index.html

@@ -55,6 +55,24 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe70d;</span>
+                <div class="name">keyboard</div>
+                <div class="code-name">&amp;#xe70d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe693;</span>
+                <div class="name">recover</div>
+                <div class="code-name">&amp;#xe693;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe694;</span>
+                <div class="name">repeal</div>
+                <div class="code-name">&amp;#xe694;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe6fd;</span>
                 <div class="name">broken_l</div>
                 <div class="code-name">&amp;#xe6fd;</div>
@@ -450,9 +468,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1670490368835') format('woff2'),
-       url('iconfont.woff?t=1670490368835') format('woff'),
-       url('iconfont.ttf?t=1670490368835') format('truetype');
+  src: url('iconfont.woff2?t=1671500545884') format('woff2'),
+       url('iconfont.woff?t=1671500545884') format('woff'),
+       url('iconfont.ttf?t=1671500545884') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -479,6 +497,33 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-keyboard"></span>
+            <div class="name">
+              keyboard
+            </div>
+            <div class="code-name">.icon-keyboard
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-recover"></span>
+            <div class="name">
+              recover
+            </div>
+            <div class="code-name">.icon-recover
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-repeal"></span>
+            <div class="name">
+              repeal
+            </div>
+            <div class="code-name">.icon-repeal
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-broken_l"></span>
             <div class="name">
               broken_l
@@ -1074,6 +1119,30 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-keyboard"></use>
+                </svg>
+                <div class="name">keyboard</div>
+                <div class="code-name">#icon-keyboard</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-recover"></use>
+                </svg>
+                <div class="name">recover</div>
+                <div class="code-name">#icon-recover</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-repeal"></use>
+                </svg>
+                <div class="name">repeal</div>
+                <div class="code-name">#icon-repeal</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-broken_l"></use>
                 </svg>
                 <div class="name">broken_l</div>

public/css/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3549513 */
-  src: url('iconfont.woff2?t=1670490368835') format('woff2'),
-       url('iconfont.woff?t=1670490368835') format('woff'),
-       url('iconfont.ttf?t=1670490368835') format('truetype');
+  src: url('iconfont.woff2?t=1671500545884') format('woff2'),
+       url('iconfont.woff?t=1671500545884') format('woff'),
+       url('iconfont.ttf?t=1671500545884') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-keyboard:before {
+  content: "\e70d";
+}
+
+.icon-recover:before {
+  content: "\e693";
+}
+
+.icon-repeal:before {
+  content: "\e694";
+}
+
 .icon-broken_l:before {
   content: "\e6fd";
 }

public/css/iconfont/iconfont.json

@@ -6,6 +6,27 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "33322597",
+      "name": "keyboard",
+      "font_class": "keyboard",
+      "unicode": "e70d",
+      "unicode_decimal": 59149
+    },
+    {
+      "icon_id": "27198776",
+      "name": "recover",
+      "font_class": "recover",
+      "unicode": "e693",
+      "unicode_decimal": 59027
+    },
+    {
+      "icon_id": "27198777",
+      "name": "repeal",
+      "font_class": "repeal",
+      "unicode": "e694",
+      "unicode_decimal": 59028
+    },
+    {
       "icon_id": "33292114",
       "name": "broken_l",
       "font_class": "broken_l",

public/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

src/views/draw-file/board/editCAD/Style.js

@@ -176,6 +176,7 @@ const Style = {
             //strokeStyle: 'rgba(100,149,237,0.5)',
         },
     },
+    // eslint-disable-next-line no-dupe-keys
     Title: {
         font: '24px Microsoft YaHei',
         fillStyle: '#000000',

src/views/draw-file/board/index.d.ts

@@ -58,7 +58,7 @@ export type Board = {
   readyAddShape(type: MetaShapeType, onFinish?: () => void): () => void
   back(): void
   forward(): void
-
+  viewInit(): void
   setImage(url: string): void
   getStore(): BoardData
   export(): Promise<Blob>

src/views/draw-file/board/index.js

@@ -2,7 +2,8 @@ import mitt from 'mitt'
 import {
   text,
   table,
-  compass
+  compass,
+  title
 } from './shape'
 import Layer from './editCAD/Layer'
 import { history } from './editCAD/History/History.js'
@@ -49,7 +50,9 @@ export const create = (store, canvas) => {
         }
         break;
       }
+      case title:
       case text: {
+        console.log(data)
         data = data || ''
         shape.data.text = data
         shape.setText = (newData) => {
@@ -115,7 +118,7 @@ export const create = (store, canvas) => {
     },
     export() {
       layer.uiControl.menu_screenShot()
-      return new Promise(resolve => canvas.toBlob(resolve))
+      // return new Promise(resolve => canvas.toBlob(resolve))
     },
     destroy() {
     }

src/views/draw-file/eshape.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react"
 import { Button, Form, Modal, Input } from 'antd'
 import { CloseOutlined, PlusOutlined, RotateRightOutlined } from '@ant-design/icons'
 import style from './style.module.scss'
+import { title, compass } from './board'
 import ReactEditeTable, { InputEditor } from 'react-edit-table'
 
 import type { Board, BoardShape, ShapeType, ExtractShape } from "./board"
@@ -171,16 +172,23 @@ const RotateInput = ({ shape }: { shape: ExtractShape<'rotate'> }) => (
 const shapeCompontes: { [key in ShapeType]?: ComponentType<{ shape: any }> } = {
   Tag: TextInput,
   Table: ContentInput,
-  Compass: RotateInput
+  Compass: RotateInput,
+  Title: TextInput
 }
 
 export type EShapeProps = {
   board: Board
 }
 export const EShape = ({ board }: EShapeProps) => {
-  const [shape, setShape] = useState<BoardShape | null>(null)
-  
+  const [shape, setShape] = useState<BoardShape | null>(null)  
   const Edit = shape && shapeCompontes[shape.data.type]
+  const disabledDelete: boolean = ([title, compass] as any).includes(shape?.data.type)
+  const renderDelete = !disabledDelete && (
+    <Form.Item label="形状">
+      <Button type="primary" onClick={() => shape!.delete()}>删除</Button>
+    </Form.Item>
+  )
+
   useEffect(() => {
     board.bus.on('selectShape', setShape)
     return () => {
@@ -188,13 +196,26 @@ export const EShape = ({ board }: EShapeProps) => {
     }
   }, [board])
 
+  useEffect(() => {
+    const keydownHandler = (ev: KeyboardEvent) => {
+      if (ev.key === 'Delete' && shape && !disabledDelete) {
+        shape.delete()
+      }
+    }
+    window.addEventListener('keydown', keydownHandler)
+    return () => {
+      window.removeEventListener('keydown', keydownHandler)
+    }
+  }, [board, shape, disabledDelete])
+
   return shape ? (
     <div className={style['def-shape-edit']}>
       { Edit && <Edit shape={shape} /> }
-      <Form.Item label="形状">
-        <Button type="primary" onClick={() => shape.delete()}>删除</Button>
-      </Form.Item>
-      <div className={`ant-form-item ${style['def-close-shape-edit']}`} onClick={() => setShape(null)}>
+      { renderDelete }
+      <div 
+        className={`ant-form-item ${style['def-close-shape-edit']}`} 
+        onClick={() => setShape(null)}
+      >
         <CloseOutlined className={`${style['icon']}`} onClick={() => board.unSelectShape()}  />
       </div>
     </div>

src/views/draw-file/header.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons"
+import { ArrowLeftOutlined } from "@ant-design/icons"
 import { Button } from "antd"
 import { useNavigate, fillRoutePath, RoutePath, usePathData } from "router"
 import { saveAs } from 'utils'
@@ -67,6 +67,18 @@ const Header = ({ board, type }: HeaderProps) => {
     }
   }, [board])
 
+  useEffect(() => {
+    const keydownHandler = (ev: KeyboardEvent) => {
+      if (ev.keyCode === 32) {
+        board.viewInit()
+      }
+    }
+    window.addEventListener('keydown', keydownHandler)
+    return () => {
+      window.removeEventListener('keydown', keydownHandler)
+    }
+  }, [board])
+
   return (
     <>
       <div className={style['df-header-left']}>
@@ -80,14 +92,13 @@ const Header = ({ board, type }: HeaderProps) => {
       </h1>
       <div className={style['df-header-right']}>
         <div className={style['df-header-action']}>
-          <ArrowLeftOutlined 
-            className={backDisabled ? 'disabled':  'icon'} 
+          <i className={`iconfont icon-repeal ${backDisabled ? 'disabled':  'icon'} `} 
             onClick={() => board.back()} 
           />
-          <ArrowRightOutlined 
-            className={forwardDisabled ? 'disabled': 'icon'} 
+          <i className={`iconfont icon-recover ${forwardDisabled ? 'disabled':  'icon'} `} 
             onClick={() => board.forward()} 
           />
+          <i className="iconfont icon-keyboard" />
         </div>
         <Button type="primary" size="middle" onClick={save}>保存</Button>
         <Button type="default" size="middle" onClick={exportPng}>导出</Button>

src/views/draw-file/style.module.scss

@@ -46,7 +46,7 @@
 
 .df-header-action {
   margin-right: 60px;
-  span {
+  :global(.iconfont) {
     font-size: 15px;
     &:not(:first-child) {
       margin-left: 32px;