@leafer-ui/hit 1.0.0-rc.8 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/hit",
-  "version": "1.0.0-rc.8",
+  "version": "1.0.0",
   "description": "@leafer-ui/hit",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -21,8 +21,12 @@
     "leafer-ui",
     "leaferjs"
   ],
+  "dependencies": {
+    "@leafer/core": "1.0.0",
+    "@leafer-ui/draw": "1.0.0"
+  },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.8",
-    "@leafer-ui/interface": "1.0.0-rc.8"
+    "@leafer/interface": "1.0.0",
+    "@leafer-ui/interface": "1.0.0"
   }
 }

package/src/HitCanvasManager.ts

@@ -0,0 +1,53 @@
+import { IHitCanvasManager, ILeaf, IHitCanvas, ILeafList, ILeaferCanvasConfig } from '@leafer/interface'
+import { CanvasManager, LeafList, Creator } from '@leafer/core'
+
+
+export class HitCanvasManager extends CanvasManager implements IHitCanvasManager {
+
+    public maxTotal = 1000 // 最多缓存多少张画布
+
+    protected pathList: ILeafList = new LeafList()
+    protected pixelList: ILeafList = new LeafList()
+
+    public getPixelType(leaf: ILeaf, config?: ILeaferCanvasConfig): IHitCanvas {
+        this.__autoClear()
+        this.pixelList.add(leaf)
+        return Creator.hitCanvas(config)
+    }
+
+    public getPathType(leaf: ILeaf): IHitCanvas {
+        this.__autoClear()
+        this.pathList.add(leaf)
+        return Creator.hitCanvas()
+    }
+
+    public clearImageType(): void {
+        this.__clearLeafList(this.pixelList)
+    }
+
+    public clearPathType(): void {
+        this.__clearLeafList(this.pathList)
+    }
+
+    protected __clearLeafList(leafList: ILeafList): void {
+        if (leafList.length) {
+            leafList.forEach(leaf => {
+                if (leaf.__hitCanvas) {
+                    leaf.__hitCanvas.destroy()
+                    leaf.__hitCanvas = null
+                }
+            })
+            leafList.reset()
+        }
+    }
+
+    protected __autoClear(): void {
+        if (this.pathList.length + this.pixelList.length > this.maxTotal) this.clear()
+    }
+
+    public clear(): void {
+        this.clearPathType()
+        this.clearImageType()
+    }
+
+}

package/src/LeafHit.ts

@@ -0,0 +1,42 @@
+import { IRadiusPointData, ILeaferCanvas } from '@leafer/interface'
+import { Leaf, PointHelper, BoundsHelper } from '@leafer/core'
+
+
+const { toInnerRadiusPointOf, copy, setRadius } = PointHelper
+const inner = {} as IRadiusPointData
+
+const leaf = Leaf.prototype
+
+leaf.__hitWorld = function (point: IRadiusPointData): boolean {
+    if (!this.__.hitSelf) return false
+
+    if (this.__.hitRadius) {
+        copy(inner, point), point = inner
+        setRadius(point, this.__.hitRadius)
+    }
+
+    toInnerRadiusPointOf(point, this.__world, inner)
+
+    const { width, height } = this.__world
+    const isSmall = width < 10 && height < 10
+
+    if (this.__.hitBox || isSmall) {
+        if (BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner)) return true
+        if (isSmall) return false
+    }
+
+    if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
+        this.__updateHitCanvas()
+        if (!this.__layout.boundsChanged) this.__layout.hitCanvasChanged = false
+    }
+
+    return this.__hit(inner)
+}
+
+leaf.__hitFill = function (inner: IRadiusPointData): boolean { return this.__hitCanvas?.hitFill(inner, this.__.windingRule) }
+
+leaf.__hitStroke = function (inner: IRadiusPointData, strokeWidth: number): boolean { return this.__hitCanvas?.hitStroke(inner, strokeWidth) }
+
+leaf.__hitPixel = function (inner: IRadiusPointData): boolean { return this.__hitCanvas?.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale) }
+
+leaf.__drawHitPath = function (canvas: ILeaferCanvas): void { if (canvas) this.__drawRenderPath(canvas) }

package/src/RectHit.ts

@@ -0,0 +1,18 @@
+import { IRadiusPointData } from '@leafer/interface'
+import { BoundsHelper } from '@leafer/core'
+import { Rect, UI } from '@leafer-ui/draw'
+
+
+const ui = new UI()
+const rect = Rect.prototype
+
+// hit 
+
+rect.__updateHitCanvas = function () {
+    if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all') ui.__updateHitCanvas.call(this)
+    else if (this.__hitCanvas) this.__hitCanvas = null
+}
+
+rect.__hitFill = function (inner: IRadiusPointData): boolean {
+    return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner)
+}

package/src/UIHit.ts

@@ -1,54 +1,85 @@
 import { IRadiusPointData } from '@leafer/interface'
+import { Platform, Matrix, tempBounds } from '@leafer/core'
+import { UI, ImageManager } from '@leafer-ui/draw'
 
-import { IUIHitModule } from '@leafer-ui/interface'
-import { Platform } from '@leafer/core'
 
+const matrix = new Matrix()
+const ui = UI.prototype
 
-export const UIHit: IUIHitModule = {
+ui.__updateHitCanvas = function (): void {
+    const data = this.__, { hitCanvasManager } = this.leafer
 
-    __updateHitCanvas(): void {
-        if (!this.__hitCanvas) this.__hitCanvas = this.leafer.hitCanvasManager.getPathType(this)
-        const h = this.__hitCanvas
-        this.__drawHitPath(h)
-        h.setStrokeOptions(this.__)
-    },
+    const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel'
+    const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel'
+    const isHitPixel = isHitPixelFill || isHitPixelStroke
 
-    __hit(inner: IRadiusPointData): boolean {
-        const { __hitCanvas: h } = this
-        if (Platform.name === 'miniapp') this.__drawHitPath(h) // fix: 小程序需要实时更新
+    if (!this.__hitCanvas) this.__hitCanvas = isHitPixel ? hitCanvasManager.getPixelType(this, { contextSettings: { willReadFrequently: true } }) : hitCanvasManager.getPathType(this)
 
-        const { fill, hitFill, windingRule } = this.__
-        const needHitFill = (fill && hitFill === 'path') || hitFill === 'all'
-        const isHitFill = h.hitFill(inner, windingRule)
-        if (needHitFill && isHitFill) return true
+    const h = this.__hitCanvas
 
-        const { stroke, hitStroke, strokeWidth, strokeAlign } = this.__
-        const needHitStroke = (stroke && hitStroke === 'path') || hitStroke === 'all'
-        const radiusWidth = inner.radiusX * 2
+    if (isHitPixel) {
+        const { renderBounds } = this.__layout
+        const size = Platform.image.hitCanvasSize
+        const scale = h.hitScale = tempBounds.set(0, 0, size, size).getFitMatrix(renderBounds, 0.5).a
+        const { x, y, width, height } = tempBounds.set(renderBounds).scale(scale)
+        h.resize({ width, height, pixelRatio: 1 })
+        h.clear()
 
-        let hitWidth = radiusWidth
+        ImageManager.patternLocked = true
+        this.__renderShape(h, { matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y) }, !isHitPixelFill, !isHitPixelStroke) // 矩阵
+        ImageManager.patternLocked = false
+        h.resetTransform()
 
-        if (needHitStroke) {
-            switch (strokeAlign) {
-                case 'inside':
-                    hitWidth += strokeWidth * 2
-                    if (!needHitFill && (isHitFill && h.hitStroke(inner, hitWidth))) return true
+        data.__isHitPixel = true
+    } else {
+        data.__isHitPixel && (data.__isHitPixel = false)
+    }
+
+    this.__drawHitPath(h)
+    h.setStrokeOptions(data)
+
+}
+
+ui.__hit = function (inner: IRadiusPointData): boolean {
+    if (Platform.name === 'miniapp') this.__drawHitPath(this.__hitCanvas) // fix: 小程序需要实时更新
+
+    // hit pixel
+
+    const data = this.__
+    if (data.__isHitPixel && this.__hitPixel(inner)) return true
+
+    // hit path
+
+    const { hitFill } = data
+    const needHitFillPath = ((data.fill || data.__isCanvas) && (hitFill === 'path' || (hitFill === 'pixel' && !(data.__pixelFill || data.__isCanvas)))) || hitFill === 'all'
+    if (needHitFillPath && this.__hitFill(inner)) return true
+
+    const { hitStroke, __strokeWidth } = data
+    const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__pixelStroke))) || hitStroke === 'all'
+    if (!needHitFillPath && !needHitStrokePath) return false
+
+    const radiusWidth = inner.radiusX * 2
+    let hitWidth = radiusWidth
+
+    if (needHitStrokePath) {
+        switch (data.strokeAlign) {
+            case 'inside':
+                hitWidth += __strokeWidth * 2
+                if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth)) return true
+                hitWidth = radiusWidth
+                break
+            case 'center':
+                hitWidth += __strokeWidth
+                break
+            case 'outside':
+                hitWidth += __strokeWidth * 2
+                if (!needHitFillPath) {
+                    if (!this.__hitFill(inner) && this.__hitStroke(inner, hitWidth)) return true
                     hitWidth = radiusWidth
-                    break
-                case 'center':
-                    hitWidth += strokeWidth
-                    break
-                case 'outside':
-                    hitWidth += strokeWidth * 2
-                    if (!needHitFill) {
-                        if (!isHitFill && h.hitStroke(inner, hitWidth)) return true
-                        hitWidth = radiusWidth
-                    }
-                    break
-            }
+                }
+                break
         }
-
-        return hitWidth ? h.hitStroke(inner, hitWidth) : false
     }
 
+    return hitWidth ? this.__hitStroke(inner, hitWidth) : false
 }

package/src/canvas.ts

@@ -0,0 +1,24 @@
+
+import { IPointData, IRadiusPointData, IWindingRule } from '@leafer/interface'
+import { LeaferCanvasBase, tempBounds } from '@leafer/core'
+
+
+const canvas = LeaferCanvasBase.prototype
+
+canvas.hitFill = function (point: IPointData, fillRule?: IWindingRule): boolean {
+    return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y)
+}
+
+canvas.hitStroke = function (point: IPointData, strokeWidth?: number): boolean {
+    this.strokeWidth = strokeWidth
+    return this.context.isPointInStroke(point.x, point.y)
+}
+
+canvas.hitPixel = function (radiusPoint: IRadiusPointData, offset?: IPointData, scale = 1): boolean { // 画布必须有alpha通道
+    let { x, y, radiusX, radiusY } = radiusPoint
+    if (offset) x -= offset.x, y -= offset.y
+    tempBounds.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil()
+    const { data } = this.context.getImageData(tempBounds.x, tempBounds.y, tempBounds.width || 1, tempBounds.height || 1)
+    for (let i = 0, len = data.length; i < len; i += 4) { if (data[i + 3] > 0) return true }
+    return data[3] > 0
+}

package/src/find.ts

@@ -0,0 +1,21 @@
+
+import { IFindMethod, IPointData, IPickOptions, IPickResult } from '@leafer/interface'
+import { IFindUIMethod, IUI } from '@leafer-ui/interface'
+import { UI, Group } from '@leafer-ui/draw'
+
+
+const ui = UI.prototype, group = Group.prototype
+
+ui.find = function (condition: number | string | IFindUIMethod, options?: any): IUI[] {
+    return this.leafer ? this.leafer.selector.getBy(condition as IFindMethod, this, false, options) as IUI[] : []
+}
+
+ui.findOne = function (condition: number | string | IFindUIMethod, options?: any): IUI | undefined {
+    return this.leafer ? this.leafer.selector.getBy(condition as IFindMethod, this, true, options) as IUI : null
+}
+
+group.pick = function (hitPoint: IPointData, options?: IPickOptions): IPickResult {
+    this.__layout.update()
+    if (!options) options = {}
+    return this.leafer ? this.leafer.selector.getByPoint(hitPoint, options.hitRadius || 0, { ...options, target: this }) : null
+}

package/src/index.ts

@@ -1 +1,8 @@
-export { UIHit } from "./UIHit"
+export { HitCanvasManager } from './HitCanvasManager'
+
+export * from './LeafHit'
+export * from './UIHit'
+export * from './RectHit'
+
+export * from './find'
+export * from './canvas'

package/types/index.d.ts

@@ -1,5 +1,17 @@
-import { IUIHitModule } from '@leafer-ui/interface';
+import { IHitCanvasManager, ILeafList, ILeaf, ILeaferCanvasConfig, IHitCanvas } from '@leafer/interface';
+import { CanvasManager } from '@leafer/core';
 
-declare const UIHit: IUIHitModule;
+declare class HitCanvasManager extends CanvasManager implements IHitCanvasManager {
+    maxTotal: number;
+    protected pathList: ILeafList;
+    protected pixelList: ILeafList;
+    getPixelType(leaf: ILeaf, config?: ILeaferCanvasConfig): IHitCanvas;
+    getPathType(leaf: ILeaf): IHitCanvas;
+    clearImageType(): void;
+    clearPathType(): void;
+    protected __clearLeafList(leafList: ILeafList): void;
+    protected __autoClear(): void;
+    clear(): void;
+}
 
-export { UIHit };
+export { HitCanvasManager };