@vcmap/ui 5.0.0-rc.21 → 5.0.0-rc.23

package/plugins/@vcmap/project-selector/index.js

@@ -1,50 +1,42 @@
-import { ref } from 'vue';
+import { reactive } from 'vue';
 import { ButtonLocation, createToggleAction } from '@vcmap/ui';
-import { Context } from '@vcmap/core';
+import { VcsModule } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 import ProjectsComponent from './ProjectSelectorComponent.vue';
 import packageJSON from './package.json';
 import defaultConfig from './config.json';
 import de from './de.json';
 import en from './en.json';
-/**
- * @typedef {Object} VCMapContextOptions
- * @property {string} [name]
- * @property {string} [description]
- * @property {string} configUrl
- */
 
 /**
- * @typedef {Object} VCMapContext
+ * @typedef {Object} VcsModuleState
+ * @property {string} _id
  * @property {string} [name]
  * @property {string} [description]
  * @property {string} configUrl
- * @property {string} contextId
  * @property {boolean} active
  */
 
 /**
- * @typedef {Object} VCMapProjectOptions
+ * @typedef {Object} ProjectOptions
  * @property {string} name
  * @property {string} [description]
- * @property {Array<VCMapContextOptions>} contexts
+ * @property {Array<string>} modules - a list of config urls
  */
 
 /**
- * @typedef {Object} VCMapProject
- * @property {string} name
- * @property {string} [description]
- * @property {Array<VCMapContext>} contexts
+ * @typedef {ProjectOptions} Project
  * @property {boolean} active
+ * @property {Array<VcsModuleState>} modules
  */
 
 /**
  * @typedef {Object} ProjectSelectorConfig
  * @property {string} [selected='VC Map Base'] - selected project on startup
- * @property {string[]} [selectedContexts] - selected contexts on startup
+ * @property {string[]} [selectedModules] - selected modules on startup
  * @property {boolean} [open=false] - open plugin on startup
- * @property {Array<VCMapProjectOptions>} projects
- * @property {Array<VCMapContextOptions>} contexts
+ * @property {Array<Project>} projects
+ * @property {Array<string>} modules
  */
 
 /**
@@ -52,120 +44,103 @@ import en from './en.json';
  * @returns {VcsPlugin}
  */
 export default async function projectSelector(config) {
-  const { selected, selectedContexts, open, projects = [], contexts = [] } = config;
+  const { selected, selectedModules, open, projects = [], modules = [] } = config;
 
-  const pluginConfig = {
-    selected: ref(selected || defaultConfig.selected),
-    selectedContexts: ref(selectedContexts || defaultConfig.selectedContexts),
-    open: ref(open || defaultConfig.open),
-    projects: ref(/** @type {Array<VCMapProjectOptions>} */[...defaultConfig.projects, ...projects]),
-    contexts: ref(/** @type {Array<VCMapContextOptions>} */[...defaultConfig.contexts, ...contexts]),
-  };
+  const pluginConfig = reactive({
+    selected: selected || defaultConfig.selected,
+    selectedModules: selectedModules || defaultConfig.selectedModules,
+    open: open || defaultConfig.open,
+    projects: /** @type {Array<ProjectOptions>} */[...defaultConfig.projects, ...projects],
+    modules: /** @type {Array<string>} */[...defaultConfig.modules, ...modules],
+  });
 
-  const pluginState = {
-    projects: ref(/** @type {Array<VCMapProject>} */[]),
-    contexts: ref(/** @type {Array<VCMapContext>} */[]),
-  };
+  const pluginState = reactive({
+    projects: /** @type {Array<Project>} */[],
+    modules: /** @type {Array<VcsModuleState>} */[],
+  });
 
   /**
-   * @param {VCMapContextOptions} contextOptions
+   * @param {string} configUrl
    */
-  function addContextFromOptions(contextOptions) {
-    /**
-     * @type {VCMapContext}
-     */
-    const context = {
-      name: undefined,
-      description: undefined,
-      configUrl: undefined,
-      ...contextOptions,
-      contextId: undefined,
-      active: false,
-    };
-    pluginState.contexts.value.push(context);
+  function addModule(configUrl) {
+    pluginState.modules.push({ _id: undefined, configUrl, active: false });
   }
 
   /**
-   * @param {VCMapContext} context
+   * @param {string} moduleId
    */
-  function removeContext(context) {
-    const idx = pluginState.contexts.value.findIndex(c => c.configUrl === context.configUrl);
-    pluginState.contexts.value.splice(idx, 1);
+  function removeModule(moduleId) {
+    const idx = pluginState.modules.findIndex(({ _id }) => _id === moduleId);
+    pluginState.modules.splice(idx, 1);
   }
 
   /**
-   * @param {VCMapProjectOptions} projectOptions
+   * @param {ProjectOptions} projectOptions
    */
-  function addProjectFromOptions(projectOptions) {
-    const { name, description, contexts: contextsOptions = [] } = projectOptions;
-    /**
-     * @type {VCMapProject}
-     */
+  function addProject({ name, description, modules: configUrls }) {
     const project = {
       name,
       description,
-      contexts: contextsOptions.map(options => /** @type {VCMapContext} */({
-        name: undefined,
-        description: undefined,
-        configUrl: undefined,
-        ...options,
-        contextId: undefined,
-        active: false,
-      })),
+      modules: configUrls.map(configUrl => ({ _id: undefined, configUrl, active: false })),
       active: false,
     };
-    pluginState.projects.value.push(project);
+    pluginState.projects.push(project);
   }
 
   /**
-   * @param {VCMapProject} project
+   * @param {Project} project
    */
   function removeProject(project) {
     const projectIdx = pluginState.projects.findIndex(p => p.name === project.name);
-    pluginState.projects.value.splice(projectIdx, 1);
+    pluginState.projects.splice(projectIdx, 1);
   }
 
   /**
    * @param {VcsApp} app
-   * @param {VCMapContext} vcMapContext
+   * @param {VcsModuleState} moduleState
    * @returns {Promise<void>}
    */
-  async function loadContext(app, vcMapContext) {
+  async function loadModule(app, moduleState) {
     try {
-      const configJson = await fetch(vcMapContext.configUrl)
-        .then(response => response.json());
-      const context = new Context(configJson);
-      if (!app.getContextById(context.id)) {
-        await app.addContext(context);
+      const response = await fetch(moduleState.configUrl);
+      if (response.ok) {
+        const configJson = await response.json();
+        const module = new VcsModule(configJson);
+        if (!app.getModuleById(module._id)) {
+          await app.addModule(module);
+          moduleState._id = module._id;
+          moduleState.name = module.name;
+          moduleState.description = module.description;
+          moduleState.active = true;
+        }
       }
-      vcMapContext.contextId = context.id;
-      vcMapContext.active = true;
     } catch (err) {
-      getLogger().error(`Failed loading context from ${ vcMapContext.configUrl}`, err);
+      getLogger().error(`Failed loading module from ${moduleState.configUrl}`, err);
     }
   }
 
   /**
    * @param {VcsApp} app
-   * @param {VCMapContext} vcMapContext
+   * @param {VcsModuleState} moduleState
    * @returns {Promise<void>}
    */
-  async function unloadContext(app, vcMapContext) {
-    if (app.getContextById(vcMapContext.contextId)) {
-      await app.removeContext(vcMapContext.contextId);
+  async function unloadModule(app, moduleState) {
+    if (app.getModuleById(moduleState._id)) {
+      await app.removeModule(moduleState._id);
+      moduleState.active = false;
+      moduleState._id = undefined;
     }
-    vcMapContext.active = false;
   }
 
   /**
    * @param {VcsApp} app
-   * @param {VCMapProject} project
+   * @param {Project} project
    * @returns {Promise<void>}
    */
   async function deselectProject(app, project) {
     if (project.active) {
-      await Promise.all([...project.contexts].map((context) => {
-        return unloadContext(app, context);
+      await Promise.all([...project.modules].map((moduleState) => {
+        return unloadModule(app, moduleState);
       }));
       project.active = false;
     }
@@ -173,16 +148,16 @@ export default async function projectSelector(config) {
 
   /**
    * @param {VcsApp} app
-   * @param {VCMapProject} project
+   * @param {Project} project
    * @returns {Promise<void>}
    */
   async function selectProject(app, project) {
     if (!project.active) {
-      await Promise.all([...pluginState.projects.value].map((p) => {
+      await Promise.all([...pluginState.projects].map((p) => {
         return deselectProject(app, p);
       }));
-      await Promise.all([...project.contexts].map((context) => {
-        return loadContext(app, context);
+      await Promise.all([...project.modules].map((moduleState) => {
+        return loadModule(app, moduleState);
       }));
       project.active = true;
     }
@@ -194,14 +169,14 @@ export default async function projectSelector(config) {
     get vcMapVersion() { return packageJSON.vcMapVersion; },
     config: pluginConfig,
     state: pluginState,
-    addContextFromOptions,
-    removeContext,
-    addProjectFromOptions,
+    addModule,
+    removeModule,
+    addProject,
     removeProject,
     selectProject,
     deselectProject,
-    loadContext,
-    unloadContext,
+    loadModule,
+    unloadModule,
     onVcsAppMounted(app) {
       const windowComponent = {
         id: 'project-selector',
@@ -232,15 +207,15 @@ export default async function projectSelector(config) {
       );
       this._destroyAction = destroy;
 
-      pluginConfig.contexts.value.forEach(c => addContextFromOptions(c));
-      pluginConfig.projects.value.forEach(p => addProjectFromOptions(p));
-      const projectToSelect = [...pluginState.projects.value]
-        .find(p => p.name === pluginConfig.selected.value) ||
-        pluginState.projects.value[0];
+      pluginConfig.modules.forEach(c => addModule(c));
+      pluginConfig.projects.forEach(p => addProject(p));
+      const projectToSelect = [...pluginState.projects]
+        .find(p => p.name === pluginConfig.selected) ||
+        pluginState.projects[0];
       selectProject(app, projectToSelect);
-      const contextsToSelect = [...pluginState.contexts.value]
-        .filter(c => pluginConfig.selectedContexts.value.includes(c.name));
-      contextsToSelect.forEach(c => loadContext(app, c));
+      const modulesToSelect = [...pluginState.modules]
+        .filter(m => pluginConfig.selectedModules.includes(m.configUrl));
+      modulesToSelect.forEach(m => loadModule(app, m));
       if (pluginConfig.open) {
         app.windowManager.add(windowComponent, packageJSON.name);
       }

package/plugins/@vcmap/simple-graph/index.js

@@ -8,7 +8,7 @@ export default async function () {
     onVcsAppMounted(app) {
       /** Example for registering custom component on FeatureInfo */
       app.featureInfo.classRegistry.registerClass(
-        app.dynamicContextId,
+        app.dynamicModuleId,
         SimpleGraphView.className,
         SimpleGraphView,
       );

package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue

@@ -38,22 +38,28 @@
           </v-list-item-action>
         </v-list-item>
         <v-card class="my-1 ma-1 py-1 white">
+          <h2>
+            light
+          </h2>
           <v-chip
             class="mx-1"
             label
-            :color="theme.dark[key]"
-            v-for="(key, index) in Object.keys(theme.dark)"
+            :color="theme.light[key]?.base || theme.light[key]"
+            v-for="(key, index) in Object.keys(theme.light)"
             :key="index"
           >
             {{ key }}
           </v-chip>
         </v-card>
         <v-card class="my-1 ma-1 py-1 black">
+          <h2 class="white--text">
+            dark
+          </h2>
           <v-chip
             class="mx-1"
             label
-            :color="theme.light[key]"
-            v-for="(key, index) in Object.keys(theme.light)"
+            :color="theme.dark[key]?.base || theme.dark[key]"
+            v-for="(key, index) in Object.keys(theme.dark)"
             :key="index"
           >
             {{ key }}

package/plugins/@vcmap-show-case/category-tester/Categories.vue

@@ -163,7 +163,7 @@
             }
             const category = await app.categories.requestCategory({ name: jsonUpload.name, type: 'Category' });
             if (jsonUpload?.items?.length > 0) {
-              await app.categories.parseCategoryItems(jsonUpload.name, jsonUpload.items, app.dynamicContextId);
+              await app.categories.parseCategoryItems(jsonUpload.name, jsonUpload.items, app.dynamicModuleId);
             }
             app.categoryManager.add({ categoryName: category.name }, packageJSON.name);
             uploadString.value = '';
@@ -176,7 +176,7 @@
           if (!app.categories.hasKey('layers')) {
             const layersCat = await app.categories.requestCategory({
               name: 'layers',
-              type: 'AppBackedCategory',
+              type: 'Category',
               collectionName: 'layers',
               title: 'categories.layers',
             });

package/plugins/@vcmap-show-case/category-tester/Category.vue

@@ -66,14 +66,12 @@
     VCard,
     VForm,
     VTextarea,
-    VBtn,
   } from 'vuetify/lib';
 
   export default {
     name: 'CategoryComponent',
     components: {
       VcsButton,
-      VSheet,
       VVirtualScroll,
       VListItem,
       VListItemContent,
@@ -84,7 +82,6 @@
       VForm,
       VTextarea,
       VSheet,
-      VBtn,
     },
     props: {
       categoryName: {
@@ -129,7 +126,7 @@
           dialog.value = false;
         },
         download() {
-          const stringObject = JSON.stringify(categoryObject.serializeForContext(app.dynamicContextId), null, 2);
+          const stringObject = JSON.stringify(categoryObject.serializeModule(app.dynamicModuleId), null, 2);
           downloadLink.value = `data:text/json;charset=utf-8,${encodeURIComponent(stringObject)}`;
           if (downloadLink.value) {
             nextTick(() => {

package/plugins/@vcmap-show-case/config-editor/editor.vue

@@ -8,10 +8,10 @@
       v-else
     />
 
-    <VcsButton @click="replaceContext">
+    <VcsButton @click="replaceModule">
       Apply
     </VcsButton>
-    <VcsButton @click="removeContext">
+    <VcsButton @click="removeModule">
       Remove
     </VcsButton>
   </div>
@@ -20,10 +20,10 @@
 <script>
   import { ref, inject } from 'vue';
   import { VcsButton } from '@vcmap/ui';
-  import { Context } from '@vcmap/core';
+  import { VcsModule } from '@vcmap/core';
   import { VProgressCircular, VTextarea } from 'vuetify/lib';
 
-  const contextId = 'foo';
+  const moduleId = 'foo';
 
   export default {
     name: 'Editor',
@@ -35,25 +35,25 @@
     setup() {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
-      const context = app.getContextById(contextId);
-      const configString = ref(JSON.stringify(context ? context.config : {}, null, 2));
+      const module = app.getModuleById(moduleId);
+      const configString = ref(JSON.stringify(module ? module.config : {}, null, 2));
       const loading = ref(false);
 
       return {
         configString,
         loading,
-        async replaceContext() {
+        async replaceModule() {
           loading.value = true;
           const config = JSON.parse(configString.value);
-          config.id = contextId;
-          const newContext = new Context(config);
-          await this.removeContext();
-          await app.addContext(newContext);
+          config.id = moduleId;
+          const newModule = new VcsModule(config);
+          await this.removeModule();
+          await app.addModule(newModule);
           loading.value = false;
         },
-        async removeContext() {
-          if (app.getContextById(contextId)) {
-            await app.removeContext(contextId);
+        async removeModule() {
+          if (app.getModuleById(moduleId)) {
+            await app.removeModule(moduleId);
           }
         },
       };