[CORD-1302] minor typo fix 'heigth', rudimentary collision with graph boundaries
Change-Id: Ida95c41479b931d17892e9b544adf295108cc364
diff --git a/src/app/service-graph/components/coarse/coarse.component.ts b/src/app/service-graph/components/coarse/coarse.component.ts
index c7a7ac5..ac687d0 100644
--- a/src/app/service-graph/components/coarse/coarse.component.ts
+++ b/src/app/service-graph/components/coarse/coarse.component.ts
@@ -88,10 +88,10 @@
this.renderLinks(this.graph.links);
}
- private getSvgDimensions(): {width: number, heigth: number} {
+ private getSvgDimensions(): {width: number, height: number} {
return {
width: $('xos-coarse-tenancy-graph svg').width() || 0,
- heigth: $('xos-coarse-tenancy-graph svg').height() || 0
+ height: $('xos-coarse-tenancy-graph svg').height() || 0
};
}
@@ -125,12 +125,22 @@
});
}
+ private collide(n: any) {
+ const svgDim = this.getSvgDimensions();
+ const x = Math.max(n.width / 2, Math.min(n.x, svgDim.width - (n.width / 2)));
+ const y = Math.max(n.height / 2, Math.min(n.y, svgDim.height - (n.height / 2)));
+ return `${x}, ${y}`;
+ }
+
private setupForceLayout() {
+ let svgDim = this.getSvgDimensions();
+
const tick = () => {
+
this.nodeGroup.selectAll('g.node')
.attr({
- transform: d => `translate(${d.x}, ${d.y})`
+ transform: d => `translate(${this.collide(d)})`
});
this.linkGroup.selectAll('line')
@@ -141,9 +151,9 @@
y2: l => l.target.y || 0,
});
};
- const svgDim = this.getSvgDimensions();
+
this.forceLayout = d3.layout.force()
- .size([svgDim.width, svgDim.heigth])
+ .size([svgDim.width, svgDim.height])
.linkDistance(config.force.linkDistance)
.charge(config.force.charge)
.gravity(config.force.gravity)
@@ -168,7 +178,7 @@
.append('g')
.attr({
class: n => `node ${this.XosGraphHelpers.parseElemClasses(n.d3Class)}`,
- transform: `translate(${svgDim.width / 2}, ${svgDim.heigth / 2})`
+ transform: `translate(${svgDim.width / 2}, ${svgDim.height / 2})`
})
.call(this.forceLayout.drag)
.on('mousedown', () => {
@@ -194,9 +204,9 @@
const existing = node.selectAll('rect');
-
// resize node > rect as contained text
- existing.each(function() {
+
+ existing.each(function(d: any) {
const textBBox = self.XosGraphHelpers.getSiblingTextBBox(this);
const rect = d3.select(this);
rect.attr({
@@ -205,7 +215,10 @@
x: textBBox.x - (config.node.padding / 2),
y: (textBBox.y + self.textOffset) - (config.node.padding / 2)
});
+ d.width = textBBox.width + config.node.padding;
+ d.height = textBBox.height + config.node.padding;
});
+
}
private renderLinks(links: IXosServiceGraphLink[]) {
diff --git a/src/app/service-graph/components/fine-grained/fine-grained.component.ts b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
index d0aea83..3fc47a5 100644
--- a/src/app/service-graph/components/fine-grained/fine-grained.component.ts
+++ b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
@@ -91,10 +91,10 @@
this.renderLinks(this.graph.links);
}
- private getSvgDimensions(): {width: number, heigth: number} {
+ private getSvgDimensions(): {width: number, height: number} {
return {
width: $('xos-fine-grained-tenancy-graph svg').width(),
- heigth: $('xos-fine-grained-tenancy-graph svg').height()
+ height: $('xos-fine-grained-tenancy-graph svg').height()
};
}
@@ -166,7 +166,7 @@
};
const svgDim = this.getSvgDimensions();
this.forceLayout = d3.layout.force()
- .size([svgDim.width, svgDim.heigth])
+ .size([svgDim.width, svgDim.height])
.linkDistance(config.force.linkDistance)
.linkStrength(l => getLinkStrenght(l))
.charge(config.force.charge)
@@ -307,7 +307,7 @@
let mouseEventsTimer, selectedModel;
const svgDim = this.getSvgDimensions();
const hStep = svgDim.width / (nodes.length - 1);
- const vStep = svgDim.heigth / (nodes.length - 1);
+ const vStep = svgDim.height / (nodes.length - 1);
const entering = node.enter()
.append('g')
.attr({
diff --git a/src/app/service-graph/interfaces.ts b/src/app/service-graph/interfaces.ts
index 0c53886..4120bdb 100644
--- a/src/app/service-graph/interfaces.ts
+++ b/src/app/service-graph/interfaces.ts
@@ -62,6 +62,8 @@
y?: number;
px?: number;
py?: number;
+ width?: number;
+ height?: number;
fixed?: boolean;
badge?: IXosServiceGraphNodeBadge; // TODO implement badges
model: IXosServiceModel;