How to create composite figures in draw2d.js

Question

I've looked through the collection of examples, that go with the library, but unfortunatelly, all examples, devoted to composite figures, are based on parsing json file.

reader.unmarshal(canvas, jsonDocument);

However, what I want to see is how to create composite figures from basic ones, something like:

var figure_1 = new draw2d.shape.basic.Rectangle(....);
var figure_1 = new draw2d.shape.basic.Diamond(....);
... then do something, so that figure_1 and figure_2 are now part of
... a composite figure

PS. I think what I need is StrongComposite, but I do not know how to use it. Hope someone can help!

EDIT

This is what I tried:

var baseRectangle =  new draw2d.shape.composite.StrongComposite({width: 200, height: 200, x: conf.x, y: conf.y});
var top = new draw2d.shape.basic.Oval({width: 120, height: 40, x: conf.x, y: conf.y});
var bottom = new draw2d.shape.basic.Oval({width: 120, height: 40, x: conf.x, y: conf.y + 60});
baseRectangle.assignFigure(top);
baseRectangle.assignFigure(bottom);
canvas.add(baseRectangle);

But it does not work. I only see a gray box. I also tried this:

var baseRectangle =  new draw2d.shape.composite.StrongComposite({width: 200, height: 200, x: conf.x, y: conf.y});
var top = new draw2d.shape.basic.Oval({width: 120, height: 40, x: conf.x, y: conf.y});
var bottom = new draw2d.shape.basic.Oval({width: 120, height: 40, x: conf.x, y: conf.y + 60});
baseRectangle.assignFigure(top);
baseRectangle.assignFigure(bottom);
canvas.add(top);
canvas.add(bottom);

But as a result, I got absolutely independent ovals.

score 0 · Answer 1 · edited Sep 17 '16 at 23:42

You also have to add baseRectangle to canvas.

var baseRectangle = new draw2d.shape.composite.StrongComposite({
    width: 200,
    height: 200,
    x: conf.x,
    y: conf.y
});
canvas.add(baseRectangle);

var top = new draw2d.shape.basic.Oval({
    width: 120,
    height: 40,
    x: conf.x,
    y: conf.y
});
var bottom = new draw2d.shape.basic.Oval({
    width: 120,
    height: 40,
    x: conf.x,
    y: conf.y + 60
});

baseRectangle.assignFigure(top);
baseRectangle.assignFigure(bottom);

canvas.add(top);
canvas.add(bottom);

score 0 · Answer 2 · answered Jun 07 '22 at 11:50

In addition to needing to put the child elements on the canvas (sorry, can't comment on existing answer yet): I found I need to wait a frame (nextTick with Vue) before assignFigure can work. Otherwise draw2d throws exception:

TypeError: Cannot read properties of null (reading 'paper')
    at Class.createShapeElement (null:23614:34)
    at Class.getShapeElement (null:8492:33)
    at Class.toFront (null:8351:22)
    at Class.toFront

How to create composite figures in draw2d.js

2 Answers2