Redimensionnement du canevas avec Flexbox et Enyo

Question

J'ai un problème avec le redimensionnement du système de coordonnées d'un canevas lors de l'utilisation de Flexbox et Enyo. Voir l'exemple sur: http://jsfiddle.net/g7MLS/1989/

Lorsque vous l'exécutez pour la première fois, tout va bien. Réduire la largeur de la boîte et la ligne de texte reste 1 ligne jusqu'à ce que le canevas arrive à min-width, puis le texte commence à envelopper.

Pour voir le problème, supprimez les lignes:

C.WIDTH = b.width;
c.hauteur = b.hauteur; FlexBox semble utiliser la largeur de coordonnées interne pour organiser les choses ... ou quelque chose. Le texte commencera maintenant à se rétracter avant que la toile ne rétrécisse en min largeur.

Je ne peux pas dupliquer la configuration exacte sans Enyo, mais est proche et ne semble pas faire la même chose: https://jsfiddle.net/ez6b2q8v/103/

La façon dont je le comprends, réglage de la largeur toile/hauteur ne devrait affecter que les coordonnées internes, pas la taille de la toile elle-même. Qu'est-ce que je rate?

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; 
 
}

Answer 1

En l'absence de dimensions CSS, le height et width de la toile sera également utilisé comme les dimensions. Si vous spécifiez des dimensions CSS différentes des propriétés, le canevas sera déformé pour corriger la taille spécifiée. Voir Canvas width and height in HTML5.

Si vous souhaitez que les coordonnées internes de la toile soient ajustées avec la disposition flexible, vous devrez gérer les redimensionnements comme vous l'avez démontré dans votre violon. Dans Enyo, vous pouvez ajouter une méthode handleResize à MySample pour mettre à jour les propriétés du canevas.

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", 
    }] 
    }], 

});