leafer-ui/dist/web.min.cjs.map

一款革新、好用的 Canvas 引擎, 轻松实现专业图形编辑。适用于图形编辑、小游戏、互动应用、组态软件、生成图片与短视频等场景。

{"version":3,"file":"web.min.cjs","sources":["../../../../src/leafer/packages/canvas/canvas-web/src/LeaferCanvas.ts","../../../../src/leafer/packages/canvas/canvas-web/src/index.ts","../../../../src/ui/packages/platform/web/src/core.ts","../../../../src/leafer/packages/partner/watcher/src/Watcher.ts","../../../../src/leafer/packages/partner/layouter/src/LayouterHelper.ts","../../../../src/leafer/packages/partner/layouter/src/LayoutBlockData.ts","../../../../src/leafer/packages/partner/layouter/src/Layouter.ts","../../../../src/leafer/packages/partner/renderer/src/Renderer.ts","../../../../src/leafer/packages/partner/selector/src/Picker.ts","../../../../src/leafer/packages/partner/selector/src/Selector.ts","../../../../src/leafer/packages/partner/partner/src/index.ts","../../../../src/ui/packages/interaction/interaction-web/src/PointerEventHelper.ts","../../../../src/ui/packages/interaction/interaction-web/src/KeyEventHelper.ts","../../../../src/ui/packages/interaction/interaction-web/src/Interaction.ts","../../../../src/ui/packages/partner/paint/src/FillText.ts","../../../../src/ui/packages/partner/paint/src/Fill.ts","../../../../src/ui/packages/partner/paint/src/StrokeText.ts","../../../../src/ui/packages/partner/paint/src/Stroke.ts","../../../../src/ui/packages/partner/paint/src/Shape.ts","../../../../src/ui/packages/partner/paint/src/Compute.ts","../../../../src/ui/packages/partner/paint/src/index.ts","../../../../src/ui/packages/partner/image/src/mode.ts","../../../../src/ui/packages/partner/image/src/data.ts","../../../../src/ui/packages/partner/image/src/image.ts","../../../../src/ui/packages/partner/image/src/pattern.ts","../../../node_modules/.pnpm/@rollup+plugin-typescript@11.1.6_rollup@4.44.2_tslib@2.8.1_typescript@5.8.3/node_modules/tslib/tslib.es6.js","../../../../src/ui/packages/partner/image/src/index.ts","../../../../src/ui/packages/partner/image/src/check.ts","../../../../src/ui/packages/partner/image/src/recycle.ts","../../../../src/ui/packages/partner/gradient/src/linear.ts","../../../../src/ui/packages/partner/gradient/src/radial.ts","../../../../src/ui/packages/partner/gradient/src/conic.ts","../../../../src/ui/packages/partner/gradient/src/index.ts","../../../../src/ui/packages/partner/effect/src/Shadow.ts","../../../../src/ui/packages/partner/effect/src/InnerShadow.ts","../../../../src/ui/packages/partner/effect/src/index.ts","../../../../src/ui/packages/partner/effect/src/Blur.ts","../../../../src/ui/packages/partner/effect/src/BackgroundBlur.ts","../../../../src/ui/packages/partner/mask/src/index.ts","../../../../src/ui/packages/partner/text/src/CharType.ts","../../../../src/ui/packages/partner/text/src/TextRowHelper.ts","../../../../src/ui/packages/partner/text/src/TextCase.ts","../../../../src/ui/packages/partner/text/src/TextRows.ts","../../../../src/ui/packages/partner/text/src/TextConvert.ts","../../../../src/ui/packages/partner/text/src/index.ts","../../../../src/ui/packages/partner/text/src/TextLayout.ts","../../../../src/ui/packages/partner/text/src/CharLayout.ts","../../../../src/ui/packages/partner/text/src/TextClip.ts","../../../../src/ui/packages/partner/text/src/TextDecoration.ts","../../../../src/ui/packages/partner/color/src/index.ts","../../../../src/ui/packages/partner/color/src/color.ts","../../../../src/ui/packages/partner/partner/src/index.ts","../../../../src/ui/packages/platform/web/src/index.ts"],"sourcesContent":["import { IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener, IFunction } from '@leafer/interface'\nimport { LeaferCanvasBase, canvasSizeAttrs, ResizeEvent, DataHelper, Platform, Debug, isString, isUndefined } from '@leafer/core'\n\n\nconst debug = Debug.get('LeaferCanvas')\n\nexport class LeaferCanvas extends LeaferCanvasBase {\n\n    declare public view: HTMLCanvasElement\n    declare public parentView: HTMLElement\n\n    public set zIndex(zIndex: number) {\n        const { style } = this.view\n        style.zIndex = zIndex as unknown as string\n        this.setAbsolute(this.view)\n    }\n\n    public set childIndex(index: number) {\n        const { view, parentView } = this\n        if (view && parentView) {\n            const beforeNode = parentView.children[index]\n            if (beforeNode) {\n                this.setAbsolute(beforeNode as HTMLCanvasElement)\n                parentView.insertBefore(view, beforeNode)\n            } else {\n                parentView.appendChild(beforeNode)\n            }\n        }\n    }\n\n    // CSS 原始自动宽高值\n    protected autoWidthStr: string\n    protected autoHeightStr: string\n\n    protected resizeObserver: ResizeObserver\n    protected autoBounds: IAutoBounds\n    protected resizeListener: IResizeEventListener\n    protected windowListener: IFunction\n\n    public init(): void {\n        const { config } = this\n        const view = config.view || config.canvas\n\n        view ? this.__createViewFrom(view) : this.__createView()\n        const { style } = this.view\n        style.display || (style.display = 'block')\n        this.parentView = this.view.parentElement\n\n        if (this.parentView) {\n            const pStyle = this.parentView.style\n            pStyle.webkitUserSelect = pStyle.userSelect = 'none' // fix safari: use webkitUserSelect\n        }\n\n        if (Platform.syncDomFont && !this.parentView) { // fix: firefox default font\n            style.display = 'none'\n            if (document.body) document.body.appendChild(this.view)\n        }\n\n        this.__createContext()\n\n        if (!this.autoLayout) this.resize(config as IScreenSizeData)\n    }\n\n    public set backgroundColor(color: string) { this.view.style.backgroundColor = color }\n    public get backgroundColor(): string { return this.view.style.backgroundColor }\n\n    public set hittable(hittable: boolean) { this.view.style.pointerEvents = hittable ? 'auto' : 'none' }\n    public get hittable() { return this.view.style.pointerEvents !== 'none' }\n\n    protected __createView(): void {\n        this.view = document.createElement('canvas')\n    }\n\n    protected __createViewFrom(inputView: string | object): void {\n        let find: unknown = isString(inputView) ? document.getElementById(inputView) : inputView as HTMLElement\n        if (find) {\n            if (find instanceof HTMLCanvasElement) {\n\n                this.view = find\n\n            } else {\n\n                let parent = find as HTMLDivElement\n                if (find === window || find === document) {\n                    const div = document.createElement('div')\n                    const { style } = div\n                    style.position = 'absolute'\n                    style.top = style.bottom = style.left = style.right = '0px'\n                    document.body.appendChild(div)\n                    parent = div\n                }\n\n                this.__createView()\n                const view = this.view\n\n                if (parent.hasChildNodes()) {\n                    this.setAbsolute(view)\n                    parent.style.position || (parent.style.position = 'relative')\n                }\n\n                parent.appendChild(view)\n            }\n        } else {\n            debug.error(`no id: ${inputView}`)\n            this.__createView()\n        }\n    }\n\n    protected setAbsolute(view: HTMLCanvasElement): void {\n        const { style } = view\n        style.position = 'absolute'\n        style.top = style.left = '0px'\n    }\n\n    public updateViewSize(): void {\n        const { width, height, pixelRatio } = this\n        const { style } = this.view\n\n        if (this.unreal) { // app 的 view 为 div 的情况\n\n            const { config, autoWidthStr, autoHeightStr } = this\n            if (config.width) {\n                if (isUndefined(autoWidthStr)) this.autoWidthStr = style.width || ''\n                style.width = config.width + 'px'\n            } else if (!isUndefined(autoWidthStr)) style.width = autoWidthStr\n\n            if (config.height) {\n                if (isUndefined(autoHeightStr)) this.autoHeightStr = style.height || ''\n                style.height = config.height + 'px'\n            } else if (!isUndefined(autoHeightStr)) style.height = autoHeightStr\n\n        } else {\n\n            style.width = width + 'px'\n            style.height = height + 'px'\n\n            this.view.width = Math.ceil(width * pixelRatio)\n            this.view.height = Math.ceil(height * pixelRatio)\n\n        }\n    }\n\n\n    public updateClientBounds(): void {\n        if (this.view.parentElement) this.clientBounds = this.view.getBoundingClientRect()\n    }\n\n    public startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {\n        this.resizeListener = listener\n\n        if (autoBounds) {  // check auto layout\n\n            this.autoBounds = autoBounds\n\n            if (this.resizeObserver) return\n\n            try {\n\n                this.resizeObserver = new ResizeObserver((entries) => {\n                    this.updateClientBounds()\n                    for (const entry of entries) this.checkAutoBounds(entry.contentRect)\n                })\n\n                const parent = this.parentView\n                if (parent) {\n                    this.resizeObserver.observe(parent)\n                    this.checkAutoBounds(parent.getBoundingClientRect())\n                } else {\n                    this.checkAutoBounds(this.view)\n                    debug.warn('no parent')\n                }\n\n            } catch {\n\n                this.imitateResizeObserver()\n\n            }\n\n            this.stopListenPixelRatio()\n\n        } else {\n\n            this.listenPixelRatio()\n            if (this.unreal) this.updateViewSize() // must update\n\n        }\n\n    }\n\n    protected imitateResizeObserver(): void {\n        if (this.autoLayout) {\n            if (this.parentView) this.checkAutoBounds(this.parentView.getBoundingClientRect())\n            Platform.requestRender(this.imitateResizeObserver.bind(this))\n        }\n    }\n\n    // check devicePixelRatio change\n\n    protected listenPixelRatio() {\n        if (!this.windowListener) window.addEventListener('resize', this.windowListener = () => {\n            const pixelRatio = Platform.devicePixelRatio\n            if (!this.config.pixelRatio && this.pixelRatio !== pixelRatio) {\n                const { width, height } = this\n                this.emitResize({ width, height, pixelRatio })\n            }\n        })\n    }\n\n    protected stopListenPixelRatio() {\n        if (this.windowListener) {\n            window.removeEventListener('resize', this.windowListener)\n            this.windowListener = null\n        }\n    }\n\n    protected checkAutoBounds(parentSize: ISizeData): void {\n        const view = this.view\n        const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize)\n        const size = { width, height, pixelRatio: this.config.pixelRatio ? this.pixelRatio : Platform.devicePixelRatio } as IScreenSizeData\n        if (!this.isSameSize(size)) {\n            const { style } = view\n            style.marginLeft = x + 'px'\n            style.marginTop = y + 'px'\n            this.emitResize(size)\n        }\n    }\n\n    public stopAutoLayout(): void {\n        this.autoLayout = false\n        if (this.resizeObserver) this.resizeObserver.disconnect()\n        this.resizeListener = this.resizeObserver = null\n    }\n\n    protected emitResize(size: IScreenSizeData): void {\n        const oldSize = {} as IScreenSizeData\n        DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs)\n        this.resize(size)\n        if (this.resizeListener && !isUndefined(this.width)) this.resizeListener(new ResizeEvent(size, oldSize))\n    }\n\n\n    public unrealCanvas(): void { // App needs to use\n        if (!this.unreal && this.parentView) {\n            const view = this.view\n            if (view) view.remove()\n\n            this.view = this.parentView as HTMLCanvasElement\n            this.unreal = true\n        }\n    }\n\n    public destroy(): void {\n        if (this.view) {\n            this.stopAutoLayout()\n            this.stopListenPixelRatio()\n            if (!this.unreal) {\n                const view = this.view\n                if (view.parentElement) view.remove()\n            }\n            super.destroy()\n        }\n    }\n\n}","import { canvasPatch } from '@leafer/core'\n\nexport { LeaferCanvas } from './LeaferCanvas'\n\ncanvasPatch(CanvasRenderingContext2D.prototype)\ncanvasPatch(Path2D.prototype)","export * from '@leafer/core'\n\nexport * from '@leafer/canvas-web'\nexport * from '@leafer/image-web'\n\nimport { ICreator, IFunction, IExportImageType, IExportFileType, IObject, ICanvasType } from '@leafer/interface'\nimport { Platform, Creator, FileHelper, defineKey } from '@leafer/core'\n\nimport { LeaferCanvas } from '@leafer/canvas-web'\nimport { LeaferImage } from '@leafer/image-web'\n\n\nconst { mineType, fileType } = FileHelper\n\nObject.assign(Creator, {\n    canvas: (options?, manager?) => new LeaferCanvas(options, manager),\n    image: (options) => new LeaferImage(options)\n} as ICreator)\n\n\nexport function useCanvas(_canvasType: ICanvasType, _power?: IObject): void {\n    Platform.origin = {\n        createCanvas(width: number, height: number): HTMLCanvasElement {\n            const canvas = document.createElement('canvas')\n            canvas.width = width\n            canvas.height = height\n            return canvas\n        },\n        canvasToDataURL: (canvas: HTMLCanvasElement, type?: IExportImageType, quality?: number) => {\n            const imageType = mineType(type), url = canvas.toDataURL(imageType, quality)\n            return imageType === 'image/bmp' ? url.replace('image/png;', 'image/bmp;') : url\n        },\n        canvasToBolb: (canvas: HTMLCanvasElement, type?: IExportFileType, quality?: number) => new Promise((resolve) => canvas.toBlob(resolve, mineType(type), quality)),\n        canvasSaveAs: (canvas: HTMLCanvasElement, filename: string, quality?: any) => {\n            const url = canvas.toDataURL(mineType(fileType(filename)), quality)\n            return Platform.origin.download(url, filename)\n        },\n        download(url: string, filename: string): Promise<void> {\n            return new Promise((resolve) => {\n                let el = document.createElement('a')\n                el.href = url\n                el.download = filename\n                document.body.appendChild(el)\n                el.click()\n                document.body.removeChild(el)\n                resolve()\n            })\n        },\n        loadImage(src: any): Promise<HTMLImageElement> {\n            return new Promise((resolve, reject) => {\n                const img = new Platform.origin.Image()\n                const { crossOrigin } = Platform.image\n                if (crossOrigin) {\n                    img.setAttribute('crossOrigin', crossOrigin)\n                    img.crossOrigin = crossOrigin\n                }\n                img.onload = () => { resolve(img) }\n                img.onerror = (e: any) => { reject(e) }\n                img.src = Platform.image.getRealURL(src)\n            })\n        },\n        Image,\n        PointerEvent,\n        DragEvent\n    }\n\n    Platform.event = {\n        stopDefault(origin: Event): void { origin.preventDefault() },\n        stopNow(origin: Event): void { origin.stopImmediatePropagation() },\n        stop(origin: Event): void { origin.stopPropagation() }\n    }\n\n    Platform.canvas = Creator.canvas()\n    Platform.conicGradientSupport = !!Platform.canvas.context.createConicGradient\n}\n\nPlatform.name = 'web'\nPlatform.isMobile = 'ontouchstart' in window\nPlatform.requestRender = function (render: IFunction): void { window.requestAnimationFrame(render) }\ndefineKey(Platform, 'devicePixelRatio', { get() { return devicePixelRatio } })\n\n\n// same as worker\n\nconst { userAgent } = navigator\n\nif (userAgent.indexOf(\"Firefox\") > -1) {\n    Platform.conicGradientRotate90 = true\n    Platform.intWheelDeltaY = true\n    Platform.syncDomFont = true\n} else if (/iPhone|iPad|iPod/.test(navigator.userAgent) || (/Macintosh/.test(navigator.userAgent) && /Version\\/[\\d.]+.*Safari/.test(navigator.userAgent))) {\n    Platform.fullImageShadow = true // 苹果内核渲染阴影\n}\n\nif (userAgent.indexOf('Windows') > -1) {\n    Platform.os = 'Windows'\n    Platform.intWheelDeltaY = true\n} else if (userAgent.indexOf('Mac') > -1) {\n    Platform.os = 'Mac'\n} else if (userAgent.indexOf('Linux') > -1) {\n    Platform.os = 'Linux'\n}","import { ILeaf, IWatcher, IEventListenerId, ILeafList, IWatcherConfig } from '@leafer/interface'\nimport { PropertyEvent, ChildEvent, RenderEvent, WatchEvent, LeafList, DataHelper } from '@leafer/core'\n\n\nexport class Watcher implements IWatcher {\n\n    public target: ILeaf\n\n    public totalTimes: number = 0\n\n    public disabled: boolean\n    public running: boolean\n    public changed: boolean\n\n    public hasVisible: boolean\n    public hasAdd: boolean\n    public hasRemove: boolean\n    public get childrenChanged() { return this.hasAdd || this.hasRemove || this.hasVisible }\n\n    public config: IWatcherConfig = {}\n\n    public get updatedList(): ILeafList {\n        if (this.hasRemove) {\n            const updatedList = new LeafList()\n            this.__updatedList.list.forEach(item => { if (item.leafer) updatedList.add(item) })\n            return updatedList\n        } else {\n            return this.__updatedList\n        }\n    }\n\n    protected __eventIds: IEventListenerId[]\n    protected __updatedList: ILeafList = new LeafList()\n\n    constructor(target: ILeaf, userConfig?: IWatcherConfig) {\n        this.target = target\n        if (userConfig) this.config = DataHelper.default(userConfig, this.config)\n        this.__listenEvents()\n    }\n\n    public start(): void {\n        if (this.disabled) return\n        this.running = true\n    }\n\n    public stop(): void {\n        this.running = false\n    }\n\n    public disable(): void {\n        this.stop()\n        this.__removeListenEvents()\n        this.disabled = true\n    }\n\n    public update(): void {\n        this.changed = true\n        if (this.running) this.target.emit(RenderEvent.REQUEST)\n    }\n\n    protected __onAttrChange(event: PropertyEvent): void {\n        this.__updatedList.add(event.target as ILeaf)\n        this.update()\n    }\n\n    protected __onChildEvent(event: ChildEvent): void {\n        if (event.type === ChildEvent.ADD) {\n            this.hasAdd = true\n            this.__pushChild(event.child)\n        } else {\n            this.hasRemove = true\n            this.__updatedList.add(event.parent)\n        }\n        this.update()\n    }\n\n    protected __pushChild(child: ILeaf): void {\n        this.__updatedList.add(child)\n        if (child.isBranch) this.__loopChildren(child)\n    }\n\n    protected __loopChildren(parent: ILeaf): void {\n        const { children } = parent\n        for (let i = 0, len = children.length; i < len; i++) this.__pushChild(children[i])\n    }\n\n    public __onRquestData(): void {\n        this.target.emitEvent(new WatchEvent(WatchEvent.DATA, { updatedList: this.updatedList }))\n        this.__updatedList = new LeafList()\n        this.totalTimes++\n        this.changed = this.hasVisible = this.hasRemove = this.hasAdd = false\n    }\n\n    protected __listenEvents(): void {\n        this.__eventIds = [\n            this.target.on_([\n                [PropertyEvent.CHANGE, this.__onAttrChange, this],\n                [[ChildEvent.ADD, ChildEvent.REMOVE], this.__onChildEvent, this],\n                [WatchEvent.REQUEST, this.__onRquestData, this]\n            ])\n        ]\n    }\n\n    protected __removeListenEvents(): void {\n        this.target.off_(this.__eventIds)\n    }\n\n    public destroy(): void {\n        if (this.target) {\n            this.stop()\n            this.__removeListenEvents()\n            this.target = this.__updatedList = null\n        }\n    }\n\n}","import { ILeafLayout, ILeafLevelList, ILeafList, ILeaf } from '@leafer/interface'\nimport { BranchHelper, LeafHelper } from '@leafer/core'\n\n\nconst { updateAllMatrix, updateBounds: updateOneBounds, updateChange: updateOneChange } = LeafHelper\nconst { pushAllChildBranch, pushAllParent } = BranchHelper\n\n\nexport function updateMatrix(updateList: ILeafList, levelList: ILeafLevelList): void {\n\n    let layout: ILeafLayout\n    updateList.list.forEach(leaf => {  // 更新矩阵, 所有子元素，和父元素都需要更新bounds\n        layout = leaf.__layout\n        if (levelList.without(leaf) && !layout.proxyZoom) { // 防止重复， 子元素可能已经被父元素更新过\n\n            if (layout.matrixChanged) {\n\n                updateAllMatrix(leaf, true)\n\n                levelList.add(leaf)\n                if (leaf.isBranch) pushAllChildBranch(leaf, levelList)\n                pushAllParent(leaf, levelList)\n\n            } else if (layout.boundsChanged) {\n\n                levelList.add(leaf)\n                if (leaf.isBranch) leaf.__tempNumber = 0  // 标识需要更新子Leaf元素的WorldBounds分支, 0表示不需要更新\n                pushAllParent(leaf, levelList)\n            }\n        }\n    })\n\n}\n\nexport function updateBounds(boundsList: ILeafLevelList): void {\n    let list: ILeaf[], branch: ILeaf, children: ILeaf[]\n    boundsList.sort(true)\n    boundsList.levels.forEach(level => {\n        list = boundsList.levelMap[level]\n        for (let i = 0, len = list.length; i < len; i++) {\n            branch = list[i]\n\n            // 标识了需要更新子元素\n            if (branch.isBranch && branch.__tempNumber) {\n                children = branch.children\n                for (let j = 0, jLen = children.length; j < jLen; j++) {\n                    if (!children[j].isBranch) {\n                        updateOneBounds(children[j])\n                    }\n                }\n            }\n            updateOneBounds(branch)\n        }\n    })\n}\n\n\nexport function updateChange(updateList: ILeafList): void {\n    updateList.list.forEach(updateOneChange)\n}","import { IBounds, ILayoutBlockData, ILeafList, ILeaf } from '@leafer/interface'\nimport { Bounds, LeafBoundsHelper, LeafList, isArray } from '@leafer/core'\n\n\nconst { worldBounds } = LeafBoundsHelper\n\nexport class LayoutBlockData implements ILayoutBlockData {\n\n    public updatedList: ILeafList\n    public updatedBounds: IBounds = new Bounds()\n\n    public beforeBounds: IBounds = new Bounds()\n    public afterBounds: IBounds = new Bounds()\n\n    constructor(list: ILeafList | ILeaf[]) {\n        if (isArray(list)) list = new LeafList(list)\n        this.updatedList = list\n    }\n\n    public setBefore(): void {\n        this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds)\n    }\n\n    public setAfter(): void {\n        this.afterBounds.setListWithFn(this.updatedList.list, worldBounds)\n        this.updatedBounds.setList([this.beforeBounds, this.afterBounds])\n    }\n\n    public merge(data: ILayoutBlockData): void {\n        this.updatedList.addList(data.updatedList.list)\n        this.beforeBounds.add(data.beforeBounds)\n        this.afterBounds.add(data.afterBounds)\n        this.updatedBounds.add(data.updatedBounds)\n    }\n\n    public destroy(): void {\n        this.updatedList = null\n    }\n\n}","import { ILayouter, ILeaf, ILayoutBlockData, IEventListenerId, ILayouterConfig, ILeafList } from '@leafer/interface'\nimport { LayoutEvent, WatchEvent, LeafLevelList, LeafList, BranchHelper, LeafHelper, DataHelper, Run, Debug } from '@leafer/core'\n\nimport { updateMatrix, updateBounds, updateChange } from './LayouterHelper'\nimport { LayoutBlockData } from './LayoutBlockData'\n\n\nconst { updateAllMatrix, updateAllChange } = LeafHelper\n\nconst debug = Debug.get('Layouter')\n\nexport class Layouter implements ILayouter {\n\n    public target: ILeaf\n    public layoutedBlocks: ILayoutBlockData[]\n    public extraBlock: ILayoutBlockData // around / autoLayout\n\n    public totalTimes: number = 0\n    public times: number\n\n    public disabled: boolean\n    public running: boolean\n    public layouting: boolean\n\n    public waitAgain: boolean\n\n    public config: ILayouterConfig = {}\n\n    protected __updatedList: ILeafList\n    protected __levelList: LeafLevelList = new LeafLevelList()\n    protected __eventIds: IEventListenerId[]\n\n    constructor(target: ILeaf, userConfig?: ILayouterConfig) {\n        this.target = target\n        if (userConfig) this.config = DataHelper.default(userConfig, this.config)\n        this.__listenEvents()\n    }\n\n    public start(): void {\n        if (this.disabled) return\n        this.running = true\n    }\n\n    public stop(): void {\n        this.running = false\n    }\n\n    public disable(): void {\n        this.stop()\n        this.__removeListenEvents()\n        this.disabled = true\n    }\n\n    public layout(): void {\n        if (this.layouting || !this.running) return\n        const { target } = this\n        this.times = 0\n\n        try {\n            target.emit(LayoutEvent.START)\n            this.layoutOnce()\n            target.emitEvent(new LayoutEvent(LayoutEvent.END, this.layoutedBlocks, this.times))\n        } catch (e) {\n            debug.error(e)\n        }\n\n        this.layoutedBlocks = null\n    }\n\n    public layoutAgain(): void {\n        if (this.layouting) {\n            this.waitAgain = true\n        } else {\n            this.layoutOnce()\n        }\n    }\n\n    public layoutOnce(): void {\n        if (this.layouting) return debug.warn('layouting')\n        if (this.times > 3) return debug.warn('layout max times')\n\n        this.times++\n        this.totalTimes++\n\n        this.layouting = true\n\n        this.target.emit(WatchEvent.REQUEST)\n\n        if (this.totalTimes > 1) {\n            this.partLayout()\n        } else {\n            this.fullLayout()\n        }\n\n        this.layouting = false\n\n        if (this.waitAgain) {\n            this.waitAgain = false\n            this.layoutOnce()\n        }\n    }\n\n    public partLayout(): void {\n        if (!this.__updatedList?.length) return\n\n        const t = Run.start('PartLayout')\n        const { target, __updatedList: updateList } = this\n        const { BEFORE, LAYOUT, AFTER } = LayoutEvent\n\n        const blocks = this.getBlocks(updateList)\n        blocks.forEach(item => item.setBefore())\n        target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times))\n\n        this.extraBlock = null\n        updateList.sort()\n        updateMatrix(updateList, this.__levelList)\n        updateBounds(this.__levelList)\n        updateChange(updateList)\n\n        if (this.extraBlock) blocks.push(this.extraBlock)\n        blocks.forEach(item => item.setAfter())\n\n        target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times))\n        target.emitEvent(new LayoutEvent(AFTER, blocks, this.times))\n\n        this.addBlocks(blocks)\n\n        this.__levelList.reset()\n        this.__updatedList = null\n        Run.end(t)\n    }\n\n    public fullLayout(): void {\n        const t = Run.start('FullLayout')\n\n        const { target } = this\n        const { BEFORE, LAYOUT, AFTER } = LayoutEvent\n\n        const blocks = this.getBlocks(new LeafList(target))\n        target.emitEvent(new LayoutEvent(BEFORE, blocks, this.times))\n\n        Layouter.fullLayout(target)\n\n        blocks.forEach(item => { item.setAfter() })\n        target.emitEvent(new LayoutEvent(LAYOUT, blocks, this.times))\n        target.emitEvent(new LayoutEvent(AFTER, blocks, this.times))\n\n        this.addBlocks(blocks)\n\n        Run.end(t)\n    }\n\n    static fullLayout(target: ILeaf): void {\n        updateAllMatrix(target, true)\n\n        if (target.isBranch) BranchHelper.updateBounds(target)\n        else LeafHelper.updateBounds(target)\n\n        updateAllChange(target)\n    }\n\n    public addExtra(leaf: ILeaf): void {\n        if (!this.__updatedList.has(leaf)) {\n            const { updatedList, beforeBounds } = this.extraBlock || (this.extraBlock = new LayoutBlockData([]))\n            updatedList.length ? beforeBounds.add(leaf.__world) : beforeBounds.set(leaf.__world)\n            updatedList.add(leaf)\n        }\n    }\n\n    public createBlock(data: ILeafList | ILeaf[]): ILayoutBlockData {\n        return new LayoutBlockData(data)\n    }\n\n    public getBlocks(list: ILeafList): ILayoutBlockData[] {\n        return [this.createBlock(list)]\n    }\n\n    public addBlocks(current: ILayoutBlockData[]) {\n        this.layoutedBlocks ? this.layoutedBlocks.push(...current) : this.layoutedBlocks = current\n    }\n\n    protected __onReceiveWatchData(event: WatchEvent): void {\n        this.__updatedList = event.data.updatedList\n    }\n\n    protected __listenEvents(): void {\n        this.__eventIds = [\n            this.target.on_([\n                [LayoutEvent.REQUEST, this.layout, this],\n                [LayoutEvent.AGAIN, this.layoutAgain, this],\n                [WatchEvent.DATA, this.__onReceiveWatchData, this]\n            ])\n        ]\n    }\n\n    protected __removeListenEvents(): void {\n        this.target.off_(this.__eventIds)\n    }\n\n    public destroy(): void {\n        if (this.target) {\n            this.stop()\n            this.__removeListenEvents()\n            this.target = this.config = null\n        }\n    }\n\n}\n\n\n","import { ILeaf, ILeaferBase, ILeaferCanvas, IRenderer, IRendererConfig, IEventListenerId, IBounds, IFunction, IRenderOptions } from '@leafer/interface'\nimport { LayoutEvent, RenderEvent, ResizeEvent, ImageManager, Bounds, DataHelper, Platform, Debug, Run } from '@leafer/core'\n\n\nconst debug = Debug.get('Renderer')\n\nexport class Renderer implements IRenderer {\n\n    public target: ILeaf\n    public canvas: ILeaferCanvas\n    public updateBlocks: IBounds[]\n\n    public FPS = 60\n    public totalTimes = 0\n    public times: number = 0\n\n    public running: boolean\n    public rendering: boolean\n\n    public waitAgain: boolean\n    public changed: boolean\n    public ignore: boolean\n\n    public config: IRendererConfig = {\n        usePartRender: true,\n        maxFPS: 120\n    }\n\n    static clipSpread = 10\n\n    protected renderBounds: IBounds\n    protected renderOptions: IRenderOptions\n    protected totalBounds: IBounds\n\n    protected requestTime: number\n    protected frameTime: number\n    protected frames: number[] = []\n    protected __eventIds: IEventListenerId[]\n\n    protected get needFill(): boolean { return !!(!this.canvas.allowBackgroundColor && this.config.fill) }\n\n    constructor(target: ILeaf, canvas: ILeaferCanvas, userConfig?: IRendererConfig) {\n        this.target = target\n        this.canvas = canvas\n        if (userConfig) this.config = DataHelper.default(userConfig, this.config)\n        this.__listenEvents()\n    }\n\n    public start(): void {\n        this.running = true\n        this.update(false)\n    }\n\n    public stop(): void {\n        this.running = false\n    }\n\n    public update(change = true): void {\n        if (!this.changed) this.changed = change\n        this.__requestRender()\n    }\n\n    public requestLayout(): void {\n        this.target.emit(LayoutEvent.REQUEST)\n    }\n\n    public checkRender(): void {\n        if (this.running) {\n            const { target } = this\n            if (target.isApp) {\n                target.emit(RenderEvent.CHILD_START, target);\n                (target.children as ILeaferBase[]).forEach(leafer => {\n                    leafer.renderer.FPS = this.FPS\n                    leafer.renderer.checkRender()\n                })\n                target.emit(RenderEvent.CHILD_END, target)\n            }\n\n            if (this.changed && this.canvas.view) this.render()\n            this.target.emit(RenderEvent.NEXT)\n        }\n    }\n\n    public render(callback?: IFunction): void {\n        if (!(this.running && this.canvas.view)) return this.update()\n\n        const { target } = this\n        this.times = 0\n        this.totalBounds = new Bounds()\n\n        debug.log(target.innerName, '--->')\n\n        try {\n            this.emitRender(RenderEvent.START)\n            this.renderOnce(callback)\n            this.emitRender(RenderEvent.END, this.totalBounds)\n\n            ImageManager.clearRecycled()\n        } catch (e) {\n            this.rendering = false\n            debug.error(e)\n        }\n\n        debug.log('-------------|')\n    }\n\n    public renderAgain(): void {\n        if (this.rendering) {\n            this.waitAgain = true\n        } else {\n            this.renderOnce()\n        }\n    }\n\n    public renderOnce(callback?: IFunction): void {\n        if (this.rendering) return debug.warn('rendering')\n        if (this.times > 3) return debug.warn('render max times')\n\n        this.times++\n        this.totalTimes++\n\n        this.rendering = true\n        this.changed = false\n        this.renderBounds = new Bounds()\n        this.renderOptions = {}\n\n        if (callback) {\n            this.emitRender(RenderEvent.BEFORE)\n            callback()\n        } else {\n            this.requestLayout()\n\n            if (this.ignore) {\n                this.ignore = this.rendering = false // 仍保留 updateBlocks 用于下次渲染\n                return\n            }\n\n            this.emitRender(RenderEvent.BEFORE)\n\n            if (this.config.usePartRender && this.totalTimes > 1) {\n                this.partRender()\n            } else {\n                this.fullRender()\n            }\n        }\n\n        this.emitRender(RenderEvent.RENDER, this.renderBounds, this.renderOptions)\n        this.emitRender(RenderEvent.AFTER, this.renderBounds, this.renderOptions)\n\n        this.updateBlocks = null\n        this.rendering = false\n\n        if (this.waitAgain) {\n            this.waitAgain = false\n            this.renderOnce()\n        }\n    }\n\n    public partRender(): void {\n        const { canvas, updateBlocks: list } = this\n        if (!list) return // debug.warn('PartRender: need update attr')\n\n        this.mergeBlocks()\n        list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty()) this.clipRender(block) })\n    }\n\n    public clipRender(block: IBounds): void {\n        const t = Run.start('PartRender')\n        const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new Bounds(bounds)\n\n        canvas.save()\n\n        bounds.spread(Renderer.clipSpread).ceil() // 局部渲染区域需扩大一些，避免出现残影\n        canvas.clearWorld(bounds)\n        canvas.clipWorld(bounds)\n\n        this.__render(bounds, realBounds)\n        canvas.restore()\n\n        Run.end(t)\n    }\n\n    public fullRender(): void {\n        const t = Run.start('FullRender')\n        const { canvas } = this\n\n        canvas.save()\n        canvas.clear()\n        this.__render(canvas.bounds)\n        canvas.restore()\n\n        Run.end(t)\n    }\n\n    protected __render(bounds: IBounds, realBounds?: IBounds): void {\n        const { canvas } = this, includes = bounds.includes(this.target.__world), options: IRenderOptions = includes ? { includes } : { bounds, includes }\n\n        if (this.needFill) canvas.fillWorld(bounds, this.config.fill)\n        if (Debug.showRepaint) Debug.drawRepaint(canvas, bounds)\n\n        Platform.render(this.target, canvas, options)\n\n        this.renderBounds = realBounds = realBounds || bounds\n        this.renderOptions = options\n        this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds)\n\n        canvas.updateRender(realBounds)\n    }\n\n    public addBlock(block: IBounds): void {\n        if (!this.updateBlocks) this.updateBlocks = []\n        this.updateBlocks.push(block)\n    }\n\n    public mergeBlocks(): void {\n        const { updateBlocks: list } = this\n        if (list) {\n            const bounds = new Bounds()\n            bounds.setList(list)\n            list.length = 0\n            list.push(bounds)\n        }\n    }\n\n    protected __requestRender(): void {\n        const target = this.target as ILeaferBase\n        if (this.requestTime || !target) return\n        if (target.parentApp) return target.parentApp.requestRender(false) // App 模式下统一走 app 控制渲染帧\n\n        this.requestTime = this.frameTime || Date.now()\n\n        const render = () => {\n\n            const nowFPS = 1000 / ((this.frameTime = Date.now()) - this.requestTime)\n\n            const { maxFPS } = this.config\n            if (maxFPS && nowFPS > maxFPS) return Platform.requestRender(render)\n\n            const { frames } = this\n            if (frames.length > 30) frames.shift()\n            frames.push(nowFPS)\n            this.FPS = Math.round(frames.reduce((a, b) => a + b, 0) / frames.length) // 帧率采样\n            this.requestTime = 0\n\n            this.checkRender()\n\n        }\n\n        Platform.requestRender(render)\n    }\n\n    protected __onResize(e: ResizeEvent): void {\n        if (this.canvas.unreal) return\n        if (e.bigger || !e.samePixelRatio) {\n            const { width, height } = e.old\n            const bounds = new Bounds(0, 0, width, height)\n            if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {\n                this.addBlock(this.canvas.bounds)\n                this.target.forceUpdate('surface')\n                return\n            }\n        }\n\n        // 需要象征性派发一下渲染事件\n        this.addBlock(new Bounds(0, 0, 1, 1))\n        this.update()\n    }\n\n    protected __onLayoutEnd(event: LayoutEvent): void {\n        if (event.data) event.data.map(item => {\n            let empty: boolean\n            if (item.updatedList) item.updatedList.list.some(leaf => {\n                empty = (!leaf.__world.width || !leaf.__world.height)\n                if (empty) {\n                    if (!leaf.isLeafer) debug.tip(leaf.innerName, ': empty')\n                    empty = (!leaf.isBranch || leaf.isBranchLeaf) // render object\n                }\n                return empty\n            })\n            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds)\n        })\n    }\n\n    protected emitRender(type: string, bounds?: IBounds, options?: IRenderOptions): void {\n        this.target.emitEvent(new RenderEvent(type, this.times, bounds, options))\n    }\n\n    protected __listenEvents(): void {\n        this.__eventIds = [\n            this.target.on_([\n                [RenderEvent.REQUEST, this.update, this],\n                [LayoutEvent.END, this.__onLayoutEnd, this],\n                [RenderEvent.AGAIN, this.renderAgain, this],\n                [ResizeEvent.RESIZE, this.__onResize, this]\n            ])\n        ]\n    }\n\n    protected __removeListenEvents(): void {\n        this.target.off_(this.__eventIds)\n    }\n\n    public destroy(): void {\n        if (this.target) {\n            this.stop()\n            this.__removeListenEvents()\n            this.config = {}\n            this.target = this.canvas = null\n        }\n    }\n}","import { ILeaf, ILeafList, IPointData, IRadiusPointData, IPickResult, IPickOptions, ISelector, IPickBottom, IPicker, ILeaferBase } from '@leafer/interface'\nimport { BoundsHelper, LeafList, LeafHelper } from '@leafer/core'\n\n\nconst { hitRadiusPoint } = BoundsHelper\n\nexport class Picker implements IPicker {\n\n    protected target?: ILeaf\n    protected selector: ISelector\n\n    protected findList: ILeafList\n    protected exclude: ILeafList\n\n    protected point: IRadiusPointData\n\n    constructor(target: ILeaf, selector: ISelector) {\n        this.target = target\n        this.selector = selector\n    }\n\n    public getByPoint(hitPoint: IPointData, hitRadius: number, options?: IPickOptions): IPickResult {\n        if (!hitRadius) hitRadius = 0\n        if (!options) options = {}\n\n        const through = options.through || false\n        const ignoreHittable = options.ignoreHittable || false\n        const target = options.target || this.target\n        this.exclude = options.exclude || null\n\n        this.point = { x: hitPoint.x, y: hitPoint.y, radiusX: hitRadius, radiusY: hitRadius }\n        this.findList = new LeafList(options.findList)\n\n        // path\n        if (!options.findList) this.hitBranch(target.isBranchLeaf ? { children: [target] } as ILeaf : target)  // 包含through元素\n\n        const { list } = this.findList\n        const leaf = this.getBestMatchLeaf(list, options.bottomList, ignoreHittable, !!options.findList)\n        const path = ignoreHittable ? this.getPath(leaf) : this.getHitablePath(leaf)\n\n        this.clear()\n\n        return through ? { path, target: leaf, throughPath: list.length ? this.getThroughPath(list) : path } : { path, target: leaf }\n    }\n\n    public hitPoint(hitPoint: IPointData, hitRadius: number, options?: IPickOptions): boolean {\n        return !!this.getByPoint(hitPoint, hitRadius, options).target // 后期需进行优化 ！！！\n    }\n\n    public getBestMatchLeaf(list: ILeaf[], bottomList: IPickBottom[], ignoreHittable: boolean, allowNull?: boolean): ILeaf {\n        const findList = this.findList = new LeafList()\n\n        if (list.length) {\n            let find: ILeaf\n            const { x, y } = this.point\n            const point = { x, y, radiusX: 0, radiusY: 0 }\n            for (let i = 0, len = list.length; i < len; i++) {\n                find = list[i]\n                if (ignoreHittable || LeafHelper.worldHittable(find)) {\n                    this.hitChild(find, point)\n                    if (findList.length) {\n                        if (find.isBranchLeaf && list.some(item => item !== find && LeafHelper.hasParent(item, find))) {\n                            findList.reset()\n                            break // Frame / Box 同时碰撞到子元素时，忽略自身，优先选中子元素\n                        }\n                        return findList.list[0]\n                    }\n                }\n            }\n        }\n\n        if (bottomList) { // 底部虚拟元素，一般为编辑器的虚拟框\n            for (let i = 0, len = bottomList.length; i < len; i++) {\n                this.hitChild(bottomList[i].target, this.point, bottomList[i].proxy)\n                if (findList.length) return findList.list[0]\n            }\n        }\n\n        if (allowNull) return null\n        return ignoreHittable ? list[0] : list.find(item => LeafHelper.worldHittable(item))\n    }\n\n    public getPath(leaf: ILeaf): LeafList {\n        const path = new LeafList(), syncList = [], { target } = this\n\n        while (leaf) {\n            if (leaf.syncEventer) syncList.push(leaf.syncEventer)\n            path.add(leaf)\n            leaf = leaf.parent\n            if (leaf === target) break\n        }\n\n        // 存在同步触发\n        if (syncList.length) {\n            syncList.forEach(item => {\n                while (item) {\n                    if (item.__.hittable) path.add(item)\n                    item = item.parent\n                    if (item === target) break\n                }\n            })\n        }\n\n        if (target) path.add(target)\n        return path\n    }\n\n    public getHitablePath(leaf: ILeaf): LeafList {\n        const path = this.getPath(leaf && leaf.hittable ? leaf : null)\n        let item: ILeaf, hittablePath = new LeafList()\n        for (let i = path.list.length - 1; i > -1; i--) {\n            item = path.list[i]\n            if (!item.__.hittable) break\n            hittablePath.addAt(item, 0)\n            if (!item.__.hitChildren || (item.isLeafer && (item as ILeaferBase).mode === 'draw')) break\n        }\n        return hittablePath\n    }\n\n    public getThroughPath(list: ILeaf[]): LeafList {\n        const throughPath = new LeafList()\n        const pathList: ILeafList[] = []\n\n        for (let i = list.length - 1; i > -1; i--) {\n            pathList.push(this.getPath(list[i]))\n        }\n\n        let path: ILeafList, nextPath: ILeafList, leaf: ILeaf\n        for (let i = 0, len = pathList.length; i < len; i++) {\n            path = pathList[i], nextPath = pathList[i + 1]\n            for (let j = 0, jLen = path.length; j < jLen; j++) {\n                leaf = path.list[j]\n                if (nextPath && nextPath.has(leaf)) break\n                throughPath.add(leaf)\n            }\n        }\n\n        return throughPath\n    }\n\n    protected hitBranch(branch: ILeaf): void {\n        this.eachFind(branch.children, branch.__onlyHitMask)\n    }\n\n    protected eachFind(children: ILeaf[], hitMask: boolean): void {\n        let child: ILeaf, hit: boolean\n        const { point } = this, len = children.length\n        for (let i = len - 1; i > -1; i--) {\n            child = children[i]\n            if (!child.__.visible || (hitMask && !child.__.mask)) continue\n            hit = child.__.hitRadius ? true : hitRadiusPoint(child.__world, point)\n\n            if (child.isBranch) {\n                if (hit || child.__ignoreHitWorld) {\n                    if (child.topChildren) this.eachFind(child.topChildren, false) // 滚动条等覆盖物\n                    this.eachFind(child.children, child.__onlyHitMask)\n                    if (child.isBranchLeaf) this.hitChild(child, point) // Box / Frame\n                }\n            } else {\n                if (hit) this.hitChild(child, point)\n            }\n        }\n    }\n\n    protected hitChild(child: ILeaf, point: IRadiusPointData, proxy?: ILeaf): void {\n        if (this.exclude && this.exclude.has(child)) return\n        if (child.__hitWorld(point)) {\n            const { parent } = child\n            if (parent && parent.__hasMask && !child.__.mask) {\n\n                let findMasks: ILeaf[] = [], item: ILeaf\n                const { children } = parent\n\n                for (let i = 0, len = children.length; i < len; i++) {\n                    item = children[i]\n                    if (item.__.mask) findMasks.push(item)\n                    if (item === child) {\n                        if (findMasks && !findMasks.every(value => value.__hitWorld(point))) return // 遮罩上层的元素，与遮罩相交的区域才能响应事件\n                        break\n                    }\n                }\n\n            }\n            this.findList.add(proxy || child)\n        }\n    }\n\n    protected clear(): void {\n        this.point = null\n        this.findList = null\n        this.exclude = null\n    }\n\n    public destroy(): void {\n        this.clear()\n    }\n\n}","import { ILeaf, ISelector, ISelectorProxy, IPickResult, IPickOptions, IPointData, ISelectorConfig, IFinder, IFindMethod, IFindCondition, IPicker } from '@leafer/interface'\nimport { Creator, DataHelper, Plugin, Platform } from '@leafer/core'\n\nimport { Picker } from './Picker'\n\n\nexport class Selector implements ISelector {\n\n    public target?: ILeaf // target 不存在时，为临时选择器（不能缓存数据）\n    public proxy?: ISelectorProxy // editor\n\n    public config: ISelectorConfig = {}\n\n    public picker: IPicker\n    public finder?: IFinder\n\n    constructor(target: ILeaf, userConfig?: ISelectorConfig) {\n        if (userConfig) this.config = DataHelper.default(userConfig, this.config)\n        this.picker = new Picker(this.target = target, this)\n        this.finder = Creator.finder && Creator.finder()\n    }\n\n    public getByPoint(hitPoint: IPointData, hitRadius: number, options?: IPickOptions): IPickResult {\n        const { target, picker } = this\n        if (Platform.backgrounder) target && target.updateLayout()\n        return picker.getByPoint(hitPoint, hitRadius, options)\n    }\n\n    public hitPoint(hitPoint: IPointData, hitRadius: number, options?: IPickOptions): boolean {\n        return this.picker.hitPoint(hitPoint, hitRadius, options)\n    }\n\n    // @leafer-in/find will rewrite\n    public getBy(condition: number | string | IFindCondition | IFindMethod, branch?: ILeaf, one?: boolean, options?: any): ILeaf | ILeaf[] {\n        return this.finder ? this.finder.getBy(condition, branch, one, options) : Plugin.need('find')\n    }\n\n    public destroy(): void {\n        this.picker.destroy()\n        if (this.finder) this.finder.destroy()\n    }\n\n}","// leafer's partner, allow replace\nexport * from '@leafer/watcher'\nexport * from '@leafer/layouter'\nexport * from '@leafer/renderer'\nexport * from '@leafer/selector'\n\nimport { ICreator, ILeaf, ILeaferCanvas, IRenderOptions } from '@leafer/interface'\nimport { Creator, LeafList, Platform } from '@leafer/core'\n\nimport { Watcher } from '@leafer/watcher'\nimport { Layouter } from '@leafer/layouter'\nimport { Renderer } from '@leafer/renderer'\nimport { Selector } from '@leafer/selector'\n\n\nObject.assign(Creator, {\n    watcher: (target, options?) => new Watcher(target, options),\n    layouter: (target, options?) => new Layouter(target, options),\n    renderer: (target, canvas, options?) => new Renderer(target, canvas, options),\n    selector: (target?, options?) => new Selector(target, options)\n} as ICreator)\n\nPlatform.layout = Layouter.fullLayout\nPlatform.render = function (target: ILeaf, canvas: ILeaferCanvas, options: IRenderOptions): void {\n    const topOptions: IRenderOptions = { ...options, topRendering: true }\n    options.topList = new LeafList()\n    target.__render(canvas, options)\n    if (options.topList.length) options.topList.forEach(item => item.__render(canvas, topOptions))\n}","import { IPointData, IPointerEvent, PointerType } from '@leafer/interface'\nimport { InteractionHelper } from '@leafer-ui/core'\n\n\nexport const PointerEventHelper = {\n\n    convert(e: PointerEvent, local: IPointData): IPointerEvent {\n        const base = InteractionHelper.getBase(e), { x, y } = local\n        const data: IPointerEvent = {\n            ...base,\n            x,\n            y,\n            width: e.width,\n            height: e.height,\n            pointerType: e.pointerType as PointerType,\n            pressure: e.pressure,\n        }\n\n        if (data.pointerType === 'pen') {\n            data.tangentialPressure = e.tan