Vue migration to composition api

.github/workflows/test.yml

@@ -15,6 +15,19 @@ on:
       - 'main'
 
 jobs:
+  typecheck-siteplan:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: web/siteplan
+
+      - name: Run typecheck
+        run: npm run typecheck
+        working-directory: web/siteplan
+
   test-siteplan:
     runs-on: ubuntu-latest
     steps:

web/siteplan/package.json

@@ -9,7 +9,8 @@
     "build": "vite build --mode development",
     "build-prod": "vite build --mode production",
     "lint": "eslint src",
-    "test:e2e": "playwright test"
+    "test:e2e": "playwright test",
+    "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@turf/boolean-disjoint": "^7.3.5",
@@ -42,6 +43,7 @@
     "eslint-plugin-vue": "^10.8.0",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.8"
+    "vite": "^8.0.8",
+    "vue-tsc": "^3.3.4"
   }
 }

web/siteplan/src/App.vue

@@ -13,73 +13,67 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import Menubar from '@/components/toolbar/Menubar.vue'
 import Toolbar from '@/components/toolbar/Toolbar.vue'
 import axios from 'axios'
-import { Options, Vue } from 'vue-class-component'
+import { onMounted, ref } from 'vue'
 import SvgCatalogService from './service/SvgCatalogService'
 import { store } from './store'
 import Configuration from './util/Configuration'
 import PlanProToolboxTest from './util/PlanProToolboxTest'
 import { ToolboxConfiguration } from './util/ToolboxConfiguration'
-@Options({
-  async created () {
-    store.commit('setLoading', true)
-    // Download the siteplan font
-    await axios({
-      method: 'GET',
-      url: 'font',
-      responseType: 'blob'
-    })
-      .then(response => {
-        const reader = new FileReader()
-        reader.onload = () => {
-          store.commit(
-            'setSiteplanfont',
-            `
+
+const isShowMenu = ref(false)
+const loading = ref(true)
+
+function showMenu (value: boolean): void {
+  isShowMenu.value = value
+}
+
+onMounted (async () => {
+  store.commit('setLoading', true)
+  // Download the siteplan font
+  await axios({
+    method: 'GET',
+    url: 'font',
+    responseType: 'blob'
+  })
+    .then(response => {
+      const reader = new FileReader()
+      reader.onload = () => {
+        store.commit(
+          'setSiteplanfont',
+          `
         @font-face {
           font-family: 'siteplanfont';
           src: url('${reader.result}') format('truetype');
         }`
-          )
-        }
-        reader.readAsDataURL(new Blob([response.data]))
-      })
-      .catch(() => {
-        console.warn('Siteplan Font not available')
-      })
-    // Wait until the svg catalog service is ready
-    await SvgCatalogService.getInstance().isReady()
-    // Download the toolbox configuration
-    await axios
-      .get<ToolboxConfiguration>('/configuration.json')
-      .then(response => {
-        store.commit('setpptConfiguration', response.data)
-        store.commit('setSheetCutCRS', response.data.defaultSheetCutCRS)
-        store.commit('setPlanProModelType', response.data.planproModelType)
-        // run unit tests
-        if (Configuration.developmentMode()) {
-          PlanProToolboxTest.run()
-        }
+        )
+      }
+      reader.readAsDataURL(new Blob([response.data]))
+    })
+    .catch(() => {
+      console.warn('Siteplan Font not available')
+    })
+  // Wait until the svg catalog service is ready
+  await SvgCatalogService.getInstance().isReady()
+  // Download the toolbox configuration
+  await axios
+    .get<ToolboxConfiguration>('/configuration.json')
+    .then(response => {
+      store.commit('setpptConfiguration', response.data)
+      store.commit('setSheetCutCRS', response.data.defaultSheetCutCRS)
+      store.commit('setPlanProModelType', response.data.planproModelType)
+      // run unit tests
+      if (Configuration.developmentMode()) {
+        PlanProToolboxTest.run()
+      }
 
-        this.loading = false
-      })
-  },
-  components: {
-    Toolbar,
-    Menubar
-  }
+      loading.value = false
+    })
 })
-export default class App extends Vue {
-  isShowMenu = false
-  altClientHeight = 0
-  loading = true
 
-  showMenu (value: boolean): void {
-    this.isShowMenu = value
-  }
-}
 </script>
 <style>
 html,
@@ -95,13 +89,16 @@ body {
   height: 100vh;
   flex-direction: column;
 }
+
 #view {
   display: flex;
   flex: 1;
 }
+
 #menubar {
   flex-grow: 1;
 }
+
 #mainView {
   flex-grow: 5;
 }

web/siteplan/src/collision/CollisionDetection.ts

@@ -29,7 +29,7 @@ export default class CollisionDetection {
    * @returns a list of collisions between groups of features
    */
   public getCollisions (bboxFeatures: Feature<Geometry>[]): Collision[] {
-    const layer = new VectorSource<Geometry>()
+    const layer = new VectorSource()
     layer.addFeatures(bboxFeatures)
     const featuresIntersectExtent = new Array<Feature<Geometry>[]>()
     const collisions: Collision[] = []
@@ -86,7 +86,7 @@ export default class CollisionDetection {
    * @returns outer intersection features
    */
   private getIntersectFeaturesByExtent (
-    layer: VectorSource<Geometry>,
+    layer: VectorSource,
     feature: Feature<Geometry>
   ) : Feature<Geometry>[] {
     const overlapFeatures = new Array<Feature<Geometry>>()

web/siteplan/src/collision/CollisionFeature.ts

@@ -35,7 +35,7 @@ export interface CollisionFeatureData {
 export default class CollisionFeature {
   public static addCollisionFeatures (layers: NamedFeatureLayer[]) {
     const features = layers.map(layer => layer.getSource())
-      .filter((c): c is VectorSource<Geometry> => c != null)
+      .filter((c): c is VectorSource => c != null)
       .flatMap(c => c.getFeatures())
 
     const layer = layers.find(c => c.getLayerType() === FeatureLayerType.Collision)