@vcmap/ui 6.0.0-rc.2 → 6.0.0-rc.5

package/plugins/@vcmap-show-case/search-example/src/searchImpl.js

@@ -36,17 +36,42 @@ function randomPOI(title) {
   return feature;
 }
 
+function getRandomIcon() {
+  const keys = Object.keys(Icons);
+  const index = Math.floor(keys.length * Math.random());
+  return `$${keys[index]}`;
+}
+
 /**
  * @param {string} line
  * @param {boolean} withIcon
  * @param {boolean} withPOI
+ * @param {boolean} withActions
  * @returns {import("@vcmap/ui").ResultItem}
  */
-function lineToResultItem(line, withIcon, withPOI) {
+function lineToResultItem(line, withIcon, withPOI, withActions) {
   let icon;
   if (withIcon) {
-    const icons = Object.keys(Icons);
-    icon = icons[Math.floor(Math.random() * icons.length)];
+    icon = getRandomIcon();
+  }
+
+  let actions;
+  if (withActions) {
+    actions = [
+      {
+        name: 'action-1',
+        icon,
+        callback() {
+          console.log('Action 1');
+        },
+      },
+      {
+        name: 'action-2',
+        callback() {
+          console.log('Action 2');
+        },
+      },
+    ];
   }
 
   let clicked;
@@ -64,6 +89,7 @@ function lineToResultItem(line, withIcon, withPOI) {
     icon,
     clicked,
     feature,
+    actions,
   };
 }
 
@@ -75,19 +101,23 @@ export default class SearchImpl {
    * @param {string[]} lines
    * @param {boolean} withIcon
    * @param {boolean} withPOI
+   * @param {boolean} withActions
    */
-  constructor(lines, withIcon, withPOI) {
+  constructor(lines, withIcon, withPOI, withActions) {
     this.name = name;
     this.lines = lines;
     this.withIcon = withIcon;
     this.withPOI = withPOI;
+    this.withActions = withActions;
   }
 
   search(query) {
     return Promise.resolve(
       this.lines
         .filter((l) => l.toLowerCase().includes(query.toLowerCase()))
-        .map((line) => lineToResultItem(line, this.withIcon, this.withPOI)),
+        .map((line) =>
+          lineToResultItem(line, this.withIcon, this.withPOI, this.withActions),
+        ),
     );
   }
 

package/plugins/@vcmap-show-case/style-input-example/src/StyleExample.vue

@@ -1,27 +1,30 @@
 <template>
   <v-sheet>
-    <VcsFormSection heading="Style menus">
+    <VcsFormSection
+      heading="Style menus"
+      :header-actions="[resetExample, logStyle]"
+    >
       <VcsVectorStyleComponent
-        v-model="styleOptions"
+        v-model="styleOptions.style"
         :value-default="defaultStyleOptions"
       />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Fill Selector">
-      <VcsFillSelector v-model="styleOptions.fill" />
+      <VcsFillSelector v-model="styleOptions.style.fill" />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Stroke Selector">
-      <VcsStrokeSelector v-model="styleOptions.stroke" />
+      <VcsStrokeSelector v-model="styleOptions.style.stroke" />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Image Selector">
       <VcsImageSelector
-        v-model="styleOptions.image"
+        v-model="styleOptions.style.image"
         :value-default="defaultStyleOptions.image"
         :extended-shape-settings="true"
       />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Text Selector">
       <VcsTextSelector
-        v-model="styleOptions.text"
+        v-model="styleOptions.style.text"
         :value-default="defaultStyleOptions.text"
       />
     </VcsFormSection>
@@ -30,7 +33,7 @@
 
 <script>
   import { VSheet } from 'vuetify/components';
-  import { onMounted, ref, watchEffect } from 'vue';
+  import { reactive, toRaw } from 'vue';
   import {
     VcsFormSection,
     VcsFillSelector,
@@ -40,8 +43,8 @@
     VcsVectorStyleComponent,
     VectorStyleMenus,
   } from '@vcmap/ui';
-  import { parseColor } from '@vcmap/core';
-  import { Fill, Icon, RegularShape, Stroke, Style, Text } from 'ol/style.js';
+  import { getStyleOptions } from '@vcmap/core';
+  import { Fill, RegularShape, Stroke, Style, Text } from 'ol/style.js';
 
   export default {
     name: 'StyleExample',
@@ -97,93 +100,29 @@
         },
       };
 
-      const styleOptions = ref({
-        fill: undefined,
-        stroke: undefined,
-        image: undefined,
-        text: undefined,
-      });
-
-      const fill = exampleStyle.getFill();
-      const stroke = exampleStyle.getStroke();
-      const image = exampleStyle.getImage();
-      const text = exampleStyle.getText();
-
-      // TODO: Replace with new getStyleOptions from @vcmap/core as soon as available
-      if (fill) {
-        styleOptions.value.fill = {
-          color: parseColor(fill.getColor()),
-        };
-      }
-      if (stroke) {
-        styleOptions.value.stroke = {
-          color: parseColor(stroke.getColor()),
-          width: exampleStyle.getStroke().getWidth(),
-        };
-      }
-      if (image) {
-        if (image instanceof RegularShape) {
-          styleOptions.value.image = {
-            points: image.getPoints(),
-            radius: image.getRadius(),
-            radius2: image.getRadius2(),
-            angle: image.getAngle(),
-            fill: {
-              color: parseColor(image.getFill().getColor()),
-            },
-            stroke: {
-              color: parseColor(image.getStroke().getColor()),
-              width: image.getStroke().getWidth(),
-            },
-          };
-        } else if (image instanceof Icon) {
-          styleOptions.value.image = {
-            src: image.getSrc(),
-            scale: image.getScale(),
-            opacity: image.getOpacity(),
-          };
-        }
-      }
-      if (text) {
-        styleOptions.value.text = {
-          font: text.getFont(),
-          fill: {
-            color: parseColor(text.getFill()?.getColor()),
-          },
-          stroke: {
-            color: parseColor(text.getStroke()?.getColor()),
-            width: text.getStroke().getWidth(),
-          },
-          textBaseline: text.getTextBaseline(),
-          offsetY: text.getOffsetY(),
-          offsetX: text.getOffsetX(),
-          text: text.getText(),
-        };
-      }
-
-      onMounted(() => {
-        watchEffect(() => {
-          const newFill = styleOptions.value.fill;
-          const newStroke = styleOptions.value.stroke;
-          const newImage = styleOptions.value.image;
-          // const newText = styleOptions.value.text;
-          // TODO: Replace with new getStyleFromOptions from @vcmap/core as soon as available
-          exampleStyle.setFill(newFill ? new Fill(newFill) : null);
-          exampleStyle.setStroke(newStroke ? new Stroke(newStroke) : null);
-          if (newImage?.points) {
-            // exampleStyle.setImage(new RegularShape(newImage));
-          } else if (newImage?.src) {
-            exampleStyle.setImage(new Icon(newImage));
-          } else {
-            exampleStyle.setImage(null);
-          }
-        });
+      // use reactive wrapper object to ensure updates
+      const styleOptions = reactive({
+        style: getStyleOptions(exampleStyle),
       });
 
       return {
         styleOptions,
         defaultStyleOptions,
         VectorStyleMenus,
+        resetExample: {
+          name: 'resetExample',
+          icon: 'mdi-sync',
+          callback() {
+            styleOptions.style = getStyleOptions(exampleStyle);
+          },
+        },
+        logStyle: {
+          name: 'logStyle',
+          icon: 'mdi-console',
+          callback() {
+            console.log(toRaw(styleOptions.style));
+          },
+        },
       };
     },
   };

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

@@ -227,7 +227,8 @@ export default async function toolboxExample() {
       this._stopWatching = watch(
         () => disabled.value,
         () => {
-          selectToolboxAction.disabled = disabled.value;
+          app.toolboxManager.get(selectToolboxComponent.id).action.disabled =
+            disabled.value;
           app.toolboxManager.get(
             groupToolboxComponentExampleOptions.id,
           ).disabled = disabled.value;

package/plugins/package.json

@@ -1,27 +1,7 @@
 {
   "dependencies": {
-    "@vcmap/print": "^1.0.2",
-    "@vcmap/swipe-tool": "^1.0.3",
-    "@vcmap/export": "^1.0.1",
-    "@vcmap/shadow": "^2.0.0",
-    "@vcmap/draw": "^2.0.0",
-    "@vcmap/create-link": "^1.0.1",
-    "@vcmap/search-nominatim": "^1.0.1",
-    "@vcmap/multi-view": "^1.1.0",
-    "@vcmap/cesium-filters": "^1.0.1",
-    "@vcmap/viewshed": "^2.0.1",
-    "@vcmap/measurement": "^1.0.2",
-    "@vcmap/flight": "^1.1.0",
-    "@vcmap/transparent-terrain": "^1.0.1",
-    "@vcmap/search-coordinate": "^1.0.0",
-    "@vcmap/clipping-tool": "^1.0.0",
-    "@vcmap/height-profile": "^1.0.0",
-    "@vcmap/search-wfs": "^1.0.0",
-    "@vcmap/search-esri": "^1.0.0",
-    "@vcmap/link-button": "^1.0.0",
-    "@vcmap/walk": "^1.0.2"
-  },
-  "optionalDependencies": {
-    "@vcmap/planning": "^5.2.0"
+    "@vcmap/print": "https://github.com/virtualcitySYSTEMS/map-print.git#main",
+    "@vcmap/multi-view": "https://github.com/virtualcitySYSTEMS/map-multi-view.git",
+    "@vcmap/transparent-terrain": "https://github.com/virtualcitySYSTEMS/map-transparent-terrain.git"
   }
 }

package/public/assets/@mdi/font/README.md

@@ -0,0 +1,25 @@
+> *Note:* Please use the main [MaterialDesign](https://github.com/Templarian/MaterialDesign/issues) repo to report issues. This repo is for distribution of the Webfont files only.
+
+# Webfont - Material Design Icons
+
+Webfont distribution for the [Material Design Icons](https://materialdesignicons.com).
+
+```
+npm install @mdi/font
+```
+
+> Package built with [@mdi/font-build](https://github.com/Templarian/MaterialDesign-Font-Build).
+
+## Related Packages
+
+[NPM @MDI Organization](https://npmjs.com/org/mdi)
+
+- JavaScript/Typescript: [MaterialDesign-JS](https://github.com/Templarian/MaterialDesign-JS)
+- SVG: [MaterialDesign-SVG](https://github.com/Templarian/MaterialDesign-SVG)
+- Font-Build [MaterialDesign-Font-Build](https://github.com/Templarian/MaterialDesign-Font-Build)
+- Desktop Font: [MaterialDesign-Font](https://github.com/Templarian/MaterialDesign-Font)
+
+## Learn More
+
+- [MaterialDesignIcons.com](https://materialdesignicons.com)
+- https://github.com/Templarian/MaterialDesign