Modify a Shape's Bound from a Behavior

[coma]

Ok, I'm a total noob trying to add some widgets to the Sketchy
Collection and started developing an Accordion Menu from using the
List widget as an example:

<Shape id="accordion" displayName="Accordion" icon="Icons/
listbox.png">
<Properties>
<PropertyGroup>
<Property name="box" displayName="Box" type="Dimension">159,80</
Property>
<Property name="disabled" displayName="Disabled" type="Bool">false</
Property>
</PropertyGroup>
<PropertyGroup name="Background">
<Property name="fillColor" displayName="Background Color"
type="Color"><E>$$fillColor</E></Property>
</PropertyGroup>
<PropertyGroup name="Border">
<Property name="strokeColor" displayName="Border Color"
type="Color"><E>$$strokeColor</E></Property>
<Property name="strokeStyle" displayName="Border Style"
type="StrokeStyle"><E>$$strokeStyle</E></Property>
</PropertyGroup>
<PropertyGroup name="Text">
<Property name="contentText" displayName="Text Content"
type="PlainText" p:editInfo="({targetName: 'content', bound:
Bound.fromBox($box, 0, 5), font: $textFont, align: new Alignment(0,
0), multi: true})"><![CDATA[Tienda-
Teléfonos
Fundas
Accesorios
Clientes*
Pedidos
Información
Administración*
Usuarios
Respaldos]]></Property>
<Property name="textFont" displayName="Default Font" type="Font"><E>
$$textFont</E></Property>
<Property name="textColor" displayName="Text Color" type="Color"><E>
$$textColor</E></Property>
<Property name="textAlign" displayName="Text Alignment"
type="Alignment">1,1</Property>
</PropertyGroup>
</Properties>
<Behaviors>
<For ref="content">
<Bound>new Bound(1, 1, $box.w - 2, $box.h - 1)</Bound>
</For>
<For ref="line">
<D>
[
sk(0, 0, $box.w, 0),
skTo($box.w, $box.h),
skTo(0, $box.h),
skTo(0, 0),
z
]
</D>
<StrokeColor>$strokeColor.hollowed($disabled.value ? 0.5 : 0)</
StrokeColor>
<StrokeStyle>$strokeStyle</StrokeStyle>
</For>
<For ref="rect">
<Fill>$fillColor</Fill>
<StrokeColor>$strokeColor.hollowed($disabled.value ? 0.5 : 0)</
StrokeColor>
<StrokeStyle>$strokeStyle</StrokeStyle>
</For>
<For ref="div">
<DomContent>
<![CDATA[

var items = $contentText.value.split(/[\r\n]+/);
var specs = [];
var abierto = false;

for (var i = 0; i < items.length; i ++) {

var title = items[i];
var titulo = title.match(/^(.+)(\*|\-)[ ]*$/);

var css = new CSS();
css.set('font-size', '1em');
css.set('height', '1.7em');
css.set('line-height', '1.7em');
css.set('padding', '.1em .2em');
css.set('color', '#333');
css.set('background', '#fff');

if (titulo) {

title = RegExp.$1;
abierto = RegExp.$2 == '-';

css.set('font-weight', 'bold');
css.set('font-size', '1.2em');
css.set('border-bottom', '2px solid #f00');
css.set('color', '#fff');
css.set('background', '#333');

}

if(titulo || abierto) {

specs.push({
_name: 'div',
_uri: 'http://www.w3.org/1999/xhtml',
_text: title,
style: css
});

}
}

Dom.newDOMFragment(specs);
]]>
</DomContent>
<Font>$textFont</Font>
<Color>$textColor.hollowed($disabled.value ? 0.5 : 0)</Color>
</For>
</Behaviors>
<p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil"
xmlns="http://www.w3.org/2000/svg">
<rect id="bg" rx="0" ry="0" style="fill: white; stroke: none;"/>
<g id="rect">
<path id="line"/>
</g>
<foreignObject id="content">
<div xmlns="http://www.w3.org/1999/xhtml" id="div" ></div>
</foreignObject>
</p:Content>
</Shape>

The thing is that I want to adapt the shape's size to the size of the
content bound so everytime the user writes a new text line it'll
adjust the height, something like:

...

if(titulo || abierto) {

specs.push({
_name: 'div',
_uri: 'http://www.w3.org/1999/xhtml',
_text: title,
style: css
});

}

ShapesBound = new Dimension($box.w, myNewCalculatedHeight);

A nice plus is to disable the vertical bound resize handlers.