Class Text

Hierarchy (view full)

Implements

  • GroupLike

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);
} & {}>
__canvasFillGradient: CanvasGradient
__canvasFillPattern: CanvasPattern
__canvasStrokeGradient: CanvasGradient
__canvasStrokePattern: CanvasPattern
__clipPaths?: Path<PathProps>[]
__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.

__hoverStyle?: CommonStyleProps
__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

__svgEl: SVGElement

Render2D instance will be assigned when element is associated with render2d

_normalState: DisplayableState
_paintRect: BoundingRect
_prevPaintRect: BoundingRect
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. }

culling: boolean

If enable culling

currentStates?: string[] = []
cursor: string

Mouse cursor when hovered

dirtyRectTolerance: number
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.

ignoreCoarsePointer?: boolean

Never increase to target size

incremental: boolean

For increamental rendering

innerTransformable: Transformable

Will use this to calculate transform matrix instead of Element itseelf if it's give. Not exposed to developers

invTransform: MatrixArray
invisible: boolean

Whether the displayable object is visible. when it is true, the displayable object is not drawn, but the mouse event can still trigger the object.

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
overlap: "show" | "hidden" | "blur"

How to handling label overlap

hidden:

parent: Group
prevStates?: string[]
rectHover: boolean

If hover area is bounding rect

rotation: number
scaleX: number
scaleY: number
silent: boolean

Whether to respond to mouse events.

skewX: number
skewY: number
stateProxy: ((stateName) => TextState)

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

stateTransition: ElementAnimateConfig

Animation config applied on state switching.

states: Dictionary<TextState>

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 = 'text'

Element type

useHoverLayer?: boolean

*********** Properties will be inejected in other modules. ******************

x: number
y: number
z: number
z2: number
zlevel: number

The z level determines the displayable object can be drawn in which layer canvas.

initDefaultProps: void = ...

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. textAlign: string. optional. use style.textAlign by default. textVerticalAlign: string. optional. use style.textVerticalAlign by default. }

Methods

  • Parameters

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

    Returns void

  • Parameters

    • states: DisplayableState[]

    Returns DisplayableState

  • Parameters

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

    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

  • Parameters

    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 }
    })
  • Clear all states.

    Parameters

    • Optional noAnimation: boolean

    Returns void

  • If displayable element contain coord x, y

    Parameters

    • x: number
    • y: number

    Returns boolean

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

    Returns void

  • Parameters

    • Optional notRedraw: boolean

    Returns void

  • Drift element

    Parameters

    • dx: number

      dx on the global space

    • dy: number

      dy on the global space

    • Optional e: ElementEvent

    Returns void

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

    Returns boolean

  • Determine if an object is a valid style object. Which means it is created by createStyle.

    A valid style object will have all default values in it's prototype. To avoid get null/undefined values.

    Parameters

    Returns any

  • 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, Text>>

      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, Text>>

      The event handler.

    • Optional context: Ctx

    Returns this

  • If bounding rect of element contain coord x, y

    Parameters

    • x: number
    • y: number

    Returns boolean

  • 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

  • Replace exists state.

    Parameters

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

      If still add when even if replaced target not exists.

    Returns void

  • Parameters

    • defaultTextStyle: DefaultTextStyle

    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

  • Attach text on element

    Parameters

    • textContent: never

    Returns void

  • Parameters

    • viewWidth: number
    • viewHeight: number
    • considerClipPath: boolean
    • considerAncestors: boolean

    Returns boolean

  • 停止动画

    Parameters

    • Optional scope: string
    • Optional forwardToLast: boolean

      If move to last frame before stop

    Returns Text

  • Is style changed. Used with dirtyStyle.

    Returns boolean

  • Mark style updated. Only useful when style is used for caching. Like in the text.

    Returns void

  • 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

    • cb: ((this, el) => void)
        • (this, el): void
        • Parameters

          Returns void

    • Optional context: Context

    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

  • 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

  • Replace style property. It will create a new style if given obj is not a valid style object.

    Parameters

    Returns void