@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/src/components/style/VcsStrokeSelector.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-sheet>
+    <v-container class="px-1 py-0">
+      <v-row no-gutters>
+        <v-col>
+          <VcsLabel html-for="draw-stroke-width">
+            {{ $t('components.style.lineWidth') }}
+          </VcsLabel>
+        </v-col>
+        <v-col cols="3">
+          <VcsTextField
+            id="draw-stroke-width"
+            v-model.number="width"
+            type="number"
+            unit="px"
+            :disabled="!value"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-color-picker
+      :value="rgbaObject"
+      @input="updateColor"
+      mode="rgba"
+      :hide-mode-switch="true"
+      :disabled="!value"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { computed } from 'vue';
+  import { VSheet, VColorPicker, VContainer, VRow, VCol } from 'vuetify/lib';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import { useColorObject } from './composables.js';
+
+  /**
+   * @description Allows to model a JSON representation of ol/Stroke vector style with a vuetify VColorPicker.
+   * @vue-prop {import("ol/style/Stroke").Options} value - The Stroke Options
+   */
+  export default {
+    name: 'VcsFillSelector',
+    components: {
+      VSheet,
+      VColorPicker,
+      VContainer,
+      VRow,
+      VCol,
+      VcsLabel,
+      VcsTextField,
+    },
+    props: {
+      value: {
+        type: Object,
+        default: undefined,
+      },
+    },
+    setup(props, { emit }) {
+      return {
+        rgbaObject: useColorObject(() => props.value?.color),
+        width: computed({
+          get() {
+            return props.value?.width;
+          },
+          set(value) {
+            if (value > 0 && value !== props.value?.width) {
+              const stroke = {
+                width: value,
+              };
+              if (props.value?.color) {
+                stroke.color = [...props.value.color];
+              }
+              emit('input', stroke);
+            }
+          },
+        }),
+        updateColor(rgba) {
+          const stroke = {
+            color: [rgba.r, rgba.g, rgba.b, rgba.a],
+            width: props.value?.width,
+          };
+          emit('input', stroke);
+        },
+      };
+    },
+  };
+</script>

package/src/components/style/VcsTextMenu.vue

@@ -0,0 +1,81 @@
+<template>
+  <MenuWrapper
+    v-bind="{ value, valueDefault }"
+    :value-fallback="fallbackStyle"
+    v-on="$listeners"
+    name="components.style.text"
+  >
+    <template #preview>
+      <div v-if="value" class="d-flex justify-center align-center">
+        <span id="text-preview">T</span>
+      </div>
+    </template>
+    <template #content>
+      <VcsTextSelector v-bind="{ value, valueDefault }" v-on="$listeners" />
+    </template>
+  </MenuWrapper>
+</template>
+
+<script>
+  import { computed } from 'vue';
+  import VcsTextSelector from './VcsTextSelector.vue';
+  import MenuWrapper from './MenuWrapper.vue';
+  import { rgbaObjectToString, useColorObject } from './composables.js';
+
+  export const fallbackStyle = {
+    font: '10px Arial, Helvetica, sans-serif',
+    fill: { color: [0, 0, 0, 1] },
+    stroke: { color: [255, 255, 255, 1], width: 2 },
+    offsetX: 0,
+    offsetY: 0,
+  };
+
+  /**
+   * @description A wrapper for the VcsTextSelector, that has a small shape/icon preview and a menu that pops up when clicking the preview, containing the text style selector.
+   * @vue-prop {import("ol/style/Text").Options} value - The ol Text style options
+   * @vue-prop {import("ol/style/Text").Options} valueDefault - The default ol Text style options
+   */
+  export default {
+    name: 'VcsTextMenu',
+    components: {
+      MenuWrapper,
+      VcsTextSelector,
+    },
+    props: {
+      value: {
+        type: Object,
+        default: undefined,
+      },
+      valueDefault: {
+        type: Object,
+        default: undefined,
+      },
+    },
+    setup(props) {
+      const fillColorObject = useColorObject(() => props.value?.fill?.color);
+      const strokeColorObject = useColorObject(
+        () => props.value?.stroke?.color,
+      );
+
+      return {
+        strokeColor: computed(() =>
+          rgbaObjectToString(strokeColorObject.value),
+        ),
+        fillColor: computed(() => rgbaObjectToString(fillColorObject.value)),
+        fontStyle: computed(() => props.value?.font),
+        fallbackStyle,
+      };
+    },
+  };
+</script>
+
+<style>
+  #text-preview {
+    font: v-bind(fontStyle) !important;
+    font-size: 20px !important;
+    -webkit-text-stroke-color: v-bind(strokeColor);
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-fill-color: v-bind(fillColor);
+    line-height: 1;
+  }
+</style>

package/src/components/style/VcsTextSelector.vue

@@ -0,0 +1,269 @@
+<template>
+  <v-sheet>
+    <v-container class="px-1 py-0">
+      <v-row no-gutters>
+        <v-col>
+          <VcsTextField
+            v-model="selectedText"
+            :placeholder="$t('components.style.enterText')"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsSelect
+            :items="
+              Object.keys(fonts).map((text) => ({
+                text,
+                value: fonts[font],
+              }))
+            "
+            v-model="fontFamily"
+          >
+            <template #item="{ item }">
+              <span :style="`font-family: ${item.value} !important`">{{
+                item.text
+              }}</span>
+            </template>
+          </VcsSelect>
+        </v-col>
+        <v-col cols="2">
+          <VcsTextField
+            type="number"
+            unit="px"
+            v-model="fontSize"
+            :rules="[(v) => (!!v && v > 0) || 'components.validation.notValid']"
+          />
+        </v-col>
+      </v-row>
+      <div class="px-1 py-3">
+        <VcsButton
+          :active="isBold"
+          @click="isBold = !isBold"
+          class="pr-1"
+          tooltip="components.style.bold"
+        >
+          {{ $t('components.style.bold') }}
+        </VcsButton>
+        <VcsButton
+          :active="isItalic"
+          @click="isItalic = !isItalic"
+          class="px-2"
+          tooltip="components.style.italic"
+        >
+          {{ $t('components.style.italic') }}
+        </VcsButton>
+      </div>
+      <VcsStrokeMenu
+        v-model="selectedStroke"
+        :value-default="valueDefault.stroke"
+        :disabled="!value"
+      />
+      <VcsFillMenu
+        v-model="selectedFill"
+        :value-default="valueDefault.fill"
+        :disabled="!value"
+      />
+      <v-row no-gutters>
+        <v-col cols="6">
+          <VcsLabel>{{ $t('components.style.offset') }}</VcsLabel>
+        </v-col>
+        <v-col cols="3">
+          <VcsTextField
+            type="number"
+            v-model.number="selectedOffsetX"
+            tooltip-position="top"
+            prefix="X"
+            unit="px"
+            tooltip="components.style.offsetX"
+          />
+        </v-col>
+        <v-col cols="3">
+          <VcsTextField
+            type="number"
+            v-model.number="selectedOffsetY"
+            tooltip-position="top"
+            prefix="Y"
+            unit="px"
+            tooltip="components.style.offsetY"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-sheet>
+</template>
+
+<script>
+  import { computed } from 'vue';
+  import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsSelect from '../form-inputs-controls/VcsSelect.vue';
+  import VcsButton from '../buttons/VcsButton.vue';
+  import VcsFillMenu from './VcsFillMenu.vue';
+  import VcsStrokeMenu from './VcsStrokeMenu.vue';
+  import { useSelectedKey } from './composables.js';
+
+  export const fonts = {
+    Georgia: 'Georgia, serif',
+    Palatino: '"Palatino Linotype", "Book Antiqua", Palatino, serif',
+    'Times New Roman': '"Times New Roman", Times, serif',
+    Arial: 'Arial, Helvetica, sans-serif',
+    Impact: 'Impact, Charcoal, sans-serif',
+    'Comic Sans': '"Comic Sans MS", cursive, sans-serif',
+    Trebuchet: '"Trebuchet MS", Helvetica, sans-serif',
+    Verdana: 'Verdana, Geneva, sans-serif',
+    Courier: '"Courier New", Courier, monospace',
+    Lucida: '"Lucida Console", Monaco, monospace',
+  };
+
+  /**
+   * @description Allows to model a JSON representation of ol/style/Text style. It makes use of VcsStrokeMenu and VcsFillMenu.
+   * @vue-prop {import("ol/style/Text").Options} value - The ol Text style options
+   * @vue-prop {import("ol/style/Text").Options} valueDefault - The default ol Text style options
+   */
+  export default {
+    name: 'VcsTextSelector',
+    components: {
+      VSheet,
+      VContainer,
+      VRow,
+      VCol,
+      VcsSelect,
+      VcsTextField,
+      VcsButton,
+      VcsStrokeMenu,
+      VcsFillMenu,
+      VcsLabel,
+    },
+    props: {
+      value: {
+        type: Object,
+        default: undefined,
+      },
+      valueDefault: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props, { emit }) {
+      const font = computed({
+        get() {
+          let fontStyle = {
+            // fontStyle: 'normal',
+            // fontWeight: 'normal',
+          };
+          if (props.value) {
+            const el = document.createElement('span');
+            el.setAttribute('style', `font: ${props.value.font}`);
+            fontStyle = el.style;
+            el.remove();
+          }
+          return fontStyle;
+        },
+      });
+
+      function emitNewFont(key, value) {
+        font.value[key] = value;
+        const newModelObject = JSON.parse(JSON.stringify(props.value));
+        const fontPropertyArray = [
+          font.value.fontStyle,
+          font.value.fontWeight,
+          font.value.fontSize,
+          font.value.fontFamily,
+        ];
+        emit(
+          'input',
+          Object.assign(newModelObject, {
+            font: fontPropertyArray
+              .filter((prop) => prop && prop !== 'normal')
+              .join(' '),
+          }),
+        );
+      }
+
+      const fontFamily = computed({
+        get() {
+          return font.value.fontFamily;
+        },
+        set(newFamily) {
+          emitNewFont('fontFamily', newFamily);
+        },
+      });
+
+      const fontSize = computed({
+        get() {
+          return parseInt(font.value.fontSize, 10);
+        },
+        set(newSize) {
+          if (!newSize || newSize < 1) {
+            return;
+          }
+          emitNewFont('fontSize', `${newSize}px`);
+        },
+      });
+
+      const isBold = computed({
+        get() {
+          return font.value.fontWeight === 'bold';
+        },
+        set(newValue) {
+          emitNewFont('fontWeight', newValue ? 'bold' : 'normal');
+        },
+      });
+      const isItalic = computed({
+        get() {
+          return font.value.fontStyle === 'italic';
+        },
+        set(newValue) {
+          emitNewFont('fontStyle', newValue ? 'italic' : 'normal');
+        },
+      });
+
+      const selectedFill = useSelectedKey(
+        () => props.value,
+        'fill',
+        props.valueDefault.fill,
+        emit,
+      );
+      const selectedStroke = useSelectedKey(
+        () => props.value,
+        'stroke',
+        props.valueDefault.stroke,
+        emit,
+      );
+      const selectedOffsetX = useSelectedKey(
+        () => props.value,
+        'offsetX',
+        props.valueDefault.offsetX,
+        emit,
+      );
+      const selectedOffsetY = useSelectedKey(
+        () => props.value,
+        'offsetY',
+        props.valueDefault.offsetY,
+        emit,
+      );
+      const selectedText = useSelectedKey(
+        () => props.value,
+        'text',
+        props.valueDefault.text,
+        emit,
+      );
+      return {
+        fonts,
+        font,
+        fontFamily,
+        fontSize,
+        selectedFill,
+        selectedStroke,
+        emitNewFont,
+        isBold,
+        isItalic,
+        selectedOffsetX,
+        selectedOffsetY,
+        selectedText,
+      };
+    },
+  };
+</script>

package/src/components/style/VcsVectorStyleComponent.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-sheet>
+    <component
+      v-for="key in styleComponents"
+      :key="key"
+      :is="componentMap[key]"
+      :value-default="valueDefault[key]"
+      v-model="selectedKeys[key].value"
+      @input="(v) => $emit(`update:${key}`, v)"
+      v-bind="specificProps[key]"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { computed } from 'vue';
+  import { VSheet } from 'vuetify/lib';
+  import VcsFillMenu from './VcsFillMenu.vue';
+  import VcsImageMenu from './VcsImageMenu.vue';
+  import VcsStrokeMenu from './VcsStrokeMenu.vue';
+  import VcsTextMenu from './VcsTextMenu.vue';
+  import { useSelectedKey } from './composables.js';
+
+  /**
+   * @enum {string}
+   * @property {string} FILL
+   * @property {string} STROKE
+   * @property {string} IMAGE
+   * @property {string} TEXT
+   */
+  export const VectorStyleMenus = {
+    FILL: 'fill',
+    STROKE: 'stroke',
+    IMAGE: 'image',
+    TEXT: 'text',
+  };
+
+  const componentMap = {
+    fill: 'VcsFillMenu',
+    stroke: 'VcsStrokeMenu',
+    image: 'VcsImageMenu',
+    text: 'VcsTextMenu',
+  };
+
+  /**
+   * @description Wraps the style component into a single component so whole @vcmap/core/VectorStyleItemOptions can be modelled.
+   * @vue-prop {import("@vcmap/core").VectorStyleItemOptions} value - The VectorStyleItemOptions that should be modelled.
+   * @vue-prop {import("@vcmap/core").VectorStyleItemOptions} valueDefault - The default VectorStyleItemOptions.
+   * @vue-prop {VectorStyleMenus[]} styleComponents - The style component that should be rendered.
+   * @vue-prop {boolean} [extendedShapeSettings=false] - If true, there are all the input fields needed to create arbitrary ol RegularShapes.
+   * @vue-prop {Array<import("ol/style/Icon").Options>} [iconOptions] - The icon options in the image component too choose from. Scale and opacity are ignored. The defaults are 3 different icon types with 4 different colors.
+   */
+  export default {
+    name: 'VcsVectorStyleComponent',
+    components: {
+      VcsFillMenu,
+      VcsImageMenu,
+      VcsStrokeMenu,
+      VcsTextMenu,
+      VSheet,
+    },
+    props: {
+      value: {
+        type: Object,
+        default: undefined,
+      },
+      valueDefault: {
+        type: Object,
+        default: undefined,
+      },
+      styleComponents: {
+        type: Array,
+        default: () => Object.values(VectorStyleMenus),
+        validator: (array) =>
+          array.every((component) =>
+            Object.values(VectorStyleMenus).includes(component),
+          ),
+      },
+      extendedShapeSettings: {
+        type: Boolean,
+        default: false,
+      },
+      iconOptions: {
+        type: Array,
+        default: undefined,
+      },
+    },
+    setup(props, { emit }) {
+      const selectedKeys = computed(() =>
+        // convert to Object with style prop names as keys and computed props as value to allow v-model.
+        props.styleComponents.reduce((acc, key) => {
+          acc[key] = useSelectedKey(
+            () => props.value,
+            key,
+            props.valueDefault[key],
+            emit,
+          );
+          return acc;
+        }, {}),
+      );
+      const specificProps = computed(() => ({
+        [VectorStyleMenus.IMAGE]: {
+          extendedShapeSettings: props.extendedShapeSettings,
+          iconOptions: props.iconOptions,
+        },
+      }));
+      return {
+        selectedKeys,
+        specificProps,
+        componentMap,
+      };
+    },
+  };
+</script>

package/src/components/style/composables.js

@@ -0,0 +1,84 @@
+import { computed } from 'vue';
+
+/**
+ * Computes a color object from a color array.
+ * @param {function():Array<number>} colorGetter Getter that returns an array containing rgba values.
+ * @returns {{r: number, g: number, b: number, a: number}} An object with rgba keys.
+ */
+export function useColorObject(colorGetter) {
+  return computed(() => {
+    const rgbaArray = colorGetter();
+    if (rgbaArray) {
+      return {
+        r: rgbaArray[0],
+        g: rgbaArray[1],
+        b: rgbaArray[2],
+        a: rgbaArray[3],
+      };
+    } else {
+      return { r: 255, g: 255, b: 255, a: 0 };
+    }
+  });
+}
+
+/**
+ * Checks if a value is in a value range.
+ * @param {number} value Value checked to see if it is in the allowed range.
+ * @param {number[]} range Min and max value
+ * @returns {boolean} If value is between min and max.
+ */
+export function between(value, range) {
+  return value >= range[0] && value <= range[1];
+}
+
+/**
+ * Creates a computed property with a getter and a setter for a specific object property/key of the value prop. If the value prop is an object, this composable allows to pass this computed to an v-model of a sub component. The getter returns the value of the key or, if it is undefined, a default value. The setter merges the passed value with the other object properties of the value prop and emits the whole object as a input event.
+ * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {string} key The key of the modelObject that should be return on get and updated on set.
+ * @param {*} defaultValue Default value for the key of the modelObject.
+ * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
+ * @param {Array<number>} [range] The allowed range of numbers.
+ * @param {Array<number>} [isRequired] If value is required.
+ * @returns {*} The value to the key param if the getter is called.
+ */
+export function useSelectedKey(
+  modelObject,
+  key,
+  defaultValue,
+  emit,
+  range,
+  isRequired,
+) {
+  return computed({
+    get() {
+      if (modelObject()?.[key] === undefined && isRequired) {
+        return defaultValue;
+      }
+      return modelObject()?.[key];
+    },
+    set(value) {
+      if (
+        ((value === null || value === undefined) && isRequired) ||
+        (value !== null &&
+          value !== undefined &&
+          range &&
+          !between(value, range))
+      ) {
+        return;
+      }
+      const newModelObject = JSON.parse(JSON.stringify(modelObject()));
+      // is needed to get e.g. from square shape to x by setting radius2 from 0 to undefined
+      const newValue = value === '' ? undefined : value;
+      emit('input', Object.assign(newModelObject, { [key]: newValue }));
+    },
+  });
+}
+
+/**
+ * Creates a string from a color object.
+ * @param {{r: number, g: number, b: number, a: number}} rgbaObject An object with rgba keys.
+ * @returns {string} A string looking like this: rgba(0,0,0,0).
+ */
+export function rgbaObjectToString(rgbaObject) {
+  return `rgba(${Object.values(rgbaObject).toString()})`;
+}