feat(ui): reverse surface Y scale, add loading state
parent
fce2c5d63c
commit
0be4239b6e
|
@ -4,7 +4,8 @@
|
|||
import Selector from "../components/utils/Selector.svelte";
|
||||
import * as d3 from "d3";
|
||||
import { onMount } from "svelte";
|
||||
import type { D3ZoomEvent, ZoomTransform } from "d3";
|
||||
import type { ZoomTransform } from "d3";
|
||||
import Spinner from "../components/utils/Spinner.svelte";
|
||||
|
||||
const urlSearch = window.location.href.substring(
|
||||
window.location.href.indexOf("?")
|
||||
|
@ -14,6 +15,10 @@
|
|||
let x: string = urlParams.get("x");
|
||||
let y: string = urlParams.get("y");
|
||||
|
||||
let loaded = false;
|
||||
let viewHeight = 0;
|
||||
let viewWidth = 0;
|
||||
|
||||
interface IPoint {
|
||||
address: string;
|
||||
x: number;
|
||||
|
@ -45,27 +50,30 @@
|
|||
|
||||
onMount(() => {
|
||||
const view = d3.select(".view");
|
||||
const { width, height } = (
|
||||
view.node() as HTMLElement
|
||||
).getBoundingClientRect();
|
||||
|
||||
const svg = view.append("svg");
|
||||
|
||||
const xScale = d3.scaleLinear().domain([0, width]).range([0, width]);
|
||||
const xScale = d3
|
||||
.scaleLinear()
|
||||
.domain([0, viewWidth])
|
||||
.range([0, viewWidth]);
|
||||
|
||||
const xAxis = d3
|
||||
.axisBottom(xScale)
|
||||
.ticks(15)
|
||||
.tickSize(height)
|
||||
.tickPadding(5 - height);
|
||||
.tickSize(viewHeight)
|
||||
.tickPadding(5 - viewHeight);
|
||||
|
||||
const yScale = d3.scaleLinear().domain([0, height]).range([0, height]);
|
||||
const yScale = d3
|
||||
.scaleLinear()
|
||||
.domain([0, viewHeight])
|
||||
.range([viewHeight, 0]);
|
||||
|
||||
const yAxis = d3
|
||||
.axisRight(yScale)
|
||||
.ticks(height / (width / 15))
|
||||
.tickSize(width)
|
||||
.tickPadding(5 - width);
|
||||
.ticks(viewHeight / (viewWidth / 15))
|
||||
.tickSize(viewWidth)
|
||||
.tickPadding(5 - viewWidth);
|
||||
|
||||
const gX = svg.append("g").attr("class", "axis axis--x").call(xAxis);
|
||||
const gY = svg.append("g").attr("class", "axis axis--y").call(yAxis);
|
||||
|
@ -97,6 +105,7 @@
|
|||
}
|
||||
|
||||
d3.select(".view").call(zoom);
|
||||
loaded = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@ -109,10 +118,23 @@
|
|||
Y: <Selector type="attribute" bind:attribute={y} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="view">
|
||||
<div
|
||||
class="view"
|
||||
class:loaded
|
||||
bind:clientWidth={viewWidth}
|
||||
bind:clientHeight={viewHeight}
|
||||
>
|
||||
{#if !loaded}
|
||||
<div class="loading">
|
||||
<Spinner centered="absolute" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="points">
|
||||
{#each points as point}
|
||||
<div class="point" style="left: {point.x}px; top: {point.y}px">
|
||||
<div
|
||||
class="point"
|
||||
style="left: {point.x}px; top: {viewHeight - point.y}px"
|
||||
>
|
||||
<div class="inner">
|
||||
<UpObject point link address={point.address} />
|
||||
</div>
|
||||
|
@ -170,5 +192,20 @@
|
|||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.loaded) {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 99;
|
||||
transform: scale(3);
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue