@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/components/style/VcsImageSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-image-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col class="d-flex justify-center py-1">
@@ -9,7 +9,7 @@
     </v-container>
     <v-divider />
     <div class="px-1">
-      <v-tabs v-model="selectedImageTypeTab" height="40" centered>
+      <v-tabs v-model="selectedImageTypeTab" height="40" align-tabs="center">
         <v-tab
           v-for="item in Object.values(ImageType).map((value) => ({
             value,
@@ -18,33 +18,41 @@
           :key="item.value"
           light
         >
-          {{ $t(item.label) }}
+          {{ $st(item.label) }}
         </v-tab>
       </v-tabs>
     </div>
     <v-divider />
     <v-container class="px-1 pt-1 pb-0">
-      <VcsRadioGrid
-        v-model="selectedImage"
+      <VcsRadio
+        v-model="selectedIdx"
         :items="currentItems"
-        :disabled="!value"
-        item-value="src"
+        :disabled="!modelValue"
+        item-value="idx"
+        label-position="top"
+        inline
+        class="d-flex justify-center"
       >
-        <template #label="{ src }" v-if="selectedType === ImageType.SHAPE">
-          <v-icon size="24">{{ src }}</v-icon>
+        <template #label="{ item }">
+          <img
+            v-if="selectedType !== ImageType.SHAPE"
+            :src="item.src"
+            alt="shape"
+          />
+          <v-icon v-else size="24">{{ item.src }}</v-icon>
         </template>
-      </VcsRadioGrid>
+      </VcsRadio>
       <div v-if="selectedType === ImageType.ICON">
         <v-row no-gutters>
           <v-col>
-            <VcsLabel html-for="style-icon-opacity">
+            <VcsLabel :html-for="`${cid}-style-icon-opacity`">
               {{ $t('components.style.opacity') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsSlider
-              id="style-icon-opacity"
-              v-model="selectedOpacity"
+              :id="`${cid}-style-icon-opacity`"
+              v-model="localValue.opacity"
               step="0.1"
               type="number"
               max="1"
@@ -58,17 +66,20 @@
         <v-row
           no-gutters
           v-for="input in shapeSingleValueInputs"
-          :key="input.name"
+          :key="input.key"
         >
           <v-col>
-            <VcsLabel>{{ $t(`components.style.${input.text}`) }}</VcsLabel>
+            <VcsLabel :html-for="`${cid}-${input.key}`">{{
+              $st(`components.style.${input.key}`)
+            }}</VcsLabel>
           </v-col>
           <v-col cols="3">
             <VcsTextField
-              :id="`style-shape-${input.text}`"
+              :id="`${cid}-${input.key}`"
+              :hide-spin-buttons="true"
               type="number"
               :unit="input.unit || ''"
-              v-model.number="input.value.value"
+              v-model.number="localValue[input.key]"
               :disabled="currentType !== ImageType.SHAPE"
               :step="input.step || 1"
               :min="input.range?.[0] || 0"
@@ -80,11 +91,10 @@
                   !input.range ||
                   (!input.isRequired && !v) ||
                   between(v, input.range) ||
-                  `${$t(
+                  `${$st(
                     'components.validation.allowedRange',
                   )}: ${input.range.join(' - ')}`,
               ]"
-              :show-spin-buttons="true"
             />
           </v-col>
         </v-row>
@@ -94,11 +104,14 @@
         v-if="extendedShapeSettings || selectedType === ImageType.ICON"
       >
         <v-col>
-          <VcsLabel>{{ $t('components.style.scale') }}</VcsLabel>
+          <VcsLabel :html-for="`${cid}-style-shape-scale`">{{
+            $t('components.style.scale')
+          }}</VcsLabel>
         </v-col>
         <v-col cols="3">
           <VcsTextField
-            id="style-shape-scale"
+            :id="`${cid}-style-shape-scale`"
+            :hide-spin-buttons="true"
             type="number"
             v-model.number="selectedScale"
             placeholder="1"
@@ -109,22 +122,22 @@
       </v-row>
       <VcsStrokeMenu
         v-if="selectedType === ImageType.SHAPE"
-        v-model="selectedStroke"
+        v-model="localValue.stroke"
         :value-default="valueDefault?.stroke"
-        :disabled="!value || currentType !== ImageType.SHAPE"
+        :disabled="!localValue || currentType !== ImageType.SHAPE"
       />
       <VcsFillMenu
         v-if="selectedType === ImageType.SHAPE"
-        v-model="selectedFill"
+        v-model="localValue.fill"
         :value-default="valueDefault?.fill"
-        :disabled="!value || currentType !== ImageType.SHAPE"
+        :disabled="!localValue || currentType !== ImageType.SHAPE"
       />
     </v-container>
   </v-sheet>
 </template>
 
 <script>
-  import { computed, onMounted, ref, watch } from 'vue';
+  import { computed, onMounted, ref, toRaw, watch } from 'vue';
   import {
     VSheet,
     VDivider,
@@ -134,17 +147,20 @@
     VIcon,
     VTabs,
     VTab,
-  } from 'vuetify/lib';
-  import { Circle, Fill, Icon, RegularShape, Stroke, Style } from 'ol/style.js';
+  } from 'vuetify/components';
+  import { Icon, Style } from 'ol/style.js';
   import { toContext } from 'ol/render.js';
   import { Point } from 'ol/geom.js';
+  import { getImageStyleFromOptions } from '@vcmap/core';
+  import { useComponentId } from '../composables.js';
+  import { useProxiedComplexModel } from '../modelHelper.js';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
-  import VcsRadioGrid from '../form-inputs-controls/VcsRadioGrid.vue';
+  import VcsRadio from '../form-inputs-controls/VcsRadio.vue';
   import VcsFillMenu from './VcsFillMenu.vue';
   import VcsStrokeMenu from './VcsStrokeMenu.vue';
-  import { useSelectedKey, between } from './composables.js';
+  import { between } from './composables.js';
 
   /**
    * @enum {string}
@@ -159,8 +175,8 @@
   /**
    * Draws an image style on a canvas.
    * @param {HTMLCanvasElement} canvas The canvas to draw on
-   * @param {import("ol/style/Image").Options} imageOptions The JSON options of the image style.
-   * @param {boolean} fitToCanvas If the circle, shape or icon should be fitted into the canvas or if it should be draw with it's actual size.
+   * @param {import("ol/style/Image").Options} [imageOptions] The JSON options of the image style.
+   * @param {boolean} [fitToCanvas=false] If the circle, shape or icon should be fitted into the canvas or if it should be draw with it's actual size.
    */
   export async function drawImageStyle(
     canvas,
@@ -176,37 +192,9 @@
     let imageStyle;
     let size;
     if (imageOptions.radius) {
-      // TODO: Replace with getImageStyleFromOptions from styleHelpers.ts in @vcmap/core
       const { radius } = imageOptions;
       size = [radius * 2, radius * 2];
-      const options = {
-        stroke: new Stroke(
-          imageOptions.stroke
-            ? {
-                color: imageOptions.stroke.color,
-                width: imageOptions.stroke.width,
-              }
-            : null,
-        ),
-        fill: new Fill(
-          imageOptions.fill
-            ? {
-                color: imageOptions.fill.color,
-              }
-            : null,
-        ),
-        radius,
-      };
-      if (imageOptions.points) {
-        options.radius2 = imageOptions.radius2;
-        options.angle = imageOptions.angle;
-        options.points = imageOptions.points;
-        options.rotation = imageOptions.rotation;
-        options.scale = imageOptions.scale;
-        imageStyle = new RegularShape(options);
-      } else {
-        imageStyle = new Circle(options);
-      }
+      imageStyle = getImageStyleFromOptions(imageOptions);
     } else if (imageOptions.src) {
       // Somehow the icon does not load the img when providing the src. And icon.load() is not async.
       // Therefore the img first has to be loaded and then passed to new Icon
@@ -746,8 +734,8 @@
 
   /**
    * @description Allows to model a JSON representation of ol/style/Image style. It makes use of VcsStrokeMenu and VcsFillMenu.
-   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} value - The Image options
-   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} valueDefault - The default image options
+   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} [modelValue] - The Image options
+   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} [valueDefault] - The default image options
    * @vue-prop {Array<import("ol/style/Icon").Options>} [iconOptions] - The icon options too choose from. Scale and opacity are ignored. The defaults are 3 different shapes with 4 different colors.
    * @vue-prop {boolean} [extendedShapeSettings=false] - If true, there are all the input fields needed to create arbitrary ol RegularShapes.
    */
@@ -766,11 +754,11 @@
       VcsTextField,
       VcsFillMenu,
       VcsStrokeMenu,
-      VcsRadioGrid,
+      VcsRadio,
       VcsSlider,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
@@ -788,10 +776,11 @@
       },
     },
     setup(props, { emit }) {
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
       const currentType = computed(() => {
-        if (props.value?.radius) {
+        if (localValue.value?.radius) {
           return ImageType.SHAPE;
-        } else if (props.value?.src) {
+        } else if (localValue.value?.src) {
           return ImageType.ICON;
         } else {
           return undefined;
@@ -813,133 +802,87 @@
       const canvas = ref();
 
       const shapeSingleValueInputs = computed(() => {
+        /**
+         * @type {[{key: string,isRequired?: boolean, unit?: string,  range?: number[]}]}
+         */
         const inputs = [
-          { name: 'radius', unit: 'px', range: [1, 100], isRequired: true },
+          { key: 'radius', unit: 'px', range: [1, 100], isRequired: true },
         ];
         if (props.extendedShapeSettings) {
-          [
-            { name: 'points', range: [0, 10] },
-            { name: 'radius2', unit: 'px', range: [0, 100] },
-            { name: 'angle', step: 0.1, unit: 'rad' },
-            { name: 'rotation', step: 0.1, unit: 'rad' },
-          ].forEach((entry) => inputs.push(entry));
+          inputs.push(
+            { key: 'points', range: [0, 10] },
+            { key: 'radius2', unit: 'px', range: [0, 100] },
+            { key: 'angle', step: 0.1, unit: 'rad' },
+            { key: 'rotation', step: 0.1, unit: 'rad' },
+          );
         }
-        return inputs.map((input) => {
-          return {
-            text: input.name,
-            value: useSelectedKey(
-              () => props.value,
-              input.name,
-              props.valueDefault[input.name],
-              emit,
-              input.range,
-              input.isRequired,
-            ),
-            unit: input.unit,
-            range: input.range,
-            step: input.step,
-          };
-        });
+        return inputs;
       });
 
       const selectedScale = computed({
         get() {
-          if (Array.isArray(props.value?.scale)) {
-            return props.value.scale[0];
+          if (Array.isArray(localValue.value?.scale)) {
+            return localValue.value.scale[0];
           } else {
-            return props.value?.scale;
+            return localValue.value?.scale;
           }
         },
         set(value) {
-          if (!value) {
-            const newImage = structuredClone(props.value);
-            delete newImage.scale;
-            emit('input', newImage);
-          } else if (value > 0) {
-            const newImage = structuredClone(props.value);
-            emit('input', Object.assign(newImage, { scale: value }));
-          }
+          localValue.value.scale = value;
         },
       });
 
-      const selectedOpacity = useSelectedKey(
-        () => props.value,
-        'opacity',
-        props.valueDefault.opacity,
-        emit,
-      );
+      const selectedIdx = ref(-1);
 
-      const selectedFill = useSelectedKey(
-        () => props.value,
-        'fill',
-        props.valueDefault.fill,
-        emit,
-      );
-      const selectedStroke = useSelectedKey(
-        () => props.value,
-        'stroke',
-        props.valueDefault.stroke,
-        emit,
-      );
+      watch(selectedType, () => {
+        // unset selection on tab change
+        if (currentType.value !== selectedType.value) {
+          selectedIdx.value = -1;
+        }
+      });
 
-      const selectedImage = computed({
-        get() {
-          if (currentType.value !== selectedType.value) {
-            return undefined;
-          } else if (currentType.value === ImageType.SHAPE) {
-            const equalShape = defaultShapes.find((preset) =>
-              isEqualShape(props.value, preset.value),
-            );
-            if (equalShape) {
-              return equalShape.src;
-            } else {
-              return customIcon;
-            }
+      watch(
+        localValue,
+        () => {
+          // derive selection on modelValue change
+          if (currentType.value === ImageType.SHAPE) {
+            const idx = defaultShapes
+              .map(({ value }) => value)
+              .findIndex((i) => isEqualShape(localValue.value, i));
+            // select custom (index 7), if no defaultShape found
+            selectedIdx.value = idx < 0 ? 7 : idx;
           } else if (currentType.value === ImageType.ICON) {
-            return props.value?.src;
-          } else {
-            return undefined;
+            selectedIdx.value = props.iconOptions.findIndex(
+              (i) => i.src === localValue.value.src,
+            );
           }
         },
-        set(value) {
-          let newImage = {};
-          if (selectedType.value === ImageType.SHAPE) {
-            const switchFromICON = currentType.value === ImageType.ICON;
-            let newPreset;
-            if (value === customIcon && !switchFromICON) {
-              return;
-            } else if (value === customIcon) {
-              newPreset = defaultShapes[0];
-            } else {
-              newPreset = defaultShapes.find((preset) => preset.src === value);
-            }
-
-            if (newPreset) {
-              let fill;
-              let stroke;
+        { deep: true },
+      );
 
-              if (switchFromICON) {
-                fill = props.valueDefault?.fill;
-                stroke = props.valueDefault?.stroke;
-              } else {
-                fill = selectedFill.value;
-                stroke = selectedStroke.value;
-              }
-              newImage = JSON.parse(JSON.stringify(newPreset.value));
-              Object.assign(newImage, {
-                fill,
-                stroke,
-              });
-            }
+      watch(selectedIdx, (idx) => {
+        // update modelValue on selection
+        if (idx > -1) {
+          if (
+            selectedType.value === ImageType.SHAPE &&
+            idx < defaultShapes.length
+          ) {
+            const switchFromICON = currentType.value === ImageType.ICON;
+            localValue.value = {
+              ...defaultShapes[idx]?.value,
+              fill: switchFromICON
+                ? props.valueDefault?.fill
+                : toRaw(localValue.value?.fill),
+              stroke: switchFromICON
+                ? props.valueDefault?.stroke
+                : toRaw(localValue.value?.stroke),
+            };
           } else if (selectedType.value === ImageType.ICON) {
-            newImage = props.iconOptions.find((option) => option.src === value);
-            Object.assign(newImage, {
-              scale: selectedScale.value || 1,
-              opacity: selectedOpacity.value || 1,
-            });
+            localValue.value = {
+              ...props.iconOptions[idx],
+            };
           }
-          emit('input', JSON.parse(JSON.stringify(newImage)));
-        },
+        }
       });
 
       const currentItems = computed(() => {
@@ -952,34 +895,38 @@
         } else if (selectedType.value === ImageType.ICON) {
           items = props.iconOptions;
         }
-        return items;
+        return items.map(({ src }, idx) => ({
+          src,
+          idx,
+        }));
       });
 
       onMounted(() => {
-        drawImageStyle(canvas.value, props.value);
+        drawImageStyle(canvas.value, localValue.value);
         watch(
-          () => props.value,
+          localValue,
           () => {
-            drawImageStyle(canvas.value, props.value);
+            drawImageStyle(canvas.value, localValue.value);
           },
           { deep: true },
         );
       });
 
+      const cid = useComponentId();
+
       return {
         ImageType,
+        localValue,
         selectedType,
         currentType,
-        selectedImage,
+        selectedIdx,
         canvas,
         shapeSingleValueInputs,
         selectedScale,
-        selectedOpacity,
-        selectedFill,
-        selectedStroke,
         between,
         currentItems,
         selectedImageTypeTab,
+        cid,
       };
     },
   };

package/src/components/style/VcsImageSelector.vue.d.ts

@@ -1,10 +1,10 @@
 /**
  * Draws an image style on a canvas.
  * @param {HTMLCanvasElement} canvas The canvas to draw on
- * @param {import("ol/style/Image").Options} imageOptions The JSON options of the image style.
- * @param {boolean} fitToCanvas If the circle, shape or icon should be fitted into the canvas or if it should be draw with it's actual size.
+ * @param {import("ol/style/Image").Options} [imageOptions] The JSON options of the image style.
+ * @param {boolean} [fitToCanvas=false] If the circle, shape or icon should be fitted into the canvas or if it should be draw with it's actual size.
  */
-export function drawImageStyle(canvas: HTMLCanvasElement, imageOptions: any, fitToCanvas?: boolean): Promise<void>;
+export function drawImageStyle(canvas: HTMLCanvasElement, imageOptions?: import("ol/style/Image", { with: { "resolution-mode": "import" } }).Options | undefined, fitToCanvas?: boolean | undefined): Promise<void>;
 /**
  * *
  */
@@ -56,7 +56,7 @@ export const defaultIcons: {
     anchor: number[];
 }[];
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -80,26 +80,27 @@ declare const _default: import("vue").DefineComponent<{
         SHAPE: string;
         ICON: string;
     };
+    localValue: import("vue").Ref<any>;
     selectedType: import("vue").ComputedRef<string>;
     currentType: import("vue").ComputedRef<string | undefined>;
-    selectedImage: import("vue").WritableComputedRef<any>;
+    selectedIdx: import("vue").Ref<number>;
     canvas: import("vue").Ref<any>;
-    shapeSingleValueInputs: import("vue").ComputedRef<{
-        text: string;
-        value: import("vue").WritableComputedRef<any>;
-        unit: string;
-        range: number[];
-        step: any;
-    }[]>;
+    shapeSingleValueInputs: import("vue").ComputedRef<[{
+        key: string;
+        isRequired?: boolean | undefined;
+        unit?: string | undefined;
+        range?: number[] | undefined;
+    }]>;
     selectedScale: import("vue").WritableComputedRef<any>;
-    selectedOpacity: import("vue").WritableComputedRef<any>;
-    selectedFill: import("vue").WritableComputedRef<any>;
-    selectedStroke: import("vue").WritableComputedRef<any>;
     between: typeof between;
-    currentItems: import("vue").ComputedRef<any>;
+    currentItems: import("vue").ComputedRef<{
+        src: any;
+        idx: number;
+    }[]>;
     selectedImageTypeTab: import("vue").Ref<number>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+    cid: string;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -119,10 +120,10 @@ declare const _default: import("vue").DefineComponent<{
         }[];
     };
 }>>, {
-    value: Record<string, any>;
+    modelValue: Record<string, any>;
     valueDefault: Record<string, any>;
     extendedShapeSettings: boolean;
     iconOptions: unknown[];
-}>;
+}, {}>;
 export default _default;
 import { between } from './composables.js';

package/src/components/style/VcsStrokeMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <MenuWrapper
-    v-bind="{ value, valueDefault, disabled }"
+    class="vcs-stroke-menu"
     :value-fallback="{ color: [0, 0, 0, 1], width: 1 }"
-    v-on="$listeners"
     name="components.style.stroke"
+    v-bind="{ ...$attrs, ...$props }"
   >
     <template #preview>
       <v-sheet
@@ -16,24 +16,24 @@
       />
     </template>
     <template #content>
-      <VcsStrokeSelector :value="value" v-on="$listeners" />
+      <VcsStrokeSelector v-bind="{ ...$attrs, ...$props }" />
     </template>
   </MenuWrapper>
 </template>
 
 <script>
   import { computed } from 'vue';
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsStrokeSelector from './VcsStrokeSelector.vue';
   import MenuWrapper from './MenuWrapper.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
 
   /**
    * @description A wrapper for the VcsStrokeSelector, that has a small color preview and a menu that pops up when clicking the preview, containing the stroke selector.
-   * When clicking the reset button, the valueDefault is emitted, when unchecking the checkbox in front of the preview, null is emitted. If it is checked again, valueDefault is emitted. If the valueDefault is undefined or null, { color: [0, 0, 0, 1], width: 1 } is emitted.
-   * @vue-prop {import("ol/style/Stroke").Options} [value] - The Stroke Options
-   * @vue-prop {import("ol/style/Stroke").Options} [valueDefault] - The default Stroke Options.
-   * @vue-prop {boolean} [disabled=false] - Disable the input
+   * When clicking the reset button, the valueDefault is emitted, when unchecking the checkbox in front of the preview, null is emitted.
+   * If it is checked again, valueDefault is emitted. If the valueDefault is undefined or null, { color: [0, 0, 0, 1], width: 1 } is emitted.
+   * @vue-prop {import("ol/style/Stroke").Options} [modelValue] - The Stroke Options
    */
   export default {
     name: 'VcsStrokeMenu',
@@ -43,21 +43,14 @@
       MenuWrapper,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
-      valueDefault: {
-        type: Object,
-        default: undefined,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
     },
-    setup(props) {
-      const rgbaObject = useColorObject(() => props.value?.color);
+    setup(props, { emit }) {
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
+      const rgbaObject = useColorObject(() => localValue.value?.color);
       return {
         rgbaString: computed(() => rgbaObjectToString(rgbaObject.value)),
       };