@leafer-ui/effect 1.0.0-alpha.23 → 1.0.0-alpha.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/effect",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.31",
   "description": "@leafer-ui/effect",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",

package/src/InnerShadow.ts

@@ -1,29 +1,35 @@
-import { IBoundsData, ILeaferCanvas, IMatrixWithBoundsData, ISizeData } from '@leafer/interface'
+import { IBoundsData, ILeaferCanvas, IMatrixWithBoundsData, IOffsetBoundsData } from '@leafer/interface'
 import { BoundsHelper } from '@leafer/core'
 
 import { IUI, ICachedShape } from '@leafer-ui/interface'
+import { drawWorldShadow } from './Shadow'
 
-const bigger: ISizeData = {
-    width: 4,
-    height: 4
-}
+const { toOffsetOutBounds } = BoundsHelper
+const offsetOutBounds = {} as IOffsetBoundsData
 
 export function innerShadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): void {
 
-    let copyBounds: IBoundsData
+    let copyBounds: IBoundsData, spreadScale: number
 
-    const { __world, __layout } = ui
+    const { __world, __layout: __layout } = ui
     const { innerShadow } = ui.__
     const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape
 
-    const other = current.getBiggerCanvas(bigger.width, bigger.height)
-    const out = BoundsHelper.getOutOfBounds(bounds, current.bounds)
+    const other = current.getSameCanvas()
+    const end = innerShadow.length - 1
+
+    toOffsetOutBounds(bounds, offsetOutBounds)
 
-    innerShadow.forEach(item => {
+    innerShadow.forEach((item, index) => {
 
         other.save()
-        other.setWorldShadow((out.offsetX + item.x * scaleX), (out.offsetY + item.y * scaleY), item.blur * scaleX)
-        other.copyWorld(shape.canvas, shapeBounds, item.spread ? BoundsHelper.getSpread(out, -item.spread * scaleX * (__layout.renderBounds.width / __layout.strokeBounds.width)) : out)
+
+        other.setWorldShadow((offsetOutBounds.offsetX + item.x * scaleX), (offsetOutBounds.offsetY + item.y * scaleY), item.blur * scaleX)
+
+        spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.shapeStrokeSpreadWidth || 0) * 2) : 0
+
+        drawWorldShadow(other, offsetOutBounds, spreadScale, shape)
+
         other.restore()
 
         if (worldCanvas) {
@@ -39,9 +45,12 @@ export function innerShadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape
 
         current.copyWorldToInner(other, copyBounds as IMatrixWithBoundsData, __layout.renderBounds, item.blendMode)
 
+        if (end && index < end) other.clear()
+
     })
 
-    //other.debug()
     other.recycle()
 
-}
+}
+
+

package/src/Shadow.ts

@@ -1,42 +1,42 @@
-import { IBoundsData, ILeaferCanvas, IMatrixWithBoundsData, ISizeData } from '@leafer/interface'
-import { BoundsHelper } from '@leafer/core'
+import { IBoundsData, ILeaferCanvas, IMatrixWithBoundsData, IOffsetBoundsData } from '@leafer/interface'
+import { BoundsHelper, Platform } from '@leafer/core'
 
 import { IUI, ICachedShape } from '@leafer-ui/interface'
 
-const bigger: ISizeData = {
-    width: 4,
-    height: 4
-}
+
+const { copy, toOffsetOutBounds } = BoundsHelper
+const tempBounds = {} as IBoundsData
+const offsetOutBounds = {} as IOffsetBoundsData
 
 export function shadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): void {
 
-    let copyBounds: IBoundsData
+    let copyBounds: IBoundsData, spreadScale: number
 
     const { __world, __layout } = ui
     const { shadow } = ui.__
     const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape
 
-    const other = current.getBiggerCanvas(bigger.width, bigger.height)
-    const out = BoundsHelper.getOutOfBounds(bounds, current.bounds)
+    const other = current.getSameCanvas()
+    const end = shadow.length - 1
+
+    toOffsetOutBounds(bounds, offsetOutBounds)
+    console.log(offsetOutBounds)
 
-    shadow.forEach(item => {
+    shadow.forEach((item, index) => {
 
-        other.setWorldShadow((out.offsetX + item.x * scaleX), (out.offsetY + item.y * scaleY), item.blur * scaleX, item.color)
-        other.copyWorld(shape.canvas, shapeBounds, item.spread ? BoundsHelper.getSpread(out, item.spread * scaleX * (__layout.renderBounds.width / __layout.strokeBounds.width)) : out)
+        other.setWorldShadow((offsetOutBounds.offsetX + item.x * scaleX), (offsetOutBounds.offsetY + item.y * scaleY), item.blur * scaleX, item.color)
+
+        spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.shapeStrokeSpreadWidth || 0) * 2) : 0
+
+        drawWorldShadow(other, offsetOutBounds, spreadScale, shape)
 
         copyBounds = bounds
 
-        if (!item.showBehind) {
+        if (item.boxShadow) {
 
             other.restore()
             other.save()
 
-            // other.replaceBy(other, renderBounds, ui.__world)
-            // other.setTransform(ui.__world)
-            // ui.__drawPath(other.context, ui.__.__path)
-            // other.context.clip()
-            // other.clearRect(ui.__layout.renderBounds)
-
             if (worldCanvas) {
                 other.copyWorld(other, bounds, __world, 'copy')
                 copyBounds = __world
@@ -46,9 +46,46 @@ export function shadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): vo
         }
 
         current.copyWorldToInner(other, copyBounds as IMatrixWithBoundsData, __layout.renderBounds, item.blendMode)
+
+        if (end && index < end) other.clear()
     })
 
-    //other.debug()
     other.recycle()
 
+}
+
+
+export function drawWorldShadow(canvas: ILeaferCanvas, outBounds: IBoundsData, spreadScale: number, shape: ICachedShape,): void {
+
+    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 { matrix } = shape
+            tempBounds.x -= (bounds.x + (matrix ? matrix.e : 0) + bounds.width / 2) * (spreadScale - 1)
+            tempBounds.y -= (bounds.y + (matrix ? matrix.f : 0) + bounds.height / 2) * (spreadScale - 1)
+            tempBounds.width *= spreadScale
+            tempBounds.height *= spreadScale
+        }
+
+        canvas.copyWorld(shape.canvas, canvas.bounds, 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)
+    }
+
 }