生命周期

在 Short Night 中所有的 Component，都遵从以下的规律：

1. 在构造时传入基本运行依赖，如 Canvas 对象等
2. 使用者在外边手动赋值comp.drawInfo.xxx来修改绘制效果，调用await comp.apply()来应用comp.drawInfo
3. 在必要时，调用comp.draw()与comp.hide()来绘制和隐藏组件
4. 当不需要此 Component 时，调用comp.destroy()来销毁组件。若已经调用过comp.draw()，则需要在调用comp.destroy()前调用comp.hide()

默认情况下，EventBody、AxisMilestone、EventAxis（有.drawInfo.endDate的情况下）的绘制依赖于 DOM 节点，那么 Component 会额外做一些与 DOM 节点相关的工作：

1. 在apply()中调用this.createElement()来创建一个 DOM 节点存放在this.element中，并设置this.element.style.visibility = 'hidden';让 DOM 节点暂时不可见
2. 在draw()中调用this.createElement()
3. 在destroy()中尝试从this.container中移除this.element

单个方法详细

constructor()

Short Night 要求单个 Component 在构造时，至少要传入：

• canvas：绘制使用的 Canvas
• container：Component 的 DOM 容器。若某个 Component 的绘制依赖于 DOM 节点，那么应该将节点插入其中
• ext：组件使用的扩展管理器。同一时间线下的所有 Component 都应该使用同一个ext

apply()

apply() 方法的确切含义是应用 Component 内的this.drawInfo，该方法返回一个 Promise，指示apply()的完成与否。

当一个 Component 的apply()被调用，组件应该完成 所有除了实际绘制外的所有工作，不应该再留有任何需要动态计算的属性。最基本的，应至少完成：

• .drawInfo.box 的计算
• 如果 Component 的绘制依赖于 DOM 节点，应该调用this.createElement()来填充this.element并设置this.element.style.visibility = 'hidden';让 DOM 节点暂时不可见

若是逻辑 Component，它将会调用this.initXXX()来创建子 Component，并一一调用子 Component 的apply()。

各个逻辑 Component 的initXXX()方法如下：

• Event: initBody()、initMark、initAxis
• Axis: initBody()、initScales、initMilestones
• Timeline: initAxis()、initEvents

draw()

该方法负责将 Component 绘制出来。在一个draw()调用前，必然已经有一次或多次的apply()调用。你可以随时调用draw()来将各个阶段的drawInfo展示出来。

若 Component 的绘制依赖 DOM 节点（EventBody、AxisMilestone、EventAxis 有.drawInfo.endDate的情况下），该方法还会调用this.createElement()

若为逻辑 Component，则会调用所有子 Component 的draw()方法。

hide()

该方法负责将 Component 隐藏，它会：

• 清除 Canvas 的所有内容
• 若有的话，设置this.element.style.visibility = 'hidden';让 DOM 节点不可见

若为逻辑 Component，则会调用所有子 Component 的hide()方法。

destroy()

销毁一个组件，设置this.destroyed为true。若你想要销毁一个已被绘制过的组件，你可能需要首先调用hide()方法再调用destroy()。

Debug 模式下，调用已被销毁的组件上的任何方法都会得到一个致命错误！

若为逻辑 Component，则会调用所有子 Component 的destroy()方法。

createElement()

该方法主要存在于叶子 Component 中，用于某些依赖于 DOM 进行绘制的 Component 填充this.element，并调用将节点添加进this.container中。

this.element至少有 3 个 Class：

1. .short-night
2. .${this.name}
3. .${this.theme}

createBox（）

该方法用于计算drawInfo.box，每次组件被apply()时都会调用该方法来生成drawInfo.box。