feat(webui): proper autofit of SurfaceColumn
ci/woodpecker/push/woodpecker Pipeline was successful
Details
ci/woodpecker/push/woodpecker Pipeline was successful
Details
parent
8c4ca4ef16
commit
03e3aafd70
|
@ -19,17 +19,21 @@
|
|||
export let y: string | undefined = undefined;
|
||||
$: dispatch("updateAddress", { x, y });
|
||||
|
||||
let loaded = false;
|
||||
|
||||
let viewMode = "point";
|
||||
|
||||
let currentX = NaN;
|
||||
let currentY = NaN;
|
||||
|
||||
let loaded = false;
|
||||
let zoom: ZoomBehavior<Element, unknown> | undefined;
|
||||
let autofit: () => void | undefined;
|
||||
|
||||
let view: Selection<HTMLElement, unknown, null, undefined>;
|
||||
let viewEl: HTMLElement | undefined;
|
||||
let viewHeight = 0;
|
||||
let viewWidth = 0;
|
||||
|
||||
let selector: Selector | undefined;
|
||||
|
||||
$: if (selector) selector.focus();
|
||||
|
@ -94,6 +98,10 @@
|
|||
}
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
tick().then(() => {
|
||||
autofit();
|
||||
});
|
||||
}
|
||||
|
||||
$: {
|
||||
|
@ -123,12 +131,12 @@
|
|||
|
||||
const xScale = d3
|
||||
.scaleLinear()
|
||||
.domain([0, viewWidth / 10])
|
||||
.domain([0, viewWidth])
|
||||
.range([0, viewWidth]);
|
||||
|
||||
const yScale = d3
|
||||
.scaleLinear()
|
||||
.domain([0, viewHeight / 10])
|
||||
.domain([0, viewHeight])
|
||||
.range([viewHeight, 0]);
|
||||
|
||||
let xTicks = 10;
|
||||
|
@ -166,6 +174,22 @@
|
|||
updateStyles();
|
||||
}
|
||||
|
||||
autofit = () => {
|
||||
zoom.translateTo(view, 0, viewHeight);
|
||||
|
||||
if (points.length) {
|
||||
zoom.scaleTo(
|
||||
view,
|
||||
Math.min(
|
||||
viewWidth / 2 / Math.max(...points.map((p) => Math.abs(p.x))) -
|
||||
0.3,
|
||||
viewHeight / 2 / Math.max(...points.map((p) => Math.abs(p.y))) -
|
||||
0.3,
|
||||
),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function updateStyles() {
|
||||
svg
|
||||
.selectAll(".tick line")
|
||||
|
@ -200,8 +224,7 @@
|
|||
selectorCoords = [currentX, currentY];
|
||||
});
|
||||
|
||||
zoom.translateTo(view, viewWidth / -2, viewHeight / 2, [0, 0]);
|
||||
zoom.scaleTo(view, 1);
|
||||
autofit();
|
||||
|
||||
loaded = true;
|
||||
}
|
||||
|
@ -291,8 +314,8 @@
|
|||
<div
|
||||
class="point selector"
|
||||
style="
|
||||
left: {selectorCoords[0] * 10}px;
|
||||
top: {viewHeight - selectorCoords[1] * 10}px"
|
||||
left: {selectorCoords[0]}px;
|
||||
top: {viewHeight - selectorCoords[1]}px"
|
||||
>
|
||||
<Selector
|
||||
types={["Address", "NewAddress"]}
|
||||
|
@ -307,7 +330,7 @@
|
|||
{#each points as point}
|
||||
<div
|
||||
class="point"
|
||||
style="left: {point.x * 10}px; top: {viewHeight - point.y * 10}px"
|
||||
style="left: {point.x}px; top: {viewHeight - point.y}px"
|
||||
>
|
||||
<div class="inner">
|
||||
{#if viewMode == "link"}
|
||||
|
|
Loading…
Reference in New Issue