From 4d04ef6bebab17b3a6d5de91c8f5db612ce798c8 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Thu, 7 Apr 2022 21:16:24 +0800 Subject: [PATCH] feat:add insert control menu --- index.html | 9 +++ src/assets/images/control.svg | 1 + src/editor/core/command/CommandAdapt.ts | 9 ++- src/main.ts | 91 ++++++++++++++++++++++++- src/style.css | 12 ++++ 5 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 src/assets/images/control.svg diff --git a/index.html b/index.html index fddd499..01d078a 100644 --- a/index.html +++ b/index.html @@ -160,6 +160,15 @@
+
+ +
+
    +
  • 文本型
    • +
  • 列举型
    • +
+
+
diff --git a/src/assets/images/control.svg b/src/assets/images/control.svg new file mode 100644 index 0000000..3fde9fb --- /dev/null +++ b/src/assets/images/control.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index ccfa1e4..bfcaf77 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/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 + 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 diff --git a/src/main.ts b/src/main.ts index f9be69a..1a2927f 100644 --- a/src/main.ts +++ b/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('.menu-item__control')! + const controlOptionDom = controlDom.querySelector('.options')! + controlDom.onclick = function () { + console.log('control') + controlOptionDom.classList.toggle('visible') + } + controlOptionDom.onmousedown = function (evt) { + const li = evt.target as HTMLLIElement + const type = 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('.menu-item__search__collapse')! const searchInputDom = document.querySelector('.menu-item__search__collapse__search input')! diff --git a/src/style.css b/src/style.css index 1d2308e..91463c0 100644 --- a/src/style.css +++ b/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; }