@leafer-ui/effect - npm Package Compare versions

Comparing version 1.9.7 to 1.9.8

package.json

 {
   "name": "@leafer-ui/effect",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "@leafer-ui/effect",
@@ -25,9 +25,9 @@ "author": "Chao (Leafer) Wan",
   "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"
   }
 }

src/index.ts

 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'
@@ -16,4 +16,7 @@ import { backgroundBlur } from './BackgroundBlur'
     // @leafer-in/shadow will rewrite
-    getShadowSpread,
-    isTransformShadow(_shadow: ILeafShadowEffect): boolean { return undefined }
+    getShadowRenderSpread,
+    getShadowTransform,
+    isTransformShadow(_shadow: ILeafShadowEffect): boolean { return undefined },
+
+    getInnerShadowSpread
 }

src/InnerShadow.ts

@@ -1,2 +0,2 @@
-import { IBoundsData, ILeaferCanvas, IOffsetBoundsData } from '@leafer/interface'
+import { IBoundsData, IMatrixData, ILeaferCanvas, IOffsetBoundsData } from '@leafer/interface'
 import { BoundsHelper, LeafHelper } from '@leafer/core'
@@ -7,3 +7,3 @@
 
-import { drawWorldShadow } from './Shadow'
+import { drawWorldShadow, getShadowRenderSpread, getShadowTransform } from './Shadow'
 
@@ -16,7 +16,7 @@
 
-    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
 
@@ -26,3 +26,3 @@ const other = current.getSameCanvas()
 
-    toOffsetOutBounds(bounds, offsetOutBounds)
+    toOffsetOutBounds(bounds, offsetOutBounds, renderBounds)
 
@@ -42,5 +42,6 @@ innerShadow.forEach((item, index) => {
 
-        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)
 
@@ -50,3 +51,3 @@ other.restore()
         if (worldCanvas) {
-            other.copyWorld(other, bounds, nowWorld, 'copy')
+            other.copyWorld(other, renderBounds, nowWorld, 'copy')
             other.copyWorld(worldCanvas, nowWorld, nowWorld, 'source-out')
@@ -56,3 +57,3 @@ copyBounds = nowWorld
             other.copyWorld(shape.canvas, shapeBounds, bounds, 'source-out')
-            copyBounds = bounds
+            copyBounds = renderBounds
         }
@@ -72,2 +73,2 @@
 
-
+export const getInnerShadowSpread = getShadowRenderSpread

src/Shadow.ts

@@ -1,10 +0,10 @@
-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
@@ -14,7 +14,7 @@
 
-    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
 
@@ -24,3 +24,3 @@ const other = current.getSameCanvas()
 
-    toOffsetOutBounds(bounds, offsetOutBounds)
+    toOffsetOutBounds(bounds, offsetOutBounds, renderBounds)
 
@@ -38,8 +38,11 @@ shadow.forEach((item, index) => {
 
-        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) {
@@ -51,3 +54,3 @@
             if (worldCanvas) {
-                other.copyWorld(other, bounds, nowWorld, 'copy')
+                other.copyWorld(other, renderBounds, nowWorld, 'copy')
                 copyBounds = nowWorld
@@ -59,4 +62,3 @@ }
 
-        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)
 
@@ -70,43 +72,37 @@ if (end && index < end) other.clearWorld(copyBounds)
 
+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 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 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, shape: ICachedShape): void {
 
-export function drawWorldShadow(canvas: ILeaferCanvas, outBounds: IBoundsData, spreadScale: number, shape: ICachedShape): void {
+    const { shapeBounds } = shape
+    let from: IBoundsData, to: IBoundsData
 
-    const { bounds, shapeBounds } = shape
-
     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)
 }

No alert changes

Improved metrics

Total package byte prevSize

9356

5.21%

Lines of code

141

3.68%

Dependency changes

• + Added

  @leafer-ui/bounds@1.9.8
  (transitive)

• + Added

  @leafer-ui/data@1.9.8
  (transitive)

• + Added

  @leafer-ui/decorator@1.9.8
  (transitive)

• + Added

  @leafer-ui/display@1.9.8
  (transitive)

• + Added

  @leafer-ui/display-module@1.9.8
  (transitive)

• + Added

  @leafer-ui/draw@1.9.8
  (transitive)

• + Added

  @leafer-ui/external@1.9.8
  (transitive)

• + Added

  @leafer-ui/render@1.9.8
  (transitive)

• + Added

  @leafer/canvas@1.9.8
  (transitive)

• + Added

  @leafer/core@1.9.8
  (transitive)

• + Added

  @leafer/data@1.9.8
  (transitive)

• + Added

  @leafer/debug@1.9.8
  (transitive)

• + Added

  @leafer/decorator@1.9.8
  (transitive)

• + Added

  @leafer/display@1.9.8
  (transitive)

• + Added

  @leafer/display-module@1.9.8
  (transitive)

• + Added

  @leafer/event@1.9.8
  (transitive)

• + Added

  @leafer/file@1.9.8
  (transitive)

• + Added

  @leafer/helper@1.9.8
  (transitive)

• + Added

  @leafer/image@1.9.8
  (transitive)

• + Added

  @leafer/layout@1.9.8
  (transitive)

• + Added

  @leafer/list@1.9.8
  (transitive)

• + Added

  @leafer/math@1.9.8
  (transitive)

• + Added

  @leafer/path@1.9.8
  (transitive)

• + Added

  @leafer/platform@1.9.8
  (transitive)

• + Added

  @leafer/task@1.9.8
  (transitive)

• - Removed

  @leafer-ui/bounds@1.9.7
  (transitive)

• - Removed

  @leafer-ui/data@1.9.7
  (transitive)

• - Removed

  @leafer-ui/decorator@1.9.7
  (transitive)

• - Removed

  @leafer-ui/display@1.9.7
  (transitive)

• - Removed

  @leafer-ui/display-module@1.9.7
  (transitive)

• - Removed

  @leafer-ui/draw@1.9.7
  (transitive)

• - Removed

  @leafer-ui/external@1.9.7
  (transitive)

• - Removed

  @leafer-ui/render@1.9.7
  (transitive)

• - Removed

  @leafer/canvas@1.9.7
  (transitive)

• - Removed

  @leafer/core@1.9.7
  (transitive)

• - Removed

  @leafer/data@1.9.7
  (transitive)

• - Removed

  @leafer/debug@1.9.7
  (transitive)

• - Removed

  @leafer/decorator@1.9.7
  (transitive)

• - Removed

  @leafer/display@1.9.7
  (transitive)

• - Removed

  @leafer/display-module@1.9.7
  (transitive)

• - Removed

  @leafer/event@1.9.7
  (transitive)

• - Removed

  @leafer/file@1.9.7
  (transitive)

• - Removed

  @leafer/helper@1.9.7
  (transitive)

• - Removed

  @leafer/image@1.9.7
  (transitive)

• - Removed

  @leafer/layout@1.9.7
  (transitive)

• - Removed

  @leafer/list@1.9.7
  (transitive)

• - Removed

  @leafer/math@1.9.7
  (transitive)

• - Removed

  @leafer/path@1.9.7
  (transitive)

• - Removed

  @leafer/platform@1.9.7
  (transitive)

• - Removed

  @leafer/task@1.9.7
  (transitive)

• Updated

  @leafer-ui/draw@1.9.8

• Updated

  @leafer/core@1.9.8