Canvas resize with Flexbox and Enyo

Question

I am having a problem with resizing the coordinate system of a canvas when using Flexbox and Enyo. See the example at: http://jsfiddle.net/g7MLS/1989/

When you first run it, everything is fine. Shrink the width of the box and the line of text stays 1 line until the canvas gets to min-width, then the text starts to wrap.

To see the problem, uncomment the lines:

c.width = b.width;
c.height = b.height;

Flexbox appears to now be using the internal coordinate width to arrange things...or something. The text will now start wrapping before the canvas shrinks to min-width.

I can't duplicate the exact setup without Enyo, but this is close and doesn't seem to do the same thing: https://jsfiddle.net/ez6b2q8v/103/

The way I understand it, setting the canvas width/height should only affect the internal coordinates, not the size of the canvas itself. What am I missing?

var ready = require('enyo/ready'),
  kind = require('enyo/kind'),
  Toolbar = require('onyx/Toolbar'),
  Application = require('enyo/Application'),
  Button = require('enyo/Button');


ready(function() {
  var MySample = kind({
    name: "MySample",
    rendered: function() {
      this.inherited(arguments);
      c = this.$.myCanvas.hasNode();
      b = this.$.myCanvas.getBounds()
      //c.width = b.width;
      //c.height = b.height;
      console.log(c.width);
    },
    buttonTapped: function(inSender, inEvent) {
      this.render();
      return true;
    },

    components: [{
      classes: "main",
      components: [{
        classes: "content",
        components: [{
          classes: "canvas",
          tag: "canvas",
          name: "myCanvas"
        }, {
          classes: "label",
          content: "This text should be on 1 line, but wrap when canvas == min-width"
        }]
      }, {
        kind: Button,
        ontap: "buttonTapped",
        content: "Render",
      }]
    }],

  });

  app = new Application({
    view: MySample
  });
});

.main {
  position: relative;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background: red;
}

.content {
  order: 0;
  display: flex;
  background: yellow;
  flex: 1 1 auto;
}

.canvas {
  padding: 4px;
  margin: auto;
  min-width: 100px;
  flex: 1 1 auto;
  height: 40px;
  background: blue;
  box-sizing: border-box;
}

.label{
  flex: 0 1 auto;
}

score 1 · Accepted Answer · edited Sep 26 '17 at 16:11

In the absence of CSS dimensions, the height and width of the canvas will also be used as the dimensions. If you specify CSS dimension that are different that the properties, the canvas will be distorted to fix the specified size. See Canvas width and height in HTML5.

If you want the canvas internal coordinates to be adjusted with the flex layout, you'll have to handle resizes as you demonstrated in your fiddle. In Enyo, you can add a handleResize method to MySample to update the canvas' properties.

kind({
  name: "MySample",
  rendered: function () {
    this.inherited(arguments);
    this.setupCanvas();
  },
  handleResize: function () {
    this.inherited(arguments);
    this.setupCanvas();
  },
  setupCanvas: function() {
    var c = this.$.myCanvas.hasNode();
    var b = this.$.myCanvas.getBounds()
    c.width = b.width;
    c.height = b.height;
  },
  buttonTapped: function(inSender, inEvent) {
    this.render();
    return true;
  },

  components: [{
    classes: "main",
    components: [{
      classes: "content",
      components: [{
        classes: "canvas",
        tag: "canvas",
        name: "myCanvas"
      }, {
        classes: "label",
        content: "This text should be on 1 line, but wrap when canvas == min-width"
      }]
    }, {
      kind: Button,
      ontap: "buttonTapped",
      content: "Render",
    }]
  }],

});

I was aware of handleResize, but in the actual project, it never gets called on these controls. The control in question is 6 or 7 levels deep, and I'm using a splitter-type control to allow horizontal resizing of the two main areas. While trying to figure out why it's never called, I realized that the splitter was not calling resize() on the two main areas. I modified it to call resize(), but handleResize is still never called on this control. It does, however, now work properly. Somehow, calling resize on its great, great, ..., grandparent makes it work. — k_hampton, Aug 05 '16 at 03:54

Canvas resize with Flexbox and Enyo

1 Answers1