@leafer-ui/display 1.5.3 → 1.6.0

package/package.json

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

package/src/Box.ts

@@ -102,11 +102,11 @@ export class Box extends Group implements IBox {
             copy(childrenRenderBounds, renderBounds)
             this.__updateRectRenderBounds()
 
-            isOverflow = !includes(renderBounds, childrenRenderBounds)
+            isOverflow = !includes(renderBounds, childrenRenderBounds) || undefined
             if (isOverflow && this.__.overflow !== 'hide') add(renderBounds, childrenRenderBounds)
         } else this.__updateRectRenderBounds()
 
-        !this.isOverflow !== !isOverflow && (this.isOverflow = isOverflow) // 节省赋值
+        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow) // 节省赋值
     }
 
     @rewrite(rect.__updateRenderBounds)

package/src/Leafer.ts

@@ -64,7 +64,8 @@ export class Leafer extends Group implements ILeafer {
         start: true,
         hittable: true,
         smooth: true,
-        lazySpeard: 100
+        lazySpeard: 100,
+        // pixelSnap: false // 是否对齐像素，避免图片存在浮点坐标导致模糊
     }
 
     public autoLayout?: IAutoBounds

package/src/Text.ts

@@ -1,15 +1,15 @@
-import { ILeaferCanvas, IPathDrawer, IPathCommandData, IBoolean, INumber, IString, IBoundsData, IUnitData } from '@leafer/interface'
+import { ILeaferCanvas, IBoolean, INumber, IString, IBoundsData, IUnitData, IRenderOptions } from '@leafer/interface'
 import { BoundsHelper, boundsType, surfaceType, dataProcessor, registerUI, affectStrokeBoundsType, dataType, hitType, MathHelper } from '@leafer/core'
 
-import { IFill, IText, IFontWeight, ITextCase, ITextDecoration, ITextData, ITextInputData, ITextAlign, IVerticalAlign, ITextDrawData, IOverflow, IStrokeAlign, IHitType, ITextWrap, IWritingMode } from '@leafer-ui/interface'
+import { IFill, IText, IFontWeight, ITextCase, ITextDecoration, ITextData, ITextInputData, ITextAlign, IVerticalAlign, ITextDrawData, IOverflow, IStrokeAlign, IHitType, ITextWrap, IWritingMode, IBackgroundBoxStyle } from '@leafer-ui/interface'
 import { TextData } from '@leafer-ui/data'
 
-import { TextConvert, UnitConvert } from '@leafer-ui/external'
+import { TextConvert, UnitConvert, Export } from '@leafer-ui/external'
 
 import { UI } from './UI'
 
 
-const { copyAndSpread, includes, isSame, spread, setList } = BoundsHelper
+const { copyAndSpread, includes, spread, setList } = BoundsHelper
 
 @registerUI()
 export class Text extends UI implements IText {
@@ -26,6 +26,9 @@ export class Text extends UI implements IText {
     @boundsType(0)
     declare public height?: INumber
 
+    @surfaceType()
+    public boxStyle: IBackgroundBoxStyle
+
     @dataType(false)
     public resizeFontSize?: IBoolean
 
@@ -89,35 +92,16 @@ export class Text extends UI implements IText {
     @boundsType('show')
     public textOverflow?: IOverflow | string
 
-    public get textDrawData(): ITextDrawData {
-        this.__layout.update()
-        return this.__.__textDrawData
-    }
-
-
-    constructor(data?: ITextInputData) {
-        super(data)
-    }
-
-    public __drawHitPath(canvas: ILeaferCanvas): void {
-        const { __lineHeight, fontSize, __baseLine, __textDrawData: data } = this.__
+    //  @leafer-in/text-editor rewrite
+    public textEditing: boolean
 
-        canvas.beginPath()
+    public isOverflow: boolean
 
-        if (this.__.__letterSpacing < 0) {
-            this.__drawPathByData(canvas)
-        } else {
-            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight))
-        }
-    }
+    public get textDrawData(): ITextDrawData { this.updateLayout(); return this.__.__textDrawData }
 
-    public __drawPathByData(drawer: IPathDrawer, _data?: IPathCommandData): void {
-        const { x, y, width, height } = this.__layout.boxBounds
-        drawer.rect(x, y, width, height)
-    }
 
-    public __drawRenderPath(canvas: ILeaferCanvas): void {
-        canvas.font = this.__.__font
+    constructor(data?: ITextInputData) {
+        super(data)
     }
 
     public __updateTextDrawData(): void {
@@ -134,7 +118,7 @@ export class Text extends UI implements IText {
         data.__textDrawData = TextConvert.getDrawData(data.text, this.__)
     }
 
-    public __updateBoxBounds(): void {
+    override __updateBoxBounds(): void {
 
         const data = this.__
         const layout = this.__layout
@@ -142,16 +126,18 @@ export class Text extends UI implements IText {
 
         this.__updateTextDrawData() // layout text
 
-        const { bounds } = data.__textDrawData
+        const { bounds: contentBounds } = data.__textDrawData
         const b = layout.boxBounds
 
-        if (data.__lineHeight < fontSize) spread(bounds, fontSize / 2)
+        layout.contentBounds = contentBounds
+
+        if (data.__lineHeight < fontSize) spread(contentBounds, fontSize / 2)
 
         if (autoWidth || autoHeight) {
-            b.x = autoWidth ? bounds.x : 0
-            b.y = autoHeight ? bounds.y : 0
-            b.width = autoWidth ? bounds.width : data.width
-            b.height = autoHeight ? bounds.height : data.height
+            b.x = autoWidth ? contentBounds.x : 0
+            b.y = autoHeight ? contentBounds.y : 0
+            b.width = autoWidth ? contentBounds.width : data.width
+            b.height = autoHeight ? contentBounds.height : data.height
 
             if (padding) {
                 const [top, right, bottom, left] = data.__padding
@@ -163,23 +149,44 @@ export class Text extends UI implements IText {
 
         if (italic) b.width += fontSize * 0.16 // 倾斜会导致文本的bounds增大
 
-        const contentBounds = includes(b, bounds) ? b : bounds
-        if (!isSame(contentBounds, layout.contentBounds)) {
-            layout.contentBounds = contentBounds
-            layout.renderChanged = true
-            setList(data.__textBoxBounds = {} as IBoundsData, [b, bounds])
-        } else data.__textBoxBounds = contentBounds
+        const isOverflow = !includes(b, contentBounds) || undefined
+        if (isOverflow) setList(data.__textBoxBounds = {} as IBoundsData, [b, contentBounds]), layout.renderChanged = true
+        else data.__textBoxBounds = b
+
+        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow) // 节省赋值
+    }
 
+    override __onUpdateSize(): void {
+        if (this.__box) this.__box.__onUpdateSize()
+        super.__onUpdateSize()
     }
 
-    public __updateRenderSpread(): number {
+    override __updateRenderSpread(): number {
         let width = super.__updateRenderSpread()
-        if (!width) width = this.__layout.boxBounds === this.__layout.contentBounds ? 0 : 1
+        if (!width) width = this.isOverflow ? 1 : 0
         return width
     }
 
-    public __updateRenderBounds(): void {
-        copyAndSpread(this.__layout.renderBounds, this.__.__textBoxBounds, this.__layout.renderSpread)
+    override __updateRenderBounds(): void {
+        const { renderBounds, renderSpread } = this.__layout
+        copyAndSpread(renderBounds, this.__.__textBoxBounds, renderSpread)
+        if (this.__box) this.__box.__layout.renderBounds = renderBounds
+    }
+
+    override __drawRenderPath(canvas: ILeaferCanvas): void {
+        canvas.font = this.__.__font
+    }
+
+    override __draw(canvas: ILeaferCanvas, options: IRenderOptions, originCanvas?: ILeaferCanvas): void {
+        const box = this.__box
+        if (box) box.__nowWorld = this.__nowWorld, box.__draw(canvas, options, originCanvas)
+        if (this.textEditing && !Export.running) return
+        super.__draw(canvas, options, originCanvas)
+    }
+
+    override destroy(): void {
+        if (this.boxStyle) this.boxStyle = null
+        super.destroy()
     }
 
 }

package/src/UI.ts

@@ -61,6 +61,13 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
     public locked?: IBoolean
 
 
+    @surfaceType(false)
+    public dim?: IBoolean | INumber // 是否弱化内容，可设置具体透明度
+
+    @surfaceType(false)
+    public dimskip?: IBoolean // 跳过弱化，突出显示内容，不受dim影响
+
+
     @sortType(0)
     public zIndex?: INumber
 
@@ -353,6 +360,7 @@ 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 __box?: IUI // 背景box, 一般用于文本背景框
     public __animate?: IAnimate
 
     public get pen(): IPathCreator {

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, IExportFileType, IJSONOptions, IPickOptions, IPickResult, IRenderer, IWatcher, ILayouter, ISelector, IInteraction, ICanvasManager, IHitCanvasManager, ILeaferConfig, IAutoBounds, IBounds, IEventListenerId, ITimer, IControl, ILeaferType, IScreenSizeData, IResizeEvent, IZoomType, IClientPointData, IRenderOptions, ILeaferImage, 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, IAnimate, IEditorConfig, 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, 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, IAnimate, IEditorConfig, 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;
@@ -19,6 +19,8 @@ declare class UI extends Leaf implements IUI {
     opacity?: INumber;
     visible?: IBoolean | 0;
     locked?: IBoolean;
+    dim?: IBoolean | INumber;
+    dimskip?: IBoolean;
     zIndex?: INumber;
     mask?: IBoolean | IMaskType;
     eraser?: IBoolean | IEraserType;
@@ -109,6 +111,7 @@ declare class UI extends Leaf implements IUI {
     data: IObject;
     set scale(value: INumber | IPointData);
     get scale(): INumber | IPointData;
+    __box?: IUI;
     __animate?: IAnimate;
     get pen(): IPathCreator;
     editConfig: IEditorConfig;
@@ -390,6 +393,7 @@ declare class Text extends UI implements IText {
     __: ITextData;
     width?: INumber;
     height?: INumber;
+    boxStyle: IBackgroundBoxStyle;
     resizeFontSize?: IBoolean;
     fill?: IFill;
     strokeAlign?: IStrokeAlign;
@@ -411,15 +415,18 @@ declare class Text extends UI implements IText {
     autoSizeAlign?: IBoolean;
     textWrap?: ITextWrap;
     textOverflow?: IOverflow | string;
+    textEditing: boolean;
+    isOverflow: boolean;
     get textDrawData(): ITextDrawData;
     constructor(data?: ITextInputData);
-    __drawHitPath(canvas: ILeaferCanvas): void;
-    __drawPathByData(drawer: IPathDrawer, _data?: IPathCommandData): void;
-    __drawRenderPath(canvas: ILeaferCanvas): void;
     __updateTextDrawData(): void;
     __updateBoxBounds(): void;
+    __onUpdateSize(): void;
     __updateRenderSpread(): number;
     __updateRenderBounds(): void;
+    __drawRenderPath(canvas: ILeaferCanvas): void;
+    __draw(canvas: ILeaferCanvas, options: IRenderOptions, originCanvas?: ILeaferCanvas): void;
+    destroy(): void;
 }
 
 declare class Path extends UI implements IPath {