Class defaultAbstract

Timeline self. There are 2 way to draw a timeline.

  1. draw a timeline base on event list.
  2. draw a timeline base an TimelineData. For No.1, there are like:
const timeline = new Timeline(...);
timeline.event = [...];
await timeline.apply();
timeline.draw();
```js

For No.2, Ensure you had a TimelineData, and run like this for draw a timeline:
(The TimelineData is generate by timeline.export())
```js
const timeline = new Timeline(...);
await timeline.drawFrom(timelineData);

Hierarchy

Constructors

constructor

Properties

axis axisConstructor canvas container destroyed drawInfo element? eventConstructor events ext extraData grid name ratio runtime theme defaultGrid

Accessors

l

Methods

apply checkDestroy countAxisLength countEndData countMilestoneBy countScaleBy countStartData createBox createElement destroy downloadImage draw export hide import importDrawInfo initAxis initEvents initRuntime screenshot setupRadio stretchCanvas is mount

Constructors

constructor

Properties

axis

axis: Axis = ...

Abstract axisConstructor

axisConstructor: typeof Axis

canvas

canvas: HTMLCanvasElement

The canvas where component draw on.

container

container: HTMLElement

The container which contain all of component's element.

destroyed

destroyed: boolean = false

Means that the component has been destroyed. Call any method on component when it has destroyed will got an error.

drawInfo

drawInfo: DrawInfo = ...

All info about draw. Except drawInfo, no more states be depended about draw. The same drawInfo must has same drawn on canvas and container. The this.gird should be merging in there in this.apply be called. Must can unscathed passed this.drawInfo = JSON.parse(JSON.stringify(this.drawInfo)).

Optional element

element?: HTMLElement

Optional. Be filled in this.createElement. The HTML element which be needed by component draw.

Abstract eventConstructor

eventConstructor: typeof Event

events

events: Event[] = []

ext

ext: ExtensionManager

Manage all extensions & Help component communicate for each other.

extraData

extraData: ExtraData = {}

An ext extra

See

ExtraData

grid

grid: GridConfig

name

name: SN = SN.Timeline

Component name. Be filled when the engine's class constructed.

ratio

ratio: number = ...

A ratio for draw, it's using when draw on High DPI display

runtime

runtime: RuntimeInfo = ...

Generated after timeline.apply() called. If you wanna to specify some keys, passed a object when timeline.apply() called.

See

RuntimeInfo

Abstract theme

theme: string

Theme name. Be filled when the theme's class constructed.

Static defaultGrid

defaultGrid: GridConfig = ...

Accessors

Protected l

  • get l(): ((stringArr: TemplateStringsArray, ...values: any[]) => void)

  • Print log if the DEBUG is true.

    Example

    this.lHello world

    Returns ((stringArr: TemplateStringsArray, ...values: any[]) => void)

      • (stringArr: TemplateStringsArray, ...values: any[]): void

      • Parameters

        • stringArr: TemplateStringsArray
        • Rest ...values: any[]

        Returns void

Methods

apply

  • Parameters

    • Optional runtime: Partial<RuntimeInfo>

      manually specify some runtime info.

    Returns Promise<MustCallAndReturnSuperMethod>

Protected checkDestroy

Protected countAxisLength

Protected countEndData

Protected countMilestoneBy

Protected countScaleBy

Protected countStartData

createBox

  • Create a box object to fill this.drawInfo.box. It should be called in apply() at least once. Write this method if you need to change the behavior about box.

    Returns void

createElement

  • Optional. Depend on the draw this component is need HTML element or not. Create an HTML element base on this.drawInfo to fill this.element and append to this.container. Be called in this.apply and this.draw.

    Returns MustCallAndReturnSuperMethod

destroy

  • Destroy self. It should remove all element from dom and clear all trace in canvas if that's made by self.

    Returns MustCallAndReturnSuperMethod

downloadImage

  • Download a timeline image for user It's available after after draw() been called

    Parameters

    • filename: string = ...

    Returns Promise<void>

draw

  • Draw self base on this.drawInfo. It should can be call multiple times. Call this.apply before this.draw.

    Returns MustCallAndReturnSuperMethod

export

  • Export a TimelineData for current timeline. Make sure call timeline.apply() before call this method.

    Returns

    Returns any

hide

  • Hide all of trace created by self. Hidden is not destroyed. Ensure the component is still available when this.hide have call. This method will try set "visibility: 'hidden'" for this.element rather than remove it.

    Returns MustCallAndReturnSuperMethod

import

  • Draw a timeline base on a TimelineData. (The TimelineData is generated by timeline.export())

    Returns

    Parameters

    • input: any

    Returns Promise<void>

importDrawInfo

Protected initAxis

Protected initEvents

Protected initRuntime

screenshot

  • Generate a pure image base timeline. It's available after after draw() been called

    Returns Promise<HTMLCanvasElement>

setupRadio

Protected stretchCanvas

Static is

Static mount

  • Mount a HTML element adding canvas and container. The HTML element passed will be cleared.

    Parameters

    • el: string | Element
    • themeName: string

    Returns { canvas: HTMLCanvasElement; container: HTMLElement }

    • canvas: HTMLCanvasElement
    • container: HTMLElement

Settings

Member Visibility

Theme

Generated using TypeDoc