@leafer-ui/display 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/display",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "@leafer-ui/display",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,14 +22,14 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0",
-    "@leafer-ui/data": "1.0.0",
-    "@leafer-ui/display-module": "1.0.0",
-    "@leafer-ui/decorator": "1.0.0",
-    "@leafer-ui/external": "1.0.0"
+    "@leafer/core": "1.0.2",
+    "@leafer-ui/data": "1.0.2",
+    "@leafer-ui/display-module": "1.0.2",
+    "@leafer-ui/decorator": "1.0.2",
+    "@leafer-ui/external": "1.0.2"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0",
-    "@leafer-ui/interface": "1.0.0"
+    "@leafer/interface": "1.0.2",
+    "@leafer-ui/interface": "1.0.2"
   }
 }

package/src/Box.ts

@@ -10,7 +10,7 @@ import { Rect } from './Rect'
 const rect = Rect.prototype
 const group = Group.prototype
 const childrenRenderBounds = {} as IBoundsData
-const { copy, add, includes } = BoundsHelper
+const { copy, add, includes, copyAndSpread } = BoundsHelper
 
 @rewriteAble()
 @registerUI()
@@ -50,18 +50,26 @@ export class Box extends Group implements IBox {
     @rewrite(rect.__updateBoxBounds)
     public __updateRectBoxBounds(): void { }
 
-    public __updateBoxBounds(): void {
+    public __updateBoxBounds(secondLayout?: boolean): void {
         const data = this.__
 
         if (this.children.length) {
             if (data.__autoSide) {
+
                 if (this.leafer && this.leafer.ready) this.leafer.layouter.addExtra(this)
                 super.__updateBoxBounds()
+
+                const { boxBounds } = this.__layout
+
                 if (!data.__autoSize) {
-                    const b = this.__layout.boxBounds
-                    if (!data.__autoWidth) b.height += b.y, b.width = data.width, b.x = b.y = 0
-                    if (!data.__autoHeight) b.width += b.x, b.height = data.height, b.y = b.x = 0
+                    if (data.__autoWidth) boxBounds.width += boxBounds.x, boxBounds.height = data.height, boxBounds.y = boxBounds.x = 0
+                    else boxBounds.height += boxBounds.y, boxBounds.width = data.width, boxBounds.x = boxBounds.y = 0
                 }
+
+                if (secondLayout && data.flow && data.padding) copyAndSpread(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : (data.__autoWidth ? 'width' : 'height'))
+
+                this.__updateNaturalSize()
+
             } else {
                 this.__updateRectBoxBounds()
             }
@@ -85,13 +93,13 @@ export class Box extends Group implements IBox {
             copy(childrenRenderBounds, renderBounds)
             this.__updateRectRenderBounds()
 
-            isOverflow = !includes(renderBounds, childrenRenderBounds) || undefined
+            isOverflow = !includes(renderBounds, childrenRenderBounds) || !this.pathInputed || !this.__.cornerRadius // 路径与圆角直接当溢出处理
         } else {
             this.__updateRectRenderBounds()
         }
 
         this.isOverflow !== isOverflow && (this.isOverflow = isOverflow)
-        if (isOverflow && !(this.__.__drawAfterFill = this.__.overflow === 'hide')) add(renderBounds, childrenRenderBounds)
+        if (!(this.__.__drawAfterFill = this.__.overflow === 'hide') && isOverflow) add(renderBounds, childrenRenderBounds)
     }
 
     @rewrite(rect.__updateRenderBounds)

package/src/Canvas.ts

@@ -1,5 +1,5 @@
 import { ILeaferCanvas, ILeaferCanvasConfig, INumber, IRenderOptions, IPointData, ICanvasContext2D, ICanvasContext2DSettings, IScreenSizeData, ISizeData } from '@leafer/interface'
-import { Creator, Matrix, Platform, dataProcessor, registerUI } from '@leafer/core'
+import { Creator, ImageEvent, LeaferImage, Matrix, dataProcessor, registerUI } from '@leafer/core'
 
 import { ICanvas, ICanvasData, ICanvasInputData, IUI } from '@leafer-ui/interface'
 import { CanvasData } from '@leafer-ui/data'
@@ -22,7 +22,7 @@ export class Canvas extends Rect implements ICanvas {
     @resizeType(100)
     declare public height?: INumber
 
-    @resizeType(Platform.devicePixelRatio)
+    @resizeType(1)
     declare public pixelRatio?: INumber
 
     @resizeType(true)
@@ -35,11 +35,25 @@ export class Canvas extends Rect implements ICanvas {
 
     public context?: ICanvasContext2D
 
+    public get ready(): boolean { return !this.url }
+
+    protected url?: string // 用于临时加载canvas的base64数据，完成后会置空
+
     constructor(data?: ICanvasInputData) {
         super(data)
         this.canvas = Creator.canvas(this.__ as ILeaferCanvasConfig)
         this.context = this.canvas.context
         this.__.__isCanvas = this.__.__drawAfterFill = true
+        if (data && data.url) this.drawImage(data.url)
+    }
+
+    public drawImage(url: string): void {
+        new LeaferImage({ url }).load((image: LeaferImage) => {
+            this.context.drawImage(image.view, 0, 0)
+            this.url = undefined
+            this.paint()
+            this.emitEvent(new ImageEvent(ImageEvent.LOADED, { image }))
+        })
     }
 
     public draw(ui: IUI, offset?: IPointData, scale?: number | IPointData, rotation?: number): void {
@@ -86,8 +100,7 @@ export class Canvas extends Rect implements ICanvas {
     public destroy(): void {
         if (this.canvas) {
             this.canvas.destroy()
-            this.canvas = null
-            this.context = null
+            this.canvas = this.context = null
         }
         super.destroy()
     }

package/src/Image.ts

@@ -34,4 +34,6 @@ export class Image extends Rect implements IImage {
         super.destroy()
     }
 
-}
+}
+
+export const MyImage = Image

package/src/Leafer.ts

@@ -120,7 +120,7 @@ export class Leafer extends Group implements ILeafer {
         )
 
         if (this.isApp) this.__setApp()
-        this.__checkAutoLayout(config)
+        this.__checkAutoLayout(config, parentApp)
         this.view = canvas.view
 
         // interaction / manager
@@ -241,9 +241,9 @@ export class Leafer extends Group implements ILeafer {
         this.__level = 1
     }
 
-    protected __checkAutoLayout(config: ILeaferConfig): void {
-        if (!config.width || !config.height) {
-            this.autoLayout = new AutoBounds(config)
+    protected __checkAutoLayout(config: ILeaferConfig, parentApp?: IApp): void {
+        if (!parentApp) {
+            if (!config.width || !config.height) this.autoLayout = new AutoBounds(config)
             this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this))
         }
     }
@@ -371,7 +371,10 @@ export class Leafer extends Group implements ILeafer {
     }
 
     // need view plugin
-    public zoom(_zoomType: IZoomType, _padding?: IFourNumber, _fixedScale?: boolean): IBoundsData { return undefined }
+    public zoom(_zoomType: IZoomType, _padding?: IFourNumber, _fixedScale?: boolean): IBoundsData {
+        return debug.error('need @leafer-in/view') as undefined
+    }
+
 
     // interaction window rewrite
     public getValidMove(moveX: number, moveY: number): IPointData { return { x: moveX, y: moveY } }
@@ -382,6 +385,18 @@ export class Leafer extends Group implements ILeafer {
         return this.interaction && this.interaction.getLocal(clientPoint, updateClient)
     }
 
+    public getPagePointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData {
+        return this.getPagePoint(this.getWorldPointByClient(clientPoint, updateClient))
+    }
+
+    public updateClientBounds(): void {
+        this.canvas && this.canvas.updateClientBounds()
+    }
+
+    // miniapp rewrite
+    public receiveEvent(_event: any): void { }
+
+
     protected __checkUpdateLayout(): void {
         this.__layout.update()
     }

package/src/Pen.ts

@@ -6,8 +6,7 @@ import { PenData } from '@leafer-ui/data'
 import { Group } from './Group'
 import { Path } from './Path'
 
-
-@useModule(PathCreator, ['set', 'beginPath', 'path'])
+@useModule(PathCreator, ['set', 'beginPath', 'path', 'paint'])
 @registerUI()
 export class Pen extends Group implements IPen {
 
@@ -79,10 +78,9 @@ export class Pen extends Group implements IPen {
     public clearPath(): Pen { return this }
 
     public paint(): void {
-        this.pathElement.forceUpdate('path')
+        if (!this.pathElement.__layout.boxChanged) this.pathElement.forceUpdate('path')
     }
 
-
 }
 
 function penPathType() {

package/src/Text.ts

@@ -96,14 +96,14 @@ export class Text extends UI implements IText {
     }
 
     public __drawHitPath(canvas: ILeaferCanvas): void {
-        const { __lineHeight, __baseLine, __textDrawData: data } = this.__
+        const { __lineHeight, fontSize, __baseLine, __textDrawData: data } = this.__
 
         canvas.beginPath()
 
         if (this.__.__letterSpacing < 0) {
             this.__drawPathByData(canvas)
         } else {
-            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight))
+            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight))
         }
     }
 

package/src/index.ts

@@ -11,7 +11,7 @@ export { Polygon } from './Polygon'
 export { Star } from './Star'
 export { Line } from './Line'
 
-export { Image } from './Image'
+export { Image, MyImage } from './Image'
 export { Canvas } from './Canvas'
 
 export { Text } from './Text'

package/types/index.d.ts

@@ -211,7 +211,7 @@ declare class Leafer extends Group implements ILeafer {
     protected __setApp(): void;
     protected __bindApp(app: IApp): void;
     __setLeafer(leafer: ILeafer): void;
-    protected __checkAutoLayout(config: ILeaferConfig): void;
+    protected __checkAutoLayout(config: ILeaferConfig, parentApp?: IApp): void;
     __setAttr(attrName: string, newValue: IValue): boolean;
     __getAttr(attrName: string): IValue;
     protected __changeCanvasSize(attrName: string, newValue: number): void;
@@ -231,6 +231,9 @@ declare class Leafer extends Group implements ILeafer {
     getValidMove(moveX: number, moveY: number): IPointData;
     getValidScale(changeScale: number): number;
     getWorldPointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData;
+    getPagePointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData;
+    updateClientBounds(): void;
+    receiveEvent(_event: any): void;
     protected __checkUpdateLayout(): void;
     protected emitLeafer(type: string): void;
     protected __listenEvents(): void;
@@ -250,7 +253,7 @@ declare class Box extends Group implements IBox {
     __updateRectRenderSpread(): number;
     __updateRenderSpread(): number;
     __updateRectBoxBounds(): void;
-    __updateBoxBounds(): void;
+    __updateBoxBounds(secondLayout?: boolean): void;
     __updateStrokeBounds(): void;
     __updateRenderBounds(): void;
     __updateRectRenderBounds(): void;
@@ -333,6 +336,7 @@ declare class Image extends Rect implements IImage {
     constructor(data?: IImageInputData);
     destroy(): void;
 }
+declare const MyImage: typeof Image;
 
 declare class Canvas extends Rect implements ICanvas {
     get __tag(): string;
@@ -344,7 +348,10 @@ declare class Canvas extends Rect implements ICanvas {
     contextSettings?: ICanvasContext2DSettings;
     canvas?: ILeaferCanvas;
     context?: ICanvasContext2D;
+    get ready(): boolean;
+    protected url?: string;
     constructor(data?: ICanvasInputData);
+    drawImage(url: string): void;
     draw(ui: IUI, offset?: IPointData, scale?: number | IPointData, rotation?: number): void;
     paint(): void;
     __drawAfterFill(canvas: ILeaferCanvas, _options: IRenderOptions): void;
@@ -422,4 +429,4 @@ declare class Pen extends Group implements IPen {
     paint(): void;
 }
 
-export { Box, Canvas, Ellipse, Frame, Group, Image, Leafer, Line, Path, Pen, Polygon, Rect, Star, Text, UI };
+export { Box, Canvas, Ellipse, Frame, Group, Image, Leafer, Line, MyImage, Path, Pen, Polygon, Rect, Star, Text, UI };