R524809
445 lines
14 KiB
TypeScript
445 lines
14 KiB
TypeScript
import WordDrawService from '../../service/wordDrawService';
|
|
import { downloadPrint } from '../../utils/downloadPrint';
|
|
import { getWordsSvgData } from '../../utils/getWordsSvgJson';
|
|
import { WORDS } from '../../core/data/words';
|
|
import { CharacterItem } from '../../types/characterType';
|
|
import tracker from '../../utils/tracker';
|
|
import { createPage } from '../../base/pageMixin';
|
|
import { defaultShareConfig } from '../../config/config';
|
|
import {
|
|
addFavorite,
|
|
removeFavorite,
|
|
batchCheckFavorited,
|
|
} from '../../utils/favorites';
|
|
import type { DebugPublishMeta } from '../../utils/debugPublish';
|
|
import {
|
|
HANDWRITING_SHEET_WORKSHEET_DEFINITIONS,
|
|
HANDWRITING_SHEET_WORKSHEET_ID,
|
|
getModeInfo,
|
|
getPublishMetaByMode,
|
|
} from './handwritingSheet.config';
|
|
|
|
const MAX_WORDS = 11;
|
|
const RANDOM_WORD_COUNT = 8;
|
|
const DEFAULT_WORDS = '东西南北日月山河风雨';
|
|
const CATEGORY_TAGS = WORDS.slice(0, 3).map((cat) => ({
|
|
categoryId: cat.categoryId,
|
|
icon: cat.icon,
|
|
categoryName: cat.categoryName,
|
|
}));
|
|
|
|
createPage(
|
|
{
|
|
canvas: null as Canvas | null,
|
|
ctx: null as RenderingContext | null,
|
|
wordDrawService: null as WordDrawService | null,
|
|
svgWords: {} as Record<string, string[]>,
|
|
maxRow: 0 as number,
|
|
maxCol: 0 as number,
|
|
_favoritedMap: {} as Record<string, boolean>,
|
|
|
|
data: {
|
|
pageTitle: HANDWRITING_SHEET_WORKSHEET_DEFINITIONS[0].title,
|
|
functionId: HANDWRITING_SHEET_WORKSHEET_ID,
|
|
hasContent: false,
|
|
words: [] as string[],
|
|
inputWords: [] as string[],
|
|
selectedWords: [] as string[],
|
|
inputValue: '',
|
|
showSelectWordPopup: false,
|
|
pickerCurrentTab: 0,
|
|
categoryTags: CATEGORY_TAGS,
|
|
showShareDialog: false,
|
|
isPreviewFavorite: false,
|
|
isDevEnv: false,
|
|
debugPublishVisible: false,
|
|
debugPublishLoading: false,
|
|
debugPublishMeta: null as DebugPublishMeta | null,
|
|
},
|
|
|
|
async onLoad() {
|
|
this.syncDebugPublishEnv();
|
|
this.loadFavoritedMap();
|
|
this.initPageInfo(
|
|
HANDWRITING_SHEET_WORKSHEET_ID,
|
|
HANDWRITING_SHEET_WORKSHEET_DEFINITIONS[0].title,
|
|
);
|
|
await this.loadSvgWords();
|
|
this.initDefaultWords();
|
|
},
|
|
|
|
async loadSvgWords() {
|
|
try {
|
|
wx.showToast({ title: '加载字体中...', icon: 'loading' });
|
|
this.svgWords = await getWordsSvgData();
|
|
wx.hideToast();
|
|
|
|
if (this.data.words.length > 0) {
|
|
this.renderPracticeContent().catch(console.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('加载SVG汉字数据失败:', error);
|
|
wx.hideToast();
|
|
wx.showModal({
|
|
title: '加载失败',
|
|
content: '无法加载汉字数据，请检查网络连接后重试',
|
|
showCancel: true,
|
|
cancelText: '取消',
|
|
confirmText: '重试',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.loadSvgWords();
|
|
}
|
|
},
|
|
});
|
|
}
|
|
},
|
|
|
|
async onCanvasReady(e: WechatMiniprogram.CustomEvent) {
|
|
const { canvas, ctx } = e.detail;
|
|
if (!canvas || !ctx) return;
|
|
|
|
this.canvas = canvas;
|
|
this.ctx = ctx;
|
|
this.wordDrawService = new WordDrawService(canvas, ctx);
|
|
|
|
await this.wordDrawService.drawLayout();
|
|
|
|
const { maxRow, maxCol } = this.wordDrawService.getMaxGridLayout();
|
|
this.maxRow = maxRow;
|
|
this.maxCol = maxCol;
|
|
|
|
if (this.data.words.length > 0) {
|
|
await this.renderPracticeContent();
|
|
}
|
|
},
|
|
|
|
onPreviewRefresh() {
|
|
this.refreshWords();
|
|
},
|
|
|
|
async onPreviewFavorite() {
|
|
const next = !this.data.isPreviewFavorite;
|
|
this.setData({ isPreviewFavorite: next });
|
|
this._favoritedMap[HANDWRITING_SHEET_WORKSHEET_ID] = next;
|
|
|
|
if (next) {
|
|
await addFavorite(HANDWRITING_SHEET_WORKSHEET_ID);
|
|
} else {
|
|
await removeFavorite(HANDWRITING_SHEET_WORKSHEET_ID);
|
|
}
|
|
|
|
wx.showToast({
|
|
title: next ? '收藏成功' : '已取消收藏',
|
|
icon: 'none',
|
|
});
|
|
},
|
|
|
|
async loadFavoritedMap() {
|
|
this._favoritedMap = await batchCheckFavorited([
|
|
HANDWRITING_SHEET_WORKSHEET_ID,
|
|
]);
|
|
|
|
if (this._favoritedMap[HANDWRITING_SHEET_WORKSHEET_ID]) {
|
|
this.setData({ isPreviewFavorite: true });
|
|
}
|
|
},
|
|
|
|
onInputChange(e: WechatMiniprogram.Input) {
|
|
const value = e.detail.value as string;
|
|
this.syncWordsFromInput(value, false);
|
|
},
|
|
|
|
onInputConfirm(e: WechatMiniprogram.Input) {
|
|
const value = e.detail.value as string;
|
|
this.syncWordsFromInput(value, true);
|
|
},
|
|
|
|
onClearInput() {
|
|
this.clearWords();
|
|
},
|
|
|
|
syncWordsFromInput(value: string, showLimitToast: boolean) {
|
|
const selectedWords = this.data.selectedWords as string[];
|
|
const maxInputCount = Math.max(0, MAX_WORDS - selectedWords.length);
|
|
const nextInputWords = this.splitToSingleChars(value).slice(
|
|
0,
|
|
maxInputCount,
|
|
);
|
|
const nextWords = [...nextInputWords, ...selectedWords];
|
|
|
|
if (
|
|
showLimitToast &&
|
|
nextInputWords.length < this.splitToSingleChars(value).length
|
|
) {
|
|
wx.showToast({
|
|
title: `最多输入 ${maxInputCount} 个字`,
|
|
icon: 'none',
|
|
});
|
|
}
|
|
|
|
this.setData(
|
|
{
|
|
inputValue: nextInputWords.join(''),
|
|
inputWords: nextInputWords,
|
|
words: nextWords,
|
|
},
|
|
() => this.renderPracticeContent().catch(console.error),
|
|
);
|
|
},
|
|
|
|
openSelectWordPopup() {
|
|
this.setData({ showSelectWordPopup: true, pickerCurrentTab: 0 });
|
|
},
|
|
|
|
closeSelectWordPopup() {
|
|
this.setData({ showSelectWordPopup: false });
|
|
},
|
|
|
|
onCategoryTap(e: WechatMiniprogram.TouchEvent) {
|
|
const categoryId = Number(e.currentTarget.dataset.categoryId);
|
|
this.setData({
|
|
showSelectWordPopup: true,
|
|
pickerCurrentTab: categoryId,
|
|
});
|
|
},
|
|
|
|
onChangeWord(e: WechatMiniprogram.CustomEvent) {
|
|
const nextSelectedWords = e.detail.selectedWords as string[];
|
|
const inputWords = this.data.inputWords as string[];
|
|
|
|
if (inputWords.length + nextSelectedWords.length > MAX_WORDS) {
|
|
wx.showToast({
|
|
title: `最多只能添加 ${MAX_WORDS} 个字`,
|
|
icon: 'none',
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.setData(
|
|
{
|
|
selectedWords: nextSelectedWords,
|
|
words: [...inputWords, ...nextSelectedWords],
|
|
showSelectWordPopup: false,
|
|
},
|
|
() => this.renderPracticeContent().catch(console.error),
|
|
);
|
|
},
|
|
|
|
deleteWordChip(e: WechatMiniprogram.TouchEvent) {
|
|
const index = Number(e.currentTarget.dataset.index);
|
|
if (Number.isNaN(index)) return;
|
|
|
|
const inputWords = [...(this.data.inputWords as string[])];
|
|
const selectedWords = [...(this.data.selectedWords as string[])];
|
|
|
|
if (index < inputWords.length) {
|
|
inputWords.splice(index, 1);
|
|
this.setData(
|
|
{
|
|
inputWords,
|
|
inputValue: inputWords.join(''),
|
|
words: [...inputWords, ...selectedWords],
|
|
},
|
|
() => this.renderPracticeContent().catch(console.error),
|
|
);
|
|
return;
|
|
}
|
|
|
|
const selectedIndex = index - inputWords.length;
|
|
if (selectedIndex < 0 || selectedIndex >= selectedWords.length)
|
|
return;
|
|
|
|
selectedWords.splice(selectedIndex, 1);
|
|
this.setData(
|
|
{
|
|
selectedWords,
|
|
words: [...inputWords, ...selectedWords],
|
|
},
|
|
() => this.renderPracticeContent().catch(console.error),
|
|
);
|
|
},
|
|
|
|
clearWords() {
|
|
this.setData(
|
|
{
|
|
words: [],
|
|
inputWords: [],
|
|
selectedWords: [],
|
|
inputValue: '',
|
|
showSelectWordPopup: false,
|
|
},
|
|
() => this.renderPracticeContent().catch(console.error),
|
|
);
|
|
},
|
|
|
|
initDefaultWords() {
|
|
const defaults = this.getSupportedWords(
|
|
this.splitToSingleChars(DEFAULT_WORDS),
|
|
).slice(0, MAX_WORDS);
|
|
|
|
if (defaults.length === 0) {
|
|
this.refreshWords();
|
|
return;
|
|
}
|
|
|
|
this.setData(
|
|
{
|
|
words: defaults,
|
|
inputWords: defaults,
|
|
selectedWords: [],
|
|
inputValue: defaults.join(''),
|
|
},
|
|
() => this.renderPracticeContent().catch(console.error),
|
|
);
|
|
},
|
|
|
|
refreshWords() {
|
|
const candidates = WORDS.slice(0, 3).reduce(
|
|
(acc: string[], category) => acc.concat(category.words),
|
|
[] as string[],
|
|
);
|
|
const shuffled = Array.from(new Set(candidates)).sort(
|
|
() => Math.random() - 0.5,
|
|
);
|
|
const supported = this.getSupportedWords(shuffled).slice(
|
|
0,
|
|
RANDOM_WORD_COUNT,
|
|
);
|
|
|
|
if (supported.length === 0) {
|
|
wx.showToast({
|
|
title: '随机到的字暂不支持，重试一下',
|
|
icon: 'none',
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.setData(
|
|
{
|
|
words: supported,
|
|
inputWords: supported,
|
|
selectedWords: [],
|
|
inputValue: supported.join(''),
|
|
},
|
|
() => this.renderPracticeContent().catch(console.error),
|
|
);
|
|
},
|
|
|
|
splitToSingleChars(text: string): string[] {
|
|
const matches = text.match(/[\u4e00-\u9fff]/g);
|
|
return matches || [];
|
|
},
|
|
|
|
async renderPracticeContent() {
|
|
if (!this.canvas || !this.wordDrawService) return;
|
|
|
|
const words = this.data.words as string[];
|
|
if (words.length === 0) {
|
|
await this.wordDrawService.drawContentEmpty();
|
|
this.setData({ hasContent: false });
|
|
return;
|
|
}
|
|
|
|
const supportedWords = this.getSupportedWords(words);
|
|
if (supportedWords.length === 0) {
|
|
wx.showToast({ title: '暂不支持这些汉字', icon: 'none' });
|
|
await this.wordDrawService.drawContentEmpty();
|
|
this.setData({ hasContent: false });
|
|
return;
|
|
}
|
|
|
|
let maxRow = this.maxRow;
|
|
let maxCol = this.maxCol;
|
|
if (!maxRow || !maxCol) {
|
|
const layout = this.wordDrawService.getMaxGridLayout();
|
|
this.maxRow = layout.maxRow;
|
|
this.maxCol = layout.maxCol;
|
|
maxRow = layout.maxRow;
|
|
maxCol = layout.maxCol;
|
|
}
|
|
|
|
const characterData = this.processCharacterLayout(
|
|
supportedWords,
|
|
maxRow,
|
|
maxCol,
|
|
);
|
|
|
|
await this.wordDrawService.drawPracticeContent(characterData);
|
|
this.setData({ hasContent: characterData.length > 0 });
|
|
},
|
|
|
|
getSupportedWords(words: string[]): string[] {
|
|
return words.filter((word) => this.svgWords[word]);
|
|
},
|
|
|
|
processCharacterLayout(
|
|
words: string[],
|
|
maxRow: number,
|
|
maxCol: number,
|
|
): CharacterItem[] {
|
|
let rowIndex = 0;
|
|
const characterData: CharacterItem[] = [];
|
|
|
|
words.forEach((word: string) => {
|
|
const strokes = this.svgWords[word];
|
|
const strokeCount = strokes.length;
|
|
const totalCells = 1 + strokeCount;
|
|
const totalRows = Math.ceil(totalCells / maxCol);
|
|
rowIndex += totalRows;
|
|
|
|
if (rowIndex <= maxRow) {
|
|
characterData.push({ character: word, strokes });
|
|
}
|
|
});
|
|
|
|
return characterData;
|
|
},
|
|
|
|
async exportToPrint() {
|
|
await downloadPrint(this.canvas, {
|
|
errorToast: '请先生成练字贴',
|
|
trackerName: '练字贴',
|
|
});
|
|
},
|
|
|
|
onShare() {},
|
|
|
|
onShareAppMessage() {
|
|
tracker.reportShare('练字贴');
|
|
return {
|
|
...defaultShareConfig,
|
|
path: `/chinesePages/handwritingSheet/handwritingSheet?id=${HANDWRITING_SHEET_WORKSHEET_ID}`,
|
|
};
|
|
},
|
|
|
|
onShareTimeline() {
|
|
tracker.reportShare('练字贴');
|
|
return {
|
|
...defaultShareConfig,
|
|
query: `id=${HANDWRITING_SHEET_WORKSHEET_ID}`,
|
|
};
|
|
},
|
|
|
|
onCloseShareDialog() {
|
|
this.setData({ showShareDialog: false });
|
|
},
|
|
|
|
onShareSuccess() {
|
|
this.setData({ showShareDialog: false });
|
|
},
|
|
|
|
getPublishMeta(): DebugPublishMeta {
|
|
const meta = getPublishMetaByMode(HANDWRITING_SHEET_WORKSHEET_ID);
|
|
if (!meta) {
|
|
throw new Error('当前题型配置不存在');
|
|
}
|
|
return meta;
|
|
},
|
|
},
|
|
{
|
|
shareConfig: defaultShareConfig,
|
|
pageInfoLookup: getModeInfo,
|
|
},
|
|
);
|