MoveEvent

Move event, typically used for panning the view or elements in viewport interaction.

1. Mobile / touchpad: two-finger swipe.
2. Mouse: scroll wheel (vertical), Shift + scroll wheel (horizontal).

Inheritance

MoveEvent  >  DragEvent  >  PointerEvent  >  UIEvent  >  Event

Requires installing the viewport plugin, or directly installing leafer-editor (which already includes this plugin).

Event Names

MoveEvent.START

Start move event.

move.start

MoveEvent.MOVE

Move event.

move

MoveEvent.DRAG_ANIMATE

Inertia animation movement generated by config.move.dragAnimate. Triggered before MoveEvent.END.

MoveEvent.END

End move event.

move.end

Key Properties

moveType: 'move' | 'drag'

Type of movement. 'drag' indicates movement via dragging, 'move' indicates movement via wheel or multi-touch gestures.

moveX: number

X-axis offset of this movement (world coordinates).

moveY: number

Y-axis offset of this movement (world coordinates).

totalX: number

Total X-axis movement in the current session (world coordinates).

totalY: number

Total Y-axis movement in the current session (world coordinates).

multiTouch: boolean

Whether the event is triggered by multi-touch input.

Coordinate Conversion Methods

Conversion methods for moveX, moveY.

getPageMove ( ): IPointData

Get movement offset in page coordinate space.

getInnerMove ( relative?: UI): IPointData

Get movement relative to the inner coordinate system of a given element. Defaults to the current listener if relative is not provided.

getLocalMove ( relative?: UI): IPointData

Get movement relative to the local coordinate system of a given element. Defaults to the current listener if relative is not provided.

Total movement

Conversion methods for totalX, totalY.

getPageTotal ( ): IPointData

Get total movement in page coordinate space.

getInnerTotal ( relative?: UI): IPointData

Get total movement relative to the inner coordinate system of a given element. Defaults to the current listener if relative is not provided.

getLocalTotal ( relative: UI): IPointData

Get total movement relative to the local coordinate system of a given element. Defaults to the current listener if relative is not provided.

Inherited Events

MoveEvent  >  DragEvent  >  PointerEvent  >  UIEvent  >  Event

Example

simple.ts

// #监听平移交互事件
import { Leafer, Rect, MoveEvent } from 'leafer-ui'
import '@leafer-in/viewport' // 导入视口插件

const leafer = new Leafer({
    view: window,
    type: 'custom'
})

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

leafer.on(MoveEvent.MOVE, function (e: MoveEvent) {
    leafer.moveWorld(e.moveX, e.moveY)
})

simple.js

// #监听平移交互事件
import { Leafer, Rect, MoveEvent } from 'leafer-ui'
import '@leafer-in/viewport' // 导入视口插件

const leafer = new Leafer({
    view: window,
    type: 'custom'
})

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

leafer.on(MoveEvent.MOVE, function (e) {
    leafer.moveWorld(e.moveX, e.moveY)
})