@leafer-ui/display 1.9.0 → 1.9.2

package/package.json

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

package/src/Box.ts

@@ -1,16 +1,15 @@
-import { ILeaferCanvas, IRenderOptions, IBoundsData, IBoolean, INumber } from '@leafer/interface'
-import { rewrite, rewriteAble, registerUI, BoundsHelper, dataProcessor, affectRenderBoundsType, dataType, boundsType, DataHelper } from '@leafer/core'
+import { ILeaferCanvas, IRenderOptions, IBoolean, INumber, IScrollPointData } from '@leafer/interface'
+import { rewrite, rewriteAble, registerUI, BoundsHelper, dataProcessor, affectRenderBoundsType, dataType, boundsType, DataHelper, getBoundsData } from '@leafer/core'
 
-import { IBox, IBoxData, IBoxInputData, IGroup, IOverflow } from '@leafer-ui/interface'
+import { IBox, IBoxData, IBoxInputData, IOverflow, IScrollConfig, IScroller } from '@leafer-ui/interface'
 import { BoxData } from '@leafer-ui/data'
 
 import { Group } from './Group'
 import { Rect } from './Rect'
 
 
-const { copy, add, includes } = BoundsHelper
+const { add, includes, scroll } = BoundsHelper
 const rect = Rect.prototype, group = Group.prototype
-const childrenRenderBounds = {} as IBoundsData
 
 @rewriteAble()
 @registerUI()
@@ -39,9 +38,13 @@ export class Box extends Group implements IBox {
     @affectRenderBoundsType('show')
     declare public overflow?: IOverflow
 
-    public isOverflow: boolean
+    public isOverflow?: boolean
 
-    public scrollBar?: IGroup
+    // scroller rewrite
+    public scrollConfig?: IScrollConfig
+
+    public scroller?: IScroller
+    public hasScroller?: boolean
 
     constructor(data?: IBoxInputData) {
         super(data)
@@ -99,32 +102,36 @@ export class Box extends Group implements IBox {
         let isOverflow: boolean
 
         if (this.children.length) {
-            const data = this.__, { renderBounds, boxBounds } = this.__layout
+            const data = this.__, layout = this.__layout, { renderBounds, boxBounds } = layout
 
-            super.__updateRenderBounds()
-            copy(childrenRenderBounds, renderBounds)
-            this.__updateRectRenderBounds()
+            const childrenRenderBounds = layout.childrenRenderBounds || (layout.childrenRenderBounds = getBoundsData())
+            super.__updateRenderBounds(childrenRenderBounds)
+            scroll(childrenRenderBounds, data as IScrollPointData)  // 增加滚动逻辑
 
-            // 增加滚动逻辑
-            if (data.scrollY || data.scrollX) {
-                childrenRenderBounds.x += data.scrollX
-                childrenRenderBounds.y += data.scrollY
-            }
+            this.__updateRectRenderBounds()
 
             isOverflow = !includes(boxBounds, childrenRenderBounds)
-            if (isOverflow && data.overflow !== 'hide') add(renderBounds, childrenRenderBounds)
+            if (isOverflow && data.overflow === 'show') add(renderBounds, childrenRenderBounds)
         } else this.__updateRectRenderBounds()
 
         DataHelper.stintSet(this, 'isOverflow', isOverflow)
 
-        this.__updateScrollBar()
+        this.__checkScroll()
     }
 
     @rewrite(rect.__updateRenderBounds)
     public __updateRectRenderBounds(): void { }
 
-    //  need rewrite
-    public __updateScrollBar(): void { }
+    public __updateWorldBounds(): void {
+        if (this.hasScroller) this.__updateScroll()
+        super.__updateWorldBounds()
+    }
+
+
+    //  scroller will rewrite
+    public __checkScroll(): void { }
+
+    public __updateScroll(): void { }
 
 
     @rewrite(rect.__updateChange)
@@ -150,7 +157,7 @@ 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)
+        if (this.hasScroller) this.scroller.__render(canvas, options)
     }
 
     // in __drawAfterFill()

package/src/Group.ts

@@ -27,6 +27,8 @@ export class Group extends UI implements IGroup {   // tip: rewrited Box
 
     declare public children: IUI[]
 
+    declare public topChildren?: IUI[]
+
     public childlessJSON?: boolean
 
     constructor(data?: IGroupInputData) {

package/src/Leafer.ts

@@ -391,7 +391,7 @@ export class Leafer extends Group implements ILeafer {
 
 
     // interaction window rewrite
-    public getValidMove(moveX: number, moveY: number): IPointData { return { x: moveX, y: moveY } }
+    public getValidMove(moveX: number, moveY: number, _checkLimit?: boolean): IPointData { return { x: moveX, y: moveY } }
     public getValidScale(changeScale: number): number { return changeScale }
 
 

package/src/Text.ts

@@ -1,7 +1,7 @@
 import { ILeaferCanvas, IBoolean, INumber, IString, IBoundsData, IUnitData, IRenderOptions } from '@leafer/interface'
 import { BoundsHelper, boundsType, surfaceType, dataProcessor, registerUI, affectStrokeBoundsType, dataType, hitType, MathHelper, DataHelper } from '@leafer/core'
 
-import { IFill, IText, IFontWeight, ITextCase, ITextDecoration, ITextData, ITextInputData, ITextAlign, IVerticalAlign, ITextDrawData, IOverflow, IStrokeAlign, IHitType, ITextWrap, IWritingMode, IBackgroundBoxStyle } from '@leafer-ui/interface'
+import { IFill, IText, IFontWeight, ITextCase, ITextDecoration, ITextData, ITextInputData, ITextAlign, IVerticalAlign, ITextDrawData, ITextOverflow, IStrokeAlign, IHitType, ITextWrap, IWritingMode, IBackgroundBoxStyle } from '@leafer-ui/interface'
 import { TextData } from '@leafer-ui/data'
 
 import { TextConvert, UnitConvert } from '@leafer-ui/external'
@@ -93,7 +93,7 @@ export class Text extends UI implements IText {
     public textWrap?: ITextWrap
 
     @boundsType('show')
-    public textOverflow?: IOverflow | string
+    public textOverflow?: ITextOverflow
 
     @surfaceType(false)
     public textEditing: boolean
@@ -115,7 +115,7 @@ export class Text extends UI implements IText {
         data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize)
         data.__padding = padding ? MathHelper.fourNumber(padding) : undefined
         data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * 0.7) / 2 // 基线位置
-        data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`
+        data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize || 12}px ${fontFamily || 'caption'}`
         data.__clipText = textOverflow !== 'show' && !data.__autoSize
 
         data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === '') ? data.placeholder : data.text, this.__)

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, IFlowWrap, IAxis, IConstraint, IAutoBoxData, IFlowBoxType, IPointGap, IFlowAlign, IFlowAxisAlign, IFindCondition, IAutoSize, IRangeSize, IAlign, IUnitPointData, IObject, IScaleData, IUnitData, IPathCommandObject, ITransition, IFilter, ILeaferImage, IScaleFixed } 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, affectRenderBoundsType, isString, isNumber } 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, IObject, IScaleData, IUnitData, IPathCommandObject, ITransition, IFilter, ILeaferImage, IScaleFixed, IDragBoundsType } from '@leafer/interface'
+import { Leaf, PathDrawer, surfaceType, dataType, positionType, scrollType, 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, isString, isNumber } 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, IAnimateList } from '@leafer-ui/interface'
 import { effectType, zoomLayerType } from '@leafer-ui/decorator'
@@ -120,10 +120,10 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public offsetY?: INumber
 
     // scroll
-    @positionType(0, true)
+    @scrollType(0, true)
     public scrollX?: INumber
 
-    @positionType(0, true)
+    @scrollType(0, true)
     public scrollY?: INumber
 
 
@@ -199,6 +199,9 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     @dataType()
     public dragBounds?: IBoundsData | 'parent'
 
+    @dataType('auto')
+    dragBoundsType?: IDragBoundsType
+
 
     @dataType(false)
     public editable?: IBoolean
@@ -516,14 +519,15 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
         return Plugin.need('export')
     }
 
-    public clone(data?: IUIInputData): IUI {
+    public clone(data?: IUIInputData): this {
         const json = DataHelper.clone(this.toJSON())
         if (data) Object.assign(json, data)
-        return UI.one(json)
+        return UI.one(json) as this
     }
 
-    static one(data: IUIInputData, x?: number, y?: number, width?: number, height?: number): IUI {
-        return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height) as IUI
+    // this 参数定义，在编译的时候会移除
+    static one<T extends UI>(this: new (...args: any[]) => T, data: IUIInputData, x?: number, y?: number, width?: number, height?: number): T {
+        return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height) as T
     }
 
     static registerUI(): 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, IScaleFixed, 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 { 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, IDragBoundsType, IHitType, ICursorType, IScaleFixed, 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, 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';
+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, IScrollConfig, IScroller, 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, ITextOverflow, 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;
@@ -60,6 +60,7 @@ declare class UI extends Leaf implements IUI {
     heightRange?: IRangeSize;
     draggable?: IBoolean | IAxis;
     dragBounds?: IBoundsData | 'parent';
+    dragBoundsType?: IDragBoundsType;
     editable?: IBoolean;
     hittable?: IBoolean;
     hitFill?: IHitType;
@@ -146,8 +147,8 @@ declare class UI extends Leaf implements IUI {
     killAnimate(_type?: IAnimateType, _nextStyle?: IUIInputData): void;
     export(_filename: IExportFileType | string, _options?: IExportOptions | number | boolean): Promise<IExportResult>;
     syncExport(_filename: IExportFileType | string, _options?: IExportOptions | number | boolean): IExportResult;
-    clone(data?: IUIInputData): IUI;
-    static one(data: IUIInputData, x?: number, y?: number, width?: number, height?: number): IUI;
+    clone(data?: IUIInputData): this;
+    static one<T extends UI>(this: new (...args: any[]) => T, data: IUIInputData, x?: number, y?: number, width?: number, height?: number): T;
     static registerUI(): void;
     static registerData(data: IUIData): void;
     static setEditConfig(_config: IEditorConfig | IEditorConfigFunction): void;
@@ -163,6 +164,7 @@ declare class Group extends UI implements IGroup {
     width?: INumber;
     height?: INumber;
     children: IUI[];
+    topChildren?: IUI[];
     childlessJSON?: boolean;
     constructor(data?: IGroupInputData);
     reset(data?: IGroupInputData): void;
@@ -261,7 +263,7 @@ declare class Leafer extends Group implements ILeafer {
     waitViewCompleted(item: IFunction, bind?: IObject): void;
     nextRender(item: IFunction, bind?: IObject, off?: 'off'): void;
     zoom(_zoomType: IZoomType, _optionsOrPadding?: IZoomOptions | IFourNumber, _scroll?: 'x' | 'y' | boolean, _transition?: ITransition): IBoundsData;
-    getValidMove(moveX: number, moveY: number): IPointData;
+    getValidMove(moveX: number, moveY: number, _checkLimit?: boolean): IPointData;
     getValidScale(changeScale: number): number;
     getWorldPointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData;
     getPagePointByClient(clientPoint: IClientPointData, updateClient?: boolean): IPointData;
@@ -283,8 +285,10 @@ declare class Box extends Group implements IBox {
     resizeChildren?: IBoolean;
     textBox?: IBoolean;
     overflow?: IOverflow;
-    isOverflow: boolean;
-    scrollBar?: IGroup;
+    isOverflow?: boolean;
+    scrollConfig?: IScrollConfig;
+    scroller?: IScroller;
+    hasScroller?: boolean;
     constructor(data?: IBoxInputData);
     __updateStrokeSpread(): number;
     __updateRectRenderSpread(): number;
@@ -294,7 +298,9 @@ declare class Box extends Group implements IBox {
     __updateStrokeBounds(): void;
     __updateRenderBounds(): void;
     __updateRectRenderBounds(): void;
-    __updateScrollBar(): void;
+    __updateWorldBounds(): void;
+    __checkScroll(): void;
+    __updateScroll(): void;
     __updateRectChange(): void;
     __updateChange(): void;
     __renderRect(_canvas: ILeaferCanvas, _options: IRenderOptions): void;
@@ -424,7 +430,7 @@ declare class Text extends UI implements IText {
     verticalAlign?: IVerticalAlign;
     autoSizeAlign?: IBoolean;
     textWrap?: ITextWrap;
-    textOverflow?: IOverflow | string;
+    textOverflow?: ITextOverflow;
     textEditing: boolean;
     isOverflow: boolean;
     get textDrawData(): ITextDrawData;