Please document use of the Re-shaping (UI Designer) functionality

[kristianmandrup]

Trying to understand how to use the Zebra UI kit to build a Visual Layout Designer. Browsing through the docs and API, so far all I have found is this:

"This is UI component class that implements possibility to embeds another UI components to control the component size and location visually."

http://repo.zebkit.org/latest/api/classes/zebra.ui.designer.ShaperPan.html

I see various other xyzPan classes as well, however no examples on how to use the re-shaper API/functionality in an app.

[kristianmandrup]

Looking into the zebra/samples I find the ui.demo.designer.js sample:

        var pp = new Panel(new RasterLayout()), lab = new Label("Label");
        lab.setSize(100, 20);
        lab.setLocation(50, 50);
        lab.setBorder(ui.borders.etched);
        pp.add(new ShaperPan(lab));

and

var root = (new zCanvas("designer", 300, 300)).root;
root.properties({
  layout : new BorderLayout(4, 4),
  border : new Border(),
  padding: 8,
  kids: {
    center: new BorderPan("Designer panel", new Panel({
      padding: 6,
      kids: [
        new zebkit.ui.designer.ShaperPan(new Checkbox("Check-box").properties({
          value:true,
          location: [10, 10]
        })),

So I guess the key to this is the pp.add(new ShaperPan(lab)); statement and

        new zebkit.ui.designer.ShaperPan(new Checkbox("Check-box").properties({
          value:true,
          location: [10, 10]
        })

Which there were more examples/docs on how to fully us and fine control this behaviour? Thanks :)