visualization-design/src/views/Index.vue

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

    <div class="design-body">
      <Graphics />
      <View />
      <div style="border-left: 1px solid var(--color-border); z-index: 2">
        <FileProps v-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 { useSelection, SelectionMode } from '@/services/selections';

const { selections } = useSelection();
</script>

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

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