@leafer-ui/paint 1.0.0-alpha.21 → 1.0.0-alpha.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "description": "@leafer-ui/paint",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "leaferjs"
   ],
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.21",
-    "@leafer-ui/interface": "1.0.0-alpha.21"
+    "@leafer/interface": "1.0.0-alpha.23",
+    "@leafer-ui/interface": "1.0.0-alpha.23"
   }
 }

package/src/Compute.ts

@@ -0,0 +1,48 @@
+import { IUI, IPaint, ILeafPaint } from '@leafer-ui/interface'
+import { stringColor } from '@leafer-ui/color'
+
+import { image } from "./paint/image"
+import { linearGradient } from './paint/linear'
+import { radialGradient } from "./paint/radial"
+import { conicGradient } from "./paint/conic"
+
+
+export function computeFill(ui: IUI): void {
+    compute(ui, 'fill')
+}
+
+export function computeStroke(ui: IUI): void {
+    compute(ui, 'stroke')
+}
+
+function compute(ui: IUI, attrName: string): void {
+    const paint: IPaint[] = ui.__.__input[attrName] as IPaint[]
+    if (typeof paint === 'object') {
+        let item: ILeafPaint
+        const value: ILeafPaint[] = []
+        for (let i = 0, len = paint.length; i < len; i++) {
+            item = getLeafPaint(ui, paint[i], attrName)
+            if (item) value.push(item)
+        }
+        ui.__['_' + attrName] = value.length ? value : undefined
+    }
+}
+
+function getLeafPaint(ui: IUI, paint: IPaint, attrName: string): ILeafPaint {
+    if (paint.visible === false || paint.opacity === 0) return undefined
+
+    const { width, height } = ui.__layout.boxBounds
+    switch (paint.type) {
+        case 'solid':
+            let { type, blendMode, color } = paint
+            return { type, blendMode, style: stringColor(color) }
+        case 'image':
+            return image(ui, attrName, paint, width, height)
+        case 'linear':
+            return linearGradient(paint, width, height)
+        case 'radial':
+            return radialGradient(paint, width, height)
+        case 'angular':
+            return conicGradient(paint, width, height)
+    }
+}

package/src/Fill.ts

@@ -15,6 +15,25 @@ export function fills(ui: IUI, canvas: ILeaferCanvas, fills: ILeafPaint[]): void
     for (let i = 0, len = fills.length; i < len; i++) {
         item = fills[i]
         canvas.fillStyle = item.style
-        canvas.fill(windingRule)
+
+        if (item.transform) {
+            canvas.save()
+
+            const { a, b, c, d, e, f } = item.transform
+            canvas.transform(a, b, c, d, e, f)
+
+            if (item.blendMode) canvas.blendMode = item.blendMode
+            canvas.fill(windingRule)
+
+            canvas.restore()
+        } else {
+            if (item.blendMode) {
+                canvas.saveBlendMode(item.blendMode)
+                canvas.fill(windingRule)
+                canvas.restoreBlendMode()
+            } else {
+                canvas.fill(windingRule)
+            }
+        }
     }
 }

package/src/Shape.ts

@@ -0,0 +1,48 @@
+import { IBoundsData, ILeaferCanvas, IRenderOptions, IMatrix } from '@leafer/interface'
+import { BoundsHelper } from '@leafer/math'
+
+import { IUI, ICachedShape } from '@leafer-ui/interface'
+
+
+export function shape(ui: IUI, current: ILeaferCanvas, options: IRenderOptions): ICachedShape {
+    const canvas = current.getSameCanvas()
+
+    let bounds: IBoundsData, matrix: IMatrix, shapeBounds: IBoundsData
+    let worldCanvas: ILeaferCanvas
+
+    const { __world } = ui
+    let { a: scaleX, d: scaleY } = __world
+
+    if (!current.bounds.includes(__world, options.matrix)) {
+
+        const { renderBoundsSpreadWidth } = ui.__layout
+        const worldClipBounds = BoundsHelper.getIntersectData(renderBoundsSpreadWidth ? BoundsHelper.getSpread(current.bounds, renderBoundsSpreadWidth * __world.a) : current.bounds, __world, options.matrix)
+        matrix = current.bounds.getFitMatrix(worldClipBounds)
+
+        if (matrix.a < 1) {
+            worldCanvas = current.getSameCanvas()
+            ui.__renderShape(worldCanvas, options)
+
+            scaleX *= matrix.a
+            scaleY *= matrix.d
+        }
+
+        shapeBounds = BoundsHelper.getOuterOf(__world, matrix)
+        bounds = BoundsHelper.getByMove(shapeBounds, -matrix.e, -matrix.f)
+
+        if (options.matrix) matrix.multiply(options.matrix)
+        options = { ...options, matrix }
+
+    } else {
+
+        bounds = shapeBounds = __world
+        worldCanvas = canvas
+    }
+
+    ui.__renderShape(canvas, options)
+
+    return {
+        canvas, matrix, bounds,
+        worldCanvas, shapeBounds, scaleX, scaleY
+    }
+}

package/src/Stroke.ts

@@ -38,7 +38,7 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object):
             out.clip(options.windingRule)
             out.clearWorld(ui.__layout.renderBounds)
 
-            canvas.copyWorldToLocal(out, ui.__world, ui.__layout.renderBounds)
+            canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
             out.recycle()
             break
     }
@@ -78,16 +78,31 @@ export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]):
             out.clip(options.windingRule)
             out.clearWorld(renderBounds)
 
-            canvas.copyWorldToLocal(out, ui.__world, renderBounds)
+            canvas.copyWorldToInner(out, ui.__world, renderBounds)
             out.recycle()
             break
     }
-
 }
 
 function drawStrokesStyle(strokes: ILeafStrokePaint[], canvas: ILeaferCanvas): void {
     strokes.forEach((item: ILeafStrokePaint) => {
         canvas.strokeStyle = item.style
-        canvas.stroke()
+
+        // if (item.transform) {
+        //     canvas.save()
+        //     if (item.blendMode) canvas.blendMode = item.blendMode
+        //     const { a, b, c, d, e, f } = item.transform
+        //     canvas.transform(a, b, c, d, e, f)
+        //     canvas.stroke()
+        //     canvas.restore()
+        // } else {
+        if (item.blendMode) {
+            canvas.saveBlendMode(item.blendMode)
+            canvas.stroke()
+            canvas.restoreBlendMode()
+        } else {
+            canvas.stroke()
+        }
+        //}
     })
 }

package/src/index.ts

@@ -1,3 +1,5 @@
 export { fill, fills } from './Fill'
 export { stroke, strokes } from './Stroke'
+export { shape } from './Shape'
+export { computeFill, computeStroke } from './Compute'
 

package/src/paint/conic.ts

@@ -0,0 +1,46 @@
+import { IGradientPaint, ILeafPaint, IMatrixData, IPointData } from '@leafer-ui/interface'
+import { Platform, PointHelper, MatrixHelper } from '@leafer/core'
+import { applyStops } from './linear'
+
+
+const { set, getAngle } = PointHelper
+const { get, rotateOf, scaleOf } = MatrixHelper
+
+const defaultFrom = { x: 0.5, y: 0.5 }
+const defaultTo = { x: 0.5, y: 1 }
+
+const realFrom = {} as IPointData
+const realTo = {} as IPointData
+
+export function conicGradient(paint: IGradientPaint, width: number, height: number): ILeafPaint {
+
+    let { from, to, type, opacity, blendMode, stretch } = paint
+
+    from || (from = defaultFrom)
+    to || (to = defaultTo)
+
+    set(realFrom, from.x * width, from.y * height)
+    set(realTo, to.x * width, to.y * height)
+
+    const transform: IMatrixData = get()
+    const angle = getAngle(realFrom, realTo)
+
+    if (Platform.conicGradientRotate90) {
+        scaleOf(transform, realFrom, width / height * (stretch || 1), 1)
+        rotateOf(transform, realFrom, angle + 90)
+    } else {
+        scaleOf(transform, realFrom, 1, width / height * (stretch || 1))
+        rotateOf(transform, realFrom, angle)
+    }
+
+    const style = Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y)
+    applyStops(style, paint.stops, opacity)
+
+    return {
+        type,
+        blendMode,
+        style,
+        transform
+    }
+
+}

package/src/paint/image.ts

@@ -0,0 +1,112 @@
+import { IUI, IImagePaint, ILeafPaint, IMatrixData, IImagePaintMode, IPointData } from '@leafer-ui/interface'
+import { Platform, MatrixHelper, ImageEvent } from '@leafer/core'
+
+
+const { get, rotateOf, translate, scaleOf, scale: scaleHelper, rotate } = MatrixHelper
+
+export function image(ui: IUI, attrName: string, paint: IImagePaint, boxWidth: number, boxHeight: number): ILeafPaint {
+    let { type, blendMode } = paint
+    let leaferPaint: ILeafPaint = {
+        type,
+        blendMode,
+        style: 'rgba(255,255,255,0)'
+    }
+
+    const image = ui.leafer.imageManager.get(paint)
+
+    if (image.ready) {
+
+        let transform: IMatrixData
+        let { opacity, mode, offset, scale, rotation } = paint
+        let { width, height } = image
+        const sameBox = boxWidth === width && boxHeight === height
+
+        switch (mode) {
+            case 'strench':
+                if (!sameBox) width = boxWidth, height = boxHeight
+                break
+            case 'clip':
+                if (offset || scale || rotation) transform = getCropTransform(offset, scale, rotation)
+                break
+            case 'repeat':
+                if (!sameBox || scale || rotation) transform = getRepeatTransform(width, height, scale as number, rotation)
+                break
+            case 'fit':
+            case 'cover':
+            default:
+                if (!sameBox || rotation) transform = getFillOrFitTransform(mode, width, height, boxWidth, boxHeight, rotation)
+        }
+
+        leaferPaint.style = createPattern(image.getCanvas(width, height, opacity), transform, mode === 'repeat')
+
+    } else {
+
+        image.load(() => {
+            if (!ui.__.__getInput('width')) ui.width = image.width
+            if (!ui.__.__getInput('height')) ui.height = image.height
+            ui.__updateAttr('width')
+            ui.emitEvent(new ImageEvent(ImageEvent.LOADED, ui, image, attrName, paint))
+        }, (error) => {
+            ui.emitEvent(new ImageEvent(ImageEvent.ERROR, ui, image, attrName, paint, error))
+        })
+
+    }
+
+    return leaferPaint
+}
+
+function getCropTransform(offset: IPointData, scale: number | IPointData, rotation: number): IMatrixData {
+    const transform: IMatrixData = get()
+    if (offset) translate(transform, offset.x, offset.y)
+    if (scale) typeof scale === 'number' ? scaleHelper(transform, scale) : scaleHelper(transform, scale.x, scale.y)
+    if (rotation) rotate(transform, rotation)
+    return transform
+}
+
+function getFillOrFitTransform(mode: IImagePaintMode, imageWidth: number, imageHeight: number, boxWidth: number, boxHeight: number, rotation: number): IMatrixData {
+    const transform: IMatrixData = get()
+    const swap = rotation && rotation !== 180
+    const sw = boxWidth / (swap ? imageHeight : imageWidth)
+    const sh = boxHeight / (swap ? imageWidth : imageHeight)
+    const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh)
+    const x = (boxWidth - imageWidth * scale) / 2
+    const y = (boxHeight - imageHeight * scale) / 2
+    translate(transform, x, y)
+    scaleHelper(transform, scale)
+    if (rotation) {
+        const center = { x: boxWidth / 2, y: boxHeight / 2 }
+        rotateOf(transform, center, rotation)
+    }
+    return transform
+}
+
+
+function getRepeatTransform(imageWidth: number, imageHeight: number, scale: number, rotation: number): IMatrixData {
+    const transform = get()
+    if (rotation) {
+        rotate(transform, rotation)
+        switch (rotation) {
+            case 90:
+                translate(transform, imageHeight, 0)
+                break
+            case 180:
+                translate(transform, imageWidth, imageHeight)
+                break
+            case 270:
+                translate(transform, 0, imageWidth)
+                break
+        }
+    }
+    if (scale) scaleOf(transform, { x: 0, y: 0 }, scale)
+    return transform
+}
+
+
+function createPattern(canvas: any, transform?: IMatrixData, repeat?: boolean,): CanvasPattern {
+    let style = Platform.canvas.createPattern(canvas, repeat ? 'repeat' : 'no-repeat')
+    if (transform) {
+        const { a, b, c, d, e, f } = transform
+        style.setTransform(new DOMMatrix([a, b, c, d, e, f]))
+    }
+    return style
+}

package/src/paint/linear.ts

@@ -0,0 +1,35 @@
+import { IObject } from '@leafer/interface'
+import { Platform } from '@leafer/core'
+
+import { IGradientPaint, ILeafPaint, IColorStop } from '@leafer-ui/interface'
+import { stringColor } from '@leafer-ui/color'
+
+
+const defaultFrom = { x: 0.5, y: 0 }
+const defaultTo = { x: 0.5, y: 1 }
+
+export function linearGradient(paint: IGradientPaint, width: number, height: number): ILeafPaint {
+
+    let { from, to, type, blendMode, opacity } = paint
+
+    from || (from = defaultFrom)
+    to || (to = defaultTo)
+
+    const style = Platform.canvas.createLinearGradient(from.x * width, from.y * height, to.x * width, to.y * height)
+    applyStops(style, paint.stops, opacity)
+
+    return {
+        type,
+        blendMode,
+        style
+    }
+
+}
+
+export function applyStops(gradient: IObject, stops: IColorStop[], opacity: number): void {
+    let stop: IColorStop
+    for (let i = 0, len = stops.length; i < len; i++) {
+        stop = stops[i]
+        gradient.addColorStop(stop.offset, stringColor(stop.color, opacity))
+    }
+}

package/src/paint/radial.ts

@@ -0,0 +1,42 @@
+import { IGradientPaint, ILeafPaint, IMatrixData, IPointData } from '@leafer-ui/interface'
+import { Platform, PointHelper, MatrixHelper } from '@leafer/core'
+import { applyStops } from './linear'
+
+
+const { set, getAngle, getDistance } = PointHelper
+const { get, rotateOf, scaleOf } = MatrixHelper
+
+const defaultFrom = { x: 0.5, y: 0.5 }
+const defaultTo = { x: 0.5, y: 1 }
+
+const realFrom = {} as IPointData
+const realTo = {} as IPointData
+
+export function radialGradient(paint: IGradientPaint, width: number, height: number): ILeafPaint {
+
+    let { from, to, type, opacity, blendMode, stretch } = paint
+
+    from || (from = defaultFrom)
+    to || (to = defaultTo)
+
+    set(realFrom, from.x * width, from.y * height)
+    set(realTo, to.x * width, to.y * height)
+
+    let transform: IMatrixData
+    if (width !== height || stretch) {
+        transform = get()
+        scaleOf(transform, realFrom, width / height * (stretch || 1), 1)
+        rotateOf(transform, realFrom, getAngle(realFrom, realTo) + 90)
+    }
+
+    const style = Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo))
+    applyStops(style, paint.stops, opacity)
+
+    return {
+        type,
+        blendMode,
+        style,
+        transform
+    }
+
+}