import { l as TCountdownRender } from "./types-Cezkmn_V.mjs"; //#region src/plugins/ring.d.ts /** 档位(最外圈/数码区/弧的当前色,及内圈末分钟三色) */ type TRingZone = "normal" | "green" | "yellow" | "red" | "off"; interface IRingColors { /** 分钟>0 时的常态色 */ normal: string; green: string; yellow: string; red: string; /** 未点亮刻度色 */ off: string; } /** colorAt 回调入参:自定义「当前主题色」 */ interface IRingColorInfo { remaining: number; totalMin: number; sec: number; colors: IRingColors; } /** 逐刻度上色入参;返回 undefined 用内置档位色 */ interface IRingTickInfo { index: number; total: number; on: boolean; finalMin: boolean; sec: number; remaining: number; colors: IRingColors; } /** 最内圈逐分钟上色入参(最后一分钟固定三色,不走此回调) */ interface IRingMinuteInfo { /** 分钟序号:1 = 倒数第二分钟…N-1 = 最外那一分钟 */ index: number; /** 总分钟数(由初始总时长决定,外部不可预知,故经回调下发) */ count: number; fromMs: number; toMs: number; remaining: number; colors: IRingColors; } /** 各部件 render 自定义渲染共享的帧上下文(内部已算好,回调直接用) */ interface IPartFrame { /** 该部件的容器 (跨帧持久,可首帧建、后续更新) */ host: SVGElement; remaining: number; totalMin: number; sec: number; finalMin: boolean; colors: IRingColors; } interface IRingTicksFrame extends IPartFrame { count: number; /** 点亮格数(= 当前秒位,归零为 0) */ lit: number; /** 第 i 根刻度档位 */ zoneAt: (i: number) => TRingZone; } interface IRingArcFrame extends IPartFrame { radius: number; segments: number; /** 每段弧度(度) */ span: number; /** 本帧旋转角(度) */ rotation: number; /** 当前主题色 */ color: string; } interface IRingInnerFrame extends IPartFrame { radius: number; /** 初始总时长(ms) */ total: number; redAt: number; yellowAt: number; /** 剩余时间 ms → 角度(弧度),用于画排空弧 */ angleAt: (ms: number) => number; } interface IRingDigitFrame extends IPartFrame { /** 已由 count-down 的 fmt 格式化的文本 */ text: string; /** 已解析的当前主题色(含 colorAt 覆盖) */ color: string; } /** 各部件配置基类:display:false 等价于把该字段设为 false(不生成 SVG) */ interface IPartBase { display?: boolean; } /** 最外圈刻度 */ interface IRingTicks extends IPartBase { /** 刻度数量,默认 60 */ count?: number; /** 外端半径,默认 46.5 */ radius?: number; /** 粗细,默认 2.6 */ width?: number; /** 长度,默认 8.5 */ length?: number; /** 逐刻度上色;返回 undefined 用内置档位色 */ colorAt?: (info: IRingTickInfo) => string | undefined; /** 自定义渲染:内部算好 lit/档位等,host 为持久 */ render?: (frame: IRingTicksFrame) => void; } /** 装饰弧(外2圈 / 外3圈通用) */ interface IRingArc extends IPartBase { /** 半径 */ radius?: number; /** 线宽 */ width?: number; /** 段数,默认 3 */ segments?: number; /** 每段弧度(度),默认 60 */ span?: number; /** 自定义当前主题色 */ colorAt?: (info: IRingColorInfo) => string; /** 自定义渲染:内部算好 rotation/color 等 */ render?: (frame: IRingArcFrame) => void; } /** 最内圈进度环 */ interface IRingInner extends IPartBase { /** 半径,默认 27.5 */ radius?: number; /** 线宽,默认 2.8 */ width?: number; /** 灰底色 */ track?: string; /** 逐分钟上色(最后一分钟固定三色) */ colorAt?: (info: IRingMinuteInfo) => string; /** 自定义渲染:内部给出 angleAt/total 等 */ render?: (frame: IRingInnerFrame) => void; } /** 中心数码区 */ interface IRingDigit extends IPartBase { /** "segment"(七段·默认) | "text"(文字字体) */ mode?: "segment" | "text"; /** 目标宽度,默认 46 */ size?: number; /** text 模式字体 */ font?: string; /** 自定义当前主题色 */ colorAt?: (info: IRingColorInfo) => string; /** 完全自定义渲染(优先于 mode) */ render?: (frame: IRingDigitFrame) => void; } /** 部件字段:false/null 隐藏;对象则按其配置(与默认合并) */ type TPart = false | null | T; /** createRingRender 返回值:渲染函数 + destroy(释放引用、防泄漏) */ type IRingRender = TCountdownRender & { destroy: (el?: Element) => void; }; interface IRingRenderOptions { /** 类名前缀,默认 "rg-" */ prefix?: string; /** 进入红色档的秒数,默认 3 */ redAt?: number; /** 进入黄色档的秒数,默认 10 */ yellowAt?: number; /** 旋转 / 排空基准方向,true 顺时针(默认) */ clockwise?: boolean; /** 是否发光(drop-shadow 滤镜,GPU 成本最高的部分),默认 false。多实例慎开 */ glow?: boolean; /** 主题色(同时写成 CSS 变量;options 优先级高于样式表默认) */ colors?: Partial; /** 最外圈刻度 */ ticks?: TPart; /** 外2圈装饰弧(跟随计时方向旋转) */ arcA?: TPart; /** 外3圈装饰弧(反向旋转;归零回基准位与外2圈重合) */ arcB?: TPart; /** 最内圈进度环 */ inner?: TPart; /** 中心数码区 */ digit?: TPart; } /** * 圆形数码倒计时渲染器(count-down 的 render 插件)。四层同心环(外→内): * 1. 最外圈刻度:当前分钟剩余秒,每秒灭一格;分钟>0 常态色,最后一分钟按秒变红/黄/绿。 * 2. 外2圈:装饰弧,跟随计时方向每秒转 1 刻度;色取当前主题。 * 3. 外3圈:更细的装饰弧,反向旋转;归零回基准位与外2圈重合。 * 4. 最内圈:灰底环 + 彩色「剩余」逐帧排空;逐分钟上色,最后一分钟按阈值分红/黄/绿。 * * 配置按部件分组:`ticks/arcA/arcB/inner/digit`,每个可设 false 隐藏、或给对象配置 * (display/几何/colorAt/render 自定义渲染);公用项(prefix/redAt/yellowAt/clockwise/glow/colors)在顶层。 * 颜色/线宽尽量经 CSS 变量(`--rg-*`)控制,options 覆盖优先。 * * @example * import { countdown, createRingRender } from "@codejoo/counter"; * import "@codejoo/counter/ring.css"; * countdown(300000, "#t", { fmt: "mm:ss", render: createRingRender() }); */ declare function createRingRender(options?: IRingRenderOptions): IRingRender; //#endregion export { IRingDigit as a, IRingInnerFrame as c, IRingRenderOptions as d, IRingTickInfo as f, createRingRender as g, TRingZone as h, IRingColors as i, IRingMinuteInfo as l, IRingTicksFrame as m, IRingArcFrame as n, IRingDigitFrame as o, IRingTicks as p, IRingColorInfo as r, IRingInner as s, IRingArc as t, IRingRender as u };