leafer-x-tooltip-canvas

English | 简体中文

插件简介

leafer-x-tooltip-canvas 是 Leafer-ui 的第三方 tooltip 插件，用于向用户展示信息。

快速上手

安装

npm i leafer-x-tooltip-canvas --save

使用方法

使用插件时，创建一个插件实例，并传入 App 或者 Leafer 实例。（推荐使用App）

如果传入的是 App,会在sky层中绘制弹窗，如果传入的是 Leafer，会在传入的Leafer层中绘制弹窗。

请注意：如果传入App时尚未创建sky层，会自动创建sky层

import { TooltipPlugin } from 'leafer-x-tooltip-canvas'
const app = new App({ view: window })
const plugin = new TooltipPlugin(app)

配置项

配置项可在创建 tooltipPlugin 实例时作为第二个参数传入

new TooltipPlugin(app, {
  info: ['width', 'height', 'innerId'],
  includesType: ['Rect'],
  excludesType: [],
  ...
})

具体配置项如下，点击字段名可转跳至详细配置

字段	类型	默认值	说明
info	Array<string>	['tag']	显示的属性字段
showType	'value'\|'key-value'	'value'	tooltip信息显示的方式
formatter	() => string	() => undefined	格式化tooltip显示内容的函数
showDelay	number	500	延迟显示的时间
hideDelay	number	0	延迟隐藏的时间
includesType	Array<string>	[ ]	需要显示 tooltip 的元素，传入元素的 tag
excludesType	Array<string>	[ ]	不需要显示 tooltip 的元素，传入元素的 tag
throughExcludes	boolean	false	是否穿过excludesType拾取下面的元素
ignoreType	Array<string>	['App','Leafer','Flow']	被忽略的元素，传入元素的 tag，一般不需要修改，与excludesType的区别在于不会被throughExcludes影响。
offset	Array<number>	[5, 5]	tooltip 相对于鼠标位置的偏移量
theme	string	'light'	主题，可选值：'light'、'dark'
style	IStyle	见下表	tooltip 的样式配置

IStyle 属性

字段	类型	默认值	说明
backgroundColor	string	"white"	tooltip 的背景颜色
stroke	string	"black"	tooltip 框线颜色
color	string	"black"	tooltip 文本颜色
borderRadius	number	8	tooltip 框线圆角
padding	number	8	tooltip 内边距
fontSize	number	14	tooltip 文本大小
fontWeight	number	400	tooltip 文本粗细
fontFamily	string	"Punctuation SC"	tooltip 文本字体,同 css 多个字体用逗号隔开

todo

显示/隐藏
- [x] 基本显示隐藏
- [x] 延迟显示隐藏
样式
- [ ] 三角箭头
- [x] 黑白主题
- [x] 自定义样式
位置
- [x] offset
- [x] 相对鼠标位置
- [ ] 相对元素位置
- [ ] 显示避让逻辑
信息
- [x] 自定义信息
- [x] formatter
交互
- [x] 包括/忽略类型功能
- [ ] 触发方式
- [ ] 虚拟触发

详细配置

💫配置项

内容 ⬆️

显示信息

通过传入info字段，可配置显示的属性字段。

info : ['tag','width','height']

显示类型

可配置显示信息的方式，有两种：value、key-value。

showType : 'value'
showType : 'key-value'

格式化

可配置显示信息的格式化函数，参数为被作用的元素属性集合。返回的值作为 tooltip 的文本。

formatter: (item) => {
  return `${item.tag}(${item.innerId})`
}

显示隐藏

延迟显示隐藏

可配置显示的延迟时间和隐藏的延迟时间。

showDelay : 500
hideDelay : 500

交互

包括/忽略类型

通过配置includesType和excludesType字段，可设置需要展示/隐藏 tooltip 的元素类型。

当只配置includesType时，只显示includesType中配置的元素。
当只配置excludesType时，只不显示excludesType中配置的元素。
可同时配置includesType和excludesType。
includesType优先级大于excludesType。

includesType : ['Rect']

样式

黑白主题

插件默认提供两种主题，分别为light和dark，可以通过配置theme字段来切换主题。默认主题为light

theme : 'light'
theme : 'dark'

位置

offset

可配置 tooltip 相对于鼠标位置的偏移量,第一个参数为 x 轴偏移量，第二个参数为 y 轴偏移量。

offset : [10,20]

自定义样式

用户通过配置style字段来自定义样式。

style: {
    backgroundColor: '#32cd79',
    stroke: '#32cd79',
    color: 'white',
    borderRadius: 16,
    padding: 8,
    fontSize: 16,
    fontWeight: 400,
}

Github