From 07332790c8a007d44b924956a392c050ad830e4b Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Sun, 17 Jul 2022 15:35:50 +0800 Subject: [PATCH] feat:add hyperlink contextmenu --- src/editor/core/command/Command.ts | 12 +++ src/editor/core/command/CommandAdapt.ts | 73 +++++++++++++++++++ .../core/contextmenu/menus/hyperlinkMenus.ts | 13 +--- 3 files changed, 87 insertions(+), 11 deletions(-) diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 1a48616..dec44f6 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -48,6 +48,8 @@ export class Command { private static cancelMergeTableCell: Function private static image: Function private static hyperlink: Function + private static deleteHyperlink: Function + private static cancelHyperlink: Function private static separator: Function private static pageBreak: Function private static addWatermark: Function @@ -107,6 +109,8 @@ export class Command { Command.cancelMergeTableCell = adapt.cancelMergeTableCell.bind(adapt) Command.image = adapt.image.bind(adapt) Command.hyperlink = adapt.hyperlink.bind(adapt) + Command.deleteHyperlink = adapt.deleteHyperlink.bind(adapt) + Command.cancelHyperlink = adapt.cancelHyperlink.bind(adapt) Command.separator = adapt.separator.bind(adapt) Command.pageBreak = adapt.pageBreak.bind(adapt) Command.addWatermark = adapt.addWatermark.bind(adapt) @@ -283,6 +287,14 @@ export class Command { return Command.hyperlink(payload) } + public executeDeleteHyperlink() { + return Command.deleteHyperlink() + } + + public executeCancelHyperlink() { + return Command.cancelHyperlink() + } + public executeImage(payload: IDrawImagePayload) { return Command.image(payload) } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 5c04925..deb0e09 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -1013,6 +1013,79 @@ export class CommandAdapt { this.draw.render({ curIndex }) } + public getHyperlinkRange(): [number, number] | null { + let leftIndex = -1 + let rightIndex = -1 + const { startIndex, endIndex } = this.range.getRange() + if (!~startIndex && !~endIndex) return null + const elementList = this.draw.getElementList() + const startElement = elementList[startIndex] + if (startElement.type !== ElementType.HYPERLINK) return null + // 向左查找 + let preIndex = startIndex + while (preIndex > 0) { + const preElement = elementList[preIndex] + if (preElement.hyperlinkId !== startElement.hyperlinkId) { + leftIndex = preIndex + break + } + preIndex-- + } + // 向右查找 + let nextIndex = startIndex + 1 + while (nextIndex < elementList.length) { + const nextElement = elementList[nextIndex] + if (nextElement.hyperlinkId !== startElement.hyperlinkId) { + rightIndex = nextIndex - 1 + break + } + nextIndex++ + } + // 控件在最后 + if (nextIndex === elementList.length) { + rightIndex = nextIndex - 1 + } + if (!~leftIndex || !~rightIndex) return null + return [leftIndex, rightIndex] + } + + public deleteHyperlink() { + // 获取超链接索引 + const hyperRange = this.getHyperlinkRange() + if (!hyperRange) return + const elementList = this.draw.getElementList() + const [leftIndex, rightIndex] = hyperRange + // 删除元素 + elementList.splice(leftIndex + 1, rightIndex - leftIndex) + // 重置画布 + this.range.setRange(leftIndex, leftIndex) + this.draw.render({ + curIndex: leftIndex + }) + } + + public cancelHyperlink() { + // 获取超链接索引 + const hyperRange = this.getHyperlinkRange() + if (!hyperRange) return + const elementList = this.draw.getElementList() + const [leftIndex, rightIndex] = hyperRange + // 删除属性 + for (let i = leftIndex; i <= rightIndex; i++) { + const element = elementList[i] + delete element.type + delete element.url + delete element.hyperlinkId + delete element.underline + } + // 重置画布 + const { endIndex } = this.range.getRange() + this.draw.render({ + curIndex: endIndex, + isComputeRowList: false + }) + } + public separator(payload: number[]) { const isReadonly = this.draw.isReadonly() if (isReadonly) return diff --git a/src/editor/core/contextmenu/menus/hyperlinkMenus.ts b/src/editor/core/contextmenu/menus/hyperlinkMenus.ts index fdfd53c..f459ead 100644 --- a/src/editor/core/contextmenu/menus/hyperlinkMenus.ts +++ b/src/editor/core/contextmenu/menus/hyperlinkMenus.ts @@ -9,7 +9,7 @@ export const hyperlinkMenus: IRegisterContextMenu[] = [ return payload.startElement?.type === ElementType.HYPERLINK }, callback: (command: Command) => { - console.log('command: ', command) + command.executeDeleteHyperlink() } }, { @@ -18,16 +18,7 @@ export const hyperlinkMenus: IRegisterContextMenu[] = [ return payload.startElement?.type === ElementType.HYPERLINK }, callback: (command: Command) => { - console.log('command: ', command) - } - }, - { - name: '打开链接', - when: (payload) => { - return payload.startElement?.type === ElementType.HYPERLINK - }, - callback: (command: Command) => { - console.log('command: ', command) + command.executeCancelHyperlink() } } ] \ No newline at end of file