feat: add header and footer editable option

Co-authored-by: Hufe921 <huangyunfeihufe@hotmail.com>

.gitignore

@@ -1,3 +1,4 @@
+.idea
 node_modules
 .DS_Store
 dist

docs/en/guide/option.md

@@ -1,6 +1,6 @@
 # Configuration
 
-## How to Use ?
+## How to Use?
 
 ```javascript
 import Editor from "@hufe921/canvas-editor"
@@ -54,7 +54,7 @@ interface IEditorOption {
   historyMaxRecordCount?: number // History (undo redo) maximum number of records. default: 100
   printPixelRatio?: number // Print the pixel ratio (larger values are clearer, but larger sizes). default: 3
   maskMargin?: IMargin // Masking margins above the editor（for example: menu bar, bottom toolbar）。default: [0, 0, 0, 0]
-  letterClass? string[] // Alphabet class supported by typesetting. default: a-zA-Z. Built-in alternative alphabet class: LETTER_CLASS
+  letterClass?: string[] // Alphabet class supported by typesetting. default: a-zA-Z. Built-in alternative alphabet class: LETTER_CLASS
   contextMenuDisableKeys?: string[] // Disable context menu keys. default: []
   scrollContainerSelector?: string // scroll container selector. default: document
   wordBreak?: WordBreak // Word and punctuation breaks: No punctuation in the first line of the BREAK_WORD &The word is not split, and the line is folded after BREAK_ALL full according to the width of the character. default: BREAK_WORD
@@ -93,6 +93,7 @@ interface IHeader {
   top?: number // Size from the top of the page.default: 30
   maxHeightRadio?: MaxHeightRatio // Occupies the maximum height ratio of the page.default: HALF
   disabled?: boolean // Whether to disable
+  editable?: boolean // Disable the header content from being edited
 }
 ```
 
@@ -103,6 +104,7 @@ interface IFooter {
   bottom?: number // The size from the bottom of the page.default: 30
   maxHeightRadio?: MaxHeightRatio // Occupies the maximum height ratio of the page.default: HALF
   disabled?: boolean // Whether to disable
+  editable?: boolean // Disable the footer content from being edited
 }
 ```
 

docs/guide/option.md

@@ -93,6 +93,7 @@ interface IHeader {
   top?: number // 距离页面顶部大小。默认：30
   maxHeightRadio?: MaxHeightRatio // 占页面最大高度比。默认：HALF
   disabled?: boolean // 是否禁用
+  editable?: boolean // 禁止编辑标题内容
 }
 ```
 
@@ -103,6 +104,7 @@ interface IFooter {
   bottom?: number // 距离页面底部大小。默认：30
   maxHeightRadio?: MaxHeightRatio // 占页面最大高度比。默认：HALF
   disabled?: boolean // 是否禁用
+  editable?: boolean // 禁止编辑页脚内容
 }
 ```
 

src/editor/core/zone/Zone.ts

@@ -48,6 +48,13 @@ export class Zone {
   }
 
   public setZone(payload: EditorZone) {
+    const { header, footer } = this.options
+    if (
+      (!header.editable && payload === EditorZone.HEADER) ||
+      (!footer.editable && payload === EditorZone.FOOTER)
+    ) {
+      return
+    }
     if (this.currentZone === payload) return
     this.currentZone = payload
     this.draw.getRange().clearRange()

src/editor/dataset/constant/Footer.ts

@@ -4,5 +4,6 @@ import { MaxHeightRatio } from '../enum/Common'
 export const defaultFooterOption: Readonly<Required<IFooter>> = {
   bottom: 30,
   maxHeightRadio: MaxHeightRatio.HALF,
-  disabled: false
+  disabled: false,
+  editable: true
 }

src/editor/dataset/constant/Header.ts

@@ -4,5 +4,6 @@ import { MaxHeightRatio } from '../enum/Common'
 export const defaultHeaderOption: Readonly<Required<IHeader>> = {
   top: 30,
   maxHeightRadio: MaxHeightRatio.HALF,
-  disabled: false
+  disabled: false,
+  editable: true
 }

src/editor/interface/Footer.ts

@@ -4,4 +4,5 @@ export interface IFooter {
   bottom?: number
   maxHeightRadio?: MaxHeightRatio
   disabled?: boolean
+  editable?: boolean
 }

src/editor/interface/Header.ts

@@ -4,4 +4,5 @@ export interface IHeader {
   top?: number
   maxHeightRadio?: MaxHeightRatio
   disabled?: boolean
+  editable?: boolean
 }