Propotionally resize window/views

Questions
1

Is there a method or standard way to change the widths and heights of all Rects in a view? Let’s start with

a = Window("test", Rect(0,0,400,400)).front;
b = a.addFlowLayout(10@5, 20@5);
c = View(a, Rect(0,0,100, 100)).background_(Color.rand);
d = View(a, Rect(0,0,100, 100)).background_(Color.rand);
e = View(a, Rect(0,0,100, 100)).background_(Color.rand);
f = View(a, Rect(0,0,100, 100)).background_(Color.rand);

But say I want to make the window 300x300. Is there a way to make the contained Views 75x75 automatically? The only thing I can think of is adding a variable to multiply all widths and heights by, but that’s so much typing it seems wrong, my project has a lot more than 4 of these. Rect(0,0,100*scale,100*scale)

I was looking at setInnerExtent and similar methods, but I either misunderstood or they didn’t do what I expected. Is there something I’m missing with FlowLayout?

Thanks!

2

FlowLayout is a very old class, and is not fully supported with the newer UI widgets. It may be possible to get some resizing, but it’s likely you’ll need to hand-build this yourself.

Layouts are correct way to get this behavior - there is no equivalent to FlowLayout, but GridLayout is close.

An example:

(
a = Window().front;
a.layout = GridLayout.rows(*[
	View().background_(Color.rand),
	View().background_(Color.rand),
	View().background_(Color.rand),
	View().background_(Color.rand),
].clump(3));
)

Another example, but keeping the elements square (this doesn’t work 100% correctly in all cases, but it’s good enough…)

(
~resize = {
	|v|
	v.fixedWidth = v.bounds.height;
};

a = Window().front;
a.layout = GridLayout.rows(*[
	View().background_(Color.rand).onResize_(~resize),
	View().background_(Color.rand).onResize_(~resize),
	View().background_(Color.rand).onResize_(~resize),
	View().background_(Color.rand).onResize_(~resize),
].clump(3));
)
1 Like
3

Playing around a little… here’s a decent approximation of the FlowLayout “flowing” behavior, inside of a layout.

(
var maxWidth = 200;

var layout, parent;
var views = {
	View(bounds:100@100)
		.minSize_(Size(100, 100))
		.maxWidth_(maxWidth)
		.background_(Color.rand)
} ! 15;

parent = View().layout_(VLayout(
	layout = GridLayout(),
	[nil, stretch:0]
)).front;
parent.minSize = Size(800, 600);

// "FlowLayout" style behavior:
parent.onResize = {
	|parent|
	var row = 0, column = 0;
	var x = 0;
	views.do {
		|view|
		x = x + maxWidth;
		[x, parent.bounds.width].postln;
		if (x > parent.bounds.width) {
			"next line".postln;
			x = maxWidth;
			row = row + 1;
			column = 0;
		};
		[row, column].postln;
		layout.add(view, row, column);
		column = column + 1;
	};
};
parent.onResize.(parent);

)
1 Like
4

FWIW with the introduction of Layouts, I’ve stopped using flowlayouts altogether and tbh I don’t miss them at all.

hjh

5

thanks! I will look into layouts! I was away from SC for a while and thought I was using the new gui thing but I used the old gui thing :joy: