@leafer-ui/paint 1.6.1 → 1.6.3

package/package.json

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

package/src/Compute.ts

@@ -1,13 +1,16 @@
+import { DataHelper } from '@leafer/core'
+
 import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap, IObject, IPaintAttr } from '@leafer-ui/interface'
 import { ColorConvert, PaintImage, PaintGradient } from '@leafer-ui/draw'
 
 
 let recycleMap: IBooleanMap
+const { stintSet } = DataHelper, { hasTransparent } = ColorConvert
 
 export function compute(attrName: IPaintAttr, ui: IUI): void {
     const data = ui.__, leafPaints: ILeafPaint[] = []
 
-    let paints: IPaint[] = data.__input[attrName], hasOpacityPixel: boolean
+    let paints: IPaint[] = data.__input[attrName], isAlphaPixel: boolean, isTransparent: boolean
     if (!(paints instanceof Array)) paints = [paints]
 
     recycleMap = PaintImage.recycleImage(attrName, data)
@@ -19,28 +22,54 @@ export function compute(attrName: IPaintAttr, ui: IUI): void {
 
     (data as IObject)['_' + attrName] = leafPaints.length ? leafPaints : undefined
 
-    if (leafPaints.length && leafPaints[0].image) hasOpacityPixel = leafPaints[0].image.hasOpacityPixel
-    attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel
+    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)
+    } else {
+        stintSet(data, '__isAlphaPixelStroke', isAlphaPixel)
+        stintSet(data, '__isTransparentStroke', isTransparent)
+    }
 }
 
 
 function getLeafPaint(attrName: string, paint: IPaint, ui: IUI): ILeafPaint {
     if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0) return undefined
+
+    let data: ILeafPaint
     const { boxBounds } = ui.__layout
 
     switch (paint.type) {
-        case 'solid':
-            let { type, blendMode, color, opacity } = paint
-            return { type, blendMode, style: ColorConvert.string(color, opacity) }
         case 'image':
-            return PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url])
+            data = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url])
+            break
         case 'linear':
-            return PaintGradient.linearGradient(paint, boxBounds)
+            data = PaintGradient.linearGradient(paint, boxBounds)
+            break
         case 'radial':
-            return PaintGradient.radialGradient(paint, boxBounds)
+            data = PaintGradient.radialGradient(paint, boxBounds)
+            break
         case 'angular':
-            return PaintGradient.conicGradient(paint, boxBounds)
+            data = PaintGradient.conicGradient(paint, boxBounds)
+            break
+        case 'solid':
+            const { type, blendMode, color, opacity } = paint
+            data = { type, blendMode, style: ColorConvert.string(color, opacity) }
+            break
         default:
-            return (paint as IRGB).r !== undefined ? { type: 'solid', style: ColorConvert.string(paint) } : undefined
+            if ((paint as IRGB).r !== undefined) data = { type: 'solid', style: ColorConvert.string(paint) }
     }
+
+    if (data) {
+        if (typeof data.style === 'string' && hasTransparent(data.style)) data.isTransparent = true
+        if (paint.blendMode) data.blendMode = paint.blendMode
+    }
+
+    return data
 }

package/src/Fill.ts

@@ -8,46 +8,52 @@ import { fillText } from './FillText'
 
 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())
+    fillPathOrText(ui, canvas)
 }
 
 
 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 && PaintImage.checkImage(ui, canvas, item, !__font)) continue
+        if (item.image) {
 
-        if (item.style) {
+            if (PaintImage.checkImage(ui, canvas, item, !ui.__.__font)) continue
 
-            canvas.fillStyle = item.style
+            if (!item.style) {
+                if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(canvas, item.image) // 图片加载中或加载失败
+                continue
+            }
 
-            if (item.transform) {
-                canvas.save()
+        }
 
-                canvas.transform(item.transform)
+        canvas.fillStyle = item.style
 
-                if (item.blendMode) canvas.blendMode = item.blendMode
+        if (item.transform) {
 
-                __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
+            canvas.save()
+            canvas.transform(item.transform)
+            if (item.blendMode) canvas.blendMode = item.blendMode
+            fillPathOrText(ui, canvas)
+            canvas.restore()
 
-                canvas.restore()
-            } else {
-                if (item.blendMode) {
-                    canvas.saveBlendMode(item.blendMode)
+        } else {
 
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
+            if (item.blendMode) {
 
-                    canvas.restoreBlendMode()
-                } else {
+                canvas.saveBlendMode(item.blendMode)
+                fillPathOrText(ui, canvas)
+                canvas.restoreBlendMode()
 
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
+            } else fillPathOrText(ui, canvas)
 
-                }
-            }
         }
 
     }
+}
+
+
+export function fillPathOrText(ui: IUI, canvas: ILeaferCanvas): void {
+    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill())
 }

package/src/FillText.ts

@@ -1,12 +1,14 @@
 import { ILeaferCanvas } from '@leafer/interface'
 
-import { IUI, ITextRowData } from '@leafer-ui/interface'
+import { ITextRowData, IText } from '@leafer-ui/interface'
 
 
-export function fillText(ui: IUI, canvas: ILeaferCanvas): void {
+export function fillText(ui: IText, canvas: ILeaferCanvas): void {
 
-    let row: ITextRowData, data = ui.__.__textDrawData
-    const { rows, decorationY } = data
+    const data = ui.__, { rows, decorationY } = data.__textDrawData
+    if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor
+
+    let row: ITextRowData
 
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i]
@@ -16,7 +18,7 @@ export function fillText(ui: IUI, canvas: ILeaferCanvas): void {
     }
 
     if (decorationY) {
-        const { decorationColor, decorationHeight } = data
+        const { decorationColor, decorationHeight } = data.__textDrawData
         if (decorationColor) canvas.fillStyle = decorationColor
         rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)))
     }

package/src/Stroke.ts

@@ -1,59 +1,31 @@
 import { ILeaferCanvas } from '@leafer/interface'
+import { Platform } from '@leafer-ui/core'
 
 import { IUI, ILeafPaint } from '@leafer-ui/interface'
+import { Paint } from '@leafer-ui/external'
 
 import { strokeText, drawStrokesStyle } from './StrokeText'
 
 
 export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas): void {
-    const options = ui.__
-    const { __strokeWidth, strokeAlign, __font } = options
-    if (!__strokeWidth) return
+    const data = ui.__
+    if (!data.__strokeWidth) return
 
-    if (__font) {
+    if (data.__font) {
 
         strokeText(stroke, ui, canvas)
 
     } else {
 
-        switch (strokeAlign) {
-
+        switch (data.strokeAlign) {
             case 'center':
-
-                canvas.setStroke(stroke, __strokeWidth, options)
-                canvas.stroke()
-
-                if (options.__useArrow) strokeArrow(ui, canvas)
-
+                drawCenter(stroke, 1, ui, canvas)
                 break
-
             case 'inside':
-
-                canvas.save()
-                canvas.setStroke(stroke, __strokeWidth * 2, options)
-
-                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip()
-                canvas.stroke()
-
-                canvas.restore()
-
+                drawInside(stroke, ui, canvas)
                 break
-
             case 'outside':
-                const out = canvas.getSameCanvas(true, true)
-                out.setStroke(stroke, __strokeWidth * 2, options)
-
-                ui.__drawRenderPath(out)
-
-                out.stroke()
-
-                options.windingRule ? out.clip(options.windingRule) : out.clip()
-                out.clearWorld(ui.__layout.renderBounds)
-
-                if (ui.__worldFlipped) canvas.copyWorldByReset(out, ui.__nowWorld)
-                else canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds)
-
-                out.recycle(ui.__nowWorld)
+                drawOutside(stroke, ui, canvas)
                 break
         }
 
@@ -62,64 +34,47 @@ export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas): void {
 
 
 export function strokes(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
-    const options = ui.__
-    const { __strokeWidth, strokeAlign, __font } = options
-    if (!__strokeWidth) return
-
-    if (__font) {
-
-        strokeText(strokes, ui, canvas)
-
-    } else {
-
-        switch (strokeAlign) {
-
-            case 'center':
-                canvas.setStroke(undefined, __strokeWidth, options)
-                drawStrokesStyle(strokes, false, ui, canvas)
-
-                if (options.__useArrow) strokeArrow(ui, canvas)
-                break
+    stroke(strokes as any, ui, canvas)
+}
 
-            case 'inside':
-                canvas.save()
-                canvas.setStroke(undefined, __strokeWidth * 2, options)
-                options.windingRule ? canvas.clip(options.windingRule) : canvas.clip()
 
-                drawStrokesStyle(strokes, false, ui, canvas)
+function drawCenter(stroke: string | ILeafPaint[], strokeWidthScale: number, ui: IUI, canvas: ILeaferCanvas) {
+    const data = ui.__
+    canvas.setStroke(!data.__isStrokes && stroke as string, data.__strokeWidth * strokeWidthScale, data)
+    data.__isStrokes ? drawStrokesStyle(stroke as ILeafPaint[], false, ui, canvas) : canvas.stroke()
 
-                canvas.restore()
-                break
+    if (data.__useArrow) Paint.strokeArrow(stroke, ui, canvas)
 
-            case 'outside':
-                const { renderBounds } = ui.__layout
-                const out = canvas.getSameCanvas(true, true)
-                ui.__drawRenderPath(out)
+}
 
-                out.setStroke(undefined, __strokeWidth * 2, options)
+function drawInside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas) {
+    const data = ui.__
+    canvas.save()
+    data.windingRule ? canvas.clip(data.windingRule) : canvas.clip()
 
-                drawStrokesStyle(strokes, false, ui, out)
+    drawCenter(stroke, 2, ui, canvas)
+    canvas.restore()
+}
 
-                options.windingRule ? out.clip(options.windingRule) : out.clip()
-                out.clearWorld(renderBounds)
+function drawOutside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas) {
+    const data = ui.__
+    if (data.__fillAfterStroke) {
 
-                if (ui.__worldFlipped) canvas.copyWorldByReset(out, ui.__nowWorld)
-                else canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds)
+        drawCenter(stroke, 2, ui, canvas)
 
-                out.recycle(ui.__nowWorld)
-                break
-        }
+    } else {
+        const { renderBounds } = ui.__layout
+        const out = canvas.getSameCanvas(true, true)
+        ui.__drawRenderPath(out)
 
-    }
+        drawCenter(stroke, 2, ui, out)
 
-}
+        data.windingRule ? out.clip(data.windingRule) : out.clip()
+        out.clearWorld(renderBounds)
 
+        if (ui.__worldFlipped || Platform.fullImageShadow) canvas.copyWorldByReset(out, ui.__nowWorld)
+        else canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds)
 
-function strokeArrow(ui: IUI, canvas: ILeaferCanvas): void {
-    if (ui.__.dashPattern) {  // fix: dashPattern Arrow
-        canvas.beginPath()
-        ui.__drawPathByData(canvas, ui.__.__pathForArrow)
-        canvas.dashPattern = null
-        canvas.stroke()
+        out.recycle(ui.__nowWorld)
     }
 }

package/src/StrokeText.ts

@@ -1,4 +1,5 @@
 import { ILeaferCanvas } from '@leafer/interface'
+import { Platform } from '@leafer-ui/core'
 
 import { IUI, ITextRowData, ILeafPaint, IStrokeAlign, ILeafStrokePaint } from '@leafer-ui/interface'
 import { PaintImage } from "@leafer-ui/draw"
@@ -7,41 +8,41 @@ import { fillText } from './FillText'
 
 
 export function strokeText(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
-    const { strokeAlign } = ui.__
-    const isStrokes = typeof stroke !== 'string'
-    switch (strokeAlign) {
+    switch (ui.__.strokeAlign) {
         case 'center':
-            canvas.setStroke(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__)
-            isStrokes ? drawStrokesStyle(stroke as ILeafPaint[], true, ui, canvas) : drawTextStroke(ui, canvas)
+            drawCenter(stroke, 1, ui, canvas)
             break
         case 'inside':
-            drawAlignStroke('inside', stroke, isStrokes, ui, canvas)
+            drawAlign(stroke, 'inside', ui, canvas)
             break
         case 'outside':
-            drawAlignStroke('outside', stroke, isStrokes, ui, canvas)
+            ui.__.__fillAfterStroke ? drawCenter(stroke, 2, ui, canvas) : drawAlign(stroke, 'outside', ui, canvas)
             break
     }
 }
 
-function drawAlignStroke(align: IStrokeAlign, stroke: string | ILeafPaint[], isStrokes: boolean, ui: IUI, canvas: ILeaferCanvas): void {
-    const { __strokeWidth, __font } = ui.__
+function drawCenter(stroke: string | ILeafPaint[], strokeWidthScale: number, ui: IUI, canvas: ILeaferCanvas): void {
+    const data = ui.__
+    canvas.setStroke(!data.__isStrokes && stroke as string, data.strokeWidth * strokeWidthScale, data)
+    data.__isStrokes ? drawStrokesStyle(stroke as ILeafPaint[], true, ui, canvas) : drawTextStroke(ui, canvas)
+}
 
+function drawAlign(stroke: string | ILeafPaint[], align: IStrokeAlign, ui: IUI, canvas: ILeaferCanvas): void {
     const out = canvas.getSameCanvas(true, true)
-    out.setStroke(isStrokes ? undefined : stroke, __strokeWidth * 2, ui.__)
-
-    out.font = __font
-    isStrokes ? drawStrokesStyle(stroke as ILeafPaint[], true, ui, out) : drawTextStroke(ui, out)
+    out.font = ui.__.__font
+    drawCenter(stroke, 2, ui, out)
 
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in'
     fillText(ui, out)
     out.blendMode = 'normal'
 
-    if (ui.__worldFlipped) canvas.copyWorldByReset(out, ui.__nowWorld)
+    if (ui.__worldFlipped || Platform.fullImageShadow) 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 {
 
     let row: ITextRowData, data = ui.__.__textDrawData

package/src/index.ts

@@ -1,6 +1,6 @@
 import { IPaintModule } from '@leafer-ui/interface'
 
-import { fill, fills } from './Fill'
+import { fill, fills, fillPathOrText } from './Fill'
 import { fillText } from './FillText'
 import { stroke, strokes } from './Stroke'
 import { strokeText, drawTextStroke } from './StrokeText'
@@ -12,6 +12,7 @@ export const PaintModule: IPaintModule = {
     compute,
     fill,
     fills,
+    fillPathOrText,
     fillText,
     stroke,
     strokes,