doodle-mini/miniprogram/papersPages/paperSheet/paperSheet.ts

import PaperDrawService from './draw/paperDrawService';
import {
    PAPER_SHEET_WORKSHEET_ID,
    PAPER_TYPE_OPTIONS,
    PAPER_COLOR_OPTIONS,
    DEFAULT_PAPER_TYPE,
    DEFAULT_PAPER_COLOR,
    getModeInfo,
    getPublishMetaByMode,
    isValidPaperType,
    type PaperType,
} from './paperSheet.config';
import { createPage, type CanvasDataState } from '../../base/pageMixin';
import { defaultShareConfig } from '../../config/config';
import type { DebugPublishMeta } from '../../utils/debugPublish';
import {
    addFavorite,
    removeFavorite,
    batchCheckFavorited,
} from '../../utils/favorites';

const pageInfoLookup = getModeInfo;

type PageData = CanvasDataState & {
    worksheetId: string;
    paperTypeOptions: typeof PAPER_TYPE_OPTIONS;
    colorOptions: typeof PAPER_COLOR_OPTIONS;
    selectedPaperType: PaperType;
    selectedColor: string;
    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 PaperDrawService | null,
        _favoritedMap: {} as Record<string, boolean>,

        data: {
            pageTitle: '作业纸',
            functionId: PAPER_SHEET_WORKSHEET_ID,
            hasContent: false,
            showShareDialog: false,
            worksheetId: PAPER_SHEET_WORKSHEET_ID,
            paperTypeOptions: PAPER_TYPE_OPTIONS,
            colorOptions: PAPER_COLOR_OPTIONS,
            selectedPaperType: DEFAULT_PAPER_TYPE,
            selectedColor: DEFAULT_PAPER_COLOR,
            isPreviewFavorite: false,
            isDevEnv: false,
            debugPublishVisible: false,
            debugPublishLoading: false,
            debugPublishMeta: null,
        } as unknown as PageData,

        onLoad(options: { id?: string; type?: string }) {
            this.syncDebugPublishEnv();

            const initialType =
                options.type && isValidPaperType(options.type)
                    ? (options.type as PaperType)
                    : DEFAULT_PAPER_TYPE;

            this.setData({
                selectedPaperType: initialType,
            });

            this.initPageInfo(PAPER_SHEET_WORKSHEET_ID, '作业纸');
            this.loadFavoritedMap();
        },

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

        async drawCanvas() {
            if (!this.drawService) return;
            try {
                await (this.drawService as PaperDrawService).draw(
                    this.data.selectedPaperType,
                    this.data.selectedColor,
                );
                this.setData({ hasContent: true });
            } catch (err) {
                console.error('paperSheet draw failed', err);
                this.setData({ hasContent: false });
            }
        },

        onSelectPaperType(e: WechatMiniprogram.TouchEvent) {
            const id = e.currentTarget.dataset.id as PaperType | undefined;
            if (!id || id === this.data.selectedPaperType) return;
            this.setData({ selectedPaperType: id }, () => this.drawCanvas());
        },

        onSelectColor(e: WechatMiniprogram.TouchEvent) {
            const value = e.currentTarget.dataset.value as string | undefined;
            if (!value || value === this.data.selectedColor) return;
            this.setData({ selectedColor: value }, () => this.drawCanvas());
        },

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

        onShare() {},

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

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

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