demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 18:24:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

some basic viewer

Browse source
This commit is contained in:
Robin Appelman 2023-04-29 14:54:53 +02:00
commit 5910b2f35a
45 changed files with 1089 additions and 1436 deletions
Download patch file Download diff file Expand all files Collapse all files

35
script/viewer/Analyse/MapContainer.tsx
View file

@ -1,7 +1,8 @@
import {Panner} from "../Panner/Panner";
import {createEffect, createSignal, ParentProps} from "solid-js";
import {createEffect, createSignal, ParentProps, Show} from "solid-js";
import { createElementSize } from "@solid-primitives/resize-observer";
export class MapContainerProps {
export interface MapContainerProps {
contentSize: {
width: number;
height: number;
@ -9,25 +10,31 @@ export class MapContainerProps {
onScale?: (scale: number) => any;
}
export const MapContainer = ({children, contentSize, onScale}: ParentProps<MapContainerProps>) => {
export const MapContainer = (props: ParentProps<MapContainerProps>) => {
const [container, setContainer] = createSignal<Element>();
const scale = () => Math.min(
container().clientWidth / contentSize.width,
container().clientHeight / contentSize.height
);
const size = createElementSize(container);
const scale = () => {
if (size.width && size.height) {
return Math.min(size.width / props.contentSize.width, size.height / props.contentSize.height);
} else {
return 1;
}
}
createEffect(() => {
if (isFinite(scale())) {
onScale && onScale(scale());
props.onScale && props.onScale(scale());
}
});
return (
<div class="map-container" ref={setContainer}>
<Panner width={container().clientWidth} height={container().clientHeight}
scale={scale()} contentSize={contentSize}
onScale={onScale}>
{children}
</Panner>
<Show when={size.width}>
<Panner width={size.width} height={size.height}
scale={scale()} contentSize={props.contentSize}
onScale={props.onScale}>
{props.children}
</Panner>
</Show>
</div>
)
}
}