DrawPane height constraint?

[ESutherland]

I have a DrawPane, with a child of a VLayout that will add members at initWidget, which causes the height to grow.
Despite the fact that DrawPane says the overflow is inherited from Canvas and should be "visible" it hides any items beyond 100px.
I can set overflow: "visible" and then it will not hide items beyond 100px, but it won't draw items past 100px.


SmartClient version (available on lower left of Developer Console)
SmartClient Version: v11.0p_2017-02-16/Pro Development Only (built 2017-02-16)

[ESutherland]

Here is a working example if it helps

isc.defineClass("ValueMapEditor", "DrawPane").addProperties({
width: 500,
overflow: "visible",
backgroundColor: "lightblue",
drawPairing: function(){
var startX = this.yourValues.selectedRecord.getPageRight();
var startY = this.yourValues.selectedRecord.getPageMiddle();
var endX = this.ourValues.selectedRecord.getPageLeft();
var endY = this.ourValues.selectedRecord.getPageMiddle();

isc.DrawLine.create({
drawPane: this,
startPoint: [startX, startY],
endPoint: [endX, endY]
});
},
checkForCompletedPairing(){
if(this.yourValues.selectedRecord && this.ourValues.selectedRecord){
this.drawPairing();
this.yourValues.deselectAllRecords();
this.ourValues.deselectAllRecords();

this.yourValues.selectedRecord = null;
this.ourValues.selectedRecord = null;
}
},
initWidget: function(){
this.Super("initWidget", arguments);

this.yourValues = this.createAutoChild("valuesContainer", {
records: this.yourValues
});
this.ourValues = this.createAutoChild("valuesContainer", {
records: this.ourValues
});

this.addAutoChild("masterLayout", {
members: [this.yourValues, this.ourValues]
});
},
masterLayoutDefaults: {
_constructor: isc.HLayout,
width: "100%"
},
valuesContainerDefaults: {
_constructor: isc.VLayout,
autoParent: "masterLayout",
deselectAllRecords: function(){
var members = this.getMembers();

for(var i=0; i<members.length; i++){
members[i].deselect();
}
},
setSelectedRecord: function(member){
this.selectedRecord = member;
this.deselectAllRecords();
member.select();

this.creator.checkForCompletedPairing();
},
setValueItems: function(){
var members = [];
for(var i=0; i<this.records.length; i++){
var recordAtIndex = this.records[i];

members.push(this.createAutoChild("valuesItem", {
contents: recordAtIndex
}))
}

this.setMembers(members);
},
initWidget: function(){
this.Super("initWidget", arguments);

this.setValueItems();
},
valuesItemDefaults: {
_constructor: isc.Label,
height: 10,
width: 2,
padding: 4,
margin: 2,
backgroundColor: "white",
getPageMiddle: function(){
var top = this.getPageTop();
var bottom = this.getPageBottom();

return bottom - ((bottom - top) / 2);
},
select: function(){
this.setBackgroundColor("lightgrey");
},
deselect: function(){
this.setBackgroundColor("white");
},
click: function(){
this.creator.setSelectedRecord(this);
}
}
}
})

var ourValues = ["Active", "Inactive", "Suspended", "Terminated"]
var yourValues = ["Silly", "Ugly", "Good", "Bad", "Terminated"]
isc.ValueMapEditor.create({
ourValues: ourValues,
yourValues: yourValues
});

[Isomorphic]

DrawPanes do not automatically overflow to accommodate the shapes you draw - the overflow:visible setting basically just means the underlying SVG or <canvas> element won't be clipped off, but that's sized to the extents of the DrawPane.

Trying to auto-size to your rendered shapes would be a large, complicated feature.