freegroup
draw2d.io.Reader.unmarshal doesn't work properly for Hub components
Description
When the draw2d.io.Reader.unmarshal function retrieves a JSON document, the ports are incorrectly mapped to the hub component. All the connections focus on the central port on the hub.
for me, the bus and hub is working well. maybe you do not serialize the "anchor". can you share the code?
working example: https://electra.academy/simulator/?global=/signal-demo/VerticalBus.brain Code of the V-Bus: https://github.com/freegroup/electra/blob/main/data/shapes/global/digital/signal/VerticalBus.js
Most of the coding is to handle the signal reading/writing of the simulator and not the layout of the ports. The Bus only allow "output", because this is the intention of my implementation. I removed the decoration and set the FanIn to "0" to avoid input connections.
We use JSON input to load the components. Here is the sample example I have tried.
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="./css/example.css" />
<script src="./lib/jquery.js"></script>
<script src="./lib/jquery-ui.js"></script>
<script src="../draw2d.js"></script>
<script type="text/javascript">
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 for the user interaction
//
var canvas = new draw2d.Canvas("gfx_holder");
// tool bar button
var toolbarDiv = $("#toolbar");
var buttonGroup = $('<div class="btn-group" ></div>');
toolbarDiv.append(buttonGroup);
// load button
var loadButton = $("<button>Load</button>");
buttonGroup.append(loadButton);
loadButton.button().click($.proxy(function () {
let reader = new draw2d.io.json.Reader();
reader.unmarshal(canvas, jsonDoc);
}, this));
});
</script>
</head>
<body>
<div id="toolbar" class="navbar-default">
</div>
<div onselectstart="javascript:/*IE8 hack*/return false" id="gfx_holder" style="width:3000px; height:3000px;">
</div>
</body>
</html>
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, the setPersistentAttributes function does not correctly set those values.
below values are set in default.
connectionAnchor = draw2d.layout.anchor.ConnectionAnchor
visible = true
Thus, I have opened a PR, adding those two attributes to the PersistentAttributes in the JSON output. https://github.com/freegroup/draw2d/pull/251
For my local functions, this issue has been fixed. I am currently using a local build draw.js file with my implementation. Looking forward to your review and a bug fix release.