mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-04-24 16:13:24 +08:00
947 lines
27 KiB
TypeScript
947 lines
27 KiB
TypeScript
import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
|
||
import {
|
||
computed,
|
||
defineComponent,
|
||
onMounted,
|
||
onUnmounted,
|
||
onUpdated,
|
||
ref,
|
||
shallowReactive,
|
||
shallowRef,
|
||
SlotsType,
|
||
VNode,
|
||
watch
|
||
} from 'vue';
|
||
import { Transform } from '../transform';
|
||
import { isSetEqual } from '../utils';
|
||
import { logger } from '@/core/common/logger';
|
||
import { Sprite } from '../sprite';
|
||
import { ContainerProps, onTick } from '../renderer';
|
||
import { isNil } from 'lodash-es';
|
||
import { SetupComponentOptions } from './types';
|
||
import EventEmitter from 'eventemitter3';
|
||
import { Text } from '../preset';
|
||
|
||
export const enum WordBreak {
|
||
/** 不换行 */
|
||
None,
|
||
/** 仅空格和连字符等可换行，CJK 字符可任意换行，默认值 */
|
||
Space,
|
||
/** 所有字符都可以换行 */
|
||
All
|
||
}
|
||
|
||
export const enum TextAlign {
|
||
Left,
|
||
Center,
|
||
End
|
||
}
|
||
|
||
let testCanvas: MotaOffscreenCanvas2D;
|
||
Mota.require('var', 'loading').once('coreInit', () => {
|
||
testCanvas = new MotaOffscreenCanvas2D(false);
|
||
testCanvas.withGameScale(false);
|
||
testCanvas.setHD(false);
|
||
testCanvas.size(32, 32);
|
||
testCanvas.freeze();
|
||
});
|
||
|
||
interface TextContentRenderData {
|
||
text: string;
|
||
x?: number;
|
||
y?: number;
|
||
width?: number;
|
||
height?: number;
|
||
/** 字体 */
|
||
font?: string;
|
||
/** 是否持续上一次的文本，开启后，如果修改后的文本以修改前的文本为开头，那么会继续播放而不会从头播放 */
|
||
keepLast?: boolean;
|
||
/** 打字机时间间隔，即两个字出现之间相隔多长时间 */
|
||
interval?: number;
|
||
/** 行高 */
|
||
lineHeight?: number;
|
||
/** 分词规则 */
|
||
wordBreak?: WordBreak;
|
||
/** 文字对齐方式 */
|
||
textAlign?: TextAlign;
|
||
/** 行首忽略字符，即不会出现在行首的字符 */
|
||
ignoreLineStart?: Iterable<string>;
|
||
/** 行尾忽略字符，即不会出现在行尾的字符 */
|
||
ignoreLineEnd?: Iterable<string>;
|
||
/** 会被分词规则识别的分词字符 */
|
||
breakChars?: Iterable<string>;
|
||
/** 填充样式 */
|
||
fillStyle?: CanvasStyle;
|
||
/** 描边样式 */
|
||
strokeStyle?: CanvasStyle;
|
||
/** 线宽 */
|
||
strokeWidth?: number;
|
||
/** 是否填充 */
|
||
fill?: boolean;
|
||
/** 是否描边 */
|
||
stroke?: boolean;
|
||
/** 是否无视打字机，强制全部显示 */
|
||
showAll?: boolean;
|
||
}
|
||
|
||
export interface TextContentProps
|
||
extends ContainerProps,
|
||
TextContentRenderData {}
|
||
|
||
export type TextContentEmits = {
|
||
typeEnd: () => void;
|
||
typeStart: () => void;
|
||
};
|
||
|
||
interface TextContentData {
|
||
text: string;
|
||
width: number;
|
||
font: string;
|
||
/** 分词规则 */
|
||
wordBreak: WordBreak;
|
||
/** 行首忽略字符，即不会出现在行首的字符 */
|
||
ignoreLineStart: Set<string>;
|
||
/** 行尾忽略字符，即不会出现在行尾的字符 */
|
||
ignoreLineEnd: Set<string>;
|
||
/** 会被分词规则识别的分词字符 */
|
||
breakChars: Set<string>;
|
||
}
|
||
|
||
interface TextContentRenderable {
|
||
x: number;
|
||
/** 行高，为0时表示两行间为默认行距 */
|
||
lineHeight: number;
|
||
/** 这一行文字的高度，即 measureText 算出的高度 */
|
||
textHeight: number;
|
||
/** 这一行的文字 */
|
||
text: string;
|
||
/** 当前渲染到了本行的哪个文字 */
|
||
pointer: number;
|
||
/** 本行文字在全部文字中的起点 */
|
||
from: number;
|
||
/** 本行文字在全部文字中的终点 */
|
||
to: number;
|
||
}
|
||
|
||
const textContentOptions = {
|
||
props: [
|
||
'breakChars',
|
||
'font',
|
||
'height',
|
||
'ignoreLineEnd',
|
||
'ignoreLineStart',
|
||
'interval',
|
||
'keepLast',
|
||
'lineHeight',
|
||
'text',
|
||
'textAlign',
|
||
'width',
|
||
'wordBreak',
|
||
'x',
|
||
'y',
|
||
'fill',
|
||
'fillStyle',
|
||
'strokeStyle',
|
||
'strokeWidth',
|
||
'stroke',
|
||
'showAll'
|
||
],
|
||
emits: ['typeEnd', 'typeStart']
|
||
} satisfies SetupComponentOptions<
|
||
TextContentProps,
|
||
TextContentEmits,
|
||
keyof TextContentEmits
|
||
>;
|
||
|
||
export const TextContent = defineComponent<
|
||
TextContentProps,
|
||
TextContentEmits,
|
||
keyof TextContentEmits
|
||
>((props, { emit }) => {
|
||
if (props.width && props.width <= 0) {
|
||
logger.warn(41, String(props.width));
|
||
}
|
||
const renderData: Required<TextContentRenderData> = shallowReactive({
|
||
text: props.text,
|
||
textAlign: props.textAlign ?? TextAlign.Left,
|
||
x: props.x ?? 0,
|
||
y: props.y ?? 0,
|
||
width: !props.width || props.width <= 0 ? 200 : props.width,
|
||
height: props.height ?? 200,
|
||
font: props.font ?? core.status.globalAttribute?.font ?? '16px Verdana',
|
||
ignoreLineEnd: props.ignoreLineEnd ?? new Set(),
|
||
ignoreLineStart: props.ignoreLineStart ?? new Set(),
|
||
keepLast: props.keepLast ?? false,
|
||
interval: props.interval ?? 0,
|
||
lineHeight: props.lineHeight ?? 0,
|
||
wordBreak: props.wordBreak ?? WordBreak.Space,
|
||
breakChars: props.breakChars ?? new Set(),
|
||
fillStyle: props.fillStyle ?? '#fff',
|
||
strokeStyle: props.strokeStyle ?? 'transparent',
|
||
fill: props.fill ?? true,
|
||
stroke: props.stroke ?? false,
|
||
strokeWidth: props.strokeWidth ?? 2,
|
||
showAll: props.showAll ?? false
|
||
});
|
||
|
||
const ensureProps = () => {
|
||
for (const [key, value] of Object.entries(props)) {
|
||
if (key in renderData && !isNil(value)) {
|
||
if (key === 'width') {
|
||
if (value && value <= 0) {
|
||
logger.warn(41, String(props.width));
|
||
renderData.width = 200;
|
||
} else {
|
||
renderData.width = value;
|
||
}
|
||
} else {
|
||
// @ts-ignore
|
||
renderData[key] = value;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
const makeSplitData = (): TextContentData => {
|
||
ensureProps();
|
||
return {
|
||
text: renderData.text,
|
||
width: renderData.width!,
|
||
font: renderData.font!,
|
||
wordBreak: renderData.wordBreak!,
|
||
ignoreLineStart: new Set(renderData.ignoreLineStart),
|
||
ignoreLineEnd: new Set(renderData.ignoreLineEnd),
|
||
breakChars: new Set(renderData.breakChars)
|
||
};
|
||
};
|
||
|
||
/**
|
||
* 判断是否需要重新分行
|
||
*/
|
||
const needResplit = (value: TextContentData, old: TextContentData) => {
|
||
return (
|
||
value.text !== old.text ||
|
||
value.font !== old.font ||
|
||
value.width !== old.width ||
|
||
value.wordBreak !== old.wordBreak ||
|
||
!isSetEqual(value.breakChars, old.breakChars) ||
|
||
!isSetEqual(value.ignoreLineEnd, old.ignoreLineEnd) ||
|
||
!isSetEqual(value.ignoreLineStart, old.ignoreLineStart)
|
||
);
|
||
};
|
||
|
||
/** 每行的渲染信息 */
|
||
const renderable: TextContentRenderable[] = [];
|
||
/** 需要更新的行数 */
|
||
const dirtyIndex: number[] = [];
|
||
const spriteElement = ref<Sprite>();
|
||
|
||
/** dirtyIndex 更新指针 */
|
||
let linePointer = 0;
|
||
let startTime = 0;
|
||
/** 从哪个字符开始渲染 */
|
||
let fromChar = 0;
|
||
/** 是否需要更新渲染 */
|
||
let needUpdate = false;
|
||
const tick = () => {
|
||
if (!needUpdate) return;
|
||
spriteElement.value?.update();
|
||
const time = Date.now();
|
||
const char =
|
||
Math.floor((time - startTime) / renderData.interval!) + fromChar;
|
||
if (!isFinite(char) || renderData.showAll) {
|
||
renderable.forEach(v => (v.pointer = v.text.length));
|
||
needUpdate = false;
|
||
linePointer = dirtyIndex.length;
|
||
emit('typeEnd');
|
||
return;
|
||
}
|
||
while (linePointer < dirtyIndex.length) {
|
||
const line = dirtyIndex[linePointer];
|
||
const data = renderable[line];
|
||
const pointer = char - data.from;
|
||
if (char >= data.to) {
|
||
data.pointer = data.text.length;
|
||
linePointer++;
|
||
} else {
|
||
data.pointer = pointer;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (linePointer >= dirtyIndex.length) {
|
||
needUpdate = false;
|
||
renderable.forEach(v => (v.pointer = v.text.length));
|
||
emit('typeEnd');
|
||
}
|
||
};
|
||
|
||
onTick(tick);
|
||
onMounted(() => {
|
||
data.value = makeSplitData();
|
||
lineData.value = splitLines(data.value);
|
||
});
|
||
|
||
const renderContent = (
|
||
canvas: MotaOffscreenCanvas2D,
|
||
transform: Transform
|
||
) => {
|
||
const ctx = canvas.ctx;
|
||
ctx.font = renderData.font;
|
||
ctx.fillStyle = renderData.fillStyle;
|
||
ctx.strokeStyle = renderData.strokeStyle;
|
||
ctx.lineWidth = renderData.strokeWidth;
|
||
|
||
let y = renderable[0]?.textHeight ?? 0;
|
||
renderable.forEach(v => {
|
||
if (v.pointer === 0) return;
|
||
const text = v.text.slice(0, v.pointer);
|
||
if (renderData.textAlign === TextAlign.Left) {
|
||
if (renderData.stroke) ctx.strokeText(text, v.x, y);
|
||
if (renderData.fill) ctx.fillText(text, v.x, y);
|
||
} else if (renderData.textAlign === TextAlign.Center) {
|
||
const x = (renderData.width - v.x) / 2 + v.x;
|
||
if (renderData.stroke) ctx.strokeText(text, x, y);
|
||
if (renderData.fill) ctx.fillText(text, x, y);
|
||
} else {
|
||
const x = renderData.width;
|
||
if (renderData.stroke) ctx.strokeText(text, x, y);
|
||
if (renderData.fill) ctx.fillText(text, x, y);
|
||
}
|
||
y += v.textHeight + v.lineHeight;
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 生成 renderable 对象
|
||
* @param text 全部文本
|
||
* @param lines 分行信息
|
||
* @param index 从第几行开始生成
|
||
* @param from 从第几个字符开始生成
|
||
*/
|
||
const makeRenderable = (
|
||
text: string,
|
||
lines: number[],
|
||
index: number,
|
||
from: number
|
||
) => {
|
||
renderable.splice(index);
|
||
dirtyIndex.splice(0);
|
||
dirtyIndex.push(index);
|
||
// 初始化渲染
|
||
linePointer = 0;
|
||
startTime = Date.now();
|
||
fromChar = from;
|
||
needUpdate = true;
|
||
|
||
let startY = renderable.reduce(
|
||
(prev, curr) => prev + curr.textHeight + curr.lineHeight,
|
||
0
|
||
);
|
||
// 第一个比较特殊，需要特判
|
||
const start = lines[index - 1] ?? 0;
|
||
const end = lines[index];
|
||
const startPointer = from > start && from < end ? from - start : 0;
|
||
const height = testHeight(text, renderData.font!);
|
||
startY += height;
|
||
renderable.push({
|
||
text: text.slice(start, end),
|
||
x: 0,
|
||
lineHeight: renderData.lineHeight!,
|
||
textHeight: height,
|
||
pointer: startPointer,
|
||
from: start,
|
||
to: end ?? text.length
|
||
});
|
||
|
||
for (let i = index + 1; i < lines.length; i++) {
|
||
dirtyIndex.push(i);
|
||
const start = lines[i - 1] ?? 0;
|
||
const end = lines[i];
|
||
const height = testHeight(text, renderData.font!);
|
||
startY += height;
|
||
|
||
renderable.push({
|
||
text: text.slice(start, end),
|
||
x: 0,
|
||
lineHeight: renderData.lineHeight!,
|
||
textHeight: height,
|
||
pointer: 0,
|
||
from: start,
|
||
to: end ?? text.length
|
||
});
|
||
}
|
||
emit('typeStart');
|
||
};
|
||
|
||
/**
|
||
* 从头开始渲染
|
||
*/
|
||
const rawRender = (text: string, lines: number[]) => {
|
||
makeRenderable(text, lines, 0, 0);
|
||
spriteElement.value?.update();
|
||
};
|
||
|
||
/**
|
||
* 接续上一个继续渲染
|
||
* @param from 从第几个字符接续渲染
|
||
* @param lines 分行信息
|
||
* @param index 从第几行接续渲染
|
||
*/
|
||
const continueRender = (
|
||
text: string,
|
||
from: number,
|
||
lines: number[],
|
||
index: number
|
||
) => {
|
||
makeRenderable(text, lines, index, from);
|
||
spriteElement.value?.update();
|
||
};
|
||
|
||
const data = shallowRef<TextContentData>(makeSplitData());
|
||
|
||
onUpdated(() => {
|
||
data.value = makeSplitData();
|
||
});
|
||
|
||
let shouldKeep = false;
|
||
const lineData = shallowRef([0]);
|
||
watch(data, (value, old) => {
|
||
if (needResplit(value, old)) {
|
||
lineData.value = splitLines(value);
|
||
}
|
||
|
||
if (renderData.keepLast && value.text.startsWith(old.text)) {
|
||
shouldKeep = true;
|
||
}
|
||
});
|
||
|
||
// 判断是否需要接续渲染
|
||
watch(lineData, (value, old) => {
|
||
if (shouldKeep) {
|
||
shouldKeep = false;
|
||
const isSub = old.slice(0, -1).every((v, i) => v === value[i]);
|
||
|
||
// 有点地狱的条件分歧，大体就是分为两种情况，一种是两个末尾一致，如果一致那直接从下一行接着画就完事了
|
||
// 但是如果不一致，那么从旧的最后一个开始往后画
|
||
if (isSub) {
|
||
const last = value[old.length - 1];
|
||
const oldLast = value.at(-1);
|
||
if (!last) {
|
||
rawRender(data.value.text, value);
|
||
return;
|
||
}
|
||
if (last === oldLast) {
|
||
const index = old.length - 1;
|
||
continueRender(data.value.text, last, value, index);
|
||
} else {
|
||
if (!oldLast) {
|
||
rawRender(data.value.text, value);
|
||
} else {
|
||
const index = old.length - 1;
|
||
continueRender(data.value.text, oldLast, value, index);
|
||
}
|
||
}
|
||
} else {
|
||
rawRender(data.value.text, value);
|
||
}
|
||
} else {
|
||
rawRender(data.value.text, value);
|
||
}
|
||
});
|
||
|
||
return () => {
|
||
return (
|
||
<sprite
|
||
{...renderData}
|
||
ref={spriteElement}
|
||
x={renderData.x}
|
||
y={renderData.y}
|
||
width={renderData.width}
|
||
height={renderData.height}
|
||
render={renderContent}
|
||
></sprite>
|
||
);
|
||
};
|
||
}, textContentOptions);
|
||
|
||
export interface TextboxProps extends TextContentProps, ContainerProps {
|
||
/** 背景颜色 */
|
||
backColor?: CanvasStyle;
|
||
/** 背景 winskin */
|
||
winskin?: string;
|
||
/** 边框与文字间的距离，默认为8 */
|
||
padding?: number;
|
||
/** 标题 */
|
||
title?: string;
|
||
/** 标题字体 */
|
||
titleFont?: string;
|
||
/** 标题填充样式 */
|
||
titleFill?: CanvasStyle;
|
||
/** 标题描边样式 */
|
||
titleStroke?: CanvasStyle;
|
||
/** 标题文字与边框间的距离，默认为4 */
|
||
titlePadding?: number;
|
||
}
|
||
|
||
type TextboxEmits = TextContentEmits;
|
||
type TextboxSlots = SlotsType<{ default: (data: TextboxProps) => VNode[] }>;
|
||
|
||
const textboxOptions = {
|
||
props: (textContentOptions.props as (keyof TextboxProps)[]).concat([
|
||
'backColor',
|
||
'winskin',
|
||
'id',
|
||
'padding',
|
||
'alpha',
|
||
'hidden',
|
||
'anchorX',
|
||
'anchorY',
|
||
'antiAliasing',
|
||
'cache',
|
||
'composite',
|
||
'fall',
|
||
'hd',
|
||
'transform',
|
||
'type',
|
||
'zIndex',
|
||
'titleFill',
|
||
'titleStroke',
|
||
'titleFont'
|
||
]),
|
||
emits: textContentOptions.emits
|
||
} satisfies SetupComponentOptions<TextboxProps, {}, string, TextboxSlots>;
|
||
|
||
let id = 0;
|
||
function getNextTextboxId() {
|
||
return `@default-textbox-${id++}`;
|
||
}
|
||
|
||
export const Textbox = defineComponent<
|
||
TextboxProps,
|
||
TextboxEmits,
|
||
keyof TextboxEmits,
|
||
TextboxSlots
|
||
>((props, { slots }) => {
|
||
const data = shallowReactive({ ...props });
|
||
data.padding ??= 8;
|
||
data.width ??= 200;
|
||
data.height ??= 200;
|
||
data.id ??= '';
|
||
data.alpha ??= 1;
|
||
data.titleFill ??= '#000';
|
||
data.titleStroke ??= 'transparent';
|
||
data.titleFont ??= '16px Verdana';
|
||
data.titlePadding ??= 4;
|
||
|
||
const titleElement = ref<Text>();
|
||
const titleWidth = ref(data.titlePadding * 2);
|
||
const titleHeight = ref(data.titlePadding * 2);
|
||
const contentY = computed(() => {
|
||
const height = titleHeight.value;
|
||
return data.title ? height : 0;
|
||
});
|
||
const contentWidth = computed(() => data.width! - data.padding! * 2);
|
||
const contentHeight = computed(
|
||
() => data.height! - data.padding! * 2 - contentY.value
|
||
);
|
||
|
||
const calTitleSize = (text: string) => {
|
||
if (!titleElement.value) return;
|
||
const { width, height } = titleElement.value;
|
||
titleWidth.value = width + data.titlePadding! * 2;
|
||
titleHeight.value = height + data.titlePadding! * 2;
|
||
data.title = text;
|
||
};
|
||
|
||
watch(titleElement, (value, old) => {
|
||
old?.off('setText', calTitleSize);
|
||
value?.on('setText', calTitleSize);
|
||
if (value) calTitleSize(value?.text);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
titleElement.value?.off('setText', calTitleSize);
|
||
});
|
||
|
||
// ----- store
|
||
|
||
/** 结束打字机 */
|
||
const storeEmits: TextboxStoreEmits = {
|
||
endType() {
|
||
data.showAll = true;
|
||
}
|
||
};
|
||
|
||
const store = TextboxStore.use(
|
||
props.id ?? getNextTextboxId(),
|
||
data,
|
||
storeEmits
|
||
);
|
||
const hidden = ref(data.hidden);
|
||
store.on('hide', () => (hidden.value = true));
|
||
store.on('show', () => (hidden.value = false));
|
||
store.on('update', value => {
|
||
if (value.title) {
|
||
titleElement.value?.requestBeforeFrame(() => {
|
||
const { width, height } = titleElement.value!;
|
||
titleWidth.value = width + data.padding! * 2;
|
||
titleHeight.value = height + data.padding! * 2;
|
||
});
|
||
}
|
||
});
|
||
|
||
const onTypeStart = () => {
|
||
store.emitTypeStart();
|
||
};
|
||
|
||
const onTypeEnd = () => {
|
||
data.showAll = false;
|
||
store.emitTypeEnd();
|
||
};
|
||
|
||
return () => {
|
||
return (
|
||
<container {...data} hidden={hidden.value} alpha={data.alpha}>
|
||
{data.title ? (
|
||
<container
|
||
zIndex={10}
|
||
width={titleWidth.value}
|
||
height={titleHeight.value}
|
||
>
|
||
{props.winskin ? (
|
||
<winskin></winskin>
|
||
) : (
|
||
<g-rect
|
||
x={0}
|
||
y={0}
|
||
width={titleWidth.value}
|
||
height={titleHeight.value}
|
||
fillStyle={data.backColor}
|
||
></g-rect>
|
||
)}
|
||
<text
|
||
ref={titleElement}
|
||
text={data.title}
|
||
x={data.titlePadding}
|
||
y={data.titlePadding}
|
||
fillStyle={data.titleFill}
|
||
strokeStyle={data.titleStroke}
|
||
font={data.titleFont}
|
||
></text>
|
||
</container>
|
||
) : (
|
||
''
|
||
)}
|
||
{slots.default ? (
|
||
slots.default(data)
|
||
) : props.winskin ? (
|
||
// todo
|
||
<winskin></winskin>
|
||
) : (
|
||
// todo
|
||
<g-rect
|
||
x={0}
|
||
y={contentY.value}
|
||
width={data.width ?? 200}
|
||
height={(data.height ?? 200) - contentY.value}
|
||
fill
|
||
fillStyle={data.backColor}
|
||
></g-rect>
|
||
)}
|
||
<TextContent
|
||
{...data}
|
||
hidden={false}
|
||
x={data.padding!}
|
||
y={contentY.value + data.padding!}
|
||
width={contentWidth.value}
|
||
height={contentHeight.value}
|
||
onTypeEnd={onTypeEnd}
|
||
onTypeStart={onTypeStart}
|
||
zIndex={0}
|
||
showAll={data.showAll}
|
||
></TextContent>
|
||
</container>
|
||
);
|
||
};
|
||
}, textboxOptions);
|
||
|
||
const fontSizeGuessScale = new Map<string, number>([
|
||
['px', 1],
|
||
['%', 0.2],
|
||
['', 0.2],
|
||
['cm', 37.8],
|
||
['mm', 3.78],
|
||
['Q', 3.78 / 4],
|
||
['in', 96],
|
||
['pc', 16],
|
||
['pt', 96 / 72],
|
||
['em', 16],
|
||
['vw', 0.2],
|
||
['vh', 0.2],
|
||
['rem', 16]
|
||
]);
|
||
|
||
/**
|
||
* 对文字进行分行操作
|
||
* @param data 文字信息
|
||
* @returns 分行信息，每一项表示应该在这一项索引之后分行
|
||
*/
|
||
function splitLines(data: TextContentData) {
|
||
const words = breakWords(data);
|
||
if (words.length === 0) return [];
|
||
else if (words.length === 1) return [words[0]];
|
||
|
||
// 对文字二分，然后计算长度
|
||
const text = data.text;
|
||
const res: number[] = [];
|
||
const fontSize = data.font.match(/\s*[\d\.-]+[a-zA-Z%]*\s*/)?.[0].trim();
|
||
const unit = fontSize?.match(/[a-zA-Z%]+/)?.[0];
|
||
const guessScale = fontSizeGuessScale.get(unit ?? '') ?? 0.2;
|
||
const guessSize = parseInt(fontSize ?? '1') * guessScale;
|
||
const averageLength = text.length / words.length;
|
||
const guess = Math.max(data.width / guessSize / averageLength, 1);
|
||
const ctx = testCanvas.ctx;
|
||
ctx.font = data.font;
|
||
|
||
let start = 0;
|
||
let end = Math.ceil(guess);
|
||
let resolved = 0;
|
||
let mid = 0;
|
||
let guessCount = 1;
|
||
let splitProgress = false;
|
||
let last = 0;
|
||
|
||
while (1) {
|
||
if (!splitProgress) {
|
||
const chars = text.slice(words[start], words[end]);
|
||
const { width } = ctx.measureText(chars);
|
||
if (width < data.width && end < words.length) {
|
||
guessCount *= 2;
|
||
end = Math.ceil(guessCount * guess + start);
|
||
if (end > words.length) end = words.length;
|
||
} else {
|
||
splitProgress = true;
|
||
}
|
||
continue;
|
||
}
|
||
const diff = end - start;
|
||
|
||
if (diff === 1) {
|
||
if (start === last) {
|
||
res.push(words[last + 1]);
|
||
start = words[last + 1];
|
||
end = start + 1;
|
||
} else {
|
||
res.push(words[start]);
|
||
}
|
||
if (end >= words.length) break;
|
||
last = resolved;
|
||
resolved = start;
|
||
end = Math.ceil(start + guess);
|
||
if (end > words.length) end = words.length;
|
||
guessCount = 1;
|
||
splitProgress = false;
|
||
} else {
|
||
mid = Math.floor((start + end) / 2);
|
||
const chars = text.slice(words[resolved], words[mid]);
|
||
const { width } = ctx.measureText(chars);
|
||
if (width <= data.width) {
|
||
start = mid;
|
||
if (start === end) end++;
|
||
} else {
|
||
end = mid;
|
||
if (start === end) end++;
|
||
}
|
||
}
|
||
}
|
||
|
||
return res;
|
||
}
|
||
|
||
const defaultsBreak = ' -,.)]}?!;:，。）】？！；：';
|
||
const defaultsIgnoreStart =
|
||
'）)】》＞﹞>)]»›〕〉}］」｝〗』，。？！：；·…,.?!:;、……~&@#～＆＠＃';
|
||
const defaultsIgnoreEnd = '（(【《＜﹝<([«‹〔〈{［「｛〖『';
|
||
const breakSet = new Set(defaultsBreak);
|
||
const ignoreStart = new Set(defaultsIgnoreStart);
|
||
const ignoreEnd = new Set(defaultsIgnoreEnd);
|
||
|
||
/**
|
||
* 判断一个文字是否是 CJK 文字
|
||
* @param char 文字的编码
|
||
*/
|
||
function isCJK(char: number) {
|
||
// 参考自 https://blog.csdn.net/brooksychen/article/details/2755395
|
||
return (
|
||
(char >= 0x4e00 && char <= 0x9fff) ||
|
||
(char >= 0x3000 && char <= 0x30ff) ||
|
||
(char >= 0xac00 && char <= 0xd7af) ||
|
||
(char >= 0xf900 && char <= 0xfaff) ||
|
||
(char >= 0x3400 && char <= 0x4dbf) ||
|
||
(char >= 0x20000 && char <= 0x2ebef) ||
|
||
(char >= 0x30000 && char <= 0x323af) ||
|
||
(char >= 0x2e80 && char <= 0x2eff) ||
|
||
(char >= 0x31c0 && char <= 0x31ef)
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 对文字进行分词操作
|
||
* @param data 文字信息
|
||
* @returns 一个数字数组，每一项应当在这一项索引之后分词
|
||
*/
|
||
function breakWords(data: TextContentData) {
|
||
if (data.text.length <= 1) return [data.text.length];
|
||
let allBreak = false;
|
||
const breakChars = breakSet.union(data.breakChars);
|
||
switch (data.wordBreak) {
|
||
case WordBreak.None: {
|
||
return [data.text.length];
|
||
}
|
||
case WordBreak.Space: {
|
||
allBreak = false;
|
||
break;
|
||
}
|
||
case WordBreak.All: {
|
||
allBreak = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
const res: number[] = [0];
|
||
const text = data.text;
|
||
const ignoreLineStart = data.ignoreLineStart.union(ignoreStart);
|
||
const ignoreLineEnd = data.ignoreLineEnd.union(ignoreEnd);
|
||
for (let pointer = 0; pointer < text.length; pointer++) {
|
||
const char = text[pointer];
|
||
const next = text[pointer + 1];
|
||
|
||
if (!ignoreLineEnd.has(char) && ignoreLineEnd.has(next)) {
|
||
res.push(pointer);
|
||
continue;
|
||
}
|
||
|
||
if (ignoreLineStart.has(char) && !ignoreLineStart.has(next)) {
|
||
res.push(pointer + 1);
|
||
continue;
|
||
}
|
||
|
||
if (
|
||
breakChars.has(char) ||
|
||
allBreak ||
|
||
char === '\n' ||
|
||
isCJK(char.charCodeAt(0))
|
||
) {
|
||
res.push(pointer + 1);
|
||
continue;
|
||
}
|
||
}
|
||
res.push(text.length);
|
||
return res;
|
||
}
|
||
|
||
function testHeight(text: string, font: string) {
|
||
const ctx = testCanvas.ctx;
|
||
ctx.font = font;
|
||
return ctx.measureText(text).fontBoundingBoxAscent;
|
||
}
|
||
|
||
interface TextboxStoreEmits {
|
||
endType: () => void;
|
||
}
|
||
|
||
interface TextboxStoreEvent {
|
||
update: [value: TextboxProps];
|
||
show: [];
|
||
hide: [];
|
||
typeStart: [];
|
||
typeEnd: [];
|
||
}
|
||
|
||
export class TextboxStore extends EventEmitter<TextboxStoreEvent> {
|
||
static list: Map<string, TextboxStore> = new Map();
|
||
|
||
typing: boolean = false;
|
||
|
||
private constructor(
|
||
private readonly data: TextboxProps,
|
||
private readonly emits: TextboxStoreEmits
|
||
) {
|
||
super();
|
||
}
|
||
|
||
/**
|
||
* 开始打字，由组件调用，而非组件外调用
|
||
*/
|
||
emitTypeStart() {
|
||
this.typing = true;
|
||
this.emit('typeStart');
|
||
}
|
||
|
||
/**
|
||
* 结束打字，由组件调用，而非组件外调用
|
||
*/
|
||
emitTypeEnd() {
|
||
this.typing = false;
|
||
this.emit('typeEnd');
|
||
}
|
||
|
||
/**
|
||
* 结束打字机的打字
|
||
*/
|
||
endType() {
|
||
this.emits.endType();
|
||
}
|
||
|
||
/**
|
||
* 修改渲染数据
|
||
*/
|
||
modify(data: Partial<TextboxProps>) {
|
||
for (const [key, value] of Object.entries(data)) {
|
||
// @ts-ignore
|
||
if (!isNil(value)) this.data[key] = value;
|
||
}
|
||
this.emit('update', this.data);
|
||
}
|
||
|
||
/**
|
||
* 显示文本框
|
||
*/
|
||
show() {
|
||
this.emit('show');
|
||
}
|
||
|
||
/**
|
||
* 隐藏文本框
|
||
*/
|
||
hide() {
|
||
this.emit('hide');
|
||
}
|
||
|
||
/**
|
||
* 获取文本框
|
||
* @param id 文本框id
|
||
*/
|
||
static get(id: string): TextboxStore | undefined {
|
||
return this.list.get(id);
|
||
}
|
||
|
||
/**
|
||
* 在当前作用域下生成文本框控制器
|
||
* @param id 文本框id
|
||
* @param props 文本框渲染数据
|
||
*/
|
||
static use(id: string, props: TextboxProps, emits: TextboxStoreEmits) {
|
||
const store = new TextboxStore(props, emits);
|
||
if (this.list.has(id)) {
|
||
logger.warn(42, id);
|
||
}
|
||
this.list.set(id, store);
|
||
onUnmounted(() => {
|
||
this.list.delete(id);
|
||
});
|
||
return store;
|
||
}
|
||
}
|