@leafer-ui/paint 1.0.0-beta.9 → 1.0.0-rc.2

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-rc.2",
   "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",
@@ -19,11 +22,10 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-beta.9",
-    "@leafer-ui/color": "1.0.0-beta.9"
+    "@leafer/core": "1.0.0-rc.2"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.9",
-    "@leafer-ui/interface": "1.0.0-beta.9"
+    "@leafer/interface": "1.0.0-rc.2",
+    "@leafer-ui/interface": "1.0.0-rc.2"
   }
 }

package/src/Compute.ts

@@ -1,34 +1,33 @@
-import { IUI, IPaint, ILeafPaint, IRGB } from '@leafer-ui/interface'
-import { ColorConvert } from '@leafer-ui/color'
+import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap } from '@leafer-ui/interface'
+import { ColorConvert } from '@leafer-ui/core'
 
-import { image } from "./paint/image"
+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'
 
 
-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 {
+export function compute(ui: IUI, attrName: string): void {
+    const value: ILeafPaint[] = []
+    let item: ILeafPaint
     let paints = ui.__.__input[attrName] as IPaint[]
 
-    let item: ILeafPaint
-    const value: ILeafPaint[] = []
     if (!(paints instanceof Array)) paints = [paints]
 
+    recycleMap = recycleImage(ui.__, attrName)
+
     for (let i = 0, len = paints.length; i < len; i++) {
         item = getLeafPaint(ui, paints[i], attrName)
         if (item) value.push(item)
     }
+
     ui.__['_' + attrName] = value.length ? value : undefined
 }
 
+
 function getLeafPaint(ui: IUI, paint: IPaint, attrName: string): ILeafPaint {
     if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0) return undefined
     const { boxBounds } = ui.__layout
@@ -38,7 +37,7 @@ 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 image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url])
         case 'linear':
             return linearGradient(paint, boxBounds)
         case 'radial':

package/src/Fill.ts

@@ -2,43 +2,50 @@ import { ILeaferCanvas } from '@leafer/interface'
 
 import { ILeafPaint, IUI } from '@leafer-ui/interface'
 
-import { drawText } from './FillText'
+import { checkImage } from './paint/image'
+import { fillText } from './FillText'
 
 
-export function fill(ui: IUI, canvas: ILeaferCanvas, fill: string | object): void {
+export function fill(ui: IUI, canvas: ILeaferCanvas, fill: string): 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 {
     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 && 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

@@ -13,12 +13,14 @@ export function shape(ui: IUI, current: ILeaferCanvas, options: IRenderOptions):
     let worldCanvas: ILeaferCanvas
 
     const { __world } = ui
-    let { a: scaleX, d: scaleY } = __world
+    let { scaleX, scaleY } = __world
+    if (scaleX < 0) scaleX = -scaleX
+    if (scaleY < 0) scaleY = -scaleY
 
     if (!current.bounds.includes(__world, options.matrix)) {
 
         const { renderShapeSpread: spread } = ui.__layout
-        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX) : current.bounds, __world, options.matrix)
+        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX, spread * scaleY) : current.bounds, __world, options.matrix)
         matrix = current.bounds.getFitMatrix(worldClipBounds)
 
         if (matrix.a < 1) {

package/src/Stroke.ts

@@ -1,11 +1,11 @@
 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(ui: IUI, canvas: ILeaferCanvas, stroke: string): void {
     const options = ui.__
     const { strokeWidth, strokeAlign, __font } = options
     if (!strokeWidth) return
@@ -29,7 +29,7 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object):
                 canvas.save()
                 canvas.setStroke(stroke, strokeWidth * 2, options)
 
-                canvas.clip(options.windingRule)
+                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip()
                 canvas.stroke()
 
                 canvas.restore()
@@ -44,7 +44,7 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object):
 
                 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)
@@ -56,6 +56,7 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object):
     }
 }
 
+
 export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]): void {
     const options = ui.__
     const { strokeWidth, strokeAlign, __font } = options
@@ -63,7 +64,7 @@ export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]):
 
     if (__font) {
 
-        strokesText(ui, canvas, strokes)
+        strokeText(ui, canvas, strokes)
 
     } else {
 
@@ -71,15 +72,15 @@ export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]):
 
             case 'center':
                 canvas.setStroke(undefined, strokeWidth, options)
-                drawStrokesStyle(strokes, canvas)
+                drawStrokesStyle(ui, strokes, canvas)
                 break
 
             case 'inside':
                 canvas.save()
                 canvas.setStroke(undefined, strokeWidth * 2, options)
-                canvas.clip(options.windingRule)
+                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip()
 
-                drawStrokesStyle(strokes, canvas)
+                drawStrokesStyle(ui, strokes, canvas)
 
                 canvas.restore()
                 break
@@ -91,9 +92,9 @@ export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]):
 
                 out.setStroke(undefined, strokeWidth * 2, ui.__)
 
-                drawStrokesStyle(strokes, out)
+                drawStrokesStyle(ui, strokes, out)
 
-                out.clip(options.windingRule)
+                options.windingRule ? out.clip(options.windingRule) : out.clip()
                 out.clearWorld(renderBounds)
 
                 canvas.copyWorldToInner(out, ui.__world, renderBounds)
@@ -104,18 +105,3 @@ export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]):
     }
 
 }
-
-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,93 +1,45 @@
 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 { drawText } from './FillText'
+import { fillText } from './FillText'
+import { checkImage } from './paint/image'
 
 
-export function strokeText(ui: IUI, canvas: ILeaferCanvas, stroke: string | object): void {
+export function strokeText(ui: IUI, canvas: ILeaferCanvas, stroke: string | ILeafPaint[]): 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(ui, stroke as ILeafPaint[], canvas, true) : drawTextStroke(ui, canvas)
             break
         case 'inside':
-            drawAlignStroke(ui, canvas, stroke, 'inside')
+            drawAlignStroke(ui, canvas, stroke, 'inside', isStrokes)
             break
         case 'outside':
-            drawAlignStroke(ui, canvas, stroke, 'outside')
+            drawAlignStroke(ui, canvas, stroke, 'outside', isStrokes)
             break
     }
 }
 
-function drawAlignStroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object, align: IStrokeAlign): void {
+function drawAlignStroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | ILeafPaint[], align: IStrokeAlign, isStrokes?: boolean): void {
     const { strokeWidth, __font } = ui.__
 
     const out = canvas.getSameCanvas(true)
-    out.setStroke(stroke, strokeWidth * 2, ui.__)
+    out.setStroke(isStrokes ? undefined : stroke, strokeWidth * 2, ui.__)
 
     out.font = __font
-    drawTextStroke(ui, out)
+    isStrokes ? drawStrokesStyle(ui, stroke as ILeafPaint[], out, true) : 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
-    }
-}
-
-
-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)
-        }
-
-    })
-}
-
 export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
 
     let row: ITextRowData
@@ -108,3 +60,25 @@ export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
     }
 
 }
+
+export function drawStrokesStyle(ui: IUI, strokes: ILeafStrokePaint[], canvas: ILeaferCanvas, isText?: boolean): 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.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,7 @@
 export { fill, fills } from './Fill'
-export { drawText } from './FillText'
+export { fillText } from './FillText'
 export { stroke, strokes } from './Stroke'
-export { strokeText, strokesText, drawTextStroke } from './StrokeText'
+export { strokeText, drawTextStroke } from './StrokeText'
 export { shape } from './Shape'
-export { computeFill, computeStroke } from './Compute'
+export { compute } from './Compute'
+export { recycleImage } from './paint/image'

package/src/paint/image/check.ts

@@ -0,0 +1,49 @@
+
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,77 @@
+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

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

package/src/paint/image/mode.ts

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -2,7 +2,7 @@ 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'
+import { ColorConvert } from '@leafer-ui/core'
 
 
 const defaultFrom = { x: 0.5, y: 0 }

package/types/index.d.ts

@@ -0,0 +1,21 @@
+import { ILeaferCanvas, IRenderOptions, IBooleanMap } from '@leafer/interface';
+import { IUI, ILeafPaint, ICachedShape, IUIData } 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 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 };

package/src/paint/image.ts

@@ -1,136 +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)
-            }
-
-            createPattern(leaferPaint, image.getCanvas(width, height, opacity), transform, mode === 'repeat')
-
-        }
-
-    } else {
-
-        imageManager.load(image,
-            () => {
-                if (ui.leafer) {
-                    if (hasSize(ui, attrName, image)) ui.forceUpdate('width')
-                    if (ui.hasEvent(ImageEvent.LOADED)) ui.emitEvent(new ImageEvent(ImageEvent.LOADED, ui, image, attrName, paint))
-                }
-            },
-            (error) => {
-                if (ui.hasEvent(ImageEvent.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(paint: ILeafPaint, canvas: any, transform?: IMatrixData, repeat?: boolean): void {
-    let style = Platform.canvas.createPattern(canvas, repeat ? 'repeat' : 'no-repeat')
-    if (transform) style.setTransform ? style.setTransform(transform) : paint.transform = transform
-    paint.style = style
-}