feat: make graph work in div
This commit is contained in:
33
app/src/lib/grid/Row.svelte
Normal file
33
app/src/lib/grid/Row.svelte
Normal file
@@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { setContext, getContext } from "svelte";
|
||||
import localStore from "$lib/helpers/localStore";
|
||||
|
||||
const gridId = getContext<string>("grid-id");
|
||||
let sizes = localStore<string[]>(gridId, []);
|
||||
|
||||
let registerIndex = 0;
|
||||
setContext("registerCell", function () {
|
||||
let index = registerIndex;
|
||||
registerIndex++;
|
||||
if (registerIndex > $sizes.length) {
|
||||
$sizes = [...$sizes, "1fr"];
|
||||
}
|
||||
console.log("registering cell", registerIndex);
|
||||
return index;
|
||||
});
|
||||
|
||||
setContext("sizes", sizes);
|
||||
|
||||
$: cols = $sizes.map((size, i) => `${i > 0 ? "5px " : ""}` + size).join(" ");
|
||||
</script>
|
||||
|
||||
<div class="wrapper" style={`grid-template-columns: ${cols};`}>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user