feat:add insert control menu

index.html

@@ -160,6 +160,15 @@
         <div class="menu-item__page-break">
           <i></i>
         </div>
+        <div class="menu-item__control">
+          <i></i>
+          <div class="options">
+            <ul>
+              <li data-control='text'>文本型</li>
+              <li data-control="select">列举型</li>
+            </ul>
+          </div>
+        </div>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">

src/assets/images/control.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M9.793 1.5H3a.5.5 0 00-.5.5v12a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V4.207L9.793 1.5z" stroke="#3D4757"/><g fill="#3D4757"><path d="M7 7h1v5H7z"/><path d="M5 7h5v1H5z"/></g><path fill="#3D4757" fill-rule="nonzero" d="M9 2h1v3H9z"/><path fill="#3D4757" fill-rule="nonzero" d="M9 4h3v1H9z"/></g></svg>

src/editor/core/command/CommandAdapt.ts

@@ -15,6 +15,7 @@ import { IWatermark } from '../../interface/Watermark'
 import { getUUID } from '../../utils'
 import { formatElementList } from '../../utils/element'
 import { printImageBase64 } from '../../utils/print'
+import { Control } from '../draw/control/Control'
 import { Draw } from '../draw/Draw'
 import { TableTool } from '../draw/particle/table/TableTool'
 import { CanvasEvent } from '../event/CanvasEvent'
@@ -34,6 +35,7 @@ export class CommandAdapt {
   private canvasEvent: CanvasEvent
   private tableTool: TableTool
   private options: Required<IEditorOption>
+  private control: Control
 
   constructor(draw: Draw) {
     this.draw = draw
@@ -43,6 +45,7 @@ export class CommandAdapt {
     this.canvasEvent = draw.getCanvasEvent()
     this.tableTool = draw.getTableTool()
     this.options = draw.getOptions()
+    this.control = draw.getControl()
   }
 
   public mode(payload: EditorMode) {
@@ -1230,9 +1233,13 @@ export class CommandAdapt {
   }
 
   public insertElementList(payload: IElement[]) {
+    if (!payload.length) return
     const isReadonly = this.draw.isReadonly()
     if (isReadonly) return
-    if (!payload.length) return
+    const activeControl = this.control.getActiveControl()
+    if (activeControl) return
+    const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside()
+    if (isPartRangeInControlOutside) return
     const { startIndex, endIndex } = this.range.getRange()
     if (!~startIndex && !~endIndex) return
     // 格式化element

src/main.ts

@@ -1,7 +1,7 @@
 import { data, options } from './mock'
 import './style.css'
 import prism from 'prismjs'
-import Editor, { EditorMode, ElementType, IElement } from './editor'
+import Editor, { ControlType, EditorMode, ElementType, IElement } from './editor'
 import { Dialog } from './components/dialog/Dialog'
 import { formatPrismToken } from './utils/prism'
 
@@ -402,6 +402,95 @@ window.onload = function () {
     })
   }
 
+  const controlDom = document.querySelector<HTMLDivElement>('.menu-item__control')!
+  const controlOptionDom = controlDom.querySelector<HTMLDivElement>('.options')!
+  controlDom.onclick = function () {
+    console.log('control')
+    controlOptionDom.classList.toggle('visible')
+  }
+  controlOptionDom.onmousedown = function (evt) {
+    const li = evt.target as HTMLLIElement
+    const type = <ControlType>li.dataset.control
+    switch (type) {
+      case ControlType.TEXT:
+        new Dialog({
+          title: '文本型控件',
+          data: [{
+            type: 'text',
+            label: '占位符',
+            name: 'placeholder',
+            placeholder: '请输入占位符'
+          }, {
+            type: 'text',
+            label: '默认值',
+            name: 'value',
+            placeholder: '请输入默认值'
+          }],
+          onConfirm: (payload) => {
+            const placeholder = payload.find(p => p.name === 'placeholder')?.value
+            if (!placeholder) return
+            const value = payload.find(p => p.name === 'value')?.value || ''
+            instance.command.executeInsertElementList([{
+              type: ElementType.CONTROL,
+              value: '',
+              control: {
+                type,
+                value: value
+                  ? [{
+                    value
+                  }]
+                  : null,
+                placeholder
+              }
+            }])
+          }
+        })
+        break
+      case ControlType.SELECT:
+        new Dialog({
+          title: '列举型控件',
+          data: [{
+            type: 'text',
+            label: '占位符',
+            name: 'placeholder',
+            placeholder: '请输入占位符'
+          }, {
+            type: 'text',
+            label: '默认值',
+            name: 'code',
+            placeholder: '请输入默认值'
+          }, {
+            type: 'textarea',
+            label: '值集',
+            name: 'valueSets',
+            height: 100,
+            placeholder: `请输入值集JSON，例：\n[{\n"value":"有",\n"code":"98175"\n}]`
+          }],
+          onConfirm: (payload) => {
+            const placeholder = payload.find(p => p.name === 'placeholder')?.value
+            if (!placeholder) return
+            const valueSets = payload.find(p => p.name === 'valueSets')?.value
+            if (!valueSets) return
+            const code = payload.find(p => p.name === 'code')?.value
+            instance.command.executeInsertElementList([{
+              type: ElementType.CONTROL,
+              value: '',
+              control: {
+                type,
+                code,
+                value: null,
+                placeholder,
+                valueSets: JSON.parse(valueSets)
+              }
+            }])
+          }
+        })
+        break
+      default:
+        break
+    }
+  }
+
   // 5. | 搜索&替换 | 打印 |
   const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')!
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!

src/style.css

@@ -430,6 +430,18 @@ ul {
   background-image: url('./assets/images/page-break.svg');
 }
 
+.menu-item__control {
+  position: relative;
+}
+
+.menu-item__control i {
+  background-image: url('./assets/images/control.svg');
+}
+
+.menu-item .menu-item__control .options {
+  width: 55px;
+}
+
 .menu-item__search {
   position: relative;
 }