@vcmap/ui 5.0.2 → 5.1.0-rc.2

package/plugins/@vcmap-show-case/list-example/src/ListExample.vue

@@ -123,6 +123,12 @@
                   v-model="newItem.hasUpdate"
                   class="ma-0"
                 />
+                <v-switch
+                  dense
+                  label="rename action"
+                  v-model="newItem.renameAction"
+                  class="ma-0"
+                />
                 <v-switch
                   dense
                   label="console.log action"
@@ -151,9 +157,6 @@
       <v-container class="py-1 px-1">
         <v-row no-gutters>
           <template v-if="selectable">
-            <v-col>
-              <vcs-form-button @click="selected = []"> Clear </vcs-form-button>
-            </v-col>
             <v-col>
               <v-switch
                 v-model="showSelection"
@@ -186,6 +189,7 @@
       :title="title"
       v-model="selected"
       @item-moved="move"
+      @item-renamed="({ item, newTitle }) => (item.title = newTitle)"
     />
   </v-sheet>
 </template>
@@ -197,6 +201,7 @@
     VcsTextField,
     Icons,
     VcsFormSection,
+    createListItemRenameAction,
   } from '@vcmap/ui';
   import {
     VSwitch,
@@ -279,6 +284,7 @@
         disabled: false,
         visible: true,
         icon: false,
+        renameAction: false,
         action: false,
         clicked: false,
         selected: false,
@@ -316,15 +322,20 @@
             item.icon = getRandomIcon();
           }
 
+          item.actions = [];
+
+          if (newItem.value.renameAction) {
+            item.rename = false;
+            item.actions.push(createListItemRenameAction(item));
+          }
+
           if (newItem.value.action) {
-            item.actions = [
-              {
-                name: 'console.log',
-                callback() {
-                  console.log("hi, i'm: ", item.name);
-                },
+            item.actions.push({
+              name: 'console.log',
+              callback() {
+                console.log("hi, i'm: ", item.name);
               },
-            ];
+            });
           }
 
           if (newItem.value.clicked) {
@@ -349,6 +360,7 @@
             disabled: false,
             visible: true,
             icon: false,
+            renameAction: false,
             action: false,
             clicked: false,
             selected: false,

package/plugins/@vcmap-show-case/toolbox-example/README.md

@@ -0,0 +1,9 @@
+# Window Tester
+
+This is a show-case plugin demonstrating the concept of [TOOLBOX](../../../documentation/TOOLBOX.md) including:
+
+- SingleToolboxComponent
+- SelectToolboxComponent
+- GroupToolboxComponent
+  and
+- Toolbox changing via toolbox names

package/plugins/@vcmap-show-case/toolbox-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/toolbox-example",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0"
+}

package/plugins/@vcmap-show-case/toolbox-example/src/TriStateExampleWindow.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-sheet class="pa-1">
+    <ul>
+      <li>Close window to get into background state.</li>
+      <li>Click tristate button to deactivate</li>
+    </ul>
+  </v-sheet>
+</template>
+
+<style scoped></style>
+<script>
+  import { VSheet } from 'vuetify/lib';
+
+  export default {
+    name: 'WindowExampleContent',
+    components: { VSheet },
+    setup() {
+      return {};
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/toolbox-example/src/dummyToolboxActions.js

@@ -0,0 +1,94 @@
+import { reactive } from 'vue';
+import TriStateExampleWindow from './TriStateExampleWindow.vue';
+
+export const dummyToolboxAction = {
+  active: false,
+  currentIndex: 0,
+  _stop() {
+    console.log('stopping session', this._session);
+    this._session = null;
+    this.active = false;
+  },
+  _start() {
+    const startSession = (tool) => ({ type: tool });
+    this._session = startSession(this.tools[this.currentIndex].name);
+    this.active = true;
+    console.log('starting session', this._session);
+  },
+  callback() {
+    if (this.active) {
+      this._stop();
+    } else {
+      this._start();
+    }
+  },
+  selected(index) {
+    this.currentIndex = index;
+    if (this.active) {
+      this._session.type = this.tools[this.currentIndex].name;
+      console.log('updating active session', this._session);
+    } else {
+      this._start();
+    }
+  },
+};
+
+/**
+ *
+ * @param {import("@vcmap/ui").VcsUiApp} app
+ * @returns {{action:import("vue").Reactive<import("@vcmap/ui").VcsAction>, destroy: ()=>void}}
+ */
+export function createDummyTriStateAction(app) {
+  const windowComponent = {
+    id: 'tri-state-example',
+    state: {
+      headerTitle: 'Example Session Toggle',
+    },
+    component: TriStateExampleWindow,
+  };
+
+  const action = reactive({
+    name: 'tri-state-action',
+    title: 'tristate',
+    icon: 'mdi-state-machine',
+    active: false,
+    background: false,
+    callback() {
+      if (this.active) {
+        if (this.background) {
+          return app.windowManager.add(windowComponent, '@vcmap/test');
+        } else {
+          app.windowManager.remove(windowComponent.id);
+          this.active = false;
+        }
+      } else {
+        this.active = true;
+        return app.windowManager.add(windowComponent, '@vcmap/test');
+      }
+      return null;
+    },
+  });
+
+  const listeners = [
+    app.windowManager.added.addEventListener(({ id }) => {
+      if (id === windowComponent.id) {
+        action.active = true;
+        action.background = false;
+      }
+    }),
+    app.windowManager.removed.addEventListener(({ id }) => {
+      if (id === windowComponent.id) {
+        action.background = true;
+      }
+    }),
+  ];
+
+  const destroy = () => {
+    if (app.windowManager.has(windowComponent.id)) {
+      app.windowManager.remove(windowComponent.id);
+    }
+    listeners.forEach((cb) => cb());
+  };
+
+  return { action, destroy };
+}

package/plugins/@vcmap-show-case/toolbox-example/src/index.js

@@ -0,0 +1,260 @@
+import { ButtonLocation, ToolboxType } from '@vcmap/ui';
+import { reactive, ref, watch } from 'vue';
+import packageJSON from '../package.json';
+import {
+  createDummyTriStateAction,
+  dummyToolboxAction,
+} from './dummyToolboxActions.js';
+
+function createToolboxChanger(app) {
+  const action = reactive({
+    name: 'Toolbox Changer',
+    active: false,
+    callback() {
+      if (app.toolboxManager.toolboxName !== packageJSON.name) {
+        app.toolboxManager.toolboxName = packageJSON.name;
+      } else {
+        app.toolboxManager.setDefaultToolboxName();
+      }
+    },
+  });
+
+  const destroy = app.toolboxManager.toolboxNameChanged.addEventListener(
+    (toolboxName) => {
+      action.active = toolboxName === packageJSON.name;
+    },
+  );
+
+  return {
+    action,
+    destroy,
+  };
+}
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function toolboxExample() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    initialize(app) {
+      const { action, destroy } = createToolboxChanger(app);
+      app.navbarManager.add(
+        { id: 'toolbox-changer', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      let toolboxListener = () => {};
+      if (app.toolboxManager.has('featureInfo')) {
+        app.toolboxManager
+          .get('featureInfo')
+          ?.toolboxNames.push(packageJSON.name);
+      } else {
+        toolboxListener = app.toolboxManager.added.addEventListener(
+          (component) => {
+            if (component.id === 'featureInfo') {
+              component.toolboxNames.push(packageJSON.name);
+            }
+          },
+        );
+      }
+      this._destroyToolboxChanger = [destroy, toolboxListener];
+
+      const changedToolboxComponentExampleOptions = {
+        id: 'namedDingleSelect',
+        type: ToolboxType.SINGLE,
+        toolboxNames: [packageJSON.name],
+        action: {
+          name: 'select',
+          title: 'single select',
+          icon: 'mdi-eye',
+          active: false,
+          disabled: false,
+          callback() {
+            this.disabled = true;
+            setTimeout(() => {
+              this.disabled = false;
+            }, 2000);
+          },
+        },
+      };
+      app.toolboxManager.add(
+        changedToolboxComponentExampleOptions,
+        packageJSON.name,
+      );
+    },
+    onVcsAppMounted(app) {
+      const disabled = ref(false);
+
+      /**
+       * A toolbox button with toggle state
+       * Toggles disabled state of the other toolbox elements below (see watch)
+       * @type {import("@vcmap/ui").SingleToolboxComponentOptions}
+       */
+      const singleToolboxComponentExampleOptions = {
+        id: 'singleToolboxExample',
+        type: ToolboxType.SINGLE,
+        action: {
+          name: 'single',
+          title: 'single toolbox example',
+          icon: 'mdi-numeric-1-box',
+          active: false,
+          callback() {
+            this.active = !this.active;
+            disabled.value = this.active;
+            this.icon = this.active
+              ? 'mdi-numeric-1-box-outline'
+              : 'mdi-numeric-1-box';
+          },
+        },
+      };
+      app.toolboxManager.add(
+        singleToolboxComponentExampleOptions,
+        packageJSON.name,
+      );
+
+      /**
+       * @type {import("@vcmap/ui").ToolboxSelectAction}
+       */
+      const selectToolboxAction = {
+        name: 'select',
+        title: 'select toolbox example',
+        ...dummyToolboxAction,
+        disabled: false,
+        tools: [
+          {
+            name: 'pen',
+            title: 'select item 1',
+            icon: 'mdi-numeric-1-box',
+          },
+          {
+            name: 'object',
+            title: 'select item 2',
+            icon: 'mdi-numeric-2-box',
+          },
+        ],
+      };
+
+      /**
+       * A select toolbox button with two tools
+       * @type {import("@vcmap/ui").SelectToolboxComponentOptions}
+       */
+      const selectToolboxComponent = {
+        id: 'selectToolboxExample',
+        type: ToolboxType.SELECT,
+        action: selectToolboxAction,
+      };
+      app.toolboxManager.add(selectToolboxComponent, packageJSON.name);
+
+      /**
+       * A group toolbox button with three group items
+       * @type {import("@vcmap/ui").GroupToolboxComponentOptions}
+       */
+      const groupToolboxComponentExampleOptions = {
+        id: 'groupToolboxExample',
+        type: ToolboxType.GROUP,
+        icon: 'mdi-numeric',
+        disabled: false,
+        title: 'group toolbox example',
+      };
+      app.toolboxManager.add(
+        groupToolboxComponentExampleOptions,
+        packageJSON.name,
+      );
+
+      /**
+       * @type {Array<import("@vcmap/ui").ButtonComponentOptions>}
+       */
+      const buttonComponents = [
+        {
+          id: 'group-item-1',
+          action: {
+            name: 'group-action-1',
+            title: 'group action 1',
+            icon: 'mdi-numeric-1-box',
+            active: false,
+            callback() {
+              this.active = !this.active;
+            },
+          },
+        },
+        {
+          id: 'group-item-2',
+          action: {
+            name: 'group-action-2',
+            title: 'group action 2',
+            icon: 'mdi-numeric-2-box',
+            active: false,
+            callback() {
+              this.active = !this.active;
+            },
+          },
+        },
+        {
+          id: 'group-item-3',
+          action: {
+            name: 'group-action-3',
+            title: 'group action 3',
+            icon: 'mdi-numeric-3-box',
+            active: false,
+            disabled: true,
+            callback() {
+              this.active = !this.active;
+            },
+          },
+        },
+      ];
+      const groupButtonManager = app.toolboxManager.get(
+        'groupToolboxExample',
+      ).buttonManager;
+      buttonComponents.forEach((b) =>
+        groupButtonManager.add(b, packageJSON.name),
+      );
+
+      /**
+       * Updating disabled state of select and group toolbox button
+       * @type {import("vue").WatchStopHandle}
+       * @private
+       */
+      this._stopWatching = watch(
+        () => disabled.value,
+        () => {
+          selectToolboxAction.disabled = disabled.value;
+          app.toolboxManager.get(
+            groupToolboxComponentExampleOptions.id,
+          ).disabled = disabled.value;
+        },
+      );
+
+      const { action, destroy } = createDummyTriStateAction(app);
+      /**
+       * A toolbox button with tristate
+       * @type {import("@vcmap/ui").SingleToolboxComponentOptions}
+       */
+      const tristateButton = {
+        id: 'tristateExample',
+        type: ToolboxType.SINGLE,
+        action,
+      };
+      app.toolboxManager.add(tristateButton, packageJSON.name);
+
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      this._stopWatching();
+      this._destroyToolboxChanger.forEach((cb) => cb());
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/vector-properties-example/src/VectorPropertiesExample.vue

@@ -11,16 +11,24 @@
           />
         </v-col>
       </v-row>
-      <v-row>
+      <v-row no-gutters>
         <v-col>
           <VcsCheckbox v-model="hideDividers" label="Hide dividers" />
         </v-col>
       </v-row>
-      <v-row>
+      <v-row no-gutters>
         <v-col>
           <VcsCheckbox v-model="expandable" label="Expandable" />
         </v-col>
       </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox
+            v-model="showReset"
+            label="Show reset vector properties"
+          />
+        </v-col>
+      </v-row>
     </v-container>
     <VcsVectorPropertiesComponent
       v-model="featureProperties"
@@ -29,6 +37,7 @@
       :properties="propertiesToDisplay.map((item) => item.name)"
       :hide-dividers="hideDividers"
       :expandable="expandable"
+      :show-reset="showReset"
     />
   </v-sheet>
 </template>
@@ -122,6 +131,7 @@
         propertiesToDisplay: ref([...propertiesToSelectFrom]),
         hideDividers: ref(false),
         expandable: ref(false),
+        showReset: ref(true),
       };
     },
   };

package/plugins/@vcmap-show-case/viewpoint-component-example/README.md

@@ -0,0 +1,3 @@
+# Viewpoint component example
+
+This is a show-case plugin demonstrating the [viewpoint component](../../../src/components/viewpoint/VcsViewpointComponent.vue).

package/plugins/@vcmap-show-case/viewpoint-component-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/viewpoint-component-example",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0"
+}

package/plugins/@vcmap-show-case/viewpoint-component-example/src/ViewpointExample.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-sheet>
+    <VcsViewpointComponent v-model="viewpointOptions" />
+    <div class="d-flex gap-2 px-2 pt-2 pb-1">
+      <div class="d-flex gap-2 w-full justify-start">
+        <VcsFormButton icon="$vcsReturn" @click="reset" />
+      </div>
+      <div class="d-flex gap-2 w-full justify-end">
+        <VcsFormButton type="submit" variant="filled" @click="log">
+          Log ViewpointOptions
+        </VcsFormButton>
+      </div>
+    </div>
+  </v-sheet>
+</template>
+
+<script>
+  import { VSheet } from 'vuetify/lib';
+  import { inject, ref } from 'vue';
+  import { VcsViewpointComponent, VcsFormButton } from '@vcmap/ui';
+  import { Viewpoint } from '@vcmap/core';
+
+  export default {
+    name: 'ViewpointExample',
+    components: {
+      VcsFormButton,
+      VSheet,
+      VcsViewpointComponent,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const defaultViewpointOptions =
+        app.maps.activeMap?.getViewpointSync()?.toJSON() ||
+        Viewpoint.getDefaultOptions();
+
+      const viewpointOptions = ref(structuredClone(defaultViewpointOptions));
+
+      return {
+        viewpointOptions,
+        reset() {
+          viewpointOptions.value = structuredClone(defaultViewpointOptions);
+          app.maps.activeMap.gotoViewpoint(
+            new Viewpoint(viewpointOptions.value),
+          );
+        },
+        log() {
+          console.log({ ...viewpointOptions.value });
+        },
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/viewpoint-component-example/src/index.js

@@ -0,0 +1,42 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import component from './ViewpointExample.vue';
+
+export default function viewpointExamplePlugin() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Viewpoint Example',
+          icon: '$vcsPoi',
+        },
+        {
+          id: 'viewpoint-component-example',
+          state: {
+            headerTitle: 'Viewpoint Example',
+            headerIcon: '$vcsPoi',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        packageJSON.name,
+      );
+      vcsApp.navbarManager.add(
+        { id: 'viewpoint-component-example', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/@vcmap-show-case/window-tester/src/WindowExample.vue

@@ -20,8 +20,8 @@
   import { getLogger } from '@vcsuite/logger';
 
   import { WindowSlot, VcsFormButton } from '@vcmap/ui';
-  import WindowExampleToggleChild from './WindowExampleToggleChild.vue';
   import WindowExampleContent from './WindowExampleContent.vue';
+  import WindowExampleToggleChild from './WindowExampleToggleChild.vue';
   import MyCustomHeader from './MyCustomHeader.vue';
   import EmptyComponent from './EmptyComponent.vue';
   import { name as owner } from '../package.json';
@@ -147,6 +147,36 @@
             maxWidth: '1000px',
           },
         },
+        {
+          id: 'child-dynamicRight',
+          parentId: 'dynamicRight',
+          state: {
+            headerTitle: 'Example dynamicRight dynamicChild',
+            headerIcon: 'mdi-human-child',
+          },
+          component: WindowExampleContent,
+          slot: WindowSlot.DYNAMIC_CHILD,
+        },
+        {
+          id: 'child-dynamicLeft',
+          parentId: 'dynamicLeft',
+          state: {
+            headerTitle: 'Example dynamicLeft dynamicChild',
+            headerIcon: 'mdi-human-child',
+          },
+          component: WindowExampleContent,
+          slot: WindowSlot.DYNAMIC_CHILD,
+        },
+        {
+          id: 'child-dynamicLeft2',
+          parentId: 'dynamicLeft',
+          state: {
+            headerTitle: 'Example dynamicLeft dynamicChild',
+            headerIcon: 'mdi-human-child',
+          },
+          component: WindowExampleContent,
+          slot: WindowSlot.DYNAMIC_CHILD,
+        },
       ];
 
       onUnmounted(() => {