How to use data magic branches - worldoptimizer/HypeDataMagic GitHub Wiki

If you don't know how to set data with Hype Data Magic please read and follow the getting started guide. For this example, we will be using the following data:

HypeDataMagic.setData({
	items: [
		{
			location: 'Berlin',
			relation: 'This vibrant city is my current home'
		},
		{
			location: 'Formentera',
			relation: 'I grew up on this beautiful island'
		},
	],
});

This example assumes you are familiar with assign ing data-magic-key and grouping rectangles in Tumult Hype. Now we will explore the possiilities when using the data-magic-branch option.

1. Create a group from some data-magic-key rectangles. Select the group on stage and goto the Identity panel
2. Assign the data-magic-branch to the group set it to items[0].

This setting will now allow all nested rectangles in the group to inherit the branch.

1. Enter the group and select the first rectangle on stage and goto the Identity panel
2. Set the data-magic-key to the remainder missing after the data-magic-branch we set previously on the group. Meaning the full key would have been items[0].location so after splitting it into a branch items[0] the remainder would be location

Repeat the step for the other rectangle and duplicated the group and position it below. The lower group now only need to be changed using the data-magic-branch to items[1] and it will display the data of the second data branch. Having this option allows you to simplify assinig data and to update many nested rectangle by updating only the data-magic-branch on the surrounding group ¹.

Footnotes:

^{1.  Currently, all data-magic-key   in a group inherit the  data-magic-branch if there is one set. If you need to reset a branch to the data root just set the data-magic-branch an empty string. Furthermore, the first occurrence of data-magic-branch traversing the DOM-Tree recursively upwards will be used, meaning that data-magic-branch attributes don't inherit from each other.  I designed it this way to keep things simple. Please contact me on the forum if you want to discuss other possibility, but they would most likely will introduce more complexity and breaking changes. So, be prepared with some good arguments when approach me about that topic.}