Skip to content

Commit f76e894

Browse files
jonnyz32jonnyz32
committed
Make borders and icons resize. Flip arrow direction
1 parent faeda25 commit f76e894

File tree

4 files changed

+131
-32
lines changed

4 files changed

+131
-32
lines changed

‎media/explain/borderAndIconDraw.js

Lines changed: 94 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @ts-nocheck
12
import {
23
getNodeTopLeftAbsolute,
34
getTopLeftForBorder,
@@ -8,6 +9,12 @@ export function deleteAllBorders() {
89
document.querySelectorAll(".border").forEach((el) => el.remove());
910
}
1011

12+
function makeAllBordersTransparent() {
13+
document
14+
.querySelectorAll(".border")
15+
.forEach((el) => (el.style.borderColor = "transparent"));
16+
}
17+
1118
// @ts-ignore
1219
const iconMap = window.iconMap;
1320

@@ -28,36 +35,50 @@ function drawNodeIcon(fontSize, color, label) {
2835
return icon;
2936
}
3037

31-
function isEnoughRoomForBorders(cy, paddingX, paddingY, iconSize, iconGap, windowPadding){
32-
const windowWidth = window.innerWidth
33-
const windowHeight = window.innerHeight;
34-
let widthNeededForAllNodes = 0
35-
let maxHeightNeededForBorder = 0
36-
cy.nodes().forEach(node => {
37-
const nodeW = node.renderedWidth();
38-
const nodeH = node.renderedHeight();
39-
const dimensions = getBorderWidthAndHeight(paddingX, nodeW, paddingY, nodeH, iconSize, iconGap);
40-
widthNeededForAllNodes += dimensions.width
41-
maxHeightNeededForBorder = Math.max(maxHeightNeededForBorder, dimensions.height)
42-
})
43-
return widthNeededForAllNodes < windowWidth - windowPadding * 2 && maxHeightNeededForBorder < windowHeight - windowPadding * 2
38+
function isOverlappingWithTopRightCorner(bordersTopRightPosition, topLeft) {
39+
const marginOfError = 8;
40+
return bordersTopRightPosition.some(([x, y]) => {
41+
if (y === topLeft.y) {
42+
return x + marginOfError >= topLeft.x;
43+
}
44+
});
4445
}
4546

46-
function isEnoughAreaForBorders(cy, paddingX, paddingY, iconSize, iconGap, windowPadding) {
47+
function isEnoughAreaForBorders(
48+
cy,
49+
paddingX,
50+
paddingY,
51+
iconSize,
52+
iconGap,
53+
windowPadding
54+
) {
4755
const windowWidth = window.innerWidth;
4856
const windowHeight = window.innerHeight;
4957

5058
let areaNeededForAllNodes = 0;
5159
let maxHeightNeededForBorder = 0;
5260
let maxWidthNeededForBorder = 0;
5361

54-
cy.nodes().forEach(node => {
62+
cy.nodes().forEach((node) => {
5563
const nodeW = node.renderedWidth();
5664
const nodeH = node.renderedHeight();
57-
const dimensions = getBorderWidthAndHeight(paddingX, nodeW, paddingY, nodeH, iconSize, iconGap);
65+
const dimensions = getBorderWidthAndHeight(
66+
paddingX,
67+
nodeW,
68+
paddingY,
69+
nodeH,
70+
iconSize,
71+
iconGap
72+
);
5873
areaNeededForAllNodes += dimensions.width * dimensions.height;
59-
maxHeightNeededForBorder = Math.max(maxHeightNeededForBorder, dimensions.height);
60-
maxWidthNeededForBorder = Math.max(maxWidthNeededForBorder, dimensions.width);
74+
maxHeightNeededForBorder = Math.max(
75+
maxHeightNeededForBorder,
76+
dimensions.height
77+
);
78+
maxWidthNeededForBorder = Math.max(
79+
maxWidthNeededForBorder,
80+
dimensions.width
81+
);
6182
});
6283

6384
const usableWidth = windowWidth - 2 * windowPadding;
@@ -71,22 +92,56 @@ function isEnoughAreaForBorders(cy, paddingX, paddingY, iconSize, iconGap, windo
7192
return cy.nodes().length <= maxNodesThatCanFit;
7293
}
7394

74-
export function drawBorderAndIconForEachExplainNode(cy, windowPadding, isVisible) {
95+
export function drawBorderAndIconForEachExplainNode(
96+
cy,
97+
windowPadding,
98+
isVisible
99+
) {
75100
const paddingX = 30;
76101
const paddingY = 10;
77-
const iconSize = 50;
78102
const iconGap = 20;
79103
const borderRadius = 10;
80104
const iconColor = "#007acc";
81-
const shouldDrawBorders = isEnoughAreaForBorders(cy, paddingX, paddingY, iconSize, iconGap, windowPadding)
82105

83-
cy.nodes().forEach(node => {
106+
let minIconSize = 50;
107+
cy.nodes().forEach((node) => {
108+
const nodeW = node.renderedWidth();
109+
const iconSize = nodeW / 2;
110+
minIconSize = Math.min(minIconSize, iconSize);
111+
});
112+
113+
let shouldDrawBorders = isEnoughAreaForBorders(
114+
cy,
115+
paddingX,
116+
paddingY,
117+
minIconSize,
118+
iconGap,
119+
windowPadding
120+
);
121+
const bordersTopRightPosition = [];
122+
123+
cy.nodes().forEach((node) => {
84124
const nodeW = node.renderedWidth();
85125
const nodeH = node.renderedHeight();
126+
86127
const nodeTopLeft = getNodeTopLeftAbsolute(node, cy);
87128

88-
const topLeft = getTopLeftForBorder(nodeTopLeft.x, nodeTopLeft.y, paddingX, paddingY, iconSize, iconGap);
89-
const dimensions = getBorderWidthAndHeight(paddingX, nodeW, paddingY, nodeH, iconSize, iconGap);
129+
const topLeft = getTopLeftForBorder(
130+
nodeTopLeft.x,
131+
nodeTopLeft.y,
132+
paddingX,
133+
paddingY,
134+
minIconSize,
135+
iconGap
136+
);
137+
const dimensions = getBorderWidthAndHeight(
138+
paddingX,
139+
nodeW,
140+
paddingY,
141+
nodeH,
142+
minIconSize,
143+
iconGap
144+
);
90145

91146
const border = document.createElement("div");
92147
border.className = "border";
@@ -100,13 +155,24 @@ export function drawBorderAndIconForEachExplainNode(cy, windowPadding, isVisible
100155
display: "flex",
101156
justifyContent: "center",
102157
paddingTop: `${paddingY}px`,
103-
borderRadius: `${borderRadius}px`
158+
borderRadius: `${borderRadius}px`,
104159
});
105-
if (!shouldDrawBorders || !isVisible){
106-
border.style.borderColor = "transparent"
160+
161+
const overlappingWithTopRightCorner = isOverlappingWithTopRightCorner(
162+
bordersTopRightPosition,
163+
topLeft
164+
);
165+
if (overlappingWithTopRightCorner) {
166+
shouldDrawBorders = false;
167+
makeAllBordersTransparent();
168+
}
169+
bordersTopRightPosition.push([topLeft.x + dimensions.width, topLeft.y]);
170+
171+
if (!shouldDrawBorders || !isVisible) {
172+
border.style.borderColor = "transparent";
107173
}
108174

109-
border.appendChild(drawNodeIcon(iconSize, iconColor, node.data().label));
175+
border.appendChild(drawNodeIcon(minIconSize, iconColor, node.data().label));
110176
document.body.appendChild(border);
111177
});
112178
}

‎media/explain/explain.css

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,30 @@
11

2-
.diagram-container {
2+
/* .diagram-container {
33
position: absolute;
44
top: 0;
55
left: 0;
66
width: 100%;
77
height: 100%;
88
border: none;
99
margin: 0;
10+
} */
11+
12+
.diagram-container{
13+
position: absolute;
14+
top: 0;
15+
box-sizing: border-box;
16+
left: 0;
17+
right: 0;
18+
bottom: 0;
19+
height: 100%;
20+
overflow: hidden;
21+
height: 100%;
22+
border: none;
23+
margin: 0;
24+
border: 2px solid red;
1025
}
1126

27+
1228
.hover-box {
1329
border-radius: 6px;
1430
padding: 6px 10px;

‎media/explain/explain.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ if (isWindowTooSmall(GRAPH_PADDING)) {
2121
const cy = cytoscape({
2222
container: document.getElementById("diagramContainer"),
2323
elements: window.data,
24-
zoomingEnabled: false,
2524
userZoomingEnabled: false,
2625
style: [
2726
{
@@ -89,6 +88,24 @@ if (isWindowTooSmall(GRAPH_PADDING)) {
8988
return position;
9089
}, // transform a given node position. Useful for changing flow direction in discrete layouts
9190
},
91+
92+
// layout: {
93+
// name: "breadthfirst",
94+
// fit: true, // whether to fit the viewport to the graph
95+
// directed: false,
96+
// padding: GRAPH_PADDING, // paddinsg used on fit
97+
// boudingBox: { x1: 0, y1: 0, w: window.innerWidth, h: window.innerHeight },
98+
// circle: false, // put depths in concentric circles if true, put depths top down if false
99+
// grid: false,
100+
// avoidOverlap: true,
101+
// nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
102+
// },
103+
});
104+
105+
window.addEventListener("resize", () => {
106+
cy.resize(); // Resize Cytoscape's canvas
107+
cy.fit(cy.nodes().boundingBox(), GRAPH_PADDING); // Optional: Fit all nodes back into view
108+
cy.center();
92109
});
93110

94111
if (!isEnoughAreaWithoutBorders(cy, GRAPH_PADDING)) {
@@ -151,7 +168,7 @@ if (isWindowTooSmall(GRAPH_PADDING)) {
151168
drawBorderAndIconForEachExplainNode(cy, GRAPH_PADDING, showBorder);
152169
}
153170

154-
cy.on("pan", redrawBorders);
171+
cy.on("pan zoom resize", redrawBorders);
155172
drawBorderAndIconForEachExplainNode(cy, GRAPH_PADDING, true);
156173
}
157174
}

‎src/views/cytoscape/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export class CytoscapeGraph {
5252

5353
if (node.parent) {
5454
this.edges.push({
55-
data: { id: randomId(), source: node.parent, target: id },
55+
data: { id: randomId(), source:id , target: node.parent },
5656
});
5757
}
5858

0 commit comments

Comments
 (0)