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

package/src/components/style/MenuWrapper.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-sheet>
+    <div class="d-flex align-center py-1">
+      <VcsCheckbox
+        :value="!!value"
+        @change="handleCheckbox"
+        :disabled="disabled"
+      />
+      <v-menu
+        :close-on-content-click="false"
+        :close-on-click="false"
+        v-model="isMenuOpen"
+        :absolute="true"
+        :disabled="!value || disabled"
+        min-width="300"
+        max-width="300"
+      >
+        <template #activator="{ on, attrs }">
+          <VcsTooltip :tooltip="name">
+            <template #activator="{ on: tooltipOn, attrs: tooltipAttrs }">
+              <v-card
+                rounded
+                height="24px"
+                width="32px"
+                v-bind="{ ...attrs, ...tooltipAttrs }"
+                v-on="{ ...on, ...tooltipOn }"
+                class="tiled-background"
+              >
+                <slot name="preview" />
+              </v-card>
+            </template>
+          </VcsTooltip>
+        </template>
+        <VcsFormSection
+          :heading="name"
+          :header-actions="[
+            {
+              name: 'reset',
+              title: 'components.style.reset',
+              icon: '$vcsReturn',
+              callback: () => {
+                reset();
+              },
+            },
+            {
+              name: 'close',
+              title: 'components.close',
+              icon: 'mdi-close-thick',
+              callback: () => {
+                close();
+              },
+            },
+          ]"
+        >
+          <slot name="content" />
+        </VcsFormSection>
+      </v-menu>
+      <span class="ml-2">{{ $t(name) }}</span>
+    </div>
+  </v-sheet>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  import { VSheet, VMenu, VCard } from 'vuetify/lib';
+  import { VcsFormSection, VcsTooltip, VcsCheckbox } from '@vcmap/ui';
+
+  /**
+   * @description A wrapper for style components, that provides:
+   * - a 32 x 24 px preview
+   * - a checkbox that emits null when unchecked and the value of the valueDefault prop when checked again. If the vauleDefault is undefined or null, the valueFallback will be emitted.
+   * - a menu that pops up when clicking the preview. It has also a reset button that emits the value of the valueDefault prop when clicked
+   * @vue-prop {Object} [value] - Style options that are modelled by the checkbox.
+   * @vue-prop {string} name - The name that is displayed in the header of the menu and in the tooltip of the preview.
+   * @vue-prop {Object} [valueDefault] - The default Options, that are applied when clicking reset or setting the checkbox from null to true.
+   * @vue-prop {Object} valueFallback - The fallback Options, in case the valueDefault is null or undefined. These are applied when the checkbox is checked again and the default value is null. The fallback value must not be null or undefined.
+   */
+  export default {
+    name: 'MenuWrapper',
+    components: {
+      VSheet,
+      VMenu,
+      VCard,
+      VcsFormSection,
+      VcsTooltip,
+      VcsCheckbox,
+    },
+    props: {
+      value: {
+        default: undefined,
+        required: false,
+        type: Object,
+      },
+      valueDefault: {
+        default: undefined,
+        type: Object,
+      },
+      valueFallback: {
+        required: true,
+        type: Object,
+      },
+      name: {
+        required: true,
+        type: String,
+      },
+      disabled: {
+        default: false,
+        type: Boolean,
+      },
+    },
+    setup(props, { emit }) {
+      const isMenuOpen = ref(false);
+
+      return {
+        isMenuOpen,
+        reset() {
+          emit('input', props.valueDefault);
+        },
+        close() {
+          isMenuOpen.value = false;
+        },
+        handleCheckbox(value) {
+          emit(
+            'input',
+            value ? props.valueDefault || props.valueFallback : null,
+          );
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  .tiled-background {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYlWNgYGCQwoKxgqGgcJA5h3yFAAs8BRWVSwooAAAAAElFTkSuQmCC)
+      repeat;
+  }
+</style>

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>