@visactor/vrender-core 0.21.1-alpha.1 → 0.21.2-vstory.1

package/es/plugins/builtin-plugin/richtext-edit-plugin-old.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugins/builtin-plugin/richtext-edit-plugin-old.ts"],"names":[],"mappings":"","file":"richtext-edit-plugin-old.js","sourcesContent":["// import type { IPointLike } from '@visactor/vutils';\n// import { isObject, isString, max, merge } from '@visactor/vutils';\n// import { Generator } from '../../common/generator';\n// import { createGroup, createLine, createRect } from '../../graphic';\n// import type {\n//   IGroup,\n//   ILine,\n//   IPlugin,\n//   IPluginService,\n//   IRect,\n//   IRichText,\n//   IRichTextCharacter,\n//   IRichTextFrame,\n//   IRichTextIcon,\n//   IRichTextLine,\n//   IRichTextParagraph,\n//   IRichTextParagraphCharacter,\n//   ITicker,\n//   ITimeline\n// } from '../../interface';\n// import { EditModule, findCursorIndexIgnoreLinebreak } from './edit-module';\n// import { Animate, DefaultTicker, DefaultTimeline } from '../../animate';\n\n// type UpdateType = 'input' | 'change' | 'onfocus' | 'defocus' | 'selection' | 'dispatch';\n\n// class Selection {\n//   cacheSelectionStartCursorIdx: number;\n//   cacheCurCursorIdx: number;\n//   selectionStartCursorIdx: number;\n//   curCursorIdx: number;\n//   rt: IRichText;\n\n//   constructor(\n//     cacheSelectionStartCursorIdx: number,\n//     cacheCurCursorIdx: number,\n//     selectionStartCursorIdx: number,\n//     curCursorIdx: number,\n//     rt: IRichText\n//   ) {\n//     this.curCursorIdx = curCursorIdx;\n//     this.selectionStartCursorIdx = selectionStartCursorIdx;\n//     this.cacheCurCursorIdx = cacheCurCursorIdx;\n//     this.cacheSelectionStartCursorIdx = cacheSelectionStartCursorIdx;\n//     this.rt = rt;\n//   }\n\n//   isEmpty(): boolean {\n//     return this.selectionStartCursorIdx === this.curCursorIdx;\n//   }\n\n//   hasFormat(key: string): boolean {\n//     return this.getFormat(key) != null;\n//   }\n\n//   /**\n//    * 获取第idx中key的值\n//    * @param key\n//    * @param idx cursor左侧字符的值，如果idx为-1则认为是特殊情况，为右侧字符的值\n//    */\n//   _getFormat(key: string, idx: number) {\n//     if (!this.rt) {\n//       return null;\n//     }\n//     const config = this.rt.attribute.textConfig as any;\n//     if (idx < 0) {\n//       idx = 0;\n//     }\n//     if (idx >= config.length) {\n//       return null;\n//     }\n//     return config[idx][key] ?? (this.rt.attribute as any)[key];\n//   }\n//   getFormat(key: string): any {\n//     return this.getAllFormat(key)[0];\n//   }\n\n//   getAllFormat(key: string): any {\n//     const valSet = new Set();\n//     let minCursorIdx = Math.min(this.selectionStartCursorIdx, this.curCursorIdx);\n//     let maxCursorIdx = Math.max(this.selectionStartCursorIdx, this.curCursorIdx);\n//     if (minCursorIdx === maxCursorIdx) {\n//       return [this._getFormat(key, minCursorIdx)];\n//     }\n//     minCursorIdx++;\n//     maxCursorIdx++;\n//     const maxConfigIdx = this.rt.attribute.textConfig.length - 1;\n//     if (minCursorIdx > maxConfigIdx) {\n//       minCursorIdx = maxConfigIdx;\n//     }\n//     if (maxCursorIdx > maxConfigIdx) {\n//       maxCursorIdx = maxConfigIdx;\n//     }\n//     for (let i = minCursorIdx; i < maxCursorIdx; i++) {\n//       const val = this._getFormat(key, i);\n//       val && valSet.add(val);\n//     }\n//     return Array.from(valSet.values());\n//   }\n// }\n\n// export const FORMAT_TEXT_COMMAND = 'FORMAT_TEXT_COMMAND';\n// export const FORMAT_ELEMENT_COMMAND = 'FORMAT_ELEMENT_COMMAND';\n// export class RichTextEditPlugin implements IPlugin {\n//   name: 'RichTextEditPlugin' = 'RichTextEditPlugin';\n//   activeEvent: 'onRegister' = 'onRegister';\n//   pluginService: IPluginService;\n//   _uid: number = Generator.GenAutoIncrementId();\n//   key: string = this.name + this._uid;\n//   editing: boolean = false;\n//   editLine: ILine;\n//   editBg: IGroup;\n//   pointerDown: boolean = false;\n//   // 用于selection中保存上一次click时候的位置\n//   lastPoint?: IPointLike;\n//   editModule: EditModule;\n//   currRt: IRichText;\n\n//   // 当前的cursor信息\n//   // 0.1为第一个字符右侧, -0.1为第一个字符左侧\n//   // 1.1为第二个字符右侧，0.9为第二个字符左侧\n//   curCursorIdx: number;\n//   selectionStartCursorIdx: number;\n\n//   commandCbs: Map<string, Array<(payload: any, p: RichTextEditPlugin) => void>>;\n//   updateCbs: Array<(type: UpdateType, p: RichTextEditPlugin) => void>;\n\n//   ticker: ITicker;\n//   timeline: ITimeline;\n\n//   // 富文本有align或者baseline的时候，需要对光标做偏移\n//   protected declare deltaX: number;\n//   protected declare deltaY: number;\n\n//   constructor() {\n//     this.commandCbs = new Map();\n//     this.commandCbs.set(FORMAT_TEXT_COMMAND, [this.formatTextCommandCb]);\n//     this.updateCbs = [];\n//     this.timeline = new DefaultTimeline();\n//     this.ticker = new DefaultTicker([this.timeline]);\n//     this.deltaX = 0;\n//     this.deltaY = 0;\n//   }\n\n//   static CreateSelection(rt: IRichText) {\n//     if (!rt) {\n//       return null;\n//     }\n//     const { textConfig = [] } = rt.attribute;\n//     return new Selection(\n//       -1,\n//       textConfig.length - 1,\n//       findCursorIndexIgnoreLinebreak(textConfig, -1),\n//       findCursorIndexIgnoreLinebreak(textConfig, textConfig.length - 1),\n//       rt\n//     );\n//   }\n\n//   /**\n//    * 获取当前选择的区间范围\n//    * @param defaultAll 如果force为true，又没有选择，则认为选择了所有然后进行匹配，如果为false，则认为什么都没有选择，返回null\n//    * @returns\n//    */\n//   getSelection(defaultAll: boolean = false) {\n//     if (!this.currRt) {\n//       return null;\n//     }\n//     if (\n//       this.selectionStartCursorIdx != null &&\n//       this.curCursorIdx != null\n//       // this.selectionStartCursorIdx !== this.curCursorIdx &&\n//     ) {\n//       return new Selection(\n//         this.selectionStartCursorIdx,\n//         this.curCursorIdx,\n//         findCursorIndexIgnoreLinebreak(this.currRt.attribute.textConfig, this.selectionStartCursorIdx),\n//         findCursorIndexIgnoreLinebreak(this.currRt.attribute.textConfig, this.curCursorIdx),\n//         this.currRt\n//       );\n//     } else if (defaultAll) {\n//       return RichTextEditPlugin.CreateSelection(this.currRt);\n//     }\n//     return null;\n//   }\n\n//   /* command */\n//   formatTextCommandCb(payload: string, p: RichTextEditPlugin) {\n//     const rt = p.currRt;\n//     if (!rt) {\n//       return;\n//     }\n//     const selectionData = p.getSelection();\n//     if (!selectionData) {\n//       return;\n//     }\n//     const { selectionStartCursorIdx, curCursorIdx } = selectionData;\n//     const minCursorIdx = Math.min(selectionStartCursorIdx, curCursorIdx);\n//     const maxCursorIdx = Math.max(selectionStartCursorIdx, curCursorIdx);\n//     const config = rt.attribute.textConfig.slice(minCursorIdx + 1, maxCursorIdx + 1);\n//     if (payload === 'bold') {\n//       config.forEach((item: IRichTextParagraphCharacter) => (item.fontWeight = 'bold'));\n//     } else if (payload === 'italic') {\n//       config.forEach((item: IRichTextParagraphCharacter) => (item.fontStyle = 'italic'));\n//     } else if (payload === 'underline') {\n//       config.forEach((item: IRichTextParagraphCharacter) => (item.underline = true));\n//     } else if (payload === 'lineThrough') {\n//       config.forEach((item: IRichTextParagraphCharacter) => (item.lineThrough = true));\n//     } else if (isObject(payload)) {\n//       config.forEach((item: IRichTextParagraphCharacter) => merge(item, payload));\n//     }\n//     rt.setAttributes(rt.attribute);\n//   }\n\n//   dispatchCommand(command: string, payload: any) {\n//     const cbs = this.commandCbs.get(command);\n//     cbs && cbs.forEach(cb => cb(payload, this));\n//     this.updateCbs.forEach(cb => cb('dispatch', this));\n//   }\n\n//   registerCommand(command: string, cb: (payload: any, p: RichTextEditPlugin) => void) {\n//     const cbs: Array<(payload: any, p: RichTextEditPlugin) => void> = this.commandCbs.get(command) || [];\n//     cbs.push(cb);\n//   }\n\n//   registerUpdateListener(cb: (type: UpdateType, p: RichTextEditPlugin) => void) {\n//     const cbs = this.updateCbs || [];\n//     cbs.push(cb);\n//   }\n\n//   activate(context: IPluginService): void {\n//     this.pluginService = context;\n//     this.editModule = new EditModule();\n//     // context.stage.on('click', this.handleClick);\n//     context.stage.on('pointermove', this.handleMove);\n//     context.stage.on('pointerdown', this.handlePointerDown);\n//     context.stage.on('pointerup', this.handlePointerUp);\n//     context.stage.on('pointerleave', this.handlePointerUp);\n\n//     this.editModule.onInput(this.handleInput);\n//     this.editModule.onChange(this.handleChange);\n//   }\n\n//   handleInput = (text: string, isComposing: boolean, cursorIdx: number, rt: IRichText, orient: 'left' | 'right') => {\n//     // 修改cursor的位置，但并不同步，因为这可能是临时的\n//     const p = this.getPointByColumnIdx(cursorIdx, rt, orient);\n//     this.hideSelection();\n//     this.setCursor(p.x, p.y1, p.y2);\n//     this.updateCbs.forEach(cb => cb('input', this));\n//   };\n//   handleChange = (text: string, isComposing: boolean, cursorIdx: number, rt: IRichText, orient: 'left' | 'right') => {\n//     // 修改cursor的位置，并同步到editModule\n//     const p = this.getPointByColumnIdx(cursorIdx, rt, orient);\n//     this.curCursorIdx = cursorIdx;\n//     this.selectionStartCursorIdx = cursorIdx;\n//     this.setCursorAndTextArea(p.x, p.y1, p.y2, rt);\n//     this.hideSelection();\n//     this.updateCbs.forEach(cb => cb('change', this));\n//   };\n\n//   handleMove = (e: PointerEvent) => {\n//     if (!this.isRichtext(e)) {\n//       return;\n//     }\n//     this.currRt = e.target as IRichText;\n//     this.handleEnter(e);\n//     (e.target as any).once('pointerleave', this.handleLeave);\n\n//     this.showSelection(e);\n//   };\n\n//   showSelection(e: PointerEvent) {\n//     const cache = (e.target as IRichText).getFrameCache();\n//     if (!(cache && this.editBg)) {\n//       return;\n//     }\n//     if (this.pointerDown) {\n//       let p0 = this.lastPoint;\n//       // 计算p1在字符中的位置\n//       let p1 = this.getEventPosition(e);\n//       let line1Info = this.getLineByPoint(cache, p1);\n//       if (!line1Info) {\n//         return;\n//       }\n//       const column1 = this.getColumnByLinePoint(line1Info, p1);\n//       const y1 = line1Info.top;\n//       const y2 = line1Info.top + line1Info.height;\n//       let x = column1.left + column1.width;\n//       let cursorIndex = this.getColumnIndex(cache, column1);\n//       if (p1.x < column1.left + column1.width / 2) {\n//         x = column1.left;\n//         cursorIndex -= 1;\n//       }\n//       p1.x = x;\n//       p1.y = (y1 + y2) / 2;\n//       let line0Info = this.getLineByPoint(cache, p0);\n//       if (p0.y > p1.y || (p0.y === p1.y && p0.x > p1.x)) {\n//         [p0, p1] = [p1, p0];\n//         [line1Info, line0Info] = [line0Info, line1Info];\n//       }\n\n//       this.editBg.removeAllChild();\n//       if (line0Info === line1Info) {\n//         // const column0 = this.getColumnByLinePoint(line0Info, p0);\n//         this.editBg.setAttributes({\n//           x: p0.x,\n//           y: line0Info.top,\n//           width: p1.x - p0.x,\n//           height: line0Info.height,\n//           fill: '#336df4',\n//           fillOpacity: 0.2\n//         });\n//       } else {\n//         this.editBg.setAttributes({ x: 0, y: line0Info.top, width: 0, height: 0 });\n//         const startIdx = cache.lines.findIndex(item => item === line0Info);\n//         const endIdx = cache.lines.findIndex(item => item === line1Info);\n//         let y = 0;\n//         for (let i = startIdx; i <= endIdx; i++) {\n//           const line = cache.lines[i];\n//           if (i === startIdx) {\n//             const p = line.paragraphs[line.paragraphs.length - 1];\n//             this.editBg.add(\n//               createRect({\n//                 x: p0.x,\n//                 y,\n//                 width: p.left + p.width - p0.x,\n//                 height: line.height,\n//                 fill: '#336df4',\n//                 fillOpacity: 0.2\n//               })\n//             );\n//           } else if (i === endIdx) {\n//             const p = line.paragraphs[0];\n//             this.editBg.add(\n//               createRect({\n//                 x: p.left,\n//                 y,\n//                 width: p1.x - p.left,\n//                 height: line.height,\n//                 fill: '#336df4',\n//                 fillOpacity: 0.2\n//               })\n//             );\n//           } else {\n//             const p0 = line.paragraphs[0];\n//             const p1 = line.paragraphs[line.paragraphs.length - 1];\n//             this.editBg.add(\n//               createRect({\n//                 x: p0.left,\n//                 y,\n//                 width: p1.left + p1.width - p0.left,\n//                 height: line.height,\n//                 fill: '#336df4',\n//                 fillOpacity: 0.2\n//               })\n//             );\n//           }\n//           y += line.height;\n//         }\n//       }\n\n//       this.curCursorIdx = cursorIndex;\n//       this.setCursorAndTextArea(x, y1 + 2, y2 - 2, e.target as IRichText);\n\n//       this.applyUpdate();\n//       this.updateCbs.forEach(cb => cb('selection', this));\n//     }\n//   }\n\n//   hideSelection() {\n//     if (this.editBg) {\n//       this.editBg.removeAllChild();\n//       this.editBg.setAttributes({ fill: 'transparent' });\n//     }\n//   }\n\n//   handlePointerDown = (e: PointerEvent) => {\n//     if (this.editing) {\n//       this.onFocus(e);\n//     } else {\n//       this.deFocus(e);\n//     }\n//     this.applyUpdate();\n//     this.pointerDown = true;\n//     this.updateCbs.forEach(cb => cb(this.editing ? 'onfocus' : 'defocus', this));\n//     console.log(this.selectionStartCursorIdx);\n//   };\n//   handlePointerUp = (e: PointerEvent) => {\n//     this.pointerDown = false;\n//   };\n\n//   forceFocus(e: PointerEvent) {\n//     this.handleEnter(e);\n//     this.handlePointerDown(e);\n//     this.handlePointerUp(e);\n//   }\n\n//   // 鼠标进入\n//   handleEnter = (e: PointerEvent) => {\n//     this.editing = true;\n//     this.pluginService.stage.setCursor('text');\n//   };\n\n//   // 鼠标离开\n//   handleLeave = (e: PointerEvent) => {\n//     this.editing = false;\n//     this.pluginService.stage.setCursor('default');\n//   };\n\n//   isRichtext(e: PointerEvent) {\n//     return !!(e.target && (e.target as any).type === 'richtext' && (e.target as any).attribute.editable);\n//   }\n\n//   protected getEventPosition(e: PointerEvent): IPointLike {\n//     const p = this.pluginService.stage.eventPointTransform(e);\n\n//     const p1 = { x: 0, y: 0 };\n//     (e.target as IRichText).globalTransMatrix.transformPoint(p, p1);\n//     p1.x -= this.deltaX;\n//     p1.y -= this.deltaY;\n//     return p1;\n//   }\n\n//   protected getLineByPoint(cache: IRichTextFrame, p1: IPointLike): IRichTextLine {\n//     let lineInfo = cache.lines[0];\n//     for (let i = 0; i < cache.lines.length; i++) {\n//       if (lineInfo.top <= p1.y && lineInfo.top + lineInfo.height >= p1.y) {\n//         break;\n//       }\n//       lineInfo = cache.lines[i + 1];\n//     }\n\n//     return lineInfo;\n//   }\n//   protected getColumnByLinePoint(lineInfo: IRichTextLine, p1: IPointLike): IRichTextParagraph | IRichTextIcon {\n//     let columnInfo = lineInfo.paragraphs[0];\n//     for (let i = 0; i < lineInfo.paragraphs.length; i++) {\n//       if (columnInfo.left <= p1.x && columnInfo.left + columnInfo.width >= p1.x) {\n//         break;\n//       }\n//       columnInfo = lineInfo.paragraphs[i];\n//     }\n\n//     return columnInfo;\n//   }\n\n//   onFocus(e: PointerEvent) {\n//     this.deFocus(e);\n//     this.currRt = e.target as IRichText;\n\n//     // 添加shadowGraphic\n//     const target = e.target as IRichText;\n//     RichTextEditPlugin.tryUpdateRichtext(target);\n//     const shadowRoot = target.attachShadow();\n//     const cache = target.getFrameCache();\n//     if (!cache) {\n//       return;\n//     }\n\n//     this.deltaX = 0;\n//     this.deltaY = 0;\n//     const height = cache.actualHeight;\n//     const width = cache.lines.reduce((w, item) => Math.max(w, item.actualWidth), 0);\n//     if (cache.globalAlign === 'center') {\n//       this.deltaX = -width / 2;\n//     } else if (cache.globalAlign === 'right') {\n//       this.deltaX = -width;\n//     }\n//     if (cache.globalBaseline === 'middle') {\n//       this.deltaY = -height / 2;\n//     } else if (cache.globalBaseline === 'bottom') {\n//       this.deltaY = -height;\n//     }\n\n//     shadowRoot.setAttributes({ shadowRootIdx: -1, x: this.deltaX, y: this.deltaY });\n//     if (!this.editLine) {\n//       const line = createLine({ x: 0, y: 0, lineWidth: 1, stroke: 'black' });\n//       // 不使用stage的Ticker，避免影响其他的动画以及受到其他动画影响\n//       const animate = line.animate();\n//       animate.setTimeline(this.timeline);\n//       animate.to({ opacity: 1 }, 10, 'linear').wait(700).to({ opacity: 0 }, 10, 'linear').wait(700).loop(Infinity);\n//       this.editLine = line;\n//       this.ticker.start(true);\n\n//       const g = createGroup({ x: 0, y: 0, width: 0, height: 0 });\n//       this.editBg = g;\n//       shadowRoot.add(this.editLine);\n//       shadowRoot.add(this.editBg);\n//     }\n\n//     const p1 = this.getEventPosition(e);\n\n//     const lineInfo = this.getLineByPoint(cache, p1);\n\n//     if (lineInfo) {\n//       const columnInfo = this.getColumnByLinePoint(lineInfo, p1);\n//       if (!columnInfo) {\n//         return;\n//       }\n\n//       let y1 = lineInfo.top;\n//       let y2 = lineInfo.top + lineInfo.height;\n//       let x = columnInfo.left + columnInfo.width;\n//       y1 += 2;\n//       y2 -= 2;\n//       let cursorIndex = this.getColumnIndex(cache, columnInfo);\n//       if (p1.x < columnInfo.left + columnInfo.width / 2) {\n//         x = columnInfo.left;\n//         cursorIndex -= 1;\n//       }\n\n//       this.lastPoint = { x, y: (y1 + y2) / 2 };\n\n//       this.curCursorIdx = cursorIndex;\n//       this.selectionStartCursorIdx = cursorIndex;\n//       this.setCursorAndTextArea(x, y1, y2, target);\n//     }\n//   }\n\n//   protected getPointByColumnIdx(idx: number, rt: IRichText, orient: 'left' | 'right') {\n//     const cache = rt.getFrameCache();\n//     const column = this.getColumnByIndex(cache, idx);\n//     const height = rt.attribute.fontSize ?? (rt.attribute.textConfig?.[0] as any)?.fontSize;\n//     if (!column) {\n//       return {\n//         x: 0,\n//         y1: 0,\n//         y2: height\n//       };\n//     }\n//     const { lineInfo, columnInfo } = column;\n//     let y1 = lineInfo.top;\n//     let y2 = lineInfo.top + lineInfo.height;\n//     const x = columnInfo.left + (orient === 'left' ? 0 : columnInfo.width);\n//     y1 += 2;\n//     y2 -= 2;\n\n//     return { x, y1, y2 };\n//   }\n\n//   protected getColumnIndex(cache: IRichTextFrame, cInfo: IRichTextParagraph | IRichTextIcon) {\n//     // TODO 认为都是单个字符拆分的\n//     let inputIndex = -1;\n//     for (let i = 0; i < cache.lines.length; i++) {\n//       const line = cache.lines[i];\n//       for (let j = 0; j < line.paragraphs.length; j++) {\n//         inputIndex++;\n//         if (cInfo === line.paragraphs[j]) {\n//           return inputIndex;\n//         }\n//       }\n//     }\n//     return -1;\n//   }\n//   protected getColumnByIndex(\n//     cache: IRichTextFrame,\n//     index: number\n//   ): {\n//     lineInfo: IRichTextLine;\n//     columnInfo: IRichTextParagraph | IRichTextIcon;\n//   } | null {\n//     // TODO 认为都是单个字符拆分的\n//     let inputIndex = -1;\n//     for (let i = 0; i < cache.lines.length; i++) {\n//       const lineInfo = cache.lines[i];\n//       for (let j = 0; j < lineInfo.paragraphs.length; j++) {\n//         const columnInfo = lineInfo.paragraphs[j];\n//         inputIndex++;\n//         if (inputIndex === index) {\n//           return {\n//             lineInfo,\n//             columnInfo\n//           };\n//         }\n//       }\n//     }\n//     return null;\n//   }\n\n//   protected setCursorAndTextArea(x: number, y1: number, y2: number, rt: IRichText) {\n//     this.editLine.setAttributes({\n//       points: [\n//         { x, y: y1 },\n//         { x, y: y2 }\n//       ]\n//     });\n//     const out = { x: 0, y: 0 };\n//     rt.globalTransMatrix.getInverse().transformPoint({ x, y: y1 }, out);\n//     // TODO 考虑stage变换\n//     const { left, top } = this.pluginService.stage.window.getBoundingClientRect();\n//     out.x += left;\n//     out.y += top;\n\n//     this.editModule.moveTo(out.x, out.y, rt, this.curCursorIdx, this.selectionStartCursorIdx);\n//   }\n//   protected setCursor(x: number, y1: number, y2: number) {\n//     this.editLine.setAttributes({\n//       points: [\n//         { x, y: y1 },\n//         { x, y: y2 }\n//       ]\n//     });\n//   }\n\n//   applyUpdate() {\n//     this.pluginService.stage.renderNextFrame();\n//   }\n//   deFocus(e: PointerEvent) {\n//     const target = this.currRt as IRichText;\n//     if (!target) {\n//       return;\n//     }\n//     target.detachShadow();\n//     this.currRt = null;\n//     if (this.editLine) {\n//       this.editLine.parent.removeChild(this.editLine);\n//       this.editLine.release();\n//       this.editLine = null;\n\n//       this.editBg.parent.removeChild(this.editBg);\n//       this.editBg.release();\n//       this.editBg = null;\n//     }\n//   }\n\n//   static splitText(text: string) {\n//     // 😁这种emoji长度算两个，所以得处理一下\n//     return Array.from(text);\n//   }\n\n//   static tryUpdateRichtext(richtext: IRichText) {\n//     const cache = richtext.getFrameCache();\n//     if (\n//       !cache.lines.every(line =>\n//         line.paragraphs.every(\n//           item => !(item.text && isString(item.text) && RichTextEditPlugin.splitText(item.text).length > 1)\n//         )\n//       )\n//     ) {\n//       const tc: IRichTextCharacter[] = [];\n//       richtext.attribute.textConfig.forEach((item: IRichTextParagraphCharacter) => {\n//         const textList = RichTextEditPlugin.splitText(item.text.toString());\n//         if (isString(item.text) && textList.length > 1) {\n//           // 拆分\n//           for (let i = 0; i < textList.length; i++) {\n//             const t = textList[i];\n//             tc.push({ ...item, text: t });\n//           }\n//         } else {\n//           tc.push(item);\n//         }\n//       });\n//       richtext.setAttributes({ textConfig: tc });\n//       richtext.doUpdateFrameCache(tc);\n//     }\n//   }\n\n//   onSelect() {\n//     return;\n//   }\n\n//   deactivate(context: IPluginService): void {\n//     // context.stage.off('pointerdown', this.handleClick);\n//     context.stage.off('pointermove', this.handleMove);\n//     context.stage.off('pointerdown', this.handlePointerDown);\n//     context.stage.off('pointerup', this.handlePointerUp);\n//     context.stage.off('pointerleave', this.handlePointerUp);\n//   }\n\n//   release() {\n//     this.editModule.release();\n//   }\n// }\n"]}

package/es/plugins/builtin-plugin/richtext-edit-plugin.d.ts

@@ -1,15 +1,15 @@
 import type { IPointLike } from '@visactor/vutils';
-import type { IGroup, ILine, IPlugin, IPluginService, IRichText, IRichTextFrame, IRichTextIcon, IRichTextLine, IRichTextParagraph } from '../../interface';
+import type { IGroup, ILine, IPlugin, IPluginService, IRichText, IRichTextFrame, IRichTextIcon, IRichTextLine, IRichTextParagraph, ITicker, ITimeline } from '../../interface';
 import { EditModule } from './edit-module';
 type UpdateType = 'input' | 'change' | 'onfocus' | 'defocus' | 'selection' | 'dispatch';
 declare class Selection {
-    cacheSelectionStartCursorIdx: number;
-    cacheCurCursorIdx: number;
     selectionStartCursorIdx: number;
     curCursorIdx: number;
     rt: IRichText;
-    constructor(cacheSelectionStartCursorIdx: number, cacheCurCursorIdx: number, selectionStartCursorIdx: number, curCursorIdx: number, rt: IRichText);
+    constructor(selectionStartCursorIdx: number, curCursorIdx: number, rt: IRichText);
+    isEmpty(): boolean;
     hasFormat(key: string): boolean;
+    _getFormat(key: string, cursorIdx: number): any;
     getFormat(key: string): any;
     getAllFormat(key: string): any;
 }
@@ -22,55 +22,74 @@ export declare class RichTextEditPlugin implements IPlugin {
     _uid: number;
     key: string;
     editing: boolean;
+    pointerDown: boolean;
     editLine: ILine;
     editBg: IGroup;
-    pointerDown: boolean;
-    lastPoint?: IPointLike;
-    editModule: EditModule;
+    ticker: ITicker;
+    timeline: ITimeline;
     currRt: IRichText;
     curCursorIdx: number;
     selectionStartCursorIdx: number;
-    commandCbs: Map<string, Array<(payload: any, p: RichTextEditPlugin) => void>>;
-    updateCbs: Array<(type: UpdateType, p: RichTextEditPlugin) => void>;
+    startCursorPos?: IPointLike;
+    editModule: EditModule;
+    protected commandCbs: Map<string, Array<(payload: any, p: RichTextEditPlugin) => void>>;
+    protected updateCbs: Array<(type: UpdateType, p: RichTextEditPlugin) => void>;
+    protected deltaX: number;
+    protected deltaY: number;
+    static splitText(text: string): string[];
+    static tryUpdateRichtext(richtext: IRichText): void;
+    static CreateSelection(rt: IRichText): Selection;
     constructor();
-    getSelection(): Selection;
     formatTextCommandCb(payload: string, p: RichTextEditPlugin): void;
     dispatchCommand(command: string, payload: any): void;
     registerCommand(command: string, cb: (payload: any, p: RichTextEditPlugin) => void): void;
     registerUpdateListener(cb: (type: UpdateType, p: RichTextEditPlugin) => void): void;
     activate(context: IPluginService): void;
-    handleInput: (text: string, isComposing: boolean, cursorIdx: number, rt: IRichText, orient: 'left' | 'right') => void;
-    handleChange: (text: string, isComposing: boolean, cursorIdx: number, rt: IRichText, orient: 'left' | 'right') => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleInput: (text: string, isComposing: boolean, cursorIdx: number, rt: IRichText) => void;
+    handleChange: (text: string, isComposing: boolean, cursorIdx: number, rt: IRichText) => void;
+    deactivate(context: IPluginService): void;
     handleMove: (e: PointerEvent) => void;
-    showSelection(e: PointerEvent): void;
-    hideSelection(): void;
-    handlePointerDown: (e: PointerEvent) => void;
-    handlePointerUp: (e: PointerEvent) => void;
     handleEnter: (e: PointerEvent) => void;
     handleLeave: (e: PointerEvent) => void;
-    isRichtext(e: PointerEvent): boolean;
-    protected getEventPosition(e: PointerEvent): IPointLike;
-    protected getLineByPoint(cache: IRichTextFrame, p1: IPointLike): IRichTextLine;
-    protected getColumnByLinePoint(lineInfo: IRichTextLine, p1: IPointLike): IRichTextParagraph | IRichTextIcon;
+    handlePointerDown: (e: PointerEvent) => void;
+    handlePointerUp: (e: PointerEvent) => void;
     onFocus(e: PointerEvent): void;
-    protected getPointByColumnIdx(idx: number, rt: IRichText, orient: 'left' | 'right'): {
+    protected deFocus(e: PointerEvent): void;
+    protected addAnimateToLine(line: ILine): void;
+    tryShowSelection(e: PointerEvent): void;
+    hideSelection(): void;
+    protected getLineByPoint(cache: IRichTextFrame, p1: IPointLike): IRichTextLine;
+    protected getColumnAndIndexByLinePoint(lineInfo: IRichTextLine, p1: IPointLike): {
+        columnInfo: IRichTextParagraph | IRichTextIcon;
+        delta: number;
+    };
+    protected getColumnIndex(cache: IRichTextFrame, cInfo: IRichTextParagraph | IRichTextIcon): number;
+    protected isRichtext(e: PointerEvent): boolean;
+    protected triggerRender(): void;
+    protected computeGlobalDelta(cache: IRichTextFrame): void;
+    protected getEventPosition(e: PointerEvent): IPointLike;
+    protected setCursorAndTextArea(x: number, y1: number, y2: number, rt: IRichText): void;
+    protected computedCursorPosByEvent(e: PointerEvent, cache: IRichTextFrame): {
+        x: any;
+        y1: number;
+        y2: number;
+        cursorIndex: number;
+    };
+    protected computedCursorPosByCursorIdx(cursorIdx: number, rt: IRichText): {
+        x: number;
+        y1: number;
+        y2: any;
+    } | {
         x: any;
         y1: number;
         y2: number;
     };
-    protected getColumnIndex(cache: IRichTextFrame, cInfo: IRichTextParagraph | IRichTextIcon): number;
     protected getColumnByIndex(cache: IRichTextFrame, index: number): {
         lineInfo: IRichTextLine;
         columnInfo: IRichTextParagraph | IRichTextIcon;
     } | null;
-    protected setCursorAndTextArea(x: number, y1: number, y2: number, rt: IRichText): void;
-    protected setCursor(x: number, y1: number, y2: number): void;
-    applyUpdate(): void;
-    deFocus(e: PointerEvent): void;
-    splitText(text: string): string[];
-    tryUpdateRichtext(richtext: IRichText): void;
-    onSelect(): void;
-    deactivate(context: IPluginService): void;
     release(): void;
+    getSelection(defaultAll?: boolean): Selection;
 }
 export {};