feat:add editor mode

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;
 }