Search code examples
htmlsvgqooxdoo

Create a growing and shrinking SVG canvas in a Qooxdoo window with automatic scrollbars when necessary

Using Qooxdoo I want to have a window that only contains a HTML SVG element. This SVG shall use the full available size in the resizable window. And when the window gets too small automatically scrollbars shall appear so that the SVG content is still completely visible (when the user scrolls accordingly)

How can I achieve that?

Solution

  • The some key moments of my solution are:

    • Use qx.ui.embed.Html as wrapper of svg markup
    • Use qx.ui.container.Scroll to make a container or widget scrollable
    • Use properties minWidth and minHeight of widget to stop reducing its size
    • A root svg element in markup has scallable width and height (in this case 100%)
    • Turn off shrinking of svg container (qx.ui.embed.Html) via properties allowShrinkX: false and allowShrinkY: false

    The following code contains all above mentioned things:

    const win = new qx.ui.window.Window();
win.setLayout(new qx.ui.layout.Grow());

const svg = '<svg width="100%" height="100%"><circle cx="50%" cy="50%" r="50%" stroke="black" stroke-width="3" fill="red" /></svg>';
const svgWidget = new qx.ui.embed.Html(svg);
svgWidget.set({allowShrinkX: false, allowShrinkY: false, minWidth: 200, minHeight: 200});

const scroller = new qx.ui.container.Scroll().set({width: 300, height: 300, decorator: "main", padding: 5});
scroller.add(svgWidget, {width: "100%", height: "100%"});
win.add(scroller);

win.open();

const doc = this.getRoot();
doc.add(win,
{
  left : 100,
  top  : 50
});