parro-it/libui-node

ScrollableArea setSize

mischnic opened this issue · 5 comments

Why doesn't this make the area higher on keypresses? (No visual change whatsoever)

'use strict';
const libui = require('..');

const solidBrush = new libui.DrawBrush();
solidBrush.type = libui.brushType.solid;
solidBrush.color = new libui.Color(1, 0, 0, 1);

const solidBrush2 = new libui.DrawBrush();
solidBrush2.type = libui.brushType.solid;
solidBrush2.color = new libui.Color(0.5, 0.5, 0.5, 1);

const width = 400;
let height = 100;

function handlerDraw(area, p) {
	let path = new libui.UiDrawPath(libui.fillMode.winding);
	path.addRectangle(0, 0, width, height);
	path.end();
	p.getContext().fill(path, solidBrush2);
	path.freePath();

	path = new libui.UiDrawPath(libui.fillMode.winding);
	path.addRectangle(20, 230, 100, 100);
	path.end();
	p.getContext().fill(path, solidBrush);
	path.freePath();
}

function noop() {}

function main() {
	const mainwin = new libui.UiWindow('libui textDrawArea Example', 400, 400, 1);
	mainwin.margined = true;
	mainwin.onClosing(() => {
		mainwin.close();
		libui.stopLoop();
	});

	const textDrawArea = new libui.UiArea(handlerDraw, noop, noop, noop,
		() => {
			height += 20;
			console.log(height);
			textDrawArea.setSize(width, height);
	}, width, height);
	const wrapper = new libui.UiVerticalBox();
	wrapper.append(textDrawArea, true);
	mainwin.setChild(wrapper);

	mainwin.show();

	libui.startLoop();
}

main();

Strange... and if you try to decrease height,
the control shrink correctly, but never grows...

With height -= 20;:

area-scroll

EDIT:

With this shrinking works, but growing still has the same issue.

	textDrawArea = new libui.UiArea(handlerDraw, noop, noop, noop,
		() => {
			height -= 20;
			console.log(height);
			textDrawArea.setSize(width, height);
			textDrawArea.queueRedrawAll();
	}, width, height);

You need to call queueRedrawAll to force the redraw.
Also, it grows if you specify a greater initial size for the UiArea.

It seem that setSize method is not working as expected...

      const textDrawArea = new libui.UiArea(handlerDraw, noop, noop, noop,
		() => {
			height += 20;
			textDrawArea.queueRedrawAll();
			textDrawArea.setSize(width, height);
	}, 800, 600);

I put a printf in our method, we are calling uiAreaSetSize with correct values, so this seems a bug in libui itself.
apr-22-2018 22-55-22

Actually, the area doesn't resize at all, only the grey rectangle.

The grey rectangle is the actual size of the area, the red line represents the variables width and height:

bildschirmfoto 2018-04-22 um 23 06 30

Press "a" and "s" to shrink or grow:

'use strict';
const libui = require('..');

let textDrawArea;

const solidBrush = new libui.DrawBrush();
solidBrush.type = libui.brushType.solid;
solidBrush.color = new libui.Color(1, 0, 0, 1);

const solidBrush2 = new libui.DrawBrush();
solidBrush2.type = libui.brushType.solid;
solidBrush2.color = new libui.Color(0.5, 0.5, 0.5, 1);

const stroke = new libui.DrawStrokeParams();
stroke.thickness = 4;

let width = 400;
let height = 400;

function handlerDraw(area, p) {
	let path = new libui.UiDrawPath(libui.fillMode.winding);
	path.addRectangle(0, 0, 10000, 10000);
	path.end();
	p.getContext().fill(path, solidBrush2);
	path.freePath();

	path = new libui.UiDrawPath(libui.fillMode.winding);
	path.addRectangle(20, 230, 100, 100);
	path.end();
	p.getContext().fill(path, solidBrush);
	path.freePath();

	path = new libui.UiDrawPath(libui.fillMode.winding);
	path.newFigure(0, 0);
	path.lineTo(width, width);
	path.end();
	p.getContext().stroke(path, solidBrush, stroke);
	path.freePath();
}

function noop() {}

function main() {
	const mainwin = new libui.UiWindow('libui textDrawArea Example', 600, 600, 1);
	mainwin.margined = true;
	mainwin.onClosing(() => {
		mainwin.close();
		libui.stopLoop();
	});

	textDrawArea = new libui.UiArea(handlerDraw, noop, noop, noop,
		(a,evt) => {
			if(evt.getUp()) return false;
			let v = false;
			if(evt.getKey() === "s"){
				width += 20;
				height += 20;
				v = true;
			} else if(evt.getKey() === "a"){
				width -= 20;
				height -= 20;
				v = true;
			}
			console.log(width);
			textDrawArea.setSize(width, height);
			textDrawArea.queueRedrawAll();
			return v;
	}, width, height);
	const wrapper = new libui.UiVerticalBox();
	wrapper.append(textDrawArea, true);
	mainwin.setChild(wrapper);

	mainwin.show();

	libui.startLoop();
}

main();

We should file an issue on libui repo