Merge pull request #1593 from dfpc-coe/reactive-draw-tools

Reactive Draw Tool State

Author: ingalls

api/web/src/stores/modules/draw.ts

@@ -1,4 +1,5 @@
 import router from '../../router.ts';
+import { ref, reactive, shallowRef, shallowReactive } from 'vue';
 import { Preferences } from '@capacitor/preferences';
 import * as terraDraw from 'terra-draw';
 import * as tilecover from '@mapbox/tile-cover';
@@ -46,12 +47,31 @@ export enum DrawToolMode {
 
 export default class DrawTool {
     private draw: terraDraw.TerraDraw;
-    public editing: COT | null;
 
-    public mode: DrawToolMode;
+    // The DrawTool instance is stored with markRaw() in the map store, so any
+    // state the UI renders must be individually reactive (refs/reactive objects)
+    private _editing = shallowRef<COT | null>(null);
+
+    private _mode = ref<DrawToolMode>(DrawToolMode.STATIC);
 
     // Bumped on every TerraDraw change event to drive reactivity for canFinish
-    public _changeCount: number = 0;
+    private _changeCount = ref(0);
+
+    public get editing(): COT | null {
+        return this._editing.value;
+    }
+
+    public set editing(cot: COT | null) {
+        this._editing.value = cot;
+    }
+
+    public get mode(): DrawToolMode {
+        return this._mode.value;
+    }
+
+    public set mode(mode: DrawToolMode) {
+        this._mode.value = mode;
+    }
 
     public route: {
         graph: Routing;
@@ -79,7 +99,15 @@ export default class DrawTool {
         overlay: string;
     }
 
-    public snappingOptions: string[] = ['No Snapping'];
+    private _snappingOptions = ref<string[]>(['No Snapping']);
+
+    public get snappingOptions(): string[] {
+        return this._snappingOptions.value;
+    }
+
+    public set snappingOptions(options: string[]) {
+        this._snappingOptions.value = options;
+    }
 
     public get snappingLayer(): string {
         return this.route.layer;
@@ -114,7 +142,7 @@ export default class DrawTool {
 
     public get canFinish(): boolean {
         // Access _changeCount to establish reactivity
-        void this._changeCount;
+        void this._changeCount.value;
 
         if (this.mode === DrawToolMode.SELECT) {
             return !!this.editing;
@@ -200,14 +228,14 @@ export default class DrawTool {
             routeFinder: finder
         })
 
-        this.route = {
+        this.route = shallowReactive({
             finder,
             graph,
             tiles: new Map(),
             zoom: 12,
             layer: 'No Snapping',
             definitions: new Map()
-        };
+        });
 
         const routeSnapMode = new TerraDrawRouteSnapMode({
             straightLineFallback: {
@@ -453,21 +481,21 @@ export default class DrawTool {
         });
 
         this.draw.on('change', () => {
-            this._changeCount++;
+            this._changeCount.value++;
         });
 
         this.mode = DrawToolMode.STATIC;
         this.snapping = new Set();
         this.editing = null;
 
-        this.point = {
+        this.point = reactive({
             type: this.mapStore.defaultPointType
-        }
+        })
 
-        this.lasso = {
+        this.lasso = reactive({
             loading: false,
             overlay: 'Map Features'
-        }
+        })
     }
 
     async populateSnappingLayers(): Promise<void> {

bin/version.js

@@ -8,6 +8,7 @@ const pkg_root = JSON.parse(String(await fs.readFile(new URL('../package.json',
 const pkg_api = JSON.parse(String(await fs.readFile(new URL('../api/package.json', import.meta.url))));
 const pkg_web = JSON.parse(String(await fs.readFile(new URL('../api/web/package.json', import.meta.url))));
 const capacitor = JSON.parse(String(await fs.readFile(new URL('../capacitor.config.json', import.meta.url))));
+const xcodeproj = String(await fs.readFile(new URL('../ios/App/App.xcodeproj/project.pbxproj', import.meta.url)));
 
 console.error('ok version - ' + pkg_root.version);
 
@@ -18,12 +19,17 @@ capacitor.plugins.CapacitorUpdater.version = pkg_root.version;
 const updated = [
     new URL('../api/package.json', import.meta.url),
     new URL('../api/web/package.json', import.meta.url),
-    new URL('../capacitor.config.json', import.meta.url)
+    new URL('../capacitor.config.json', import.meta.url),
+    new URL('../ios/App/App.xcodeproj/project.pbxproj', import.meta.url)
 ];
 
 await fs.writeFile(updated[0], JSON.stringify(pkg_api, null, 4));
 await fs.writeFile(updated[1], JSON.stringify(pkg_web, null, 4));
 await fs.writeFile(updated[2], JSON.stringify(capacitor, null, 4));
+await fs.writeFile(updated[3], xcodeproj.replace(
+    /MARKETING_VERSION = [^;]+;/g,
+    `MARKETING_VERSION = ${pkg_root.version};`
+));
 
 console.error('ok saved');
 

ios/App/App.xcodeproj/project.pbxproj

@@ -334,7 +334,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 13.50.0;
+				MARKETING_VERSION = 13.52.0;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = io.cloudtak.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -360,7 +360,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 13.50.0;
+				MARKETING_VERSION = 13.52.0;
 				PRODUCT_BUNDLE_IDENTIFIER = io.cloudtak.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";