@leafer-ui/effect 1.9.7 → 1.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/effect",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "@leafer-ui/effect",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.9.7",
-    "@leafer-ui/draw": "1.9.7"
+    "@leafer/core": "1.9.8",
+    "@leafer-ui/draw": "1.9.8"
   },
   "devDependencies": {
-    "@leafer/interface": "1.9.7",
-    "@leafer-ui/interface": "1.9.7"
+    "@leafer/interface": "1.9.8",
+    "@leafer-ui/interface": "1.9.8"
   }
 }

package/src/InnerShadow.ts

@@ -1,10 +1,10 @@
-import { IBoundsData, ILeaferCanvas, IOffsetBoundsData } from '@leafer/interface'
+import { IBoundsData, IMatrixData, ILeaferCanvas, IOffsetBoundsData } from '@leafer/interface'
 import { BoundsHelper, LeafHelper } from '@leafer/core'
 
 import { IUI, ICachedShape } from '@leafer-ui/interface'
 import { ColorConvert } from '@leafer-ui/draw'
 
-import { drawWorldShadow } from './Shadow'
+import { drawWorldShadow, getShadowRenderSpread, getShadowTransform } from './Shadow'
 
 
 const { toOffsetOutBounds } = BoundsHelper
@@ -12,16 +12,16 @@ const offsetOutBounds = {} as IOffsetBoundsData
 
 export function innerShadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): void {
 
-    let copyBounds: IBoundsData, spreadScale: number
+    let copyBounds: IBoundsData, transform: IMatrixData
 
-    const { __nowWorld: nowWorld, __layout } = ui
+    const { __nowWorld: nowWorld } = ui
     const { innerShadow } = ui.__
-    const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape
+    const { worldCanvas, bounds, renderBounds, shapeBounds, scaleX, scaleY } = shape
 
     const other = current.getSameCanvas()
     const end = innerShadow.length - 1
 
-    toOffsetOutBounds(bounds, offsetOutBounds)
+    toOffsetOutBounds(bounds, offsetOutBounds, renderBounds)
 
     innerShadow.forEach((item, index) => {
 
@@ -36,19 +36,20 @@ export function innerShadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape
 
         other.setWorldShadow((offsetOutBounds.offsetX + item.x * scaleX * otherScale), (offsetOutBounds.offsetY + item.y * scaleY * otherScale), item.blur * scaleX * otherScale)
 
-        spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) * otherScale : 0
+        transform = getShadowTransform(ui, other, shape, item, offsetOutBounds, otherScale, true)
+        if (transform) other.setTransform(transform)
 
-        drawWorldShadow(other, offsetOutBounds, spreadScale, shape)
+        drawWorldShadow(other, offsetOutBounds, shape)
 
         other.restore()
 
         if (worldCanvas) {
-            other.copyWorld(other, bounds, nowWorld, 'copy')
+            other.copyWorld(other, renderBounds, nowWorld, 'copy')
             other.copyWorld(worldCanvas, nowWorld, nowWorld, 'source-out')
             copyBounds = nowWorld
         } else {
             other.copyWorld(shape.canvas, shapeBounds, bounds, 'source-out')
-            copyBounds = bounds
+            copyBounds = renderBounds
         }
 
         other.fillWorld(copyBounds, ColorConvert.string(item.color), 'source-in')
@@ -63,4 +64,4 @@ export function innerShadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape
 
 }
 
-
+export const getInnerShadowSpread = getShadowRenderSpread

package/src/Shadow.ts

@@ -1,26 +1,26 @@
-import { IBoundsData, ILeaferCanvas, IOffsetBoundsData } from '@leafer/interface'
-import { BoundsHelper, LeafHelper, Platform } from '@leafer/core'
+import { IBoundsData, IFourNumber, ILeaferCanvas, IMatrixData, IOffsetBoundsData } from '@leafer/interface'
+import { BoundsHelper, LeafHelper, Matrix, Platform } from '@leafer/core'
 
 import { IUI, ICachedShape, ILeafShadowEffect } from '@leafer-ui/interface'
-import { ColorConvert, Effect } from '@leafer-ui/draw'
+import { ColorConvert } from '@leafer-ui/draw'
 
 
-const { copy, toOffsetOutBounds } = BoundsHelper
-const tempBounds = {} as IBoundsData
+const { copy, move, toOffsetOutBounds } = BoundsHelper, { max } = Math
+const tempBounds = {} as IBoundsData, tempMatrix = new Matrix()
 const offsetOutBounds = {} as IOffsetBoundsData
 
 export function shadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): void {
 
-    let copyBounds: IBoundsData, spreadScale: number
+    let copyBounds: IBoundsData, transform: IMatrixData
 
-    const { __nowWorld: nowWorld, __layout } = ui
+    const { __nowWorld: nowWorld } = ui
     const { shadow } = ui.__
-    const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape
+    const { worldCanvas, bounds, renderBounds, shapeBounds, scaleX, scaleY } = shape
 
     const other = current.getSameCanvas()
     const end = shadow.length - 1
 
-    toOffsetOutBounds(bounds, offsetOutBounds)
+    toOffsetOutBounds(bounds, offsetOutBounds, renderBounds)
 
     shadow.forEach((item, index) => {
 
@@ -33,11 +33,14 @@ export function shadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): vo
 
         other.setWorldShadow((offsetOutBounds.offsetX + item.x * scaleX * otherScale), (offsetOutBounds.offsetY + item.y * scaleY * otherScale), item.blur * scaleX * otherScale, ColorConvert.string(item.color))
 
-        spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) * otherScale : 0
+        transform = getShadowTransform(ui, other, shape, item, offsetOutBounds, otherScale)
+        if (transform) other.setTransform(transform)
 
-        drawWorldShadow(other, offsetOutBounds, spreadScale, shape)
+        drawWorldShadow(other, offsetOutBounds, shape)
 
-        copyBounds = bounds
+        if (transform) other.resetTransform()
+
+        copyBounds = renderBounds
 
         if (item.box) {
 
@@ -45,15 +48,14 @@ export function shadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): vo
             other.save()
 
             if (worldCanvas) {
-                other.copyWorld(other, bounds, nowWorld, 'copy')
+                other.copyWorld(other, renderBounds, nowWorld, 'copy')
                 copyBounds = nowWorld
             }
 
             worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out')
         }
 
-        if (Effect.isTransformShadow(item)) Effect.renderTransformShadow(ui, current, other, copyBounds, item)
-        else LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode)
+        LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode)
 
         if (end && index < end) other.clearWorld(copyBounds)
     })
@@ -62,45 +64,39 @@ export function shadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): vo
 
 }
 
-
-export function getShadowSpread(_ui: IUI, shadow: ILeafShadowEffect[]): number {
-    let width = 0
-    shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5))
-    return width
+export function getShadowRenderSpread(_ui: IUI, shadow: ILeafShadowEffect[]): IFourNumber {
+    let top = 0, right = 0, bottom = 0, left = 0, x: number, y: number, spread: number, blur: number
+    shadow.forEach(item => {
+        x = item.x || 0, y = item.y || 0, spread = item.spread || 0, blur = (item.blur || 0) * 1.5
+        top = max(top, spread + blur - y)
+        right = max(right, spread + blur + x)
+        bottom = max(bottom, spread + blur + y)
+        left = max(left, spread + blur - x)
+    })
+    return (top === right && right === bottom && bottom === left) ? top : [top, right, bottom, left]
 }
 
+export function getShadowTransform(ui: IUI, canvas: ILeaferCanvas, _shape: ICachedShape, shadow: ILeafShadowEffect, outBounds: IBoundsData, otherScale: number, isInnerShaodw?: boolean): IMatrixData {
+    if (shadow.spread) {
+        const spreadScale = 1 + shadow.spread * 2 / ui.__layout.strokeBounds.width * otherScale * (isInnerShaodw ? -1 : 1)
+        tempMatrix.set().scaleOfOuter({ x: (outBounds.x + outBounds.width / 2) * canvas.pixelRatio, y: (outBounds.y + outBounds.height / 2) * canvas.pixelRatio }, spreadScale)
+        return tempMatrix
+    }
+    return undefined
+}
 
-export function drawWorldShadow(canvas: ILeaferCanvas, outBounds: IBoundsData, spreadScale: number, shape: ICachedShape): void {
+export function drawWorldShadow(canvas: ILeaferCanvas, outBounds: IBoundsData, shape: ICachedShape): void {
 
-    const { bounds, shapeBounds } = shape
+    const { shapeBounds } = shape
+    let from: IBoundsData, to: IBoundsData
 
     if (Platform.fullImageShadow) { // Safari
-
         copy(tempBounds, canvas.bounds)
-        tempBounds.x += (outBounds.x - shapeBounds.x)
-        tempBounds.y += (outBounds.y - shapeBounds.y)
-
-        if (spreadScale) {
-            const { fitMatrix } = shape
-            tempBounds.x -= (bounds.x + (fitMatrix ? fitMatrix.e : 0) + bounds.width / 2) * (spreadScale - 1)
-            tempBounds.y -= (bounds.y + (fitMatrix ? fitMatrix.f : 0) + bounds.height / 2) * (spreadScale - 1)
-            tempBounds.width *= spreadScale
-            tempBounds.height *= spreadScale
-        }
-
-        canvas.copyWorld(shape.canvas, canvas.bounds, tempBounds)
-
+        move(tempBounds, outBounds.x - shapeBounds.x, outBounds.y - shapeBounds.y)
+        from = canvas.bounds, to = tempBounds
     } else {
-
-        if (spreadScale) {
-            copy(tempBounds, outBounds)
-            tempBounds.x -= (outBounds.width / 2) * (spreadScale - 1)
-            tempBounds.y -= (outBounds.height / 2) * (spreadScale - 1)
-            tempBounds.width *= spreadScale
-            tempBounds.height *= spreadScale
-        }
-
-        canvas.copyWorld(shape.canvas, shapeBounds, spreadScale ? tempBounds : outBounds)
+        from = shapeBounds, to = outBounds
     }
 
+    canvas.copyWorld(shape.canvas, from, to)
 }

package/src/index.ts

@@ -1,7 +1,7 @@
 import { IEffectModule, ILeafShadowEffect } from '@leafer-ui/interface'
 
-import { shadow, getShadowSpread } from './Shadow'
-import { innerShadow } from './InnerShadow'
+import { shadow, getShadowRenderSpread, getShadowTransform } from './Shadow'
+import { innerShadow, getInnerShadowSpread } from './InnerShadow'
 import { blur } from './Blur'
 import { backgroundBlur } from './BackgroundBlur'
 
@@ -13,6 +13,9 @@ export const EffectModule: IEffectModule = {
     backgroundBlur,
 
     // @leafer-in/shadow will rewrite
-    getShadowSpread,
-    isTransformShadow(_shadow: ILeafShadowEffect): boolean { return undefined }
+    getShadowRenderSpread,
+    getShadowTransform,
+    isTransformShadow(_shadow: ILeafShadowEffect): boolean { return undefined },
+
+    getInnerShadowSpread
 }