Proposal of extending the Document systems coordiation system

[nielsnl68]

I have a suggestion for the positioning values in the new document model system. Would you be interested to extend this allow more options for the values for x, y, width and height? This would make it a more Responsive terminal layout system, imho.

The proposol

I propose the following that the x, y, width and height could have the following values:

• a positive values are as it is now counting from the top left of the container where the widget is inside. 0 (zero) is first top/left.
• a negative value counts from the opposite side back to the left.
• a widget object in the will use the position/size of the linked widget to calculate the position or size.
• set it to "auto" to calculated based of the content inside. Only valid for width or x and height or y. Not allowed for both.
• For percentages you could use "19%" af value.

Some examples:

widget name {x, y, width, height}

• header {1,1,-1,1} => means the header will be shown on top from fully left to right (like widthPercent=100)
• footer {1.-1.-1,-1} => same as above but now it shows at the bottom.
• leftbar {1, header, 20, footer} => This will automatically between header and footer at the left side of the screen.
• rightbar{-1, header, "20%", footer} => the same as above but now it is shown at the right side. and will take 20% from the space of the parent container.
• body{leftbar,header,rightbar,footer} => this will use the inner space.
• An other header could be for example:
  • headertitle {1,1, 0 ,1, "App title"} => use the length of "App tille" for the width.
  • rowmenu { headertitle,1,clock,1} => will use the space between the headertittle and the clock.
  • clock {-1,1,10,1 } => will show at the right top corner.

PS. just to be clear. I dont suggest to put the x,y, width and height in a new array/object class. shown it like that above to make it simple to read, i think. But in reality you will still fill it like:

var window = new termkit.Window( {
	parent: document ,
	x: 10 ,
	y: 10 ,
	width: 50 ,
	height: 10 ,
        _etc._
}); 

When you like the idea, i could create a PR for it, I dont think it is to much work.