Qustion: How to implement resalable grid layout? #198

Aukstkalnis · 2020-03-04T15:46:24Z

Aukstkalnis
Mar 4, 2020

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 · 2020-03-05T01:05:29Z

c-smile
Mar 5, 2020
Maintainer

Here d9e01f9
I've started doing that layout manager.

Step1:

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

0 replies

c-smile · 2020-03-08T03:14:09Z

c-smile
Mar 8, 2020
Maintainer

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.

0 replies

Aukstkalnis · 2020-03-09T09:22:22Z

Aukstkalnis
Mar 9, 2020
Author

Nice :) What about resizing?

0 replies

c-smile · 2020-03-10T16:29:12Z

c-smile
Mar 10, 2020
Maintainer

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>

0 replies

Aukstkalnis · 2020-03-12T09:31:27Z

Aukstkalnis
Mar 12, 2020
Author

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

0 replies

Aukstkalnis · 2020-03-13T06:20:44Z

Aukstkalnis
Mar 13, 2020
Author

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

0 replies

c-smile · 2020-03-13T14:47:15Z

c-smile
Mar 13, 2020
Maintainer

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

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Qustion: How to implement resalable grid layout? #198

{{title}}

Replies: 7 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Qustion: How to implement resalable grid layout? #198

Aukstkalnis Mar 4, 2020

Replies: 7 comments

c-smile Mar 5, 2020 Maintainer

c-smile Mar 8, 2020 Maintainer

Aukstkalnis Mar 9, 2020 Author

c-smile Mar 10, 2020 Maintainer

Aukstkalnis Mar 12, 2020 Author

Aukstkalnis Mar 13, 2020 Author

c-smile Mar 13, 2020 Maintainer

Aukstkalnis
Mar 4, 2020

c-smile
Mar 5, 2020
Maintainer

c-smile
Mar 8, 2020
Maintainer

Aukstkalnis
Mar 9, 2020
Author

c-smile
Mar 10, 2020
Maintainer

Aukstkalnis
Mar 12, 2020
Author

Aukstkalnis
Mar 13, 2020
Author

c-smile
Mar 13, 2020
Maintainer