Skip to content
This repository was archived by the owner on Apr 4, 2023. It is now read-only.

Commit e00cf6b

Browse files
LaaouatniLaaouatni
authored
Merge pull request #30 from Laaouatni/bugs-UI-tooltip
fix: #29 popup zIndex bug, and it go outside parentDiv
2 parents d6768a3 + 27236ea commit e00cf6b

File tree

12 files changed

+194
-91
lines changed

12 files changed

+194
-91
lines changed

Diff for: ‎gcode/src/API/GcodeApi/Gsimulator/Gcanvas/Gcanvas.js

+41-41
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,48 @@
1-
import Gsimulator from "../Gsimulator.js";
2-
import GcodeAPI from "../../GcodeAPI_main/GcodeAPI.js";
1+
// import Gsimulator from "../Gsimulator.js";
2+
// import GcodeAPI from "../../GcodeAPI_main/GcodeAPI.js";
33

4-
export default class Gcanvas extends Gsimulator {
5-
constructor(_GcanvasObj) {
6-
super();
7-
// in this case we use || instead of ?? to exclude also 0 from being a size
8-
this.width = _GcanvasObj.width || _GcanvasObj.height || 500;
9-
this.height = _GcanvasObj.height || _GcanvasObj.width || 500;
10-
this.parentHtmlContainer =
11-
_GcanvasObj.parentHtmlContainer ??
12-
document.querySelector("#app") ??
13-
document.body;
14-
this.create();
15-
}
4+
// export default class Gcanvas extends Gsimulator {
5+
// constructor(_GcanvasObj) {
6+
// super();
7+
// // in this case we use || instead of ?? to exclude also 0 from being a size
8+
// this.width = _GcanvasObj.width || _GcanvasObj.height || 500;
9+
// this.height = _GcanvasObj.height || _GcanvasObj.width || 500;
10+
// this.parentHtmlContainer =
11+
// _GcanvasObj.parentHtmlContainer ??
12+
// document.querySelector("#app") ??
13+
// document.body;
14+
// this.create();
15+
// }
1616

17-
create() {
18-
this.canvasElement = document.createElement("canvas");
19-
this.appendCanvasToParent();
20-
this.changeSize();
21-
this.reset();
22-
}
17+
// create() {
18+
// this.canvasElement = document.createElement("canvas");
19+
// this.appendCanvasToParent();
20+
// this.changeSize();
21+
// this.reset();
22+
// }
2323

24-
appendCanvasToParent() {
25-
this.parentHtmlContainer.appendChild(this.canvasElement);
26-
}
24+
// appendCanvasToParent() {
25+
// this.parentHtmlContainer.appendChild(this.canvasElement);
26+
// }
2727

28-
changeSize() {
29-
this.canvasElement.width = this.width;
30-
this.canvasElement.height = this.height;
31-
}
28+
// changeSize() {
29+
// this.canvasElement.width = this.width;
30+
// this.canvasElement.height = this.height;
31+
// }
3232

33-
reset() {
34-
this.ctx = this.canvasElement.getContext("2d");
35-
this.ctx.beginPath();
36-
}
33+
// reset() {
34+
// this.ctx = this.canvasElement.getContext("2d");
35+
// this.ctx.beginPath();
36+
// }
3737

38-
drawLine(_obj) {
39-
this.ctx.lineTo(_obj.x, _obj.y);
40-
this.ctx.stroke();
41-
}
38+
// drawLine(_obj) {
39+
// this.ctx.lineTo(_obj.x, _obj.y);
40+
// this.ctx.stroke();
41+
// }
4242

43-
generate() {
44-
GcodeAPI.array.forEach((pos) => {
45-
this.drawLine(pos);
46-
});
47-
}
48-
}
43+
// generate() {
44+
// GcodeAPI.array.forEach((pos) => {
45+
// this.drawLine(pos);
46+
// });
47+
// }
48+
// }

Diff for: ‎gcode/src/API/GcodeApi/Gsimulator/Gcss/CssFloatPopup/CssFloatPopup.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import updatePopup from "./other/Methods/updatePopup/updatePopup.js";
1+
import UpdatePopup from "./other/Methods/updatePopup/updatePopup.js";
22
import getPopupSpanHtml from "./other/Methods/getPopupSpanHtml/getPopupSpanHtml.js";
33
export default class CssFloatPopup {
44
static popup;
@@ -18,7 +18,7 @@ export default class CssFloatPopup {
1818
CssFloatPopup.popup.appendChild(CssFloatPopup.arrow);
1919
}
2020

21-
constructor(_obj) {
21+
constructor(_obj, _this) {
2222
this.obj = _obj;
2323

2424
this.button = this.obj.button;
@@ -27,6 +27,8 @@ export default class CssFloatPopup {
2727
this.arrow = CssFloatPopup.arrow;
2828
this.span = CssFloatPopup.span;
2929

30+
this.parentElement = _this.parentElement;
31+
3032
this.addDefaultStyles();
3133
this.addEvents();
3234
}
@@ -38,7 +40,7 @@ export default class CssFloatPopup {
3840
showPopup() {
3941
this.popup.style.display = "block";
4042
this.span.innerHTML = getPopupSpanHtml(this);
41-
updatePopup(this);
43+
new UpdatePopup(this).update();
4244
}
4345

4446
addEvents() {
@@ -70,8 +72,8 @@ export default class CssFloatPopup {
7072
styleArrow() {
7173
this.arrowStylesToAdd = {
7274
position: "absolute",
73-
width: "0.5rem",
74-
height: "0.5rem",
75+
width: "1rem",
76+
height: "1rem",
7577
transform: "rotate(45deg)",
7678
"z-index": -1,
7779
};

Diff for: ‎gcode/src/API/GcodeApi/Gsimulator/Gcss/CssFloatPopup/other/Methods/updatePopup/other/Methods/calcolatePopupArrowPos/x/calcolatePopupArrowXposition.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export default function calcolatePopupArrowXposition(_x, _this) {
2+
if (_x > _this.parentPosition.x) {
3+
if (
4+
_this.parentPosition.x + _this.parentElement.offsetWidth <
5+
_x + _this.popup.offsetWidth
6+
) {
7+
return {
8+
popup:
9+
_this.parentPosition.x +
10+
_this.parentElement.offsetWidth -
11+
_this.popup.offsetWidth -
12+
_this.padding,
13+
arrow: _this.arrowX,
14+
};
15+
}
16+
17+
return {
18+
popup: _x,
19+
arrow: _this.arrowX,
20+
};
21+
} else if (_x <= _this.parentPosition.x) {
22+
return {
23+
popup: _this.parentPosition.x + _this.padding,
24+
arrow:
25+
_this.arrowX -
26+
(_this.parentPosition.x - _x) +
27+
_this.padding +
28+
_this.radiusPopup,
29+
};
30+
}
31+
}

Diff for: ‎gcode/src/API/GcodeApi/Gsimulator/Gcss/CssFloatPopup/other/Methods/updatePopup/other/Methods/calcolatePopupArrowPos/y/calcolatePopupArrowYposition.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export default function calcolatePopupArrowYposition(_y, _this) {
2+
if (_y > _this.parentPosition.y) {
3+
if (
4+
_this.parentPosition.y + _this.parentElement.offsetHeight <
5+
_y + _this.popup.offsetHeight
6+
) {
7+
return {
8+
popup:
9+
_this.parentPosition.y +
10+
_this.parentElement.offsetHeight -
11+
_this.popup.offsetHeight -
12+
_this.padding,
13+
arrow: _this.arrowY,
14+
};
15+
}
16+
17+
return {
18+
popup: _y,
19+
arrow: _this.arrowY,
20+
};
21+
} else if (_y < _this.parentPosition.y) {
22+
return {
23+
popup: _this.parentPosition.y + _this.padding,
24+
arrow:
25+
_this.arrowY -
26+
(_this.parentPosition.y - _y) +
27+
_this.padding +
28+
_this.radiusPopup
29+
};
30+
}
31+
}

Diff for: ‎gcode/src/API/GcodeApi/Gsimulator/Gcss/CssFloatPopup/other/Methods/updatePopup/updatePopup.js

+72-34
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,75 @@
1-
import { computePosition, shift, offset, arrow, autoPlacement } from "@floating-ui/dom";
2-
3-
export default function updatePopup(_this) {
4-
computePosition(_this.button, _this.popup, {
5-
placement: "bottom",
6-
middleware: [
7-
autoPlacement(),
8-
shift({ padding: 8 }),
9-
offset(8),
10-
arrow({ element: _this.arrow }),
11-
],
12-
}).then(({ x, y, placement, middlewareData }) => {
13-
Object.assign(_this.popup.style, {
14-
left: `${x}px`,
15-
top: `${y}px`,
16-
});
1+
import {
2+
computePosition,
3+
shift,
4+
offset,
5+
arrow,
6+
autoPlacement,
7+
} from "@floating-ui/dom";
178

18-
const { x: arrowX, y: arrowY } = middlewareData.arrow;
19-
20-
const staticSide = {
21-
top: "bottom",
22-
right: "left",
23-
bottom: "top",
24-
left: "right",
25-
}[placement.split("-")[0]];
26-
27-
Object.assign(_this.arrow.style, {
28-
left: arrowX != null ? `${arrowX}px` : "",
29-
top: arrowY != null ? `${arrowY}px` : "",
30-
right: "",
31-
bottom: "",
32-
[staticSide]: "-4px",
33-
});
34-
});
35-
}
9+
import calcolatePopupArrowXposition from "./other/Methods/calcolatePopupArrowPos/x/calcolatePopupArrowXposition.js";
10+
import calcolatePopupArrowYposition from "./other/Methods/calcolatePopupArrowPos/y/calcolatePopupArrowYposition.js";
11+
export default class UpdatePopup {
12+
constructor(_this) {
13+
this.button = _this.button;
14+
this.popup = _this.popup;
15+
this.arrow = _this.arrow;
16+
17+
this.parentElement = _this.parentElement;
18+
19+
this.parentPosition = {
20+
x: this.parentElement.getBoundingClientRect().x,
21+
y: this.parentElement.getBoundingClientRect().y,
22+
};
23+
24+
this.padding = 8;
25+
this.radiusPopup = window.getComputedStyle(this.popup).borderRadius.split("px")[0] ?? 0;
26+
}
3627

28+
update() {
29+
computePosition(this.button, this.popup, {
30+
middleware: [
31+
autoPlacement(),
32+
shift({ padding: this.padding }),
33+
offset(this.padding),
34+
arrow({ element: this.arrow }),
35+
],
36+
}).then(({ x, y, placement, middlewareData }) => {
37+
({ x: this.arrowX, y: this.arrowY } = middlewareData.arrow);
3738

39+
this.choosedPos = this.calcolatePosition(x, y);
40+
41+
Object.assign(this.popup.style, {
42+
left: `${this.choosedPos.popup.x}px`,
43+
top: `${this.choosedPos.popup.y}px`,
44+
});
45+
46+
this.staticSide = {
47+
top: "bottom",
48+
right: "left",
49+
bottom: "top",
50+
left: "right",
51+
}[placement.split("-")[0]];
52+
53+
Object.assign(this.arrow.style, {
54+
left: this.arrowX != null ? `${this.choosedPos.arrow.x}px` : "",
55+
top: this.arrowY != null ? `${this.choosedPos.arrow.y}px` : "",
56+
right: "",
57+
bottom: "",
58+
[this.staticSide]: `${this.padding * -1}px`,
59+
});
60+
});
61+
}
62+
63+
calcolatePosition(_x, _y) {
64+
return {
65+
popup: {
66+
x: calcolatePopupArrowXposition(_x, this).popup,
67+
y: calcolatePopupArrowYposition(_y, this).popup,
68+
},
69+
arrow: {
70+
x: calcolatePopupArrowXposition(_x, this).arrow,
71+
y: calcolatePopupArrowYposition(_y, this).arrow,
72+
},
73+
};
74+
}
75+
}

Diff for: ‎gcode/src/API/GcodeApi/Gsimulator/Gcss/CssLine/CssLine.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import CssLineLength from "../other/Methods/CssLineLength/CssLineLength.js";
33
import CssLineAngle from "../other/Methods/CssLineAngle/CssLineAngle.js";
44
import CssFloatPopup from "../CssFloatPopup/CssFloatPopup.js";
55
export default class CssLine {
6-
constructor(_CurrentObj, _index) {
6+
constructor(_CurrentObj, _index, _this) {
77
this.index = _index;
88
this.lineElement = document.createElement("div");
99

@@ -26,15 +26,16 @@ export default class CssLine {
2626
};
2727

2828
this.lineLength = this.calcolateLength();
29-
this.lineHeight = this.calcolateHeight(0.2); // 0.2rem
29+
this.lineHeight = this.calcolateHeight(0.4); // 0.2rem
3030
this.lineAngle = this.calcolateAngle();
3131

3232
this.styleLine();
3333

34+
this.parentElement = _this.parentHtmlContainer;
35+
3436
this.createPopup({
3537
button: this.lineElement,
3638
});
37-
3839
}
3940

4041
calcolateLength() {
@@ -84,6 +85,6 @@ export default class CssLine {
8485
}
8586

8687
createPopup(_obj) {
87-
this.popupClass = new CssFloatPopup(_obj);
88+
this.popupClass = new CssFloatPopup(_obj, this);
8889
}
8990
}

Diff for: ‎gcode/src/API/GcodeApi/Gsimulator/Gcss/Gcss.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default class Gcss extends Gsimulator {
3434
}
3535

3636
drawLine(_CurrentObj, _index) {
37-
this.CssLineClass = new CssLine(_CurrentObj, _index);
37+
this.CssLineClass = new CssLine(_CurrentObj, _index, this);
3838

3939
this.cssContainer.appendChild(this.CssLineClass.lineElement);
4040
}

Diff for: ‎gcode/src/CSS/FloatingUI/arrow/arrow.css

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
#arrow {
2-
border: 0.1rem solid var(--sky-200);
32
background-color: var(--sky-50);
43
border-radius: 0.2rem;
54
}

Diff for: ‎gcode/src/CSS/FloatingUI/tooltip/tooltip.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@
88
border: 0.1rem solid var(--sky-200);
99
background-color: var(--sky-50);
1010
border-radius: 0.5rem;
11-
box-shadow: 0 0.5rem 1rem var(--sky-200);
11+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
12+
z-index: 9999;
1213
}

Diff for: ‎gcode/src/CSS/Gline/Gline_before/Gline_before.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
}
44

55
.Gline::before {
6-
font-size: calc(var(--line-height) * 2.5);
6+
font-size: calc(var(--line-height) * 1.5);
77
font-family: monospace;
88
}
99

1010
.Gline::before {
11-
--before-width: calc(var(--line-height) * 3.5);
11+
--before-width: calc(var(--line-height) * 2.5);
1212
width: var(--before-width);
1313
height: var(--before-width);
1414
border-radius: 50%;

Diff for: ‎gcode/src/CSS/Gline/Gline_hover/Gline_hover.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.Gline:hover::before {
2-
transform: scale(2) translateY(-25%);
2+
zoom: 1.5;
33
}
44

55
.Gline:hover {

Diff for: ‎gcode/src/CSS/Gline/Gline_main/Gline_main.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010

1111
.Gline {
12-
transform-origin: top left;
12+
transform-origin: bottom left;
1313
top: var(--line-top);
1414
left: var(--line-left);
1515
transform: rotate(var(--line-rotate));

0 commit comments

Comments
 (0)