Skip to content
This repository has been archived by the owner on Jun 10, 2024. It is now read-only.

Commit

Permalink
Merge pull request #26 from sarbull/main
Browse files Browse the repository at this point in the history 
Implement custom zooming level defined by number of nodes
  • Loading branch information
@marius-patrascu
marius-patrascu committed Jul 20, 2021
2 parents 9b78b7d + 62f404c commit 973a3ff
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 80 deletions.
149 changes: 83 additions & 66 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,6 @@
<button id="add-data">add-data</button>
</div>


<div class="container bordered">
<happi-graph id="happi-graph-four"></happi-graph>
</div>

<div class="container bordered">
<happi-graph id="happi-graph"></happi-graph>
</div>
Expand All @@ -70,6 +65,10 @@
<happi-graph id="happi-graph-three"></happi-graph>
</div>

<div class="container bordered">
<happi-graph id="happi-graph-four"></happi-graph>
</div>

<script type="module">
import { iconsMap, linksTypeIconMap, itemGroupIconMap } from 'egeria-js-commons';

Expand All @@ -83,35 +82,7 @@
...itemGroupIconMap
};

let dataFour = {
graphDirection: 'HORIZONTAL',
selectedNodeId: 1,
nodes: [
{ id: 1, label: 'Node 1', group: 'GroupName', properties: { GroupName: 'IBS_UTBLIACML' } },
{ id: 2, label: 'Node 2', group: 'GroupName', properties: {} }
],
links: [
{ from: 1, to: 2, connectionFrom: false, connectionTo: true, type: null },
]
}

let happiGraphInstance4 = document.querySelector('#happi-graph-four');
happiGraphInstance4.iconsMap = iconsMap;
happiGraphInstance4.propertiesMap = propertiesMap;
happiGraphInstance4.linksTypeIconMap = linksTypeIconMap;
happiGraphInstance4.algorithm = 'ELK';
happiGraphInstance4.elkWorkerUrl = '/node_modules/elkjs/lib/elk-worker.js';

happiGraphInstance4.graphData = { ...dataFour };
happiGraphInstance4.init();

happiGraphInstance4.addEventListener('happi-graph-on-node-click', ({ detail }) => {
console.log(detail);
});




/* ===================================================================== */

let data = {
graphDirection: 'HORIZONTAL',
Expand Down Expand Up @@ -147,24 +118,25 @@
};

let happiGraphInstance = document.querySelector('#happi-graph');
happiGraphInstance.iconsMap = iconsMap;
happiGraphInstance.propertiesMap = propertiesMap;
happiGraphInstance.linksTypeIconMap = linksTypeIconMap;
happiGraphInstance.algorithm = 'ELK';
happiGraphInstance.elkWorkerUrl = '/node_modules/elkjs/lib/elk-worker.js';
happiGraphInstance.nodeCountLimit = 9;
happiGraphInstance.iconsMap = iconsMap;
happiGraphInstance.propertiesMap = propertiesMap;
happiGraphInstance.linksTypeIconMap = linksTypeIconMap;
happiGraphInstance.algorithm = 'ELK';
happiGraphInstance.elkWorkerUrl = '/node_modules/elkjs/lib/elk-worker.js';

happiGraphInstance.graphData = { ...data };
happiGraphInstance.init();
happiGraphInstance.graphData = { ...data };
happiGraphInstance.init();

happiGraphInstance.addEventListener('happi-graph-on-node-click', ({ detail }) => {
console.log(detail);
});
happiGraphInstance.addEventListener('happi-graph-on-node-click', ({ detail }) => {
console.log(detail);
});

happiGraphInstance.addEventListener('happi-graph-on-cached-graph', ({ id }) => {
happiGraphInstance.updateGraphData({ ...data });
happiGraphInstance2.updateGraphData({ ...data2 });
happiGraphInstance3.updateGraphData({ ...data3 });
});
happiGraphInstance.addEventListener('happi-graph-on-cached-graph', ({ id }) => {
happiGraphInstance.updateGraphData({ ...data });
});

/* ===================================================================== */

let data2 = {
graphDirection: 'VERTICAL',
Expand All @@ -177,25 +149,31 @@
{ id: 4, label: 'This is the value of Node 4', group: 'GroupName', properties: {} },
],
links: [
{ from: 0, to: 1, connectionFrom: false, connectionTo: true },
{ from: 0, to: 2, connectionFrom: false, connectionTo: true },
{ from: 0, to: 3, connectionFrom: false, connectionTo: true },
{ from: 3, to: 4, connectionFrom: false, connectionTo: true }
{ from: 0, to: 1, connectionFrom: false, connectionTo: true, type: null },
{ from: 0, to: 2, connectionFrom: false, connectionTo: true, type: null },
{ from: 0, to: 3, connectionFrom: false, connectionTo: true, type: null },
{ from: 3, to: 4, connectionFrom: false, connectionTo: true, type: null }
]
};

let happiGraphInstance2 = document.querySelector('#happi-graph-two');
happiGraphInstance2.iconsMap = iconsMap;
happiGraphInstance2.propertiesMap = propertiesMap;
happiGraphInstance2.graphData = { ...data2 };
happiGraphInstance2.init();
happiGraphInstance2.nodeCountLimit = 10;
happiGraphInstance2.iconsMap = iconsMap;
happiGraphInstance2.propertiesMap = propertiesMap;
happiGraphInstance2.linksTypeIconMap = linksTypeIconMap;
happiGraphInstance2.graphData = { ...data2 };
happiGraphInstance2.init();

happiGraphInstance2.addEventListener('happi-graph-on-node-click', ({ detail }) => {
console.log(detail);
});
happiGraphInstance2.addEventListener('happi-graph-on-cached-graph', ({ id }) => {
happiGraphInstance2.graphData = { ...data2 };
});


/* ===================================================================== */

let data3 = {
graphDirection: 'VERTICAL',
"selectedNodeId": 'term@68e36496-7167-4af7-abdd-a0cd36e24084:6662c0f2.e1b1ec6c.66k78i6du.uchsna1.rn2epa.rfn2fjqf7h4qvmt5lflm8',
Expand All @@ -204,47 +182,86 @@
};

let happiGraphInstance3 = document.querySelector('#happi-graph-three');
happiGraphInstance3.iconsMap = iconsMap;
happiGraphInstance3.propertiesMap = propertiesMap;
happiGraphInstance3.graphData = { ...data3 };
happiGraphInstance3.init();
happiGraphInstance3.nodeCountLimit = 5;
happiGraphInstance3.iconsMap = iconsMap;
happiGraphInstance3.propertiesMap = propertiesMap;
happiGraphInstance3.linksTypeIconMap = linksTypeIconMap;
happiGraphInstance3.graphData = { ...data3 };
happiGraphInstance3.init();

happiGraphInstance3.addEventListener('happi-graph-on-node-click', ({ detail }) => {
console.log(detail);
});
happiGraphInstance3.addEventListener('happi-graph-on-cached-graph', ({ id }) => {
happiGraphInstance3.graphData = { ...data3 };
});

/* ===================================================================== */

let data4 = {
graphDirection: 'HORIZONTAL',
selectedNodeId: 1,
nodes: [
{ id: 1, label: 'Node 1', group: 'GroupName', properties: { GroupName: 'IBS_UTBLIACML' } },
{ id: 2, label: 'Node 2', group: 'GroupName', properties: {} }
],
links: [
{ from: 1, to: 2, connectionFrom: false, connectionTo: true, type: null },
]
}

let happiGraphInstance4 = document.querySelector('#happi-graph-four');
happiGraphInstance4.nodeCountLimit = 30;
happiGraphInstance4.iconsMap = iconsMap;
happiGraphInstance4.propertiesMap = propertiesMap;
happiGraphInstance4.linksTypeIconMap = linksTypeIconMap;
happiGraphInstance4.algorithm = 'ELK';
happiGraphInstance4.elkWorkerUrl = '/node_modules/elkjs/lib/elk-worker.js';

happiGraphInstance4.graphData = { ...data4 };
happiGraphInstance4.init();

happiGraphInstance4.addEventListener('happi-graph-on-node-click', ({ detail }) => {
console.log(detail);
});

/* ===================================================================== */

/* Buttons */

document.querySelector('#zoom-in').addEventListener('click', () => {
document.querySelector('button#zoom-in').addEventListener('click', () => {
happiGraphInstance.customZoomIn();
happiGraphInstance2.customZoomIn();
happiGraphInstance3.customZoomIn();
happiGraphInstance4.customZoomIn();
});

document.querySelector('#zoom-out').addEventListener('click', () => {
document.querySelector('button#zoom-out').addEventListener('click', () => {
happiGraphInstance.customZoomOut();
happiGraphInstance2.customZoomOut();
happiGraphInstance3.customZoomOut();
happiGraphInstance4.customZoomOut();
});

document.querySelector('#center-graph').addEventListener('click', () => {
document.querySelector('button#center-graph').addEventListener('click', () => {
happiGraphInstance.centerGraph();
happiGraphInstance2.centerGraph();
happiGraphInstance3.centerGraph();
happiGraphInstance4.centerGraph();
});

document.querySelector('#remove-data').addEventListener('click', () => {
document.querySelector('button#remove-data').addEventListener('click', () => {
happiGraphInstance.removeData();
happiGraphInstance2.removeData();
happiGraphInstance3.removeData();
happiGraphInstance4.removeData();
});

document.querySelector('#add-data').addEventListener('click', () => {
document.querySelector('button#add-data').addEventListener('click', () => {
happiGraphInstance.updateGraphData({ ...data });
happiGraphInstance2.updateGraphData({ ...data2 });
happiGraphInstance3.updateGraphData({ ...data3 });
happiGraphInstance4.updateGraphData({ ...data4 });
});
</script>
</body>
Expand Down
63 changes: 49 additions & 14 deletions happi-graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,10 @@ class HappiGraph extends PolymerElement {
isLoading: {
type: Boolean,
value: false
},
nodeCountLimit: {
type: Number,
value: 0
}
};
}
Expand Down Expand Up @@ -290,12 +294,12 @@ class HappiGraph extends PolymerElement {
}
});

console.log(this.nodes, this.links);
// console.log(this.nodes, this.links);

this.initGraph();
this.addNodes();
this.addLinks();
this.centerGraph();
this.whereToCenter();
}

elkApproach() {
Expand Down Expand Up @@ -332,7 +336,7 @@ class HappiGraph extends PolymerElement {
this.initGraph();
this.addNodes();
this.addLinks();
this.centerGraph();
this.whereToCenter();
})
// .catch(console.error)
}
Expand Down Expand Up @@ -533,20 +537,23 @@ class HappiGraph extends PolymerElement {
this.customZoom(-1);
}

centerGraph() {
whereToCenter() {
let selectedNode = this.nodes.filter(n => n.selected === true).pop();
let nodeCount = this.nodes.length;
if(nodeCount < this.nodeCountLimit || this.nodeCountLimit == 0) {
this.centerGraph();
} else {
this.centerToNode(selectedNode);
}
}

centerToCoordinates(data, scaledBy) {
let self = this;
let { x, y, width, height } = data;

let svgWidth = parseInt(this.svg.style('width'));
let svgHeight = parseInt(this.svg.style('height'));

let graphBBox = this.allGroup.node().getBBox();

let scaledBy = Math.min(
(svgWidth - 100) / graphBBox.width,
(svgHeight - 100) / graphBBox.height,
1
);

let svgCenter = {
x: svgWidth / 2,
y: svgHeight / 2
Expand All @@ -557,13 +564,41 @@ class HappiGraph extends PolymerElement {
self.zoom.transform,
d3.zoomIdentity
.translate(
svgCenter.x - ((graphBBox.x * scaledBy) + (graphBBox.width * scaledBy) / 2),
svgCenter.y - ((graphBBox.y * scaledBy) + (graphBBox.height * scaledBy) / 2)
svgCenter.x - ((x * scaledBy) + (width * scaledBy) / 2),
svgCenter.y - ((y * scaledBy) + (height * scaledBy) / 2)
)
.scale(scaledBy)
)
}

centerToNode(node) {
let { x, y, width, height } = node;

this.centerToCoordinates({x: x, y: y, width: width, height: height}, 0.6);
}

centerGraph() {
let graphBBox = this.allGroup.node().getBBox();

let svgWidth = parseInt(this.svg.style('width'));
let svgHeight = parseInt(this.svg.style('height'));

let data = {
x: graphBBox.x,
y: graphBBox.y,
width: graphBBox.width,
height: graphBBox.height
};

let scaledBy = Math.min(
(svgWidth - 100) / graphBBox.width,
(svgHeight - 100) / graphBBox.height,
1
);

this.centerToCoordinates(data, scaledBy);
}

cachedGraph() {
this.removeData();

Expand Down

0 comments on commit 973a3ff

Please sign in to comment.