@leafer-ui/display 1.6.1 → 1.6.2

package/package.json

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

package/src/Image.ts

@@ -24,9 +24,11 @@ export class Image extends Rect implements IImage {
 
     constructor(data?: IImageInputData) {
         super(data)
-        this.on(ImageEvent.LOADED, (e: ImageEvent) => {
-            if (e.attrName === 'fill' && e.attrValue.url === this.url) this.image = e.image
-        })
+        this.on_(ImageEvent.LOADED, this.__onLoaded, this)
+    }
+
+    public __onLoaded(e: ImageEvent): void {
+        if (e.attrName === 'fill' && e.attrValue.url === this.url) this.image = e.image
     }
 
     public destroy(): void {

package/src/Text.ts

@@ -44,6 +44,9 @@ export class Text extends UI implements IText {
     @boundsType('')
     public text?: IString | INumber
 
+    @boundsType('')
+    public placeholder?: IString
+
     @boundsType('caption')
     public fontFamily?: IString
 
@@ -115,7 +118,7 @@ export class Text extends UI implements IText {
         data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`
         data.__clipText = textOverflow !== 'show' && !data.__autoSize
 
-        data.__textDrawData = TextConvert.getDrawData(data.text, this.__)
+        data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === '') ? data.placeholder : data.text, this.__)
     }
 
     override __updateBoxBounds(): void {

package/src/UI.ts

@@ -1,13 +1,13 @@
-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 } from '@leafer/interface'
+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 { 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 } 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 } from '@leafer-ui/interface'
 import { effectType, zoomLayerType } from '@leafer-ui/decorator'
 
 import { UIData } from '@leafer-ui/data'
 import { UIBounds, UIRender } from '@leafer-ui/display-module'
 
-import { Export, PathArrow } from '@leafer-ui/external'
+import { Export, Paint, PathArrow } from '@leafer-ui/external'
 
 
 @useModule(UIBounds)
@@ -348,6 +348,9 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
 
     public placeholderStyle?: IStateStyle
 
+    @surfaceType()
+    public placeholderColor?: IColorString
+
 
     public button?: IBoolean
 
@@ -476,6 +479,10 @@ export class UI extends Leaf implements IUI { // tip: rewrited Box
         } else drawer.rect(x, y, width, height)
     }
 
+    public drawImagePlaceholder(canvas: ILeaferCanvas, _image?: ILeaferImage): void {
+        Paint.fill(this.__.placeholderColor, this, canvas)  // 图片占位符
+    }
+
     // @leafer-in/animate rewrite
 
     public animate(_keyframe?: IUIInputData | IKeyframe[] | IAnimation | IAnimation[], _options?: ITransition, _type?: IAnimateType, _isTemp?: boolean): IAnimate {

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, 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 { 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 { Leaf, LeafList, ImageEvent } 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, 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;
@@ -107,6 +107,7 @@ declare class UI extends Leaf implements IUI {
     selectedStyle?: IStateStyle;
     disabledStyle?: IStateStyle;
     placeholderStyle?: IStateStyle;
+    placeholderColor?: IColorString;
     button?: IBoolean;
     data: IObject;
     set scale(value: INumber | IPointData);
@@ -135,6 +136,7 @@ declare class UI extends Leaf implements IUI {
     __drawPath(canvas: ILeaferCanvas): void;
     __drawPathByData(drawer: IPathDrawer, data: IPathCommandData): void;
     __drawPathByBox(drawer: IPathDrawer): void;
+    drawImagePlaceholder(canvas: ILeaferCanvas, _image?: ILeaferImage): void;
     animate(_keyframe?: IUIInputData | IKeyframe[] | IAnimation | IAnimation[], _options?: ITransition, _type?: IAnimateType, _isTemp?: boolean): IAnimate;
     killAnimate(_type?: IAnimateType, _nextStyle?: IUIInputData): void;
     export(_filename: IExportFileType | string, _options?: IExportOptions | number | boolean): Promise<IExportResult>;
@@ -362,6 +364,7 @@ declare class Image extends Rect implements IImage {
     get ready(): boolean;
     image?: ILeaferImage;
     constructor(data?: IImageInputData);
+    __onLoaded(e: ImageEvent): void;
     destroy(): void;
 }
 declare const MyImage: typeof Image;
@@ -399,6 +402,7 @@ declare class Text extends UI implements IText {
     strokeAlign?: IStrokeAlign;
     hitFill?: IHitType$1;
     text?: IString | INumber;
+    placeholder?: IString;
     fontFamily?: IString;
     fontSize?: INumber;
     fontWeight?: IFontWeight;