feat(config): specify layout component name

src/components/LayoutGrid.vue

@@ -19,22 +19,11 @@
 </template>
 
 <script lang="ts">
-import { Component, computed, defineComponent, PropType, toRefs } from 'vue';
+import { computed, defineComponent, PropType, toRefs } from 'vue';
 import { storeToRefs } from 'pinia';
-import VtkTwoView from './VtkTwoView.vue';
-import VtkObliqueView from './VtkObliqueView.vue';
-import VtkObliqueThreeView from './VtkObliqueThreeView.vue';
-import VtkThreeView from './VtkThreeView.vue';
+import { ViewTypeToComponent } from '@/src/core/viewTypes';
 import { Layout, LayoutDirection } from '../types/layout';
 import { useViewStore } from '../store/views';
-import { ViewType } from '../types/views';
-
-const TYPE_TO_COMPONENT: Record<ViewType, Component> = {
-  '2D': VtkTwoView,
-  '3D': VtkThreeView,
-  Oblique: VtkObliqueView,
-  Oblique3D: VtkObliqueThreeView,
-};
 
 export default defineComponent({
   name: 'LayoutGrid',
@@ -63,7 +52,7 @@ export default defineComponent({
           return {
             type: 'view',
             id: item,
-            component: TYPE_TO_COMPONENT[spec.viewType],
+            component: ViewTypeToComponent[spec.viewType],
             props: spec.props,
           };
         }

src/core/viewTypes.ts

@@ -0,0 +1,12 @@
+import VtkObliqueThreeView from '@/src/components/VtkObliqueThreeView.vue';
+import VtkObliqueView from '@/src/components/VtkObliqueView.vue';
+import VtkThreeView from '@/src/components/VtkThreeView.vue';
+import VtkTwoView from '@/src/components/VtkTwoView.vue';
+import { Component } from 'vue';
+
+export const ViewTypeToComponent: Record<string, Component> = {
+  '2D': VtkTwoView,
+  '3D': VtkThreeView,
+  Oblique: VtkObliqueView,
+  Oblique3D: VtkObliqueThreeView,
+};

src/io/state-file/schema.ts

@@ -25,7 +25,6 @@ import {
 import { LPSAxisDir, LPSAxis } from '../../types/lps';
 import { LayoutDirection } from '../../types/layout';
 import {
-  ViewType,
   ColorBy,
   ColorTransferFunction,
   OpacityFunction,
@@ -220,18 +219,11 @@ const ViewConfig = z.object({
   volumeColorConfig: VolumeColorConfig.optional(),
 });
 
-const ViewType = z.union([
-  z.literal('2D'),
-  z.literal('3D'),
-  z.literal('Oblique'),
-  z.literal('Oblique3D'),
-]) satisfies z.ZodType<ViewType>;
-
 export type ViewConfig = z.infer<typeof ViewConfig>;
 
 const View = z.object({
   id: z.string(),
-  type: ViewType,
+  type: z.string(),
   props: z.record(z.any()),
   config: z.record(ViewConfig),
 });

src/types/views.ts

@@ -4,10 +4,8 @@ import {
   PiecewiseNode,
 } from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
 
-export type ViewType = '2D' | '3D' | 'Oblique' | 'Oblique3D';
-
 export interface ViewSpec {
-  viewType: ViewType;
+  viewType: string;
   props: Record<string, any>;
 }