@leafer-ui/paint 1.0.0-rc.3 → 1.0.0-rc.5

package/package.json

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

package/src/Compute.ts

@@ -1,5 +1,5 @@
-import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap } from '@leafer-ui/interface'
-import { ColorConvert } from '@leafer-ui/core'
+import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap, IImagePaint } from '@leafer-ui/interface'
+import { ColorConvert, ImageManager } from '@leafer-ui/core'
 
 import { image } from "./paint/image/image"
 import { linearGradient } from './paint/linear'
@@ -10,25 +10,41 @@ import { recycleImage } from './paint/image'
 
 let recycleMap: IBooleanMap
 
-export function compute(ui: IUI, attrName: string): void {
+export function compute(attrName: 'fill' | 'stroke', ui: IUI): void {
     const value: ILeafPaint[] = []
+    const data = ui.__
+
     let item: ILeafPaint
-    let paints = ui.__.__input[attrName] as IPaint[]
+    let paints = data.__input[attrName] as IPaint[]
 
     if (!(paints instanceof Array)) paints = [paints]
 
-    recycleMap = recycleImage(ui.__, attrName)
+    recycleMap = recycleImage(attrName, data)
 
     for (let i = 0, len = paints.length; i < len; i++) {
-        item = getLeafPaint(ui, paints[i], attrName)
+        item = getLeafPaint(attrName, paints[i], ui)
         if (item) value.push(item)
     }
 
-    ui.__['_' + attrName] = value.length ? value : undefined
+    data['_' + attrName] = value.length ? value : undefined
+
+    // check png / svg / webp
+
+    let isPixel
+    if (paints.length === 1) {
+        const paint = paints[0] as IImagePaint
+        if (paint.type === 'image') isPixel = ImageManager.isPixel(paint)
+    }
+
+    if (attrName === 'fill') {
+        data.__pixelFill = isPixel
+    } else {
+        data.__pixelStroke = isPixel
+    }
 }
 
 
-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
 

package/src/Fill.ts

@@ -6,13 +6,13 @@ 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++) {

package/src/Stroke.ts

@@ -1,18 +1,18 @@
-import { ILeaferCanvas } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 
 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, renderOptions: IRenderOptions): void {
     const options = ui.__
     const { strokeWidth, strokeAlign, __font } = options
     if (!strokeWidth) return
 
     if (__font) {
 
-        strokeText(ui, canvas, stroke)
+        strokeText(stroke, ui, canvas, renderOptions)
 
     } else {
 
@@ -47,7 +47,12 @@ 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)
+                if (ui.__hasMirror || renderOptions.matrix) {
+                    canvas.copyWorldByReset(out)
+                } else {
+                    canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
+                }
+
                 out.recycle()
 
                 break
@@ -57,14 +62,14 @@ 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, renderOptions: IRenderOptions): void {
     const options = ui.__
     const { strokeWidth, strokeAlign, __font } = options
     if (!strokeWidth) return
 
     if (__font) {
 
-        strokeText(ui, canvas, strokes)
+        strokeText(strokes, ui, canvas, renderOptions)
 
     } else {
 
@@ -72,7 +77,7 @@ export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]):
 
             case 'center':
                 canvas.setStroke(undefined, strokeWidth, options)
-                drawStrokesStyle(ui, strokes, canvas)
+                drawStrokesStyle(strokes, false, ui, canvas)
                 break
 
             case 'inside':
@@ -80,7 +85,7 @@ export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]):
                 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
@@ -92,12 +97,17 @@ export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]):
 
                 out.setStroke(undefined, strokeWidth * 2, ui.__)
 
-                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)
+                if (ui.__hasMirror || renderOptions.matrix) {
+                    canvas.copyWorldByReset(out)
+                } else {
+                    canvas.copyWorldToInner(out, ui.__world, renderBounds)
+                }
+
                 out.recycle()
                 break
         }

package/src/StrokeText.ts

@@ -1,4 +1,4 @@
-import { ILeaferCanvas } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 
 import { IUI, ITextRowData, ILeafPaint, IStrokeAlign, ILeafStrokePaint } from '@leafer-ui/interface'
 
@@ -6,37 +6,42 @@ 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, renderOptions?: IRenderOptions): 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, renderOptions)
             break
         case 'outside':
-            drawAlignStroke(ui, canvas, stroke, 'outside', isStrokes)
+            drawAlignStroke('outside', stroke, isStrokes, ui, canvas, renderOptions)
             break
     }
 }
 
-function drawAlignStroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | ILeafPaint[], align: IStrokeAlign, isStrokes?: boolean): void {
+function drawAlignStroke(align: IStrokeAlign, stroke: string | ILeafPaint[], isStrokes: boolean, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
     const { strokeWidth, __font } = ui.__
 
     const out = canvas.getSameCanvas(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)
+    if (ui.__hasMirror || renderOptions.matrix) {
+        canvas.copyWorldByReset(out)
+    } else {
+        canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
+    }
+
     out.recycle()
 }
 
@@ -61,7 +66,7 @@ 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]

package/src/paint/image/check.ts

@@ -39,9 +39,12 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
             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)
+                if (!paint.patternTask) {
+                    paint.patternTask = ImageManager.patternTasker.add(async () => {
+                        paint.patternTask = null
+                        if (canvas.bounds.hit(ui.__world) && createPattern(ui, paint, canvas.pixelRatio)) ui.forceUpdate('surface')
+                    }, 300)
+                }
             }
             return false
         }

package/src/paint/image/recycle.ts

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

package/types/index.d.ts

@@ -1,21 +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 fill(fill: string, ui: IUI, canvas: ILeaferCanvas): void;
+declare function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): 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 stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void;
+declare function strokes(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void;
 
-declare function strokeText(ui: IUI, canvas: ILeaferCanvas, stroke: string | ILeafPaint[]): void;
+declare function strokeText(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions?: IRenderOptions): 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 compute(attrName: 'fill' | 'stroke', ui: IUI): void;
 
-declare function recycleImage(data: IUIData, attrName: string): IBooleanMap;
+declare function recycleImage(attrName: 'fill' | 'stroke', data: IUIData): IBooleanMap;
 
 export { compute, drawTextStroke, fill, fillText, fills, recycleImage, shape, stroke, strokeText, strokes };