Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

draw2d.io.Reader.unmarshal doesn't work properly for Hub components #249

Open
ktechila opened this issue Dec 19, 2024 · 3 comments
Open

draw2d.io.Reader.unmarshal doesn't work properly for Hub components #249

ktechila opened this issue Dec 19, 2024 · 3 comments

Comments

@ktechila
Copy link

ktechila commented Dec 19, 2024 •
edited
Loading

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.
Screenshot 2024-12-19 at 16 12 41
@ktechila ktechila mentioned this issue Dec 20, 2024
Closed
@freegroup
Copy link
Owner

freegroup commented Dec 20, 2024 •
edited
Loading

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.

@ktechila
Copy link
Author

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>

@ktechila ktechila mentioned this issue Dec 25, 2024
Open
@ktechila
Copy link
Author

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. #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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@freegroup @ktechila