Class Element<Props>

Type Parameters

Hierarchy (view full)

  • Transformable
  • default<{
        [key in ElementEventName]: ((e) => void | boolean)
    } & {
        [key in string]: ((...args) => void | boolean)
    }>
  • ElementEventHandlerProps

Constructors

Properties

Methods

Constructors

Properties

_$eventProcessor: EventProcessor<{
    click: ((e) => boolean | void);
    contextmenu: ((e) => boolean | void);
    dblclick: ((e) => boolean | void);
    drag: ((e) => boolean | void);
    dragend: ((e) => boolean | void);
    dragenter: ((e) => boolean | void);
    dragleave: ((e) => boolean | void);
    dragover: ((e) => boolean | void);
    dragstart: ((e) => boolean | void);
    drop: ((e) => boolean | void);
    globalout: ((e) => boolean | void);
    mousedown: ((e) => boolean | void);
    mousemove: ((e) => boolean | void);
    mouseout: ((e) => boolean | void);
    mouseover: ((e) => boolean | void);
    mouseup: ((e) => boolean | void);
    mousewheel: ((e) => boolean | void);
} & {}>
__dirty: number

Dirty bits. From which painter will determine if this displayable object needs brush.

__hostTarget: Element<ElementProps>

If element is used as a component of other element.

__inHover: boolean

If element has been moved to the hover layer.

If so, dirty will only trigger the render2d refresh hover layer

__isRendered: boolean

If element was painted on the screen

Render2D instance will be assigned when element is associated with render2d

_normalState: ElementState
anchorX: number

Will translated the element to the anchor position before applying other transforms.

anchorY: number
anid: string

Id for mapping animation

animators: default<any>[] = []
calculateTextPosition: ElementCalculateTextPosition

The string value of textPosition needs to be calculated to a real postion. For example, 'inside' is calculated to [rect.width/2, rect.height/2] by default. See contain/text.js#calculateTextPosition for more details. But some coutom shapes like "pin", "flag" have center that is not exactly [width/2, height/2]. So we provide this hook to customize the calculation for those shapes. It will be called if the style.textPosition is a string.

Param: out

Prepared out object. If not provided, this method should be responsible for creating one.

Param: style

Param: rect

{x, y, width, height}

Returns

out The same as the input out. { x: number. mandatory. y: number. mandatory. align: string. optional. use style.textAlign by default. verticalAlign: string. optional. use style.textVerticalAlign by default. }

currentStates?: string[] = []
draggable: boolean | "horizontal" | "vertical"

Whether it can be dragged.

dragging: boolean

Whether is it dragging.

extra: Dictionary<unknown>
globalScaleRatio: number

Scale ratio

id: number = ...
ignore: boolean

If ignore drawing and events of the element object

ignoreClip: boolean

If ignore clip from it's parent or hosts. Applied on itself and all it's children.

NOTE: It won't affect the clipPath set on the children.

invTransform: MatrixArray
isGroup: boolean

是否是 Group

name: string

Element name

onclick: ElementEventCallback<unknown, unknown>
oncontextmenu: ElementEventCallback<unknown, unknown>
ondblclick: ElementEventCallback<unknown, unknown>
ondrag: ElementEventCallback<unknown, unknown>
ondragend: ElementEventCallback<unknown, unknown>
ondragenter: ElementEventCallback<unknown, unknown>
ondragleave: ElementEventCallback<unknown, unknown>
ondragover: ElementEventCallback<unknown, unknown>
ondragstart: ElementEventCallback<unknown, unknown>
ondrop: ElementEventCallback<unknown, unknown>
onmousedown: ElementEventCallback<unknown, unknown>
onmousemove: ElementEventCallback<unknown, unknown>
onmouseout: ElementEventCallback<unknown, unknown>
onmouseover: ElementEventCallback<unknown, unknown>
onmouseup: ElementEventCallback<unknown, unknown>
onmousewheel: ElementEventCallback<unknown, unknown>
originX: number

Origin of scale, rotation, skew

originY: number
parent: Group
prevStates?: string[]
rotation: number
scaleX: number
scaleY: number
silent: boolean

Whether to respond to mouse events.

skewX: number
skewY: number
stateProxy?: ((stateName, targetStates?) => ElementState)

Proxy function for getting state with given stateName. Render2D will first try to get with stateProxy. Then find from states if stateProxy returns nothing

targetStates will be given in useStates

Type declaration

    • (stateName, targetStates?): ElementState
    • Proxy function for getting state with given stateName. Render2D will first try to get with stateProxy. Then find from states if stateProxy returns nothing

      targetStates will be given in useStates

      Parameters

      • stateName: string
      • Optional targetStates: string[]

      Returns ElementState

stateTransition: ElementAnimateConfig

Animation config applied on state switching.

states: Dictionary<ElementState> = {}

Store of element state. 'normal' key is preserved for default properties.

textConfig?: ElementTextConfig

Config of textContent. Inlcuding layout, color, ...etc.

textGuideLineConfig?: ElementTextGuideLineConfig

Config for guide line calculating.

NOTE: This is just a property signature. READ and WRITE are all done in .

transform: MatrixArray
type: string

Element type

x: number
y: number
initDefaultProps: void = ...

Methods

  • Parameters

    • stateName: string
    • state: ElementState
    • normalState: ElementState
    • keepCurrentStates: boolean
    • transition: boolean
    • animationCfg: ElementAnimateConfig

    Returns void

  • Parameters

    Returns void

  • Parameters

    • toState: ElementState

    Returns void

  • Parameters

    • states: ElementState[]

    Returns ElementState

  • Parameters

    • toState: Dictionary<any>
    • normalState: Dictionary<any>
    • primaryKeys: readonly string[]

    Returns void

  • Parameters

    Returns void

  • Parameters

    • animator: default<any>
    • key: string

    Returns void

  • Add self from render2d instance. Not recursively because it will be invoked when element added to storage.

    Parameters

    Returns void

  • Hook after update

    Returns void

  • 动画

    Parameters

    • Optional key: string
    • Optional loop: boolean

      Whether to loop animation.

    • Optional allowDiscreteAnimation: boolean

      Whether to allow discrete animation @example: el.animate('style', false) .when(1000, {x: 10} ) .done(function(){ // Animation done }) .start()

    Returns default<any>

  • Animate from the target state to current state. The params and the value are the same as this.animateTo.

    Parameters

    Returns void

  • Parameters

    • target: Props
    • Optional cfg: ElementAnimateConfig
    • Optional animationProps: MapToType<Props, boolean>

      A map to specify which property to animate. If not specified, will animate all.

    Returns void

    Example

    // Animate position
    el.animateTo({
    position: [10, 10]
    }, { done: () => { // done } })

    // Animate shape, style and position in 100ms, delayed 100ms, with cubicOut easing
    el.animateTo({
    shape: {
    width: 500
    },
    style: {
    fill: 'red'
    }
    position: [10, 10]
    }, {
    duration: 100,
    delay: 100,
    easing: 'cubicOut',
    done: () => { // done }
    })
  • Parameters

    Returns this

  • Type Parameters

    • T extends string | number | symbol

    Parameters

    Returns this

  • Parameters

    • key: string
    • value: unknown

    Returns void

  • Hook before update

    Returns void

  • Returns boolean

  • Clear all states.

    Parameters

    • Optional noAnimation: boolean

    Returns void

  • Parameters

    • source: Transformable

    Returns void

  • 分解transform矩阵到position, rotation, scale

    Returns void

  • Besides marking elements to be refreshed. It will also invalid all cache and doing recalculate next frame.

    Returns void

  • Drift element

    Parameters

    • dx: number

      dx on the global space

    • dy: number

      dy on the global space

    • Optional e: ElementEvent

    Returns void

  • Ensure state exists. If not, will create one and return.

    Parameters

    • name: string

    Returns ElementState

  • Get computed global transform NOTE: this method will force update transform on all ancestors. Please be aware of the potential performance cost.

    Returns MatrixArray

  • Returns string

  • Parameters

    • textFill: string

    Returns string

  • Returns number

  • Returns string

  • Parameters

    • textFill: string

    Returns string

  • Get state object

    Parameters

    • name: string

    Returns ElementState

  • Get attached text content.

    Returns Text

  • If has any state.

    Returns boolean

  • Hide the element

    Returns void

  • Return if el.silent or any ancestor element has silent true.

    Returns boolean

  • Mark element needs to be repainted

    Returns void

  • If needs to compute transform

    Returns boolean

  • Unbind a event.

    Parameters

    • Optional eventType: string

      The event name. If no event input, "off" all listeners.

    • Optional handler: Function

      The event handler. If no handler input, "off" all listeners of the event.

    Returns this

  • Bind a handler.

    Type Parameters

    • Ctx

    • EvtNm extends string

    Parameters

    • event: EvtNm

      The event name.

    • handler: WithThisType<({
          click: ((e) => boolean | void);
          contextmenu: ((e) => boolean | void);
          dblclick: ((e) => boolean | void);
          drag: ((e) => boolean | void);
          dragend: ((e) => boolean | void);
          dragenter: ((e) => boolean | void);
          dragleave: ((e) => boolean | void);
          dragover: ((e) => boolean | void);
          dragstart: ((e) => boolean | void);
          drop: ((e) => boolean | void);
          globalout: ((e) => boolean | void);
          mousedown: ((e) => boolean | void);
          mousemove: ((e) => boolean | void);
          mouseout: ((e) => boolean | void);
          mouseover: ((e) => boolean | void);
          mouseup: ((e) => boolean | void);
          mousewheel: ((e) => boolean | void);
      } & {})[EvtNm], CbThis<Ctx, Element<Props>>>

      The event handler.

    • Optional context: Ctx

    Returns this

  • Bind a handler.

    Type Parameters

    • Ctx

    • EvtNm extends string

    Parameters

    • event: EvtNm

      The event name.

    • query: EventQuery
    • handler: WithThisType<({
          click: ((e) => boolean | void);
          contextmenu: ((e) => boolean | void);
          dblclick: ((e) => boolean | void);
          drag: ((e) => boolean | void);
          dragend: ((e) => boolean | void);
          dragenter: ((e) => boolean | void);
          dragleave: ((e) => boolean | void);
          dragover: ((e) => boolean | void);
          dragstart: ((e) => boolean | void);
          drop: ((e) => boolean | void);
          globalout: ((e) => boolean | void);
          mousedown: ((e) => boolean | void);
          mousemove: ((e) => boolean | void);
          mouseout: ((e) => boolean | void);
          mouseover: ((e) => boolean | void);
          mouseup: ((e) => boolean | void);
          mousewheel: ((e) => boolean | void);
      } & {})[EvtNm], CbThis<Ctx, Element<Props>>>

      The event handler.

    • Optional context: Ctx

    Returns this

  • Remove clip path

    Returns void

  • Remove self from render2d instance. Not recursively because it will be invoked when element added to storage.

    Parameters

    Returns void

  • Remove state

    Parameters

    • state: string

      State to remove

    Returns void

  • Remove text config

    Returns void

  • Remove attached text element.

    Returns void

  • Returns void

  • Replace exists state.

    Parameters

    • oldState: string
    • newState: string
    • forceAdd: boolean

      If still add when even if replaced target not exists.

    Returns void

  • Parameters

    • toState: ElementState

    Returns void

  • Set clip path

    clipPath can't be shared between two elements.

    Parameters

    Returns void

  • Parameters

    Returns void

  • Set origin from array

    Parameters

    • arr: number[]

    Returns void

  • Set position from array

    Parameters

    • arr: number[]

    Returns void

  • Set scale from array

    Parameters

    • arr: number[]

    Returns void

  • Set skew from array

    Parameters

    • arr: number[]

    Returns void

  • Set layout of attached text. Will merge with the previous.

    Parameters

    Returns void

  • Attach text on element

    Parameters

    Returns void

  • Parameters

    Returns void

  • Show the element

    Returns void

  • 停止动画

    Parameters

    • Optional scope: string
    • Optional forwardToLast: boolean

      If move to last frame before stop

    Returns Element<Props>

  • Toogle state.

    Parameters

    • state: string
    • enable: boolean

    Returns void

  • 变换局部坐标位置到全局坐标空间

    Parameters

    • x: number
    • y: number

    Returns number[]

  • 变换坐标位置到 shape 的局部坐标空间

    Parameters

    • x: number
    • y: number

    Returns number[]

  • Type Parameters

    • Context

    Parameters

    Returns void

  • Dispatch a event.

    Type Parameters

    • EvtNm extends string

    Parameters

    • eventType: EvtNm

      The event name.

    • Rest ...args: Parameters<({
          click: ((e) => boolean | void);
          contextmenu: ((e) => boolean | void);
          dblclick: ((e) => boolean | void);
          drag: ((e) => boolean | void);
          dragend: ((e) => boolean | void);
          dragenter: ((e) => boolean | void);
          dragleave: ((e) => boolean | void);
          dragover: ((e) => boolean | void);
          dragstart: ((e) => boolean | void);
          drop: ((e) => boolean | void);
          globalout: ((e) => boolean | void);
          mousedown: ((e) => boolean | void);
          mousemove: ((e) => boolean | void);
          mouseout: ((e) => boolean | void);
          mouseover: ((e) => boolean | void);
          mouseup: ((e) => boolean | void);
          mousewheel: ((e) => boolean | void);
      } & {})[EvtNm]>

    Returns this

  • Dispatch a event with context, which is specified at the last parameter.

    Parameters

    • type: string

      The event name.

    • Rest ...args: any[]

    Returns this

  • Update each frame

    Returns void

  • Parameters

    • key: string

    Returns void

  • Parameters

    • Optional forceUpdate: boolean

    Returns void

  • Update global transform

    Returns void

  • Use state. State is a collection of properties. Will return current state object if state exists and stateName has been changed.

    Parameters

    • stateName: string

      State name to be switched to

    • Optional keepCurrentStates: boolean
    • Optional noAnimation: boolean
    • Optional forceUseHoverLayer: boolean

    Returns any

  • Apply multiple states.

    Parameters

    • states: string[]

      States list.

    • Optional noAnimation: boolean
    • Optional forceUseHoverLayer: boolean

    Returns void