@vcmap/ui 5.0.0-rc.26 → 5.0.0-rc.27

package/src/components/style/VcsFillMenu.vue

@@ -0,0 +1,61 @@
+<template>
+  <MenuWrapper
+    v-bind="{ value, valueDefault, disabled }"
+    :value-fallback="{ color: [255, 255, 255, 1] }"
+    v-on="$listeners"
+    name="components.style.fill"
+  >
+    <template #preview>
+      <v-sheet :color="rgbaString" width="100%" height="100%" />
+    </template>
+    <template #content>
+      <VcsFillSelector :value="value" v-on="$listeners" />
+    </template>
+  </MenuWrapper>
+</template>
+
+<script>
+  import { computed } from 'vue';
+  import { VSheet } from 'vuetify/lib';
+  import { VcsFillSelector } from '@vcmap/ui';
+  import MenuWrapper from './MenuWrapper.vue';
+  import { useColorObject, rgbaObjectToString } from './composables.js';
+
+  /**
+   * @description A wrapper for the VcsFillSelector, that has a small color preview and a menu that pops up when clicking the preview, containing the fill 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: [255, 255, 255, 1] } is emitted.
+   * @vue-prop {import("ol/style/Fill").Options} [value] - The Fill Options
+   * @vue-prop {import("ol/style/Fill").Options} [valueDefault] - The default Fill Options
+   * @vue-prop {boolean} [disabled=false] - Disable the input
+   */
+  export default {
+    name: 'VcsFillMenu',
+    components: {
+      VSheet,
+      VcsFillSelector,
+      MenuWrapper,
+    },
+    props: {
+      value: {
+        type: Object,
+        default: undefined,
+      },
+      valueDefault: {
+        type: Object,
+        default: undefined,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const rgbaObject = useColorObject(() => props.value?.color);
+      return {
+        rgbaString: computed(() => rgbaObjectToString(rgbaObject.value)),
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/style/VcsFillSelector.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-sheet>
+    <v-color-picker
+      :value="rgbaObject"
+      @input="updateColor"
+      mode="rgba"
+      :hide-mode-switch="true"
+      :disabled="!value"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { VSheet, VColorPicker } from 'vuetify/lib';
+  import { useColorObject } from './composables.js';
+
+  /**
+   * @description Allows to model a JSON representation of ol/Fill vector style with a vuetify VColorPicker.
+   * @vue-prop {import("ol/style/Fill").Options} value - The Fill Options
+   */
+  export default {
+    name: 'VcsFillSelector',
+    components: {
+      VSheet,
+      VColorPicker,
+    },
+    props: {
+      value: {
+        type: Object,
+        default: undefined,
+      },
+    },
+    setup(props, { emit }) {
+      return {
+        rgbaObject: useColorObject(() => props.value?.color),
+        updateColor(rgba) {
+          const fill = {
+            color: [rgba.r, rgba.g, rgba.b, rgba.a],
+          };
+          emit('input', fill);
+        },
+      };
+    },
+  };
+</script>

package/src/components/style/VcsImageMenu.vue

@@ -0,0 +1,84 @@
+<template>
+  <MenuWrapper
+    v-bind="{ value, valueDefault }"
+    :value-fallback="{
+      radius: 10,
+      fill: { color: [255, 255, 255, 1] },
+      stroke: { color: [0, 0, 0, 1], width: 2 },
+    }"
+    v-on="$listeners"
+    name="components.style.image"
+  >
+    <template #preview>
+      <canvas ref="canvas" width="32" height="24" />
+    </template>
+    <template #content>
+      <VcsImageSelector
+        v-bind="{ value, valueDefault, iconOptions, extendedShapeSettings }"
+        v-on="$listeners"
+        class="pb-2"
+      />
+    </template>
+  </MenuWrapper>
+</template>
+
+<script>
+  import { onMounted, ref, watch } from 'vue';
+  import { VcsImageSelector } from '@vcmap/ui';
+  import MenuWrapper from './MenuWrapper.vue';
+  import { drawImageStyle } from './VcsImageSelector.vue';
+
+  /**
+   * @description A wrapper for the VcsImageSelector, that has a small shape/icon preview and a menu that pops up when clicking the preview, containing the image selector.
+   * @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/Icon").Options} iconOptions - The icon options too choose from. Scale and opacity are ignored.
+   * @vue-prop {boolean} [extendedShapeSettings=false] - If true, there are all the input fields needed to create arbitrary ol RegularShapes.
+   */
+  export default {
+    name: 'VcsImageMenu',
+    components: {
+      MenuWrapper,
+      VcsImageSelector,
+    },
+    props: {
+      value: {
+        type: Object,
+        default: undefined,
+      },
+      valueDefault: {
+        type: Object,
+        default: undefined,
+      },
+      iconOptions: {
+        type: Array,
+        default: undefined,
+      },
+      extendedShapeSettings: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const canvas = ref(null);
+
+      onMounted(() => {
+        drawImageStyle(canvas.value, props.value, true);
+        watch(
+          () => props.value,
+          () => {
+            // XXX Maybe add some sort of timeout funciton, so it draws only once when user stops using the slider
+            drawImageStyle(canvas.value, props.value, true);
+          },
+          { deep: true },
+        );
+      });
+
+      return {
+        canvas,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>