lsadmin/canvas-editor_fex765
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:add select control

Browse Source
This commit is contained in:
黄云飞
2022-04-06 17:30:41 +08:00
parent 257204ad61
commit 526f924ff8
10 changed files with 453 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor/assets/css/control/select.css
+44
View File
@@ -0,0 +1,44 @@
.select-control-popup {
max-width: 160px;
min-width: 69px;
max-height: 225px;
position: absolute;
z-index: 1;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
box-sizing: border-box;
margin: 5px 0;
overflow-y: auto;
}
.select-control-popup ul {
list-style: none;
padding: 3px 0;
margin: 0;
box-sizing: border-box;
}
.select-control-popup ul li {
font-size: 13px;
padding: 0 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #666;
height: 36px;
line-height: 36px;
box-sizing: border-box;
cursor: pointer;
}
.select-control-popup ul li:hover {
background-color: #EEF2FD;
}
.select-control-popup ul li.active {
color: var(--COLOR-HOVER, #5175f4);
font-weight: 700;
}
src/editor/assets/css/index.css
+2
View File
@@ -1,3 +1,5 @@
@import './control/select.css';
.inputarea {
width: 0;
height: 12px;
src/editor/core/draw/control/Control.ts
+43 -88
View File
@@ -1,9 +1,10 @@
import { ControlComponent, ControlType } from '../../../dataset/enum/Control'
import { ElementType } from '../../../dataset/enum/Element'
import { IControlInitOption, IControlInstance, IControlOption } from '../../../interface/Control'
import { IElement } from '../../../interface/Element'
import { IElement, IElementPosition } from '../../../interface/Element'
import { RangeManager } from '../../range/RangeManager'
import { Draw } from '../Draw'
import { SelectControl } from './select/SelectControl'
import { TextControl } from './text/TextControl'
interface IMoveCursorResult {
@@ -40,14 +41,34 @@ export class Control {
return false
}
public getContainer(): HTMLDivElement {
return this.draw.getContainer()
}
public getElementList(): IElement[] {
return this.draw.getElementList()
}
public getPosition(): IElementPosition | null {
const positionList = this.draw.getPosition().getPositionList()
const { endIndex } = this.range.getRange()
return positionList[endIndex] || null
}
public getPreY(): number {
const height = this.draw.getHeight()
const pageGap = this.draw.getPageGap()
return this.draw.getPageNo() * (height + pageGap)
}
public getRange() {
return this.range.getRange()
}
public shrinkBoundary() {
this.range.shrinkBoundary()
}
public getActiveControl(): IControlInstance | null {
return this.activeControl
}
@@ -58,23 +79,42 @@ export class Control {
const element = elementList[range.startIndex]
// 判断控件是否已经激活
if (this.activeControl) {
// 列举控件唤醒下拉弹窗
if (this.activeControl instanceof SelectControl) {
this.activeControl.awake()
}
const controlElement = this.activeControl.getElement()
if (element.controlId === controlElement.controlId) return
}
// 销毁旧激活控件
this.destroyControl()
// 激活控件
if (element.control!.type === ControlType.TEXT) {
const control = element.control!
if (control.type === ControlType.TEXT) {
this.activeControl = new TextControl(element, this)
} else if (control.type === ControlType.SELECT) {
const selectControl = new SelectControl(element, this)
this.activeControl = selectControl
selectControl.awake()
}
}
public destroyControl() {
if (this.activeControl) {
if (this.activeControl instanceof SelectControl) {
this.activeControl.destroy()
}
this.activeControl = null
}
}
public repaintControl(curIndex: number) {
this.range.setRange(curIndex, curIndex)
this.draw.render({
curIndex
})
}
public moveCursor(position: IControlInitOption): IMoveCursorResult {
const { index, trIndex, tdIndex, tdValueIndex } = position
let elementList = this.draw.getOriginalElementList()
@@ -169,97 +209,12 @@ export class Control {
}
nextIndex++
}
if (!~leftIndex || !~rightIndex) return -1
if (!~leftIndex || !~rightIndex) return startIndex
// 删除元素
elementList.splice(leftIndex + 1, rightIndex - leftIndex)
return leftIndex
}
public shrinkBoundary() {
const elementList = this.getElementList()
const range = this.getRange()
const { startIndex, endIndex } = range
const startElement = elementList[startIndex]
const endElement = elementList[endIndex]
if (startIndex === endIndex) {
if (startElement.controlComponent === ControlComponent.PLACEHOLDER) {
// 找到第一个placeholder字符
let index = startIndex - 1
while (index > 0) {
const preElement = elementList[index]
if (
preElement.controlId !== startElement.controlId ||
preElement.controlComponent === ControlComponent.PREFIX
) {
console.log(index)
range.startIndex = index
range.endIndex = index
break
}
index--
}
}
} else {
// 首、尾为占位符时，收缩到最后一个前缀字符后
if (
startElement.controlComponent === ControlComponent.PLACEHOLDER ||
endElement.controlComponent === ControlComponent.PLACEHOLDER
) {
let index = endIndex - 1
while (index > 0) {
const preElement = elementList[index]
if (
preElement.controlId !== endElement.controlId
|| preElement.controlComponent === ControlComponent.PREFIX
) {
range.startIndex = index
range.endIndex = index
return
}
index--
}
}
// 向右查找到第一个Value
if (startElement.controlComponent === ControlComponent.PREFIX) {
let index = startIndex + 1
while (index < elementList.length) {
const nextElement = elementList[index]
if (
nextElement.controlId !== startElement.controlId
|| nextElement.controlComponent === ControlComponent.VALUE
) {
range.startIndex = index - 1
break
} else if (nextElement.controlComponent === ControlComponent.PLACEHOLDER) {
range.startIndex = index - 1
range.endIndex = index - 1
return
}
index++
}
}
// 向左查找到第一个Value
if (endElement.controlComponent !== ControlComponent.VALUE) {
let index = startIndex - 1
while (index > 0) {
const preElement = elementList[index]
if (
preElement.controlId !== startElement.controlId
|| preElement.controlComponent === ControlComponent.VALUE
) {
range.startIndex = index
break
} else if (preElement.controlComponent === ControlComponent.PLACEHOLDER) {
range.startIndex = index
range.endIndex = index
return
}
index--
}
}
}
}
public removePlaceholder(startIndex: number) {
const elementList = this.getElementList()
const startElement = elementList[startIndex]
src/editor/core/draw/control/select/SelectControl.ts
+252 -1
View File
@@ -1,3 +1,254 @@
export class SelectControl {
import { EDITOR_COMPONENT } from '../../../../dataset/constant/Editor'
import { ControlComponent } from '../../../../dataset/enum/Control'
import { EditorComponent } from '../../../../dataset/enum/Editor'
import { KeyMap } from '../../../../dataset/enum/Keymap'
import { IControlInstance } from '../../../../interface/Control'
import { IElement } from '../../../../interface/Element'
import { Control } from '../Control'
export class SelectControl implements IControlInstance {
private element: IElement
private control: Control
private isPopup: boolean
private selectDom: HTMLDivElement | null
constructor(element: IElement, control: Control) {
this.element = element
this.control = control
this.isPopup = false
this.selectDom = null
}
public getElement(): IElement {
return this.element
}
public getCode(): string | null {
return this.element.control?.code || null
}
public getValue(): IElement[] {
const elementList = this.control.getElementList()
const { startIndex } = this.control.getRange()
const startElement = elementList[startIndex]
const data: IElement[] = []
// 向左查找
let preIndex = startIndex
while (preIndex > 0) {
const preElement = elementList[preIndex]
if (
preElement.controlId !== startElement.controlId ||
preElement.controlComponent === ControlComponent.PREFIX
) {
break
}
if (preElement.controlComponent === ControlComponent.VALUE) {
data.unshift(preElement)
}
preIndex--
}
// 向右查找
let nextIndex = startIndex + 1
while (nextIndex < elementList.length) {
const nextElement = elementList[nextIndex]
if (
nextElement.controlId !== startElement.controlId ||
nextElement.controlComponent === ControlComponent.POSTFIX
) {
break
}
if (nextElement.controlComponent === ControlComponent.VALUE) {
data.push(nextElement)
}
nextIndex++
}
return data
}
public setValue(): number {
const range = this.control.getRange()
return range.endIndex
}
public keydown(evt: KeyboardEvent): number {
const elementList = this.control.getElementList()
const range = this.control.getRange()
// 收缩边界到Value内
this.control.shrinkBoundary()
const { startIndex, endIndex } = range
const startElement = elementList[startIndex]
const endElement = elementList[endIndex]
// backspace
if (evt.key === KeyMap.Backspace) {
// 清空选项
if (startIndex !== endIndex) {
return this.clearSelect()
} else {
if (
startElement.controlComponent === ControlComponent.PREFIX ||
endElement.controlComponent === ControlComponent.POSTFIX ||
startElement.controlComponent === ControlComponent.PLACEHOLDER
) {
// 前缀、后缀、占位符
return this.control.removeControl(startIndex)
} else {
// 清空选项
return this.clearSelect()
}
}
} else if (evt.key === KeyMap.Delete) {
// 移除选区元素
if (startIndex !== endIndex) {
// 清空选项
return this.clearSelect()
} else {
const endNextElement = elementList[endIndex + 1]
if (startElement.controlComponent === ControlComponent.PREFIX ||
endNextElement.controlComponent === ControlComponent.POSTFIX ||
startElement.controlComponent === ControlComponent.PLACEHOLDER
) {
// 前缀、后缀、占位符
return this.control.removeControl(startIndex)
} else {
// 清空选项
return this.clearSelect()
}
}
}
return endIndex
}
public cut(): number {
this.control.shrinkBoundary()
const { startIndex, endIndex } = this.control.getRange()
if (startIndex === endIndex) {
return startIndex
}
// 清空选项
return this.clearSelect()
}
public clearSelect(): number {
const elementList = this.control.getElementList()
const { startIndex } = this.control.getRange()
const startElement = elementList[startIndex]
let leftIndex = -1
let rightIndex = -1
// 向左查找
let preIndex = startIndex
while (preIndex > 0) {
const preElement = elementList[preIndex]
if (
preElement.controlId !== startElement.controlId ||
preElement.controlComponent === ControlComponent.PREFIX
) {
leftIndex = preIndex
break
}
preIndex--
}
// 向右查找
let nextIndex = startIndex + 1
while (nextIndex < elementList.length) {
const nextElement = elementList[nextIndex]
if (
nextElement.controlId !== startElement.controlId ||
nextElement.controlComponent === ControlComponent.POSTFIX
) {
rightIndex = nextIndex - 1
break
}
nextIndex++
}
if (!~leftIndex || !~rightIndex) return -1
// 删除元素
elementList.splice(leftIndex + 1, rightIndex - leftIndex)
// 增加占位符
this.control.addPlaceholder(preIndex)
this.element.control!.code = null
return preIndex
}
public setSelect(code: string) {
const control = this.element.control!
const valueSets = control.valueSets
if (!Array.isArray(valueSets) || !valueSets.length) return
// 转换code
const valueSet = valueSets.find(v => v.code === code)
if (!valueSet) return
// 清空选项
const startIndex = this.clearSelect()
this.control.removePlaceholder(startIndex)
// 插入
const elementList = this.control.getElementList()
const startElement = elementList[startIndex]
const start = startIndex + 1
const data = valueSet.value.split('')
for (let i = 0; i < data.length; i++) {
elementList.splice(start + i, 0, {
...startElement,
value: data[i],
controlComponent: ControlComponent.VALUE
})
}
// render
const newIndex = start + data.length - 1
this.control.repaintControl(newIndex)
// 设置状态
this.element.control!.code = code
this.destroy()
}
private _createSelectPopupDom() {
const control = this.element.control!
const valueSets = control.valueSets
if (!Array.isArray(valueSets) || !valueSets.length) return
const position = this.control.getPosition()
if (!position) return
// dom树：<div><ul><li>item</li></ul></div>
const selectPopupContainer = document.createElement('div')
selectPopupContainer.classList.add('select-control-popup')
selectPopupContainer.setAttribute(EDITOR_COMPONENT, EditorComponent.POPUP)
const ul = document.createElement('ul')
for (let v = 0; v < valueSets.length; v++) {
const valueSet = valueSets[v]
const li = document.createElement('li')
const code = this.getCode()
if (code === valueSet.code) {
li.classList.add('active')
}
li.onclick = () => {
this.setSelect(valueSet.code)
}
li.append(document.createTextNode(valueSet.value))
ul.append(li)
}
selectPopupContainer.append(ul)
// 定位
const { coordinate: { leftTop: [left, top] }, lineHeight } = position
const preY = this.control.getPreY()
selectPopupContainer.style.left = `${left}px`
selectPopupContainer.style.top = `${top + preY + lineHeight}px`
// 追加至container
const container = this.control.getContainer()
container.append(selectPopupContainer)
this.selectDom = selectPopupContainer
}
public awake() {
if (this.isPopup) return
const { startIndex } = this.control.getRange()
const elementList = this.control.getElementList()
if (elementList[startIndex + 1]?.controlId !== this.element.controlId) return
this._createSelectPopupDom()
this.isPopup = true
}
public destroy() {
if (!this.isPopup) return
this.selectDom?.remove()
this.isPopup = false
}
}
src/editor/core/draw/control/text/TextControl.ts
+1 -1
View File
@@ -146,7 +146,7 @@ export class TextControl implements IControlInstance {
}
}
}
return -1
return endIndex
}
public cut(): number {
src/editor/core/range/RangeManager.ts
+85
View File
@@ -1,4 +1,5 @@
import { ElementType } from '../..'
import { ControlComponent } from '../../dataset/enum/Control'
import { IEditorOption } from '../../interface/Editor'
import { IElement } from '../../interface/Element'
import { IRange } from '../../interface/Range'
@@ -137,6 +138,90 @@ export class RangeManager {
})
}
public shrinkBoundary() {
const elementList = this.draw.getElementList()
const range = this.getRange()
const { startIndex, endIndex } = range
const startElement = elementList[startIndex]
const endElement = elementList[endIndex]
if (startIndex === endIndex) {
if (startElement.controlComponent === ControlComponent.PLACEHOLDER) {
// 找到第一个placeholder字符
let index = startIndex - 1
while (index > 0) {
const preElement = elementList[index]
if (
preElement.controlId !== startElement.controlId ||
preElement.controlComponent === ControlComponent.PREFIX
) {
range.startIndex = index
range.endIndex = index
break
}
index--
}
}
} else {
// 首、尾为占位符时，收缩到最后一个前缀字符后
if (
startElement.controlComponent === ControlComponent.PLACEHOLDER ||
endElement.controlComponent === ControlComponent.PLACEHOLDER
) {
let index = endIndex - 1
while (index > 0) {
const preElement = elementList[index]
if (
preElement.controlId !== endElement.controlId
|| preElement.controlComponent === ControlComponent.PREFIX
) {
range.startIndex = index
range.endIndex = index
return
}
index--
}
}
// 向右查找到第一个Value
if (startElement.controlComponent === ControlComponent.PREFIX) {
let index = startIndex + 1
while (index < elementList.length) {
const nextElement = elementList[index]
if (
nextElement.controlId !== startElement.controlId
|| nextElement.controlComponent === ControlComponent.VALUE
) {
range.startIndex = index - 1
break
} else if (nextElement.controlComponent === ControlComponent.PLACEHOLDER) {
range.startIndex = index - 1
range.endIndex = index - 1
return
}
index++
}
}
// 向左查找到第一个Value
if (endElement.controlComponent !== ControlComponent.VALUE) {
let index = startIndex - 1
while (index > 0) {
const preElement = elementList[index]
if (
preElement.controlId !== startElement.controlId
|| preElement.controlComponent === ControlComponent.VALUE
) {
range.startIndex = index
break
} else if (preElement.controlComponent === ControlComponent.PLACEHOLDER) {
range.startIndex = index
range.endIndex = index
return
}
index--
}
}
}
}
public render(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number) {
ctx.save()
ctx.globalAlpha = this.options.rangeAlpha
src/editor/dataset/enum/Editor.ts
+2 -1
View File
@@ -3,7 +3,8 @@ export enum EditorComponent {
MENU = 'menu',
MAIN = 'main',
FOOTER = 'footer',
CONTEXTMENU = 'contextmenu'
CONTEXTMENU = 'contextmenu',
POPUP = 'popup'
}
export enum EditorContext {
src/editor/interface/Control.ts
+1
View File
@@ -7,6 +7,7 @@ export interface IValueSet {
}
export interface IControlSelect {
code: string | null;
valueSets: IValueSet[];
}
src/editor/utils/element.ts
+19 -5
View File
@@ -3,7 +3,7 @@ import { ElementType, IEditorOption, IElement } from '..'
import { ZERO } from '../dataset/constant/Common'
import { defaultControlOption } from '../dataset/constant/Control'
import { EDITOR_ELEMENT_ZIP_ATTR } from '../dataset/constant/Element'
import { ControlComponent } from '../dataset/enum/Control'
import { ControlComponent, ControlType } from '../dataset/enum/Control'
interface IFormatElementListOption {
isHandleFirstElement?: boolean;
@@ -71,7 +71,7 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme
}
i--
} else if (el.type === ElementType.CONTROL) {
const { prefix, postfix, value, placeholder } = el.control!
const { prefix, postfix, value, placeholder, code, type, valueSets } = el.control!
const controlId = getUUID()
// 移除父节点
elementList.splice(i, 1)
@@ -95,9 +95,23 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme
i++
}
// 值
if (value && value.length) {
for (let v = 0; v < value.length; v++) {
const element = value[v]
if (
(value && value.length) ||
(type === ControlType.SELECT && code && (!value || !value.length))
) {
let valueList: IElement[] = value || []
if (!value || !value.length) {
if (Array.isArray(valueSets) && valueSets.length) {
const valueSet = valueSets.find(v => v.code === code)
if (valueSet) {
valueList = [{
value: valueSet.value
}]
}
}
}
for (let v = 0; v < valueList.length; v++) {
const element = valueList[v]
const valueStrList = element.value.split('')
for (let e = 0; e < valueStrList.length; e++) {
const value = valueStrList[e]
src/mock.ts
+4
View File
@@ -91,6 +91,7 @@ elementList.splice(112, 0, {
control: {
type: ControlType.SELECT,
value: null,
code: null,
placeholder: '有无',
prefix: '{',
postfix: '}',
@@ -100,6 +101,9 @@ elementList.splice(112, 0, {
}, {
value: '无',
code: '98176'
}, {
value: '不详',
code: '98177'
}]
}
})