# Size

{% hint style="success" %}
an obect that has <mark style="color:yellow;">**width**</mark> and <mark style="color:yellow;">**height**</mark>.

:point\_right: [..](https://lochiwei.gitbook.io/web/appendix/custom "mention")
{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}

* replit ⟩ [various boxes](https://replit.com/@pegasusroe/various-boxes#js/Size.js) , require -> [vector](https://lochiwei.gitbook.io/web/appendix/custom/class/vector "mention")

```javascript
// 2023.01.21 - 12:57 (+) .vector
// 2023.01.18 - 14:23 (+) size()
// 2023.01.17 - 21:09 (•) first draft
// -----------------------------------------------

// ⭐️ import
import { vec } from './Vector.js';       // Vector

// ⭐️ Size
// -----------------------------------------------
// - new Size(w, h)
// - new Size({width, height})
// - size(...args)
// -----------------------------------------------
// 🔸 .width
// 🔸 .height
// 🔸 .vector
// -----------------------------------------------
// 🔹 .toString()
//
class Size {

    // constructor
    constructor(...args) {
        
        const argLen = args.length;
        let width, height;
        
        switch (argLen) {
            // treat as (x, y)
            case 2: [width, height] = args; break;
            // treat as {x, y}
            case 1: [width, height] = [args[0].width, args[0].height]; break;
            // throw error otherwise
            default: 
                throw new Error(`expecting 1 or 2 arguments, but got ${argLen}`)
        }

        this.width = width;
        this.height = height;
    }

    // 🔸 .vector
    get vector() {
        return vec(this.width, this.height);
    }

    // 🔹 .toString()
    toString() {
        return `(${this.width}, ${this.height})`;
    }
}

// convenience factory functions
function size(...args) {
    return new Size(...args);
}

// ⭐️ exprt
// -----------------------------------------------
export {Size, size};    // ES module
```

{% endtab %}

{% tab title="💈範例" %}
:floppy\_disk: replit：[Rect](https://replit.com/@pegasusroe/JS-Rect#script.js)

```javascript
// code
```

{% endtab %}

{% tab title="👥 相關" %}

* [vector](https://lochiwei.gitbook.io/web/appendix/custom/class/vector "mention")
  {% endtab %}

{% tab title="⬇️ 應用" %}

* [rect](https://lochiwei.gitbook.io/web/appendix/custom/class/rect "mention")
  {% endtab %}
  {% endtabs %}

## History

{% tabs %}
{% tab title="idx" %}

```
0: (•)(+) size()
```

{% endtab %}

{% tab title="0" %}

```javascript
// 2023.01.18 - 14:23 (+) size()
// 2023.01.17 - 21:09 (•) first draft
// -----------------------------------------------

// ⭐️ Size
// -----------------------------------------------
// - new Size(w, h)
// - new Size({width, height})
// - size(...args)
// -----------------------------------------------
// 🔸 .width
// 🔸 .height
// -----------------------------------------------
// 🔹 .toString()
//
class Size {

    // constructor
    constructor(...args) {
        
        const argLen = args.length;
        let width, height;
        
        switch (argLen) {
            // treat as (x, y)
            case 2: [width, height] = args; break;
            // treat as {x, y}
            case 1: [width, height] = [args[0].width, args[0].height]; break;
            // throw error otherwise
            default: 
                throw new Error(`expecting 1 or 2 arguments, but got ${argLen}`)
        }

        this.width = width;
        this.height = height;
    }

    // 🔹 .toString()
    toString() {
        return `(${this.width}, ${this.height})`;
    }
}

// convenience factory functions
function size(...args) {
    return new Size(...args);
}

// ⭐️ exprt
// -----------------------------------------------
export {Size, size};    // ES module
```

{% endtab %}
{% endtabs %}