doodle-mini/miniprogram/mathPages/clockReading/clockReading.ts

import ClockReadingDraw from './draw/clockReadingDraw';
import {
    buildClockReadingData,
    type ClockReadingTimeMode,
} from './generators/clock-generator';
import { createPage, type CanvasDataState } from '../../base/pageMixin';
import { defaultShareConfig } from '../../config/config';
import {
    getModeInfo,
    getPublishMetaByMode,
    isValidMode,
    CLOCK_TIME_MODE_OPTIONS,
} from './clockReading.config';
import type { DebugPublishMeta } from '../../utils/debugPublish';
import {
    addFavorite,
    removeFavorite,
    batchCheckFavorited,
} from '../../utils/favorites';

const pageInfoLookup = getModeInfo;
const WORKSHEET_ID = 'clock-reading';

type PageData = CanvasDataState & {
    worksheetId: string;
    timeMode: ClockReadingTimeMode;
    timeModeOptions: typeof CLOCK_TIME_MODE_OPTIONS;
    isPreviewFavorite: boolean;
    isDevEnv: boolean;
    debugPublishVisible: boolean;
    debugPublishLoading: boolean;
    debugPublishMeta: DebugPublishMeta | null;
};

createPage(
    {
        canvas: null as Canvas | null,
        ctx: null as RenderingContext | null,
        boxHeight: 0,
        boxWidth: 0,
        drawService: null as ClockReadingDraw | null,
        _favoritedMap: {} as Record<string, boolean>,

        data: {
            pageTitle: '认识钟表',
            functionId: WORKSHEET_ID,
            hasContent: false,
            showShareDialog: false,
            worksheetId: WORKSHEET_ID,
            timeMode: 'random' as ClockReadingTimeMode,
            timeModeOptions: CLOCK_TIME_MODE_OPTIONS,
            isPreviewFavorite: false,
            isDevEnv: false,
            debugPublishVisible: false,
            debugPublishLoading: false,
            debugPublishMeta: null,
        } as unknown as PageData,

        onLoad(options: { id?: string }) {
            const worksheetId =
                options.id && isValidMode(options.id)
                    ? options.id
                    : WORKSHEET_ID;
            this.syncDebugPublishEnv();
            this.applyWorksheet(worksheetId);
            this.loadFavoritedMap();
        },

        onSelectTimeMode(e: WechatMiniprogram.TouchEvent) {
            const mode = e.currentTarget.dataset.mode as
                | ClockReadingTimeMode
                | undefined;
            if (!mode || mode === this.data.timeMode) return;
            this.setData({ timeMode: mode }, () => this.drawCanvas());
        },

        onCanvasReady(e: WechatMiniprogram.CustomEvent) {
            this.initCanvasFromComponent(e.detail, {
                createDrawService: (
                    canvas: Canvas,
                    ctx: RenderingContext,
                    options?: Record<string, unknown>,
                ) => new ClockReadingDraw(canvas, ctx, options),
                drawServiceOptions: {
                    title: this.data.pageTitle,
                },
                onCanvasReady: () => {
                    this.drawCanvas();
                },
            });
        },

        async drawCanvas() {
            if (!this.ctx || !this.drawService) return;
            try {
                const data = buildClockReadingData(this.data.timeMode);
                await (this.drawService as ClockReadingDraw).draw(data);
                this.setData({ hasContent: true });
            } catch (e) {
                console.error('clockReading draw failed', e);
                this.setData({ hasContent: false });
            }
        },

        onPreviewRefresh() {
            this.drawCanvas();
        },

        async onPreviewFavorite() {
            const next = !this.data.isPreviewFavorite;
            this.setData({ isPreviewFavorite: next });
            const id = this.data.worksheetId;
            if (id && this._favoritedMap) {
                this._favoritedMap[id] = next;
                if (next) {
                    addFavorite(id);
                } else {
                    removeFavorite(id);
                }
            }
            wx.showToast({
                title: next ? '收藏成功' : '已取消收藏',
                icon: 'none',
            });
        },

        async loadFavoritedMap() {
            const ids = [WORKSHEET_ID];
            this._favoritedMap = await batchCheckFavorited(ids);
            if (this._favoritedMap?.[WORKSHEET_ID]) {
                this.setData({ isPreviewFavorite: true });
            }
        },

        getPublishMeta(): DebugPublishMeta {
            const meta = getPublishMetaByMode(this.data.worksheetId);
            if (!meta) {
                throw new Error('当前题型配置不存在');
            }
            return meta;
        },

        getWorksheetStatsId() {
            return this.data.worksheetId;
        },

        applyWorksheet(worksheetId: string) {
            if (!isValidMode(worksheetId)) return;

            this.setData(
                {
                    worksheetId,
                    functionId: worksheetId,
                    isPreviewFavorite: !!this._favoritedMap?.[worksheetId],
                },
                () => {
                    this.initPageInfo(worksheetId, '认识钟表');
                    if (this.drawService) {
                        this.drawService.options.title = this.data.pageTitle;
                    }
                },
            );
        },
    },
    {
        shareConfig: defaultShareConfig,
        pageInfoLookup,
    },
);