Rescale instances to fit Flex Repeater

Ignition
1

Is there The Other Way Around to this:

Where Flex Repeater size remain constant. Element's width height is reduced for all instances to fit.

If there is no easy way to do this, I am ok with doing it the hard way.

Hardway:

while overflow occurs on flex repeater:
    then reduce element's width and height

Is it possible to check overflow?
Is there a property under "elementStyle" to change each element's height width?

Edit1:
I guess there is no way to detect if repeater overflown.
But I can get its width and height.
Width = primaryView.width - 2xpadding - 2xmargin
Height = its basis..

I can create multiple template, with different height and width.

Next comes the hard part.
Given the number of instance.
Apply logic to path property:
Binding returns the right template such that no overflow occurs

How can I know which template to use, such that there is no overflow.

Or

I could write a message handler script to set templates width and path.
Or pass it to the template's params.

2

I did it, instances will even grow accordingly.

image

image

	viewWidth     = value['viewWidth']
	viewHeight    = value['viewHeight']
	
	defaultWidth  = self.view.props.defaultSize.width
	defaultHeight = self.view.props.defaultSize.height
	
	basisTitle    = self.getSibling("FlexContainer").position.basis
	basisRepeater = self.position.basis
	basisBottom   = self.getSibling("Flex Vertical").position.basis
	
	basisTitle    = int(basisTitle.split("p")[0])
	basisRepeater = int(basisRepeater.split("p")[0])
	basisBottom   = int(basisBottom.split("p")[0])
	
	#on designer viewWidth and viewHeight is 0
	#is set to views default size
	
	if viewWidth == 0:
	    viewWidth = defaultWidth
	
	if viewHeight == 0:
	    viewHeight = defaultHeight
	
	horizontalMarginPadding = 2*20	
	
	repeaterWidth = viewWidth - horizontalMarginPadding
	repeaterHeight = basisRepeater + viewHeight - defaultHeight
	#clip height
	if repeaterHeight < basisRepeater:
	    repeaterHeight = basisRepeater

	
	repeaterArea = repeaterWidth * repeaterHeight
	
        #my instance is square, A = w^2, solving for w=sqrt(A/n) 
	instanceWidth = (repeaterArea/n)**(0.5)
	
	#recalculate repeaters dimension with instanceWidth allowance 
	repeaterWidth = repeaterWidth - instanceWidth	
	repeaterHeight = repeaterHeight - instanceWidth
	
	repeaterArea = repeaterWidth * repeaterHeight
	
	instanceWidth = (repeaterArea/trackerCount)**(0.5)
	
	instances = []
	
	#create number of rows in instances depending on number of tracker
	for ctr in range(n):
	    dict = {}
	    dict['width'] = int(instanceWidth)
	    instances.append(dict)
	
	return instances

:slight_smile:

3

java_he3GKHvxmy

I don't exactly understand, are you looking for something like this?

1 Like
4

No.. the size of container must remains the same. But when you add more instances, the instances' size will reduce so that it will fit the container (flex repeater).

5

java_EQJGSfZoK4

Like this?

1 Like
6

Yes. :slight_smile: my instances come in rows and columns though.. cool animation, what do you use to save clip?

I have a dropdown(category), some category shows 10 instances, some can be 80. But container size should remain fix.

7
  1. Set the Flex Repeater to wrap.
  2. Set elementPosition to grow: 1 shrink: 1 basis: auto.
  3. Set alignItems and alignContent to stretch.

This will allow your instances to grow and shrink as needed to fill the full repeater.

You can also play with assigning minHeight, maxHeight, minWidth, and maxWidth on your repeated instance in order to cap the amount of shrinking/growing.

ShareX

2 Likes