@vcmap/ui 5.0.0-rc.8 → 5.0.0

package/src/contentTree/contentTreeItem.js

@@ -1,34 +1,43 @@
-import { ref, reactive, computed } from '@vue/composition-api';
+import { ref, reactive, computed } from 'vue';
 import { check, checkMaybe } from '@vcsuite/check';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { ClassRegistry, VcsEvent } from '@vcmap/core';
 import { createLinkAction } from '../actions/actionHelper.js';
-import { createStateRefAction, StateActionState } from '../actions/stateRefAction.js';
+import {
+  createStateRefAction,
+  StateActionState,
+} from '../actions/stateRefAction.js';
+import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {Object} ContentTreeItemOptions
- * @property {string} name
- * @property {Object<string, string>|string} [title] - may be unset, if set from object properties later on. required otherwise
- * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon - an icon URL or element to display
- * @property {number} [weight]
- * @property {string} [infoUrl]
- * @property {boolean} [initOpen=false]
+ * @property {string} name - name of the item defining the structure within the tree using dot notation.
+ * @property {string} [title] - may be unset, if set from object properties later on. required otherwise
+ * @property {string} [tooltip] - may be unset or set from object properties later on.
+ * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon - an icon URL or element to display.
+ * @property {number} [weight] - optional weighting of the item. higher weights come first.
+ * @property {string} [infoUrl] - optional info url providing link with additional information.
+ * @property {boolean} [initOpen=false] - groups being initially open or not.
+ * @property {VcsCallbackOptions} [onClick] - optional callback actions executed on click
+ * @property {VcsCallbackOptions} [onActivate] - optional callback actions executed on activation of the item
+ * @property {VcsCallbackOptions} [onDeactivate] - optional callback actions executed on deactivation of the item
  */
 
 /**
  * A readonly rendering interface of a ContentTreeItem.
  * @typedef {Object} TreeViewItem
  * @property {string} name
- * @property {boolean} visible
- * @property {boolean} clickable
- * @property {boolean} disabled
- * @property {StateActionState} state
- * @property {Object<string, string>|string} title
- * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon
+ * @property {boolean} visible - Whether to display this item or not.
+ * @property {boolean} clickable - Whether this item reacts to click events, e.g. with visual feedback
+ * @property {boolean} disabled - Whether this item should be displayed as disabled.
+ * @property {StateActionState} state - The state of this item. NONE if this item cannot have a state.
+ * @property {string} title - The title to be displayed
+ * @property {string} [tooltip]
+ * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be an URL or HTMLElement.
  * @property {Array<VcsAction>} actions
  * @property {Array<TreeViewItem>} children
  * @property {Array<TreeViewItem>} visibleChildren - computed property
- * @property {function():Promise<void>} clicked
+ * @property {function(PointerEvent):Promise<void>} clicked - A callback called once the item is clicked.
  */
 
 /**
@@ -49,7 +58,9 @@ class ContentTreeItem {
   /**
    * @type {string}
    */
-  static get className() { return 'ContentTreeItem'; }
+  static get className() {
+    return 'ContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -63,7 +74,7 @@ class ContentTreeItem {
     this._app = app;
 
     /**
-     * @type {import("@vue/composition-api").Ref<Array<VcsAction>>}
+     * @type {import("vue").Ref<Array<VcsAction>>}
      * @private
      */
     this._actions = ref([]);
@@ -76,28 +87,28 @@ class ContentTreeItem {
 
     /**
      * Whether to display this item or not.
-     * @type {import("@vue/composition-api").Ref<boolean>}
+     * @type {import("vue").Ref<boolean>}
      * @private
      */
     this._visible = ref(true);
 
     /**
      * Whether this item reacts to click events, e.g. with visual feedback
-     * @type {import("@vue/composition-api").Ref<boolean>}
+     * @type {import("vue").Ref<boolean>}
      * @private
      */
     this._clickable = ref(true);
 
     /**
      * Whether this item should be displayed as disabled.
-     * @type {import("@vue/composition-api").Ref<boolean>}
+     * @type {import("vue").Ref<boolean>}
      * @private
      */
     this._disabled = ref(false);
 
     /**
      * The state of this item. NONE if this item cannot have a state.
-     * @type {import("@vue/composition-api").Ref<StateActionState>}
+     * @type {import("vue").Ref<StateActionState>}
      * @private
      */
     this._state = ref(StateActionState.NONE);
@@ -116,20 +127,26 @@ class ContentTreeItem {
     this.infoUrl = options.infoUrl;
 
     /**
-     * @type {import("@vue/composition-api").Ref<Object<string, string>|string|undefined>}
+     * @type {import("vue").Ref<string|undefined>}
      * @private
      */
     this._title = ref(options.title);
 
+    /**
+     * @type {import("vue").Ref<string|undefined>}
+     * @private
+     */
+    this._tooltip = ref(options.tooltip);
+
     /**
      * An optional icon to display with this item. Can be an URL or HTMLElement.
-     * @type {import("@vue/composition-api").Ref<string|HTMLCanvasElement|HTMLImageElement|undefined>}
+     * @type {import("vue").Ref<string|HTMLCanvasElement|HTMLImageElement|undefined>}
      * @private
      */
     this._icon = ref(options.icon);
 
     /**
-     * @type {import("@vue/composition-api").Ref<Array<TreeViewItem>>}
+     * @type {import("vue").Ref<Array<TreeViewItem>>}
      * @protected
      */
     this._children = ref([]);
@@ -144,7 +161,21 @@ class ContentTreeItem {
      * @type {boolean}
      */
     this.initOpen = parseBoolean(options.initOpen, false);
-
+    /**
+     * @type {Array<VcsCallbackOptions>}
+     * @protected
+     */
+    this._onClick = options.onClick ?? [];
+    /**
+     * @type {Array<VcsCallbackOptions>}
+     * @protected
+     */
+    this._onActivate = options.onActivate ?? [];
+    /**
+     * @type {Array<VcsCallbackOptions>}
+     * @protected
+     */
+    this._onDeactivate = options.onDeactivate ?? [];
     /**
      * @type {VcsEvent<number>}
      */
@@ -240,7 +271,9 @@ class ContentTreeItem {
   /**
    * @type {string|null}
    */
-  get infoUrl() { return this._infoUrl; }
+  get infoUrl() {
+    return this._infoUrl;
+  }
 
   /**
    * @param {string} url
@@ -252,11 +285,14 @@ class ContentTreeItem {
       this._infoUrl = url;
       const name = 'infoUrl';
       if (this._infoUrl) {
-        const action = createLinkAction({
-          name,
-          title: 'Info',
-          icon: '$vcsInfo',
-        }, this._infoUrl);
+        const action = createLinkAction(
+          {
+            name,
+            title: 'content.infoAction.title',
+            icon: '$vcsInfo',
+          },
+          this._infoUrl,
+        );
         this.addAction(action, 6);
       } else {
         this.removeAction(name);
@@ -265,21 +301,37 @@ class ContentTreeItem {
   }
 
   /**
-   * @type {string|Object<string>|undefined}
+   * @type {string|undefined}
    */
   get title() {
     return this._title.value;
   }
 
   /**
-   * @param {string|Object<string>|undefined} title
+   * @param {string|undefined} title
    */
   set title(title) {
-    checkMaybe(title, [String, Object]);
+    checkMaybe(title, String);
 
     this._title.value = title;
   }
 
+  /**
+   * @type {string|undefined}
+   */
+  get tooltip() {
+    return this._tooltip.value;
+  }
+
+  /**
+   * @param {string|undefined} tooltip
+   */
+  set tooltip(tooltip) {
+    checkMaybe(tooltip, String);
+
+    this._tooltip.value = tooltip;
+  }
+
   /**
    * @type {string|HTMLCanvasElement|HTMLImageElement|undefined}
    */
@@ -299,7 +351,9 @@ class ContentTreeItem {
   /**
    * @type {number}
    */
-  get weight() { return this._weight; }
+  get weight() {
+    return this._weight;
+  }
 
   /**
    * @param {number} weight
@@ -328,7 +382,10 @@ class ContentTreeItem {
         this.removeAction(name);
         destroy();
       };
-    } else if (this._stateActionListener && this.state === StateActionState.NONE) {
+    } else if (
+      this._stateActionListener &&
+      this.state === StateActionState.NONE
+    ) {
       this._stateActionListener();
       this._stateActionListener = null;
     }
@@ -340,7 +397,7 @@ class ContentTreeItem {
    * @private
    */
   _getActionIndex(actionName) {
-    return this._actions.value.findIndex(a => a.name === actionName);
+    return this._actions.value.findIndex((a) => a.name === actionName);
   }
 
   /**
@@ -352,7 +409,7 @@ class ContentTreeItem {
    * GoToExtent: 8
    * The default weight is set to always push new actions past these.
    * @param {VcsAction} action
-   * @param {number} [weight=0]
+   * @param {number} [weight=11]
    */
   addAction(action, weight = 11) {
     check(action.name, String);
@@ -363,7 +420,9 @@ class ContentTreeItem {
       throw new Error('Action names must be unique');
     }
     action[actionWeightSymbol] = weight;
-    const insertIndex = this._actions.value.findIndex(a => a[actionWeightSymbol] > weight);
+    const insertIndex = this._actions.value.findIndex(
+      (a) => a[actionWeightSymbol] > weight,
+    );
     if (insertIndex > -1) {
       this._actions.value.splice(insertIndex, 0, action);
     } else {
@@ -385,8 +444,9 @@ class ContentTreeItem {
    * A callback called once the item is clicked.
    * @returns {Promise<void>}
    */
-  // eslint-disable-next-line class-methods-use-this,no-empty-function
-  async clicked() {}
+  async clicked() {
+    executeCallbacks(this._app, this._onClick);
+  }
 
   /**
    * Returns a readonly TreeViewItem used for rendering the current item.
@@ -401,10 +461,13 @@ class ContentTreeItem {
       disabled: this._disabled,
       state: this._state,
       title: this._title,
+      tooltip: this._tooltip,
       icon: this._icon,
       actions: this._actions,
       children: this._children,
-      visibleChildren: computed(() => this._children.value.filter(c => c.visible)),
+      visibleChildren: computed(() =>
+        this._children.value.filter((c) => c.visible),
+      ),
       clicked,
     });
   }
@@ -453,5 +516,8 @@ class ContentTreeItem {
   }
 }
 
-contentTreeClassRegistry.registerClass(ContentTreeItem.className, ContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  ContentTreeItem.className,
+  ContentTreeItem,
+);
 export default ContentTreeItem;

package/src/contentTree/groupContentTreeItem.js

@@ -1,5 +1,7 @@
-import { watch } from '@vue/composition-api';
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+import { watch } from 'vue';
+import ContentTreeItem, {
+  contentTreeClassRegistry,
+} from './contentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 
 /**
@@ -11,7 +13,9 @@ class GroupContentTreeItem extends ContentTreeItem {
   /**
    * @returns {string}
    */
-  static get className() { return 'GroupContentTreeItem'; }
+  static get className() {
+    return 'GroupContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -24,36 +28,52 @@ class GroupContentTreeItem extends ContentTreeItem {
      * @type {function():void}
      * @private
      */
-    this._childWatcher = watch(this._children, () => {
-      const children = this._children.value;
-      this.visible = children.some(c => c.visible);
-      if (children.every(c => c.state === StateActionState.NONE)) {
-        this.state = StateActionState.NONE;
-      } else {
-        const childrenWithState = children.filter(c => c.state !== StateActionState.NONE);
-        if (childrenWithState.every(c => c.state === StateActionState.ACTIVE)) {
-          this.state = StateActionState.ACTIVE;
-        } else if (childrenWithState.every(c => c.state === StateActionState.INACTIVE)) {
-          this.state = StateActionState.INACTIVE;
+    this._childWatcher = watch(
+      this._children,
+      () => {
+        const children = this._children.value;
+        this.visible = children.some((c) => c.visible);
+        if (children.every((c) => c.state === StateActionState.NONE)) {
+          this.state = StateActionState.NONE;
         } else {
-          this.state = StateActionState.INDETERMINATE;
+          const childrenWithState = children.filter(
+            (c) => c.state !== StateActionState.NONE,
+          );
+          if (
+            childrenWithState.every((c) => c.state === StateActionState.ACTIVE)
+          ) {
+            this.state = StateActionState.ACTIVE;
+          } else if (
+            childrenWithState.every(
+              (c) => c.state === StateActionState.INACTIVE,
+            )
+          ) {
+            this.state = StateActionState.INACTIVE;
+          } else {
+            this.state = StateActionState.INDETERMINATE;
+          }
         }
-      }
-    }, { deep: true });
+      },
+      { deep: true },
+    );
   }
 
   async clicked() {
+    await super.clicked();
     if (this.state === StateActionState.NONE) {
       return;
     }
 
-    const statePredicate = this.state === StateActionState.ACTIVE ?
-      state => state !== StateActionState.NONE :
-      state => state !== StateActionState.NONE && state !== StateActionState.ACTIVE;
+    const statePredicate =
+      this.state === StateActionState.ACTIVE
+        ? (state) => state !== StateActionState.NONE
+        : (state) =>
+            state !== StateActionState.NONE &&
+            state !== StateActionState.ACTIVE;
 
     const promises = this._children.value
-      .filter(c => c.visible && statePredicate(c.state))
-      .map(c => c.clicked());
+      .filter((c) => c.visible && statePredicate(c.state))
+      .map((c) => c.clicked());
     await Promise.all(promises);
   }
 
@@ -64,4 +84,7 @@ class GroupContentTreeItem extends ContentTreeItem {
 }
 
 export default GroupContentTreeItem;
-contentTreeClassRegistry.registerClass(GroupContentTreeItem.className, GroupContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  GroupContentTreeItem.className,
+  GroupContentTreeItem,
+);

package/src/contentTree/layerContentTreeItem.js

@@ -1,11 +1,15 @@
-import { ViewPoint } from '@vcmap/core';
-import { reactive } from '@vue/composition-api';
+import { Viewpoint } from '@vcmap/core';
+import { reactive } from 'vue';
 import { StateActionState } from '../actions/stateRefAction.js';
-import { createGoToViewpointAction, createModalAction } from '../actions/actionHelper.js';
-import component from '../actions/styleSelector.vue';
+import {
+  createGoToViewpointAction,
+  createModalAction,
+} from '../actions/actionHelper.js';
+import component from '../actions/StyleSelector.vue';
 import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import { contentTreeClassRegistry } from './contentTreeItem.js';
+import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {ContentTreeItemOptions} LayerContentTreeItemOptions
@@ -24,7 +28,7 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
  * @param {string=} viewpoint
  */
 export function setViewpointAction(item, app, viewpoint) {
-  const name = 'ViewPointAction';
+  const name = 'ViewpointAction';
   item.removeAction(name);
 
   if (viewpoint) {
@@ -34,7 +38,7 @@ export function setViewpointAction(item, app, viewpoint) {
         icon: 'mdi-crosshairs-gps',
       },
       viewpoint,
-      app.viewPoints,
+      app.viewpoints,
       app.maps,
     );
     item.addAction(action, 2);
@@ -64,7 +68,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    * @todo this has to be refactored, just so we can read the config as is
    * @returns {string}
    */
-  static get className() { return 'LayerContentTreeItem'; }
+  static get className() {
+    return 'LayerContentTreeItem';
+  }
 
   /**
    * @param {LayerContentTreeItemOptions} options
@@ -109,15 +115,19 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
         {
           name,
           icon: '$vcsColorSwatch',
+          title: 'content.styleAction.title',
         },
         {
           component,
+          position: {
+            width: 200,
+          },
           props: reactive({
             availableStyles: availableStyles.slice(),
             layerName: this._layerName,
           }),
         },
-        this._app.windowManager,
+        this._app,
         vcsAppSymbol,
       );
       this.addAction(action, 4);
@@ -129,18 +139,21 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _setLayerExtentAction() {
-    const name = 'LayerExtentAction';
+    const name = 'content.layerExtentAction.name';
     this.removeAction(name);
     if (this._layer) {
       const { extent } = this._layer.toJSON();
       if (extent) {
-        const viewpoint = ViewPoint.createViewPointFromExtent(this._layer.extent);
+        const viewpoint = Viewpoint.createViewpointFromExtent(
+          this._layer.extent,
+        );
         const action = createGoToViewpointAction(
           {
-            name: 'LayerExtentAction',
+            name,
+            title: 'content.layerExtentAction.title',
           },
           viewpoint,
-          this._app.viewPoints,
+          this._app.viewpoints,
           this._app.maps,
         );
         this.addAction(action, 8);
@@ -163,7 +176,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -184,32 +199,45 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
 
     if (!this._layer) {
       this.visible = false;
-      this._listeners.push(this._app.layers.added.addEventListener(resetHandler));
+      this._listeners.push(
+        this._app.layers.added.addEventListener(resetHandler),
+      );
     } else {
       this.visible = this._layer.isSupported(this._app.maps.activeMap);
       this.state = getStateFromLayer(this._layer);
       this._setLayerExtentAction();
       this.setPropertiesFromObject(this._layer);
 
-      this._listeners.push(this._app.layers.removed.addEventListener(resetHandler));
-      this._listeners.push(this._app.layers.added.addEventListener(resetHandler));
+      this._listeners.push(
+        this._app.layers.removed.addEventListener(resetHandler),
+      );
+      this._listeners.push(
+        this._app.layers.added.addEventListener(resetHandler),
+      );
 
-      this._listeners.push(this._layer.stateChanged.addEventListener(() => {
-        this.state = getStateFromLayer(this._layer);
-      }));
+      this._listeners.push(
+        this._layer.stateChanged.addEventListener(() => {
+          this.state = getStateFromLayer(this._layer);
+        }),
+      );
 
-      this._listeners.push(this._app.maps.mapActivated.addEventListener(() => {
-        this.visible = this._layer.isSupported(this._app.maps.activeMap);
-      }));
+      this._listeners.push(
+        this._app.maps.mapActivated.addEventListener(() => {
+          this.visible = this._layer.isSupported(this._app.maps.activeMap);
+        }),
+      );
     }
   }
 
   async clicked() {
+    await super.clicked();
     if (this._layer) {
       if (this.state === StateActionState.INACTIVE) {
         await this._layer.activate();
+        executeCallbacks(this._app, this._onActivate);
       } else {
         this._layer.deactivate();
+        executeCallbacks(this._app, this._onDeactivate);
       }
     }
   }
@@ -230,4 +258,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
 }
 
 export default LayerContentTreeItem;
-contentTreeClassRegistry.registerClass(LayerContentTreeItem.className, LayerContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  LayerContentTreeItem.className,
+  LayerContentTreeItem,
+);