<template>
  <div class="app-page" @contextmenu.prevent>
    <Header />

    <div class="design-body">
      <Graphics />
      <View />
      <div style="border-left: 1px solid var(--color-border);">
        <FitProps v-if="selections.mode === SelectionMode.Fit" />
        <FileProps v-else-if="selections.mode === SelectionMode.File" />
        <PenProps v-else-if="selections.mode === SelectionMode.Pen" />
        <PensProps v-else />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from './components/Header.vue';
import Graphics from './components/Graphics.vue';
import View from './components/View.vue';
import FileProps from './components/FileProps.vue';
import PenProps from './components/PenProps.vue';
import PensProps from './components/PensProps.vue';
import FitProps from './components/FitProps.vue';

import { useSelection, SelectionMode } from '@/services/selections';
import {onMounted} from "vue";

onMounted(()=>{
  selections.mode = SelectionMode.File
})
const { selections } = useSelection();
</script>

<style lang="postcss" scoped>
.app-page {
  height: 100vh;

  .design-body {
    display: grid;
    grid-template-columns: 300px calc(100% - 601px) 301px;
    height: calc(100vh - 40px);
    border-top: 1px solid var(--color-border);
  }
}
</style>
