@leafer-ui/render 1.0.0-alpha.23 → 1.0.0-alpha.31

package/package.json

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

package/src/RectRender.ts

@@ -5,16 +5,17 @@ import { IRectRenderModule } from '@leafer-ui/interface'
 
 export const RectRender: IRectRenderModule = {
 
-    __drawFast(canvas: ILeaferCanvas, _options: IRenderOptions): void {
+    __drawFast(canvas: ILeaferCanvas, options: IRenderOptions): void {
 
-        const { width, height, fill, stroke } = this.__
-        canvas.smooth = false
+        const { width, height, fill, stroke, __drawAfterFill } = this.__
 
         if (fill) {
             canvas.fillStyle = fill
             canvas.fillRect(0, 0, width, height)
         }
 
+        if (__drawAfterFill) this.__drawAfterFill(canvas, options)
+
         if (stroke) {
 
             const { strokeAlign, strokeWidth } = this.__

package/src/TextRender.ts

@@ -1,6 +1,7 @@
 import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 
-import { ITextRenderModule, ITextRowData } from '@leafer-ui/interface'
+import { ITextRenderModule } from '@leafer-ui/interface'
+import { Paint } from '@leafer-ui/external'
 
 
 export const TextRender: ITextRenderModule = {
@@ -8,36 +9,17 @@ export const TextRender: ITextRenderModule = {
     __drawFast(canvas: ILeaferCanvas, _options: IRenderOptions): void {
 
         const { fill, stroke } = this.__
-        const { list, font, decorationY, decorationHeight } = this.__.__textDrawData
-
-        canvas.font = font
-        canvas.textBaseline = "alphabetic"
-
-        let item: ITextRowData
+        const { __font } = this.__
 
+        canvas.font = __font
 
         if (fill) {
             canvas.fillStyle = fill
-            for (let i = 0, len = list.length; i < len; i++) {
-                item = list[i]
-                canvas.fillText(item.text, item.x, item.y)
-
-                if (decorationY) canvas.fillRect(item.x, item.y + decorationY, item.width, decorationHeight)
-            }
+            Paint.drawText(this, canvas)
         }
 
-        if (stroke) {
-            canvas.strokeStyle = stroke
-            for (let i = 0, len = list.length; i < len; i++) {
-                item = list[i]
-                canvas.strokeText(item.text, item.x, item.y)
-
-                if (decorationY) canvas.strokeRect(item.x, item.y + decorationY, item.width, decorationHeight)
-            }
-        }
+        if (stroke) Paint.strokeText(this, canvas, stroke)
 
     }
 
 }
-
-TextRender.__draw = TextRender.__drawFast

package/src/UIRender.ts

@@ -8,7 +8,13 @@ export const UIRender: IUIRenderModule = {
 
     __updateChange(): void {
         let data = this.__
-        let complex = data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect
+
+        if (data.__useEffect) {
+            const { shadow, innerShadow, blur, backgroundBlur } = this.__
+            data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur)
+        }
+
+        let complex = data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect || data.blendMode !== 'pass-through'
 
         if (complex) {
             data.__complex = true
@@ -17,21 +23,29 @@ export const UIRender: IUIRenderModule = {
         }
     },
 
-    __drawFast(canvas: ILeaferCanvas, _options: IRenderOptions): void {
-        const { fill, stroke } = this.__
+    __drawFast(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        const { fill, stroke, __drawAfterFill } = this.__
 
         this.__drawRenderPath(canvas)
-
         if (fill) Paint.fill(this, canvas, fill)
+        if (__drawAfterFill) this.__drawAfterFill(canvas, options)
         if (stroke) Paint.stroke(this, canvas, stroke)
     },
 
     __draw(canvas: ILeaferCanvas, options: IRenderOptions): void {
+
         if (this.__.__complex) {
 
-            const { fill, stroke } = this.__
+            const { fill, stroke, __drawAfterFill, __font, __blendLayer } = this.__
+
+            let orginCanvas: ILeaferCanvas
+
+            if (__blendLayer) {
+                orginCanvas = canvas
+                canvas = canvas.getSameCanvas(true)
+            }
 
-            this.__drawRenderPath(canvas)
+            __font ? canvas.font = __font : this.__drawRenderPath(canvas)
 
             if (this.__.__useEffect) {
 
@@ -43,6 +57,8 @@ export const UIRender: IUIRenderModule = {
 
                 if (fill) this.__.__isFills ? Paint.fills(this, canvas, fill as ILeafPaint[]) : Paint.fill(this, canvas, fill)
 
+                if (__drawAfterFill) this.__drawAfterFill(canvas, options)
+
                 if (innerShadow) Effect.innerShadow(this, canvas, shape)
 
                 if (stroke) this.__.__isStrokes ? Paint.strokes(this, canvas, stroke as ILeafStrokePaint[]) : Paint.stroke(this, canvas, stroke)
@@ -53,7 +69,14 @@ export const UIRender: IUIRenderModule = {
             } else {
 
                 if (fill) this.__.__isFills ? Paint.fills(this, canvas, fill as ILeafPaint[]) : Paint.fill(this, canvas, fill)
+                if (__drawAfterFill) this.__drawAfterFill(canvas, options)
                 if (stroke) this.__.__isStrokes ? Paint.strokes(this, canvas, stroke as ILeafStrokePaint[]) : Paint.stroke(this, canvas, stroke)
+
+            }
+
+            if (orginCanvas) {
+                orginCanvas.copyWorldToInner(canvas, this.__world, this.__layout.renderBounds, this.__.blendMode)
+                canvas.recycle()
             }
 
 
@@ -69,18 +92,20 @@ export const UIRender: IUIRenderModule = {
 
         canvas.setWorld(this.__world, options.matrix)
 
-        const { fill, fills, stroke, strokes } = this.__
-        const { context } = canvas
+        const { fill, stroke, __font } = this.__
 
-        this.__drawRenderPath(canvas)
+        __font ? canvas.font = __font : this.__drawRenderPath(canvas)
 
-        if (fill || fills) {
-            context.fillStyle = '#000000'
-            context.fill()
+        if (fill) {
+            canvas.fillStyle = '#000000'
+            __font ? Paint.drawText(this, canvas) : canvas.fill()
         }
-        if (stroke || strokes) {
-            context.lineWidth = 2
-            context.stroke()
+        if (stroke) {
+            const { strokeWidth, strokeAlign } = this.__
+            if (strokeAlign !== 'inside') {
+                canvas.setStroke('#000000', strokeAlign === 'outside' ? strokeWidth * 2 : strokeWidth, this.__)
+                __font ? Paint.drawTextStroke(this, canvas) : canvas.stroke()
+            }
         }
     }
 

package/src/index.ts

@@ -1,4 +1,3 @@
 export { UIRender } from './UIRender'
-export { FrameRender } from './FrameRender'
 export { RectRender } from './RectRender'
 export { TextRender } from './TextRender'

package/src/FrameRender.ts

@@ -1,40 +0,0 @@
-import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
-
-import { IFrameRenderModule } from '@leafer-ui/interface'
-
-
-export const FrameRender: IFrameRenderModule = {
-
-    __render(canvas: ILeaferCanvas, options: IRenderOptions): void {
-
-        const { fill, stroke } = this.__
-
-        if (stroke) this.__.stroke = undefined
-
-        this.__renderRect(canvas, options)
-
-        const { clip } = this.__
-        if (clip) {
-            canvas.save()
-            canvas.clip()
-
-            this.__renderGroup(canvas, options)
-
-            canvas.restore()
-        } else {
-            this.__renderGroup(canvas, options)
-
-        }
-
-
-        if (stroke) {
-            this.__.stroke = stroke
-
-            if (fill) this.__.fill = undefined
-            this.__renderRect(canvas, options)
-            if (fill) this.__.fill = fill
-        }
-
-    }
-
-}

package/src/ImageRender.ts

@@ -1,12 +0,0 @@
-import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
-
-import { IImageRenderModule } from '@leafer-ui/interface'
-
-
-export const ImageRender: IImageRenderModule = {
-
-    __draw(_canvas: ILeaferCanvas, _options: IRenderOptions): void {
-        
-    }
-
-}