Compare commits
No commits in common. "master" and "release/0.1.1.277-alpha" have entirely different histories.
master
...
release/0.
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,2 +0,0 @@
|
||||
/dist
|
||||
/node_modules
|
||||
23
README.md
23
README.md
@ -1,23 +0,0 @@
|
||||
# LiteRyzJS/Timeline
|
||||
|
||||
> LiteRyzJS/Timeline is a basic timeline control written in pure JavaScript with the Canvas API. Formerly, BBTimeline.
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
- Basic timeline with JavaScript and Canvas API
|
||||
|
||||
## Screenshots
|
||||
|
||||
[](wiki/screenshot-1.png)
|
||||
|
||||
---
|
||||
|
||||
## Releases & Builds
|
||||
|
||||
See [Releases](/Ray/literyzjs-timeline/releases)
|
||||
|
||||
## Documentation
|
||||
|
||||
See [Usage](wiki/USAGE.md)
|
||||
@ -1,7 +1,4 @@
|
||||
import TimelineCanvas from './timeline-canvas.js';
|
||||
|
||||
|
||||
class TimelineBackgroundCanvas extends TimelineCanvas {
|
||||
class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
||||
constructor(parentEl, el) {
|
||||
super(parentEl, el);
|
||||
}
|
||||
@ -221,7 +218,4 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default TimelineBackgroundCanvas;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
class TimelineCanvas {
|
||||
class BBTimelineCanvas {
|
||||
constructor(parentEl, el) {
|
||||
const a = this;
|
||||
|
||||
@ -179,7 +179,4 @@ class TimelineCanvas {
|
||||
return rect;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default TimelineCanvas;
|
||||
}
|
||||
@ -1,7 +1,4 @@
|
||||
import TimelineCanvas from './timeline-canvas.js';
|
||||
|
||||
|
||||
class TimelineFlourishCanvas extends TimelineCanvas {
|
||||
class BBTimelineFlourishCanvas extends BBTimelineCanvas {
|
||||
constructor(parentEl, el) {
|
||||
super(parentEl, el);
|
||||
}
|
||||
@ -36,7 +33,4 @@ class TimelineFlourishCanvas extends TimelineCanvas {
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default TimelineFlourishCanvas;
|
||||
}
|
||||
@ -1,7 +1,4 @@
|
||||
import TimelineCanvas from './timeline-canvas.js';
|
||||
|
||||
|
||||
class TimelineForegroundCanvas extends TimelineCanvas {
|
||||
class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
||||
constructor(parentEl, el) {
|
||||
super(parentEl, el);
|
||||
}
|
||||
@ -210,7 +207,4 @@ class TimelineForegroundCanvas extends TimelineCanvas {
|
||||
return posY;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default TimelineForegroundCanvas;
|
||||
}
|
||||
@ -1,9 +1,8 @@
|
||||
import TimelineBackgroundCanvas from './timeline-background-canvas.js';
|
||||
import TimelineFlourishCanvas from './timeline-flourish-canvas.js';
|
||||
import TimelineForegroundCanvas from './timeline-foreground-canvas.js';
|
||||
|
||||
|
||||
class Timeline {
|
||||
/**
|
||||
* BBTimeline
|
||||
* @version v0.1.1.277 apha (2023/11/12 0106)
|
||||
*/
|
||||
class BBTimeline {
|
||||
constructor(el) {
|
||||
const a = this;
|
||||
|
||||
@ -50,9 +49,9 @@ class Timeline {
|
||||
|
||||
const canvasList = a.Container.getElementsByTagName("canvas");
|
||||
|
||||
a.Layer.Background = new TimelineBackgroundCanvas(a, canvasList[0]);
|
||||
a.Layer.Flourish = new TimelineFlourishCanvas(a, canvasList[1]);
|
||||
a.Layer.Markers = new TimelineForegroundCanvas(a, canvasList[2]);
|
||||
a.Layer.Background = new BBTimelineBackgroundCanvas(a, canvasList[0]);
|
||||
a.Layer.Flourish = new BBTimelineFlourishCanvas(a, canvasList[1]);
|
||||
a.Layer.Markers = new BBTimelineForegroundCanvas(a, canvasList[2]);
|
||||
|
||||
}
|
||||
|
||||
@ -374,7 +373,4 @@ class Timeline {
|
||||
|
||||
OnDblClick(sender, e, event) { /* delegate */ }
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default Timeline;
|
||||
}
|
||||
13
bbtimeline.min.js
vendored
Normal file
13
bbtimeline.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -10,13 +10,11 @@
|
||||
<!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||
<!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
|
||||
<script src="dist//timeline.min.js"></script>
|
||||
|
||||
<!-- <script src="bbtimeline.js"></script> -->
|
||||
<!-- <script src="bbtimeline-canvas.js"></script> -->
|
||||
<!-- <script src="bbtimeline-background-canvas.js"></script> -->
|
||||
<!-- <script src="bbtimeline-flourish-canvas.js"></script> -->
|
||||
<!-- <script src="bbtimeline-foreground-canvas.js"></script> -->
|
||||
<script src="bbtimeline.js"></script>
|
||||
<script src="bbtimeline-canvas.js"></script>
|
||||
<script src="bbtimeline-background-canvas.js"></script>
|
||||
<script src="bbtimeline-flourish-canvas.js"></script>
|
||||
<script src="bbtimeline-foreground-canvas.js"></script>
|
||||
|
||||
<!-- <script src="bbtimeline.min.js"></script> -->
|
||||
|
||||
@ -147,7 +145,7 @@ textarea {
|
||||
|
||||
<script>
|
||||
|
||||
var timeline1 = new LiteRyzJS.Timeline("myCanvas");
|
||||
var timeline1 = new BBTimeline("myCanvas");
|
||||
timeline1.OnMouseDown = function(sender, e, event) {
|
||||
LogInfo("");
|
||||
LogInfo("OnMouseDown");
|
||||
|
||||
2343
package-lock.json
generated
2343
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
@ -1,11 +0,0 @@
|
||||
{
|
||||
"name": "LiteRyzJS/Timeline",
|
||||
"version": "0.2.0.121",
|
||||
"devDependencies": {
|
||||
"webpack": "^5.93.0",
|
||||
"webpack-cli": "^5.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack"
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
// src/index.js
|
||||
import Timeline from './timeline/timeline.js';
|
||||
|
||||
|
||||
export { Timeline };
|
||||
@ -1,48 +0,0 @@
|
||||
const path = require('path');
|
||||
const { version } = require('./package.json');
|
||||
const webpack = require('webpack');
|
||||
|
||||
|
||||
class PrependVersionPlugin {
|
||||
apply(compiler) {
|
||||
compiler.hooks.emit.tapAsync('PrependVersionPlugin', (compilation, callback) => {
|
||||
Object.keys(compilation.assets).forEach((filename) => {
|
||||
if (filename.endsWith('.js')) {
|
||||
const asset = compilation.assets[filename];
|
||||
|
||||
const headerText = `/*!\n * LiteRyzJS/Timeline v${version}\n * Copyright 2023-2024 Ray Lam (https://www.hiimray.co.uk)\n *\n */\n`;
|
||||
|
||||
const newContent = headerText + asset.source();
|
||||
|
||||
compilation.assets[filename] = {
|
||||
source: () => newContent,
|
||||
size: () => newContent.length,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
callback();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
timeline: './src/index.js'
|
||||
},
|
||||
output: {
|
||||
filename: `[name].dist.js`,
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
library: 'LiteRyzJS',
|
||||
libraryTarget: 'umd',
|
||||
globalObject: 'this'
|
||||
},
|
||||
mode: 'production', // development|production
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.VERSION': JSON.stringify(version)
|
||||
}),
|
||||
new PrependVersionPlugin()
|
||||
]
|
||||
};
|
||||
345
wiki/USAGE.md
345
wiki/USAGE.md
@ -1,345 +0,0 @@
|
||||
# Usage: v0.2.0.121 alpha
|
||||
|
||||
This is the usage guide for [LiteRyzJS/Timeline](/literyzjs-timeline), version 0.2.0.121 alpha.
|
||||
|
||||
## Usage
|
||||
|
||||
### LiteRyzJS.Timeline(el)
|
||||
|
||||
Creates a timeline.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| el | string | Identifier of canvas element |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
<canvas id="myCanvas"></canvas>
|
||||
|
||||
var timeline1 = new LiteRyzJS.Timeline("myCanvas");
|
||||
```
|
||||
|
||||
### Clear()
|
||||
|
||||
Clear timeline and blank canvas.
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
timeline1.Clear();
|
||||
```
|
||||
|
||||
### Invalidate(redrawAxis, redrawMarkers)
|
||||
|
||||
Invalidates and redraws the canvas.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| redrawAxis | bool | Redraw the whole canvas (with the axis and labels only) |
|
||||
| redrawMarkers | bool | Clear the the contents of the graph and redrawn the markers |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
timeline1.Invalidate(true, true);
|
||||
```
|
||||
|
||||
### Load(date)
|
||||
|
||||
Set the start date of the timeline and load the start date.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date (yyyy-MM-dd) | The start date of the timeline |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
timeline1.Load("2023-10-08");
|
||||
```
|
||||
|
||||
### Show(date)
|
||||
|
||||
Load the timeline starting with the date.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date (yyyy-MM-dd) | The date of the timeline |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
timeline1.Show("2023-10-08");
|
||||
```
|
||||
|
||||
### DateToString(date, pattern)
|
||||
|
||||
Convert a JavaScript date to string using the .NET standard format for date-time.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date (yyyy-MM-dd) | The start date of the timeline |
|
||||
|
||||
#### Result
|
||||
|
||||
Returned a string of the date-time.
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
timeline1.DateToString(new Date(), "yyyy-MM-dd");
|
||||
```
|
||||
|
||||
### ConvertToDate(date)
|
||||
|
||||
Convert a date string "yyyy-MM-dd" into a JavaScript date object.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date (yyyy-MM-dd) | The date |
|
||||
|
||||
#### Result
|
||||
|
||||
Returned a JavaScript date object.
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
timeline1.ConvertToDate("2023-10-08");
|
||||
```
|
||||
|
||||
### CalcEndDate()
|
||||
|
||||
Calculates the end date displayed on the current view of the timeline.
|
||||
|
||||
#### Result
|
||||
|
||||
Returns a string of the laste date on-screen in "yyyy-MM-dd" format.
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
timeline1.DateToString(new Date(), "yyyy-MM-dd");
|
||||
```
|
||||
|
||||
### AddEvent(date, label, options)
|
||||
|
||||
Add an event marker to the timeline. A marker can contain multiple events.
|
||||
|
||||
#### Options
|
||||
|
||||
```javascript
|
||||
{
|
||||
Title: "",
|
||||
Description: "",
|
||||
Link: "",
|
||||
Tag: null
|
||||
}
|
||||
```
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date ("yyyy-MM-dd") | The date of the marker |
|
||||
| label | string | The label of the marker, null to leave unchanged otherwise update existing label |
|
||||
| Title | string | Title of the event |
|
||||
| Description | string | Description of the event |
|
||||
| Link | string | Link to the event |
|
||||
| Tag | string | Extra data object for this event |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
const markerName = "Random Marker #" + GetRandy(10000, 99999);
|
||||
|
||||
timeline1.AddEvent(markerDate, markerName, { Title: markerName, Description: "This is a randomly generated marker" });
|
||||
```
|
||||
|
||||
### DeleteMarker(date)
|
||||
|
||||
Delete marker and all events on a date.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date (yyyy-MM-dd) | The date |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
timeline1.DeleteMarker("2023-10-08");
|
||||
```
|
||||
|
||||
### UpdateLabel(date, label)
|
||||
|
||||
Update the label on a marker.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date (yyyy-MM-dd) | The date |
|
||||
| label | string | Label text |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
timeline1.UpdateLabel("2023-10-08", "New Label");
|
||||
```
|
||||
|
||||
### UpdateMarker(date, borderColour, backColour)
|
||||
|
||||
Update the style of a marker.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date (yyyy-MM-dd) | The date |
|
||||
| borderColour | Hex colour | Colour of the marker's border |
|
||||
| backColour | Hex colour | Fill colour of the marker |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
timeline1.UpdateMarker("2023-10-08", "#E68422", "#FAE7D3");
|
||||
```
|
||||
|
||||
### FindDatePosition(date)
|
||||
|
||||
Find the position of the date on the timeline chart. Date must be within the display range of the chart.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date (yyyy-MM-dd) | The date |
|
||||
|
||||
#### Result
|
||||
|
||||
Null, if date not found or is not currently visible.
|
||||
|
||||
```javascript
|
||||
{
|
||||
Date: "yyyy-MM-dd",
|
||||
X: 0
|
||||
}
|
||||
```
|
||||
|
||||
| Property | Type | Description |
|
||||
|----------|------|-------------|
|
||||
| Date | Date (yyyy-MM-dd) | The date |
|
||||
| X | integer | The horizontal locaton of the marker |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
const coords = timeline1.FindDatePosition("2023-10-08");
|
||||
```
|
||||
|
||||
### FindVisibleEvents()
|
||||
|
||||
Find all markers/events that are within the current visible date range.
|
||||
|
||||
#### Result
|
||||
|
||||
Null, if no markers found.
|
||||
|
||||
```javascript
|
||||
[{
|
||||
Date: date,
|
||||
Label: "",
|
||||
Position: { X: 0, Y: 0 },
|
||||
Events: [],
|
||||
HitBox: null,
|
||||
BorderColour: "#3A5D9C",
|
||||
BackColour: "#D4DEEF"
|
||||
}]
|
||||
```
|
||||
|
||||
| Property | Type | Description |
|
||||
|----------|------|-------------|
|
||||
| Date | Date (yyyy-MM-dd) | The date |
|
||||
| Label | string | Text label of the marker |
|
||||
| Position | Point { X: float, Y: float } | The location of the marker |
|
||||
| Events | Array of Events | An array of events, see *FindEvent*. |
|
||||
| HitBox | Rectangle { X: float, Y: float, W: float, H: float } | The hitbox or rectangle that repersents the marker and label |
|
||||
| BorderColour | Hex colour | Colour of the marker border |
|
||||
| BackColour | Hex colour | Fill colour of the marker |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
const visibleEvents = timeline1.FindVisibleEvents();
|
||||
```
|
||||
|
||||
### FindEvent(date)
|
||||
|
||||
Find a list of events by date (yyyy-MM-dd).
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date (yyyy-MM-dd) | The date |
|
||||
|
||||
#### Result
|
||||
|
||||
Null, if no events found.
|
||||
|
||||
```javascript
|
||||
[{
|
||||
Title: "",
|
||||
Description: "",
|
||||
Link: "",
|
||||
Tag: null
|
||||
}]
|
||||
```
|
||||
|
||||
| Property | Type | Description |
|
||||
|----------|------|-------------|
|
||||
| Title | string | Title of the event |
|
||||
| Description | string | Description of the event |
|
||||
| Link | string | Link to the event |
|
||||
| Tag | string | Extra data object for this event |
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
const events = timeline1.FindEvent("2023-10-08");
|
||||
```
|
||||
|
||||
### FindEventsByCoords(x, y)
|
||||
|
||||
Find a list of events by a point (x, y) on the chart.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|-----------|------|-------------|
|
||||
| date | Date (yyyy-MM-dd) | The date |
|
||||
|
||||
#### Result
|
||||
|
||||
Null, if no events found. For results, see *FindEvent*.
|
||||
|
||||
#### Examples
|
||||
|
||||
```javascript
|
||||
const events = timeline1.FindEventsByCoords(400, 280);
|
||||
```
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
Loading…
Reference in New Issue
Block a user