@leafer-ui/hit 1.0.0-rc.2 → 1.0.0-rc.20

package/package.json

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

package/src/LeafHit.ts

@@ -0,0 +1,40 @@
+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.__.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,16 @@
+import { IRadiusPointData } from '@leafer/interface'
+import { BoundsHelper } from '@leafer/core'
+import { Rect, UI } from '@leafer-ui/draw'
+
+
+const ui = new UI()
+
+// hit 
+
+Rect.prototype.__updateHitCanvas = function () {
+    if (this.stroke || this.cornerRadius) ui.__updateHitCanvas.call(this)
+}
+
+Rect.prototype.__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.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 && hitFill == 'path') || hitFill === 'all')
+    if (needHitFillPath && this.__hitFill(inner)) return true
+
+    const { hitStroke, __strokeWidth } = data
+    const needHitStrokePath = ((data.stroke && hitStroke == 'path') || 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/index.ts

@@ -1 +1,22 @@
-export { UIHit } from "./UIHit"
+export * from './LeafHit'
+export * from './UIHit'
+export * from './RectHit'
+
+import { IFindMethod, IPointData, IPickOptions, IPickResult } from '@leafer/interface'
+import { IFindUIMethod, IUI } from '@leafer-ui/interface'
+import { UI, Group } from '@leafer-ui/draw'
+
+
+UI.prototype.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.prototype.findOne = function (condition: number | string | IFindUIMethod, options?: any): IUI {
+    return this.leafer ? this.leafer.selector.getBy(condition as IFindMethod, this, true, options) as IUI : null
+}
+
+Group.prototype.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/types/index.d.ts

@@ -1,5 +1,2 @@
-import { IUIHitModule } from '@leafer-ui/interface';
 
-declare const UIHit: IUIHitModule;
-
-export { UIHit };
+export {  }