How to draw custom shapes with draw2d?

Question

I am using draw2d javascript library for drawing predefined shapes and custom shapes in it's canvas.

As I don't have any example made yet, I am trying to copy from it's documentation but doesn't seem to find a good way to research it as it contains a whole lot of it.

Here is the circle example. http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.shape.basic.Circle

and here are some more documentation with examples. http://www.draw2d.org/draw2d_touch/jsdoc_6/

I have premade shapes with html and css and I am trying to drag and drop and render them on canvas like these in this image. Also when dropped, they should have input and output ports too.

Is it possible to convert this html/css to draw2d shapes?

Answer 1

So here this is made possible via extending draw2d's SVGFigure and thus we have ability to provide custom svg to render it as a custom shape.

Below links were useful in this context.

http://www.draw2d.org/draw2d_touch/jsdoc/#!/guide/extending_svg_figure-section-live-example

https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_svg

http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.SetFigure

https://github.com/freegroup/draw2d/tree/master/examples/shape_labeld

https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_markdown