<template>
  <div class="h-screen w-screen">
    <SplitterGroup id="splitter-group" direction="horizontal">
      <SplitterPanel
        id="splitter-group-panel-canvas"
        :default-size="80"
        :min-size="30"
        class="bg-white border rounded-xl flex items-center justify-center"
      >
        <LabCanvas></LabCanvas>
      </SplitterPanel>
      <SplitterResizeHandle id="splitter-group-resize-handle" class="w-2" />
      <SplitterPanel
        id="splitter-group-panel-properties"
        :min-size="20"
        class="bg-white border rounded-xl flex items-center justify-center"
      >
        Panel A
      </SplitterPanel>
    </SplitterGroup>
    <!-- <div class="absolute top-20 left-10">
      <input type="checkbox" class="checkbox" @change="handleCacheChange" />
      cache shapes
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
import LabCanvas from "@/components/LabCanvas.vue";
</script>

<style>
@import "../assets/main.css";
</style>
