From f9b27372e2b323d7070bcfdcc4de6efd654d05f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= <huangyunfeihufe@hotmail.com>
Date: Thu, 14 Apr 2022 17:03:05 +0800
Subject: [PATCH] feat:add checkbox menu

---
 index.html                             |  3 +++
 src/assets/images/checkbox.svg         |  1 +
 src/editor/core/event/CanvasEvent.ts   |  2 +-
 src/editor/core/position/Position.ts   |  4 +++-
 src/editor/dataset/constant/Element.ts |  3 ++-
 src/main.ts                            | 12 +++++++++++-
 src/style.css                          |  4 ++++
 7 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/images/checkbox.svg

diff --git a/index.html b/index.html
index 01d078a..68a38c4 100644
--- a/index.html
+++ b/index.html
@@ -169,6 +169,9 @@
             </ul>
           </div>
         </div>
+        <div class="menu-item__checkbox">
+          <i></i>
+        </div>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">
diff --git a/src/assets/images/checkbox.svg b/src/assets/images/checkbox.svg
new file mode 100644
index 0000000..d522091
--- /dev/null
+++ b/src/assets/images/checkbox.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 16 16" xml:space="preserve"><style>.st0{fill:#3d4757}</style><g id="_x30_1-文字_x2F_01开始_x2F_任务列表-16px"><path id="合并形状" class="st0" d="M10.1 2H2v11h11V8.7l1-1V13c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V2c0-.6.4-1 1-1h9.1l-1 1z"/><path id="路径" class="st0" d="M7.7 8.5l5.7-5.8.9.8-6.1 5.9-.5.5-3.9-3.4.8-.7z"/></g></svg>
\ No newline at end of file
diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts
index 30c511e..13b672d 100644
--- a/src/editor/core/event/CanvasEvent.ts
+++ b/src/editor/core/event/CanvasEvent.ts
@@ -223,7 +223,7 @@ export class CanvasEvent {
     const isDirectHitImage = !!(isDirectHit && isImage)
     const isDirectHitCheckbox = !!(isDirectHit && isCheckbox)
     if (~index) {
-      this.range.setRange(index, index)
+      this.range.setRange(curIndex, curIndex)
       // 复选框
       const isSetCheckbox = isDirectHitCheckbox && !isReadonly
       if (isSetCheckbox) {
diff --git a/src/editor/core/position/Position.ts b/src/editor/core/position/Position.ts
index b0fb663..8fd02b5 100644
--- a/src/editor/core/position/Position.ts
+++ b/src/editor/core/position/Position.ts
@@ -94,9 +94,11 @@ export class Position {
               })
               if (~tablePosition.index) {
                 const { index: tdValueIndex } = tablePosition
+                const tdValueElement = td.value[tdValueIndex]
                 return {
                   index,
-                  isControl: td.value[tdValueIndex].type === ElementType.CONTROL,
+                  isCheckbox: tdValueElement.type === ElementType.CHECKBOX,
+                  isControl: tdValueElement.type === ElementType.CONTROL,
                   isImage: tablePosition.isImage,
                   isDirectHit: tablePosition.isDirectHit,
                   isTable: true,
diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts
index 3edd78f..0bafd61 100644
--- a/src/editor/dataset/constant/Element.ts
+++ b/src/editor/dataset/constant/Element.ts
@@ -46,7 +46,8 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
   'url',
   'colgroup',
   'valueList',
-  'control'
+  'control',
+  'checkbox'
 ]
 
 export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
diff --git a/src/main.ts b/src/main.ts
index a13c38f..6e28da9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -492,6 +492,15 @@ window.onload = function () {
     }
   }
 
+  const checkboxDom = document.querySelector<HTMLDivElement>('.menu-item__checkbox')!
+  checkboxDom.onclick = function () {
+    console.log('checkbox')
+    instance.command.executeInsertElementList([{
+      type: ElementType.CHECKBOX,
+      value: ''
+    }])
+  }
+
   // 5. | 搜索&替换 | 打印 |
   const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')!
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!
@@ -679,7 +688,8 @@ window.onload = function () {
       'separator',
       'codeblock',
       'page-break',
-      'control'
+      'control',
+      'checkbox'
     ]
     // 菜单操作权限
     disableMenusInControlContext.forEach(menu => {
diff --git a/src/style.css b/src/style.css
index 161cdf7..a268742 100644
--- a/src/style.css
+++ b/src/style.css
@@ -439,6 +439,10 @@ ul {
   background-image: url('./assets/images/control.svg');
 }
 
+.menu-item__checkbox i {
+  background-image: url('./assets/images/checkbox.svg');
+}
+
 .menu-item .menu-item__control .options {
   width: 55px;
 }