Simple integration

Rapid simple integration done. This is WIP

Author: susrisha

package-lock.json

@@ -0,0 +1,73 @@
+<template>
+    <div class="pageContainer">
+  <div ref="editorContainer" class="rapidEditorContainer"></div>
+  <div class="sidebar">
+    <p class="text-center mt-3">Loading editor...</p>
+    <p> Add the action items here based on the selected workspace and editor.</p>
+  </div>
+  </div>
+   
+</template>
+<script setup lang="ts">
+import { pathwaysManager, rapidManager, rapid3Manager } from '~/services/index';
+
+const route = useRoute();
+const workspaceId = route.params.id;
+const datatype = route.query.datatype;
+const editor = route.query.editor;
+const editorContainer = ref(null);
+
+const oswManager = (editor === 'rapid3' && rapid3Manager) ? rapid3Manager : rapidManager
+const manager = datatype === 'osw' ? oswManager : pathwaysManager
+
+function onEditorLoaded() {
+  editorContainer.value.appendChild(manager.containerNode);
+  manager.init(workspaceId);
+  
+}
+
+onMounted(() => {
+  // If a different Rapid version is already loaded, hard-reload to swap.
+  // Only one version can occupy the global Rapid namespace at a time.
+  if (datatype === 'osw') {
+    const otherManager = manager === rapidManager ? rapid3Manager : rapidManager
+    if (otherManager?.loaded.value) {
+      window.location.reload()
+      return
+    }
+  }
+  rapidManager.onStateChange((changes) => {
+     console.log('Rapid state changed:', changes);
+  });
+
+  if (!manager.loaded.value) {
+    watch(manager.loaded, (val) => {
+      if (val) {
+        onEditorLoaded();
+      }
+    });
+
+    manager.load();
+  } else {
+    editorContainer.value.appendChild(manager.containerNode);
+    manager.switchWorkspace(workspaceId);
+  }
+});
+</script>
+
+<style>
+.pageContainer{
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+.rapidEditorContainer {
+  width: 80%;
+  height: 100%;
+}
+.sidebar {
+  width: 20%;
+  height: 100%;
+}
+</style>

pages/workspace/[id]/rapid.vue

@@ -5,6 +5,8 @@ export class RapidManager {
   #baseUrl: string;
   #osmUrl: string;
   #tdeiAuth: TdeiAuthStore;
+  #stateCallback: ((state: any) => void) | null = null;
+  
 
   constructor(baseUrl: string, osmUrl: string, tdeiAuth: TdeiAuthStore) {
     this.#baseUrl = baseUrl;
@@ -16,6 +18,16 @@ export class RapidManager {
     this.rapidContext = null;
   }
 
+  onStateChange(callback: (state: any) => void) {
+    this.#stateCallback = callback;
+  }
+
+  #notifyStateChange(state: any) {
+    if (this.#stateCallback) {
+      this.#stateCallback(state);
+    }
+  }
+
   load() {
     if (this.loaded.value) {
       return
@@ -62,8 +74,10 @@ export class RapidManager {
     this.rapidContext.embed(true);
     this.rapidContext.containerNode = this.containerNode;
     this.rapidContext.assetPath = this.#baseUrl;
+    
 
-    console.info('Rapid loaded', this.rapidContext);
+    console.log('Rapid loaded', this.rapidContext);
+    
   }
 
   #patchRapid() {
@@ -75,6 +89,23 @@ export class RapidManager {
 
     // Don't bother to fetch user details when uploading changesets:
     rapidOsmService.userDetails = (callback) => { callback('dummy error') };
+    // const editor = this.rapidContext.editor;
+    // console.info('Rapid editor', editor);
+    console.log('Rapid editor ',this.rapidContext);
+    const editSystem = this.rapidContext.systems.editor;
+    editSystem.on('stablechange', (state) => {
+      // this.#notifyStateChange(state);
+      const changes = editSystem.changes();
+      console.log('Rapid editor changes', changes);
+      const changesLength = changes.modified.length || changes.created.length || changes.deleted.length;
+       
+      this.#notifyStateChange(changesLength);
+       
+    });
+     
+    // editSystem.on('reset', () => {
+    //   console.log('Rapid editor reset');
+    // });
   }
 
   #wrapFetch(innerFetch) {