2023-01-10 21:45:03 +01:00
|
|
|
<script lang="ts">
|
|
|
|
import UpObject from "../components/display/UpObject.svelte";
|
|
|
|
import { queryOnce } from "../lib/api";
|
|
|
|
import Selector from "../components/utils/Selector.svelte";
|
|
|
|
import * as d3 from "d3";
|
|
|
|
import { onMount } from "svelte";
|
2023-01-11 00:21:51 +01:00
|
|
|
import type { ZoomTransform } from "d3";
|
|
|
|
import Spinner from "../components/utils/Spinner.svelte";
|
2023-01-10 21:45:03 +01:00
|
|
|
|
|
|
|
const urlSearch = window.location.href.substring(
|
|
|
|
window.location.href.indexOf("?")
|
|
|
|
);
|
|
|
|
const urlParams = new URLSearchParams(urlSearch);
|
|
|
|
|
|
|
|
let x: string = urlParams.get("x");
|
|
|
|
let y: string = urlParams.get("y");
|
|
|
|
|
2023-01-11 00:21:51 +01:00
|
|
|
let loaded = false;
|
|
|
|
let viewHeight = 0;
|
|
|
|
let viewWidth = 0;
|
|
|
|
|
2023-01-10 21:45:03 +01:00
|
|
|
interface IPoint {
|
|
|
|
address: string;
|
|
|
|
x: number;
|
|
|
|
y: number;
|
|
|
|
}
|
|
|
|
let points: IPoint[] = [];
|
|
|
|
|
|
|
|
$: {
|
|
|
|
if (x && y) {
|
|
|
|
points = [];
|
|
|
|
queryOnce(`(matches ? (in "${x}" "${y}") ?)`).then((result) => {
|
|
|
|
points = Object.entries(result.objects)
|
|
|
|
.map(([address, obj]) => {
|
|
|
|
let objX = parseInt(String(obj.get(x)));
|
|
|
|
let objY = parseInt(String(obj.get(y)));
|
|
|
|
|
|
|
|
if (objX && objY) {
|
|
|
|
return {
|
|
|
|
address,
|
|
|
|
x: objX,
|
|
|
|
y: objY,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.filter(Boolean);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
const view = d3.select(".view");
|
|
|
|
|
|
|
|
const svg = view.append("svg");
|
|
|
|
|
2023-01-11 00:21:51 +01:00
|
|
|
const xScale = d3
|
|
|
|
.scaleLinear()
|
|
|
|
.domain([0, viewWidth])
|
|
|
|
.range([0, viewWidth]);
|
2023-01-10 21:45:03 +01:00
|
|
|
|
|
|
|
const xAxis = d3
|
|
|
|
.axisBottom(xScale)
|
|
|
|
.ticks(15)
|
2023-01-11 00:21:51 +01:00
|
|
|
.tickSize(viewHeight)
|
|
|
|
.tickPadding(5 - viewHeight);
|
2023-01-10 21:45:03 +01:00
|
|
|
|
2023-01-11 00:21:51 +01:00
|
|
|
const yScale = d3
|
|
|
|
.scaleLinear()
|
|
|
|
.domain([0, viewHeight])
|
|
|
|
.range([viewHeight, 0]);
|
2023-01-10 21:45:03 +01:00
|
|
|
|
|
|
|
const yAxis = d3
|
|
|
|
.axisRight(yScale)
|
2023-01-11 00:21:51 +01:00
|
|
|
.ticks(viewHeight / (viewWidth / 15))
|
|
|
|
.tickSize(viewWidth)
|
|
|
|
.tickPadding(5 - viewWidth);
|
2023-01-10 21:45:03 +01:00
|
|
|
|
|
|
|
const gX = svg.append("g").attr("class", "axis axis--x").call(xAxis);
|
|
|
|
const gY = svg.append("g").attr("class", "axis axis--y").call(yAxis);
|
|
|
|
|
|
|
|
const zoom = d3
|
|
|
|
.zoom()
|
|
|
|
// .scaleExtent([1, 40])
|
|
|
|
// .translateExtent([
|
|
|
|
// [-100, -100],
|
|
|
|
// [width + 90, height + 100],
|
|
|
|
// ])
|
|
|
|
.on("zoom", zoomed);
|
|
|
|
|
|
|
|
function zoomed({ transform }: { transform: ZoomTransform }) {
|
|
|
|
const points = d3.select(".points");
|
|
|
|
points.style(
|
|
|
|
"transform",
|
|
|
|
`translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`
|
|
|
|
);
|
|
|
|
const allPoints = d3.selectAll(".point");
|
|
|
|
allPoints.style("transform", `scale(${1 / transform.k})`);
|
|
|
|
|
|
|
|
gX.call(xAxis.scale(transform.rescaleX(xScale)));
|
|
|
|
gY.call(yAxis.scale(transform.rescaleY(yScale)));
|
|
|
|
}
|
|
|
|
|
|
|
|
function reset() {
|
|
|
|
svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
|
|
|
|
}
|
|
|
|
|
2023-01-10 23:57:53 +01:00
|
|
|
d3.select(".view").call(zoom);
|
2023-01-11 00:21:51 +01:00
|
|
|
loaded = true;
|
2023-01-10 21:45:03 +01:00
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="surface">
|
|
|
|
<div class="header">
|
|
|
|
<div class="axis-selector">
|
|
|
|
X: <Selector type="attribute" bind:attribute={x} />
|
|
|
|
</div>
|
|
|
|
<div class="axis-selector">
|
|
|
|
Y: <Selector type="attribute" bind:attribute={y} />
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-11 00:21:51 +01:00
|
|
|
<div
|
|
|
|
class="view"
|
|
|
|
class:loaded
|
|
|
|
bind:clientWidth={viewWidth}
|
|
|
|
bind:clientHeight={viewHeight}
|
|
|
|
>
|
|
|
|
{#if !loaded}
|
|
|
|
<div class="loading">
|
|
|
|
<Spinner centered="absolute" />
|
|
|
|
</div>
|
|
|
|
{/if}
|
2023-01-10 21:45:03 +01:00
|
|
|
<div class="points">
|
|
|
|
{#each points as point}
|
2023-01-11 00:21:51 +01:00
|
|
|
<div
|
|
|
|
class="point"
|
|
|
|
style="left: {point.x}px; top: {viewHeight - point.y}px"
|
|
|
|
>
|
2023-01-10 23:57:53 +01:00
|
|
|
<div class="inner">
|
|
|
|
<UpObject point link address={point.address} />
|
|
|
|
</div>
|
2023-01-10 21:45:03 +01:00
|
|
|
</div>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.surface {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.header {
|
|
|
|
display: flex;
|
|
|
|
gap: 2em;
|
|
|
|
padding: 1em;
|
|
|
|
border-bottom: 1px solid var(--foreground);
|
|
|
|
|
|
|
|
.axis-selector {
|
|
|
|
display: flex;
|
|
|
|
gap: 1em;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.view {
|
|
|
|
flex-grow: 1;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
:global(svg) {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
2023-01-10 23:57:53 +01:00
|
|
|
:global(.tick text) {
|
|
|
|
color: var(--foreground-lightest);
|
|
|
|
font-size: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.points {
|
|
|
|
transform-origin: 0 0;
|
|
|
|
}
|
|
|
|
|
2023-01-10 21:45:03 +01:00
|
|
|
.point {
|
|
|
|
position: absolute;
|
2023-01-10 23:57:53 +01:00
|
|
|
transform-origin: 0 0;
|
|
|
|
|
|
|
|
.inner {
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
2023-01-10 21:45:03 +01:00
|
|
|
}
|
2023-01-11 00:21:51 +01:00
|
|
|
|
|
|
|
&: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);
|
2023-01-10 21:45:03 +01:00
|
|
|
}
|
|
|
|
</style>
|