@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.3

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/vector-properties-example/src/VectorPropertiesExample.vue

@@ -6,7 +6,7 @@
           <VcsList
             :items="propertiesToSelectFrom"
             :selectable="true"
-            v-model="propertiesToDisplay"
+            v-model="propertiesSelected"
             title="Select all"
           />
         </v-col>
@@ -29,13 +29,20 @@
           />
         </v-col>
       </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsFormButton @click="() => console.log({ ...featureProperties })"
+            >Log VectorProperties</VcsFormButton
+          >
+        </v-col>
+      </v-row>
     </v-container>
     <VcsVectorPropertiesComponent
       v-model="featureProperties"
       :value-default="defaultOptions"
       :show3-d-properties="is3D"
-      :properties="propertiesToDisplay.map((item) => item.name)"
-      :hide-dividers="hideDividers"
+      :properties="properties"
+      :show-dividers="!hideDividers"
       :expandable="expandable"
       :show-reset="showReset"
     />
@@ -43,12 +50,22 @@
 </template>
 
 <script>
-  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+  import {
+    computed,
+    inject,
+    onMounted,
+    onUnmounted,
+    reactive,
+    ref,
+    shallowRef,
+    watch,
+  } from 'vue';
   import { CesiumMap, VectorLayer, VectorProperties } from '@vcmap/core';
   import {
     VcsVectorPropertiesComponent,
     VcsList,
     VcsCheckbox,
+    VcsFormButton,
   } from '@vcmap/ui';
   import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
   import { Feature } from 'ol';
@@ -69,6 +86,7 @@
       VcsVectorPropertiesComponent,
       VcsList,
       VcsCheckbox,
+      VcsFormButton,
       VSheet,
       VContainer,
       VRow,
@@ -96,9 +114,10 @@
         },
       });
 
-      const featureProperties = ref(
+      const featureProperties = shallowRef(
         layer.vectorProperties.getValuesForFeatures([feature]),
       );
+      featureProperties.value.scaleByDistance = [0, 1, 100, 0];
       watch(featureProperties, () => {
         layer.vectorProperties.setValuesForFeatures(featureProperties.value, [
           feature,
@@ -106,10 +125,13 @@
       });
 
       const defaultOptions = VectorProperties.getDefaultOptions();
-      const propertiesToSelectFrom = Object.keys(defaultOptions).map((key) => ({
-        name: key,
-        title: key,
-      }));
+      const propertiesToSelectFrom = reactive(
+        Object.keys(defaultOptions).map((key) => ({
+          name: key,
+          title: key,
+        })),
+      );
+      const propertiesSelected = shallowRef([...propertiesToSelectFrom]);
 
       onMounted(() => {
         vcsApp.layers.add(layer);
@@ -128,7 +150,10 @@
         defaultOptions,
         is3D,
         propertiesToSelectFrom,
-        propertiesToDisplay: ref([...propertiesToSelectFrom]),
+        propertiesSelected,
+        properties: computed(() =>
+          propertiesSelected.value.map(({ name }) => name),
+        ),
         hideDividers: ref(false),
         expandable: ref(false),
         showReset: ref(true),

package/plugins/@vcmap-show-case/wizard-example/src/WizardExample.vue

@@ -1,24 +1,20 @@
 <template>
   <VcsWizard v-model.number="step">
     <VcsWizardStep
-      step="1"
-      :complete="step > 1"
+      step="0"
+      :complete="step > 0"
       help-text="1. this is the help text"
       heading="This is the first step"
       v-model.number="step"
     >
-      <template #content>
-        <!-- px-2 because does not contain input components -->
-        <v-container class="px-2 py-0">
-          <div>This is the content of the first step.</div>
-          <VcsFormButton @click="increaseStep()" class="my-2">
-            Next
-          </VcsFormButton>
-        </v-container>
+      <!-- px-2 because does not contain input components -->
+      <div>This is the content of the first step.</div>
+      <template #actions="{ next }">
+        <VcsFormButton @click="next">Next</VcsFormButton>
       </template>
     </VcsWizardStep>
     <VcsWizardStep
-      step="2"
+      step="1"
       editable
       :header-actions="actions.second"
       heading="This is the second step"
@@ -33,35 +29,29 @@
           <li>test</li>
         </ol>
       </template>
-      <template #content>
-        <v-container class="px-1 py-0">
-          <v-form ref="form" v-model="formValid" lazy-validation>
-            <VcsSelect
-              :items="['this', 'is', 'a', 'test']"
-              v-model="selection"
-              placeholder="Select"
-              :rules="[
-                (v) => (!!v && v !== 'this') || 'Please select a valid option.',
-              ]"
-            />
-            <VcsFormButton @click="decreaseStep()"> Back </VcsFormButton>
-          </v-form>
-        </v-container>
-      </template>
-    </VcsWizardStep>
-    <VcsWizardStep step="3" v-model.number="step">
-      <template #header>
-        <div class="d-flex flex-grow-1 flex-row-reverse">
-          <VcsFormButton
-            :disabled="!selection || !formValid"
-            @click="finish()"
-            variant="filled"
-          >
-            Finish
-          </VcsFormButton>
-        </div>
+      <v-form ref="formRef" v-model="formValid" lazy-validation>
+        <VcsSelect
+          :items="['this', 'is', 'a', 'test']"
+          v-model="selection"
+          placeholder="Select"
+          :rules="[
+            (v) => (!!v && v !== 'this') || 'Please select a valid option.',
+          ]"
+        />
+      </v-form>
+      <template #actions="{ prev }">
+        <VcsFormButton @click="prev">Back</VcsFormButton>
       </template>
     </VcsWizardStep>
+    <div class="d-flex flex-grow-1 flex-row-reverse pa-2">
+      <VcsFormButton
+        :disabled="!selection || !formValid"
+        @click="finish()"
+        variant="filled"
+      >
+        Finish
+      </VcsFormButton>
+    </div>
   </VcsWizard>
 </template>
 
@@ -72,7 +62,7 @@
     VcsFormButton,
     VcsSelect,
   } from '@vcmap/ui';
-  import { VForm, VContainer } from 'vuetify/components';
+  import { VForm } from 'vuetify/components';
   import { ref } from 'vue';
 
   /** Component to showcase the VcsWizard and VcsWizardStep. */
@@ -84,12 +74,11 @@
       VcsFormButton,
       VcsSelect,
       VForm,
-      VContainer,
     },
     setup() {
-      const step = ref(1);
-      const selection = ref();
-      const form = ref();
+      const step = ref(0);
+      const selection = ref(undefined);
+      const formRef = ref(null);
       const formValid = ref(false);
       const actions = {
         second: [
@@ -103,22 +92,19 @@
           },
         ],
       };
+
+      function finish() {
+        step.value = 0;
+        formRef.value?.resetValidation();
+      }
+
       return {
         step,
-        increaseStep() {
-          step.value += 1;
-        },
-        decreaseStep() {
-          step.value -= 1;
-        },
         selection,
         actions,
         formValid,
-        form,
-        finish() {
-          step.value = 1;
-          form.value.reset();
-        },
+        formRef,
+        finish,
       };
     },
   };

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