ktechila

`importSVG(canvas, rawSVG)` is supported for raw SVG string. It can be load SVG as a string using fetch.

We use JSON input to load the components. Here is the sample example I have tried. ``` document.addEventListener("DOMContentLoaded", function () { var jsonDoc = '[{"type":"draw2d.shape.node.HorizontalBus","id":"ebf80470-6606-e33f-d01d-147683262b5a","x":100,"y":60,"width":600,"height":20,"alpha":1,"selectable":true,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_shape_node_HorizontalBus","ports":[{"type":"draw2d.HybridPort","id":"4ee886c5-cae5-4042-9c2d-a9efce5ab3a6","width":10,"height":10,"alpha":1,"selectable":false,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_HybridPort","bgColor":"rgba(79,104,112,1)","color":"rgba(27,27,27,1)","stroke":1,"dasharray":null,"maxFanOut":9007199254740991,"name":"hybrid0","semanticGroup":"global","port":"draw2d.HybridPort","locator":"draw2d.layout.locator.CenterLocator","locatorAttr":{}}],"bgColor":"rgba(41,170,119,1)","color":"rgba(69,216,229,1)","stroke":1,"radius":0,"dasharray":null,"dirStrategy":1},{"type":"draw2d.shape.node.VerticalBus","id":"c0bc50d6-7a21-72ed-ca39-948c4809f9f6","x":400,"y":160,"width":21.5,"height":200,"alpha":1,"selectable":true,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_shape_node_VerticalBus","ports":[{"type":"draw2d.HybridPort","id":"4e6d9f88-c9c0-32ee-0f65-84292f8fadf5","width":10,"height":10,"alpha":1,"selectable":false,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_HybridPort","bgColor":"rgba(79,104,112,1)","color":"rgba(27,27,27,1)","stroke":1,"dasharray":null,"maxFanOut":9007199254740991,"name":"hybrid0","semanticGroup":"global","port":"draw2d.HybridPort","locator":"draw2d.layout.locator.CenterLocator","locatorAttr":{}}],"bgColor":"rgba(41,170,119,1)","color":"rgba(69,216,229,1)","stroke":1,"radius":0,"dasharray":null,"dirStrategy":2,"label":"vertical bus"},{"type":"draw2d.shape.node.Fulcrum","id":"9e08ce32-f02c-463f-06d5-36df5dbc3725","x":300,"y":360,"width":40,"height":40,"alpha":1,"selectable":true,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_shape_node_Fulcrum","ports":[{"type":"draw2d.HybridPort","id":"de59dced-fb0d-f69f-72ba-aa99d54b4018","width":10,"height":10,"alpha":1,"selectable":false,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_HybridPort","bgColor":"rgba(79,104,112,1)","color":"rgba(27,27,27,1)","stroke":1,"dasharray":null,"maxFanOut":9007199254740991,"name":"hybrid0","semanticGroup":"global","port":"draw2d.HybridPort","locator":"draw2d.layout.locator.CenterLocator","locatorAttr":{}}],"bgColor":"rgba(0,0,0,0)","color":"rgba(0,0,0,0)","stroke":0,"radius":10,"dasharray":null,"dirStrategy":0},{"type":"draw2d.shape.node.Start","id":"16e90340-b489-c8cb-3155-35d5876efbbd","x":50,"y":297,"width":50,"height":50,"alpha":1,"selectable":true,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_shape_node_Start","ports":[{"type":"draw2d.OutputPort","id":"1e9a992b-fa6a-5863-1ccf-e182ad3455ad","width":10,"height":10,"alpha":1,"selectable":false,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_OutputPort","bgColor":"rgba(79,104,112,1)","color":"rgba(27,27,27,1)","stroke":1,"dasharray":null,"maxFanOut":9007199254740991,"name":"output0","semanticGroup":"global","port":"draw2d.OutputPort","locator":"draw2d.layout.locator.OutputPortLocator","locatorAttr":{}}],"bgColor":"rgba(77,144,254,1)","color":"rgba(69,130,229,1)","stroke":1,"radius":0,"dasharray":null},{"type":"draw2d.shape.node.End","id":"c9f85fd0-836c-3642-61fe-19865f078d6b","x":621,"y":172,"width":59,"height":50,"alpha":1,"selectable":true,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_shape_node_End","ports":[{"type":"draw2d.InputPort","id":"49496709-aa62-23ae-cb0b-8aff3f6cdb57","width":10,"height":10,"alpha":1,"selectable":false,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_InputPort","bgColor":"rgba(79,104,112,1)","color":"rgba(27,27,27,1)","stroke":1,"dasharray":null,"maxFanOut":9007199254740991,"name":"input0","semanticGroup":"global","port":"draw2d.InputPort","locator":"draw2d.layout.locator.InputPortLocator","locatorAttr":{}}],"bgColor":"rgba(77,144,254,1)","color":"rgba(69,130,229,1)","stroke":1,"radius":0,"dasharray":null},{"type":"draw2d.Connection","id":"d92de9bc-fd70-a2d4-8937-e98e819784b8","alpha":1,"selectable":true,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_Connection","stroke":2,"color":"rgba(18,156,228,1)","outlineStroke":0,"outlineColor":"rgba(0,0,0,0)","policy":"draw2d.policy.line.LineSelectionFeedbackPolicy","vertex":[{"x":421.5,"y":197},{"x":621,"y":197}],"router":"draw2d.layout.connection.DirectRouter","radius":3,"source":{"node":"c0bc50d6-7a21-72ed-ca39-948c4809f9f6","port":"hybrid0"},"target":{"node":"c9f85fd0-836c-3642-61fe-19865f078d6b","port":"input0"}},{"type":"draw2d.Connection","id":"2d160f4a-7652-4ccd-d3a4-d368e1cb19cf","alpha":1,"selectable":true,"draggable":true,"angle":0,"userData":{},"cssClass":"draw2d_Connection","stroke":2,"color":"rgba(18,156,228,1)","outlineStroke":0,"outlineColor":"rgba(0,0,0,0)","policy":"draw2d.policy.line.LineSelectionFeedbackPolicy","vertex":[{"x":100,"y":322},{"x":400,"y":322}],"router":"draw2d.layout.connection.DirectRouter","radius":3,"source":{"node":"16e90340-b489-c8cb-3155-35d5876efbbd","port":"output0"},"target":{"node":"c0bc50d6-7a21-72ed-ca39-948c4809f9f6","port":"hybrid0"}}]' // create the canvas...

I found this is the important part for the hybrid port of the hub. src/shape/node/Hub.js : Line 77 ``` this.port.setConnectionAnchor(new draw2d.layout.anchor.ShortesPathConnectionAnchor(this.port)) this.port.setVisible(false) ``` But when we load from the JSON,...