text: phina.define("Gauge", {
    superClass: "RectangleClip",
  
    _min: 0,
    _max: 1.0,
    _value: 1.0, //min ~ max
  
    direction: "horizontal", // horizontal or vertical
  
    init: function() {
      this.superInit();
      this.on("attached", () => {
        this._width = this.width;
        this._height = this.width;
  
        this.target.accessor("Gauge.min", {
          "get": () => this.min,
          "set": (v) => this.min = v,
        });
  
        this.target.accessor("Gauge.max", {
          "get": () => this.max,
          "set": (v) => this.max = v,
        });
  
        this.target.accessor("Gauge.value", {
          "get": () => this.value,
          "set": (v) => this.value = v,
        });
  
        this.target.accessor("Gauge.progress", {
          "get": () => this.progress,
          "set": (v) => this.progress = v,
        });
      });
    },
  
    _refresh: function() {
      if (this.direction !== "vertical") {
        this.width = this.target.width * this.progress;
        this.height = this.target.height;
      } else {
        this.width = this.target.width;
        this.height = this.target.height * this.progress;
      }
    },
  
    _accessor: {
      progress: {
        get: function() {
          const p = (this.value - this.min) / (this.max - this.min);
          return (isNaN(p)) ? 0.0 : p;
        },
        set: function(v) {
          this.value = this.max * v;
        }
      },
  
      max: {
        get: function() {
          return this._max;
        },
        set: function(v) {
          this._max = v;
          this._refresh();
        }
      },
  
      min: {
        get: function() {
          return this._min;
        },
        set: function(v) {
          this._min = v;
          this._refresh();
        }
      },
  
      value: {
        get: function() {
          return this._value;
        },
        set: function(v) {
          this._value = v;
          this._refresh();
        }
      },
    }
  
  });
  