View Inspector Scaling

[rogueSkib]

The view inspector highlighting doesn't always render according to view scale.

[collingreen]

Example app that demonstrates the issue (start a new app and put this in Application.js).

/**
 * https://groups.google.com/forum/#!topic/game-closure-devkit/vRMeaLnyUXs
 * https://github.com/gameclosure/devkit/issues/249
 *
 * The main view is scaled, which makes the view inspector highlight the wrong
 * views.
 *
 * Run this game, open the view inspector, and hover over different boxes. The
 * actual input locations are correct (the boxes shrink under the mouse), but
 * when the parent view is scaled the view inspector highlights the wrong views.
 */

import ui.View as View;
import animate;


var config = {
  rows: 5,
  cols: 5,
  padding: 2,
  boxColor: '#ffffff',
  highlight: {scale: .8},
  unhighlight: {scale: 1},
  highlightTime: 500,
  // highlightEvent: 'InputSelect'  // if you want click
  highlightEvent: 'InputOver'
};

exports = Class(GC.Application, function () {

  this.initUI = function () {
    this.grid = this.createGrid();

    this.view.style.scale = 1.5
  };

  this.createGrid = function () {
    var boxWidth = this.view.style.width / config.cols;
    var boxHeight = this.view.style.height / config.rows;

    var grid = [];
    for (var i = 0; i < config.rows; i++) {
      var row = [];
      for (var j = 0; j < config.cols; j++) {
        var actualWidth = boxWidth - config.padding - config.padding;
        var actualHeight = boxHeight - config.padding - config.padding;

        var box = new View({
          superview: this.view,
          width: actualWidth,
          height: actualHeight,
          x: (boxWidth * j) + config.padding,
          y: (boxHeight * i) + config.padding,
          anchorX: actualWidth / 2,
          anchorY: actualHeight / 2,
          backgroundColor: config.boxColor
        });

        box.on(config.highlightEvent, bind(box, function () {
          animate(this)
            .now(config.highlight, config.highlightTime)
            .then(config.unhighlight, config.highlightTime);
        }));

        row.push(
        );
      }
      grid.push(row);
    }

    return grid;
  };
});