@leafer-ui/display 1.0.0-alpha.2 → 1.0.0-alpha.21

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@leafer-ui/display",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.21",
   "description": "@leafer-ui/display",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/leaferjs/ui.git"
@@ -13,18 +15,17 @@
   "homepage": "https://github.com/leaferjs/ui/tree/main/packages/display",
   "bugs": "https://github.com/leaferjs/ui/issues",
   "keywords": [
-    "leaferui",
     "leafer-ui",
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-alpha.1",
-    "@leafer-ui/data": "1.0.0-alpha.1",
-    "@leafer-ui/display-module": "1.0.0-alpha.1",
-    "@leafer-ui/decorator": "1.0.0-alpha.1"
+    "@leafer/core": "1.0.0-alpha.21",
+    "@leafer-ui/data": "1.0.0-alpha.21",
+    "@leafer-ui/display-module": "1.0.0-alpha.21",
+    "@leafer-ui/decorator": "1.0.0-alpha.21"
   },
   "devDependencies": {
-     "@leafer/interface": "1.0.0-alpha.1",
-     "@leafer-ui/interface": "1.0.0-alpha.1"
+    "@leafer/interface": "1.0.0-alpha.21",
+    "@leafer-ui/interface": "1.0.0-alpha.21"
   }
 }

package/src/Ellipse.ts

@@ -1,3 +1,4 @@
+import { __Number } from '@leafer/interface'
 import { PathCreator, OneRadian, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IEllipse, IEllipseInputData, IEllipseData } from '@leafer-ui/interface'
@@ -6,6 +7,7 @@ import { EllipseData } from '@leafer-ui/data'
 import { UI } from './UI'
 
 
+
 const { PI } = Math
 const { begin, moveTo, close, ellipse } = PathCreator
 
@@ -17,13 +19,13 @@ export class Ellipse extends UI implements IEllipse {
     public __: IEllipseData
 
     @pathType(0)
-    public innerRadius: number
+    public innerRadius: __Number
 
     @pathType(0)
-    public startAngle: number
+    public startAngle: __Number
 
     @pathType(0)
-    public endAngle: number
+    public endAngle: __Number
 
     constructor(data?: IEllipseInputData) {
         super(data)

package/src/Frame.ts

@@ -1,4 +1,4 @@
-import { ILeaferCanvas, IRenderOptions, ICanvasDrawPath, IBoundsData, IPathCommandData } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions, IPathDrawer, IBoundsData, IPathCommandData, __Boolean } from '@leafer/interface'
 import { BoundsHelper, dataProcessor, boundsType, rewrite, useModule, rewriteAble, registerUI } from '@leafer/core'
 
 import { IFrame, IFrameData, IFrameInputData } from '@leafer-ui/interface'
@@ -24,7 +24,7 @@ export class Frame extends Group implements IFrame {
     public __: IFrameData
 
     @boundsType(true)
-    public clip: boolean
+    public clip: __Boolean
 
     constructor(data?: IFrameInputData) {
         super(data)
@@ -33,7 +33,7 @@ export class Frame extends Group implements IFrame {
     }
 
     @rewrite(rect.__drawPathByData)
-    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void { }
+    public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
 
     public __updateBoxBounds(): void {
         this.__updateRectBoxBounds()
@@ -76,9 +76,9 @@ export class Frame extends Group implements IFrame {
 
 
     @rewrite(rect.__render)
-    public __renderRect(canvas: ILeaferCanvas, options: IRenderOptions): void { }
+    public __renderRect(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
 
     @rewrite(group.__render)
-    public __renderGroup(canvas: ILeaferCanvas, options: IRenderOptions): void { }
+    public __renderGroup(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
 
 }

package/src/Group.ts

@@ -21,12 +21,6 @@ export class Group extends UI implements IGroup {
         this.children = []
     }
 
-    public __updatePath(): void {
-
-    }
-
-    public add(child: IUI, index?: number): void { } // Branch rewrite
-
     public addAt(child: IUI, index: number): void {
         this.add(child, index)
     }
@@ -39,6 +33,10 @@ export class Group extends UI implements IGroup {
         this.add(child, this.children.indexOf(before))
     }
 
-    public remove(child?: IUI): void { }  // Branch rewrite
+    // Branch rewrite
+
+    public add(_child: IUI, _index?: number): void { }
+
+    public remove(_child?: IUI): void { }
 
 }

package/src/Image.ts

@@ -1,4 +1,5 @@
-import { boundsType, dataProcessor, registerUI } from '@leafer/core'
+import { ILeaferImage, __String } from '@leafer/interface'
+import { boundsType, dataProcessor, registerUI, Creator } from '@leafer/core'
 
 import { IImage, IImageInputData, IImageData } from '@leafer-ui/interface'
 import { ImageData } from '@leafer-ui/data'
@@ -13,13 +14,24 @@ export class Image extends Rect implements IImage {
     public __: IImageData
 
     @boundsType('')
-    public url: string
+    public url: __String
 
     @boundsType('')
-    public thumb: string
+    public thumb: __String
+
+    public __image: ILeaferImage
 
     constructor(data?: IImageInputData) {
         super(data)
     }
 
+    public __updateBoxBounds(): void {
+        this.__image = Creator.image(this)
+    }
+
+
+    public drawFill(): void {
+
+    }
+
 }

package/src/Line.ts

@@ -1,4 +1,4 @@
-import { __Number, IPointData, ITwoPointBoundsData } from '@leafer/interface'
+import { IPointData, ITwoPointBoundsData, __Number } from '@leafer/interface'
 import { PathCreator, PointHelper, TwoPointBoundsHelper, boundsType, dataProcessor, registerUI } from '@leafer/core'
 
 import { ILine, ILineData, ILineInputData } from '@leafer-ui/interface'
@@ -23,20 +23,17 @@ export class Line extends UI implements ILine {
     @boundsType()
     public rotation: __Number
 
-
-    protected __to: IPointData
+    protected __toPoint: IPointData
 
     public get toPoint(): IPointData {
-        if (this.__to && !this.__layout.boxBoundsChanged) return this.__to
+        if (this.__toPoint && !this.__layout.boxBoundsChanged) return this.__toPoint
 
-        const { width, height, rotation } = this.__
+        const { width, rotation } = this.__
         const to: IPointData = { x: 0, y: 0 }
 
         if (width) to.x = width
-        if (height) to.y = height
-
         if (rotation) rotate(to, rotation)
-        this.__to = to
+        this.__toPoint = to
 
         return to
     }
@@ -64,7 +61,7 @@ export class Line extends UI implements ILine {
 
     public __updateBoxBounds(): void {
         setPoint(pointBounds, 0, 0)
-        addPoint(pointBounds, this.__to.x, this.__to.y)
+        addPoint(pointBounds, this.__toPoint.x, this.__toPoint.y)
         toBounds(pointBounds, this.__layout.boxBounds)
     }
 

package/src/Path.ts

@@ -1,7 +1,7 @@
-import { ITwoPointBoundsData, ILeaferCanvas, IPathCommandData } from '@leafer/interface'
+import { ITwoPointBoundsData, ILeaferCanvas, IPathCommandData, IWindingRule } from '@leafer/interface'
 import { PathHelper, TwoPointBoundsHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
 
-import { IPath, IPathData, IPathInputData, IWindingRule, IPathString } from '@leafer-ui/interface'
+import { IPath, IPathData, IPathInputData, IPathString } from '@leafer-ui/interface'
 import { PathData } from '@leafer-ui/data'
 
 import { UI } from './UI'

package/src/Polygon.ts

@@ -1,3 +1,4 @@
+import { __Number } from '@leafer/interface'
 import { PathCreator, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IPolygon, IPolygonData, IPolygonInputData } from '@leafer-ui/interface'

package/src/Rect.ts

@@ -1,4 +1,4 @@
-import { ICanvasDrawPath, IPathCommandData } from '@leafer/interface'
+import { IPathDrawer, IPathCommandData, __Number } from '@leafer/interface'
 import { dataProcessor, registerUI, useModule } from '@leafer/core'
 
 import { IRect, IRectInputData, IRectData } from '@leafer-ui/interface'
@@ -19,12 +19,10 @@ export class Rect extends UI implements IRect {
         super(data)
     }
 
-    public __updatePath(): void { }
-
-    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void {
-        const { width, height, borderRadius } = this.__
-        if (borderRadius) {
-            drawer.roundRect(0, 0, width, height, borderRadius)
+    public __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void {
+        const { width, height, cornerRadius } = this.__
+        if (cornerRadius) {
+            drawer.roundRect(0, 0, width, height, cornerRadius)
         } else {
             drawer.rect(0, 0, width, height)
         }

package/src/Star.ts

@@ -1,3 +1,4 @@
+import { __Number } from '@leafer/interface'
 import { PathCreator, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IStar, IStarData, IStarInputData } from '@leafer-ui/interface'
@@ -17,10 +18,10 @@ export class Star extends UI implements IStar {
     public __: IStarData
 
     @pathType(5)
-    public points: number
+    public points: __Number
 
     @pathType(0.38)
-    public innerRadius: number
+    public innerRadius: __Number
 
     constructor(data?: IStarInputData) {
         super(data)

package/src/Text.ts

@@ -1,4 +1,4 @@
-import { ICanvasDrawPath, IPathCommandData } from '@leafer/interface'
+import { IPathDrawer, IPathCommandData, __Boolean, __Number, __String } from '@leafer/interface'
 import { Platform, boundsType, dataProcessor, registerUI, useModule } from '@leafer/core'
 
 import { IText, IFontWeight, ITextCase, ITextDecoration, IPercent, ITextData, ITextInputData } from '@leafer-ui/interface'
@@ -16,19 +16,19 @@ export class Text extends UI implements IText {
     public __: ITextData
 
     @boundsType('')
-    public content: string
+    public content: __String
 
     @boundsType('arial')
-    public fontFamily: string
+    public fontFamily: __String
 
     @boundsType(12)
-    public fontSize: number
+    public fontSize: __Number
 
     @boundsType('normal')
     public fontWeight: IFontWeight
 
     @boundsType(false)
-    public italic: boolean
+    public italic: __Boolean
 
     @boundsType('normal')
     public textCase: ITextCase
@@ -37,26 +37,22 @@ export class Text extends UI implements IText {
     public textDecoration: ITextDecoration
 
     @boundsType()
-    public letterSpacing: number | IPercent
+    public letterSpacing: __Number | IPercent
 
     @boundsType()
-    public lineHeight: number | IPercent
+    public lineHeight: __Number | IPercent
 
     @boundsType()
-    public paragraphIndent: number
+    public paragraphIndent: __Number
 
     @boundsType()
-    public paragraphSpacing: number
+    public paragraphSpacing: __Number
 
     constructor(data?: ITextInputData) {
         super(data)
     }
 
-    public __updatePath(): void {
-
-    }
-
-    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void {
+    public __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void {
         const { width, height } = this.__
         drawer.rect(0, 0, width, height)
     }

package/src/UI.ts

@@ -1,7 +1,7 @@
-import { ILeaferCanvas, ICanvasDrawPath, IPathCommandData, __Number, __Boolean, __String, IMatrixData, IBoundsData } from '@leafer/interface'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, IMatrixData, IBoundsData, IHitType, __Number, __Boolean, __String } from '@leafer/interface'
 import { Leaf, PathHelper, affectEventBoundsType, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, dataProcessor, useModule, rewrite, rewriteAble } from '@leafer/core'
 
-import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IBorderWidthString, IBorderRadiusString } from '@leafer-ui/interface'
+import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString } from '@leafer-ui/interface'
 import { effectType } from '@leafer-ui/decorator'
 
 import { UIData } from '@leafer-ui/data'
@@ -79,8 +79,20 @@ export class UI extends Leaf implements IUI {
     @rotationType(0)
     public skewY: __Number
 
+
+    @dataType(false)
     public draggable: __Boolean
 
+    // hit
+    @dataType(true)
+    public hittable: __Boolean
+
+    @dataType('visible')
+    public hitType: IHitType
+
+    @dataType(true)
+    public hitChildren: __Boolean
+
     // ---
 
 
@@ -100,15 +112,6 @@ export class UI extends Leaf implements IUI {
     @surfaceType()
     public fill: IPaint | IPaint[] | IPaintString
 
-    // border 
-
-    @pathType()
-    public borderRadius: __Number | __Number[] | IBorderRadiusString
-
-    @affectEventBoundsType(1)
-    public borderWidth: __Number | __Number[] | IBorderWidthString
-
-
     // stroke
 
     @affectEventBoundsType()
@@ -118,7 +121,7 @@ export class UI extends Leaf implements IUI {
     public strokeAlign: IStrokeAlign
 
     @affectEventBoundsType(1)
-    public strokeWidth: __Number
+    public strokeWidth: number | number[] | IStrokeWidthString
 
     @surfaceType('none')
     public strokeCap: IStrokeCap
@@ -139,7 +142,7 @@ export class UI extends Leaf implements IUI {
     // corner
 
     @pathType()
-    public cornerRadius: __Number
+    public cornerRadius: number | number[] | ICornerRadiusString
 
     @pathType()
     public cornerSmoothing: __Number
@@ -176,14 +179,15 @@ export class UI extends Leaf implements IUI {
 
 
     public __updateRenderPath(): void {
-        const { __: data } = this
-        const { cornerRadius, path } = data
-        data.__renderPath = cornerRadius && path ? PathHelper.applyCorner(path, cornerRadius, data.cornerSmoothing) : path
+        if (this.__.path) {
+            const { __: data } = this
+            data.__pathForRender = data.cornerRadius ? PathHelper.smoothCorner(data.path, data.cornerRadius, data.cornerSmoothing) : data.path
+        }
     }
 
     public __drawRenderPath(canvas: ILeaferCanvas): void {
         canvas.beginPath()
-        this.__drawPathByData(canvas, this.__.__renderPath)
+        this.__drawPathByData(canvas, this.__.__pathForRender)
     }
 
     public __drawPath(canvas: ILeaferCanvas): void {
@@ -192,6 +196,6 @@ export class UI extends Leaf implements IUI {
     }
 
     @rewrite(PathHelper.drawData)
-    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void { }
+    public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
 
 }