Skip to content

Commit

Permalink
修改文档
Browse files Browse the repository at this point in the history
  • Loading branch information
@pearone
pearone committed Jan 2, 2024
1 parent 7c26761 commit 2e6f540
Show file tree
Hide file tree
Showing 6 changed files with 210 additions and 264 deletions.
264 changes: 4 additions & 260 deletions packages/event/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,279 +4,23 @@

[utils方法](./docs/utils.md)

| 颜色 | 作用 |
| --- | --- |
| isHex | 判断是否是hex |
| isRgb | 判断是否是rgb |
| isRbga | 判断是否是rgba |
| isHsl | 判断是否是hsl |
| isHsla | 判断是否是hsla |
| toHex | 转化为hex（支持keyword\rgb\rgba\hex，支持多种空格、分号、斜杠分隔） |
| toRgba | 转化为rgba（支持object、array、string输出格式） |
| toHsl | 转化为Hsla（支持object、array、string输出格式） |
| toRgb\toRgbaByCanvas | 转化为rgb（支持object、array、string输出格式），支持颜色融合 |
| getKeywordColor | 获取关键词配色，比如red: #FF0000 |
| range | 颜色色阶推荐 |
| darken、lighten | 线性颜色百分比取值 |
| getOpacity | 获取透明度，支持transparent |
| getLuminance | 亮度 |
| getGrayLevel | 灰度 |
| opacity | 修改透明度 |
| textColor | 根据灰度情况显示文本颜色 |
| gray | 当前颜色灰度情况 |
[color颜色处理方法](./docs/color.md)

[eventBus、Storage、AutoId](./docs/event-bus.md)

## Usage
[url参数的加解密方法](./docs/url.md)

```
import {
LocalStorage,
formatFloatNumber,
addEvent,
removeEvent,
isFunction,
matchesSelector,
matchesSelectorAndParentsTo,
// color
toHex,
toRgba,
darken,
lighten,
getOpacity,
isHex,
isRgb,
isRgba,
getKeywordColor
} from "@dpdfe/event-utils";
```
[dag依赖处理](./docs/dag.md)

#### toHex
```
// keyword
toHex('red') // #FF0000

// rgb 空格
toHex('rgb(40 42 54)') // #282a36

// rgb / alpha
toHex('rgb(40 42 54/0.75)') // #282a36bf

// rgb / alpha
toHex('rgb(40 42 54 / 0.75)') // #282a36bf

// rgb / alpha 反斜杠
toHex('rgb(40 42 54 / 0.75)') // #282a36bf

// number 分号
toHex(65, 131, 196) // #4183c4

// alpha
toHex(65, 131, 196, 0.2) // #4183c433

// alpha percent 百分号
toHex(40, 42, 54, '75%') // #282a36bf

// hex
toHex('#4183c4') // #4183c4

// hex alpha
toHex('#4183c4bf') // #4183c4bf

// rgb
toHex('rgb(40, 42, 54)') // #282a36
// rgb
toHex('rgb(40,42,54)') // #282a36
// rgba 75%
toHex('rgba(40,42,54,75%)') // #282a36bf
// rgba 75%
toHex('rgba(40, 42, 54, 75%)') // #282a36bf
// rgba 0.75 小数位
toHex('rgba(40, 42, 54, .75)') // #282a36bf
// rgba 0.75
toHex('rgba(40,42,54,.75)') // #282a36bf
// rgba 0.75
toHex('rgba(40,42,54,0.75)') // #282a36bf
// rgba 0
toHex('rgba(40, 42, 54, 0)') // #282a3600
// rgba 1
toHex('rgba(40, 42, 54, 1)') // #282a36ff
// error
toHex('rgba(276, 42, 54, 1)') // new Error('Expected three numbers below 256')
```

#### toRgba

```
// keyword 关键词
toRgba('red')) // rgba(255, 0, 0, 1)
// hex
toRgba('#3c4') // rgba(51, 204, 68, 1)
// hex
toRgba('#0006') // rgba(0, 0, 0, 0.4)
// hex
toRgba('#4183c4') // rgba(65, 131, 196, 1)
// hex
toRgba('#cd2222cc') // rgba(205, 34, 34, 0.8)
// array
toRgba('#222299', { format: RGBFormatType.Array }) // [34, 34, 153, 1]
// object
toRgba('#222299', { format: RGBFormatType.Object }) // { alpha: 1, blue: 153, green: 34, red: 34}
// alpha
toRgba('#222299', { alpha: 1 }) // rgba(34, 34, 153, 1)
// 透明度覆盖 alpha
toRgba('rgb(40 42 54/0.75)', { alpha: 1 }) // rgba(40, 42, 54, 1)
// rgb / alpha
toRgba('rgb(40 42 54 / 0.75)') // rgba(40, 42, 54, 0.75)
```

#### isHex
```
isHex('#fff') // true
isHex('#fffff') // false
```

#### isRgb

#### isRgba

#### getKeywordColor

#### getOpacity

#### darken、lighten
```
// darken 5%
darken('#2196f3') // rgba(20, 137, 230, 1)
// rgb / alpha percent 10%
darken('#2196f3', { percent: 10 }) // rgba(8, 125, 218, 1)
// rgb / alpha percent 20%
darken('#2196f3', { percent: 20 }) // rgba(0, 99, 192, 1)
// rgb / alpha percent 50%
darken('#2196f3', { percent: 50 }) // rgba(0, 23, 116, 1)
// rgb / alpha percent 100%
darken('#2196f3', { percent: 100 }) // rgba(0, 0, 0, 1)
// lighten
// rgb / alpha percent 5%
lighten('#2196f3') // rgba(46, 163, 255, 0.95)
// rgb / alpha percent 10%
lighten('#2196f3', { percent: 10 }) // rgba(59, 176, 255, 0.9)
// rgb / alpha percent 20%
lighten('#2196f3', { percent: 20 }) // rgba(84, 201, 255, 0.8)
// rgb / alpha percent 50%
lighten('#2196f3', { percent: 50 }) // rgba(161, 255, 255, 0.5)
// rgb / alpha percent 100%
lighten('#2196f3', { percent: 100 }) // rgba(255, 255, 255, 0)
```

#### 更多颜色使用方法参考exampe、test测试用例

#### [example](https://github.com/DPDFE/react-layout/blob/main/src/example/event/color/computed.tsx)

#### [test](https://github.com/DPDFE/react-layout/tree/main/packages/event/__tests__)

#### formatFloatNumber
```
formatFloatNumber(3.3234234234, 2) //3.32
formatFloatNumber(3, 2) // 3
```

#### LocalStorage
```
import {LocalStorage} from '@dpdfe/event-utils'
const storage = LocalStorage({username: 'zhangsan01'});
// 设置 localstorage
storage.account = {username: 'lisi02'}
// 获取 localstorage
const account = storage.account
// 删除 localstorage
delete storage.account
```

#### EventBus
```
import { Events } from "@dpdfe/event-utils";
export const EventBus = new Events()
const logEvent = (event: string) => {
console.log(`this is `, event);
}
// 注册事件和回调方法
EventBus.on('aaa', logEvent)
// 只触发一次的事件和回调
EventBus.once('ccc', logEvent)
// 事件触发
EventBus.emit('aaa', 'aaa')
EventBus.emit('bbb', 'bbb')
EventBus.emit('ccc', 'ccc')
EventBus.emit('ccc', 'ccc')
// 事件取消
EventBus.off('aaa', 'xxx')
// 取消所有监听
EventBus.clear()
// 获取当前事件的所有回调方法
EventBus.listeners('aaa')
// 设置事件最大注册数量
EventBus.setMaxListeners(4)
```

#### AutoId
```
// 注册自增涨配置信息、不注册回全局新增默认default队列参数
// key 队列名
// start 迭代初始值
// step 增长步长
genAutoIdInit({ start: 1 });
// 默认分组
genAutoId() // 1
genAutoId() // 2
genAutoId() // 3
genAutoId() // 4
// 分组queue
genAutoId('queue') // 随机值 + 1
genAutoId('queue') // 随机值 + 2
genAutoId('queue') // 随机值 + 3
genAutoId('queue') // 随机值 + 4
// 随机字符串
genAutoIdString() // vfcnmjrv0f
```


44 changes: 44 additions & 0 deletions packages/event/docs/color.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
| 颜色 | 作用 |
| --- | --- |
| isHex | 判断是否是hex |
| isRgb | 判断是否是rgb |
| isRbga | 判断是否是rgba |
| isHsl | 判断是否是hsl |
| isHsla | 判断是否是hsla |
| toHex | 转化为hex（支持keyword\rgb\rgba\hex，支持多种空格、分号、斜杠分隔） |
| toRgba | 转化为rgba（支持object、array、string输出格式） |
| toHsl | 转化为Hsla（支持object、array、string输出格式） |
| toRgb\toRgbaByCanvas | 转化为rgb（支持object、array、string输出格式），支持颜色融合 |
| getKeywordColor | 获取关键词配色，比如red: #FF0000 |
| range | 颜色色阶推荐 |
| darken、lighten | 线性颜色百分比取值 |
| getOpacity | 获取透明度，支持transparent |
| getLuminance | 亮度 |
| getGrayLevel | 灰度 |
| opacity | 修改透明度 |
| textColor | 根据灰度情况显示文本颜色 |
| gray | 当前颜色灰度情况 |


## Usage

```
import {
toHex,
toRgba,
darken,
lighten,
getOpacity,
isHex,
isRgb,
isRgba,
getKeywordColor
} from "@dpdfe/event-utils";
```


#### 更多颜色使用方法参考exampe、test测试用例

#### [example](https://github.com/DPDFE/react-layout/blob/main/src/example/event/color/computed.tsx)

#### [test](https://github.com/DPDFE/react-layout/tree/main/packages/event/__tests__)
32 changes: 32 additions & 0 deletions packages/event/docs/dag.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
## Feature
| 方法 | 作用 |
| --- | --- |
| hasCycle | 成环检测 |
| findParents | 获取一个节点的所有父元素 |
| findChildren | 获取一个节点的所有子元素 |
| removeNode | 删除一个节点以及它的关联关系 |


## Usage

```
const dag = new DAG({
nodes: [1, 2, 3, 4, 5, 6],
links: [
{ parent_id: 1, child_id: 2, type: 'link' },
{ parent_id: 2, child_id: 3, type: 'drill' },
{ parent_id: 2, child_id: 4, type: 'filter' },
{ parent_id: 3, child_id: 1, type: 'filter' },
{ parent_id: 4, child_id: 5, type: 'link' },
{ parent_id: 4, child_id: 6, type: 'filter' }
],
link_key: {
start: 'parent_id',
end: 'child_id'
}
});
```

#### 使用方法参考test测试用例

#### [test](https://github.com/DPDFE/react-layout/tree/main/packages/event/__tests__/da g.test.ts)
Loading

0 comments on commit 2e6f540

Please sign in to comment.