@leafer-ui/paint 1.0.0-beta.8 → 1.0.0-rc.10

package/package.json

@@ -1,29 +1,32 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-rc.10",
   "description": "@leafer-ui/paint",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "src"
+    "src",
+    "types",
+    "dist"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/leaferjs/ui.git"
   },
-  "homepage": "https://github.com/leaferjs/ui/tree/main/packages/paint",
+  "homepage": "https://github.com/leaferjs/ui/tree/main/packages/partner/paint",
   "bugs": "https://github.com/leaferjs/ui/issues",
   "keywords": [
     "leafer-ui",
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-beta.8",
-    "@leafer-ui/color": "1.0.0-beta.8"
+    "@leafer/core": "1.0.0-rc.10",
+    "@leafer-ui/draw": "1.0.0-rc.10"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.8",
-    "@leafer-ui/interface": "1.0.0-beta.8"
+    "@leafer/interface": "1.0.0-rc.10",
+    "@leafer-ui/interface": "1.0.0-rc.10"
   }
 }

package/src/Compute.ts

@@ -1,35 +1,37 @@
-import { IUI, IPaint, ILeafPaint, IRGB } from '@leafer-ui/interface'
-import { ColorConvert } from '@leafer-ui/color'
+import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap, IObject, IPaintAttr } from '@leafer-ui/interface'
+import { ColorConvert } from '@leafer-ui/draw'
 
-import { image } from "./paint/image"
-import { linearGradient } from './paint/linear'
-import { radialGradient } from "./paint/radial"
-import { conicGradient } from "./paint/conic"
+import { PaintImage, PaintGradient } from "@leafer-ui/external"
 
 
-export function computeFill(ui: IUI): void {
-    compute(ui, 'fill')
-}
-
-export function computeStroke(ui: IUI): void {
-    compute(ui, 'stroke')
-}
+let recycleMap: IBooleanMap
 
-function compute(ui: IUI, attrName: string): void {
-    let paints = ui.__.__input[attrName] as IPaint[]
+export function compute(attrName: IPaintAttr, ui: IUI): void {
+    const data = ui.__, leafPaints: ILeafPaint[] = []
 
-    let item: ILeafPaint
-    const value: ILeafPaint[] = []
+    let paints: IPaint[] = data.__input[attrName], hasOpacityPixel: boolean
     if (!(paints instanceof Array)) paints = [paints]
 
-    for (let i = 0, len = paints.length; i < len; i++) {
-        item = getLeafPaint(ui, paints[i], attrName)
-        if (item) value.push(item)
+    recycleMap = PaintImage.recycleImage(attrName, data)
+
+    for (let i = 0, len = paints.length, item: ILeafPaint; i < len; i++) {
+        item = getLeafPaint(attrName, paints[i], ui)
+        if (item) leafPaints.push(item)
+    }
+
+    (data as IObject)['_' + attrName] = leafPaints.length ? leafPaints : undefined
+
+    if (leafPaints.length && leafPaints[0].image) hasOpacityPixel = leafPaints[0].image.hasOpacityPixel
+
+    if (attrName === 'fill') {
+        data.__pixelFill = hasOpacityPixel
+    } else {
+        data.__pixelStroke = hasOpacityPixel
     }
-    ui.__['_' + attrName] = value.length ? value : undefined
 }
 
-function getLeafPaint(ui: IUI, paint: IPaint, attrName: string): ILeafPaint {
+
+function getLeafPaint(attrName: string, paint: IPaint, ui: IUI): ILeafPaint {
     if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0) return undefined
     const { boxBounds } = ui.__layout
 
@@ -38,13 +40,13 @@ function getLeafPaint(ui: IUI, paint: IPaint, attrName: string): ILeafPaint {
             let { type, blendMode, color, opacity } = paint
             return { type, blendMode, style: ColorConvert.string(color, opacity) }
         case 'image':
-            return image(ui, attrName, paint, boxBounds)
+            return PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url])
         case 'linear':
-            return linearGradient(paint, boxBounds)
+            return PaintGradient.linearGradient(paint, boxBounds)
         case 'radial':
-            return radialGradient(paint, boxBounds)
+            return PaintGradient.radialGradient(paint, boxBounds)
         case 'angular':
-            return conicGradient(paint, boxBounds)
+            return PaintGradient.conicGradient(paint, boxBounds)
         default:
             return (paint as IRGB).r ? { type: 'solid', style: ColorConvert.string(paint) } : undefined
     }

package/src/Fill.ts

@@ -1,44 +1,51 @@
 import { ILeaferCanvas } from '@leafer/interface'
 
 import { ILeafPaint, IUI } from '@leafer-ui/interface'
+import { PaintImage } from "@leafer-ui/external"
 
-import { drawText } from './FillText'
+import { fillText } from './FillText'
 
 
-export function fill(ui: IUI, canvas: ILeaferCanvas, fill: string | object): void {
+export function fill(fill: string, ui: IUI, canvas: ILeaferCanvas): void {
     canvas.fillStyle = fill
-    ui.__.__font ? drawText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill())
+    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill())
 }
 
-export function fills(ui: IUI, canvas: ILeaferCanvas, fills: ILeafPaint[]): void {
+
+export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
     let item: ILeafPaint
     const { windingRule, __font } = ui.__
     for (let i = 0, len = fills.length; i < len; i++) {
         item = fills[i]
-        canvas.fillStyle = item.style
 
-        if (item.transform) {
-            canvas.save()
+        if (item.image && PaintImage.checkImage(ui, canvas, item, !__font)) continue
+
+        if (item.style) {
 
-            const { a, b, c, d, e, f } = item.transform
-            canvas.transform(a, b, c, d, e, f)
+            canvas.fillStyle = item.style
 
-            if (item.blendMode) canvas.blendMode = item.blendMode
+            if (item.transform) {
+                canvas.save()
 
-            __font ? drawText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
+                canvas.transform(item.transform)
 
-            canvas.restore()
-        } else {
-            if (item.blendMode) {
-                canvas.saveBlendMode(item.blendMode)
+                if (item.blendMode) canvas.blendMode = item.blendMode
 
-                __font ? drawText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
+                __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
 
-                canvas.restoreBlendMode()
+                canvas.restore()
             } else {
+                if (item.blendMode) {
+                    canvas.saveBlendMode(item.blendMode)
+
+                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
+
+                    canvas.restoreBlendMode()
+                } else {
 
-                __font ? drawText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
+                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
 
+                }
             }
         }
 

package/src/FillText.ts

@@ -3,7 +3,7 @@ import { ILeaferCanvas } from '@leafer/interface'
 import { IUI, ITextRowData } from '@leafer-ui/interface'
 
 
-export function drawText(ui: IUI, canvas: ILeaferCanvas): void {
+export function fillText(ui: IUI, canvas: ILeaferCanvas): void {
 
     let row: ITextRowData
     const { rows, decorationY, decorationHeight } = ui.__.__textDrawData

package/src/Shape.ts

@@ -8,50 +8,52 @@ const { getSpread, getOuterOf, getByMove, getIntersectData } = BoundsHelper
 
 export function shape(ui: IUI, current: ILeaferCanvas, options: IRenderOptions): ICachedShape {
     const canvas = current.getSameCanvas()
+    const nowWorld = ui.__nowWorld
 
-    let bounds: IBoundsData, matrix: IMatrix, shapeBounds: IBoundsData
-    let worldCanvas: ILeaferCanvas
+    let bounds: IBoundsData, fitMatrix: IMatrix, shapeBounds: IBoundsData, worldCanvas: ILeaferCanvas
 
-    const { __world } = ui
-    let { a: scaleX, d: scaleY } = __world
+    let { scaleX, scaleY } = nowWorld
+    if (scaleX < 0) scaleX = -scaleX
+    if (scaleY < 0) scaleY = -scaleY
 
-    if (!current.bounds.includes(__world, options.matrix)) {
+    if (current.bounds.includes(nowWorld)) {
+
+        worldCanvas = canvas
+        bounds = shapeBounds = nowWorld
+
+    } else {
 
         const { renderShapeSpread: spread } = ui.__layout
-        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX) : current.bounds, __world, options.matrix)
-        matrix = current.bounds.getFitMatrix(worldClipBounds)
+        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX, spread * scaleY) : current.bounds, nowWorld)
+        fitMatrix = current.bounds.getFitMatrix(worldClipBounds)
+        let { a: fitScaleX, d: fitScaleY } = fitMatrix
 
-        if (matrix.a < 1) {
+        if (fitMatrix.a < 1) {
             worldCanvas = current.getSameCanvas()
             ui.__renderShape(worldCanvas, options)
 
-            scaleX *= matrix.a
-            scaleY *= matrix.d
+            scaleX *= fitScaleX
+            scaleY *= fitScaleY
         }
 
-        shapeBounds = getOuterOf(__world, matrix)
-        bounds = getByMove(shapeBounds, -matrix.e, -matrix.f)
-
-        if (options.matrix) matrix.multiply(options.matrix)
-        options = { ...options, matrix }
-
-    } else {
+        shapeBounds = getOuterOf(nowWorld, fitMatrix)
+        bounds = getByMove(shapeBounds, -fitMatrix.e, -fitMatrix.f)
 
         if (options.matrix) {
-            scaleX *= options.matrix.a
-            scaleY *= options.matrix.d
-            bounds = shapeBounds = getOuterOf(__world, options.matrix)
-        } else {
-            bounds = shapeBounds = __world
+            const { matrix } = options
+            fitMatrix.multiply(matrix)
+            fitScaleX *= matrix.scaleX
+            fitScaleY *= matrix.scaleY
         }
 
-        worldCanvas = canvas
+        options = { ...options, matrix: fitMatrix.withScale(fitScaleX, fitScaleY) }
+
     }
 
     ui.__renderShape(canvas, options)
 
     return {
-        canvas, matrix, bounds,
+        canvas, matrix: fitMatrix, bounds,
         worldCanvas, shapeBounds, scaleX, scaleY
     }
 }

package/src/Stroke.ts

@@ -1,18 +1,18 @@
 import { ILeaferCanvas } from '@leafer/interface'
 
-import { IUI, ILeafStrokePaint, ILeafPaint } from '@leafer-ui/interface'
+import { IUI, ILeafPaint } from '@leafer-ui/interface'
 
-import { strokeText, strokesText } from './StrokeText'
+import { strokeText, drawStrokesStyle } from './StrokeText'
 
 
-export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object): void {
+export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas): void {
     const options = ui.__
-    const { strokeWidth, strokeAlign, __font } = options
-    if (!strokeWidth) return
+    const { __strokeWidth, strokeAlign, __font } = options
+    if (!__strokeWidth) return
 
     if (__font) {
 
-        strokeText(ui, canvas, stroke)
+        strokeText(stroke, ui, canvas)
 
     } else {
 
@@ -20,16 +20,16 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object):
 
             case 'center':
 
-                canvas.setStroke(stroke, strokeWidth, options)
+                canvas.setStroke(stroke, __strokeWidth, options)
                 canvas.stroke()
                 break
 
             case 'inside':
 
                 canvas.save()
-                canvas.setStroke(stroke, strokeWidth * 2, options)
+                canvas.setStroke(stroke, __strokeWidth * 2, options)
 
-                canvas.clip(options.windingRule)
+                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip()
                 canvas.stroke()
 
                 canvas.restore()
@@ -37,85 +37,80 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object):
                 break
 
             case 'outside':
-                const out = canvas.getSameCanvas(true)
-                out.setStroke(stroke, strokeWidth * 2, ui.__)
+                const out = canvas.getSameCanvas(true, true)
+                out.setStroke(stroke, __strokeWidth * 2, options)
 
                 ui.__drawRenderPath(out)
 
                 out.stroke()
 
-                out.clip(options.windingRule)
+                options.windingRule ? out.clip(options.windingRule) : out.clip()
                 out.clearWorld(ui.__layout.renderBounds)
 
-                canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
-                out.recycle()
+                if (ui.__worldFlipped) {
+                    canvas.copyWorldByReset(out, ui.__nowWorld)
+                } else {
+                    canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds)
+                }
 
+                out.recycle(ui.__nowWorld)
                 break
         }
 
     }
 }
 
-export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]): void {
+
+export function strokes(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
     const options = ui.__
-    const { strokeWidth, strokeAlign, __font } = options
-    if (!strokeWidth) return
+    const { __strokeWidth, strokeAlign, __font } = options
+    if (!__strokeWidth) return
 
     if (__font) {
 
-        strokesText(ui, canvas, strokes)
+        strokeText(strokes, ui, canvas)
 
     } else {
 
         switch (strokeAlign) {
 
             case 'center':
-                canvas.setStroke(undefined, strokeWidth, options)
-                drawStrokesStyle(strokes, canvas)
+                canvas.setStroke(undefined, __strokeWidth, options)
+                drawStrokesStyle(strokes, false, ui, canvas)
                 break
 
             case 'inside':
                 canvas.save()
-                canvas.setStroke(undefined, strokeWidth * 2, options)
-                canvas.clip(options.windingRule)
+                canvas.setStroke(undefined, __strokeWidth * 2, options)
+                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip()
 
-                drawStrokesStyle(strokes, canvas)
+                drawStrokesStyle(strokes, false, ui, canvas)
 
                 canvas.restore()
                 break
 
             case 'outside':
                 const { renderBounds } = ui.__layout
-                const out = canvas.getSameCanvas(true)
+                const out = canvas.getSameCanvas(true, true)
                 ui.__drawRenderPath(out)
 
-                out.setStroke(undefined, strokeWidth * 2, ui.__)
+                out.setStroke(undefined, __strokeWidth * 2, options)
 
-                drawStrokesStyle(strokes, out)
+                drawStrokesStyle(strokes, false, ui, out)
 
-                out.clip(options.windingRule)
+                options.windingRule ? out.clip(options.windingRule) : out.clip()
                 out.clearWorld(renderBounds)
 
-                canvas.copyWorldToInner(out, ui.__world, renderBounds)
-                out.recycle()
+                if (ui.__worldFlipped) {
+                    canvas.copyWorldByReset(out, ui.__nowWorld)
+                } else {
+                    canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds)
+                }
+
+                out.recycle(ui.__nowWorld)
                 break
         }
 
     }
 
 }
-
-function drawStrokesStyle(strokes: ILeafStrokePaint[], canvas: ILeaferCanvas): void {
-    strokes.forEach((item: ILeafStrokePaint) => {
-        canvas.strokeStyle = item.style
-
-        if (item.blendMode) {
-            canvas.saveBlendMode(item.blendMode)
-            canvas.stroke()
-            canvas.restoreBlendMode()
-        } else {
-            canvas.stroke()
-        }
-
-    })
-}

package/src/StrokeText.ts

@@ -1,91 +1,48 @@
 import { ILeaferCanvas } from '@leafer/interface'
 
-import { IUI, ITextRowData, ILeafStrokePaint, ILeafPaint, IStrokeAlign } from '@leafer-ui/interface'
+import { IUI, ITextRowData, ILeafPaint, IStrokeAlign, ILeafStrokePaint } from '@leafer-ui/interface'
+import { PaintImage } from "@leafer-ui/external"
 
-import { drawText } from './FillText'
+import { fillText } from './FillText'
 
 
-export function strokeText(ui: IUI, canvas: ILeaferCanvas, stroke: string | object): void {
+export function strokeText(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
     const { strokeAlign } = ui.__
+    const isStrokes = typeof stroke !== 'string'
     switch (strokeAlign) {
         case 'center':
-            canvas.setStroke(stroke, ui.__.strokeWidth, ui.__)
-            drawTextStroke(ui, canvas)
+            canvas.setStroke(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__)
+            isStrokes ? drawStrokesStyle(stroke as ILeafPaint[], true, ui, canvas) : drawTextStroke(ui, canvas)
             break
         case 'inside':
-            drawAlignStroke(ui, canvas, stroke, 'inside')
+            drawAlignStroke('inside', stroke, isStrokes, ui, canvas)
             break
         case 'outside':
-            drawAlignStroke(ui, canvas, stroke, 'outside')
+            drawAlignStroke('outside', stroke, isStrokes, ui, canvas)
             break
     }
 }
 
-function drawAlignStroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object, align: IStrokeAlign): void {
-    const { strokeWidth, __font } = ui.__
+function drawAlignStroke(align: IStrokeAlign, stroke: string | ILeafPaint[], isStrokes: boolean, ui: IUI, canvas: ILeaferCanvas): void {
+    const { __strokeWidth, __font } = ui.__
 
-    const out = canvas.getSameCanvas(true)
-    out.setStroke(stroke, strokeWidth * 2, ui.__)
+    const out = canvas.getSameCanvas(true, true)
+    out.setStroke(isStrokes ? undefined : stroke, __strokeWidth * 2, ui.__)
 
     out.font = __font
-    drawTextStroke(ui, out)
+    isStrokes ? drawStrokesStyle(stroke as ILeafPaint[], true, ui, out) : drawTextStroke(ui, out)
 
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in'
-    drawText(ui, out)
+    fillText(ui, out)
     out.blendMode = 'normal'
 
-    canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
-    out.recycle()
-}
-
-export function strokesText(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]): void {
-    const { strokeAlign } = ui.__
-    switch (strokeAlign) {
-        case 'center':
-            canvas.setStroke(undefined, ui.__.strokeWidth, ui.__)
-            drawStrokesStyle(ui, strokes, canvas)
-            break
-        case 'inside':
-            drawAlignStroke(ui, canvas, strokes, 'inside')
-            break
-        case 'outside':
-            drawAlignStrokes(ui, canvas, strokes, 'outside')
-            break
+    if (ui.__worldFlipped) {
+        canvas.copyWorldByReset(out, ui.__nowWorld)
+    } else {
+        canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds)
     }
-}
-
-
-function drawAlignStrokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[], align: IStrokeAlign): void {
-    const { strokeWidth, __font } = ui.__
-
-    const out = canvas.getSameCanvas(true)
-    out.setStroke(undefined, strokeWidth * 2, ui.__)
-
-    out.font = __font
-    drawStrokesStyle(ui, strokes, out)
 
-    out.blendMode = align === 'outside' ? 'destination - out' : 'destination -in '
-    drawText(ui, out)
-    out.blendMode = 'normal'
-
-    canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
-    out.recycle()
-}
-
-
-function drawStrokesStyle(ui: IUI, strokes: ILeafStrokePaint[], canvas: ILeaferCanvas): void {
-    strokes.forEach((item: ILeafStrokePaint) => {
-        canvas.strokeStyle = item.style
-
-        if (item.blendMode) {
-            canvas.saveBlendMode(item.blendMode)
-            drawTextStroke(ui, canvas)
-            canvas.restoreBlendMode()
-        } else {
-            drawTextStroke(ui, canvas)
-        }
-
-    })
+    out.recycle(ui.__nowWorld)
 }
 
 export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
@@ -108,3 +65,25 @@ export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
     }
 
 }
+
+export function drawStrokesStyle(strokes: ILeafStrokePaint[], isText: boolean, ui: IUI, canvas: ILeaferCanvas): void {
+    let item: ILeafStrokePaint
+    for (let i = 0, len = strokes.length; i < len; i++) {
+        item = strokes[i]
+
+        if (item.image && PaintImage.checkImage(ui, canvas, item, false)) continue
+
+        if (item.style) {
+
+            canvas.strokeStyle = item.style
+
+            if (item.blendMode) {
+                canvas.saveBlendMode(item.blendMode)
+                isText ? drawTextStroke(ui, canvas) : canvas.stroke()
+                canvas.restoreBlendMode()
+            } else {
+                isText ? drawTextStroke(ui, canvas) : canvas.stroke()
+            }
+        }
+    }
+}

package/src/index.ts

@@ -1,6 +1,21 @@
-export { fill, fills } from './Fill'
-export { drawText } from './FillText'
-export { stroke, strokes } from './Stroke'
-export { strokeText, strokesText, drawTextStroke } from './StrokeText'
-export { shape } from './Shape'
-export { computeFill, computeStroke } from './Compute'
+import { IPaintModule } from '@leafer-ui/interface'
+
+import { fill, fills } from './Fill'
+import { fillText } from './FillText'
+import { stroke, strokes } from './Stroke'
+import { strokeText, drawTextStroke } from './StrokeText'
+import { shape } from './Shape'
+import { compute } from './Compute'
+
+
+export const PaintModule: IPaintModule = {
+    compute,
+    fill,
+    fills,
+    fillText,
+    stroke,
+    strokes,
+    strokeText,
+    drawTextStroke,
+    shape
+}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+import { IPaintModule } from '@leafer-ui/interface';
+
+declare const PaintModule: IPaintModule;
+
+export { PaintModule };

package/src/paint/conic.ts

@@ -1,48 +0,0 @@
-import { IMatrixData, IPointData, IBoundsData } from '@leafer/interface'
-import { Platform, PointHelper, MatrixHelper } from '@leafer/core'
-
-import { IGradientPaint, ILeafPaint } from '@leafer-ui/interface'
-
-import { applyStops } from './linear'
-
-
-const { set, getAngle, getDistance } = PointHelper
-const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper
-
-const defaultFrom = { x: 0.5, y: 0.5 }
-const defaultTo = { x: 0.5, y: 1 }
-
-const realFrom = {} as IPointData
-const realTo = {} as IPointData
-
-export function conicGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint {
-
-    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)
-
-    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 }
-    if (blendMode) data.blendMode = blendMode
-    return data
-
-}

package/src/paint/image.ts

@@ -1,139 +0,0 @@
-import { IBoundsData, ISizeData } from '@leafer/interface'
-import { Platform, MatrixHelper, ImageEvent } from '@leafer/core'
-
-import { IUI, IImagePaint, ILeafPaint, IMatrixData, IImagePaintMode, IPointData } from '@leafer-ui/interface'
-
-
-const { get, rotateOfOuter, translate, scaleOfOuter, scale: scaleHelper, rotate } = MatrixHelper
-
-export function image(ui: IUI, attrName: string, paint: IImagePaint, box: IBoundsData): ILeafPaint {
-    const { type, blendMode } = paint
-    let leaferPaint: ILeafPaint = { type, style: 'rgba(255,255,255,0)' }
-    if (blendMode) leaferPaint.blendMode = blendMode
-
-    const { imageManager } = ui.leafer
-    const image = imageManager.get(paint)
-
-    if (image.ready) {
-
-        if (hasSize(ui, attrName, image)) {
-
-            let transform: IMatrixData
-            let { opacity, mode, offset, scale, rotation } = paint
-            let { width, height } = image
-            const sameBox = box.width === width && box.height === height
-
-            switch (mode) {
-                case 'strench':
-                    if (!sameBox) width = box.width, height = box.height
-                    if (box.x || box.y) {
-                        transform = get()
-                        translate(transform, box.x, box.y)
-                    }
-                    break
-                case 'clip':
-                    if (offset || scale || rotation) transform = getClipTransform(box, offset, scale, rotation)
-                    break
-                case 'repeat':
-                    if (!sameBox || scale || rotation) transform = getRepeatTransform(box, width, height, scale as number, rotation)
-                    break
-                case 'fit':
-                case 'cover':
-                default:
-                    if (!sameBox || rotation) transform = getFillOrFitTransform(mode, box, width, height, rotation)
-            }
-
-            leaferPaint.style = createPattern(image.getCanvas(width, height, opacity), transform, mode === 'repeat')
-
-        }
-
-    } else {
-
-        imageManager.load(image,
-            () => {
-                if (ui.leafer) {
-                    if (hasSize(ui, attrName, image)) ui.forceUpdate('width')
-                    ui.emitEvent(new ImageEvent(ImageEvent.LOADED, ui, image, attrName, paint))
-                }
-            },
-            (error) => {
-                ui.emitEvent(new ImageEvent(ImageEvent.ERROR, ui, image, attrName, paint, error))
-            }
-        )
-
-    }
-
-    return leaferPaint
-}
-
-function hasSize(ui: IUI, attrName: string, image: ISizeData): boolean {
-    const { __: data } = ui
-
-    if (attrName === 'fill' && data) {
-        if (!data.__naturalWidth || !data.__naturalHeight) {
-            data.__naturalWidth = image.width
-            data.__naturalHeight = image.height
-            if (!data.__getInput('width') || !data.__getInput('height')) {
-                ui.forceUpdate('width')
-                return false
-            }
-        }
-    }
-
-    return true
-}
-
-function getFillOrFitTransform(mode: IImagePaintMode, box: IBoundsData, width: number, height: number, rotation: number): IMatrixData {
-    const transform: IMatrixData = get()
-    const swap = rotation && rotation !== 180
-    const sw = box.width / (swap ? height : width)
-    const sh = box.height / (swap ? width : height)
-    const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh)
-    const x = box.x + (box.width - width * scale) / 2
-    const y = box.y + (box.height - height * scale) / 2
-    translate(transform, x, y)
-    scaleHelper(transform, scale)
-    if (rotation) rotateOfOuter(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation)
-    return transform
-}
-
-function getClipTransform(box: IBoundsData, offset: IPointData, scale: number | IPointData, rotation: number): IMatrixData {
-    const transform: IMatrixData = get()
-    translate(transform, box.x, box.y)
-    if (offset) translate(transform, offset.x, offset.y)
-    if (scale) typeof scale === 'number' ? scaleHelper(transform, scale) : scaleHelper(transform, scale.x, scale.y)
-    if (rotation) rotate(transform, rotation)
-    return transform
-}
-
-function getRepeatTransform(box: IBoundsData, width: number, height: number, scale: number, rotation: number): IMatrixData {
-    const transform = get()
-
-    if (rotation) {
-        rotate(transform, rotation)
-        switch (rotation) {
-            case 90:
-                translate(transform, height, 0)
-                break
-            case 180:
-                translate(transform, width, height)
-                break
-            case 270:
-                translate(transform, 0, width)
-                break
-        }
-    }
-    translate(transform, box.x, box.y)
-    if (scale) scaleOfOuter(transform, box, scale)
-    return transform
-}
-
-
-function createPattern(canvas: any, transform?: IMatrixData, repeat?: boolean,): CanvasPattern {
-    let style = Platform.canvas.createPattern(canvas, repeat ? 'repeat' : 'no-repeat')
-    if (transform) {
-        const { a, b, c, d, e, f } = transform
-        style.setTransform(new DOMMatrix([a, b, c, d, e, f]))
-    }
-    return style
-}

package/src/paint/linear.ts

@@ -1,33 +0,0 @@
-import { IObject, IBoundsData } from '@leafer/interface'
-import { Platform } from '@leafer/core'
-
-import { IGradientPaint, ILeafPaint, IColorStop } from '@leafer-ui/interface'
-import { ColorConvert } from '@leafer-ui/color'
-
-
-const defaultFrom = { x: 0.5, y: 0 }
-const defaultTo = { x: 0.5, y: 1 }
-
-export function linearGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint {
-
-    let { from, to, type, blendMode, opacity } = paint
-
-    from || (from = defaultFrom)
-    to || (to = defaultTo)
-
-    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)
-    applyStops(style, paint.stops, opacity)
-
-    const data: ILeafPaint = { type, style }
-    if (blendMode) data.blendMode = blendMode
-    return data
-
-}
-
-export function applyStops(gradient: IObject, stops: IColorStop[], opacity: number): void {
-    let stop: IColorStop
-    for (let i = 0, len = stops.length; i < len; i++) {
-        stop = stops[i]
-        gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity))
-    }
-}

package/src/paint/radial.ts

@@ -1,44 +0,0 @@
-import { IBoundsData } from '@leafer/interface'
-import { Platform, PointHelper, MatrixHelper } from '@leafer/core'
-
-import { IGradientPaint, ILeafPaint, IMatrixData, IPointData } from '@leafer-ui/interface'
-
-import { applyStops } from './linear'
-
-
-const { set, getAngle, getDistance } = PointHelper
-const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper
-
-const defaultFrom = { x: 0.5, y: 0.5 }
-const defaultTo = { x: 0.5, y: 1 }
-
-const realFrom = {} as IPointData
-const realTo = {} as IPointData
-
-export function radialGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint {
-
-    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)
-
-    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 }
-    if (blendMode) data.blendMode = blendMode
-    return data
-
-}