leafer-x-tooltip-canvas 1.0.0 → 1.0.2

package/package.json

@@ -1,52 +1,63 @@
 {
-    "name": "leafer-x-tooltip-canvas",
-    "version": "1.0.0",
-    "author": "214L",
-    "license": "MIT",
-    "type": "module",
-    "main": "dist/index.esm.js",
-    "exports": {
-        "import": "./dist/index.esm.js",
-        "require": "./dist/index.cjs"
-    },
-    "types": "types/index.d.ts",
-    "files": ["src", "types", "dev", "dist"],
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/214L/leafer-x-popup-canvas"
-    },
-    "homepage": "https://github.com/214L/leafer-x-popup-canvas",
-    "bugs": "https://github.com/214L/leafer-x-popup-canvas/issues",
-    "scripts": {
-        "start": "cross-env NODE_ENV=development rollup -c -w",
-        "build": "cross-env PLATFORM=all rollup -c",
-        "test": "vitest"
-    },
-    "devDependencies": {
-        "@rollup/plugin-commonjs": "^25.0.4",
-        "@rollup/plugin-html": "^1.0.2",
-        "@rollup/plugin-multi-entry": "^6.0.0",
-        "@rollup/plugin-node-resolve": "^15.2.1",
-        "@rollup/plugin-terser": "^0.4.3",
-        "@rollup/plugin-typescript": "^11.1.3",
-        "@typescript-eslint/eslint-plugin": "^5.54.1",
-        "@typescript-eslint/parser": "^5.54.1",
-        "rollup": "^3.29.2",
-        "rollup-plugin-dts": "^6.0.2",
-        "rollup-plugin-livereload": "^2.0.5",
-        "rollup-plugin-serve": "^2.0.2",
-        "rollup-plugin-string": "^3.0.0",
-        "tslib": "^2.6.2",
-        "typescript": "^5.2.2",
-        "vite": "^4.4.9",
-        "vitest": "^0.34.4",
-        "jsdom": "^22.0.0",
-        "cross-env": "^7.0.3",
-        "eslint": "^8.49.0",
-        "leafer-ui": "^1.0.0-rc.22"
-    },
-    "dependencies": {
-        "@leafer-ui/core": "^1.0.0-rc.22"
-    },
-    "publishConfig": { "registry": "https://registry.npmjs.org" }
-}
+  "name": "leafer-x-tooltip-canvas",
+  "description": "A tooltip plugin for Leafer-ui.",
+  "version": "1.0.2",
+  "author": "214L",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.esm.js",
+  "exports": {
+    "import": "./dist/index.esm.js",
+    "require": "./dist/index.cjs"
+  },
+  "types": "types/index.d.ts",
+  "files": [
+    "src",
+    "types",
+    "dev",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/214L/leafer-x-tooltip-canvas"
+  },
+  "homepage": "https://github.com/214L/leafer-x-tooltip-canvas",
+  "bugs": "https://github.com/214L/leafer-x-tooltip-canvas/issues",
+  "scripts": {
+    "start": "cross-env NODE_ENV=development rollup -c -w",
+    "build": "cross-env PLATFORM=all rollup -c",
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.9",
+    "@rollup/plugin-html": "^2.0.0",
+    "@rollup/plugin-multi-entry": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.49.0",
+    "jsdom": "^22.0.0",
+    "leafer-ui": "^1.12.2",
+    "rollup": "^4.54.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-serve": "^2.0.2",
+    "rollup-plugin-string": "^3.0.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.4"
+  },
+  "dependencies": {
+    "@leafer-in/flow": "^1.12.2",
+    "@leafer-ui/core": "^1.12.2",
+    "leafer-ui": "^1.12.2"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/Tooltip.ts

@@ -9,6 +9,7 @@ import {
 } from 'leafer-ui'
 import { IPos, IUserConfig } from './interface'
 import { handleTextStyle } from './utils'
+import { TOOLTIP_TAG, TOOLTIP_CLASS_NAME } from './constants'
 
 interface ITooltip extends IPen {
   target?: ILeaf
@@ -40,9 +41,9 @@ export class TooltipData extends PenData implements ITooltipData {
 @registerUI()
 export class Tooltip extends Pen implements ITooltip {
   public get __tag() {
-    return 'Tooltip'
+    return TOOLTIP_TAG
   }
-  public className: 'leafer-x-tooltip'
+  public className: typeof TOOLTIP_CLASS_NAME
   @dataProcessor(TooltipData)
   public declare __: ITooltipData
 
@@ -93,7 +94,7 @@ export class Tooltip extends Pen implements ITooltip {
     })
     this.add(
       new Text({
-        className: 'leafer-x-tooltip',
+        className: TOOLTIP_CLASS_NAME,
         fill: color,
         fontSize,
         fontWeight,
@@ -130,8 +131,7 @@ export class Tooltip extends Pen implements ITooltip {
     this.clearShowHideTimers()
     this.showTimerId = setTimeout(() => {
       this.createShapes(pos)
-      clearTimeout(this.showTimerId)
-      this.showTimerId = null
+      this.showTimerId = null  // 定时器执行完毕,清空引用
     }, this.config.showDelay)
   }
 
@@ -140,19 +140,21 @@ export class Tooltip extends Pen implements ITooltip {
     if (immediate) {
       this.destroy()
     } else {
-      if (!this.hideTimerId) {
-        this.hideTimerId = setTimeout(() => {
-          this.destroy()
-        }, this.config.hideDelay)
-      }
+      // 移除 if 判断,确保每次 hide() 都能正确设置定时器
+      this.hideTimerId = setTimeout(() => {
+        this.destroy()
+        this.hideTimerId = null
+      }, this.config.hideDelay)
     }
   }
 
   public update(pos: IPos) {
     this.clearShowHideTimers()
     if (this.isShow) {
+      // 已显示,立即更新位置
       this.createShapes(pos)
     } else {
+      // 未显示,启动 show 定时器
       this.show(pos)
     }
   }

package/src/TooltipPlugin.ts

@@ -1,13 +1,10 @@
 import { App, PointerEvent } from '@leafer-ui/core'
-import type {
-  IEventListenerId,
-  ILeaf,
-  ILeafer,
-} from '@leafer-ui/interface'
+import type { IEventListenerId, ILeaf, ILeafer } from '@leafer-ui/interface'
 import { IUserConfig } from './interface'
 import { Tooltip } from './Tooltip'
 import { getTooltipId } from './utils'
 import { defaultConfig } from './defaultConfig'
+import { TOOLTIP_TAG, TOOLTIP_CLASS_NAME } from './constants'
 
 export class TooltipPlugin {
   /**
@@ -28,39 +25,100 @@ export class TooltipPlugin {
    */
   private readonly pointEventId: IEventListenerId
 
+  /**
+   * @param tooltipCache - Tooltip 实例缓存,避免重复 DOM 查询
+   * @private
+   */
+  private tooltipCache: Map<string, Tooltip> = new Map()
+
+  /**
+   * @param 类型过滤 Set 缓存,将数组转为 Set 提升查询性能 O(n) -> O(1)
+   * @private
+   */
+  private includesTypeSet: Set<string> = new Set()
+  private excludesTypeSet: Set<string> = new Set()
+  private ignoreTypeSet: Set<string> = new Set()
+
   constructor(instance: ILeafer | App, config?: IUserConfig) {
     this.instance = instance
-    this.config = Object.assign({}, defaultConfig, config)
+    this.config = this.mergeConfig(defaultConfig, config)
     this.handleConfig()
     this.initState()
     this.pointEventId = this.initEvent()
   }
 
+  /**
+   * @description 深度合并配置,避免实例间相互影响
+   * @private
+   */
+  private mergeConfig(base: IUserConfig, override?: IUserConfig): IUserConfig {
+    if (!override) {
+      // 深拷贝默认配置
+      return {
+        ...base,
+        style: { ...base.style },
+        includesType: [...(base.includesType || [])],
+        excludesType: [...(base.excludesType || [])],
+        ignoreType: [...(base.ignoreType || [])],
+        info: [...(base.info || [])],
+      }
+    }
+
+    // 深度合并用户配置
+    return {
+      ...base,
+      ...override,
+      style: {
+        ...base.style,
+        ...override.style,
+      },
+      includesType: override.includesType || base.includesType,
+      excludesType: override.excludesType || base.excludesType,
+      ignoreType: override.ignoreType || base.ignoreType,
+      info: override.info || base.info,
+    }
+  }
+
+  /**
+   * @description 类型守卫: 判断实例是否为 App
+   * @private
+   */
+  private isAppInstance(instance: ILeafer | App): instance is App {
+    return instance.isApp === true
+  }
+
   /**
    * @description 初始化状态
    */
   private initState() {
-    if (this.instance.isApp) {
-      const app = this.instance as App
-      if (app.sky === undefined) {
-        app.sky = app.addLeafer({
+    if (this.isAppInstance(this.instance)) {
+      // TypeScript 自动推断 this.instance 为 App 类型
+      if (this.instance.sky === undefined) {
+        this.instance.sky = this.instance.addLeafer({
           type: 'draw',
           usePartRender: false,
         })
       }
-      this.aimLeafer = app.sky
+      this.aimLeafer = this.instance.sky
     } else if (this.instance.isLeafer) {
       this.aimLeafer = this.instance
+    } else {
+      throw new Error('TooltipPlugin: Instance must be either App or Leafer')
     }
   }
 
-  private handleConfig(){
-    if(this.config.theme==='dark'){
-      this.config.style.backgroundColor = "black"
-      this.config.style.color = "white"
-      }
+  private handleConfig() {
+    if (this.config.theme === 'dark') {
+      this.config.style.backgroundColor = 'black'
+      this.config.style.color = 'white'
     }
-  
+
+    // 初始化类型过滤 Set,提升查询性能
+    this.includesTypeSet = new Set(this.config.includesType || [])
+    this.excludesTypeSet = new Set(this.config.excludesType || [])
+    this.ignoreTypeSet = new Set(this.config.ignoreType || [])
+  }
+
   /**
    * @description 初始化事件处理
    * @private
@@ -95,14 +153,19 @@ export class TooltipPlugin {
     }
     this.handleTooltip(event, target)
   }
-
   private filterTarget(list: ILeaf[]): ILeaf | null {
-    const ignoreTag = ['Leafer', 'App']
+    const { throughExcludes } = this.config
+
     const pureResult = list.filter((item) => {
+      // 使用 Set.has() 代替 Array.includes(),性能提升
+      const shouldIgnore = this.ignoreTypeSet.has(item?.tag)
+      const shouldExclude = throughExcludes && this.excludesTypeSet.has(item?.tag)
+
       if (
-        ignoreTag.includes(item?.tag) ||
-        item?.parent?.tag === 'Tooltip' ||
-        item?.className === 'leafer-x-tooltip'
+        shouldIgnore ||
+        shouldExclude ||
+        item?.parent?.tag === TOOLTIP_TAG ||
+        item?.className === TOOLTIP_CLASS_NAME
       ) {
         return false
       }
@@ -117,28 +180,48 @@ export class TooltipPlugin {
    * @param target 目标节点
    * @returns
    */
-  private handleAllowed(target: ILeaf) {
-    const infoArr = ['#' + target.id, '.' + target.className, target.tag]
-    const { includesType, excludesType } = this.config
+  private handleAllowed(target: ILeaf): boolean {
+    const targetIdentifiers = ['#' + target.id, '.' + target.className, target.tag]
 
-    if (includesType.length === 0 && excludesType.length === 0) return true
+    const hasIncludesRule = this.includesTypeSet.size > 0
+    const hasExcludesRule = this.excludesTypeSet.size > 0
+
+    // 如果没有配置任何过滤规则,默认允许
+    if (!hasIncludesRule && !hasExcludesRule) {
+      return true
+    }
 
-    const isInclude = infoArr.some((string) => includesType.includes(string))
-    const isExclude = infoArr.some((string) => excludesType.includes(string))
+    const matchesInclude = targetIdentifiers.some((id) => this.includesTypeSet.has(id))
+    const matchesExclude = targetIdentifiers.some((id) => this.excludesTypeSet.has(id))
 
-    if (!isExclude && includesType.length === 0) return true
-    if (!isInclude && excludesType.length === 0) return false
-    return isInclude || !isExclude
+    // includes 优先级高于 excludes
+    if (matchesInclude) return true  // 匹配白名单,直接允许(即使也在黑名单中)
+    if (matchesExclude) return false  // 不在白名单但在黑名单,拒绝
+
+    // 两者都不匹配的情况
+    if (hasIncludesRule) return false  // 有白名单规则但不匹配 → 拒绝
+    return true  // 只有黑名单规则且不匹配 → 允许
   }
 
   /**
    * @description 隐藏 tooltip
    */
   private hideTooltip() {
-    const tooltipList = this.aimLeafer.find('Tooltip') as Tooltip[]
-    tooltipList.forEach((tooltip: Tooltip) => {
-      tooltip.hide()
+    // 使用缓存而不是 DOM 查询,提升性能
+    // 同时清理已销毁的实例
+    const invalidIds: string[] = []
+
+    this.tooltipCache.forEach((tooltip, id) => {
+      if (tooltip.parent) {
+        tooltip.hide()
+      } else {
+        // 标记无效的缓存条目
+        invalidIds.push(id)
+      }
     })
+
+    // 清理无效缓存
+    invalidIds.forEach(id => this.tooltipCache.delete(id))
   }
 
   /**
@@ -146,26 +229,33 @@ export class TooltipPlugin {
    */
   private handleTooltip(event: PointerEvent, target: ILeaf) {
     const id = getTooltipId(target)
-    const tooltipList = this.aimLeafer.find('Tooltip') as Tooltip[]
-    let processed = false
-    for (const tooltip of tooltipList) {
-      if (tooltip.id === id) {
-        tooltip.update({ x: event.x, y: event.y })
-        processed = true
-      } else {
+
+    // 隐藏其他 tooltip
+    this.tooltipCache.forEach((tooltip, cacheId) => {
+      if (cacheId !== id) {
         tooltip.hide()
       }
-    }
+    })
 
-    if (!processed) {
-      this.aimLeafer.add(
-        new Tooltip({
-          id,
-          pointerPos: { x: event.x, y: event.y },
-          target,
-          config: this.config,
-        })
-      )
+    // 检查缓存中的实例是否仍然有效(未被销毁)
+    const cachedTooltip = this.tooltipCache.get(id)
+    if (cachedTooltip && cachedTooltip.parent) {
+      // 实例有效,直接更新
+      cachedTooltip.update({ x: event.x, y: event.y })
+    } else {
+      // 实例已被销毁或不存在,移除无效缓存并创建新实例
+      if (cachedTooltip) {
+        this.tooltipCache.delete(id)
+      }
+
+      const tooltip = new Tooltip({
+        id,
+        pointerPos: { x: event.x, y: event.y },
+        target,
+        config: this.config,
+      })
+      this.aimLeafer.add(tooltip)
+      this.tooltipCache.set(id, tooltip)
     }
   }
 
@@ -173,14 +263,24 @@ export class TooltipPlugin {
    * @description 销毁
    */
   public destroy() {
-    const tooltipList = this.aimLeafer.find('Tooltip') as Tooltip[]
-    if (tooltipList) {
-      tooltipList.forEach((tooltip) => {
+    // 防止重复销毁
+    if (!this.instance) return
+
+    // 清理缓存中的所有 tooltip
+    if (this.tooltipCache) {
+      this.tooltipCache.forEach((tooltip) => {
         tooltip.destroyTooltip()
-        tooltip.parent.remove(tooltip)
+        // 使用可选链,防止 parent 为 null/undefined
+        tooltip.parent?.remove(tooltip)
       })
+      this.tooltipCache.clear()
     }
-    this.instance.off_(this.pointEventId)
+
+    // 确保事件被正确清理
+    if (this.pointEventId) {
+      this.instance.off_(this.pointEventId)
+    }
+
     this.instance = null
     this.aimLeafer = null
   }

package/src/constants.ts

@@ -0,0 +1,21 @@
+/**
+ * @description 插件常量定义
+ */
+
+/**
+ * Tooltip 标签名
+ */
+export const TOOLTIP_TAG = 'Tooltip'
+
+/**
+ * Tooltip class 名称
+ */
+export const TOOLTIP_CLASS_NAME = 'leafer-x-tooltip'
+
+/**
+ * 显示类型枚举
+ */
+export enum ShowType {
+  VALUE = 'value',
+  KEY_VALUE = 'key-value',
+}

package/src/defaultConfig.ts

@@ -12,6 +12,8 @@ export const defaultConfig: IUserConfig = {
   preventOverflow: false,
   includesType: [],
   excludesType: [],
+  ignoreType:['Leafer','App','Flow'],
+  throughExcludes:false,
   theme: 'light',
   style: {
     backgroundColor: 'white',

package/src/interface/config.ts

@@ -24,6 +24,8 @@ interface IUserConfig {
   preventOverflow?: boolean
   includesType?: Array<string>
   excludesType?: Array<string>
+  ignoreType?: Array<string>
+  throughExcludes?: boolean
   theme?: 'light' | 'dark'
   style?: IStyleConfig
 }

package/src/utils.ts

@@ -1,6 +1,13 @@
 import { Box } from 'leafer-ui'
 import { ILeaf } from '@leafer-ui/interface'
 import { IUserConfig } from './interface'
+import { ShowType } from './constants'
+
+/**
+ * @description 文本尺寸缓存,避免重复计算
+ */
+const textSizeCache = new Map<string, { width: number; height: number }>()
+
 /**
  * @description 获取uuid 考虑兼容性问题采用此方法
  * @param length id长度
@@ -9,44 +16,98 @@ import { IUserConfig } from './interface'
 export const getTooltipId = function (target: ILeaf) {
   return target.tag + target.innerId
 }
+
 export const handleTextStyle = function (target: ILeaf, config: IUserConfig) {
+  // 参数校验
+  if (!target || !config) {
+    console.error('handleTextStyle: Invalid parameters')
+    return { width: 100, height: 30, text: '' }
+  }
+
   const str = handleContent(target, config)
   const { fontSize, fontFamily, fontWeight, padding } = config.style
-  const box = new Box({
-    children: [
-      {
-        tag: 'Text',
-        text: str,
-        fontSize,
-        fontFamily,
-        fontWeight,
-        padding,
-      },
-    ],
-  })
-
-  const { width, height } = box.getBounds()
-  return { width, height, text: str }
+
+  // 生成缓存 key,包含所有影响尺寸的因素
+  const cacheKey = `${str}:${fontSize}:${fontFamily}:${fontWeight}:${padding}`
+
+  // 检查缓存
+  if (textSizeCache.has(cacheKey)) {
+    const cached = textSizeCache.get(cacheKey)!
+    return { ...cached, text: str }
+  }
+
+  try {
+    const box = new Box({
+      children: [
+        {
+          tag: 'Text',
+          text: str,
+          fontSize,
+          fontFamily,
+          fontWeight,
+          padding,
+        },
+      ],
+    })
+
+    const bounds = box.getBounds()
+    // 检查 bounds 是否有效
+    if (!bounds || bounds.width === undefined || bounds.height === undefined) {
+      console.warn('handleTextStyle: Invalid bounds, using default size')
+      return { width: 100, height: 30, text: str }
+    }
+
+    const { width, height } = bounds
+
+    // 存入缓存
+    textSizeCache.set(cacheKey, { width, height })
+
+    return { width, height, text: str }
+  } catch (error) {
+    console.error('handleTextStyle: Failed to calculate text size', error)
+    return { width: 100, height: 30, text: str }
+  }
 }
 
 function handleContent(target: ILeaf, config: IUserConfig) {
   let str = ''
-  const data = target as { [key: string]: any }
-  
+  // 保持 ILeaf 类型，使用 Record 进行更安全的索引访问
+  const data = target as ILeaf & Record<string, unknown>
+
   // 如果formatter函数存在，则使用formatter函数进行格式化
-  if (config.formatter(data) !== undefined) {
-    str = config.formatter(data)
-  } else {
-    // 如果formatter函数不存在，则根据showType进行默认格式化
-    if (config.showType == 'value') {
+  if (config.formatter && typeof config.formatter === 'function') {
+    try {
+      const formatted = config.formatter(data)
+      if (formatted !== undefined) {
+        str = formatted
+      }
+    } catch (error) {
+      console.error('handleContent: Formatter function error', error)
+      // formatter 失败时降级到默认格式化
+    }
+  }
+
+  // 如果formatter函数不存在或执行失败，则根据showType进行默认格式化
+  if (!str) {
+    if (config.showType === ShowType.VALUE) {
       str += config.info
-        .map((dataName: string) => `${data[dataName]}`)
+        .map((dataName: string) => {
+          const value = data[dataName]
+          // 检查值是否存在且可转换为字符串
+          return value !== null && value !== undefined ? String(value) : ''
+        })
         .join('\n')
-    } else if (config.showType == 'key-value') {
+    } else if (config.showType === ShowType.KEY_VALUE) {
       str += config.info
-        .map((dataName: string) => `${dataName} : ${data[dataName]}`)
+        .map((dataName: string) => {
+          const value = data[dataName]
+          // 检查值是否存在且可转换为字符串
+          const displayValue = value !== null && value !== undefined ? String(value) : ''
+          return `${dataName} : ${displayValue}`
+        })
         .join('\n')
     }
   }
+
   return str
 }