Merge pull request #7 from thelostword/dev

Dev
thelostword · Jun 8, 2023 · 3a8e1a1 · 3a8e1a1
2 parents 3859d8d + d8aee65
commit 3a8e1a1
Show file tree

Hide file tree

Showing 14 changed files with 584 additions and 609 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022-present XiuLiu <https://www.github.com/thelostword>
+Copyright (c) 2022-present losting<https://www.github.com/thelostword>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 # Timeline
 Canvas 时间轴，支持缩放、拖拽、无限滚动、自定义控制级别
 ![预览图](./example/demo.png)
-[演示地址](thelostword.github.io/timeline/)
+[演示地址](https://thelostword.github.io/timeline/)
 
 ## 如何使用
 ### ES Module
@@ -64,38 +64,40 @@ timeline.on('dragged', (timestamp) => {
 
 ## 配置文档
 ### Config
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| fill | boolean | true | 是否适应父容器宽高，若为false则需要手动设定canvas宽高 |
-| width | number | 1000 | canvas宽度 |
-| height | number | 60 | canvas高度 |
-| bgColor | string | rgba(0,0,0,0.5) | canvas背景色 |
-| textColor | string | #ffffff | 文字颜色 |
-| scaleColor | string | #ffffff | 刻度颜色 |
-| scaleSpacing | number | 7 | 刻度间距 |
-| areaBgColor | string | #ffffff55 | 阴影区域背景颜色 |
-| pointColor | string | #00aeec | 当前时间指针颜色 |
-| pointWidth | number | 3 | 当前时间指针宽度 |
-| fps | number | 60 | 帧数 |
-| zoom | integer | 3 | 初始缩放值，`0` ~ `timeSpacingList.length - 1` 之间(包含)的正整数。 对应 `timeSpacingList` 的索引值 |
-| timeSpacingList | number[] | [10, 100, 1000, 10000, 60000, 600000, 3600000, 86400000, 604800000] | 自定义每刻度所占时间（毫秒） |
-| ~~maxZoom~~ | - | - | 已移除，设置 `timeSpacingList` 替代 |
-| ~~minZoom~~ | - | - | 已移除，设置 `timeSpacingList` 替代 |
-| ~~timeFormat~~ | - | - | 已移除 |
+| 属性 | 类型 | 是否必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| fill | boolean | 否 | true | 是否适应父容器宽高，若为false则需要手动设定canvas宽高 |
+| width | number | 否 | 1000 | canvas宽度 |
+| height | number | 否 | 60 | canvas高度 |
+| bgColor | string | 否 | rgba(0,0,0,0.5) | canvas背景色 |
+| textColor | string | 否 | #ffffff | 文字颜色 |
+| scaleColor | string | 否 | #ffffff | 刻度颜色 |
+| scaleSpacing | number | 否 | 7 | 刻度间距 |
+| areaBgColor | string | 否 | #ffffff55 | 阴影区域背景颜色 |
+| pointColor | string | 否 | #00aeec | 当前时间指针颜色 |
+| pointWidth | number | 否 | 3 | 当前时间指针宽度 |
+| fps | number | 否 | 60 | 帧数 |
+| zoom | integer | 否 | 3 | 初始缩放值，`0` ~ `timeSpacingList.length - 1` 之间(包含)的正整数。 对应 `timeSpacingList` 的索引值 |
+| timeSpacingList | number[] | 否 | `[10, 100, 1000, 10000, 60000, 600000, 3600000, 86400000, 604800000]` | 自定义每刻度所占时间（毫秒） |
+| scaleHeight | object | 否 | `{ long: this.$canvas.height / 3, short: this.$canvas.height / 10 }` | 刻度高度，如果设置此项，则long、short必填 |
+| ~~maxZoom~~ | - | - | - | 已移除，设置 `timeSpacingList` 替代 |
+| ~~minZoom~~ | - | - | - | 已移除，设置 `timeSpacingList` 替代 |
+| ~~timeFormat~~ | - | - | - | 已移除 
 
 ### Events
 
 | 事件名 | 说明 | 参数示例 |
 | --- | --- | --- |
-| draw | timeline 的绘制方法 | draw([DrawConfig](#DrawConfig)) |
+| draw | timeline 的自定义绘制方法 | draw([DrawConfig](#DrawConfig)) |
 | on | 监听 timeline 内部事件，目前只支持事件名 `dragged`， 拖动结束的回调事件。 | on(name, (listener) => void) |
 | off | 取消监听 timeline 内部事件 | off(name, listener)、 取消全部 off('*') |
+| getCurrentTime | 获取当前时间 | - |
 
 
 #### DrawConfig
 | 参数 | 类型 | 是否必填 | 默认值 | 说明 |
 | --- | --- | --- | --- | --- |
-| currentTime | number | 否 | Date.now() | 中心点指向时间戳（毫秒） |
+| currentTime | number | 否 | `Date.now()` | 中心点指向时间戳（毫秒） |
 | areas | Object[] | 否 | [] | 阴影区配置，见 [AreaConfig](#AreaConfig) |
 
 ##### AreaConfig
@@ -143,4 +145,4 @@ timeline.on('dragged', (timestamp) => {
 
 [MIT](https://opensource.org/licenses/MIT)
 
-Copyright (c) 2022-present, XiuLiu <https://www.github.com/thelostword>
+Copyright (c) 2022-present losting<https://www.github.com/thelostword>
diff --git a/README_EN.md b/README_EN.md
@@ -2,7 +2,7 @@
 # timeline
 Canvas timeline supports zooming, dragging, infinite scrolling, and custom control levels.
 ![preview](./example/demo.png)
-[Demo address](thelostword.github.io/timeline/)
+[Demo address](https://thelostword.github.io/timeline/)
 
 ## Usage
 ### ES Module
@@ -64,36 +64,38 @@ timeline.on('dragged', (timestamp) => {
 
 
 ### Config
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| fill | boolean | false | Whether to fit the parent container width and height. If false, you need to manually set the width and height of the canvas |
-| width | number | 1000 | The width of the canvas |
-| height | number | 60 | The height of the canvas |
-| bgColor | string | rgba(0,0,0,0.5) | The background color of the canvas |
-| textColor | string | #ffffff | The color of the text |
-| scaleColor | string | #ffffff | The color of the scale |
-| scaleSpacing | number | 7 | The spacing between scales |
-| areaBgColor | string | #ffffff55 | The background color of the shaded area |
-| pointColor | string | #00aeec | The color of the current time pointer |
-| pointWidth | number | 3 | The width of the current time pointer |
-| fps | number | 60 | The number of frames per second |
-| zoom | integer | 2 | The initial zoom value, a integer between `0` and `timeSpacingList.length - 1` (inclusive),The index value corresponding to `timeSpacingList`. |
-| timeSpacingList | number[] | [10, 100, 1000, 10000, 60000, 600000, 3600000, 86400000, 604800000] | Customize the time (in milliseconds) occupied by each tick. |
-| ~~maxZoom~~ | - | - | Removed, use `timeSpacingList` instead. |
-| ~~minZoom~~ | - | - | Removed, use `timeSpacingList` instead. |
-| ~~timeFormat~~ | - | - | Removed. |
+| Property | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| fill | boolean | No | false | Whether to fit the parent container width and height. If false, you need to manually set the width and height of the canvas |
+| width | number | No | 1000 | The width of the canvas |
+| height | number | No | 60 | The height of the canvas |
+| bgColor | string | No | rgba(0,0,0,0.5) | The background color of the canvas |
+| textColor | string | No | #ffffff | The color of the text |
+| scaleColor | string | No | #ffffff | The color of the scale |
+| scaleSpacing | number | No | 7 | The spacing between scales |
+| areaBgColor | string | No | #ffffff55 | The background color of the shaded area |
+| pointColor | string | No | #00aeec | The color of the current time pointer |
+| pointWidth | number | No | 3 | The width of the current time pointer |
+| fps | number | No | 60 | The number of frames per second |
+| zoom | integer | No | 2 | The initial zoom value, a integer between `0` and `timeSpacingList.length - 1` (inclusive),The index value corresponding to `timeSpacingList`. |
+| timeSpacingList | number[] | No | [10, 100, 1000, 10000, 60000, 600000, 3600000, 86400000, 604800000] | Customize the time (in milliseconds) occupied by each tick. |
+| scaleHeight | object | No | `{ long: this.$canvas.height / 3, short: this.$canvas.height / 10 }` | Scale height. If this option is set, "long" and "short" must be filled in. |
+| ~~maxZoom~~ | - | - | No | Removed, use `timeSpacingList` instead. |
+| ~~minZoom~~ | - | - | No | Removed, use `timeSpacingList` instead. |
+| ~~timeFormat~~ | - | - | No | Removed. |
 
 ### Events
 
 | Method | Description | Example |
-| --- | --- |
+| --- | --- | --- |
 | draw | Generate the timeline. | draw([DrawConfig](#DrawConfig)) |
 | on | Listen to internal events of the timeline. Currently, only the event name `dragged` is supported, which is the callback event for the end of dragging. | on(name, (listener) => void) |
 | off | Cancel listening to internal events of the timeline. | off(name, listener)、 Cancel all event listeners for the timeline. off('*') |
+| getCurrentTime | Get the current time. | - |
 
 #### DrawConfig
 | Parameter | Type | Required | Default | Description |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | currentTime | number | No | | TDate.now() | The center point points to the timestamp in milliseconds. |
 | areas | Object[] | No | [] | Shaded areas |
 
@@ -142,4 +144,4 @@ timeline.on('dragged', (timestamp) => {
 
 [MIT](https://opensource.org/licenses/MIT)
 
-Copyright (c) 2022-present, XiuLiu <https://www.github.com/thelostword>
+Copyright (c) 2022-present losting<https://www.github.com/thelostword>