@leafer-ui/paint 1.7.0 → 1.9.0

package/package.json

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

package/src/Compute.ts

@@ -1,6 +1,6 @@
-import { DataHelper } from '@leafer/core'
+import { DataHelper, isArray, isObject, isString, isUndefined } from '@leafer/core'
 
-import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap, IObject, IPaintAttr } from '@leafer-ui/interface'
+import { IUI, IPaint, ILeafPaint, IRGB, IBooleanMap, IObject, IPaintAttr, IStrokeComputedStyle } from '@leafer-ui/interface'
 import { ColorConvert, PaintImage, PaintGradient } from '@leafer-ui/draw'
 
 
@@ -11,12 +11,22 @@ export function compute(attrName: IPaintAttr, ui: IUI): void {
     const data = ui.__, leafPaints: ILeafPaint[] = []
 
     let paints: IPaint[] = data.__input[attrName], isAlphaPixel: boolean, isTransparent: boolean
-    if (!(paints instanceof Array)) paints = [paints]
+    if (!isArray(paints)) paints = [paints]
 
     recycleMap = PaintImage.recycleImage(attrName, data)
 
+    let maxChildStrokeWidth: number
+
     for (let i = 0, len = paints.length, item: ILeafPaint; i < len; i++) {
-        (item = getLeafPaint(attrName, paints[i], ui)) && leafPaints.push(item)
+        if (item = getLeafPaint(attrName, paints[i], ui)) {
+            leafPaints.push(item)
+
+            // 检测多个子描边样式和宽度
+            if (item.strokeStyle) {
+                maxChildStrokeWidth || (maxChildStrokeWidth = 1)
+                if (item.strokeStyle.strokeWidth) maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth as number)
+            }
+        }
     }
 
     (data as IObject)['_' + attrName] = leafPaints.length ? leafPaints : undefined
@@ -34,12 +44,13 @@ export function compute(attrName: IPaintAttr, ui: IUI): void {
     } else {
         stintSet(data, '__isAlphaPixelStroke', isAlphaPixel)
         stintSet(data, '__isTransparentStroke', isTransparent)
+        stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth)
     }
 }
 
 
 function getLeafPaint(attrName: string, paint: IPaint, ui: IUI): ILeafPaint {
-    if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0) return undefined
+    if (!isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined
 
     let data: ILeafPaint
     const { boxBounds } = ui.__layout
@@ -62,11 +73,18 @@ function getLeafPaint(attrName: string, paint: IPaint, ui: IUI): ILeafPaint {
             data = { type, style: ColorConvert.string(color, opacity) }
             break
         default:
-            if ((paint as IRGB).r !== undefined) data = { type: 'solid', style: ColorConvert.string(paint) }
+            if (!isUndefined((paint as IRGB).r)) data = { type: 'solid', style: ColorConvert.string(paint) }
     }
 
     if (data) {
-        if (typeof data.style === 'string' && hasTransparent(data.style)) data.isTransparent = true
+        // 描边样式
+        if (isString(data.style) && hasTransparent(data.style)) data.isTransparent = true
+        if (paint.style) {
+            if (paint.style.strokeWidth === 0) return undefined
+            data.strokeStyle = paint.style as IStrokeComputedStyle
+        }
+
+        if (paint.editing) data.editing = paint.editing
         if (paint.blendMode) data.blendMode = paint.blendMode
     }
 

package/src/Fill.ts

@@ -30,10 +30,14 @@ export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void
 
         canvas.fillStyle = item.style
 
-        if (item.transform) {
+        if (item.transform || item.scaleFixed) {
 
             canvas.save()
-            canvas.transform(item.transform)
+            if (item.transform) canvas.transform(item.transform)
+            if (item.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 (item.blendMode) canvas.blendMode = item.blendMode
             fillPathOrText(ui, canvas)
             canvas.restore()

package/src/Shape.ts

@@ -1,5 +1,5 @@
 import { IBoundsData, ILeaferCanvas, IRenderOptions, IMatrix } from '@leafer/interface'
-import { BoundsHelper } from '@leafer/core'
+import { BoundsHelper, Matrix } from '@leafer/core'
 
 import { IUI, ICachedShape } from '@leafer-ui/interface'
 
@@ -10,7 +10,7 @@ export function shape(ui: IUI, current: ILeaferCanvas, options: IRenderOptions):
     const canvas = current.getSameCanvas()
     const nowWorld = ui.__nowWorld
 
-    let bounds: IBoundsData, fitMatrix: IMatrix, shapeBounds: IBoundsData, worldCanvas: ILeaferCanvas
+    let bounds: IBoundsData, matrix: IMatrix, fitMatrix: IMatrix, shapeBounds: IBoundsData, worldCanvas: ILeaferCanvas
 
     let { scaleX, scaleY } = nowWorld
     if (scaleX < 0) scaleX = -scaleX
@@ -39,21 +39,22 @@ export function shape(ui: IUI, current: ILeaferCanvas, options: IRenderOptions):
         shapeBounds = getOuterOf(nowWorld, fitMatrix)
         bounds = getByMove(shapeBounds, -fitMatrix.e, -fitMatrix.f)
 
-        if (options.matrix) {
-            const { matrix } = options
-            fitMatrix.multiply(matrix)
-            fitScaleX *= matrix.scaleX
-            fitScaleY *= matrix.scaleY
-        }
-
-        options = { ...options, matrix: fitMatrix.withScale(fitScaleX, fitScaleY) }
+        const userMatrix = options.matrix
+        if (userMatrix) {
+            matrix = new Matrix(fitMatrix) // 仅用于渲染
+            matrix.multiply(userMatrix)
+            fitScaleX *= userMatrix.scaleX
+            fitScaleY *= userMatrix.scaleY
+        } else matrix = fitMatrix
 
+        matrix.withScale(fitScaleX, fitScaleY)
+        options = { ...options, matrix }
     }
 
     ui.__renderShape(canvas, options)
 
     return {
-        canvas, matrix: fitMatrix, bounds,
+        canvas, matrix, fitMatrix, bounds,
         worldCanvas, shapeBounds, scaleX, scaleY
     }
 }

package/src/Stroke.ts

@@ -1,9 +1,10 @@
 import { ILeaferCanvas } 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, copyWorld } from './StrokeText'
+import { strokeText, drawStrokesStyle } from './StrokeText'
 
 
 export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas): void {
@@ -39,11 +40,14 @@ export function strokes(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas):
 
 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()
+    if (isObject(stroke)) {
+        drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas)
+    } else {
+        canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data)
+        canvas.stroke()
+    }
 
     if (data.__useArrow) Paint.strokeArrow(stroke, ui, canvas)
-
 }
 
 function drawInside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas) {
@@ -70,7 +74,7 @@ function drawOutside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanv
         out.clipUI(data)
         out.clearWorld(renderBounds)
 
-        copyWorld(canvas, out, ui)
+        LeafHelper.copyCanvasByWorld(ui, canvas, out)
 
         out.recycle(ui.__nowWorld)
     }

package/src/StrokeText.ts

@@ -1,5 +1,5 @@
 import { ILeaferCanvas } from '@leafer/interface'
-import { Platform } from "@leafer/core"
+import { LeafHelper, isObject } from "@leafer/core"
 
 import { IUI, ITextRowData, ILeafPaint, IStrokeAlign, ILeafStrokePaint } from '@leafer-ui/interface'
 import { PaintImage } from "@leafer-ui/draw"
@@ -23,8 +23,12 @@ export function strokeText(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaf
 
 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)
+    if (isObject(stroke)) {
+        drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas)
+    } else {
+        canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data)
+        drawTextStroke(ui, canvas)
+    }
 }
 
 function drawAlign(stroke: string | ILeafPaint[], align: IStrokeAlign, ui: IUI, canvas: ILeaferCanvas): void {
@@ -36,18 +40,12 @@ function drawAlign(stroke: string | ILeafPaint[], align: IStrokeAlign, ui: IUI,
     fillText(ui, out)
     out.blendMode = 'normal'
 
-    copyWorld(canvas, out, ui)
+    LeafHelper.copyCanvasByWorld(ui, canvas, out)
 
     out.recycle(ui.__nowWorld)
 }
 
 
-export function copyWorld(canvas: ILeaferCanvas, out: ILeaferCanvas, ui: IUI): void {
-    if (ui.__worldFlipped || Platform.fullImageShadow) canvas.copyWorldByReset(out, ui.__nowWorld)
-    else canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds)
-}
-
-
 export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
 
     let row: ITextRowData, data = ui.__.__textDrawData
@@ -67,15 +65,21 @@ export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
 
 }
 
-export function drawStrokesStyle(strokes: ILeafStrokePaint[], isText: boolean, ui: IUI, canvas: ILeaferCanvas): void {
+export function drawStrokesStyle(strokes: ILeafStrokePaint[], strokeWidthScale: number, isText: boolean, ui: IUI, canvas: ILeaferCanvas): void {
     let item: ILeafStrokePaint
+    const data = ui.__, { __hasMultiStrokeStyle } = data
+    __hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data)
+
     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.style) {
-            canvas.strokeStyle = item.style
+            if (__hasMultiStrokeStyle) {
+                const { strokeStyle } = item
+                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)