[Чеширский Кот]

Изначально это выглядит так:



Используя MyFunction(), преображается к такому виду:




Код одного элемента:

<classes:TreeGroup id="v_conteiner0" typeLayout="vertical" x="{this.width/2 - v_conteiner0.width/2}" y="80">
		<classes:TreeGroup id="gp_relative0" x="{v_conteiner0.width/2-gp_relative0.width/2}" height="36">
			<classes:RelativeButton id="relative0" typeLayout="basic" x="0" y="0" width="108" height="36" skinClass="{SkinRelativeButton}" click="openForm(event)"/>
		</classes:TreeGroup>
	<classes:TreeGroup id="h_conteiner0" typeLayout="horizontal"/>
</classes:TreeGroup>

В h_conteiner0 добавляются такие же элементы.

Цель сократить пространство, занимаемое деревом, за счет смещения "одиночек" - элементы A1, A3 и Ребенок3 в данном примере.

HorizontalLayout очень хорошо работает. Когда добавляю элементы, удаляю, то ширина групп v_conteiner0, h_conteiner0 автоматически меняется.
Мне так же необходимо самому вычислять новые координаты Х каждого v_conteiner0 (именно их двигаю), когда возникает в этом необходимость.

Но как только меняю в TreeGroup ширину, то начинается беда: при добавлении и удалении элементов, автоматического изменения ширины не происходит, хотя HorizontalLayout как был так и остается.

Вопрос как мне менять ширину, чтобы не "сбивать" работу HorizontalLayout?
Или если это невозможно, то видимо писать свой Layout? Но решит ли этот вариант поставленную задачу?
Подскажите, как выйти из этой ситуации победителем