Qustion: How to implement resalable grid layout?

Question

Qustion: How to implement resalable grid layout?

Aukstkalnis opened this issue 4 years ago · comments

Hi Andrew.

I am thinking about creating a tool that is a terminal for serial port. I am thinking about multiple views in one window. Since I am new to web and sciter I am not sure how to create multiple views that can be resized. Kinda like https://strml.github.io/react-grid-layout/examples/0-showcase.html. Or visual studio code multiple files layout. I was thinning, maybe you can give me some tips on how to implement this layout?

Thanks.

Andrew · Answer 1 · Thu Mar 05 2020 09:05:29 GMT+0800 (China Standard Time)

Here d9e01f9
I've started doing that layout manager.

Step1:

Initial sketch of layout management (child replacement).
Basic drag implementation.

Andrew · Answer 2 · Sun Mar 08 2020 11:14:09 GMT+0800 (China Standard Time)

Here is more or less complete version: 1ae8287

The sample is modeled after Packery: https://packery.metafizzy.co/.

I've managed to do whole thing in 190 lines of code. Not sure what those 1500 lines of JS of Packery are doing there.

Note: you should use Sciter v.4.4.1.1 in order to see it properly.

Deimis · Answer 3 · Mon Mar 09 2020 17:22:22 GMT+0800 (China Standard Time)

Nice :) What about resizing?

Andrew · Answer 4 · Wed Mar 11 2020 00:29:12 GMT+0800 (China Standard Time)

Or visual studio code multiple files layout.

how is this related to tiled layout?

As for me VS Code layout is just this:

<html>
    <head>
        <title>Test</title>
        <style>

frameset { border-spacing:6dip; }
frameset > div { background:gold; }

        </style>
        <script type="text/tiscript"></script>
    </head>
    <body>

<frameset cols="*,*,*">
  <div>1</div>
  <div>2</div>
  <frameset rows="*,*">
    <div>3</div>
    <div>4</div>
  </frameset>
</frameset>

    </body>
</html>

Deimis · Answer 5 · Thu Mar 12 2020 17:31:27 GMT+0800 (China Standard Time)

Or visual studio code multiple files layout.

how is this related to tiled layout?

It is not related to tiled layout. It is related to my question about how to implement resizable grid layout. VS Code was just an example for what I would like to do :) Thanks for example. I will try it when I will have time :)

Deimis · Answer 6 · Fri Mar 13 2020 14:20:44 GMT+0800 (China Standard Time)

I tried your example an it looks nice. Can I add frameset elements dynamically? Is it like div element but with resizable option?

Andrew · Answer 7 · Fri Mar 13 2020 22:47:15 GMT+0800 (China Standard Time)

Can I add frameset elements dynamically?

Yes, essentially <frameset> is a block-element like <div> but with special behavior: frame-set applied. See documentation

In principle you can transform any existing <div> element into frame set by defining:

div[rows] { behavior: frame-set; background:#ccc; border-spacing:6dip; }
div[rows] > * { width:* } // children span its whole width
div[cols] { behavior: frame-set; background:#ccc; border-spacing:6dip; }
div[cols] > * { height:* } // children span its whole height

So if you have something like this initially:

<div>
   <terminal />
</div>

and will add second terminal view as a row then you should update your markup to this:

<div rows="*,*>
   <terminal />
   <terminal />
</div>

and that div will behave as a frameset

And more complex layout:

<div rows="*,*">
   <terminal />
   <terminal />
   <div cols="*,*">
      <terminal />
      <terminal />
   </div>
</div>

As of interactivity of such layout...

I think that it will be more convenient to implement "docking drop markers" a la MS Visual Studio:
https://docs.microsoft.com/en-us/visualstudio/ide/customizing-window-layouts-in-visual-studio?view=vs-2019