@leafer-ui/paint 1.0.0-rc.6 → 1.0.0-rc.8

package/package.json

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

package/src/Compute.ts

@@ -1,4 +1,4 @@
-import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap, IImagePaint } from '@leafer-ui/interface'
+import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap, IImagePaint, IObject } from '@leafer-ui/interface'
 import { ColorConvert, ImageManager } from '@leafer-ui/core'
 
 import { image } from "./paint/image/image"
@@ -26,7 +26,7 @@ export function compute(attrName: 'fill' | 'stroke', ui: IUI): void {
         if (item) value.push(item)
     }
 
-    data['_' + attrName] = value.length ? value : undefined
+    (data as IObject)['_' + attrName] = value.length ? value : undefined
 
     // check png / svg / webp
 

package/src/Stroke.ts

@@ -47,7 +47,7 @@ export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas, renderOpt
                 options.windingRule ? out.clip(options.windingRule) : out.clip()
                 out.clearWorld(ui.__layout.renderBounds)
 
-                if (ui.__hasMirror || renderOptions.matrix) {
+                if (ui.__worldFlipped || renderOptions.matrix) {
                     canvas.copyWorldByReset(out)
                 } else {
                     canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
@@ -102,7 +102,7 @@ export function strokes(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, r
                 options.windingRule ? out.clip(options.windingRule) : out.clip()
                 out.clearWorld(renderBounds)
 
-                if (ui.__hasMirror || renderOptions.matrix) {
+                if (ui.__worldFlipped || renderOptions.matrix) {
                     canvas.copyWorldByReset(out)
                 } else {
                     canvas.copyWorldToInner(out, ui.__world, renderBounds)

package/src/StrokeText.ts

@@ -36,7 +36,7 @@ function drawAlignStroke(align: IStrokeAlign, stroke: string | ILeafPaint[], isS
     fillText(ui, out)
     out.blendMode = 'normal'
 
-    if (ui.__hasMirror || renderOptions.matrix) {
+    if (ui.__worldFlipped || renderOptions.matrix) {
         canvas.copyWorldByReset(out)
     } else {
         canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)

package/src/paint/image/check.ts

@@ -1,11 +1,13 @@
 
 import { ILeaferCanvas } from '@leafer/interface'
-import { ImageManager } from '@leafer/core'
+import { ImageManager, Platform } from '@leafer/core'
 
 import { IUI, ILeafPaint } from '@leafer-ui/interface'
+import { Export } from '@leafer-ui/external'
 
 import { createPattern } from './pattern'
 
+const { abs } = Math
 
 export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, allowPaint?: boolean): boolean {
     const { scaleX, scaleY } = ui.__world
@@ -14,12 +16,18 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
         return false
     } else {
 
+        const { data } = paint
+
         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
+            if (!data.repeat) {
+                let { width, height } = data
+                width *= abs(scaleX) * canvas.pixelRatio
+                height *= abs(scaleY) * canvas.pixelRatio
+                if (data.scaleX) {
+                    width *= data.scaleX
+                    height *= data.scaleY
+                }
+                allowPaint = width * height > Platform.image.maxCacheSize
             } else {
                 allowPaint = false
             }
@@ -28,7 +36,6 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
         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)
@@ -36,7 +43,7 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
             canvas.restore()
             return true
         } else {
-            if (!paint.style) {
+            if (!paint.style || Export.running) {
                 createPattern(ui, paint, canvas.pixelRatio)
             } else {
                 if (!paint.patternTask) {

package/src/paint/image/data.ts

@@ -11,7 +11,7 @@ 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 { opacity, mode, offset, scale, rotation, blendMode, repeat } = paint
     const sameBox = box.width === width && box.height === height
     if (blendMode) leafPaint.blendMode = blendMode
 
@@ -30,6 +30,7 @@ export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: II
             break
         case 'repeat':
             if (!sameBox || scale || rotation) repeatMode(data, box, width, height, scale as number, rotation)
+            if (!repeat) data.repeat = 'repeat'
             break
         case 'fit':
         case 'cover':
@@ -40,4 +41,5 @@ export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: II
     data.width = width
     data.height = height
     if (opacity) data.opacity = opacity
+    if (repeat) data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat'
 }

package/src/paint/image/image.ts

@@ -65,6 +65,10 @@ function hasNaturalSize(ui: IUI, attrName: string, image: ISizeData): boolean {
         d.__naturalHeight = image.height
         if (!d.__getInput('width') || !d.__getInput('height')) {
             ui.forceUpdate('width')
+            if (ui.__proxyData) {
+                ui.setProxyAttr('width', ui.__.width)
+                ui.setProxyAttr('height', ui.__.height)
+            }
             return false
         }
     }

package/src/paint/image/pattern.ts

@@ -3,7 +3,7 @@ import { Platform, MatrixHelper } from '@leafer/core'
 import { IUI, ILeafPaint, IMatrixData } from '@leafer-ui/interface'
 
 
-const { get, scale: scaleHelper, copy } = MatrixHelper
+const { get, scale, copy } = MatrixHelper
 
 export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): boolean {
 
@@ -13,20 +13,16 @@ export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): b
 
     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
+        let imageScale: number, imageMatrix: IMatrixData, { width, height, scaleX: sx, scaleY: sy, opacity, transform, repeat } = data
 
         if (sx) {
-            matrix = get()
-            copy(matrix, transform)
-            scaleHelper(matrix, 1 / sx, 1 / sy)
+            imageMatrix = get()
+            copy(imageMatrix, transform)
+            scale(imageMatrix, 1 / sx, 1 / sy)
             scaleX *= sx
             scaleY *= sy
         }
@@ -36,15 +32,26 @@ export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): b
         width *= scaleX
         height *= scaleY
 
-        if (width > maxWidth || height > maxHeight) {
-            scale = Math.max(width / maxWidth, height / maxHeight)
+        const size = width * height
+
+        if (!repeat) {
+            if (size > Platform.image.maxCacheSize) return false // same as check()
+        }
+
+        let maxSize = Platform.image.maxPatternSize
+
+        if (!image.isSVG) {
+            const imageSize = image.width * image.height
+            if (maxSize > imageSize) maxSize = imageSize
         }
 
-        if (scale) {
-            scaleX /= scale
-            scaleY /= scale
-            width /= scale
-            height /= scale
+        if (size > maxSize) imageScale = Math.sqrt(size / maxSize)
+
+        if (imageScale) {
+            scaleX /= imageScale
+            scaleY /= imageScale
+            width /= imageScale
+            height /= imageScale
         }
 
         if (sx) {
@@ -53,23 +60,24 @@ export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): b
         }
 
         if (transform || scaleX !== 1 || scaleY !== 1) {
-            if (!matrix) {
-                matrix = get()
-                if (transform) copy(matrix, transform)
+            if (!imageMatrix) {
+                imageMatrix = get()
+                if (transform) copy(imageMatrix, transform)
             }
-            scaleHelper(matrix, 1 / scaleX, 1 / scaleY)
+            scale(imageMatrix, 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'))
+        const pattern = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity) as any, repeat || (Platform.origin.noRepeat || 'no-repeat'))
 
         try {
             if (paint.transform) paint.transform = null
-            if (matrix) style.setTransform ? style.setTransform(matrix) : paint.transform = matrix
+            if (imageMatrix) pattern.setTransform ? pattern.setTransform(imageMatrix) : paint.transform = imageMatrix
         } catch {
-            paint.transform = matrix
+            paint.transform = imageMatrix
         }
 
-        paint.style = style
+        paint.style = pattern
+        paint.patternId = id
 
         return true
 

package/src/paint/image/recycle.ts

@@ -1,11 +1,11 @@
-import { IBooleanMap, ILeaferImage } from '@leafer/interface'
+import { IBooleanMap, ILeaferImage, IObject } from '@leafer/interface'
 import { ImageManager } from '@leafer/core'
 
 import { IImagePaint, ILeafPaint, IUIData } from '@leafer-ui/interface'
 
 
 export function recycleImage(attrName: 'fill' | 'stroke', data: IUIData): IBooleanMap {
-    const paints = (attrName === 'fill' ? data._fill : data._stroke) as ILeafPaint[]
+    const paints = (data as IObject)['_' + attrName] as ILeafPaint[]
 
     if (paints instanceof Array) {