@leafer-ui/paint 1.9.12 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.9.12",
+  "version": "1.10.1",
   "description": "@leafer-ui/paint",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.9.12",
-    "@leafer-ui/draw": "1.9.12"
+    "@leafer/core": "1.10.1",
+    "@leafer-ui/draw": "1.10.1"
   },
   "devDependencies": {
-    "@leafer/interface": "1.9.12",
-    "@leafer-ui/interface": "1.9.12"
+    "@leafer/interface": "1.10.1",
+    "@leafer-ui/interface": "1.10.1"
   }
 }

package/src/Compute.ts

@@ -32,61 +32,66 @@ export function compute(attrName: IPaintAttr, ui: IUI): void {
     (data as IObject)['_' + attrName] = leafPaints.length ? leafPaints : undefined
 
     if (leafPaints.length) {
+
         if (leafPaints.every(item => item.isTransparent)) {
             if (leafPaints.some(item => item.image)) isAlphaPixel = true
             isTransparent = true
         }
-    }
 
-    if (attrName === 'fill') {
-        stintSet(data, '__isAlphaPixelFill', isAlphaPixel)
-        stintSet(data, '__isTransparentFill', isTransparent)
+        if (attrName === 'fill') {
+            stintSet(data, '__isAlphaPixelFill', isAlphaPixel)
+            stintSet(data, '__isTransparentFill', isTransparent)
+        } else {
+            stintSet(data, '__isAlphaPixelStroke', isAlphaPixel)
+            stintSet(data, '__isTransparentStroke', isTransparent)
+            stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth)
+        }
+
     } else {
-        stintSet(data, '__isAlphaPixelStroke', isAlphaPixel)
-        stintSet(data, '__isTransparentStroke', isTransparent)
-        stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth)
+        data.__removePaint(attrName, false)
     }
+
 }
 
 
 function getLeafPaint(attrName: string, paint: IPaint, ui: IUI): ILeafPaint {
     if (!isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined
 
-    let data: ILeafPaint
+    let leafPaint: ILeafPaint
     const { boxBounds } = ui.__layout
 
     switch (paint.type) {
         case 'image':
-            data = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url])
+            leafPaint = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url])
             break
         case 'linear':
-            data = PaintGradient.linearGradient(paint, boxBounds)
+            leafPaint = PaintGradient.linearGradient(paint, boxBounds)
             break
         case 'radial':
-            data = PaintGradient.radialGradient(paint, boxBounds)
+            leafPaint = PaintGradient.radialGradient(paint, boxBounds)
             break
         case 'angular':
-            data = PaintGradient.conicGradient(paint, boxBounds)
+            leafPaint = PaintGradient.conicGradient(paint, boxBounds)
             break
         case 'solid':
             const { type, color, opacity } = paint
-            data = { type, style: ColorConvert.string(color, opacity) }
+            leafPaint = { type, style: ColorConvert.string(color, opacity) }
             break
         default:
-            if (!isUndefined((paint as IRGB).r)) data = { type: 'solid', style: ColorConvert.string(paint) }
+            if (!isUndefined((paint as IRGB).r)) leafPaint = { type: 'solid', style: ColorConvert.string(paint) }
     }
 
-    if (data) {
+    if (leafPaint) {
+        // 原始paint
+        leafPaint.originPaint = paint
+
         // 描边样式
-        if (isString(data.style) && hasTransparent(data.style)) data.isTransparent = true
+        if (isString(leafPaint.style) && hasTransparent(leafPaint.style)) leafPaint.isTransparent = true
         if (paint.style) {
             if (paint.style.strokeWidth === 0) return undefined
-            data.strokeStyle = paint.style as IStrokeComputedStyle
+            leafPaint.strokeStyle = paint.style as IStrokeComputedStyle
         }
-
-        if (paint.editing) data.editing = paint.editing
-        if (paint.blendMode) data.blendMode = paint.blendMode
     }
 
-    return data
+    return leafPaint
 }

package/src/Fill.ts

@@ -1,28 +1,28 @@
-import { ILeaferCanvas } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 
-import { ILeafPaint, IUI } from '@leafer-ui/interface'
-import { PaintImage } from "@leafer-ui/draw"
+import { IImagePaint, ILeafPaint, IUI } from '@leafer-ui/interface'
+import { PaintImage, Paint } from "@leafer-ui/draw"
 
-import { fillText } from './FillText'
 
-
-export function fill(fill: string, ui: IUI, canvas: ILeaferCanvas): void {
+export function fill(fill: string, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
     canvas.fillStyle = fill
-    fillPathOrText(ui, canvas)
+    fillPathOrText(ui, canvas, renderOptions)
 }
 
 
-export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
-    let item: ILeafPaint
+export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
+    let item: ILeafPaint, originPaint: IImagePaint, countImage: number
     for (let i = 0, len = fills.length; i < len; i++) {
-        item = fills[i]
+        item = fills[i], originPaint = item.originPaint as IImagePaint
 
         if (item.image) {
 
-            if (PaintImage.checkImage(ui, canvas, item, !ui.__.__font)) continue
+            countImage ? countImage++ : countImage = 1
+
+            if (PaintImage.checkImage(item, !ui.__.__font, ui, canvas, renderOptions)) continue
 
             if (!item.style) {
-                if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(canvas, item.image) // 图片加载中或加载失败
+                if (countImage === 1 && item.image.isPlacehold) ui.drawImagePlaceholder(item, canvas, renderOptions) // 图片加载中或加载失败
                 continue
             }
 
@@ -30,27 +30,27 @@ export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void
 
         canvas.fillStyle = item.style
 
-        if (item.transform || item.scaleFixed) {
+        if (item.transform || originPaint.scaleFixed) {
 
             canvas.save()
             if (item.transform) canvas.transform(item.transform)
-            if (item.scaleFixed) {
+            if (originPaint.scaleFixed) {
                 const { scaleX, scaleY } = ui.getRenderScaleData(true)
-                if (item.scaleFixed === true || (item.scaleFixed === 'zoom-in' && scaleX > 1 && scaleY > 1)) canvas.scale(1 / scaleX, 1 / scaleY)
+                if (originPaint.scaleFixed === true || (originPaint.scaleFixed === 'zoom-in' && scaleX > 1 && scaleY > 1)) canvas.scale(1 / scaleX, 1 / scaleY)
             }
-            if (item.blendMode) canvas.blendMode = item.blendMode
-            fillPathOrText(ui, canvas)
+            if (originPaint.blendMode) canvas.blendMode = originPaint.blendMode
+            fillPathOrText(ui, canvas, renderOptions)
             canvas.restore()
 
         } else {
 
-            if (item.blendMode) {
+            if (originPaint.blendMode) {
 
-                canvas.saveBlendMode(item.blendMode)
-                fillPathOrText(ui, canvas)
+                canvas.saveBlendMode(originPaint.blendMode)
+                fillPathOrText(ui, canvas, renderOptions)
                 canvas.restoreBlendMode()
 
-            } else fillPathOrText(ui, canvas)
+            } else fillPathOrText(ui, canvas, renderOptions)
 
         }
 
@@ -58,6 +58,6 @@ export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void
 }
 
 
-export function fillPathOrText(ui: IUI, canvas: ILeaferCanvas): void {
-    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill())
+export function fillPathOrText(ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
+    ui.__.__font ? Paint.fillText(ui, canvas, renderOptions) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill())
 }

package/src/FillText.ts

@@ -1,9 +1,9 @@
-import { ILeaferCanvas } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 
 import { ITextRowData, IText } from '@leafer-ui/interface'
 
 
-export function fillText(ui: IText, canvas: ILeaferCanvas): void {
+export function fillText(ui: IText, canvas: ILeaferCanvas, _renderOptions: IRenderOptions): void {
 
     const data = ui.__, { rows, decorationY } = data.__textDrawData
     if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor

package/src/Stroke.ts

@@ -1,31 +1,29 @@
-import { ILeaferCanvas } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 import { LeafHelper, isObject } from "@leafer/core"
 
 import { IUI, ILeafPaint } from '@leafer-ui/interface'
 import { Paint } from '@leafer-ui/draw'
 
-import { strokeText, drawStrokesStyle } from './StrokeText'
 
-
-export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas): void {
+export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
     const data = ui.__
     if (!data.__strokeWidth) return
 
     if (data.__font) {
 
-        strokeText(stroke, ui, canvas)
+        Paint.strokeText(stroke, ui, canvas, renderOptions)
 
     } else {
 
         switch (data.strokeAlign) {
             case 'center':
-                drawCenter(stroke, 1, ui, canvas)
+                drawCenter(stroke, 1, ui, canvas, renderOptions)
                 break
             case 'inside':
-                drawInside(stroke, ui, canvas)
+                drawInside(stroke, ui, canvas, renderOptions)
                 break
             case 'outside':
-                drawOutside(stroke, ui, canvas)
+                drawOutside(stroke, ui, canvas, renderOptions)
                 break
         }
 
@@ -33,43 +31,43 @@ export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas): void {
 }
 
 
-export function strokes(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
-    stroke(strokes as any, ui, canvas)
+export function strokes(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
+    Paint.stroke(strokes as any, ui, canvas, renderOptions)
 }
 
 
-function drawCenter(stroke: string | ILeafPaint[], strokeWidthScale: number, ui: IUI, canvas: ILeaferCanvas) {
+function drawCenter(stroke: string | ILeafPaint[], strokeWidthScale: number, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions) {
     const data = ui.__
     if (isObject(stroke)) {
-        drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas)
+        Paint.drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas, renderOptions)
     } else {
         canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data)
         canvas.stroke()
     }
 
-    if (data.__useArrow) Paint.strokeArrow(stroke, ui, canvas)
+    if (data.__useArrow) Paint.strokeArrow(stroke, ui, canvas, renderOptions)
 }
 
-function drawInside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas) {
+function drawInside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions) {
     canvas.save()
     canvas.clipUI(ui)
 
-    drawCenter(stroke, 2, ui, canvas)
+    drawCenter(stroke, 2, ui, canvas, renderOptions)
     canvas.restore()
 }
 
-function drawOutside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas) {
+function drawOutside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions) {
     const data = ui.__
     if (data.__fillAfterStroke) {
 
-        drawCenter(stroke, 2, ui, canvas)
+        drawCenter(stroke, 2, ui, canvas, renderOptions)
 
     } else {
         const { renderBounds } = ui.__layout
         const out = canvas.getSameCanvas(true, true)
         ui.__drawRenderPath(out)
 
-        drawCenter(stroke, 2, ui, out)
+        drawCenter(stroke, 2, ui, out, renderOptions)
 
         out.clipUI(data)
         out.clearWorld(renderBounds)

package/src/StrokeText.ts

@@ -1,43 +1,41 @@
-import { ILeaferCanvas } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 import { LeafHelper, isObject } from "@leafer/core"
 
 import { IUI, ITextRowData, ILeafPaint, IStrokeAlign, ILeafStrokePaint } from '@leafer-ui/interface'
-import { PaintImage } from "@leafer-ui/draw"
+import { PaintImage, Paint } from "@leafer-ui/draw"
 
-import { fillText } from './FillText'
 
-
-export function strokeText(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
+export function strokeText(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
     switch (ui.__.strokeAlign) {
         case 'center':
-            drawCenter(stroke, 1, ui, canvas)
+            drawCenter(stroke, 1, ui, canvas, renderOptions)
             break
         case 'inside':
-            drawAlign(stroke, 'inside', ui, canvas)
+            drawAlign(stroke, 'inside', ui, canvas, renderOptions)
             break
         case 'outside':
-            ui.__.__fillAfterStroke ? drawCenter(stroke, 2, ui, canvas) : drawAlign(stroke, 'outside', ui, canvas)
+            ui.__.__fillAfterStroke ? drawCenter(stroke, 2, ui, canvas, renderOptions) : drawAlign(stroke, 'outside', ui, canvas, renderOptions)
             break
     }
 }
 
-function drawCenter(stroke: string | ILeafPaint[], strokeWidthScale: number, ui: IUI, canvas: ILeaferCanvas): void {
+function drawCenter(stroke: string | ILeafPaint[], strokeWidthScale: number, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
     const data = ui.__
     if (isObject(stroke)) {
-        drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas)
+        Paint.drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas, renderOptions)
     } else {
         canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data)
-        drawTextStroke(ui, canvas)
+        Paint.drawTextStroke(ui, canvas, renderOptions)
     }
 }
 
-function drawAlign(stroke: string | ILeafPaint[], align: IStrokeAlign, ui: IUI, canvas: ILeaferCanvas): void {
+function drawAlign(stroke: string | ILeafPaint[], align: IStrokeAlign, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
     const out = canvas.getSameCanvas(true, true)
     out.font = ui.__.__font
-    drawCenter(stroke, 2, ui, out)
+    drawCenter(stroke, 2, ui, out, renderOptions)
 
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in'
-    fillText(ui, out)
+    Paint.fillText(ui, out, renderOptions)
     out.blendMode = 'normal'
 
     LeafHelper.copyCanvasByWorld(ui, canvas, out)
@@ -46,7 +44,7 @@ function drawAlign(stroke: string | ILeafPaint[], align: IStrokeAlign, ui: IUI,
 }
 
 
-export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
+export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas, _renderOptions: IRenderOptions): void {
 
     let row: ITextRowData, data = ui.__.__textDrawData
     const { rows, decorationY } = data
@@ -65,7 +63,7 @@ export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
 
 }
 
-export function drawStrokesStyle(strokes: ILeafStrokePaint[], strokeWidthScale: number, isText: boolean, ui: IUI, canvas: ILeaferCanvas): void {
+export function drawStrokesStyle(strokes: ILeafStrokePaint[], strokeWidthScale: number, isText: boolean, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
     let item: ILeafStrokePaint
     const data = ui.__, { __hasMultiStrokeStyle } = data
     __hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data)
@@ -73,7 +71,7 @@ export function drawStrokesStyle(strokes: ILeafStrokePaint[], strokeWidthScale:
     for (let i = 0, len = strokes.length; i < len; i++) {
         item = strokes[i]
 
-        if (item.image && PaintImage.checkImage(ui, canvas, item, false)) continue
+        if (item.image && PaintImage.checkImage(item, false, ui, canvas, renderOptions)) continue
 
         if (item.style) {
             if (__hasMultiStrokeStyle) {
@@ -81,12 +79,12 @@ export function drawStrokesStyle(strokes: ILeafStrokePaint[], strokeWidthScale:
                 strokeStyle ? canvas.setStroke(item.style, data.__getRealStrokeWidth(strokeStyle) * strokeWidthScale, data, strokeStyle) : canvas.setStroke(item.style, data.__strokeWidth * strokeWidthScale, data)
             } else canvas.strokeStyle = item.style
 
-            if (item.blendMode) {
-                canvas.saveBlendMode(item.blendMode)
-                isText ? drawTextStroke(ui, canvas) : canvas.stroke()
+            if (item.originPaint.blendMode) {
+                canvas.saveBlendMode(item.originPaint.blendMode)
+                isText ? Paint.drawTextStroke(ui, canvas, renderOptions) : canvas.stroke()
                 canvas.restoreBlendMode()
             } else {
-                isText ? drawTextStroke(ui, canvas) : canvas.stroke()
+                isText ? Paint.drawTextStroke(ui, canvas, renderOptions) : canvas.stroke()
             }
         }
     }

package/src/index.ts

@@ -3,20 +3,24 @@ import { IPaintModule } from '@leafer-ui/interface'
 import { fill, fills, fillPathOrText } from './Fill'
 import { fillText } from './FillText'
 import { stroke, strokes } from './Stroke'
-import { strokeText, drawTextStroke } from './StrokeText'
+import { strokeText, drawTextStroke, drawStrokesStyle } from './StrokeText'
 import { shape } from './Shape'
 import { compute } from './Compute'
 
 
 export const PaintModule: IPaintModule = {
     compute,
+
     fill,
     fills,
     fillPathOrText,
     fillText,
+
     stroke,
     strokes,
     strokeText,
     drawTextStroke,
+    drawStrokesStyle,
+
     shape
 }