Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

View Inspector Scaling #249

Open
rogueSkib opened this issue Oct 9, 2015 · 1 comment
Open

View Inspector Scaling #249

rogueSkib opened this issue Oct 9, 2015 · 1 comment
Labels

Comments

@rogueSkib
Copy link
Contributor

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

@rogueSkib rogueSkib added the bug label Oct 9, 2015
@collingreen
Copy link
Contributor

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

inspector-example

/**
 * 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;
  };
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants