@leafer-in/viewport 1.1.1

package/src/interaction/MultiTouchHelper.ts

@@ -0,0 +1,23 @@
+import { IMultiTouchData, IKeepTouchData } from '@leafer-ui/interface'
+
+import { PointHelper } from '@leafer-ui/core'
+
+
+export const MultiTouchHelper = {
+
+    getData(list: IKeepTouchData[]): IMultiTouchData {
+        const a = list[0], b = list[1]
+        const lastCenter = PointHelper.getCenter(a.from, b.from)
+        const center = PointHelper.getCenter(a.to, b.to)
+        const move = { x: center.x - lastCenter.x, y: center.y - lastCenter.y }
+
+        const lastDistance = PointHelper.getDistance(a.from, b.from)
+        const distance = PointHelper.getDistance(a.to, b.to)
+        const scale = distance / lastDistance
+
+        const rotation = PointHelper.getRotation(a.from, b.from, a.to, b.to)
+
+        return { move, scale, rotation, center }
+    }
+
+}

package/src/interaction/Transformer.ts

@@ -0,0 +1,98 @@
+import { IMoveEvent, IZoomEvent, IRotateEvent, ITimer } from '@leafer-ui/interface'
+
+import { InteractionBase, MoveEvent, ZoomEvent, RotateEvent } from '@leafer-ui/core'
+
+
+export class Transformer {
+
+    public get transforming(): boolean { return !!(this.moveData || this.zoomData || this.rotateData) }
+
+    protected interaction: InteractionBase
+    protected moveData: IMoveEvent
+    protected zoomData: IZoomEvent
+    protected rotateData: IRotateEvent
+    protected transformTimer: ITimer
+
+    constructor(interaction: InteractionBase) {
+        this.interaction = interaction
+    }
+
+    public move(data: IMoveEvent): void {
+        const { interaction } = this
+        if (!data.moveType) data.moveType = 'move'
+
+        if (!this.moveData) {
+            this.setPath(data)
+            this.moveData = { ...data, moveX: 0, moveY: 0 }
+            interaction.emit(MoveEvent.START, this.moveData)
+        }
+
+        data.path = this.moveData.path
+        interaction.emit(MoveEvent.BEFORE_MOVE, data)
+        interaction.emit(MoveEvent.MOVE, data)
+
+        this.transformEndWait()
+    }
+
+    public zoom(data: IZoomEvent): void {
+        const { interaction } = this
+
+        if (!this.zoomData) {
+            this.setPath(data)
+            this.zoomData = { ...data, scale: 1 }
+            interaction.emit(ZoomEvent.START, this.zoomData)
+        }
+
+        data.path = this.zoomData.path
+        interaction.emit(ZoomEvent.BEFORE_ZOOM, data)
+        interaction.emit(ZoomEvent.ZOOM, data)
+
+        this.transformEndWait()
+    }
+
+    public rotate(data: IRotateEvent): void {
+        const { interaction } = this
+
+        if (!this.rotateData) {
+            this.setPath(data)
+            this.rotateData = { ...data, rotation: 0 }
+            interaction.emit(RotateEvent.START, this.rotateData)
+        }
+
+        data.path = this.rotateData.path
+        interaction.emit(RotateEvent.BEFORE_ROTATE, data)
+        interaction.emit(RotateEvent.ROTATE, data)
+
+        this.transformEndWait()
+    }
+
+    public setPath(data: any): void {
+        const { interaction } = this
+        const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)
+        data.path = path
+        interaction.cancelHover()
+    }
+
+    protected transformEndWait(): void {
+        clearTimeout(this.transformTimer)
+        this.transformTimer = setTimeout(() => {
+            this.transformEnd()
+        }, this.interaction.p.transformTime)
+    }
+
+    public transformEnd(): void {
+        const { interaction, moveData, zoomData, rotateData } = this
+        if (moveData) interaction.emit(MoveEvent.END, moveData)
+        if (zoomData) interaction.emit(ZoomEvent.END, zoomData)
+        if (rotateData) interaction.emit(RotateEvent.END, rotateData)
+        this.reset()
+    }
+
+    public reset(): void {
+        this.zoomData = this.moveData = this.rotateData = null
+    }
+
+    public destroy(): void {
+        this.reset()
+    }
+}

package/src/interaction/WheelEventHelper.ts

@@ -0,0 +1,48 @@
+import { IPointData, IWheelEvent, IWheelConfig } from '@leafer-ui/interface'
+
+import { MathHelper, Platform } from '@leafer-ui/core'
+
+
+export const WheelEventHelper = {
+
+    getMove(event: IWheelEvent, config: IWheelConfig): IPointData {
+        let { moveSpeed } = config
+        let { deltaX, deltaY } = event
+        if (event.shiftKey && !deltaX) { // Window
+            deltaX = deltaY
+            deltaY = 0
+        }
+        if (deltaX > 50) deltaX = Math.max(50, deltaX / 3)
+        if (deltaY > 50) deltaY = Math.max(50, deltaY / 3)
+        return { x: -deltaX * moveSpeed * 2, y: -deltaY * moveSpeed * 2 }
+    },
+
+    getScale(event: IWheelEvent, config: IWheelConfig): number {
+
+        let zoom: boolean
+        let scale = 1
+        let { zoomMode, zoomSpeed } = config
+
+        const delta = event.deltaY || event.deltaX
+
+        if (zoomMode) {
+            // mac 触摸板滚动手势的deltaY是整数, 鼠标滚动/触摸板缩放的deltaY有小数点， firfox鼠标滚动为整数，为18或19的倍数
+            // windows 始终是整数
+            zoom = (zoomMode === 'mouse') ? true : (!event.deltaX && (Platform.intWheelDeltaY ? Math.abs(delta) > 17 : Math.ceil(delta) !== delta))
+            if (event.shiftKey || event.metaKey || event.ctrlKey) zoom = true
+        } else {
+            zoom = !event.shiftKey && (event.metaKey || event.ctrlKey)
+        }
+
+        if (zoom) {
+            zoomSpeed = MathHelper.within(zoomSpeed, 0, 1)
+            const min = event.deltaY ? config.delta.y : config.delta.x
+            scale = 1 - delta / (min * 4) * zoomSpeed // zoomSpeed
+            if (scale < 0.5) scale = 0.5
+            if (scale >= 1.5) scale = 1.5
+        }
+
+        return scale
+    }
+
+}

package/src/type/custom.ts

@@ -0,0 +1,8 @@
+import { ILeaferBase } from '@leafer-ui/interface'
+
+import { addViewport } from './viewport'
+
+
+export function custom(leafer: ILeaferBase): void {
+    addViewport(leafer, null, true)
+}

package/src/type/design.ts

@@ -0,0 +1,17 @@
+import { ILeaferBase } from '@leafer-ui/interface'
+
+import { addViewport } from './viewport'
+
+
+export function design(leafer: ILeaferBase): void {
+    addViewport(leafer, {
+        zoom: {
+            min: 0.01,
+            max: 256
+        },
+        move: {
+            holdSpaceKey: true,
+            holdMiddleKey: true,
+        }
+    })
+}

package/src/type/document.ts

@@ -0,0 +1,11 @@
+import { ILeaferBase } from '@leafer-ui/interface'
+
+import { addViewport } from './viewport'
+
+
+export function document(leafer: ILeaferBase): void {
+    addViewport(leafer, {
+        zoom: { min: 1 },
+        move: { scroll: 'limit' }
+    })
+}

package/src/type/viewport.ts

@@ -0,0 +1,32 @@
+import { ILeaferBase, IPointData, ILeaferConfig } from '@leafer-ui/interface'
+
+import { MoveEvent, ZoomEvent, PointHelper, DataHelper } from '@leafer-ui/core'
+
+
+export function addViewport(leafer: ILeaferBase, mergeConfig?: ILeaferConfig, custom?: boolean): void {
+    addViewportConfig(leafer.parentApp ? leafer.parentApp : leafer, mergeConfig)
+    if (leafer.isApp || custom) return
+
+    leafer.__eventIds.push(
+        leafer.on_(MoveEvent.BEFORE_MOVE, (e: MoveEvent) => {
+            leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY))
+        }),
+        leafer.on_(ZoomEvent.BEFORE_ZOOM, (e: ZoomEvent) => {
+            const { zoomLayer } = leafer
+            const changeScale = leafer.getValidScale(e.scale)
+            if (changeScale !== 1) {
+                PointHelper.scaleOf(zoomLayer as IPointData, e, changeScale)
+                zoomLayer.scale = zoomLayer.__.scaleX * changeScale
+            }
+        })
+    )
+}
+
+export function addViewportConfig(leafer: ILeaferBase, mergeConfig?: ILeaferConfig): void {
+    if (mergeConfig) DataHelper.assign(leafer.config, mergeConfig)
+    DataHelper.assign(leafer.config, {
+        wheel: { preventDefault: true },
+        touch: { preventDefault: true },
+        pointer: { preventDefaultMenu: true }
+    } as ILeaferConfig, leafer.userConfig)
+}

package/types/index.d.ts

@@ -0,0 +1,40 @@
+import { ILeaferTypeList, ILeaferTypeFunction, ILeaferBase, ILeaferConfig, IKeepTouchData, IMultiTouchData, IWheelEvent, IWheelConfig, IPointData, IMoveEvent, IZoomEvent, IRotateEvent, ITimer } from '@leafer-ui/interface';
+import { InteractionBase } from '@leafer-ui/core';
+
+declare const LeaferTypeCreator: {
+    list: ILeaferTypeList;
+    register(name: string, fn: ILeaferTypeFunction): void;
+    run(name: string, leafer: ILeaferBase): void;
+};
+
+declare function addViewport(leafer: ILeaferBase, mergeConfig?: ILeaferConfig, custom?: boolean): void;
+declare function addViewportConfig(leafer: ILeaferBase, mergeConfig?: ILeaferConfig): void;
+
+declare const MultiTouchHelper: {
+    getData(list: IKeepTouchData[]): IMultiTouchData;
+};
+
+declare const WheelEventHelper: {
+    getMove(event: IWheelEvent, config: IWheelConfig): IPointData;
+    getScale(event: IWheelEvent, config: IWheelConfig): number;
+};
+
+declare class Transformer {
+    get transforming(): boolean;
+    protected interaction: InteractionBase;
+    protected moveData: IMoveEvent;
+    protected zoomData: IZoomEvent;
+    protected rotateData: IRotateEvent;
+    protected transformTimer: ITimer;
+    constructor(interaction: InteractionBase);
+    move(data: IMoveEvent): void;
+    zoom(data: IZoomEvent): void;
+    rotate(data: IRotateEvent): void;
+    setPath(data: any): void;
+    protected transformEndWait(): void;
+    transformEnd(): void;
+    reset(): void;
+    destroy(): void;
+}
+
+export { LeaferTypeCreator, MultiTouchHelper, Transformer, WheelEventHelper, addViewport, addViewportConfig };