@leafer-ui/gradient 1.0.0-rc.23 → 1.0.0-rc.24

package/package.json

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

package/src/conic.ts

@@ -1,17 +1,15 @@
 import { IMatrixData, IPointData, IBoundsData } from '@leafer/interface'
-import { Platform, PointHelper, MatrixHelper } from '@leafer/core'
+import { Platform, PointHelper, MatrixHelper, AroundHelper } from '@leafer/core'
 
 import { IGradientPaint, ILeafPaint } from '@leafer-ui/interface'
 
 import { applyStops } from './linear'
 
 
-const { set, getAngle, getDistance } = PointHelper
+const { getAngle, getDistance } = PointHelper
 const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper
 
-const defaultFrom = { x: 0.5, y: 0.5 }
-const defaultTo = { x: 0.5, y: 1 }
-
+const { toPoint } = AroundHelper
 const realFrom = {} as IPointData
 const realTo = {} as IPointData
 
@@ -19,14 +17,10 @@ export function conicGradient(paint: IGradientPaint, box: IBoundsData): ILeafPai
 
     let { from, to, type, opacity, blendMode, stretch } = paint
 
-    from || (from = defaultFrom)
-    to || (to = defaultTo)
-
-    const { x, y, width, height } = box
-
-    set(realFrom, x + from.x * width, y + from.y * height)
-    set(realTo, x + to.x * width, y + to.y * height)
+    toPoint(from || 'center', box, realFrom)
+    toPoint(to || 'bottom', box, realTo)
 
+    const { width, height } = box
     const transform: IMatrixData = get()
     const angle = getAngle(realFrom, realTo)
 

package/src/linear.ts

@@ -1,21 +1,22 @@
-import { IObject, IBoundsData } from '@leafer/interface'
-import { Platform } from '@leafer/core'
+import { IObject, IBoundsData, IPointData } from '@leafer/interface'
+import { AroundHelper, Platform } from '@leafer/core'
 
-import { IGradientPaint, ILeafPaint, IColorStop } from '@leafer-ui/interface'
+import { IGradientPaint, ILeafPaint, IColorStop, IColorString } from '@leafer-ui/interface'
 import { ColorConvert } from '@leafer-ui/draw'
 
 
-const defaultFrom = { x: 0.5, y: 0 }
-const defaultTo = { x: 0.5, y: 1 }
+const { toPoint } = AroundHelper
+const realFrom = {} as IPointData
+const realTo = {} as IPointData
 
 export function linearGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint {
 
     let { from, to, type, blendMode, opacity } = paint
 
-    from || (from = defaultFrom)
-    to || (to = defaultTo)
+    toPoint(from || 'top', box, realFrom)
+    toPoint(to || 'bottom', box, realTo)
 
-    const style = Platform.canvas.createLinearGradient(box.x + from.x * box.width, box.y + from.y * box.height, box.x + to.x * box.width, box.y + to.y * box.height)
+    const style = Platform.canvas.createLinearGradient(realFrom.x, realFrom.y, realTo.x, realTo.y)
     applyStops(style, paint.stops, opacity)
 
     const data: ILeafPaint = { type, style }
@@ -24,10 +25,16 @@ export function linearGradient(paint: IGradientPaint, box: IBoundsData): ILeafPa
 
 }
 
-export function applyStops(gradient: IObject, stops: IColorStop[], opacity: number): void {
-    let stop: IColorStop
+export function applyStops(gradient: IObject, stops: IColorStop[] | IColorString[], opacity: number): void {
+
+    let stop: IColorStop | string
     for (let i = 0, len = stops.length; i < len; i++) {
         stop = stops[i]
-        gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity))
+        if (typeof stop === 'string') {
+            gradient.addColorStop(i / (len - 1), ColorConvert.string(stop, opacity))
+        } else {
+            gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity))
+        }
     }
+
 }

package/src/radial.ts

@@ -1,17 +1,15 @@
 import { IBoundsData } from '@leafer/interface'
-import { Platform, PointHelper, MatrixHelper } from '@leafer/core'
+import { Platform, PointHelper, MatrixHelper, AroundHelper } from '@leafer/core'
 
 import { IGradientPaint, ILeafPaint, IMatrixData, IPointData } from '@leafer-ui/interface'
 
 import { applyStops } from './linear'
 
 
-const { set, getAngle, getDistance } = PointHelper
+const { getAngle, getDistance } = PointHelper
 const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper
 
-const defaultFrom = { x: 0.5, y: 0.5 }
-const defaultTo = { x: 0.5, y: 1 }
-
+const { toPoint } = AroundHelper
 const realFrom = {} as IPointData
 const realTo = {} as IPointData
 
@@ -19,13 +17,10 @@ export function radialGradient(paint: IGradientPaint, box: IBoundsData): ILeafPa
 
     let { from, to, type, opacity, blendMode, stretch } = paint
 
-    from || (from = defaultFrom)
-    to || (to = defaultTo)
-
-    const { x, y, width, height } = box
-    set(realFrom, x + from.x * width, y + from.y * height)
-    set(realTo, x + to.x * width, y + to.y * height)
+    toPoint(from || 'center', box, realFrom)
+    toPoint(to || 'bottom', box, realTo)
 
+    const { width, height } = box
     let transform: IMatrixData
 
     if (width !== height || stretch) {