Skip to content

Commit

Permalink
Merge pull request #6 from Huzifa1/master
Browse files Browse the repository at this point in the history
Added self links
  • Loading branch information
deffel authored May 29, 2024
2 parents a4cf1ed + 68c9cac commit d8299c3
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 49 deletions.
2 changes: 1 addition & 1 deletion gui/HoverConnection.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
var defaultRouterClassName = "draw2d.layout.connection.SplineConnectionRouter";
var defaultRouter = new draw2d.layout.connection.SplineConnectionRouter();


var HoverConnection = draw2d.Connection.extend({

init: function (sourcePort, targetPort) {
Expand Down Expand Up @@ -75,7 +76,6 @@ var HoverConnection = draw2d.Connection.extend({
case "delete":
// without undo/redo support
// this.getCanvas().remove(this);

// with undo/redo support
var cmd = new draw2d.command.CommandDelete(this);
this.getCanvas().getCommandStack().execute(cmd);
Expand Down
152 changes: 108 additions & 44 deletions gui/NodeShape.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,35 +26,36 @@ const NodeTypeEnum = Object.freeze({
"xilinx": "xilinx"
});


//Gray rectangel
ChannelShape = draw2d.shape.basic.Label.extend({
NAME: "ChannelShape",

ORIENTATION_PROPERTIES: Object.freeze({
[OrientationEnum.north]: {
"rotationAngle": -90,
"padding": { left: 5, top: 25, right: 5, bottom: 25 },
"locator": new draw2d.layout.locator.BottomLocator(),
},
[OrientationEnum.east]: {
"rotationAngle": 0,
"padding": { left: 25, top: 5, right: 25, bottom: 5 },
"locator": new draw2d.layout.locator.RightLocator(),
},
[OrientationEnum.south]: {
"rotationAngle": -90,
"padding": { left: 5, top: 25, right: 5, bottom: 25 },
"locator": new draw2d.layout.locator.TopLocator(),
},
[OrientationEnum.west]: {
"rotationAngle": 0,
"padding": { left: 25, top: 5, right: 25, bottom: 5 },
"locator": new draw2d.layout.locator.LeftLocator(),
},
}),
ORIENTATION_PROPERTIES: function (isSibling) {
return {
[OrientationEnum.north]: {
"rotationAngle": -90,
"padding": isSibling ? { left: 5, top: 25, right: 5, bottom: 25 } : { left: 20, top: 25, right: 5, bottom: 25 },
"locator": new draw2d.layout.locator.BottomLocator(),
},
[OrientationEnum.east]: {
"rotationAngle": 0,
"padding": isSibling ? { left: 25, top: 5, right: 25, bottom: 5 } : { left: 25, top: 20, right: 25, bottom: 5 },
"locator": new draw2d.layout.locator.RightLocator(),
},
[OrientationEnum.south]: {
"rotationAngle": -90,
"padding": isSibling ? { left: 5, top: 25, right: 5, bottom: 25 } : { left: 20, top: 25, right: 5, bottom: 25 },
"locator": new draw2d.layout.locator.TopLocator(),
},
[OrientationEnum.west]: {
"rotationAngle": 0,
"padding": isSibling ? { left: 25, top: 5, right: 25, bottom: 5 } : { left: 25, top: 20, right: 25, bottom: 5 },
"locator": new draw2d.layout.locator.LeftLocator(),
},
}
},

init: function (attr) {
let self = this
this._super($.extend({}, attr));
this.parentFPGA = attr.parentFPGA;

Expand All @@ -64,14 +65,53 @@ ChannelShape = draw2d.shape.basic.Label.extend({
// Shape for view.
this.connector;
this.isDrawn = false;

let siblingChannel = attr.siblingChannel
this.siblingChannel = siblingChannel

let port = this.createPort("hybrid");
port.setName("inout_" + this.id);
port.setMaxFanOut(1);
if (siblingChannel) port.siblingChannel = siblingChannel

port.on("connect", function () {
this.setVisible(false);
}, port);
if (siblingChannel) siblingChannel.setVisible(false)
}, port)
port.on("disconnect", function () {
this.setVisible(true);
let portClass = this
if (siblingChannel) {
siblingChannel.setVisible(false)
if (portClass.siblingChannel.getHybridPort(0).connections.data.length) {
setTimeout(() => {
if (portClass.connections.data?.[0]?.sourcePort != portClass) {
let chnl1 = portClass.parent
let chnl2 = portClass.siblingChannel.getHybridPort(0).connections.data[0]?.sourcePort.parent

let connection = portClass.siblingChannel.getHybridPort(0).connections.data[0]

if (connection) {
var cmd = new draw2d.command.CommandDelete(connection);
connection.getCanvas().getCommandStack().execute(cmd);
app.toolbar.connectChannels(chnl1, chnl2)
}
}
}, 10)
}
}
else self.setVisible(false)
}, port);


port.on("dragstart", function (e) {
if (siblingChannel) {
siblingChannel.setVisible(true)
siblingChannel.setVisible(true)
}
}, port);
port.on("dragend", function () {
if (siblingChannel) siblingChannel.setVisible(false)
}, port);

// this.orientation = attr.orientation;
Expand Down Expand Up @@ -113,12 +153,11 @@ ChannelShape = draw2d.shape.basic.Label.extend({

setOrientation: function (orientation, repaint = true) {
this.orientation = orientation;
let prop = this.ORIENTATION_PROPERTIES[orientation];
let prop = this.ORIENTATION_PROPERTIES(this.siblingChannel)[orientation];
this.getHybridPort(0).setLocator(prop.locator);
this.rotationAngle = prop.rotationAngle;
this.height = 0;
this.setPadding(prop.padding);

if (repaint) {
this.repaint();
}
Expand Down Expand Up @@ -189,17 +228,17 @@ FPGAShape = draw2d.shape.layout.FlexGridLayout.extend({
// Children links.
// this.channels = [];
for (let i = 0; i < attr.channelsCount; i++) {
this.addChannel();
this.addChannel(i);
}

// this.getNode().fpgaLayout.add(this, this.getNode().fpgaLayout);
},

addChannel: function () {
addChannel: function (i) {
orientation = this.getOrientation();
let prop = this.ORIENTATION_PROPERTIES[orientation];
channel = new ChannelShape({
text: "ch" + (this.getChannels().getSize()),
let channel = new ChannelShape({
text: "ch" + i,
stroke: 0,
radius: 0,
bgColor: null,
Expand All @@ -208,29 +247,51 @@ FPGAShape = draw2d.shape.layout.FlexGridLayout.extend({
// resizeable:true,
// editor:new draw2d.ui.LabelEditor()
orientation: this.orientation,
visible: false
});

if (this.getChannels().getSize() > 0) {
let gridDef = this.channelLayout.gridDef;
gridDef[`def_${prop.arrangement[1]}s`].push(-1);
}

this.channelLayout.add(channel, {
[prop.arrangement[0]]: 0,
[prop.arrangement[1]]: this.getChannels().getSize()
[prop.arrangement[1]]: i
});

let channel2 = new ChannelShape({
text: "ch" + i,
stroke: 0,
radius: 0,
bgColor: null,
// padding:{left:25, top:3, right:27, bottom:5},
fontColor: "#4a4a4a",
// resizeable:true,
// editor:new draw2d.ui.LabelEditor()
orientation: this.orientation,
siblingChannel: channel
});

this.channelLayout.add(channel2, {
[prop.arrangement[0]]: 0,
[prop.arrangement[1]]: i
});



if (this.getChannels().getSize() > 0) {
let gridDef = this.channelLayout.gridDef;
gridDef[`def_${prop.arrangement[1]}s`].push(-1);
}

return channel;
},

getChannels: function () {
return this.channelLayout.getChildren();
},

getChannelFromFpgalink: function (string_channel) {
getChannelFromFpgalink: function (string_channel, isSibling) {
// ch0, ch1, ch2, ch3"
// n00, ..
var num = parseInt(string_channel.substring(2));
var num = parseInt(string_channel.substring(2)) * 2 + (isSibling ? 0 : 1);
return this.getChildren().get(1).getChildren().get(num);
},

Expand Down Expand Up @@ -268,14 +329,17 @@ FPGAShape = draw2d.shape.layout.FlexGridLayout.extend({
this.fpgaLabel.__cellConstraint.row = prop.labelRow;
this.channelLayout.__cellConstraint.row = prop.channelLayoutRow;



gridDef[`def_${prop.arrangement[0]}s`] = Array(1).fill(-1);
gridDef[`def_${prop.arrangement[1]}s`] = Array(this.getChannels().getSize()).fill(-1);
this.getChannels().each(function (i, ch) {
ch.__cellConstraint[prop.arrangement[0]] = 0;
ch.__cellConstraint[prop.arrangement[1]] = i;
ch.__cellConstraint[prop.arrangement[1]] = Math.floor(i / 2);
ch.setOrientation(orientation, false);
});


if (repaint) {
this.gridDef.layoutRequired = true;
this.relocateChildrenEventCallback();
Expand Down Expand Up @@ -387,10 +451,11 @@ NodeShape = draw2d.shape.layout.FlexGridLayout.extend({

gridDef[`def_${prop.arrangement[0]}s`] = Array(1).fill(-1);
gridDef[`def_${prop.arrangement[1]}s`] = Array(this.getFPGAs().getSize()).fill(-1);
this.getFPGAs().each(function (i, ch) {
ch.__cellConstraint[prop.arrangement[0]] = 0;
ch.__cellConstraint[prop.arrangement[1]] = i;
ch.setOrientation(orientation, false);

this.getFPGAs().each(function (i, fpga) {
fpga.__cellConstraint[prop.arrangement[0]] = 0;
fpga.__cellConstraint[prop.arrangement[1]] = i;
fpga.setOrientation(orientation, false);
});

this.height = 0;
Expand All @@ -413,7 +478,6 @@ NodeShape = draw2d.shape.layout.FlexGridLayout.extend({
getFPGAFromFpgalink: function (string_acl) {
// acl0 = FPGA 0
// acl1 = FPGA 1
// console.log(this.getChildren().get(1).getChildren().get(0))
if (string_acl == "acl0") {
return this.getChildren().get(1).getChildren().get(0);
} else if (string_acl == "acl1") {
Expand Down
3 changes: 1 addition & 2 deletions gui/Toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -719,7 +719,6 @@ example.Toolbar = Class.extend({

// Custom link with format: n00:acl0:ch0-n00:acl1:ch0
default:

// Parse and add fpga links: n00:acl0:ch0-n00:acl1:ch0
var links = full_match.split("-");

Expand Down Expand Up @@ -757,7 +756,7 @@ example.Toolbar = Class.extend({
// Get FPGA.
var tfpga_p2 = tnode_p2.getFPGAFromFpgalink(link_p2[1]);

chan1 = tfpga_p2.getChannelFromFpgalink(link_p2[2]);
chan1 = tfpga_p2.getChannelFromFpgalink(link_p2[2], link_p2[2] == link_p1[2]);
} else {
// Channel is to ethernet switch.
chan1 = eth_switch;
Expand Down
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@
<!--<script src="./gui/NodeShapeHorizontal.js"></script>-->
<!-- <script src="./gui/NodeShapeVertical.js"></script>-->
<script type="text/javascript">

var app;
document.addEventListener("DOMContentLoaded", function () {

var app = new example.Application();
app = new example.Application();
app.view.installEditPolicy(new draw2d.policy.connection.DragConnectionCreatePolicy({
createConnection: function () {
return new HoverConnection();
Expand Down

0 comments on commit d8299c3

Please sign in to comment.