@vcmap/ui 6.3.11 → 7.0.0-rc.1

package/src/components/style/{VcsImageSelector.vue → VcsImageSelector.ts.vue}

@@ -46,7 +46,7 @@
         <v-row no-gutters>
           <v-col>
             <VcsLabel :html-for="`${cid}-style-icon-opacity`">
-              {{ $t('components.style.opacity') }}
+              {{ $st('components.style.opacity') }}
             </VcsLabel>
           </v-col>
           <v-col>
@@ -58,7 +58,7 @@
               max="1"
               min="0"
               :disabled="currentType !== ImageType.ICON"
-            ></VcsSlider>
+            />
           </v-col>
         </v-row>
       </div>
@@ -85,12 +85,12 @@
               :min="input.range?.[0] || 0"
               :max="input.range?.[1] || undefined"
               :rules="[
-                (v) =>
+                (v: number) =>
                   !input.isRequired || !!v || 'components.validation.required',
-                (v) =>
+                (v: number) =>
                   !input.range ||
                   (!input.isRequired && !v) ||
-                  between(v, input.range) ||
+                  between(v, input.range as [number, number]) ||
                   `${$st(
                     'components.validation.allowedRange',
                   )}: ${input.range.join(' - ')}`,
@@ -104,9 +104,9 @@
         v-if="extendedShapeSettings || selectedType === ImageType.ICON"
       >
         <v-col>
-          <VcsLabel :html-for="`${cid}-style-shape-scale`">{{
-            $t('components.style.scale')
-          }}</VcsLabel>
+          <VcsLabel :html-for="`${cid}-style-shape-scale`">
+            {{ $st('components.style.scale') }}
+          </VcsLabel>
         </v-col>
         <v-col cols="3">
           <VcsTextField
@@ -116,7 +116,9 @@
             v-model.number="selectedScale"
             placeholder="1"
             :disabled="currentType !== selectedType"
-            :rules="[(v) => !v || v > 0 || 'components.validation.notValid']"
+            :rules="[
+              (v: number) => !v || v > 0 || 'components.validation.notValid',
+            ]"
           />
         </v-col>
       </v-row>
@@ -136,8 +138,9 @@
   </v-sheet>
 </template>
 
-<script>
-  import { computed, onMounted, ref, toRaw, watch } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, onMounted, ref, toRaw, watch } from 'vue';
   import {
     VSheet,
     VDivider,
@@ -151,71 +154,68 @@
   import { Icon, Style } from 'ol/style.js';
   import { toContext } from 'ol/render.js';
   import { Point } from 'ol/geom.js';
+  import type { ImageStyleOptions } from '@vcmap/core';
   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 VcsRadio from '../form-inputs-controls/VcsRadio.vue';
-  import VcsFillMenu from './VcsFillMenu.vue';
-  import VcsStrokeMenu from './VcsStrokeMenu.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.ts.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.ts.vue';
+  import VcsSlider from '../form-inputs-controls/VcsSlider.ts.vue';
+  import VcsRadio from '../form-inputs-controls/VcsRadio.ts.vue';
+  import VcsFillMenu from './VcsFillMenu.ts.vue';
+  import VcsStrokeMenu from './VcsStrokeMenu.ts.vue';
   import { between } from './composables.js';
 
-  /**
-   * @enum {string}
-   * @property {string} SHAPE - Regularshape or Circle
-   * @property {string} ICON - Raster images
-   */
-  export const ImageType = {
-    SHAPE: 'shape',
-    ICON: 'icon',
-  };
+  export enum ImageType {
+    /** Regularshape or Circle */
+    SHAPE = 'shape',
+    /** Raster images */
+    ICON = 'icon',
+  }
 
   /**
    * 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=false] If the circle, shape or icon should be fitted into the canvas or if it should be draw with it's actual size.
+   * @param canvas The canvas to draw on
+   * @param options The JSON options of the image style.
+   * @param fitToCanvas 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,
-    imageOptions,
+    canvas: HTMLCanvasElement,
+    options?: ImageStyleOptions,
     fitToCanvas = false,
-  ) {
-    const context = canvas.getContext('2d');
+  ): Promise<void> {
+    const context = canvas.getContext('2d')!;
     context.clearRect(0, 0, canvas.width, canvas.height);
-    if (!imageOptions?.radius && !imageOptions?.src) {
+    if (!options || (!options.radius && !options.src)) {
       return;
     }
     const vectorContext = toContext(context, { pixelRatio: 1 });
     let imageStyle;
-    let size;
-    if (imageOptions.radius) {
-      const { radius } = imageOptions;
+    let size: [number, number] = [0, 0];
+    if (options.radius) {
+      const { radius } = options;
       size = [radius * 2, radius * 2];
-      imageStyle = getImageStyleFromOptions(imageOptions);
-    } else if (imageOptions.src) {
+      imageStyle = getImageStyleFromOptions(options);
+    } else if (options.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
       const img = new Image();
-      img.src = imageOptions.src;
+      img.src = options.src;
       await img.decode();
       imageStyle = new Icon({
         img,
-        imgSize: [img.width, img.height],
-        opacity: imageOptions.opacity,
-        scale: imageOptions.scale,
+        opacity: options.opacity,
+        scale: options.scale,
       });
       size = [img.width, img.height];
     }
     if (fitToCanvas) {
       const paddingShare = 1.5;
-      let oldScale;
-      if (imageOptions.scale) {
-        oldScale = Array.isArray(imageOptions.scale)
-          ? imageOptions.scale
-          : [imageOptions.scale, imageOptions.scale];
+      let oldScale: number[];
+      if (options.scale) {
+        oldScale = Array.isArray(options.scale)
+          ? options.scale
+          : [options.scale, options.scale];
       } else {
         oldScale = [1, 1];
       }
@@ -224,7 +224,7 @@
         canvas.height / paddingShare / (size[1] * oldScale[1]),
       );
       const newScale = oldScale.map((dimension) => dimension * smallerRatio);
-      imageStyle.setScale(newScale);
+      imageStyle?.setScale(newScale);
     }
     vectorContext.setStyle(new Style({ image: imageStyle }));
     vectorContext.drawGeometry(
@@ -234,11 +234,14 @@
 
   /**
    * Compares two regular shapes based on points, radius2, angle, rotation and scale.
-   * @param {import('ol/style/RegularShape').Options} shape1 A ol regular shape.
-   * @param {import('ol/style/RegularShape').Options} shape2 Another ol regular shape.
-   * @returns {boolean} If shapes are equal.
+   * @param shape1 A ol regular shape.
+   * @param shape2 Another ol regular shape.
+   * @returns Whether shapes are equal.
    */
-  function isEqualShape(shape1, shape2) {
+  function isEqualShape(
+    shape1: ImageStyleOptions,
+    shape2: ImageStyleOptions,
+  ): boolean {
     return (
       ((!shape1.points && !shape2.points) || shape1.points === shape2.points) &&
       shape1.radius2 === shape2.radius2 &&
@@ -251,66 +254,50 @@
         shape1.scale === shape2.scale ||
         (Array.isArray(shape1.scale) &&
           Array.isArray(shape2.scale) &&
-          shape1.scale.every((value, index) => value === shape2.scale[index])))
+          shape1.scale.every(
+            (value, index) => value === (shape2.scale as number[])?.[index],
+          )))
     );
   }
 
   /** Presets for different shapes with a matching mdi icon as src. */
-  export const defaultShapes = [
-    {
-      src: 'mdi-circle-outline',
-      value: { radius: 10 },
-    },
-    {
-      src: 'mdi-square-outline',
-      value: { points: 4, radius: 10, angle: Math.PI / 4 },
-    },
-    {
-      src: 'mdi-rectangle-outline',
-      value: {
-        radius: 10 / Math.SQRT2,
-        radius2: 10,
-        points: 4,
-        angle: 0,
-        scale: [1, 0.5],
+  export const defaultShapes: Array<{ src: string; value: ImageStyleOptions }> =
+    [
+      {
+        src: 'mdi-circle-outline',
+        value: { radius: 10 },
       },
-    },
-    {
-      src: 'mdi-triangle-outline',
-      value: {
-        points: 3,
-        radius: 10,
-        angle: 0,
+      {
+        src: 'mdi-square-outline',
+        value: { points: 4, radius: 10, angle: Math.PI / 4 },
       },
-    },
-    {
-      src: 'mdi-star-outline',
-      value: {
-        points: 5,
-        radius: 10,
-        radius2: 4,
-        angle: 0,
+      {
+        src: 'mdi-rectangle-outline',
+        value: {
+          radius: 10 / Math.SQRT2,
+          radius2: 10,
+          points: 4,
+          angle: 0,
+          scale: [1, 0.5],
+        },
       },
-    },
-    {
-      src: 'mdi-plus',
-      value: {
-        points: 4,
-        radius: 10,
-        radius2: 0,
-        angle: 0,
+      {
+        src: 'mdi-triangle-outline',
+        value: { points: 3, radius: 10, angle: 0 },
       },
-    },
-    {
-      src: 'mdi-close',
-      value: {
-        points: 4,
-        radius: 10,
-        radius2: 0,
-        angle: Math.PI / 4,
+      {
+        src: 'mdi-star-outline',
+        value: { points: 5, radius: 10, radius2: 4, angle: 0 },
       },
-    },
-  ];
+      {
+        src: 'mdi-plus',
+        value: { points: 4, radius: 10, radius2: 0, angle: 0 },
+      },
+      {
+        src: 'mdi-close',
+        value: { points: 4, radius: 10, radius2: 0, angle: Math.PI / 4 },
+      },
+    ];
 
   export const defaultIcons = [
     {
@@ -739,7 +726,7 @@
    * @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.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsImageSelector',
     components: {
       VSheet,
@@ -759,11 +746,11 @@
     },
     props: {
       modelValue: {
-        type: Object,
-        default: undefined,
+        type: Object as PropType<ImageStyleOptions>,
+        default: () => ({}),
       },
       valueDefault: {
-        type: Object,
+        type: Object as PropType<ImageStyleOptions>,
         default: undefined,
       },
       extendedShapeSettings: {
@@ -771,7 +758,7 @@
         default: false,
       },
       iconOptions: {
-        type: Array,
+        type: Array as PropType<ImageStyleOptions[]>,
         default: () => defaultIcons,
       },
     },
@@ -802,10 +789,13 @@
       const canvas = ref();
 
       const shapeSingleValueInputs = computed(() => {
-        /**
-         * @type {[{key: string,isRequired?: boolean, unit?: string,  range?: number[]}]}
-         */
-        const inputs = [
+        const inputs: {
+          key: 'radius' | 'radius2' | 'points' | 'angle' | 'rotation';
+          isRequired?: boolean;
+          unit?: string;
+          range?: number[];
+          step?: number;
+        }[] = [
           { key: 'radius', unit: 'px', range: [1, 100], isRequired: true },
         ];
         if (props.extendedShapeSettings) {
@@ -886,7 +876,7 @@
       });
 
       const currentItems = computed(() => {
-        let items = [];
+        let items: ImageStyleOptions[] = [];
         if (selectedType.value === ImageType.SHAPE) {
           items = [...defaultShapes];
           if (props.extendedShapeSettings) {
@@ -895,18 +885,15 @@
         } else if (selectedType.value === ImageType.ICON) {
           items = props.iconOptions;
         }
-        return items.map(({ src }, idx) => ({
-          src,
-          idx,
-        }));
+        return items.map(({ src }, idx) => ({ src, idx }));
       });
 
-      onMounted(() => {
-        drawImageStyle(canvas.value, localValue.value);
+      onMounted(async () => {
+        await drawImageStyle(canvas.value, localValue.value);
         watch(
           localValue,
-          () => {
-            drawImageStyle(canvas.value, localValue.value);
+          async () => {
+            await drawImageStyle(canvas.value, localValue.value);
           },
           { deep: true },
         );
@@ -929,5 +916,5 @@
         cid,
       };
     },
-  };
+  });
 </script>

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

@@ -0,0 +1,102 @@
+import type { PropType } from 'vue';
+import type { ImageStyleOptions } from '@vcmap/core';
+import { between } from './composables.js';
+export declare enum ImageType {
+    /** Regularshape or Circle */
+    SHAPE = "shape",
+    /** Raster images */
+    ICON = "icon"
+}
+/**
+ * Draws an image style on a canvas.
+ * @param canvas The canvas to draw on
+ * @param options The JSON options of the image style.
+ * @param fitToCanvas If the circle, shape or icon should be fitted into the canvas or if it should be draw with it's actual size.
+ */
+export declare function drawImageStyle(canvas: HTMLCanvasElement, options?: ImageStyleOptions, fitToCanvas?: boolean): Promise<void>;
+/** Presets for different shapes with a matching mdi icon as src. */
+export declare const defaultShapes: Array<{
+    src: string;
+    value: ImageStyleOptions;
+}>;
+export declare const defaultIcons: {
+    src: string;
+    anchor: number[];
+}[];
+/**
+ * @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} [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.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<ImageStyleOptions>;
+        default: () => {};
+    };
+    valueDefault: {
+        type: PropType<ImageStyleOptions>;
+        default: undefined;
+    };
+    extendedShapeSettings: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconOptions: {
+        type: PropType<ImageStyleOptions[]>;
+        default: () => {
+            src: string;
+            anchor: number[];
+        }[];
+    };
+}, {
+    ImageType: typeof ImageType;
+    localValue: import("vue", { with: { "resolution-mode": "import" } }).Ref<ImageStyleOptions>;
+    selectedType: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<ImageType>;
+    currentType: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<ImageType | undefined>;
+    selectedIdx: import("vue", { with: { "resolution-mode": "import" } }).Ref<number>;
+    canvas: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    shapeSingleValueInputs: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<{
+        key: "radius" | "radius2" | "points" | "angle" | "rotation";
+        isRequired?: boolean;
+        unit?: string;
+        range?: number[];
+        step?: number;
+    }[]>;
+    selectedScale: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<number | undefined>;
+    between: typeof between;
+    currentItems: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<{
+        src: string | undefined;
+        idx: number;
+    }[]>;
+    selectedImageTypeTab: import("vue", { with: { "resolution-mode": "import" } }).Ref<number>;
+    cid: string;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    modelValue: {
+        type: PropType<ImageStyleOptions>;
+        default: () => {};
+    };
+    valueDefault: {
+        type: PropType<ImageStyleOptions>;
+        default: undefined;
+    };
+    extendedShapeSettings: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconOptions: {
+        type: PropType<ImageStyleOptions[]>;
+        default: () => {
+            src: string;
+            anchor: number[];
+        }[];
+    };
+}>>, {
+    modelValue: ImageStyleOptions;
+    valueDefault: ImageStyleOptions;
+    extendedShapeSettings: boolean;
+    iconOptions: ImageStyleOptions[];
+}, {}>;

package/src/components/style/{VcsStrokeMenu.vue → VcsStrokeMenu.ts.vue}

@@ -21,12 +21,14 @@
   </StyleMenuWrapper>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import type { PropType } from 'vue';
   import { VSheet } from 'vuetify/components';
+  import type { Options as StrokeOptions } from 'ol/style/Stroke.js';
   import { useProxiedAtomicModel } from '../modelHelper.js';
-  import VcsStrokeSelector from './VcsStrokeSelector.vue';
-  import StyleMenuWrapper from './StyleMenuWrapper.vue';
+  import VcsStrokeSelector from './VcsStrokeSelector.ts.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.ts.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
 
   /**
@@ -35,7 +37,7 @@
    * 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 {
+  export default defineComponent({
     name: 'VcsStrokeMenu',
     components: {
       VSheet,
@@ -44,7 +46,7 @@
     },
     props: {
       modelValue: {
-        type: Object,
+        type: Object as PropType<StrokeOptions>,
         default: undefined,
       },
     },
@@ -55,7 +57,7 @@
         rgbaString: computed(() => rgbaObjectToString(rgbaObject.value)),
       };
     },
-  };
+  });
 </script>
 
 <style scoped>

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

@@ -0,0 +1,25 @@
+import type { PropType } from 'vue';
+import type { Options as StrokeOptions } from 'ol/style/Stroke.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} [modelValue] - The Stroke Options
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<StrokeOptions>;
+        default: undefined;
+    };
+}, {
+    rgbaString: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<string>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    modelValue: {
+        type: PropType<StrokeOptions>;
+        default: undefined;
+    };
+}>>, {
+    modelValue: StrokeOptions;
+}, {}>;

package/src/components/style/{VcsStrokeSelector.vue → VcsStrokeSelector.ts.vue}

@@ -4,14 +4,14 @@
       <v-row no-gutters>
         <v-col>
           <VcsLabel :html-for="`${cid}-draw-stroke-width`">
-            {{ $t('components.style.lineWidth') }}
+            {{ $st('components.style.lineWidth') }}
           </VcsLabel>
         </v-col>
         <v-col cols="3">
           <VcsTextField
             :id="`${cid}-draw-stroke-width`"
             v-model.number="width"
-            :hide-spin-buttons="true"
+            hide-spin-buttons
             type="number"
             unit="px"
             :disabled="!modelValue"
@@ -29,8 +29,10 @@
   </v-sheet>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import type { PropType } from 'vue';
+  import type { Options as StrokeOptions } from 'ol/style/Stroke.js';
   import {
     VSheet,
     VColorPicker,
@@ -39,8 +41,8 @@
     VCol,
   } from 'vuetify/components';
   import { useComponentId } from '../composables.js';
-  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.ts.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.ts.vue';
   import { useColorObject } from './composables.js';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
@@ -48,7 +50,7 @@
    * @description Allows to model a JSON representation of ol/Stroke vector style with a vuetify VColorPicker.
    * @vue-prop {import("ol/style/Stroke").Options} [modelValue] - The Stroke Options
    */
-  export default {
+  export default defineComponent({
     name: 'VcsStrokeSelector',
     components: {
       VSheet,
@@ -61,8 +63,8 @@
     },
     props: {
       modelValue: {
-        type: Object,
-        default: undefined,
+        type: Object as PropType<StrokeOptions>,
+        default: () => ({}),
       },
     },
     setup(props, { emit }) {
@@ -71,21 +73,24 @@
       return {
         rgbaObject: useColorObject(() => localValue.value?.color),
         width: computed({
-          get() {
-            return localValue.value?.width;
-          },
+          get: () => localValue.value?.width,
           set(value) {
-            if (value > 0 && value !== localValue.value?.width) {
+            if (!!value && value > 0 && value !== localValue.value?.width) {
               localValue.value.width = value;
             }
           },
         }),
-        updateColor(rgba) {
+        updateColor(rgba: {
+          r: number;
+          g: number;
+          b: number;
+          a?: number;
+        }): void {
           // Ensures alpha is not null, e.g. when the color is set by the user by pastying a color code.
           localValue.value.color = [rgba.r, rgba.g, rgba.b, rgba.a ?? 1];
         },
         cid,
       };
     },
-  };
+  });
 </script>