@leafer-ui/hit 1.0.0-rc.26 → 1.0.0-rc.27

package/package.json

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

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/RectHit.ts

@@ -9,7 +9,7 @@ const rect = Rect.prototype
 // hit 
 
 rect.__updateHitCanvas = function () {
-    if (this.stroke || this.cornerRadius || (this.fill && this.hitFill === 'pixel') || this.hitStroke === 'all') ui.__updateHitCanvas.call(this)
+    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
 }
 

package/src/UIHit.ts

@@ -9,7 +9,7 @@ const ui = UI.prototype
 ui.__updateHitCanvas = function (): void {
     const data = this.__, { hitCanvasManager } = this.leafer
 
-    const isHitPixelFill = data.__pixelFill && data.hitFill === 'pixel'
+    const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel'
     const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel'
     const isHitPixel = isHitPixelFill || isHitPixelStroke
 
@@ -51,11 +51,11 @@ ui.__hit = function (inner: IRadiusPointData): boolean {
     // hit path
 
     const { hitFill } = data
-    const needHitFillPath = (data.fill && hitFill && hitFill !== 'none') || hitFill === 'all'
+    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 && hitFill && hitStroke !== 'none') || hitStroke === 'all'
+    const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__pixelStroke))) || hitStroke === 'all'
     if (!needHitFillPath && !needHitStrokePath) return false
 
     const radiusWidth = inner.radiusX * 2

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,24 +1,8 @@
+export { HitCanvasManager } from './HitCanvasManager'
+
 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'
-
-
-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
-}
+export * from './find'
+export * from './canvas'

package/types/index.d.ts

@@ -1,2 +1,17 @@
+import { IHitCanvasManager, ILeafList, ILeaf, ILeaferCanvasConfig, IHitCanvas } from '@leafer/interface';
+import { CanvasManager } from '@leafer/core';
 
-export {  }
+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 { HitCanvasManager };