@edv4h/usketch-plugin-timter (英语)
共享计时器为 画布形状 (独出真言之源. A 类 timer 形状是
可移位/可移动并同步通过普通形状映射; 时间运行与
共享 ServerClock 所以每个用户都同意"现在" 插件也显示
调试HUD控制码头的每个计时器(组"Timter").
域名模式( E)timer-model)是纯的,无框架的,以及时间源
不可知论——每个功能都具有明确的 serverNow。 。 。 .
安装
import { createTimterPlugin } from "@edv4h/usketch-plugin-timter";
const timter = createTimterPlugin({
serverClock, // your shared ServerClock
userId, // optional, attribution (reserved)
});
定制形状的外观—— renderShape
默认是定时器用内置视觉制作的. 为了配合你自己的设计
(手绘主题、设计符号、自定义控制),通过a renderShape
变相道具。 它得到的形状,它的活 TimerCore新鲜的 serverNow
(在运行时重复每一次自拍),计时器 actions编辑
插件拥有勾选和商店写入——您的渲染器只绘制和调用
行动.
import {
createTimterPlugin,
displayMs,
formatDuration,
isDone,
} from "@edv4h/usketch-plugin-timter";
createTimterPlugin({
serverClock,
renderShape: ({ shape, core, serverNow, actions }) => (
<div className="my-timer" data-done={isDone(core, serverNow)}>
<span className="my-timer__time">
{formatDuration(displayMs(core, serverNow))}
</span>
<button type="button" onClick={actions.toggle}>
{shape.running ? "pause" : "start"}
</button>
<button type="button" onClick={actions.reset}>reset</button>
</div>
),
});
actions数字 :
| 动作 | 效果 |
|---|---|
toggle() | 暂停时启动, 运行时暂停 |
reset() | 返回已配置的状态, 停止状态 |
switchType() | 预付至下一个已登记类型(仅暂停) |
adjust(deltaMs) | 更改所配置的时间长度 deltaMs (基于期限的种类,仅暂停) |
按钮应该叫
e.stopPropagation()打开onPointerDown所以点击 不开始画布拖动——看defaultRenderTimerShape为图案.
延伸,不要替换
defaultRenderTimerShape 导出后,您可以将内置的图像包起来
而不是改写:
import { defaultRenderTimerShape } from "@edv4h/usketch-plugin-timter";
createTimterPlugin({
serverClock,
renderShape: (ctx) => (
<div className="my-frame">{defaultRenderTimerShape(ctx)}</div>
),
});
添加计时器类型 - registerTimerKind
countdown 财务报告和审定财务报表 stopwatch 被构建在。 登记自己的类型(例如:.
pomodoro)在启动时一次;模型过渡、形状渲染器和
控制台都像内置的一样. switchType() 周期周期
注册类型.
import { registerTimerKind, TIMER_KINDS } from "@edv4h/usketch-plugin-timter";
registerTimerKind("pomodoro", {
...TIMER_KINDS.countdown, // reuse countdown transitions
icon: "🍅",
// always a 25-minute work block
initial: () => ({ anchorAt: null, accumMs: 25 * 60_000, durationMs: 25 * 60_000 }),
});
A 类 TimerKind 定义纯切换 TimerCore数字 :
interface TimerKind {
icon?: string; // glyph used by the built-in renderer / Controls dock
displayMs(c, serverNow): number;
isDone(c, serverNow): boolean;
onStart(c, serverNow): Pick<TimerCore, "anchorAt" | "accumMs">;
onPause(c, serverNow): Pick<TimerCore, "anchorAt" | "accumMs">;
initial(durationMs): Pick<TimerCore, "anchorAt" | "accumMs" | "durationMs">;
}
出口模式
start • 妇女 pause • 妇女 reset • 妇女 initialCore • 妇女 displayMs • 妇女 isDone • 妇女
formatDuration • 妇女 getTimerKind • 妇女 timerTypes • 妇女 registerTimerKind • 妇女
TIMER_KINDS + 类型 TimerCore • 妇女 TimerType • 妇女 TimerKind。 。 。 .
形状导出 : TIMER_SHAPE_TYPE • 妇女 TimerShapeData • 妇女 defaultRenderTimerShape
• 妇女 makeTimerShape • 妇女 dispatchTimerShapeAction + 类型
TimerShapeRenderer • 妇女 TimerRenderContext • 妇女 TimerShapeActions。 。 。 .