Merge pull request #451 from fschmenger/multiple_module_instances

Support multiple instances of a module.

Author: fschmenger

app-starter/WguAppTemplate.vue

@@ -186,7 +186,8 @@ export default {
         const moduleOpts = appConfig.modules[key];
         if (moduleOpts.win === target) {
           moduleWins.push({
-            type: key + '-win',
+            type: (moduleOpts.moduleType ?? key) + '-win',
+            moduleName: key,
             ...moduleOpts
           });
         }

app-starter/components/AppHeader.vue

@@ -99,7 +99,9 @@ export default {
         const moduleOpts = appConfig.modules[key];
         if (moduleOpts.target === target) {
           buttons.push({
-            type: moduleOpts.win ? 'wgu-toggle-btn' : key + '-btn',
+            type: moduleOpts.win
+              ? 'wgu-toggle-btn'
+              : (moduleOpts.moduleType ?? key) + '-btn',
             moduleName: key,
             ...moduleOpts
           });

app-starter/components/SampleModule.vue

@@ -7,7 +7,6 @@
   -->
   <wgu-module-card
     v-bind="$attrs"
-    moduleName="sample-module"
     class="sample-module"
     :icon="icon"
   >

docs/module-configuration.md

@@ -4,22 +4,68 @@ JSON configuration objects for Wegue modules.
 
 ## General
 
-The `modules` object contains sub-objects, whereas the key is the identifier for the module and the value is the dedicated module configuration. For example:
+The `modules` object contains sub-objects, where the key is the identifier for the module instance and the value is the dedicated module configuration. For example:
 
 ```json
-  "wgu-layerlist": {
-    "target": "menu",
-    "win": "floating",
-    "draggable": false
-  }
+"wgu-layerlist": {
+  "target": "menu",
+  "win": "floating",
+  "draggable": false
+}
 ```
 
+### Module identifier and module type
+In general, the identifier specifies the type of module to be added.
+In the example above, Wegue will look for a Vue component matching the module type `wgu-layerlist` and automatically append the `-win` suffix when resolving the component name. Internally, this results in the component `wgu-layerlist-win`, which must be registered in the application, for example:
+
+```js
+import LayerListWin from '@/components/layerlist/LayerListWin.vue';
+
+components: {
+  'wgu-layerlist-win': LayerListWin
+}
+```
+This approach allows simple module definitions where the identifier directly maps to a single module instance.
+
+### Multiple instances of the same module type
+To allow multiple instances of the same module type, the module identifier can be chosen arbitrarily. In this case, the actual module type must be specified explicitly using the `moduleType` property.
+Example:
+```json
+"wgu-layerlist1": {
+  "moduleType": "wgu-layerlist",
+  "target": "menu",
+  "win": "floating",
+  "draggable": false
+},
+"wgu-layerlist2": {
+  "moduleType": "wgu-layerlist",
+  "target": "menu",
+  "win": "floating",
+  "draggable": false
+}
+```
+In this configuration:
+* `wgu-layerlist1` and `wgu-layerlist2` are instance identifiers.
+* Both instances reference the same module type via `"moduleType": "wgu-layerlist"`
+* Wegue will create two independent instances of the `wgu-layerlist` module.
+* Each instance has its own configuration, state, and window (if applicable)
+If `moduleType` is omitted, Wegue assumes that the module identifier itself represents the module type.
+
+
+#### Note / Limitation:
+While Wegue supports configuring multiple instances of the same module type, stock Wegue components are not guaranteed to be designed for multi-instantiation. Some built-in modules may rely on shared state, global identifiers, or singleton assumptions and may behave incorrectly or unpredictably when instantiated multiple times.
+
+Multi-instantiation is therefore primarily intended for custom modules or stock modules that are explicitly designed and validated for this usage. When using multiple instances of a stock module, this behavior should be considered experimental unless otherwise documented.
+
+### Common module properties
+
 The following properties can be applied to all module types:
 
 | Property           | Meaning   | Example |
 |--------------------|:---------:|---------|
 | **target**         | Where should the button to enable/disable the module be rendered. Valid options are `menu` or `toolbar` | `"target": "menu"` |
 | **win**            | Value to mark if the module has a window as sub component and where to show the module UI elements. Valid options are `floating` and `sidebar`. If the value is omitted, then the module is not associated with a window.  | `"win": "floating"` |
+| moduleType         | Optional module type. Required only if different from the module identifier (e.g. for multi-instantiation). | `"moduleType": "wgu-layerlist"` 
 | icon               | Provide a customized icon for the module. | `"icon": "md:info"` |
 | minimizable        | Indicates whether the module window can be minimized. Only applies if a module window is present as indicated by the `win` parameter. | `"minimizable": true` |
 | closable           | Indicates whether the module window can be closed by a "X" icon in the window's header bar. Only applies if a module window is present as indicated by the `win` parameter. | `"closable": false` |

src/components/attributeTable/AttributeTableWin.vue

@@ -1,6 +1,5 @@
 <template>
   <wgu-module-card v-bind="$attrs"
-    :moduleName="moduleName"
     class="wgu-attributetable-win"
     :icon="icon"
   >
@@ -56,7 +55,6 @@ export default {
   },
   data () {
     return {
-      moduleName: 'wgu-attributetable',
       selLayerLid: null
     }
   },

src/components/helpwin/HelpWin.vue

@@ -1,6 +1,5 @@
 <template>
   <wgu-module-card v-bind="$attrs"
-      :moduleName="moduleName"
       class="wgu-helpwin"
       :icon="icon"
       :width="width">
@@ -36,11 +35,6 @@ export default {
   props: {
     icon: { type: String, required: false, default: 'md:help' },
     width: { type: Number, required: false, default: 300 }
-  },
-  data () {
-    return {
-      moduleName: 'wgu-helpwin'
-    }
   }
 };
 </script>

src/components/infoclick/InfoClickWin.vue

@@ -1,6 +1,5 @@
 <template>
   <wgu-module-card v-bind="$attrs"
-    :moduleName="moduleName"
     class="wgu-infoclick-win"
     :icon="icon"
     v-on:visibility-change="show">
@@ -105,7 +104,6 @@ export default {
   },
   data: function () {
     return {
-      moduleName: 'wgu-infoclick',
       attributeData: null,
       coordsData: null,
       featureIdx: 0,

src/components/layerlist/LayerListWin.vue

@@ -1,6 +1,5 @@
 <template>
    <wgu-module-card v-bind="$attrs"
-      moduleName="wgu-layerlist"
       class="wgu-layerlist"
       :icon="icon"
       >

src/components/maprecorder/MapRecorderWin.vue

@@ -1,6 +1,5 @@
 <template>
   <wgu-module-card v-bind="$attrs"
-      :moduleName="moduleName"
       class="wgu-maprecorder-win"
       :icon="icon"
       width=350>
@@ -156,7 +155,6 @@ export default {
     const mimeTypes = this.getSupportedMimeTypes();
 
     return {
-      moduleName: 'wgu-maprecorder',
       /**
        * Custom canvas element for drawing the OpenLayers map.
        */

src/components/measuretool/MeasureWin.vue

@@ -1,6 +1,5 @@
 <template>
   <wgu-module-card v-bind="$attrs"
-      :moduleName="moduleName"
       class="wgu-measurewin"
       :icon="icon"
       v-on:visibility-change="show">
@@ -48,7 +47,6 @@ export default {
   },
   data () {
     return {
-      moduleName: 'wgu-measuretool',
       measureGeom: null,
       measureType: 'distance'
     }