@leafer-ui/display 1.6.7 → 1.8.0

package/package.json

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

package/src/Box.ts

@@ -1,7 +1,7 @@
 import { ILeaferCanvas, IRenderOptions, IBoundsData, IBoolean, INumber } from '@leafer/interface'
 import { rewrite, rewriteAble, registerUI, BoundsHelper, dataProcessor, affectRenderBoundsType, dataType, boundsType, DataHelper } from '@leafer/core'
 
-import { IBox, IBoxData, IBoxInputData, IOverflow } from '@leafer-ui/interface'
+import { IBox, IBoxData, IBoxInputData, IGroup, IOverflow } from '@leafer-ui/interface'
 import { BoxData } from '@leafer-ui/data'
 
 import { Group } from './Group'
@@ -41,6 +41,8 @@ export class Box extends Group implements IBox {
 
     public isOverflow: boolean
 
+    public scrollBar?: IGroup
+
     constructor(data?: IBoxInputData) {
         super(data)
         this.__layout.renderChanged || this.__layout.renderChange()
@@ -61,10 +63,10 @@ export class Box extends Group implements IBox {
 
     // @leafer-in/flow will rewrite
     public __updateBoxBounds(_secondLayout?: boolean): void {
-        const data = this.__
-
         if (this.children.length && !this.pathInputed) {
 
+            const data = this.__
+
             if (data.__autoSide) {
 
                 if (data.__hasSurface) this.__extraUpdate() // Box自身存在样式，需要额外更新
@@ -95,23 +97,36 @@ export class Box extends Group implements IBox {
 
     public __updateRenderBounds(): void {
         let isOverflow: boolean
-        const { renderBounds } = this.__layout
 
         if (this.children.length) {
+            const data = this.__, { renderBounds, boxBounds } = this.__layout
+
             super.__updateRenderBounds()
             copy(childrenRenderBounds, renderBounds)
             this.__updateRectRenderBounds()
 
-            isOverflow = !includes(renderBounds, childrenRenderBounds)
-            if (isOverflow && this.__.overflow !== 'hide') add(renderBounds, childrenRenderBounds)
+            // 增加滚动逻辑
+            if (data.scrollY || data.scrollX) {
+                childrenRenderBounds.x += data.scrollX
+                childrenRenderBounds.y += data.scrollY
+            }
+
+            isOverflow = !includes(boxBounds, childrenRenderBounds)
+            if (isOverflow && data.overflow !== 'hide') add(renderBounds, childrenRenderBounds)
         } else this.__updateRectRenderBounds()
 
         DataHelper.stintSet(this, 'isOverflow', isOverflow)
+
+        this.__updateScrollBar()
     }
 
     @rewrite(rect.__updateRenderBounds)
     public __updateRectRenderBounds(): void { }
 
+    //  need rewrite
+    public __updateScrollBar(): void { }
+
+
     @rewrite(rect.__updateChange)
     public __updateRectChange(): void { }
 
@@ -135,13 +150,14 @@ export class Box extends Group implements IBox {
             this.__renderRect(canvas, options)
             if (this.children.length) this.__renderGroup(canvas, options)
         }
+        if (this.scrollBar) this.scrollBar.__render(canvas, options)
     }
 
     // in __drawAfterFill()
     public __drawContent(canvas: ILeaferCanvas, options: IRenderOptions): void {
         this.__renderGroup(canvas, options)
 
-        if (this.__.__hasStroke) { // 还原绘制路径
+        if (this.__.__useStroke || this.__.__useEffect) { // 还原绘制路径
             canvas.setWorld(this.__nowWorld)
             this.__drawRenderPath(canvas)
         }

package/src/Group.ts

@@ -27,6 +27,8 @@ export class Group extends UI implements IGroup {   // tip: rewrited Box
 
     declare public children: IUI[]
 
+    public childlessJSON?: boolean
+
     constructor(data?: IGroupInputData) {
         super(data)
     }
@@ -43,7 +45,7 @@ export class Group extends UI implements IGroup {   // tip: rewrited Box
 
     // data
 
-    public set(data: IUIInputData, transition?: ITransition | 'temp'): void {
+    override set(data: IUIInputData, transition?: ITransition | 'temp'): void {
         if (data) {
             if (data.children) {
                 const { children } = data
@@ -60,9 +62,9 @@ export class Group extends UI implements IGroup {   // tip: rewrited Box
         }
     }
 
-    public toJSON(options?: IJSONOptions): IUIJSONData {
+    override toJSON(options?: IJSONOptions): IUIJSONData {
         const data = super.toJSON(options)
-        data.children = this.children.map(child => child.toJSON(options))
+        if (!this.childlessJSON) data.children = this.children.map(child => child.toJSON(options))
         return data
     }
 

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, IClientPointData, ITransition } 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, IZoomOptions, IFourNumber, IBounds, IClientPointData, ITransition } from '@leafer/interface'
 import { AutoBounds, LayoutEvent, ResizeEvent, LeaferEvent, CanvasManager, ImageManager, Resource, DataHelper, Creator, Run, Debug, RenderEvent, registerUI, boundsType, canvasSizeAttrs, dataProcessor, WaitHelper, WatchEvent, Bounds, LeafList, Plugin, getBoundsData } from '@leafer/core'
 
 import { ILeaferInputData, ILeaferData, IFunction, IUIInputData, ILeafer, IApp, IEditorBase } from '@leafer-ui/interface'
@@ -385,7 +385,7 @@ export class Leafer extends Group implements ILeafer {
     }
 
     // need view plugin
-    public zoom(_zoomType: IZoomType, _padding?: IFourNumber, _fixedScale?: boolean, _transition?: ITransition): IBoundsData {
+    public zoom(_zoomType: IZoomType, _optionsOrPadding?: IZoomOptions | IFourNumber, _scroll?: 'x' | 'y' | boolean, _transition?: ITransition): IBoundsData {
         return Plugin.need('view')
     }
 
@@ -446,7 +446,7 @@ export class Leafer extends Group implements ILeafer {
                 Leafer.list.remove(this)
                 try {
                     this.stop()
-                    this.emitEvent(new LeaferEvent(LeaferEvent.END, this))
+                    this.emitLeafer(LeaferEvent.END)
                     this.__removeListenEvents()
 
                     this.__controllers.forEach(item => !(this.parent && item === this.interaction) && item.destroy())

package/src/Polygon.ts

@@ -53,9 +53,10 @@ export class Polygon extends UI implements IPolygon {
                 lineTo(path, rx + rx * sin((i * 2 * PI) / sides), ry - ry * cos((i * 2 * PI) / sides))
             }
 
+            closePath(path)
+
         }
 
-        closePath(path)
     }
 
     @rewrite(line.__updateRenderPath)

package/src/Text.ts

@@ -186,6 +186,11 @@ export class Text extends UI implements IText {
         super.__draw(canvas, options, originCanvas)
     }
 
+    override  __drawShape(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        if (options.shape) this.__box && this.__box.__drawShape(canvas, options)
+        super.__drawShape(canvas, options)
+    }
+
     override destroy(): void {
         if (this.boxStyle) this.boxStyle = null
         super.destroy()

package/src/UI.ts

@@ -1,7 +1,7 @@
 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, IObject, IScaleData, IUnitData, IPathCommandObject, ITransition, IFilter, ILeaferImage } 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, MathHelper, Plugin, DataHelper } from '@leafer/core'
+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, MathHelper, Plugin, DataHelper, affectRenderBoundsType } 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, IKeyframe, IAnimation, IAnimate, IStates, IStateName, IAnimateType, IStateStyle, IColorString } from '@leafer-ui/interface'
+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, IKeyframe, IAnimation, IAnimate, IStates, IStateName, IAnimateType, IStateStyle, IColorString, IAnimateList } from '@leafer-ui/interface'
 import { effectType, zoomLayerType } from '@leafer-ui/decorator'
 
 import { UIData } from '@leafer-ui/data'
@@ -143,6 +143,10 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public pixelRatio?: INumber
 
 
+    @affectRenderBoundsType(0)
+    public renderSpread?: INumber // 强行扩大渲染边界
+
+
     // path
     @pathInputType()
     public path?: IPathCommandData | IPathCommandObject[] | IPathString
@@ -235,13 +239,13 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
 
     // stroke
 
-    @strokeType()
+    @strokeType(undefined, true)
     public stroke?: IStroke
 
     @strokeType('inside')
     public strokeAlign?: IStrokeAlign
 
-    @strokeType(1)
+    @strokeType(1, true)
     public strokeWidth?: IFourNumber | IStrokeWidthString
 
     @strokeType(false)
@@ -376,10 +380,13 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public set scale(value: INumber | IPointData) { MathHelper.assignScale(this as IScaleData, value) }
     public get scale(): INumber | IPointData { return this.__.scale }
 
+    public get isAutoWidth(): boolean { const t = this.__; return t.__autoWidth || t.autoWidth as boolean }
+    public get isAutoHeight(): boolean { const t = this.__; return t.__autoHeight || t.autoHeight as boolean }
+
     public useFastShadow?: boolean // 将忽略 stroke 产生的阴影，只对单个 fill 有效
 
     public __box?: IUI // 背景box, 一般用于文本背景框
-    public __animate?: IAnimate
+    public __animate?: IAnimate | IAnimateList
 
     public get pen(): IPathCreator {
         const { path } = this.__
@@ -456,11 +463,11 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     }
 
     public __updateRenderPath(): void {
-        if (this.__.path) {
-            const data = this.__
+        const data = this.__
+        if (data.path) {
             data.__pathForRender = data.cornerRadius ? PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path
             if (data.__useArrow) PathArrow.addArrows(this, !data.cornerRadius)
-        }
+        } else data.__pathForRender && (data.__pathForRender = undefined)
     }
 
     public __drawRenderPath(canvas: ILeaferCanvas): void {

package/types/index.d.ts

@@ -1,6 +1,6 @@
-import { IString, INumber, IBoolean, IMaskType, IEraserType, IAlign, IUnitPointData, IPathCommandData, IPathCommandObject, IPathString, IWindingRule, IFlowType, IFourNumber, IGap, IPointGap, IFlowAlign, IFlowAxisAlign, IFlowWrap, IFlowBoxType, IAutoSize, IAutoBoxData, IConstraint, IRangeSize, IAxis, IBoundsData, IHitType, ICursorType, IFilter, ITransition, IUnitData, IObject, IPointData, IPathCreator, IValue, IFindCondition, ILeaferCanvas, IPathDrawer, ILeaferImage, IExportFileType, IJSONOptions, IPickOptions, IPickResult, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IBounds, IEventListenerId, ITimer, IControl, ILeaferType, IScreenSizeData, IResizeEvent, IZoomType, IClientPointData, IRenderOptions, ICanvasContext2DSettings, ICanvasContext2D } from '@leafer/interface';
+import { IString, INumber, IBoolean, IMaskType, IEraserType, IAlign, IUnitPointData, IPathCommandData, IPathCommandObject, IPathString, IWindingRule, IFlowType, IFourNumber, IGap, IPointGap, IFlowAlign, IFlowAxisAlign, IFlowWrap, IFlowBoxType, IAutoSize, IAutoBoxData, IConstraint, IRangeSize, IAxis, IBoundsData, IHitType, ICursorType, IFilter, ITransition, IUnitData, IObject, IPointData, IPathCreator, IValue, IFindCondition, ILeaferCanvas, IPathDrawer, ILeaferImage, IExportFileType, IJSONOptions, IPickOptions, IPickResult, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IBounds, IEventListenerId, ITimer, IControl, ILeaferType, IScreenSizeData, IResizeEvent, IZoomType, IZoomOptions, IClientPointData, IRenderOptions, ICanvasContext2DSettings, ICanvasContext2D } 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, IAnimation, IStates, IStateName, IStateStyle, IColorString, IEditorConfig, IAnimate, IFindUIMethod, IKeyframe, IAnimateType, IExportOptions, IExportResult, IEditorConfigFunction, IEditToolFunction, IGroupData, IGroupInputData, IUIJSONData, IFindCondition as IFindCondition$1, 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, IBackgroundBoxStyle, IHitType as IHitType$1, IFontWeight, ITextCase, ITextDecoration, IWritingMode, ITextAlign, IVerticalAlign, ITextWrap, ITextDrawData, ITextInputData, IPath, IPathData, IPathInputData, IPen, IPenData, IPathCommandData as IPathCommandData$1, IPenInputData, IPointData as IPointData$1 } from '@leafer-ui/interface';
+import { IUI, IUIData, IUIInputData, ILeafer, IGroup, IBlendMode, IFill, IStroke, IStrokeAlign, IStrokeWidthString, IStrokeCap, IStrokeJoin, IDashPatternString, IArrowType, ICornerRadiusString, IShadowEffect, IShadowString, IBlurEffect, IGrayscaleEffect, IAnimation, IStates, IStateName, IStateStyle, IColorString, IEditorConfig, IAnimate, IAnimateList, IFindUIMethod, IKeyframe, IAnimateType, IExportOptions, IExportResult, IEditorConfigFunction, IEditToolFunction, IGroupData, IGroupInputData, IUIJSONData, IFindCondition as IFindCondition$1, 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, IBackgroundBoxStyle, IHitType as IHitType$1, IFontWeight, ITextCase, ITextDecoration, IWritingMode, ITextAlign, IVerticalAlign, ITextWrap, ITextDrawData, ITextInputData, IPath, IPathData, IPathInputData, IPen, IPenData, IPathCommandData as IPathCommandData$1, IPenInputData, IPointData as IPointData$1 } from '@leafer-ui/interface';
 
 declare class UI extends Leaf implements IUI {
     __: IUIData;
@@ -41,6 +41,7 @@ declare class UI extends Leaf implements IUI {
     around?: IAlign | IUnitPointData;
     lazy?: IBoolean;
     pixelRatio?: INumber;
+    renderSpread?: INumber;
     path?: IPathCommandData | IPathCommandObject[] | IPathString;
     windingRule?: IWindingRule;
     closed?: boolean;
@@ -116,9 +117,11 @@ declare class UI extends Leaf implements IUI {
     data: IObject;
     set scale(value: INumber | IPointData);
     get scale(): INumber | IPointData;
+    get isAutoWidth(): boolean;
+    get isAutoHeight(): boolean;
     useFastShadow?: boolean;
     __box?: IUI;
-    __animate?: IAnimate;
+    __animate?: IAnimate | IAnimateList;
     get pen(): IPathCreator;
     constructor(data?: IUIInputData);
     reset(_data?: IUIInputData): void;
@@ -160,6 +163,7 @@ declare class Group extends UI implements IGroup {
     width?: INumber;
     height?: INumber;
     children: IUI[];
+    childlessJSON?: boolean;
     constructor(data?: IGroupInputData);
     reset(data?: IGroupInputData): void;
     __setBranch(): void;
@@ -256,7 +260,7 @@ declare class Leafer extends Group implements ILeafer {
     waitViewReady(item: IFunction, bind?: IObject): void;
     waitViewCompleted(item: IFunction, bind?: IObject): void;
     nextRender(item: IFunction, bind?: IObject, off?: 'off'): void;
-    zoom(_zoomType: IZoomType, _padding?: IFourNumber, _fixedScale?: boolean, _transition?: ITransition): IBoundsData;
+    zoom(_zoomType: IZoomType, _optionsOrPadding?: IZoomOptions | IFourNumber, _scroll?: 'x' | 'y' | boolean, _transition?: ITransition): IBoundsData;
     getValidMove(moveX: number, moveY: number): IPointData;
     getValidScale(changeScale: number): number;
     getWorldPointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData;
@@ -280,6 +284,7 @@ declare class Box extends Group implements IBox {
     textBox?: IBoolean;
     overflow?: IOverflow;
     isOverflow: boolean;
+    scrollBar?: IGroup;
     constructor(data?: IBoxInputData);
     __updateStrokeSpread(): number;
     __updateRectRenderSpread(): number;
@@ -289,6 +294,7 @@ declare class Box extends Group implements IBox {
     __updateStrokeBounds(): void;
     __updateRenderBounds(): void;
     __updateRectRenderBounds(): void;
+    __updateScrollBar(): void;
     __updateRectChange(): void;
     __updateChange(): void;
     __renderRect(_canvas: ILeaferCanvas, _options: IRenderOptions): void;
@@ -430,6 +436,7 @@ declare class Text extends UI implements IText {
     __updateRenderBounds(): void;
     __drawRenderPath(canvas: ILeaferCanvas): void;
     __draw(canvas: ILeaferCanvas, options: IRenderOptions, originCanvas?: ILeaferCanvas): void;
+    __drawShape(canvas: ILeaferCanvas, options: IRenderOptions): void;
     destroy(): void;
 }