Search code examples
javascriptclassgoogle-apps-scripteventsonchange

Server side onchange event for custom class


If I create a custom class in Google Apps Script and assign it to a variable, can I create a server side onchange event that will react when the values change? For example, something like:

    var Polygon = function(height, width) {
      this.height = height;
      this.width = width;
      this.save = function() { <code to draw the polygon here ...> };
    }
    Polygon.onchange = function() {
      currentPolygon = this.value;
      currentPolygon.draw();
    }
    var myPolygon = new Polygon(10, 12);
    myPolygon.height = 20; // triggers draw

Or, must it be included in a set function? For example:

    var Polygon = function(height, width) {
      var myHeight = height;
      var myWidth = width;
      this.height = function() { return myHeight; }
      this.width = function() { return myWidth; }
      this.draw = function() { <code to draw the polygon here ...> };
      this.changeHeight = function(value) {
        myHeight = value;
        this.draw();
      }
      this.changeWidth = function(value) {
        myWidth = value;
        this.draw();
      }
    }
    var myPolygon = new Polygon(10, 12);
    myPolygon.changeHeight(20);

Solution

  • There is no such handler. But you can use a proxy to intercept all set calls:

    /*<ignore>*/console.config({maximize:true,timeStamps:false,autoScroll:false});/*</ignore>*/
    
    const Polygon = function(height, width) {
      this.height = height;
      this.width = width;
      this.drawn = 0;
      this.draw = function() {
        this.drawn += 1;
      };
    };
    const PolygonOnchangeHandler = {
      set(target, prop, value) {
        Reflect.set(target, prop, value);//calls set
        Reflect.apply(target.draw, target, []);//calls draw
      },
    };
    const myPolygon = new Proxy(new Polygon(10, 12), PolygonOnchangeHandler);
    myPolygon.height = 20; // trigges draw
    console.log(myPolygon.drawn);//drawn once
    myPolygon.width = 5;
    console.log(myPolygon.drawn);//drawn twice
    <!-- https://meta.stackoverflow.com/a/375985/ -->    <script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>