Skip to content

Commit

Permalink
fix: fix issue with selection range
Browse files Browse the repository at this point in the history
  • Loading branch information
@neuqzxy
neuqzxy committed Dec 17, 2024
1 parent 51db3ae commit 17878c2
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 260 deletions.
36 changes: 36 additions & 0 deletions packages/vrender-core/src/graphic/richtext/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,42 @@ export function getStrByWithCanvas(
return index;
}

export function getWordStartEndIdx(string: string, index: number) {
let startIdx = index;
// 切分前后都是英文字母数字下划线，向前找到非英文字母处换行
while (
(regLetter.test(string[startIdx - 1]) && regLetter.test(string[startIdx])) ||
// 行首标点符号处理
regPunctuation.test(string[startIdx])
) {
startIdx--;
// 无法满足所有条件，放弃匹配，直接截断，避免陷入死循环
if (startIdx <= 0) {
break;
}
}

let endIdx = index;
// 切分前后都是英文字母数字下划线，向前找到非英文字母处换行
while (
(regLetter.test(string[endIdx + 1]) && regLetter.test(string[endIdx])) ||
// 行首标点符号处理
regPunctuation.test(string[endIdx])
) {
endIdx++;
// 无法满足所有条件，放弃匹配，直接截断，避免陷入死循环
if (endIdx >= string.length) {
break;
}
}
endIdx = Math.min(endIdx + 1, string.length);

return {
startIdx,
endIdx
};
}

/**
* 向前找到单词结尾处换行
* @param string
Expand Down
18 changes: 14 additions & 4 deletions packages/vrender-core/src/plugins/builtin-plugin/richtext-edit-plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ import type {
import { Animate, DefaultTicker, DefaultTimeline } from '../../animate';
import { EditModule, findConfigIndex } from './edit-module';
import { application } from '../../application';
import { testLetter, testLetter2 } from '../../graphic/richtext/utils';
import { getWordStartEndIdx } from '../../graphic/richtext/utils';
// import { testLetter, testLetter2 } from '../../graphic/richtext/utils';

type UpdateType = 'input' | 'change' | 'onfocus' | 'defocus' | 'selection' | 'dispatch';

Expand Down Expand Up @@ -270,6 +271,15 @@ export class RichTextEditPlugin implements IPlugin {
if (!cache) {
return;
}
// 对startIdx和endIdx约束
const { lines } = cache;
const totalCursorCount = lines.reduce((total, line) => total + line.paragraphs.length, 0) - 1;
if (startIdx > endIdx) {
[startIdx, endIdx] = [endIdx, startIdx];
}
startIdx = Math.min(Math.max(startIdx, -0.1), totalCursorCount + 0.1);
endIdx = Math.min(Math.max(endIdx, -0.1), totalCursorCount + 0.1);

this.curCursorIdx = endIdx;
this.selectionStartCursorIdx = startIdx;
const { x, y1, y2 } = this.computedCursorPosByCursorIdx(this.selectionStartCursorIdx, this.currRt);
Expand Down Expand Up @@ -587,9 +597,9 @@ export class RichTextEditPlugin implements IPlugin {
idx += line.paragraphs.length;
}

const startIdx = testLetter(str, columnIndex);
const endIndex = testLetter2(str, columnIndex);
this.selectionRange(idx + startIdx - 0.1, idx + endIndex - 0.1);
const { startIdx, endIdx } = getWordStartEndIdx(str, columnIndex);

this.selectionRange(idx + startIdx - 0.1, idx + endIdx - 0.1);
}
}

Expand Down
256 changes: 0 additions & 256 deletions packages/vrender/__tests__/browser/src/pages/richtext-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,262 +38,6 @@ export const page = () => {
// background: 'green',
// "textAlign": "center",
textConfig: [
{
text: '我',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
background: 'orange',
fill: '#0f51b5'
},
{
text: '们',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
background: 'orange',
fill: '#0f51b5'
},
{
text: '是',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
background: 'orange',
fill: '#0f51b5'
},
{
text: '无',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '缘',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: 'a',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '无',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '故',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '的',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '尘😁',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '埃\n',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '无',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '缘',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '无',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '故',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '的',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '游',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '走\n',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '黑',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '暗',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '只',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '需',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '要',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '张',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '开',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '一',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '张',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '缝',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '隙\n',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '就',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '能',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '挂',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '起',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '飓',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '[4]',
script: 'super',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: '风\n',
fontSize: 16,
lineHeight: 26,
textAlign: 'center',
fill: '#0f51b5'
},
{
text: 'and this is our world, \nthat we call life',
fontSize: 16,
Expand Down

0 comments on commit 17878c2

Please sign in to comment.