leafer-x-tooltip-canvas 1.0.0

package/src/Tooltip.ts

@@ -0,0 +1,166 @@
+import { IPenInputData, IPenData, IPen, ILeaf } from '@leafer-ui/interface'
+import {
+  registerUI,
+  dataProcessor,
+  Pen,
+  PenData,
+  Text,
+  dataType,
+} from 'leafer-ui'
+import { IPos, IUserConfig } from './interface'
+import { handleTextStyle } from './utils'
+
+interface ITooltip extends IPen {
+  target?: ILeaf
+  isShow: boolean
+  showTimerId?: number | NodeJS.Timeout | null
+  hideTimerId?: number | NodeJS.Timeout | null
+  show(): void
+  hide(immediate?: boolean): void
+  update(pos: IPos): void
+}
+
+export interface ITooltipInputData extends IPenInputData {
+  target?: ILeaf
+  config?: IUserConfig
+  pointerPos?: IPos
+}
+
+export interface ITooltipData extends IPenData {
+  target?: ILeaf
+  pointerPos?: IPos
+}
+
+export class TooltipData extends PenData implements ITooltipData {
+  target?: ILeaf
+  timerId?: number | NodeJS.Timeout | null
+  pointerPos?: IPos
+}
+
+@registerUI()
+export class Tooltip extends Pen implements ITooltip {
+  public get __tag() {
+    return 'Tooltip'
+  }
+  public className: 'leafer-x-tooltip'
+  @dataProcessor(TooltipData)
+  public declare __: ITooltipData
+
+  @dataType({ x: 0, y: 0 })
+  public declare pointerPos?: IPos
+
+  @dataType()
+  public declare showTimerId?: number | NodeJS.Timeout | null
+
+  @dataType()
+  public declare hideTimerId?: number | NodeJS.Timeout | null
+
+  @dataType(false)
+  public declare isShow: boolean
+  @dataType()
+  public declare config: IUserConfig
+
+  @dataType()
+  public declare target?: ILeaf
+  constructor(data: ITooltipInputData) {
+    super(data)
+    this.target = data.target
+    this.config = data.config
+    this.show()
+  }
+
+  /**
+   * @description tooltip
+   * @param pos 位置信息
+   */
+  private createShapes(pos = this.__.pointerPos): void {
+    this.clear() // 清除之前创建的路径
+    const { width, height, text } = handleTextStyle(this.target, this.config)
+    const {
+      backgroundColor,
+      stroke,
+      color,
+      padding,
+      borderRadius,
+      fontSize,
+      fontWeight,
+      fontFamily,
+    } = this.config.style
+    let offset = this.config.offset
+    this.setStyle({
+      fill: backgroundColor,
+      stroke,
+    })
+    this.add(
+      new Text({
+        className: 'leafer-x-tooltip',
+        fill: color,
+        fontSize,
+        fontWeight,
+        fontFamily,
+        x: pos.x + offset[0],
+        y: pos.y + offset[1],
+        text: text,
+        padding,
+      })
+    )
+    this.roundRect(
+      pos.x + offset[0],
+      pos.y + offset[1],
+      width,
+      height,
+      borderRadius
+    )
+    this.isShow = true
+  }
+
+  private clearShowHideTimers() {
+    if (this.showTimerId) {
+      clearTimeout(this.showTimerId)
+      this.showTimerId = null
+    }
+
+    if (this.hideTimerId) {
+      clearTimeout(this.hideTimerId)
+      this.hideTimerId = null
+    }
+  }
+
+  public show(pos = this.__.pointerPos) {
+    this.clearShowHideTimers()
+    this.showTimerId = setTimeout(() => {
+      this.createShapes(pos)
+      clearTimeout(this.showTimerId)
+      this.showTimerId = null
+    }, this.config.showDelay)
+  }
+
+  public hide(immediate = false) {
+    this.clearShowHideTimers()
+    if (immediate) {
+      this.destroy()
+    } else {
+      if (!this.hideTimerId) {
+        this.hideTimerId = setTimeout(() => {
+          this.destroy()
+        }, this.config.hideDelay)
+      }
+    }
+  }
+
+  public update(pos: IPos) {
+    this.clearShowHideTimers()
+    if (this.isShow) {
+      this.createShapes(pos)
+    } else {
+      this.show(pos)
+    }
+  }
+
+  public destroyTooltip() {
+    this.clearShowHideTimers()
+    this.destroy()
+    this.isShow = false
+    this.target = undefined
+  }
+}

package/src/TooltipPlugin.ts

@@ -0,0 +1,187 @@
+import { App, PointerEvent } from '@leafer-ui/core'
+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'
+
+export class TooltipPlugin {
+  /**
+   * @param instance 实例
+   * @private
+   */
+  private instance: ILeafer | App
+  private aimLeafer: ILeafer
+  /**
+   * @param config 用户配置
+   * @private
+   */
+  private readonly config: IUserConfig
+
+  /**
+   * @param bindEventIds - 绑定的事件 id
+   * @private
+   */
+  private readonly pointEventId: IEventListenerId
+
+  constructor(instance: ILeafer | App, config?: IUserConfig) {
+    this.instance = instance
+    this.config = Object.assign({}, defaultConfig, config)
+    this.handleConfig()
+    this.initState()
+    this.pointEventId = this.initEvent()
+  }
+
+  /**
+   * @description 初始化状态
+   */
+  private initState() {
+    if (this.instance.isApp) {
+      const app = this.instance as App
+      if (app.sky === undefined) {
+        app.sky = app.addLeafer({
+          type: 'draw',
+          usePartRender: false,
+        })
+      }
+      this.aimLeafer = app.sky
+    } else if (this.instance.isLeafer) {
+      this.aimLeafer = this.instance
+    }
+  }
+
+  private handleConfig(){
+    if(this.config.theme==='dark'){
+      this.config.style.backgroundColor = "black"
+      this.config.style.color = "white"
+      }
+    }
+  
+  /**
+   * @description 初始化事件处理
+   * @private
+   */
+  private initEvent() {
+    return this.instance.on_(PointerEvent.MOVE, this.handlePointMove, this)
+  }
+
+  /**
+   * @description 处理鼠标移动事件
+   * @param event
+   * @private
+   */
+  private handlePointMove(event: PointerEvent) {
+    const result = this.instance.pick(
+      { x: event.x, y: event.y },
+      {
+        ignoreHittable: true,
+        through: true,
+      }
+    )
+
+    const target = this.filterTarget(result.throughPath.list)
+    if (!target) {
+      this.hideTooltip()
+      return
+    }
+
+    if (!this.handleAllowed(target)) {
+      this.hideTooltip()
+      return
+    }
+    this.handleTooltip(event, target)
+  }
+
+  private filterTarget(list: ILeaf[]): ILeaf | null {
+    const ignoreTag = ['Leafer', 'App']
+    const pureResult = list.filter((item) => {
+      if (
+        ignoreTag.includes(item?.tag) ||
+        item?.parent?.tag === 'Tooltip' ||
+        item?.className === 'leafer-x-tooltip'
+      ) {
+        return false
+      }
+      return true
+    })
+
+    return pureResult[pureResult.length - 1] || null
+  }
+
+  /**
+   * @description 处理显示许可
+   * @param target 目标节点
+   * @returns
+   */
+  private handleAllowed(target: ILeaf) {
+    const infoArr = ['#' + target.id, '.' + target.className, target.tag]
+    const { includesType, excludesType } = this.config
+
+    if (includesType.length === 0 && excludesType.length === 0) return true
+
+    const isInclude = infoArr.some((string) => includesType.includes(string))
+    const isExclude = infoArr.some((string) => excludesType.includes(string))
+
+    if (!isExclude && includesType.length === 0) return true
+    if (!isInclude && excludesType.length === 0) return false
+    return isInclude || !isExclude
+  }
+
+  /**
+   * @description 隐藏 tooltip
+   */
+  private hideTooltip() {
+    const tooltipList = this.aimLeafer.find('Tooltip') as Tooltip[]
+    tooltipList.forEach((tooltip: Tooltip) => {
+      tooltip.hide()
+    })
+  }
+
+  /**
+   * @description 创建或更新 tooltip
+   */
+  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.hide()
+      }
+    }
+
+    if (!processed) {
+      this.aimLeafer.add(
+        new Tooltip({
+          id,
+          pointerPos: { x: event.x, y: event.y },
+          target,
+          config: this.config,
+        })
+      )
+    }
+  }
+
+  /**
+   * @description 销毁
+   */
+  public destroy() {
+    const tooltipList = this.aimLeafer.find('Tooltip') as Tooltip[]
+    if (tooltipList) {
+      tooltipList.forEach((tooltip) => {
+        tooltip.destroyTooltip()
+        tooltip.parent.remove(tooltip)
+      })
+    }
+    this.instance.off_(this.pointEventId)
+    this.instance = null
+    this.aimLeafer = null
+  }
+}

package/src/defaultConfig.ts

@@ -0,0 +1,26 @@
+import { IUserConfig } from './interface'
+export const defaultConfig: IUserConfig = {
+  reference: 'pointer',
+  info: ['tag'],
+  showType: 'value',
+  formatter: () => undefined,
+  showDelay: 500,
+  hideDelay: 0,
+  arrow: false,
+  placement: 'right-end',
+  offset: [5, 5],
+  preventOverflow: false,
+  includesType: [],
+  excludesType: [],
+  theme: 'light',
+  style: {
+    backgroundColor: 'white',
+    stroke: 'black',
+    color: 'black',
+    borderRadius: 8,
+    padding: 8,
+    fontSize: 14,
+    fontWeight: 400,
+    fontFamily: `"Punctuation SC","Inter",ui-sans-serif,system-ui,"PingFang SC","Noto Sans CJK SC", "Noto Sans SC", "Heiti SC", "Microsoft YaHei", "DengXian", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
+  },
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { TooltipPlugin } from './TooltipPlugin'

package/src/interface/config.ts

@@ -0,0 +1,40 @@
+import { IFontWeight } from '@leafer-ui/interface'
+interface IUserConfig {
+  reference?: 'pointer' | 'element'
+  showDelay?: number
+  arrow?: boolean
+  hideDelay?: number
+  placement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+  offset?: [number, number]
+  info?: Array<string>
+  formatter?: (item?: any) => string | undefined
+  showType?: 'value' | 'key-value'
+  preventOverflow?: boolean
+  includesType?: Array<string>
+  excludesType?: Array<string>
+  theme?: 'light' | 'dark'
+  style?: IStyleConfig
+}
+interface IStyleConfig {
+  backgroundColor?: string
+  stroke?: string
+  color?: string
+  borderRadius?: number
+  padding?: number
+  fontSize?: number
+  fontWeight?: IFontWeight
+  fontFamily?: string
+}
+export type { IUserConfig }

package/src/interface/display.ts

@@ -0,0 +1,5 @@
+interface IPos {
+  x: number
+  y: number
+}
+export type { IPos }

package/src/interface/index.ts

@@ -0,0 +1,2 @@
+export * from './config'
+export * from './display'

package/src/utils.ts

@@ -0,0 +1,52 @@
+import { Box } from 'leafer-ui'
+import { ILeaf } from '@leafer-ui/interface'
+import { IUserConfig } from './interface'
+/**
+ * @description 获取uuid 考虑兼容性问题采用此方法
+ * @param length id长度
+ * @returns
+ */
+export const getTooltipId = function (target: ILeaf) {
+  return target.tag + target.innerId
+}
+export const handleTextStyle = function (target: ILeaf, config: IUserConfig) {
+  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 }
+}
+
+function handleContent(target: ILeaf, config: IUserConfig) {
+  let str = ''
+  const data = target as { [key: string]: any }
+  
+  // 如果formatter函数存在，则使用formatter函数进行格式化
+  if (config.formatter(data) !== undefined) {
+    str = config.formatter(data)
+  } else {
+    // 如果formatter函数不存在，则根据showType进行默认格式化
+    if (config.showType == 'value') {
+      str += config.info
+        .map((dataName: string) => `${data[dataName]}`)
+        .join('\n')
+    } else if (config.showType == 'key-value') {
+      str += config.info
+        .map((dataName: string) => `${dataName} : ${data[dataName]}`)
+        .join('\n')
+    }
+  }
+  return str
+}

package/types/index.d.ts

@@ -0,0 +1,48 @@
+import { App } from '@leafer-ui/core';
+import { IFontWeight, ILeafer } from '@leafer-ui/interface';
+
+interface IUserConfig {
+    reference?: 'pointer' | 'element';
+    showDelay?: number;
+    arrow?: boolean;
+    hideDelay?: number;
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+    offset?: [number, number];
+    info?: Array<string>;
+    formatter?: (item?: any) => string | undefined;
+    showType?: 'value' | 'key-value';
+    preventOverflow?: boolean;
+    includesType?: Array<string>;
+    excludesType?: Array<string>;
+    theme?: 'light' | 'dark';
+    style?: IStyleConfig;
+}
+interface IStyleConfig {
+    backgroundColor?: string;
+    stroke?: string;
+    color?: string;
+    borderRadius?: number;
+    padding?: number;
+    fontSize?: number;
+    fontWeight?: IFontWeight;
+    fontFamily?: string;
+}
+
+declare class TooltipPlugin {
+    private instance;
+    private aimLeafer;
+    private readonly config;
+    private readonly pointEventId;
+    constructor(instance: ILeafer | App, config?: IUserConfig);
+    private initState;
+    private handleConfig;
+    private initEvent;
+    private handlePointMove;
+    private filterTarget;
+    private handleAllowed;
+    private hideTooltip;
+    private handleTooltip;
+    destroy(): void;
+}
+
+export { TooltipPlugin };