leafer-x-tooltip-canvas 1.0.0 → 1.0.2

package/README.en.md

@@ -1,8 +1,6 @@
-# leafer-x-tooltip-canvas
+# leafer-x-tooltip-canvass
 
-<p>
-  English | <a href="./README.md">简体中文</a>
-</p>
+English | [简体中文](./README.md)
 
 ## Introduction
 
@@ -99,6 +97,18 @@ The specific config options are as follows. Click on the field name to jump to [
       <td>[]</td>
       <td>The tags of elements that should not display the tooltip</td>
     </tr>
+    <tr>
+      <td>throughExcludes</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>If the plugin while passing through excludesType to pick elements</td>
+    </tr>
+    <tr>
+      <td>ignoreType</td>
+      <td>Array&lt;string&gt;</td>
+      <td>['App','Leafer','Flow']</td>
+      <td>Where the tag of the passed elements generally doesn't need modification; the difference from excludesType is that it won't be affected by throughExcludes.</td>
+    </tr>
     <tr>
       <td><a href="#offset">offset</a></td>
       <td>Array&lt;number&gt;</td>
@@ -120,9 +130,8 @@ The specific config options are as follows. Click on the field name to jump to [
   </tbody>
 </table>
 
-
-
 IStyle Properties
+
 <table class="styled-table">
     <tr>
         <th>Field</th>
@@ -203,11 +212,15 @@ IStyle Properties
   - [ ] Virtual Trigger
 
 ### Config details
+
 <a href="#config-overview" class="fixed-right">:dizzy:Config Overview</a>
 
 #### Content
+
 ##### Display Information
+
 Configure the displayed attribute fields by passing in the `info` field.
+
 <table class="center-table"> 
     <tr> 
         <td> 
@@ -220,7 +233,9 @@ Configure the displayed attribute fields by passing in the `info` field.
 </table>
 
 ##### Display Type
+
 Configure the display method of the information, there are two types: `value`,`key-value`.
+
 <table class="center-table"> 
     <tr> 
         <td> 
@@ -240,19 +255,24 @@ Configure the display method of the information, there are two types: `value`,`k
     </tr>
 </table>
 
-##### Formatter 
+##### Formatter
+
 Configure the formatting function for the information, the parameter is the attribute collection of the element being acted upon. The returned value serves as the text for the tooltip.
 
 ```js
 formatter: (item) => {
-    return `${item.tag}(${item.innerId})`
+  return `${item.tag}(${item.innerId})`
 }
 ```
+
  <img src="./.github/assets/formatter.png">
 
 #### Display/Hide
+
 ##### Delayed Display/Hide
+
 Configure the delay time for display and the delay time for hiding.
+
 <table class="center-table"> 
     <tr> 
         <td> 
@@ -273,7 +293,9 @@ Configure the delay time for display and the delay time for hiding.
 </table>
 
 #### Interaction
+
 ##### Include/Exclude Types
+
 Configure the element tags to be displayed/hidden by setting the `includesType` and `excludesType` property.
 
 - When only `includesType` is configured, only the elements configured in `includesType` are displayed.
@@ -291,10 +313,12 @@ Configure the element tags to be displayed/hidden by setting the `includesType`
    </tr> 
 </table>
 
-
 #### Style
+
 ##### Light/Dark Themes
+
 The plugin provides two themes by default, `light` and `dark`, which can be switched by configuring the theme field. The default theme is light.
+
  <table class="center-table"> 
     <tr> 
         <td> 
@@ -315,8 +339,11 @@ The plugin provides two themes by default, `light` and `dark`, which can be swit
 </table>
 
 #### Position
+
 ##### Offset
+
 Configure the offset of the tooltip relative to the mouse position, the first parameter is the offset on the x-axis, and the second parameter is the offset on the y-axis.
+
 <table class="center-table"> 
     <tr> 
         <td> 
@@ -329,7 +356,9 @@ Configure the offset of the tooltip relative to the mouse position, the first pa
 </table>
 
 ##### Custom Style
+
 Users can customize the style by configuring the `style` field.
+
 <table class="center-table"> 
 </table>
    <tr> 
@@ -345,6 +374,7 @@ Users can customize the style by configuring the `style` field.
         fontSize: 16,
         fontWeight: 400,
     }
+
   </span>
       </td>
       <td>
@@ -353,10 +383,8 @@ Users can customize the style by configuring the `style` field.
     </tr>
 </table>
 
-
 [Github](https://github.com/214L/leafer-x-popup-canvas)
 
-
 <style> 
 .center-table { 
     margin-left: auto; 

package/README.md

@@ -1,8 +1,6 @@
 # leafer-x-tooltip-canvas
 
-<p>
-  <a href='./README.en.md'>English</a> | 简体中文
-</p>
+[English](./README.en.md) | 简体中文
 
 ## 插件简介
 
@@ -46,6 +44,7 @@ new TooltipPlugin(app, {
 ```
 
 具体配置项如下，点击字段名可转跳至[详细配置](#详细配置)
+
  <table class="styled-table jump-table">
   <thead>
     <tr>
@@ -87,17 +86,29 @@ new TooltipPlugin(app, {
       <td>延迟隐藏的时间</td>
     </tr>
     <tr>
-      <td><a href="#包括忽略类型">includesType</a></td>
+      <td><a href="#包括排除类型">includesType</a></td>
       <td>Array&lt;string&gt;</td>
-      <td>[]</td>
+      <td>[ ]</td>
       <td>需要显示 tooltip 的元素，传入元素的 tag</td>
     </tr>
     <tr>
-      <td><a href="#包括忽略类型">excludesType</a></td>
+      <td><a href="#包括排除类型">excludesType</a></td>
       <td>Array&lt;string&gt;</td>
-      <td>[]</td>
+      <td>[ ]</td>
       <td>不需要显示 tooltip 的元素，传入元素的 tag</td>
     </tr>
+    <tr>
+      <td>throughExcludes</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>是否穿过excludesType拾取下面的元素</td>
+    </tr>
+    <tr>
+      <td>ignoreType</td>
+      <td>Array&lt;string&gt;</td>
+      <td>['App','Leafer','Flow']</td>
+      <td>被忽略的元素，传入元素的 tag，一般不需要修改，与excludesType的区别在于不会被throughExcludes影响。</td>
+    </tr>
     <tr>
       <td><a href="#offset">offset</a></td>
       <td>Array&lt;number&gt;</td>
@@ -119,9 +130,8 @@ new TooltipPlugin(app, {
   </tbody>
 </table>
 
-
-
 IStyle 属性
+
 <table class="styled-table"">
     <tr>
         <th>字段</th>
@@ -202,11 +212,15 @@ IStyle 属性
   - [ ] 虚拟触发
 
 ### 详细配置
+
 <a href="#配置项" class="fixed-right">:dizzy:配置项</a>
 
 #### 内容 <a href="#配置项" style="position:relative;right:0">:arrow_up:</a>
-##### 显示信息 
+
+##### 显示信息
+
 通过传入`info`字段，可配置显示的属性字段。
+
 <table class="center-table"> 
     <tr> 
         <td> 
@@ -219,7 +233,9 @@ IStyle 属性
 </table>
 
 ##### 显示类型
+
 可配置显示信息的方式，有两种：`value`、`key-value`。
+
 <table class="center-table"> 
     <tr> 
         <td> 
@@ -239,18 +255,24 @@ IStyle 属性
     </tr>
 </table>
 
-##### 格式化 
-可配置显示信息的格式化函数，参数为被作用的元素属性集合。返回的值作为tooltip的文本。
+##### 格式化
+
+可配置显示信息的格式化函数，参数为被作用的元素属性集合。返回的值作为 tooltip 的文本。
+
 ```js
 formatter: (item) => {
-    return `${item.tag}(${item.innerId})`
+  return `${item.tag}(${item.innerId})`
 }
 ```
+
  <img src="./.github/assets/formatter.png">
 
 #### 显示隐藏
+
 ##### 延迟显示隐藏
+
 可配置显示的延迟时间和隐藏的延迟时间。
+
 <table class="center-table"> 
     <tr> 
         <td> 
@@ -271,8 +293,10 @@ formatter: (item) => {
 </table>
 
 #### 交互
+
 ##### 包括/忽略类型
-通过配置`includesType`和`excludesType`字段，可设置需要展示/隐藏tooltip的元素类型。
+
+通过配置`includesType`和`excludesType`字段，可设置需要展示/隐藏 tooltip 的元素类型。
 
 - 当只配置`includesType`时，只显示`includesType`中配置的元素。
 - 当只配置`excludesType`时，只不显示`excludesType`中配置的元素。
@@ -289,10 +313,12 @@ formatter: (item) => {
    </tr> 
 </table>
 
-
 #### 样式
+
 ##### 黑白主题
+
 插件默认提供两种主题，分别为`light`和`dark`，可以通过配置`theme`字段来切换主题。默认主题为`light`
+
  <table class="center-table"> 
     <tr> 
         <td> 
@@ -313,8 +339,11 @@ formatter: (item) => {
 </table>
 
 #### 位置
+
 ##### offset
-可配置tooltip相对于鼠标位置的偏移量,第一个参数为x轴偏移量，第二个参数为y轴偏移量。
+
+可配置 tooltip 相对于鼠标位置的偏移量,第一个参数为 x 轴偏移量，第二个参数为 y 轴偏移量。
+
 <table class="center-table"> 
     <tr> 
         <td> 
@@ -327,7 +356,9 @@ formatter: (item) => {
 </table>
 
 ##### 自定义样式
+
 用户通过配置`style`字段来自定义样式。
+
 <table class="center-table"> 
 </table>
    <tr> 
@@ -343,6 +374,7 @@ formatter: (item) => {
         fontSize: 16,
         fontWeight: 400,
     }
+
   </span>
       </td>
       <td>
@@ -351,10 +383,8 @@ formatter: (item) => {
     </tr>
 </table>
 
-
 [Github](https://github.com/214L/leafer-x-popup-canvas)
 
-
 <style> 
 .center-table { 
     margin-left: auto;