Graph

这里将介绍Graph基类的实例化、实例属性、实例方法及生命周期等，所有内置图形都扩展自它，你也可以基于它扩展新的图形，扩展新图形。

宽高异常

实例化图形后，没有添加至 CRender 实例时，调用任何实例方法都会抛出异常。

实例化

/**
 * @description Graph 基类
 * @param {GraphConfig<Shape>} config 图形配置
 */
class Graph {
  constructor(config: GraphConfig<Shape>) {
    // ...
  }
}

点击以展示/隐藏 GraphConfig 类型详情

import { StyleConfig } from './style'
import { EaseCurve } from '@jiaminghi/transition/types/types/core/index'
import { RgbaValue } from '@jiaminghi/color/types/types'
import { Graph } from '../..'

export type HoverRect = [number, number, number, number]

export type Point = [number, number]

export type HoverCheck = (point: Point) => boolean

export type Move = (e: MouseEvent) => void

// eslint-disable-next-line
export type GraphConfig<Shape = any> = {
  /**
   * @description Graph shape
   */
  shape: Shape
  /**
   * @description Graph style
   */
  style?: StyleConfig<string | RgbaValue>
  /**
   * @description Weather to render graph
   */
  visible?: boolean
  /**
   * @description Whether to enable drag
   */
  drag?: boolean
  /**
   * @description Whether to enable hover
   */
  hover?: boolean
  /**
   * @description Graph rendering index
   *  Give priority to index high graph in rendering
   */
  index?: number
  /**
   * @description Animation delay time(ms)
   */
  animationDelay?: number
  /**
   * @description Number of animation frames
   */
  animationFrame?: number
  /**
   * @description Animation dynamic curve (Supported by transition)
   * @link https://github.com/jiaming743/Transition
   */
  animationCurve?: EaseCurve
  /**
   * @description Weather to pause graph animation
   */
  animationPause?: boolean
  /**
   * @description Rectangular hover detection zone
   *  Use this method for hover detection first
   * @example hoverRect = [0, 0, 100, 100] // [Rect start x, y, Rect width, height]
   */
  hoverRect?: HoverRect
  /**
   * @description Mouse enter event handler
   */
  onMouseEnter?: Function
  /**
   * @description Mouse outer event handler
   */
  onMouseOuter?: Function
  /**
   * @description Mouse click event handler
   */
  onClick?: Function
  /**
   * @description Funciton of draw graph
   */
  draw?: Function
  /**
   * @description Function of set Graph center
   */
  setGraphCenter?: (e?: MouseEvent) => void
  /**
   * @description Funciton of check graph is hovered
   */
  hoverCheck?: (point: Point) => boolean
  /**
   * @description Function of Graph move
   */
  move?: (e: MouseEvent) => void
  /**
   * @description Life cycle beforeAdd
   */
  // eslint-disable-next-line
  beforeAdd?: (graph: Graph) => any
  /**
   * @description Life cycle added
   */
  // eslint-disable-next-line
  added?: (graph: Graph) => any
  /**
   * Life Cycle when graph before draw
   */
  // eslint-disable-next-line
  beforeDraw?: (graph: Graph) => any
  /**
   * Life Cycle when graph drawed
   */
  // eslint-disable-next-line
  drawed?: (graph: Graph) => any
  /**
   * Life Cycle when graph before move
   */
  // eslint-disable-next-line
  beforeMove?: (e: MouseEvent, graph: Graph) => any
  /**
   * @description Life Cycle when graph moved
   */
  // eslint-disable-next-line
  moved?: (e: MouseEvent, graph: Graph) => any
  /**
   * @description Life Cycle when graph before delete
   */
  // eslint-disable-next-line
  beforeDelete?: (graph: Graph) => any
  /**
   * @description Life Cycle when graph deleted
   */
  // eslint-disable-next-line
  deleted?: (graph: Graph) => any
}

export enum Status {
  STATIC = 'STATIC',
  HOVER = 'HOVER',
  ACTIVE = 'ACTIVE',
  DRAG = 'DRAG',
}

export type AnimationKey = 'shape' | 'style'

export type AnimationFrameStateItem<Shape> = Partial<Shape> | StyleConfig<RgbaValue>

// eslint-disable-next-line
export type AnimationQueueItem<Shape = any> = {
  key: AnimationKey
  frameState: AnimationFrameStateItem<Shape>[]
}

实例属性

这里是Graph实例属性的介绍。

render

/**
 * @description 所属的CRender实例
 */
render!: CRender

shape

/**
 * @description 图形形状信息
 */
shape!: Shape

style

/**
 * @description 图形样式信息
 */
style!: Style

visible

/**
 * @description 是否渲染图形
 */
visible: boolean = true

drag

/**
 * @description 是否允许拖拽
 *
 * 启用拖拽的前置条件是启用hover检测
 */
drag: boolean = false

hover

/**
 * @description 是否启用hover检测
 *
 * 不启用将无法触发onMouseEnter / onMouseOuter / onClick事件
 * 也不能进行拖拽操作
 */
hover: boolean = false

index

/**
 * @description index越高 层级越高
 *
 * 优先渲染层级高者
 */
index: number = 1

animationDelay

/**
 * @description 动画延迟(毫秒)
 */
animationDelay: number = 0

animationFrame

/**
 * @description 每次动画的帧数
 *
 * 帧数越多 动画时长越长
 */
animationFrame: number = 30

animationCurve

/**
 * @description 动画动效曲线
 * @link https://github.com/jiaming743/Transition
 */
animationCurve: EaseCurve = 'linear'

animationPause

/**
 * @description 是否处于暂停动画状态
 */
animationPause: boolean = false

hoverRect

/**
 * @description 矩形悬浮检测盒
 * 如果配置该项 将优先使用检测盒进行悬浮检测
 * @example hoverRect = [0, 0, 100, 100] // [Rect start x, y, Rect width, height]
 */
hoverRect?: HoverRect

onMouseEnter

/**
 * @description Mouse enter事件处理器
 */
onMouseEnter?: (e: MouseEvent) => any

onMouseOuter

/**
 * @description Mouse outer事件处理器
 */
onMouseOuter?: (e: MouseEvent) => any

onClick

/**
 * @description Mouse click事件处理器
 */
onClick?: (e: MouseEvent) => any

status

/**
 * @description 图形当前状态
 */
status: Status = Status.STATIC

animationQueue

/**
 * @description 图形动画队列数据
 */
animationQueue: AnimationQueueItem<Shape>[] = []

TIP

启用图形的mouseEnter，mouseOuter，click等事件支持需要将hover属性配置为true。扩展的新图形需要配置hoverCheck方法以提供事件支持。

实例方法

这里是Graph基类实例方法的介绍。

attr

/**
 * @description 修改图形状态
 * @param {keyof GraphConfig<Shape>} key 要修改的属性键
 * @param {Partial<GraphConfig<Shape>[typeof key]>} value 修改的目标状态
 * @param {boolean} reDraw 是否重新渲染
 */
attr(
  key: keyof GraphConfig<Shape>,
  value: Partial<GraphConfig<Shape>[typeof key]>,
  reDraw: boolean = true
): void {
  // ...
}

animation

/**
 * @description 修改图形形状或样式(伴随动画)
 * @param {AnimationKey} key 要修改的属性键 ('shape' | 'style')
 * @param {Partial<Shape> | StyleConfig<string | RgbaValue>} value 修改的目标状态
 * @param {boolean} 是否等待后续操作 暂不渲染
 */
async animation(key: 'shape', value: Partial<Shape>, wait?: boolean): Promise<void>
async animation(
  key: 'style',
  value: StyleConfig<string | RgbaValue>,
  wait?: boolean
): Promise<void>
async animation(
  key: AnimationKey,
  value: Partial<Shape> | StyleConfig<string | RgbaValue>,
  wait: boolean = false
): Promise<void> {
  // ...
}

animationEnd

/**
 * @description 直接跳至最后一帧动画
 */
animationEnd(): void {
  // ...
}

pauseAnimation

/**
 * @description 暂停动画
 */
pauseAnimation(): void {
  // ...
}

playAnimation

/**
 * @description 尝试进行动画
 */
playAnimation(): Promise<void> {
  // ...
}

clone

/**
 * @description 克隆图形
 * @param {boolean} 是否自动添加至所属CRender实例
 */
clone(add: boolean = true): this {
  // ...
}

生命周期

beforeAdd

/**
 * @description 图形添加前被调用
 */
beforeAdd?: (graph: Graph) => any

added

/**
 * @description 图形添加后被调用
 */
added?: (graph: Graph) => any

beforeDraw

/**
 * @description 图形渲染前被调用
 */
beforeDraw?: (graph: Graph) => any

drawed

/**
 * @description 图形渲染后被调用
 */
drawed?: (graph: Graph) => any

beforeMove

/**
 * @description 图形移动前被调用
 * @param {MouseEvent} e 鼠标事件
 */
beforeMove?: (e: MouseEvent, graph: Graph) => any

moved

/**
 * @description 图形移动后被调用
 * @param {MouseEvent} e 鼠标事件
 */
moved?: (e: MouseEvent, graph: Graph) => any

beforeDelete

/**
 * @description 图形删除前被调用
 */
beforeDelete?: (graph: Graph) => any

deleted

/**
 * @description 图形删除后被调用
 */
deleted?: (graph: Graph) => any

覆盖默认行为

实例化时，你可以配置下列方法，覆盖默认行为。

draw

/**
 * @description 图形的绘制方法
 */
draw?: Function

setGraphCenter

/**
 * @description 设置图形中心点的方法
 */
setGraphCenter?: (e?: MouseEvent) => void

hoverCheck

/**
 * @description 图形的悬浮检测方法
 */
hoverCheck?: (point: Point) => boolean

move

/**
 * @description 图形的移动方法
 */
move?: (e: MouseEvent) => void