Qustion: How to implement resalable grid layout?

Aukstkalnis commented 4 years ago

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.

c-smile commented 4 years ago

Here https://github.com/c-smile/sciter-sdk/commit/d9e01f9b1aec96c2f1a87f30c285fbbc7536fc25 I've started doing that layout manager.

Step1:

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

c-smile commented 4 years ago

Here is more or less complete version: https://github.com/c-smile/sciter-sdk/commit/1ae8287869477dedb10bbcaa4249c8915749dc52

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.

Aukstkalnis commented 4 years ago

Nice :) What about resizing?

c-smile commented 4 years ago

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>

Aukstkalnis commented 4 years ago

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 :)

Aukstkalnis commented 4 years ago

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

c-smile commented 4 years ago

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

c-smile / sciter-sdk

Qustion: How to implement resalable grid layout? #149