add measure and brush

cocos/new-ui/base/thickness.ts

@@ -67,6 +67,14 @@ export class Thickness extends ValueType {
         this._bottom = val;
     }
 
+    get width () {
+        return this._left + this._right;
+    }
+
+    get height () {
+        return this._top + this._bottom;
+    }
+
     constructor ();
     constructor (uniformLength: number);
     constructor (left: number, top: number, right: number, bottom: number);

cocos/new-ui/base/ui-element.ts

@@ -36,7 +36,7 @@ import { ErrorID, UIError } from './error';
 import { Thickness } from './thickness';
 import { UISlot } from './ui-slot';
 import { UIDocument } from './ui-document';
-import { approx, Mat4, Rect } from '../../core';
+import { approx, Mat4, Rect, Size } from '../../core';
 import { Ray } from '../../core/geometry';
 
 export enum FlowDirection {
@@ -75,6 +75,7 @@ export class UIElement extends AdvancedObject {
     protected _children: Array<UIElement> = [];
     protected _document: UIDocument | null = null;
     protected _layout = new Rect();
+    protected _desiredSize = new Size();
     protected _worldTransform = new Mat4();
     protected _localTransform = new Mat4();
     protected _worldTransformDirty = false;
@@ -418,15 +419,21 @@ export class UIElement extends AdvancedObject {
     }
 
     //#region layout
-    protected onMeasure (availableSize: Vec2) {
-
+    /**
+     * 
+     * @param availableSize 
+     */
+    protected onMeasure (availableSize: Size) {
+        return new Size(0, 0);
     }
 
     protected onArrange (availableRect: Rect) {
 
     }
 
-    public measure (availableSize: Vec2) {
+    // sealed, invoked by layout system
+    public measure (availableSize: Size) {
+        const { width: marginWidth, height: marginHeight} = this.margin;
         this.onMeasure(availableSize);
     }
 
@@ -435,7 +442,10 @@ export class UIElement extends AdvancedObject {
     }
 
     //#endregion layout
-    protected onPaint (drawingContext: IDrawingContext) {}
+
+    protected onPaint (drawingContext: IDrawingContext) {
+
+    }
 
     public hitTest (ray: Ray): boolean {
         return true;

cocos/new-ui/base/ui-slot.ts

@@ -23,11 +23,16 @@
  THE SOFTWARE.
 */
 
+import { Size } from "../../core";
 import { AttachedObject } from "./attached-object";
 import { UIElement } from "./ui-element";
 
 export class UISlot extends AttachedObject {
     constructor (element: UIElement) {
         super(element);
     }
+
+    public onMeasure (availableSize: Size): Size {
+        return new Size(0, 0);
+    }
 }

cocos/new-ui/base/ui-window.ts

@@ -26,7 +26,7 @@
 
 import { AdvancedProperty } from "./advanced-property";
 import { UIElement } from "./ui-element";
-import { Rect } from '../../core/math';
+import { Rect, Size } from '../../core/math';
 import { UIDocument } from "./ui-document";
 import { ContentSlot } from "../framework/content-slot";
 
@@ -43,4 +43,10 @@ export class UIWindow extends UIElement {
         super();
         this._document = document;
     }
+
+    onMeasure (availableSize: Size) {
+        this._desiredSize.set(availableSize);
+        this._children[0]?.measure(availableSize);
+        return this._desiredSize;
+    }
 }

cocos/new-ui/framework/canvas.ts

@@ -24,8 +24,26 @@
  THE SOFTWARE.
 */
 
+import { Size } from "../../core";
 import { UIElement } from "../base/ui-element";
+import { UISlot } from "../base/ui-slot";
+import { CanvasSlot } from "./canvas-slot";
 
 export class Canvas extends UIElement {
-
+    protected allowMultipleChild () {
+        return true;
+    }
+
+    protected getSlotClass (): typeof UISlot | null{
+        return CanvasSlot;
+    }
+
+    onMeasure (availableSize: Size) {
+        this._desiredSize.set(availableSize);
+        const childAvailableSize = new Size(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);
+        for (let i = 0; i < this._children.length; i++) {
+            this._children[i].measure(childAvailableSize);
+        }
+        return this._desiredSize;
+    }
 }

cocos/new-ui/framework/image.ts

@@ -24,8 +24,33 @@
  THE SOFTWARE.
 */
 
+import { Size } from "../../core";
+import { AdvancedProperty } from "../base/advanced-property";
 import { UIElement } from "../base/ui-element";
+import { UISlot } from "../base/ui-slot";
+import { Brush } from "../rendering/brush";
 
-class Image extends UIElement {
+export class Image extends UIElement {
+    public static ImageSourceProperty = AdvancedProperty.register('ImageSource', Brush, Image, Brush.default);
+
+    get imageSource (): Readonly<Brush> {
+        return this.getValue(Image.ImageSourceProperty);
+    }
+
+    set imageSource (val: Readonly<Brush>) {
+        this.setValue(Image.ImageSourceProperty, val);
+    }
 
+    protected allowMultipleChild () {
+        return false;
+    }
+
+    protected getSlotClass (): typeof UISlot | null{
+        return null;
+    }
+
+    onMeasure (availableSize: Size) {
+        const { width: naturalWidth, height: naturalHeight } = this.imageSource;
+        return new Size(naturalWidth, naturalHeight);
+    }
 }

cocos/new-ui/rendering/brush.ts

@@ -0,0 +1,71 @@
+
+/*
+ Copyright (c) 2017-2022 Xiamen Yaji Software Co., Ltd.
+
+ http://www.cocos.com
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated engine source code (the "Software"), a limited,
+  worldwide, royalty-free, non-assignable, revocable and non-exclusive license
+ to use Cocos Creator solely to develop games on your target platforms. You shall
+  not use Cocos Creator software for developing other software or tools that's
+  used for developing games. You are not granted to publish, distribute,
+  sublicense, and/or sell copies of Cocos Creator.
+
+ The software or tools in this License Agreement are licensed, not sold.
+ Xiamen Yaji Software Co., Ltd. reserves all rights not expressly granted to you.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+*/
+
+import { Color } from "../../core";
+
+enum BrushType {
+    COLOR,
+    TEXTURE,
+    RENDER_TEXTURE,
+    SPRITE_FRAME,
+    MATERIAL,
+    VECTOR_IMAGE
+}
+
+export class Brush {
+    static default = Object.freeze(new Brush());
+
+    private _type: BrushType = BrushType.COLOR
+    private _tintColor = Color.WHITE;
+    private _width = 0;
+    private _height = 0;
+
+    get type () {
+        return this._type;
+    }
+
+    get width () {
+        return this._width;
+    }
+
+    set height (val) {
+        this._height = val;
+    }
+
+    get height () {
+        return this._height;
+    }
+
+    get tintColor (): Readonly<Color> {
+        return this._tintColor;
+    }
+
+    set tintColor (color: Color) {
+        if (this._tintColor.equals(color)) {
+            this._tintColor.set(color);
+        }
+    }
+}

tests/new-ui/thickness.test.ts

@@ -40,4 +40,22 @@ test('thickness', () => {
     expect(thickness.equals(thickness2)).toBeFalsy();
 
 
-})
+});
+
+test('width and height', () => {
+    const thickness = new Thickness();
+    expect(thickness.height).toBe(0);
+    expect(thickness.width).toBe(0);
+    thickness.left = 10;
+    thickness.right = 20;
+    thickness.top = 30;
+    thickness.bottom = 10;
+    expect(thickness.width).toBe(30);
+    expect(thickness.height).toBe(40);
+    thickness.left = 5;
+    thickness.right = -20;
+    thickness.top = 20;
+    thickness.bottom = -20;
+    expect(thickness.width).toBe(-15);
+    expect(thickness.height).toBe(0);
+});