# Events

The `PlayBack` class takes an array of `PlayBackElement` events to play.

## PlayBackElement
Basic format for all events
```js
export interface PlayBackElement {
    time:number;
    showOnTimeline?:boolean;
    timelineName?:string;
    event: {
        name:string;
        args:EventArgs;
    }
}
```

|Property|Description|
|-----|----|
|time|msFromEpoch time of the event|
|showOnTimeline|Show the event on the timeline|
|timelineName|Custom name to display on the timeline. Otherwise the event's name is displayed|
|event.name|Name of the event to be played|
|event.args|Different for each type of event. Every event has an id parameter indication which marker it should fire for.|

## Basic Events

### Create Marker
Creates a marker at the given position with the given id.
```js
export interface EventArgs {
    id:string;
    position:[number,number];
    scale?:number;
    trackColor?:string;
}
```

#### Name
`CREATE_MARKER`

#### Arguments
|Name|Description|
|--|--|
|id|Id to use to identify the marker|
|position|The position at which to create the marker. [x,y]|
|scale|(optional) Scaling factor for the marker |
|trackColor|(optional) The color of the marker track |

### Delete Marker
Deletes a marker with the given id.
```js
export interface EventArgs {
    id:string;
    position:[number,number];
    scale?:number;
}
```
#### Name
`DELETE_MARKER` 

#### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|position|The position at which the marker should be recreated on backwards play. [x,y]|
|scale|(optional) Scaling factor for the marker |

### Move Marker
Moves a marker with the given id
```js
export interface EventArgs {
        id:string;
        position:[number,number];
        prevPosition:[number,number];
}

```
### Name
`MOVE_MARKER`

#### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|position|The position where the marker should be moved. [x,y]|
|prevPosition|The position where the marker came from|
|noTrack|(optional) Indicate to not draw lines for this move |



### Open popup
Opens a popup on a marker
```js
export interface EventArgs{
    id:string;
    content:string;
}
```
### Name
`OPEN_POPUP`

#### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|content|The content of the popup. Any valid html.|


### Close popup
Closes a popup on a marker
```js
export interface EventArgs{
    id:string;
    content:string;
}
```
### Name
`CLOSE_POPUP`

#### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|content|The content of the popup. Any valid html.|


### Change icon
Changes the icon of a marker
```js
export interface EventArgs {
    id:string;
    from:IconOptions | 'default';
    to:IconOptions | 'default';
}
```
### Name
`CHANGE_ICON`

#### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|from|The icon to change from|
|to|The icon to change to|

For `IconOptions` see leaflet [docs](https://leafletjs.com/reference-1.7.1.html#icon-iconurl).

The `iconUrl` property can be a base64 encoded image.


## Flo-Icon Events
### Change main icon
Changes the main icon of the marker.
```js
export interface EventArgs {
        id:string;
        from:string;
        to:string;
    }
```
### Name
`FLO_ICON_CHANGE_MAIN_ICON`

### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|from|The icon to change from|
|to|The icon to change to|


### Change main color
Changes the main color of the marker.
```js
export interface EventArgs {
        id:string;
        from:string;
        to:string;
    }
```
### Name
`FLO_ICON_CHANGE_MAIN_COLOR`

### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|from|The color to change from|
|to|The color to change to|

### Add addon plate
Adds an addon plate to the icon
```js
export interface EventArgs {
        id:string;
        icon:string;
        side : 'right' | 'left';
        color?:string;
        slot?:number;
}
```
### Name
`FLO_ICON_ADDON_ADD`

### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|icon|Icon of the addon|
|side|Which side to put it on|
|color|(optional) Color of the addon|
|slot|(optional) Which slot to use. If not specified it adds one big addon.(1-4)|

### Remove addon plate
Removes an addon plate to the icon
```js
export interface EventArgs {
        id:string;
        icon:string;
        side : 'right' | 'left';
        color?:string;
        slot?:number;
}
```
### Name
`FLO_ICON_ADDON_REMOVE`

### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|icon|Icon of the addon|
|side|Which side to put it on|
|color|(optional) Color of the addon|
|slot|(optional) Which slot to use. If not specified it adds one big addon.(1-4)|




### Add status
Adds a status to the marker.
```js
export interface EventArgs {
        id:string;
        icon:string;
        slot:number;
}
```
### Name
`FLO_ICON_STATUS_ADD`

### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|icon|Icon of the status|
|slot|Which slot to use (1-4)|



### Remove status
Removes a status to the marker.
```js
export interface EventArgs {
        id:string;
        icon:string;
        slot:number;
}
```
### Name
`FLO_ICON_STATUS_REMOVE`

### Arguments
|Name|Description|
|--|--|
|id|Id of the marker|
|icon|Icon of the status|
|slot|Which slot to use (1-4)|

## Example Event Data
```js
[
    {
        time:1602247219471,
        event:{
            name:'CREATE_MARKER',
            args:{
                id:'12',
                position:[0,0]
            }
        }
    },
    {
        time:1602247219471 + 3000,
        event:{
            name:'MOVE_MARKER',
            args:{
                id:'12',
                position:[1,1],
                prevPosition:[0,0]
            }
        }
    },
    {
        time:1602247219471 + 5000,
        event:{
            name:'MOVE_MARKER',
            args:{
                id:'12',
                position:[2,1],
                prevPosition:[1,1]
            }
        }
    },
    {
        time:1602247219471 + 6000,
        event:{
            name:'OPEN_POPUP',
            args:{
                id:'12',
                content:'hello there'
            }
        }
    },
    {
        time:1602247219471 + 6500,
        event:{
            name:'OPEN_POPUP',
            args:{
                id:'12',
                content:'hello there 2.0'
            }
        }
    }
]
```