48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
|
import { createEffect, createMemo, createSignal, on, ParentComponent } from 'solid-js';
|
||
|
|
import { displayStore, setDisplayStore } from '../stores/display.store';
|
||
|
|
|
||
|
|
export const DisplayListContainer: ParentComponent = (props) => {
|
||
|
|
const [olStyle, setOlStyle] = createSignal({
|
||
|
|
top: '0px',
|
||
|
|
left: '0px',
|
||
|
|
});
|
||
|
|
const [rootStyle, setRootStyle] = createSignal({
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
});
|
||
|
|
|
||
|
|
createEffect(() => {
|
||
|
|
const boundLeft = Math.min(0, ...displayStore.displays.map((display) => display.x));
|
||
|
|
const boundTop = Math.min(0, ...displayStore.displays.map((display) => display.y));
|
||
|
|
const boundRight = Math.max(
|
||
|
|
0,
|
||
|
|
...displayStore.displays.map((display) => display.x + display.width),
|
||
|
|
);
|
||
|
|
const boundBottom = Math.max(
|
||
|
|
0,
|
||
|
|
...displayStore.displays.map((display) => display.y + display.height),
|
||
|
|
);
|
||
|
|
|
||
|
|
setDisplayStore({
|
||
|
|
viewScale: 1200 / (boundRight - boundLeft),
|
||
|
|
});
|
||
|
|
|
||
|
|
setOlStyle({
|
||
|
|
top: `${-boundTop * displayStore.viewScale}px`,
|
||
|
|
left: `${-boundLeft * displayStore.viewScale}px`,
|
||
|
|
});
|
||
|
|
|
||
|
|
setRootStyle({
|
||
|
|
width: `${(boundRight - boundLeft) * displayStore.viewScale}px`,
|
||
|
|
height: `${(boundBottom - boundTop) * displayStore.viewScale}px`,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return (
|
||
|
|
<section class="relative bg-gray-400/30" style={rootStyle()}>
|
||
|
|
<ol class="absolute bg-gray-700" style={olStyle()}>
|
||
|
|
{props.children}
|
||
|
|
</ol>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|