@leafer-ui/display 1.0.0-rc.23 → 1.0.0-rc.25

package/package.json

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

package/src/Box.ts

@@ -9,8 +9,8 @@ import { Rect } from './Rect'
 
 const rect = Rect.prototype
 const group = Group.prototype
-const bounds = {} as IBoundsData
-const { copy, add } = BoundsHelper
+const childrenRenderBounds = {} as IBoundsData
+const { copy, add, includes } = BoundsHelper
 
 @rewriteAble()
 @registerUI()
@@ -26,6 +26,8 @@ export class Box extends Group implements IBox {
     @affectRenderBoundsType('show')
     declare public overflow: IOverflow
 
+    public isOverflow: boolean
+
     constructor(data?: IBoxInputData) {
         super(data)
         this.__layout.renderChanged || this.__layout.renderChange()
@@ -38,9 +40,7 @@ export class Box extends Group implements IBox {
     public __updateRectRenderSpread(): number { return 0 }
 
     public __updateRenderSpread(): number {
-        const width = this.__updateRectRenderSpread()
-        const hide = this.__.__drawAfterFill = this.__.overflow === 'hide'
-        return (width || hide) ? width : -1
+        return this.__updateRectRenderSpread() || -1
     }
 
 
@@ -50,32 +50,45 @@ export class Box extends Group implements IBox {
     public __updateBoxBounds(): void {
         const data = this.__
 
-        if (data.__autoSide && this.children.length) {
-            if (this.leafer) this.leafer.layouter.addExtra(this)
-            super.__updateBoxBounds()
-            if (!data.__autoSize) {
-                const b = this.__layout.boxBounds
-                if (!data.__autoWidth) b.x = 0, b.width = data.width
-                if (!data.__autoHeight) b.y = 0, b.height = data.height
+        if (this.children.length) {
+            if (data.__autoSide) {
+                if (this.leafer && this.leafer.ready) this.leafer.layouter.addExtra(this)
+                super.__updateBoxBounds()
+                if (!data.__autoSize) {
+                    const b = this.__layout.boxBounds
+                    if (!data.__autoWidth) b.x = 0, b.width = data.width
+                    if (!data.__autoHeight) b.y = 0, b.height = data.height
+                }
+            } else {
+                this.__updateRectBoxBounds()
             }
+
+            if (data.flow) this.__updateContentBounds()
+
         } else {
             this.__updateRectBoxBounds()
         }
-
-        if (data.flow) this.__updateContentBounds()
     }
 
     @rewrite(rect.__updateStrokeBounds)
     public __updateStrokeBounds(): void { }
 
     public __updateRenderBounds(): void {
-        this.__updateRectRenderBounds()
-        if (!this.__.__drawAfterFill) {
-            const { renderBounds } = this.__layout
-            copy(bounds, renderBounds)
+        let isOverflow: boolean
+        const { renderBounds } = this.__layout
+
+        if (this.children.length) {
             super.__updateRenderBounds()
-            add(renderBounds, bounds)
+            copy(childrenRenderBounds, renderBounds)
+            this.__updateRectRenderBounds()
+
+            isOverflow = !includes(renderBounds, childrenRenderBounds) || undefined
+        } else {
+            this.__updateRectRenderBounds()
         }
+
+        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow)
+        if (isOverflow && !(this.__.__drawAfterFill = this.__.overflow === 'hide')) add(renderBounds, childrenRenderBounds)
     }
 
     @rewrite(rect.__updateRenderBounds)
@@ -102,16 +115,25 @@ export class Box extends Group implements IBox {
             this.__renderRect(canvas, options)
         } else {
             this.__renderRect(canvas, options)
-            this.__renderGroup(canvas, options)
+            if (this.children.length) this.__renderGroup(canvas, options)
         }
     }
 
     public __drawAfterFill(canvas: ILeaferCanvas, options: IRenderOptions): void {
-        canvas.save()
-        canvas.clip()
-        this.__renderGroup(canvas, options)
-        canvas.restore()
-        if (this.__.stroke) this.__drawRenderPath(canvas)
+        const { length } = this.children
+        if (this.isOverflow) {
+            canvas.save()
+            canvas.clip()
+            if (length) this.__renderGroup(canvas, options)
+            canvas.restore()
+        } else {
+            if (length) this.__renderGroup(canvas, options)
+        }
+
+        if (this.__.stroke && length) {
+            canvas.setWorld(this.__nowWorld)
+            this.__drawRenderPath(canvas)
+        }
     }
 
 }

package/src/Leafer.ts

@@ -1,4 +1,4 @@
-import { ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, IEventListenerId, ITimer, IValue, IObject, IControl, IPointData, ILeaferType, ICursorType, IBoundsData, INumber, IZoomType, IFourNumber, IBounds } from '@leafer/interface'
+import { ILeaferCanvas, IRenderer, ILayouter, ISelector, IWatcher, IInteraction, ILeaferConfig, ICanvasManager, IHitCanvasManager, IAutoBounds, IScreenSizeData, IResizeEvent, IEventListenerId, ITimer, IValue, IObject, IControl, IPointData, ILeaferType, ICursorType, IBoundsData, INumber, IZoomType, IFourNumber, IBounds, IClientPointData } from '@leafer/interface'
 import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, ImageManager, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, WaitHelper, WatchEvent, Bounds, LeafList } from '@leafer/core'
 
 import { ILeaferInputData, ILeaferData, IFunction, IUIInputData, ILeafer, IApp, IEditorBase } from '@leafer-ui/interface'
@@ -80,6 +80,7 @@ export class Leafer extends Group implements ILeafer {
 
     public get FPS(): number { return this.renderer ? this.renderer.FPS : 60 }
     public get cursorPoint(): IPointData { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 } }
+    public get clientBounds(): IBoundsData { return this.canvas && this.canvas.getClientBounds() }
     public leafs = 0
 
     public __eventIds: IEventListenerId[] = []
@@ -253,7 +254,7 @@ export class Leafer extends Group implements ILeafer {
             } else if (attrName === 'fill') {
                 this.__changeFill(newValue as string)
             } else if (attrName === 'hittable') {
-                this.canvas.hittable = newValue as boolean
+                if (!this.parent) this.canvas.hittable = newValue as boolean
             }
         }
         return super.__setAttr(attrName, newValue)
@@ -371,6 +372,11 @@ export class Leafer extends Group implements ILeafer {
     public getValidMove(moveX: number, moveY: number): IPointData { return { x: moveX, y: moveY } }
     public getValidScale(changeScale: number): number { return changeScale }
 
+
+    public getWorldPointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData {
+        return this.interaction && this.interaction.getLocal(clientPoint, updateClient)
+    }
+
     protected __checkUpdateLayout(): void {
         this.__layout.update()
     }

package/src/Line.ts

@@ -59,11 +59,12 @@ export class Line extends UI implements ILine { // tip: rewrited Polygon
 
     public __updatePath(): void {
 
-        const path: number[] = this.__.path = []
+        const data = this.__
+        const path: number[] = data.path = []
 
-        if (this.__.points) {
+        if (data.points) {
 
-            drawPoints(path, this.__.points, this.__.closed)
+            drawPoints(path, data.points, false, data.closed)
 
         } else {
 

package/src/Text.ts

@@ -59,7 +59,7 @@ export class Text extends UI implements IText {
     @boundsType(0)
     public letterSpacing: INumber | IUnitData
 
-    @boundsType({ type: 'percent', value: 150 } as IUnitData)
+    @boundsType({ type: 'percent', value: 1.5 } as IUnitData)
     public lineHeight: INumber | IUnitData
 
     @boundsType(0)

package/src/UI.ts

@@ -1,5 +1,5 @@
-import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, INumber, IBoolean, IString, IPathString, IExportFileType, IPointData, ICursorType, IMaskType, IEraserType, IValue, IWindingRule, IPathCreator, IFourNumber, IBoundsData, IFlowType, IGap, IWrap, IAxis, IConstraint, IAutoBoxData, IFlowBoxType, IPointGap, IFlowAlign, IFlowAxisAlign, IFindCondition, IAutoSize, IRangeSize, IAlign, IUnitPointData } from '@leafer/interface'
-import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, maskType, dataProcessor, registerUI, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType, PathConvert, eraserType, cursorType, autoLayoutType, pen, naturalBoundsType, pathInputType } from '@leafer/core'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, INumber, IBoolean, IString, IPathString, IExportFileType, IPointData, ICursorType, IMaskType, IEraserType, IValue, IWindingRule, IPathCreator, IFourNumber, IBoundsData, IFlowType, IGap, IFlowWrap, IAxis, IConstraint, IAutoBoxData, IFlowBoxType, IPointGap, IFlowAlign, IFlowAxisAlign, IFindCondition, IAutoSize, IRangeSize, IAlign, IUnitPointData } from '@leafer/interface'
+import { Leaf, PathDrawer, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, visibleType, sortType, maskType, dataProcessor, registerUI, useModule, rewrite, rewriteAble, UICreator, PathCorner, hitType, strokeType, PathConvert, eraserType, cursorType, autoLayoutType, pen, naturalBoundsType, pathInputType } from '@leafer/core'
 
 import { IUI, IShadowEffect, IBlurEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUIInputData, IExportOptions, IExportResult, IFill, IStroke, IArrowType, IFindUIMethod, ILeafer, IEditorConfig, IEditorConfigFunction, IEditToolFunction } from '@leafer-ui/interface'
 import { arrowType, effectType, stateType, zoomLayerType } from '@leafer-ui/decorator'
@@ -53,8 +53,8 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     @opacityType(1)
     public opacity: INumber
 
-    @opacityType(true)
-    public visible: IBoolean
+    @visibleType(true)
+    public visible: IBoolean | 0
 
 
     @stateType(false)
@@ -72,13 +72,10 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
 
 
     @maskType(false)
-    public mask: IMaskType
-
-    @surfaceType('pixel') // will remove
-    public maskType: IMaskType
+    public mask: IBoolean | IMaskType
 
     @eraserType(false)
-    public eraser: IEraserType
+    public eraser: IBoolean | IEraserType
 
 
     // position
@@ -167,10 +164,10 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public gap: IGap | IPointGap
 
     @boundsType('top-left')
-    public align: IFlowAlign | IFlowAxisAlign
+    public flowAlign: IFlowAlign | IFlowAxisAlign
 
     @boundsType(false)
-    public wrap: IWrap
+    public flowWrap: IFlowWrap
 
     @boundsType('box')
     public itemBox: IFlowBoxType
@@ -341,7 +338,9 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     }
 
     public get pen(): IPathCreator {
-        pen.set(this.path = this.__.path || [])
+        const { path } = this.__
+        pen.set(this.path = path || [])
+        if (!path) this.__drawPathByBox(pen)
         return pen
     }
 
@@ -350,7 +349,7 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
 
     public get editConfig(): IEditorConfig { return undefined }
 
-    public get editOuter(): string { return 'EditTool' }
+    public get editOuter(): string { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool' }
 
     public get editInner(): string { return 'PathEditor' }
 
@@ -393,13 +392,7 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public getPath(curve?: boolean, pathForRender?: boolean): IPathCommandData {
         this.__layout.update()
         let path = pathForRender ? this.__.__pathForRender : this.__.path
-        if (!path) {
-            const { width, height } = this.boxBounds
-            if (width || height) {
-                pen.set(path = [])
-                this.__drawPathByBox(pen)
-            }
-        }
+        if (!path) pen.set(path = []), this.__drawPathByBox(pen)
         return curve ? PathConvert.toCanvasData(path, true) : path
     }
 
@@ -408,6 +401,10 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     }
 
 
+    public load(): void {
+        this.__.__computePaint() // 手动加载图片
+    }
+
     public __onUpdateSize(): void {
         if (this.__.__input) {
             const data = this.__;

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { IString, INumber, IBoolean, IMaskType, IEraserType, IAlign, IUnitPointData, IPathCommandData, IPathString, IWindingRule, IFlowType, IFourNumber, IGap, IPointGap, IFlowAlign, IFlowAxisAlign, IWrap, IFlowBoxType, IAutoSize, IAutoBoxData, IConstraint, IRangeSize, IAxis, IBoundsData, IHitType, ICursorType, IPointData, IPathCreator, IValue, IFindCondition, ILeaferCanvas, IPathDrawer, IExportFileType, IPickOptions, IPickResult, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IBounds, IEventListenerId, ITimer, IControl, ILeaferType, IScreenSizeData, IResizeEvent, IObject, IZoomType, IRenderOptions, ILeaferImage, ICanvasContext2DSettings, ICanvasContext2D, IUnitData } from '@leafer/interface';
+import { IString, INumber, IBoolean, IMaskType, IEraserType, IAlign, IUnitPointData, IPathCommandData, IPathString, IWindingRule, IFlowType, IFourNumber, IGap, IPointGap, IFlowAlign, IFlowAxisAlign, IFlowWrap, IFlowBoxType, IAutoSize, IAutoBoxData, IConstraint, IRangeSize, IAxis, IBoundsData, IHitType, ICursorType, IPointData, IPathCreator, IValue, IFindCondition, ILeaferCanvas, IPathDrawer, IExportFileType, IPickOptions, IPickResult, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IBounds, IEventListenerId, ITimer, IControl, ILeaferType, IScreenSizeData, IResizeEvent, IObject, IZoomType, IClientPointData, IRenderOptions, ILeaferImage, ICanvasContext2DSettings, ICanvasContext2D, IUnitData } from '@leafer/interface';
 import { Leaf, LeafList } from '@leafer/core';
 import { IUI, IUIData, IUIInputData, ILeafer, IGroup, IBlendMode, IFill, IStroke, IStrokeAlign, IStrokeWidthString, IStrokeCap, IStrokeJoin, IDashPatternString, IArrowType, ICornerRadiusString, IShadowEffect, IShadowString, IBlurEffect, IGrayscaleEffect, IEditorConfig, IFindUIMethod, IExportOptions, IExportResult, IEditorConfigFunction, IEditToolFunction, IGroupData, IGroupInputData, ILeaferData, IApp, IEditorBase, IFunction, ILeaferInputData, IBox, IBoxData, IOverflow, IBoxInputData, IFrame, IFrameData, IFrameInputData, IRect, IRectData, IRectInputData, IEllipse, IEllipseData, IEllipseInputData, IPolygon, IPolygonData, IPolygonInputData, IStar, IStarData, IStarInputData, ILine, ILineData, ILineInputData, IImage, IImageData, IImageInputData, ICanvas, ICanvasData, ICanvasInputData, IText, ITextData, IHitType as IHitType$1, IFontWeight, ITextCase, ITextDecoration, ITextAlign, IVerticalAlign, ITextWrap, ITextDrawData, ITextInputData, IPath, IPathData, IPathInputData, IPen, IPenData, IPathCommandData as IPathCommandData$1, IPenInputData } from '@leafer-ui/interface';
 
@@ -17,14 +17,13 @@ declare class UI extends Leaf implements IUI {
     className: IString;
     blendMode: IBlendMode;
     opacity: INumber;
-    visible: IBoolean;
+    visible: IBoolean | 0;
     selected: IBoolean;
     disabled: IBoolean;
     locked: IBoolean;
     zIndex: INumber;
-    mask: IMaskType;
-    maskType: IMaskType;
-    eraser: IEraserType;
+    mask: IBoolean | IMaskType;
+    eraser: IBoolean | IEraserType;
     x: INumber;
     y: INumber;
     width: INumber;
@@ -48,8 +47,8 @@ declare class UI extends Leaf implements IUI {
     flow: IFlowType;
     padding: IFourNumber;
     gap: IGap | IPointGap;
-    align: IFlowAlign | IFlowAxisAlign;
-    wrap: IWrap;
+    flowAlign: IFlowAlign | IFlowAxisAlign;
+    flowWrap: IFlowWrap;
     itemBox: IFlowBoxType;
     inFlow: IBoolean;
     autoWidth: IAutoSize;
@@ -110,6 +109,7 @@ declare class UI extends Leaf implements IUI {
     findId(id: number | string): IUI;
     getPath(curve?: boolean, pathForRender?: boolean): IPathCommandData;
     getPathString(curve?: boolean, pathForRender?: boolean): IPathString;
+    load(): void;
     __onUpdateSize(): void;
     __updateRenderPath(): void;
     __drawRenderPath(canvas: ILeaferCanvas): void;
@@ -181,6 +181,7 @@ declare class Leafer extends Group implements ILeafer {
     lazyBounds: IBounds;
     get FPS(): number;
     get cursorPoint(): IPointData;
+    get clientBounds(): IBoundsData;
     leafs: number;
     __eventIds: IEventListenerId[];
     protected __startTimer: ITimer;
@@ -227,6 +228,7 @@ declare class Leafer extends Group implements ILeafer {
     zoom(_zoomType: IZoomType, _padding?: IFourNumber, _fixedScale?: boolean): IBoundsData;
     getValidMove(moveX: number, moveY: number): IPointData;
     getValidScale(changeScale: number): number;
+    getWorldPointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData;
     protected __checkUpdateLayout(): void;
     protected emitLeafer(type: string): void;
     protected __listenEvents(): void;
@@ -239,6 +241,7 @@ declare class Box extends Group implements IBox {
     get isBranchLeaf(): boolean;
     __: IBoxData;
     overflow: IOverflow;
+    isOverflow: boolean;
     constructor(data?: IBoxInputData);
     __updateStrokeSpread(): number;
     __updateRectRenderSpread(): number;