`theme`定数

リファレンスの説明と例は英語です。見出しと目次は日本語です。

The line design's drawing, for the package's own renderer: black line art, a header rule, four tick marks and a big blue number.

Most code wants calendarIcon from this file instead, which draws with it.

インポート

import { theme } from "@johnmorrisdotca/koyomi-calendars/themes/line";

定義

const theme: Def = {
    box: [56, 40, 260, 255],
    numeral: "centre",
    layout: () => ({ page: LINE, yearZone: LINE }),
    draw: ({ p, dark, l }) => {
        const k = dark ? { line: "#f1f1f1", body: "#141414", num: "#5aa0e6" } : { line: "#080808", body: "#ffffff", num: "#2f78bd" };
        const tick = (cx: number) => `<path d="M${cx} 57.5V84.5" stroke="${k.line}" stroke-width="11" stroke-linecap="round"/>`;
        const [x, y, w, h] = l.page;
        const cx = x + w / 2;
        const size = fit([p.monthShortUp, p.year].filter(Boolean).join(" "), 20, 190, 0.72);
        const [db, lb] = stack(y, y + h, [[109 * CAP, 0], [size * CAP, 18]]);
        const label = `<text x="${r2(cx)}" y="${r2(lb!)}" text-anchor="middle" font-size="${r2(size)}" font-family="${BLACK}" font-weight="800" fill="${k.num}">` +
            `<tspan data-part="month">${esc(p.monthShortUp)}</tspan>${p.year ? `<tspan data-part="year" dx="${r2(size * 0.35)}">${esc(p.year)}</tspan>` : ""}</text>`;
        return (rect(76.5, 73.5, 219, 200, 18, k.body, `stroke="${k.line}" stroke-width="13"`) +
            `<path d="M72 115h228" stroke="${k.line}" stroke-width="11"/>` +
            tick(120) + tick(164) + tick(208) + tick(252) +
            part("day", dayText(cx, db!, p.day, 109, k.num, 900, { family: BLACK })) +
            label);
    },
}

メンバー

名前	型	説明
`box`	`Rect`	The drawing's own coordinate box: x, y, width, height.
`numeral`	`"centre"`	Where the day sits in its page. Every theme centres it; a look that places it otherwise says so here, for 1, 9, 30 and 31 alike.
`layout`	`(year: boolean, weekend?: boolean) => CalendarLayout`	The layout with a year and without one (the drawing is re-centred when the year is absent), and, for a theme with a weekend page, as that page.
`draw`	`(c: Ctx) => string`
`rings` (省略可)	`readonly [x: number, y: number, width: number] \| undefined`	Where `rings` stand: x, y and width of the page's top edge, in the drawing's units. A theme without it ignores `rings`.
`weekend` (省略可)	`true \| undefined`	The theme has a weekend page (`weekend: "split"`).
`extras` (省略可)	`((input: ExtrasInput) => Extras) \| undefined`	Works out the extra data a tear-off page draws. A theme without it is given none.

例

import { theme } from "@johnmorrisdotca/koyomi-calendars/themes/line";

console.log(theme.box.length);

出力（このページを作ったときに実行した結果）

ソースを見る GitHub で編集@johnmorrisdotca/koyomi-calendars 0.3.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。

theme定数

定義

メンバー

例

`theme`定数