@leafer-ui/gradient 1.0.0-rc.25 → 1.0.0-rc.27

package/package.json

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

package/src/conic.ts

@@ -1,13 +1,13 @@
-import { IMatrixData, IPointData, IBoundsData } from '@leafer/interface'
-import { Platform, PointHelper, MatrixHelper, AroundHelper } from '@leafer/core'
+import { IPointData, IBoundsData } from '@leafer/interface'
+import { Platform, PointHelper, AroundHelper } from '@leafer/core'
 
 import { IGradientPaint, ILeafPaint } from '@leafer-ui/interface'
 
 import { applyStops } from './linear'
+import { getTransform } from './radial'
 
 
-const { getAngle, getDistance } = PointHelper
-const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper
+const { getDistance } = PointHelper
 
 const { toPoint } = AroundHelper
 const realFrom = {} as IPointData
@@ -20,23 +20,14 @@ export function conicGradient(paint: IGradientPaint, box: IBoundsData): ILeafPai
     toPoint(from || 'center', box, realFrom)
     toPoint(to || 'bottom', box, realTo)
 
-    const { width, height } = box
-    const transform: IMatrixData = get()
-    const angle = getAngle(realFrom, realTo)
-
-    if (Platform.conicGradientRotate90) {
-        scaleOfOuter(transform, realFrom, width / height * (stretch || 1), 1)
-        rotateOfOuter(transform, realFrom, angle + 90)
-    } else {
-        scaleOfOuter(transform, realFrom, 1, width / height * (stretch || 1))
-        rotateOfOuter(transform, realFrom, angle)
-    }
-
     const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo))
     applyStops(style, paint.stops, opacity)
 
-    const data: ILeafPaint = { type, style, transform }
+    const data: ILeafPaint = { type, style }
+    const transform = getTransform(box, realFrom, realTo, stretch || 1, Platform.conicGradientRotate90)
+    if (transform) data.transform = transform
     if (blendMode) data.blendMode = blendMode
+
     return data
 
 }

package/src/index.ts

@@ -1,12 +1,13 @@
 import { IPaintGradientModule } from '@leafer-ui/interface'
 
 import { linearGradient } from './linear'
-import { radialGradient } from './radial'
+import { radialGradient, getTransform } from './radial'
 import { conicGradient } from './conic'
 
 
 export const PaintGradientModule: IPaintGradientModule = {
     linearGradient,
     radialGradient,
-    conicGradient
+    conicGradient,
+    getTransform
 }

package/src/radial.ts

@@ -20,20 +20,33 @@ export function radialGradient(paint: IGradientPaint, box: IBoundsData): ILeafPa
     toPoint(from || 'center', box, realFrom)
     toPoint(to || 'bottom', box, realTo)
 
-    const { width, height } = box
-    let transform: IMatrixData
-
-    if (width !== height || stretch) {
-        transform = get()
-        scaleOfOuter(transform, realFrom, width / height * (stretch || 1), 1)
-        rotateOfOuter(transform, realFrom, getAngle(realFrom, realTo) + 90)
-    }
-
     const style = Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo))
     applyStops(style, paint.stops, opacity)
 
-    const data: ILeafPaint = { type, style, transform }
+    const data: ILeafPaint = { type, style }
+    const transform = getTransform(box, realFrom, realTo, stretch, true)
+    if (transform) data.transform = transform
     if (blendMode) data.blendMode = blendMode
+
     return data
 
+}
+
+export function getTransform(box: IBoundsData, from: IPointData, to: IPointData, stretch: number, rotate90: boolean): IMatrixData {
+    let transform: IMatrixData
+    const { width, height } = box
+
+    if (width !== height || stretch) {
+        const angle = getAngle(from, to)
+        transform = get()
+        if (rotate90) {
+            scaleOfOuter(transform, from, width / height * (stretch || 1), 1)
+            rotateOfOuter(transform, from, angle + 90)
+        } else {
+            scaleOfOuter(transform, from, 1, width / height * (stretch || 1))
+            rotateOfOuter(transform, from, angle)
+        }
+    }
+
+    return transform
 }