Short Night 中的9个 Component

Component 结构

一个由 Short Night 绘制出的 Timeline 包含8个子组件。一个 TImeline 包含：

• 一个 轴（Axis） 包括
  • 多个 里程碑（AxisMilestone）
  • 多个 比例尺（AxisScale）
  • 一个 轴体（AxisBody）
• 许多个 事件（Event），单个事件包括：
  • 一个 事件体（EventBody）
  • 一个 事件标记（EventMark）
  • 可能有一个 事件辅轴（EventAxis）

下图是 Short Night Component 结构图：

例子

下图是 Short Night 绘制出的一个 Timeline 例子：

其中；

Axis 包括 EventBody、AxisMilestone、AxisScale 三个子组件：

• AxisBody 黑色的竖线。表示整个时间
• AxisMilestone 黑色竖线上的包含年份的灰色方块。表示一些大时间节点，如年份
• AxisScale 黑色竖线上的橙色小方块。表示一些小时间节点，如月份或季度

Event 包括 EventBody、AxisMilestone、AxisScale 三个子组件：

• EventBody 淡灰色的、包含很多文字的大块。表示事件信息
• EventMark 黑色竖线上的红色圆点。表示事件发生的时间
• EventAxis 红色圆点右侧的黑色细线。表示事件持续与结束的时间

Timeline 包括 Event 和 Axis。

叶子 Component 与逻辑 Component

叶子 Component 就是下图中的叶子节点，包括 EventBody、EventMark、EventAxis、AxisBody、AxisMilestone、AxisScale 共6个。

逻辑 Component 就是剩下的3个，它们都有子节点，分别是 Timeline、Event、Axis。

叶子 Component 负责真正的绘制工作，只有叶子 Component 会实际上往 Canvas 画东西、添加 DOM 节点。逻辑 Component 负责其子 Component，控制它们完成绘制工作。