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

feat: add control disabled rule

Browse Source
This commit is contained in:
Hufe921
2023-11-28 21:37:28 +08:00
parent 8acce15e76
commit 1455a2afb2
11 changed files with 180 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/en/guide/schema.md
+1
View File
@@ -82,6 +82,7 @@ interface IElement {
underline?: boolean;
extension?: unknown;
deletable?: boolean;
disabled?: boolean;
code: string | null;
min?: number;
max?: number;
docs/guide/schema.md
+1
View File
@@ -82,6 +82,7 @@ interface IElement {
underline?: boolean;
extension?: unknown;
deletable?: boolean;
disabled?: boolean;
code: string | null;
min?: number;
max?: number;
src/editor/core/command/CommandAdapt.ts
+51 -30
View File
@@ -242,8 +242,6 @@ export class CommandAdapt {
}
public painter(options: IPainterOption) {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const selection = this.range.getSelection()
if (!selection) return
const painterStyle: IElementStyle = {}
@@ -260,12 +258,16 @@ export class CommandAdapt {
}
public applyPainterStyle() {
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
this.canvasEvent.applyPainterStyle()
}
public format() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (!selection) return
selection.forEach(el => {
@@ -280,8 +282,9 @@ export class CommandAdapt {
}
public font(payload: string) {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (!selection) return
selection.forEach(el => {
@@ -293,8 +296,9 @@ export class CommandAdapt {
public size(payload: number) {
const { minSize, maxSize, defaultSize } = this.options
if (payload < minSize || payload > maxSize) return
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getTextLikeSelectionElementList()
if (!selection || !selection.length) return
let isExistUpdate = false
@@ -314,8 +318,9 @@ export class CommandAdapt {
}
public sizeAdd() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getTextLikeSelectionElementList()
if (!selection || !selection.length) return
const { defaultSize, maxSize } = this.options
@@ -338,8 +343,9 @@ export class CommandAdapt {
}
public sizeMinus() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getTextLikeSelectionElementList()
if (!selection || !selection.length) return
const { defaultSize, minSize } = this.options
@@ -362,8 +368,9 @@ export class CommandAdapt {
}
public bold() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (!selection) return
const noBoldIndex = selection.findIndex(s => !s.bold)
@@ -374,8 +381,9 @@ export class CommandAdapt {
}
public italic() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (!selection) return
const noItalicIndex = selection.findIndex(s => !s.italic)
@@ -386,8 +394,9 @@ export class CommandAdapt {
}
public underline() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (!selection) return
const noUnderlineIndex = selection.findIndex(s => !s.underline)
@@ -401,8 +410,9 @@ export class CommandAdapt {
}
public strikeout() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (!selection) return
const noStrikeoutIndex = selection.findIndex(s => !s.strikeout)
@@ -416,8 +426,9 @@ export class CommandAdapt {
}
public superscript() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (!selection) return
const superscriptIndex = selection.findIndex(
@@ -445,8 +456,9 @@ export class CommandAdapt {
}
public subscript() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (!selection) return
const subscriptIndex = selection.findIndex(
@@ -474,8 +486,9 @@ export class CommandAdapt {
}
public color(payload: string) {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (!selection) return
selection.forEach(el => {
@@ -488,8 +501,9 @@ export class CommandAdapt {
}
public highlight(payload: string) {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (!selection) return
selection.forEach(el => {
@@ -1447,6 +1461,8 @@ export class CommandAdapt {
}
public deleteHyperlink() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
// 获取超链接索引
const hyperRange = this.getHyperlinkRange()
if (!hyperRange) return
@@ -1468,6 +1484,8 @@ export class CommandAdapt {
}
public cancelHyperlink() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
// 获取超链接索引
const hyperRange = this.getHyperlinkRange()
if (!hyperRange) return
@@ -1491,6 +1509,8 @@ export class CommandAdapt {
}
public editHyperlink(payload: string) {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
// 获取超链接索引
const hyperRange = this.getHyperlinkRange()
if (!hyperRange) return
@@ -1595,8 +1615,9 @@ export class CommandAdapt {
}
public image(payload: IDrawImagePayload) {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const isDisabled =
this.draw.isReadonly() || this.control.isDisabledControl()
if (isDisabled) return
const activeControl = this.control.getActiveControl()
if (activeControl) return
const { startIndex, endIndex } = this.range.getRange()
src/editor/core/draw/Draw.ts
+3 -1
View File
@@ -560,7 +560,9 @@ export class Draw {
// 判断是否在控件内
const activeControl = this.control.getActiveControl()
if (activeControl && !this.control.isRangInPostfix()) {
curIndex = activeControl.setValue(payload)
curIndex = activeControl.setValue(payload, undefined, {
isIgnoreDisabledRule: true
})
} else {
const elementList = this.getElementList()
const isCollapsed = startIndex === endIndex
src/editor/core/draw/control/Control.ts
+21 -16
View File
@@ -6,6 +6,7 @@ import {
IControlInitOption,
IControlInstance,
IControlOption,
IControlRuleOption,
IGetControlValueOption,
IGetControlValueResult,
ISetControlExtensionOption,
@@ -122,6 +123,10 @@ export class Control {
return false
}
public isDisabledControl(): boolean {
return !!this.activeControl?.getElement().control?.disabled
}
public getContainer(): HTMLDivElement {
return this.draw.getContainer()
}
@@ -226,12 +231,19 @@ export class Control {
}
}
public repaintControl(curIndex: number) {
public repaintControl(curIndex?: number) {
if (curIndex === undefined) {
this.range.clearRange()
this.draw.render({
isSetCursor: false
})
} else {
this.range.setRange(curIndex, curIndex)
this.draw.render({
curIndex
})
}
}
public moveCursor(position: IControlInitOption): IMoveCursorResult {
const { index, trIndex, tdIndex, tdValueIndex } = position
@@ -528,6 +540,9 @@ export class Control {
range: fakeRange,
elementList
}
const controlRule: IControlRuleOption = {
isIgnoreDisabledRule: true
}
if (type === ControlType.TEXT) {
const formatValue = [{ value }]
formatElementList(formatValue, {
@@ -536,31 +551,21 @@ export class Control {
})
const text = new TextControl(element, this)
if (value) {
text.setValue(formatValue, controlContext)
text.setValue(formatValue, controlContext, controlRule)
} else {
text.clearValue(controlContext)
text.clearValue(controlContext, controlRule)
}
} else if (type === ControlType.SELECT) {
const select = new SelectControl(element, this)
if (value) {
select.setSelect(value, controlContext)
select.setSelect(value, controlContext, controlRule)
} else {
select.clearSelect(controlContext)
select.clearSelect(controlContext, controlRule)
}
} else if (type === ControlType.CHECKBOX) {
const checkbox = new CheckboxControl(element, this)
const checkboxElementList = elementList.slice(
fakeRange.startIndex + 1,
fakeRange.endIndex + 1
)
const codes = value?.split(',') || []
for (const checkElement of checkboxElementList) {
if (checkElement.controlComponent === ControlComponent.CHECKBOX) {
const checkboxItem = checkElement.checkbox!
checkboxItem.value = codes.includes(checkboxItem.code!)
}
}
checkbox.setSelect(controlContext)
checkbox.setSelect(codes, controlContext, controlRule)
}
// 修改后控件结束索引
let newEndIndex = i
src/editor/core/draw/control/checkbox/CheckboxControl.ts
+20 -12
View File
@@ -2,7 +2,8 @@ import { ControlComponent } from '../../../../dataset/enum/Control'
import { KeyMap } from '../../../../dataset/enum/KeyMap'
import {
IControlContext,
IControlInstance
IControlInstance,
IControlRuleOption
} from '../../../../interface/Control'
import { IElement } from '../../../../interface/Element'
import { Control } from '../Control'
@@ -66,12 +67,19 @@ export class CheckboxControl implements IControlInstance {
return -1
}
public setSelect(context: IControlContext = {}) {
public setSelect(
codes: string[],
context: IControlContext = {},
options: IControlRuleOption = {}
) {
// 校验是否可以设置
if (!options.isIgnoreDisabledRule && this.control.isDisabledControl()) {
return
}
const { control } = this.element
const elementList = context.elementList || this.control.getElementList()
const { startIndex } = context.range || this.control.getRange()
const startElement = elementList[startIndex]
const data: string[] = []
// 向左查找
let preIndex = startIndex
while (preIndex > 0) {
@@ -83,10 +91,8 @@ export class CheckboxControl implements IControlInstance {
break
}
if (preElement.controlComponent === ControlComponent.CHECKBOX) {
const checkbox = preElement.checkbox
if (checkbox && checkbox.value && checkbox.code) {
data.unshift(checkbox.code)
}
const checkbox = preElement.checkbox!
checkbox.value = codes.includes(checkbox.code!)
}
preIndex--
}
@@ -101,17 +107,19 @@ export class CheckboxControl implements IControlInstance {
break
}
if (nextElement.controlComponent === ControlComponent.CHECKBOX) {
const checkbox = nextElement.checkbox
if (checkbox && checkbox.value && checkbox.code) {
data.push(checkbox.code)
}
const checkbox = nextElement.checkbox!
checkbox.value = codes.includes(checkbox.code!)
}
nextIndex++
}
control!.code = data.join(',')
control!.code = codes.join(',')
this.control.repaintControl()
}
public keydown(evt: KeyboardEvent): number | null {
if (this.control.isDisabledControl()) {
return null
}
const range = this.control.getRange()
// 收缩边界到Value内
this.control.shrinkBoundary()
src/editor/core/draw/control/select/SelectControl.ts
+27 -4
View File
@@ -8,7 +8,8 @@ import { EditorComponent } from '../../../../dataset/enum/Editor'
import { KeyMap } from '../../../../dataset/enum/KeyMap'
import {
IControlContext,
IControlInstance
IControlInstance,
IControlRuleOption
} from '../../../../interface/Control'
import { IElement } from '../../../../interface/Element'
import { omitObject, pickObject, splitText } from '../../../../utils'
@@ -79,6 +80,9 @@ export class SelectControl implements IControlInstance {
}
public keydown(evt: KeyboardEvent): number | null {
if (this.control.isDisabledControl()) {
return null
}
const elementList = this.control.getElementList()
const range = this.control.getRange()
// 收缩边界到Value内
@@ -129,6 +133,9 @@ export class SelectControl implements IControlInstance {
}
public cut(): number {
if (this.control.isDisabledControl()) {
return -1
}
this.control.shrinkBoundary()
const { startIndex, endIndex } = this.control.getRange()
if (startIndex === endIndex) {
@@ -138,7 +145,14 @@ export class SelectControl implements IControlInstance {
return this.clearSelect()
}
public clearSelect(context: IControlContext = {}): number {
public clearSelect(
context: IControlContext = {},
options: IControlRuleOption = {}
): number {
// 校验是否可以设置
if (!options.isIgnoreDisabledRule && this.control.isDisabledControl()) {
return -1
}
const elementList = context.elementList || this.control.getElementList()
const { startIndex } = context.range || this.control.getRange()
const startElement = elementList[startIndex]
@@ -180,7 +194,15 @@ export class SelectControl implements IControlInstance {
return preIndex
}
public setSelect(code: string, context: IControlContext = {}) {
public setSelect(
code: string,
context: IControlContext = {},
options: IControlRuleOption = {}
) {
// 校验是否可以设置
if (!options.isIgnoreDisabledRule && this.control.isDisabledControl()) {
return
}
const control = this.element.control!
const valueSets = control.valueSets
if (!Array.isArray(valueSets) || !valueSets.length) return
@@ -195,6 +217,7 @@ export class SelectControl implements IControlInstance {
)
// 清空选项
const prefixIndex = this.clearSelect(context)
if (!~prefixIndex) return
this.control.removePlaceholder(prefixIndex, context)
// 属性赋值元素-默认为前缀属性
const propertyElement = omitObject(
@@ -266,7 +289,7 @@ export class SelectControl implements IControlInstance {
}
public awake() {
if (this.isPopup) return
if (this.isPopup || this.control.isDisabledControl()) return
const { startIndex } = this.control.getRange()
const elementList = this.control.getElementList()
if (elementList[startIndex + 1]?.controlId !== this.element.controlId) {
src/editor/core/draw/control/text/TextControl.ts
+25 -3
View File
@@ -3,7 +3,8 @@ import { ControlComponent } from '../../../../dataset/enum/Control'
import { KeyMap } from '../../../../dataset/enum/KeyMap'
import {
IControlContext,
IControlInstance
IControlInstance,
IControlRuleOption
} from '../../../../interface/Control'
import { IElement } from '../../../../interface/Element'
import { omitObject, pickObject } from '../../../../utils'
@@ -61,7 +62,15 @@ export class TextControl implements IControlInstance {
return data
}
public setValue(data: IElement[], context: IControlContext = {}): number {
public setValue(
data: IElement[],
context: IControlContext = {},
options: IControlRuleOption = {}
): number {
// 校验是否可以设置
if (!options.isIgnoreDisabledRule && this.control.isDisabledControl()) {
return -1
}
const elementList = context.elementList || this.control.getElementList()
const range = context.range || this.control.getRange()
// 收缩边界到Value内
@@ -97,7 +106,14 @@ export class TextControl implements IControlInstance {
return start + data.length - 1
}
public clearValue(context: IControlContext = {}): number {
public clearValue(
context: IControlContext = {},
options: IControlRuleOption = {}
): number {
// 校验是否可以设置
if (!options.isIgnoreDisabledRule && this.control.isDisabledControl()) {
return -1
}
const elementList = context.elementList || this.control.getElementList()
const range = context.range || this.control.getRange()
const { startIndex, endIndex } = range
@@ -112,6 +128,9 @@ export class TextControl implements IControlInstance {
}
public keydown(evt: KeyboardEvent): number | null {
if (this.control.isDisabledControl()) {
return null
}
const elementList = this.control.getElementList()
const range = this.control.getRange()
// 收缩边界到Value内
@@ -190,6 +209,9 @@ export class TextControl implements IControlInstance {
}
public cut(): number {
if (this.control.isDisabledControl()) {
return -1
}
this.control.shrinkBoundary()
const { startIndex, endIndex } = this.control.getRange()
if (startIndex === endIndex) {
src/editor/core/event/handlers/input.ts
+1 -2
View File
@@ -27,7 +27,6 @@ export function input(data: string, host: CanvasEvent) {
const cursor = draw.getCursor()
cursor.clearAgentDomValue()
}
const activeControl = control.getActiveControl()
const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType
const text = data.replaceAll(`\n`, ZERO)
const rangeManager = draw.getRange()
@@ -65,7 +64,7 @@ export function input(data: string, host: CanvasEvent) {
})
// 控件-移除placeholder
let curIndex: number
if (activeControl && !control.isRangInPostfix()) {
if (control.getActiveControl() && !control.isRangInPostfix()) {
curIndex = control.setValue(inputData)
} else {
const start = startIndex + 1
src/editor/core/event/handlers/mousedown.ts
+14 -12
View File
@@ -67,26 +67,28 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
// 复选框
const isSetCheckbox = isDirectHitCheckbox && !isReadonly
if (isSetCheckbox) {
const { checkbox } = curElement
if (checkbox) {
checkbox.value = !checkbox.value
const { checkbox, control } = curElement
const codes = control?.code?.split(',') || []
if (checkbox?.value) {
const codeIndex = codes.findIndex(c => c === checkbox.code)
codes.splice(codeIndex, 1)
} else {
curElement.checkbox = {
value: true
if (checkbox?.code) {
codes.push(checkbox.code)
}
}
const control = draw.getControl()
const activeControl = control.getActiveControl()
const activeControl = draw.getControl().getActiveControl()
if (activeControl instanceof CheckboxControl) {
activeControl.setSelect()
}
activeControl.setSelect(codes)
}
} else {
draw.render({
curIndex,
isSubmitHistory: isSetCheckbox,
isSetCursor: !isDirectHitImage && !isDirectHitCheckbox,
isCompute: false
isCompute: false,
isSubmitHistory: false,
isSetCursor: !isDirectHitImage && !isDirectHitCheckbox
})
}
// 首字需定位到行首，非上一行最后一个字后
if (hitLineStartIndex) {
host.getDraw().getCursor().drawCursor({
src/editor/interface/Control.ts
+10 -1
View File
@@ -23,6 +23,7 @@ export interface IControlCheckbox {
export interface IControlRule {
deletable?: boolean
disabled?: boolean
}
export interface IControlBasic {
@@ -66,7 +67,11 @@ export interface IControlInstance {
getValue(): IElement[]
setValue(data: IElement[]): number
setValue(
data: IElement[],
context?: IControlContext,
options?: IControlRuleOption
): number
keydown(evt: KeyboardEvent): number | null
@@ -78,6 +83,10 @@ export interface IControlContext {
elementList?: IElement[]
}
export interface IControlRuleOption {
isIgnoreDisabledRule?: boolean // 忽略禁用校验规则
}
export interface IGetControlValueOption {
conceptId: string
}