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 y: string = urlParams.get("y");
|
||||||
let viewMode = "link";
|
let viewMode = "link";
|
||||||
|
|
||||||
|
let currentX = NaN;
|
||||||
|
let currentY = NaN;
|
||||||
|
|
||||||
let loaded = false;
|
let loaded = false;
|
||||||
let viewHeight = 0;
|
let viewHeight = 0;
|
||||||
let viewWidth = 0;
|
let viewWidth = 0;
|
||||||
|
@ -109,6 +112,16 @@
|
||||||
svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
|
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);
|
d3.select(".view").call(zoom);
|
||||||
loaded = true;
|
loaded = true;
|
||||||
});
|
});
|
||||||
|
@ -130,6 +143,23 @@
|
||||||
<!-- <option value="preview">{$i18n.t("Preview")}</option> -->
|
<!-- <option value="preview">{$i18n.t("Preview")}</option> -->
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</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>
|
||||||
<div
|
<div
|
||||||
class="view"
|
class="view"
|
||||||
|
@ -175,12 +205,22 @@
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
border-bottom: 1px solid var(--foreground);
|
border-bottom: 1px solid var(--foreground);
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.axis-selector {
|
.axis-selector {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.position {
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
em {
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.view {
|
.view {
|
||||||
|
|
Loading…
Reference in a new issue