@leafer-ui/paint 1.0.0-rc.2 → 1.0.0-rc.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.21",
   "description": "@leafer-ui/paint",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -15,17 +15,18 @@
     "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-rc.2"
+    "@leafer/core": "1.0.0-rc.21",
+    "@leafer-ui/draw": "1.0.0-rc.21"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.2",
-    "@leafer-ui/interface": "1.0.0-rc.2"
+    "@leafer/interface": "1.0.0-rc.21",
+    "@leafer-ui/interface": "1.0.0-rc.21"
   }
 }

package/src/Compute.ts

@@ -1,34 +1,35 @@
-import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap } from '@leafer-ui/interface'
-import { ColorConvert } from '@leafer-ui/core'
-
-import { image } from "./paint/image/image"
-import { linearGradient } from './paint/linear'
-import { radialGradient } from "./paint/radial"
-import { conicGradient } from "./paint/conic"
-import { recycleImage } from './paint/image'
+import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap, IObject, IPaintAttr } from '@leafer-ui/interface'
+import { ColorConvert, PaintImage, PaintGradient } from '@leafer-ui/draw'
 
 
 let recycleMap: IBooleanMap
 
-export function compute(ui: IUI, attrName: string): void {
-    const value: ILeafPaint[] = []
-    let item: ILeafPaint
-    let paints = ui.__.__input[attrName] as IPaint[]
+export function compute(attrName: IPaintAttr, ui: IUI): void {
+    const data = ui.__, leafPaints: ILeafPaint[] = []
 
+    let paints: IPaint[] = data.__input[attrName], hasOpacityPixel: boolean
     if (!(paints instanceof Array)) paints = [paints]
 
-    recycleMap = recycleImage(ui.__, attrName)
+    recycleMap = PaintImage.recycleImage(attrName, data)
 
-    for (let i = 0, len = paints.length; i < len; i++) {
-        item = getLeafPaint(ui, paints[i], attrName)
-        if (item) value.push(item)
+    for (let i = 0, len = paints.length, item: ILeafPaint; i < len; i++) {
+        item = getLeafPaint(attrName, paints[i], ui)
+        if (item) leafPaints.push(item)
     }
 
-    ui.__['_' + attrName] = value.length ? value : undefined
+    (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
+    }
 }
 
 
-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
 
@@ -37,13 +38,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, !recycleMap || !recycleMap[paint.url])
+            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,24 +1,24 @@
 import { ILeaferCanvas } from '@leafer/interface'
 
 import { ILeafPaint, IUI } from '@leafer-ui/interface'
+import { PaintImage } from "@leafer-ui/draw"
 
-import { checkImage } from './paint/image'
 import { fillText } from './FillText'
 
 
-export function fill(ui: IUI, canvas: ILeaferCanvas, fill: string): void {
+export function fill(fill: string, ui: IUI, canvas: ILeaferCanvas): void {
     canvas.fillStyle = 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]
 
-        if (item.image && checkImage(ui, canvas, item, !__font)) continue
+        if (item.image && PaintImage.checkImage(ui, canvas, item, !__font)) continue
 
         if (item.style) {
 

package/src/Shape.ts

@@ -8,52 +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 { scaleX, 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, spread * scaleY) : 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

@@ -5,14 +5,14 @@ import { IUI, ILeafPaint } from '@leafer-ui/interface'
 import { strokeText, drawStrokesStyle } from './StrokeText'
 
 
-export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string): 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,14 +20,14 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string): void {
 
             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)
 
                 options.windingRule ? canvas.clip(options.windingRule) : canvas.clip()
                 canvas.stroke()
@@ -37,8 +37,8 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string): void {
                 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)
 
@@ -47,9 +47,13 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string): void {
                 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
         }
 
@@ -57,48 +61,53 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string): void {
 }
 
 
-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) {
 
-        strokeText(ui, canvas, strokes)
+        strokeText(strokes, ui, canvas)
 
     } else {
 
         switch (strokeAlign) {
 
             case 'center':
-                canvas.setStroke(undefined, strokeWidth, options)
-                drawStrokesStyle(ui, strokes, canvas)
+                canvas.setStroke(undefined, __strokeWidth, options)
+                drawStrokesStyle(strokes, false, ui, canvas)
                 break
 
             case 'inside':
                 canvas.save()
-                canvas.setStroke(undefined, strokeWidth * 2, options)
+                canvas.setStroke(undefined, __strokeWidth * 2, options)
                 options.windingRule ? canvas.clip(options.windingRule) : canvas.clip()
 
-                drawStrokesStyle(ui, 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(ui, strokes, out)
+                drawStrokesStyle(strokes, false, ui, out)
 
                 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
         }
 

package/src/StrokeText.ts

@@ -1,43 +1,48 @@
 import { ILeaferCanvas } from '@leafer/interface'
 
 import { IUI, ITextRowData, ILeafPaint, IStrokeAlign, ILeafStrokePaint } from '@leafer-ui/interface'
+import { PaintImage } from "@leafer-ui/draw"
 
 import { fillText } from './FillText'
-import { checkImage } from './paint/image'
 
 
-export function strokeText(ui: IUI, canvas: ILeaferCanvas, stroke: string | ILeafPaint[]): 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(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__)
-            isStrokes ? drawStrokesStyle(ui, stroke as ILeafPaint[], canvas, true) : drawTextStroke(ui, canvas)
+            isStrokes ? drawStrokesStyle(stroke as ILeafPaint[], true, ui, canvas) : drawTextStroke(ui, canvas)
             break
         case 'inside':
-            drawAlignStroke(ui, canvas, stroke, 'inside', isStrokes)
+            drawAlignStroke('inside', stroke, isStrokes, ui, canvas)
             break
         case 'outside':
-            drawAlignStroke(ui, canvas, stroke, 'outside', isStrokes)
+            drawAlignStroke('outside', stroke, isStrokes, ui, canvas)
             break
     }
 }
 
-function drawAlignStroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | ILeafPaint[], align: IStrokeAlign, isStrokes?: boolean): 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(isStrokes ? undefined : stroke, strokeWidth * 2, ui.__)
+    const out = canvas.getSameCanvas(true, true)
+    out.setStroke(isStrokes ? undefined : stroke, __strokeWidth * 2, ui.__)
 
     out.font = __font
-    isStrokes ? drawStrokesStyle(ui, stroke as ILeafPaint[], out, true) : drawTextStroke(ui, out)
+    isStrokes ? drawStrokesStyle(stroke as ILeafPaint[], true, ui, out) : drawTextStroke(ui, out)
 
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in'
     fillText(ui, out)
     out.blendMode = 'normal'
 
-    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)
 }
 
 export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
@@ -61,12 +66,12 @@ export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
 
 }
 
-export function drawStrokesStyle(ui: IUI, strokes: ILeafStrokePaint[], canvas: ILeaferCanvas, isText?: boolean): 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 && checkImage(ui, canvas, item, false)) continue
+        if (item.image && PaintImage.checkImage(ui, canvas, item, false)) continue
 
         if (item.style) {
 

package/src/index.ts

@@ -1,7 +1,21 @@
-export { fill, fills } from './Fill'
-export { fillText } from './FillText'
-export { stroke, strokes } from './Stroke'
-export { strokeText, drawTextStroke } from './StrokeText'
-export { shape } from './Shape'
-export { compute } from './Compute'
-export { recycleImage } from './paint/image'
+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

@@ -1,21 +1,5 @@
-import { ILeaferCanvas, IRenderOptions, IBooleanMap } from '@leafer/interface';
-import { IUI, ILeafPaint, ICachedShape, IUIData } from '@leafer-ui/interface';
+import { IPaintModule } from '@leafer-ui/interface';
 
-declare function fill(ui: IUI, canvas: ILeaferCanvas, fill: string): void;
-declare function fills(ui: IUI, canvas: ILeaferCanvas, fills: ILeafPaint[]): void;
+declare const PaintModule: IPaintModule;
 
-declare function fillText(ui: IUI, canvas: ILeaferCanvas): void;
-
-declare function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string): void;
-declare function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]): void;
-
-declare function strokeText(ui: IUI, canvas: ILeaferCanvas, stroke: string | ILeafPaint[]): void;
-declare function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void;
-
-declare function shape(ui: IUI, current: ILeaferCanvas, options: IRenderOptions): ICachedShape;
-
-declare function compute(ui: IUI, attrName: string): void;
-
-declare function recycleImage(data: IUIData, attrName: string): IBooleanMap;
-
-export { compute, drawTextStroke, fill, fillText, fills, recycleImage, shape, stroke, strokeText, strokes };
+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/check.ts

@@ -1,49 +0,0 @@
-
-import { ILeaferCanvas } from '@leafer/interface'
-import { ImageManager } from '@leafer/core'
-
-import { IUI, ILeafPaint } from '@leafer-ui/interface'
-
-import { createPattern } from './pattern'
-
-
-export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, allowPaint?: boolean): boolean {
-    const { scaleX, scaleY } = ui.__world
-
-    if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
-        return false
-    } else {
-
-        if (allowPaint) {
-            if (paint.image.isSVG && paint.data.mode !== 'repeat') {
-                let { width, height } = paint.data
-                width *= scaleX * canvas.pixelRatio
-                height *= scaleY * canvas.pixelRatio
-                allowPaint = width > 4096 || height > 4096
-            } else {
-                allowPaint = false
-            }
-        }
-
-        if (allowPaint) {
-            canvas.save()
-            canvas.clip()
-            const { data } = paint
-            if (paint.blendMode) canvas.blendMode = paint.blendMode
-            if (data.opacity) canvas.opacity *= data.opacity
-            if (data.transform) canvas.transform(data.transform)
-            canvas.drawImage(paint.image.view as any, 0, 0, data.width, data.height)
-            canvas.restore()
-            return true
-        } else {
-            if (!paint.style) {
-                createPattern(ui, paint, canvas.pixelRatio)
-            } else {
-                ImageManager.patternTasker.add(async () => {
-                    if (canvas.bounds.hit(ui.__world) && createPattern(ui, paint, canvas.pixelRatio)) ui.forceUpdate('surface')
-                }, 300)
-            }
-            return false
-        }
-    }
-}

package/src/paint/image/data.ts

@@ -1,43 +0,0 @@
-import { IBoundsData, ILeaferImage } from '@leafer/interface'
-import { MatrixHelper } from '@leafer/core'
-
-import { IImagePaint, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
-
-import { clipMode, fillOrFitMode, repeatMode } from './mode'
-
-
-const { get, translate } = MatrixHelper
-
-export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void {
-    let { width, height } = image
-
-    const { opacity, mode, offset, scale, rotation, blendMode } = paint
-    const sameBox = box.width === width && box.height === height
-    if (blendMode) leafPaint.blendMode = blendMode
-
-    const data: ILeafPaintPatternData = leafPaint.data = { mode }
-
-    switch (mode) {
-        case 'strench':
-            if (!sameBox) width = box.width, height = box.height
-            if (box.x || box.y) {
-                data.transform = get()
-                translate(data.transform, box.x, box.y)
-            }
-            break
-        case 'clip':
-            if (offset || scale || rotation) clipMode(data, box, offset, scale, rotation)
-            break
-        case 'repeat':
-            if (!sameBox || scale || rotation) repeatMode(data, box, width, height, scale as number, rotation)
-            break
-        case 'fit':
-        case 'cover':
-        default:
-            if (!sameBox || rotation) fillOrFitMode(data, mode, box, width, height, rotation)
-    }
-
-    data.width = width
-    data.height = height
-    if (opacity) data.opacity = opacity
-}

package/src/paint/image/image.ts

@@ -1,77 +0,0 @@
-import { IBoundsData, IImageEvent, ISizeData } from '@leafer/interface'
-import { ImageEvent, ImageManager } from '@leafer/core'
-
-import { IUI, IImagePaint, ILeafPaint } from '@leafer-ui/interface'
-
-import { createData } from './data'
-
-
-export function image(ui: IUI, attrName: string, attrValue: IImagePaint, box: IBoundsData, firstUse: boolean): ILeafPaint {
-    const leafPaint: ILeafPaint = { type: attrValue.type }
-    const image = leafPaint.image = ImageManager.get(attrValue)
-
-    const event: IImageEvent = (firstUse || image.loading) && { target: ui, image, attrName, attrValue }
-
-    if (image.ready) {
-
-        if (hasNaturalSize(ui, attrName, image)) createData(leafPaint, image, attrValue, box)
-
-        if (firstUse) {
-            emit(ImageEvent.LOAD, event)
-            emit(ImageEvent.LOADED, event)
-        }
-
-    } else if (image.error) {
-
-        if (firstUse) {
-            ui.forceUpdate('surface')
-            event.error = image.error
-            emit(ImageEvent.ERROR, event)
-        }
-
-    } else {
-
-        if (firstUse) emit(ImageEvent.LOAD, event)
-
-        leafPaint.loadId = image.load(
-            () => {
-                if (!ui.destroyed) {
-
-                    if (hasNaturalSize(ui, attrName, image)) {
-                        createData(leafPaint, image, attrValue, box)
-                        ui.forceUpdate('surface')
-                    }
-
-                    emit(ImageEvent.LOADED, event)
-                }
-            },
-            (error) => {
-                ui.forceUpdate('surface')
-                event.error = error
-                emit(ImageEvent.ERROR, event)
-            }
-        )
-
-    }
-
-    return leafPaint
-}
-
-
-function hasNaturalSize(ui: IUI, attrName: string, image: ISizeData): boolean {
-    if (attrName === 'fill' && !ui.__.__naturalWidth) {
-        const { __: d } = ui
-        d.__naturalWidth = image.width
-        d.__naturalHeight = image.height
-        if (!d.__getInput('width') || !d.__getInput('height')) {
-            ui.forceUpdate('width')
-            return false
-        }
-    }
-    return true
-}
-
-function emit(type: string, data: IImageEvent): void {
-    if (data.target.hasEvent(type)) data.target.emitEvent(new ImageEvent(type, data))
-}
-

package/src/paint/image/index.ts

@@ -1,4 +0,0 @@
-export { image } from './image'
-export { checkImage } from './check'
-export { recycleImage } from './recycle'
-

package/src/paint/image/mode.ts

@@ -1,62 +0,0 @@
-import { IBoundsData } from '@leafer/interface'
-import { MatrixHelper } from '@leafer/core'
-
-import { IMatrixData, IImagePaintMode, IPointData, ILeafPaintPatternData } from '@leafer-ui/interface'
-
-
-const { get, rotateOfOuter, translate, scaleOfOuter, scale: scaleHelper, rotate } = MatrixHelper
-
-export function fillOrFitMode(data: ILeafPaintPatternData, mode: IImagePaintMode, box: IBoundsData, width: number, height: number, rotation: number): void {
-    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)
-    data.scaleX = data.scaleY = scale
-    data.transform = transform
-}
-
-
-export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, offset: IPointData, scale: number | IPointData, rotation: number): void {
-    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)
-        data.scaleX = transform.a
-        data.scaleY = transform.d
-    }
-    if (rotation) rotate(transform, rotation)
-    data.transform = transform
-}
-
-
-export function repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width: number, height: number, scale: number, rotation: number): void {
-    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)
-        data.scaleX = data.scaleY = scale
-    }
-    data.transform = transform
-}

package/src/paint/image/pattern.ts

@@ -1,82 +0,0 @@
-import { Platform, MatrixHelper } from '@leafer/core'
-
-import { IUI, ILeafPaint, IMatrixData } from '@leafer-ui/interface'
-
-
-const { get, scale: scaleHelper, copy } = MatrixHelper
-
-export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): boolean {
-
-    let { scaleX, scaleY } = ui.__world
-
-    const id = scaleX + '-' + scaleY
-
-    if (paint.patternId !== id && !ui.destroyed) {
-
-        paint.patternId = id
-
-        scaleX = Math.abs(scaleX) // maybe -1
-        scaleY = Math.abs(scaleY)
-
-        const { image, data } = paint
-        const maxWidth = image.isSVG ? 4096 : Math.min(image.width, 4096)
-        const maxHeight = image.isSVG ? 4096 : Math.min(image.height, 4096)
-        let scale: number, matrix: IMatrixData, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data
-
-        if (sx) {
-            matrix = get()
-            copy(matrix, transform)
-            scaleHelper(matrix, 1 / sx, 1 / sy)
-            scaleX *= sx
-            scaleY *= sy
-        }
-
-        scaleX *= pixelRatio
-        scaleY *= pixelRatio
-        width *= scaleX
-        height *= scaleY
-
-        if (width > maxWidth || height > maxHeight) {
-            scale = Math.max(width / maxWidth, height / maxHeight)
-        }
-
-        if (scale) {
-            scaleX /= scale
-            scaleY /= scale
-            width /= scale
-            height /= scale
-        }
-
-        if (sx) {
-            scaleX /= sx
-            scaleY /= sy
-        }
-
-        if (transform || scaleX !== 1 || scaleY !== 1) {
-            if (!matrix) {
-                matrix = get()
-                if (transform) copy(matrix, transform)
-            }
-            scaleHelper(matrix, 1 / scaleX, 1 / scaleY)
-        }
-
-        const style = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity) as any, mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'))
-
-        try {
-            if (paint.transform) paint.transform = null
-            if (matrix) style.setTransform ? style.setTransform(matrix) : paint.transform = matrix
-        } catch {
-            paint.transform = matrix
-        }
-
-        paint.style = style
-
-        return true
-
-    } else {
-
-        return false
-
-    }
-
-}

package/src/paint/image/recycle.ts

@@ -1,41 +0,0 @@
-import { IBooleanMap, ILeaferImage } from '@leafer/interface'
-import { ImageManager } from '@leafer/core'
-
-import { IImagePaint, ILeafPaint, IUIData } from '@leafer-ui/interface'
-
-
-export function recycleImage(data: IUIData, attrName: string): IBooleanMap {
-    const paints = (attrName === 'fill' ? data._fill : data._stroke) as ILeafPaint[]
-
-    if (paints instanceof Array) {
-
-        let image: ILeaferImage, recycleMap: IBooleanMap, input: IImagePaint[], url: string
-
-        for (let i = 0, len = paints.length; i < len; i++) {
-
-            image = paints[i].image
-            url = image && image.url
-
-            if (url) {
-                if (!recycleMap) recycleMap = {}
-                recycleMap[url] = true
-                ImageManager.recycle(image)
-
-                // stop load
-                if (image.loading) {
-                    if (!input) {
-                        input = (data.__input && data.__input[attrName]) || []
-                        if (!(input instanceof Array)) input = [input]
-                    }
-                    image.unload(paints[i].loadId, !input.some((item: IImagePaint) => item.url === url))
-                }
-            }
-
-        }
-
-        return recycleMap
-
-    }
-
-    return null
-}

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/core'
-
-
-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
-
-}