feat: add current position display to Surface view
This commit is contained in:
parent
a69138f0fe
commit
8c2668754a
1 changed files with 40 additions and 0 deletions
|
@ -18,6 +18,9 @@
|
|||
let y: string = urlParams.get("y");
|
||||
let viewMode = "link";
|
||||
|
||||
let currentX = NaN;
|
||||
let currentY = NaN;
|
||||
|
||||
let loaded = false;
|
||||
let viewHeight = 0;
|
||||
let viewWidth = 0;
|
||||
|
@ -109,6 +112,16 @@
|
|||
svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
|
||||
}
|
||||
|
||||
view.on("mousemove", (ev: MouseEvent) => {
|
||||
// not using offsetXY because `translate` transforms on .inner mess it up
|
||||
const viewBBox = (view.node() as HTMLElement).getBoundingClientRect();
|
||||
const [x, y] = d3
|
||||
.zoomTransform(d3.select(".points").node() as HTMLElement)
|
||||
.invert([ev.clientX - viewBBox.left, ev.clientY - viewBBox.top]);
|
||||
currentX = xScale.invert(x);
|
||||
currentY = yScale.invert(y);
|
||||
});
|
||||
|
||||
d3.select(".view").call(zoom);
|
||||
loaded = true;
|
||||
});
|
||||
|
@ -130,6 +143,23 @@
|
|||
<!-- <option value="preview">{$i18n.t("Preview")}</option> -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="position">
|
||||
{$i18n.t("Current position")}:
|
||||
<div class="label">
|
||||
<em>X:</em>
|
||||
{x} = {(Math.round(currentX * 100) / 100).toLocaleString("en", {
|
||||
useGrouping: false,
|
||||
minimumFractionDigits: 2,
|
||||
})}
|
||||
</div>
|
||||
<div class="label">
|
||||
<em>Y:</em>
|
||||
{y} = {(Math.round(currentY * 100) / 100).toLocaleString("en", {
|
||||
useGrouping: false,
|
||||
minimumFractionDigits: 2,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="view"
|
||||
|
@ -175,12 +205,22 @@
|
|||
gap: 2em;
|
||||
padding: 1em;
|
||||
border-bottom: 1px solid var(--foreground);
|
||||
align-items: center;
|
||||
|
||||
.axis-selector {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.position {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
em {
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view {
|
||||
|
|
Loading…
Reference in a new issue