feat:add editor mode

index.html

@@ -163,16 +163,16 @@
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">
-        <div class="menu-item__search">
+        <div class="menu-item__search" data-menu="search">
           <i></i>
         </div>
-        <div class="menu-item__search__collapse">
+        <div class="menu-item__search__collapse" data-menu="search">
           <div class="menu-item__search__collapse__search">
             <input type="text" />
             <span>×</span>
           </div>
         </div>
-        <div class="menu-item__print">
+        <div class="menu-item__print" data-menu="print">
           <i></i>
         </div>
       </div>
@@ -183,6 +183,7 @@
         <span>可见页码：<span class="page-no-list">1</span></span>
         <span>页面：<span class="page-no">1</span>/<span class="page-size">1</span></span>
       </div>
+      <div class="editor-mode">编辑模式</div>
       <div>
         <div class="page-scale-minus">
           <i></i>

src/editor/core/command/Command.ts

@@ -1,4 +1,5 @@
 import { IElement } from "../.."
+import { EditorMode } from "../../dataset/enum/Editor"
 import { RowFlex } from "../../dataset/enum/Row"
 import { IDrawImagePayload } from "../../interface/Draw"
 import { IWatermark } from "../../interface/Watermark"
@@ -103,8 +104,8 @@ export class Command {
   }
 
   // 全局命令
-  public executeMode() {
-    return Command.mode()
+  public executeMode(payload: EditorMode) {
+    return Command.mode(payload)
   }
 
   public executeCut() {

src/main.ts

@@ -1,6 +1,6 @@
 import './style.css'
 import prism from "prismjs"
-import Editor, { ElementType, IElement, RowFlex } from './editor'
+import Editor, { EditorMode, ElementType, IElement, RowFlex } from './editor'
 import { Dialog } from './components/dialog/Dialog'
 import { formatPrismToken } from './utils/prism'
 
@@ -623,6 +623,36 @@ window.onload = function () {
     instance.command.executePageScaleAdd()
   }
 
+  let modeIndex = 0
+  const modeList = [{
+    mode: EditorMode.EDIT,
+    name: '编辑模式'
+  }, {
+    mode: EditorMode.CLEAN,
+    name: '清洁模式'
+  }, {
+    mode: EditorMode.READONLY,
+    name: '只读模式'
+  }]
+  const modeElement = document.querySelector<HTMLDivElement>('.editor-mode')!
+  modeElement.onclick = function () {
+    // 模式选择循环
+    modeIndex === 2 ? modeIndex = 0 : modeIndex++
+    // 设置模式
+    const { name, mode } = modeList[modeIndex]
+    modeElement.innerText = name
+    instance.command.executeMode(mode)
+    // 设置菜单栏权限视觉反馈
+    const isReadonly = mode === EditorMode.READONLY
+    const enableMenuList = ['search', 'print']
+    document.querySelectorAll<HTMLDivElement>('.menu-item>div').forEach(dom => {
+      const menu = dom.dataset.menu
+      isReadonly && (!menu || !enableMenuList.includes(menu))
+        ? dom.classList.add('disable')
+        : dom.classList.remove('disable')
+    })
+  }
+
   // 内部事件监听
   instance.listener.rangeStyleChange = function (payload) {
     // 控件类型

src/style.css

@@ -167,7 +167,8 @@ ul {
 }
 
 .menu-item__undo.no-allow,
-.menu-item__redo.no-allow {
+.menu-item__redo.no-allow,
+.menu-item>div.disable {
   color: #c0c4cc;
   cursor: not-allowed;
   opacity: 0.4;
@@ -563,4 +564,9 @@ ul {
 .footer .page-scale-percentage {
   cursor: pointer;
   user-select: none;
+}
+
+.footer .editor-mode {
+  cursor: pointer;
+  user-select: none;
 }