@kalisio/kdk 2.4.1 → 2.5.2

package/map/client/components/styles/KStyleManager.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="column">
+    <div id="style-manager-header"
+      v-if="title || (toolbar && toolbar.length)"
+      class="q-px-md q-mt-md"
+    >
+      <div v-if="title" class="ellipsis text-h6">
+        {{ $tie(title) }}
+      </div>
+      <KPanel
+        id="style-manager-toolbar"
+        :content="toolbar"
+      />
+      <QSeparator inset />
+    </div>
+    <div id="style-manager-content">
+      <q-tab-panels v-model="viewMode" animated>
+        <q-tab-panel name="list">
+          <KGrid
+            service="styles"
+            :append-items="true"
+            :base-query="baseQuery"
+            :filter-query="filterQuery"
+            class="fit"
+            :renderer="{
+              component: 'styles/KStylePreviewItem',
+              options: {
+                avatar: false
+              },
+              actions: [
+                {
+                  id: 'apply-to-layer',
+                  component: 'menu/KMenu',
+                  icon: 'las la-layer-group',
+                  tooltip: 'KStyleManager.APPLY_TO_LAYER',
+                  actionRenderer: 'item',
+                  content: layerMenuContent
+                },
+                {
+                  id: 'apply-to-selection',
+                  icon: 'las la-object-group',
+                  tooltip: 'KStyleManager.APPLY_TO_SELECTION',
+                  handler: applyToSelection
+                },
+                {
+                  id: 'edit-style',
+                  icon: 'las la-edit',
+                  tooltip: 'KStyleManager.EDIT',
+                  handler: editStyle
+                },
+                {
+                  id: 'delete-style',
+                  icon: 'las la-trash',
+                  tooltip: 'KStyleManager.DELETE',
+                  handler: { name: 'removeItem', params: ['confirm'] }
+                },
+              ],
+              dense: true,
+              class: 'col-12'
+            }"
+          />
+        </q-tab-panel>
+        <q-tab-panel name="editor">
+          <div class="full-width column">
+            <KStyleEditor
+              ref="styleEditor"
+              :style="style"
+              @canceled="onCanceled"
+              @applied="onApplied"
+              class="col"
+            />
+          </div>
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import sift from 'sift'
+import { computed, ref } from 'vue'
+import { Filter, Sorter } from '@kalisio/kdk/core.client'
+import { useCurrentActivity } from '../../composables/activity.js'
+import { isLayerStyleEditable, editLayerStyle, updateLayerWithFiltersStyle } from '../../utils/utils.layers.js'
+import { editFeaturesStyle } from '../../utils/utils.features.js'
+import KGrid from '../../../../core/client/components/collection/KGrid.vue'
+import KStyleEditor from './KStyleEditor.vue'
+
+// Props
+defineProps({
+  title: {
+    type: String,
+    default: null
+  }
+})
+
+// Data
+const { getSelectedFeaturesByLayer, CurrentActivity } = useCurrentActivity()
+const styleEditor = ref(null)
+const style = ref(null)
+const viewMode = ref('list')
+
+// Computed
+const baseQuery = computed(() => {
+  return Object.assign({}, Sorter.get().query)
+})
+const filterQuery = computed(() => {
+  return Object.assign({}, Filter.get().query)
+})
+const toolbar = computed(() => {
+  if (viewMode.value === 'editor') return []
+  return [
+    {
+      component: 'collection/KSorter',
+      id: 'style-manager-sorter-options',
+      tooltip: 'KStyleManager.SORT',
+      options: [
+        { icon: 'las la-sort-alpha-down', value: { field: 'name', order: 1 }, default: true },
+        { icon: 'las la-sort-alpha-up', value: { field: 'name', order: -1 } }
+      ]
+    },
+    { component: 'collection/KFilter', style: 'max-width: 200px;' },
+    { component: 'QSpace' },
+    {
+      id: 'add-style',
+      icon: 'las la-plus-circle',
+      tooltip: 'KStyleManager.CREATE_STYLE',
+      size: '1rem',
+      handler: () => { editStyle() }
+    }
+  ]
+})
+const layerMenuContent = computed(() => {
+  const visibleLayers = CurrentActivity.value.getLayers().filter(sift({ isVisible: true, scope: 'user' }))
+  return _.map(visibleLayers, layer => {
+    return {
+      id: 'apply-style-to-layer',
+      label: layer.name,
+      handler: (styleToApply) => applyToLayer(layer, styleToApply.item)
+    }
+  })
+})
+
+// Functions
+async function applyToLayer (layer, styleToApply) {
+  await editLayerStyle(layer, styleToApply)
+  if (CurrentActivity.value.isInMemoryLayer(layer)) {
+    await CurrentActivity.value.resetLayer(layer)
+  }
+}
+function applyToSelection (styleToApply) {
+  const type = { Point: 'point', LineString: 'line', Polygon: 'polygon' }
+  _.forEach(getSelectedFeaturesByLayer(), layer => {
+    if (isLayerStyleEditable(layer.layer)) {
+      _.forEach(layer.features, f => {
+        _.set(f, 'style', _.get(styleToApply, ['item', _.get(type, f.geometry.type, 'point')], null))
+      })
+      if (CurrentActivity.value.isInMemoryLayer(layer.layer)) {
+        CurrentActivity.value.resetLayer(layer.layer)
+      } else {
+        editFeaturesStyle({ type: 'FeatureCollection', features: layer.features }, layer.layer)
+      }
+    }
+  })
+}
+function editStyle (styleToEdit) {
+  viewMode.value = 'editor'
+  style.value = _.get(styleToEdit, 'item', null)
+}
+function onApplied (style) {
+  viewMode.value = 'list'
+
+  // Update layers with filters that use this style
+  const layers = _.filter(CurrentActivity.value?.getLayers ? CurrentActivity.value.getLayers() : [], layer =>
+    _.get(layer, 'scope') === 'user' &&
+    _.some(_.get(layer, 'filters', []), filter => _.get(filter, 'style') === style._id))
+  _.forEach(layers, layer => { updateLayerWithFiltersStyle(layer) })
+}
+function onCanceled () {
+  viewMode.value = 'list'
+}
+</script>

package/map/client/components/styles/KStylePreview.vue

@@ -0,0 +1,64 @@
+<template>
+  <div v-if="style">
+    <KShape :options="shapeOptions" />
+    <KStyleTip
+      :style="style"
+      :type="type"
+    />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import KShape from '../../../../core/client/components/media/KShape.vue'
+import KStyleTip from './KStyleTip.vue'
+
+// Props
+const props = defineProps({
+  style: {
+    type: Object,
+    default: () => null
+  },
+  type: {
+    type: String,
+    default: 'point',
+    validator: (value) => {
+      return ['point', 'line', 'polygon'].includes(value)
+    }
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Computed
+const shapeOptions = computed(() => {
+  const size = props.dense ? ['20px', '20px'] : ['24px', '24px']
+  // Point
+  if (props.type === 'point') {
+    let stroke = _.get(props.style, 'stroke')
+    if (stroke) {
+      let width = _.get(stroke, 'width', 1)
+      if (width > 1) width = width / 4
+      stroke = { stroke: { width } }
+    }
+    return _.merge({}, props.style, { size }, stroke)
+  }
+  // Line
+  if (props.type === 'line') {
+    let width = _.get(props.style, 'width', 1)
+    if (width > 1) width = width / 4
+    return { shape: 'polyline', stroke: _.merge({}, props.style, { width }) }
+  }
+  // Polygon
+  let stroke = _.get(props.style, 'stroke')
+  if (stroke) {
+    let width = _.get(stroke, 'width', 1)
+    if (width > 1) width = width / 4
+    stroke = { stroke: { width } }
+  }
+  return _.merge({}, props.style, { shape: 'polygon' }, { size }, stroke)
+})
+</script>

package/map/client/components/styles/KStylePreviewItem.vue

@@ -0,0 +1,68 @@
+<template>
+  <KItem
+    v-bind="$props"
+    :actions="itemActions"
+    :dense="dense"
+  >
+    <template v-slot:item-content>
+      <div
+        class="row items-center no-wrap"
+        :class="{ 'q-gutter-x-sm': dense, 'q-gutter-x-md': !dense }"
+      >
+        <div class="text-subtitle2">
+          {{ name }}
+        </div>
+        <div
+          class="row item-baseline no-wrap"
+          :class="{ 'q-gutter-x-sm': dense, 'q-gutter-x-md': !dense }"
+        >
+          <KStylePreview :style="pointStyle" type="point" />
+          <KStylePreview :style="lineStyle" type="line" />
+          <KStylePreview :style="polygonStyle" type="polygon" />
+        </div>
+      </div>
+    </template>
+  </KItem>
+</template>
+
+<script>
+import { mixins as kdkCoreMixins } from '../../../../core/client'
+import KItem from '../../../../core/client/components/collection/KItem.vue'
+import KStylePreview from './KStylePreview.vue'
+
+export default {
+  mixins: [kdkCoreMixins.baseItem],
+  components: {
+    KItem,
+    KStylePreview
+  },
+  props: {
+    dense: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    name () {
+      return this.item.name
+    },
+    pointStyle () {
+      return this.item.point
+    },
+    lineStyle () {
+      return this.item.line
+    },
+    polygonStyle () {
+      return this.item.polygon
+    }
+  },
+  methods: {
+    hasUserScope () {
+      return this.item.scope === 'user'
+    },
+    hasSystemScope () {
+      return this.item.scope === 'system'
+    }
+  }
+}
+</script>

package/map/client/components/styles/KStylePropertiesGroup.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="full-width column">
+    <div class="full-width row items-center no-wrap">
+      <q-toggle
+        v-model="isActive"
+        :label="$t(label)"
+        size="sm"
+        :dense="dense"
+        @update:model-value="onToggled"
+      />
+      <div class="full-width q-pa-md">
+        <q-separator class="col-grow" />
+      </div>
+    </div>
+    <q-list v-if="isActive">
+      <template v-for="property in properties" :key="property.key">
+        <KStyleProperty
+          v-bind="property"
+          v-model="values[property.name]"
+          :dense="dense"
+          @update:model-value="onPropertyUpdated"
+        />
+      </template>
+    </q-list>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, watch } from 'vue'
+import KStyleProperty from './KStyleProperty.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => null
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  properties: {
+    type: Array,
+    required: true
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Data
+const isActive = ref(null)
+const values = ref(null)
+
+// Watch
+watch(() => props.modelValue, (value) => {
+  values.value = _.clone(value)
+  isActive.value = !_.isEmpty(value)
+}, { immediate: true })
+
+// Function
+function onToggled (value) {
+  if (value) {
+    values.value = {}
+    for (const property of props.properties) values.value[property.name] = property.default
+  } else values.value = null
+  emit('update:modelValue', values.value)
+}
+function onPropertyUpdated () {
+  emit('update:modelValue', values.value)
+}
+</script>

package/map/client/components/styles/KStyleProperty.vue

@@ -0,0 +1,136 @@
+<template>
+  <q-item :dense="dense">
+    <q-item-section class="col-auto">
+      <q-icon :name="icon" :size="dense ? 'xs' : 'sm'"/>
+    </q-item-section>
+    <q-item-section>
+      <q-item-label class="ellipsis">{{ $t(props.label) }}</q-item-label>
+    </q-item-section>
+    <q-item-section style="max-width: 50px;">
+      <!-- size/opacity type -->
+      <q-btn
+        v-if="['size', 'opacity'].includes(props.type)"
+        :label="value"
+        size="0.8rem"
+        outline
+        dense
+      >
+        <q-popup-proxy cover>
+          <q-slider id="style-property-slider"
+            v-model="value"
+            :min="min"
+            :max="max"
+            :step="step"
+            label
+            label-always
+            dense
+            :label-value="value + (props.unit || '')"
+            :marker-labels="[{ value: min, label: min }, { value: max, label: max }]"
+            style="min-height: 60px; width: 300px;"
+            class="q-px-md q-pt-xl q-pb-sm"
+          />
+        </q-popup-proxy>
+      </q-btn>
+      <!-- color type -->
+      <div v-else-if="props.type === 'color'"
+        class="row justify-center"
+      >
+        <KColorPicker
+          v-model="value"
+          defaultView="palette"
+          size="xs"
+        />
+      </div>
+      <!-- shape type -->
+      <div v-else-if="props.type === 'shape'" class="row justify-center">
+        <KShapePicker v-model="value" />
+      </div>
+      <!-- icon type -->
+      <div v-else-if="type === 'icon'" class="row justify-center">
+        <KIconPicker v-model="value" />
+      </div>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, watch, computed } from 'vue'
+import { KColorPicker, KIconPicker, KShapePicker } from '../../../../core/client/components/input/index.js'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Object],
+    default: null
+  },
+  default: {
+    type: [String, Number, Object],
+    default: null
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'size',
+    validator: (value) => ['size', 'color', 'shape', 'icon', 'opacity'].includes(value)
+  },
+  min: {
+    type: Number,
+    default: 8
+  },
+  max: {
+    type: Number,
+    default: 24
+  },
+  unit: {
+    type: String,
+    default: null
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Data
+const value = ref(props.modelValue)
+
+// Computed
+const min = computed(() => {
+  return props.type === 'opacity' ? 0 : parseFloat(props.min)
+})
+const max = computed(() => {
+  return props.type === 'opacity' ? 1 : parseFloat(props.max)
+})
+const step = computed(() => {
+  return props.type === 'opacity' ? 0.01 : 1
+})
+const icon = computed(() => {
+  switch (props.type) {
+    case 'size':
+      return 'las la-ruler'
+    case 'color':
+      return 'las la-palette'
+    case 'shape':
+      return 'las la-shapes'
+    case 'icon':
+      return 'las la-icons'
+    case 'opacity':
+      return 'las la-adjust'
+  }
+})
+
+// Hooks
+watch(value, newValue => {
+  emit('update:modelValue', newValue)
+})
+
+// Immediate
+if (_.isNil(value.value)) value.value = props.default
+</script>

package/map/client/components/styles/KStyleTip.vue

@@ -0,0 +1,118 @@
+<template>
+  <KLocationTip
+    v-model="showTip"
+    :location="location"
+    :target="target"
+    :anchor="anchor"
+    :self="self"
+    :offset="offset"
+    :delay="delay"
+    :no-parent-event="noParentEvent"
+    @update:model-value="onUpdated"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, watch } from 'vue'
+import KLocationTip from '../location/KLocationTip.vue'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: null
+  },
+  style: {
+    type: Object,
+    default: () => null
+  },
+  type: {
+    type: String,
+    default: 'point',
+    validator: (value) => {
+      return ['point', 'line', 'polygon'].includes(value)
+    }
+  },
+  target: {
+    type: [Boolean, String],
+    default: true
+  },
+  anchor: {
+    type: String,
+    default: 'bottom middle'
+  },
+  self: {
+    type: String,
+    default: 'top middle'
+  },
+  offset: {
+    type: Array,
+    default: [14, 14]
+  },
+  delay: {
+    type: Number,
+    default: 500
+  },
+  noParentEvent: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Data
+const showTip = ref(null)
+const location = ref(null)
+
+// Function
+function refresh () {
+  if (_.isNil(props.style)) return null
+  if (props.type === 'point') {
+    return {
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [1.5, 43.2]
+      },
+      properties: {},
+      style: props.style
+    }
+  }
+  if (props.type === 'line') {
+    return {
+      type: 'Feature',
+      geometry: {
+        type: 'LineString',
+        coordinates: [[0, 43], [0.5, 43.5], [1, 43], [1.5, 43.5]]
+      },
+      properties: {},
+      style: props.style
+    }
+  }
+  return {
+    type: 'Feature',
+    geometry: {
+      type: 'Polygon',
+      coordinates: [[[0.4, 42.6], [0, 43], [0.2, 43.3], [0.75, 43.5], [1.2, 43.3], [1.5, 43], [1, 42.5]]]
+    },
+    properties: {},
+    style: props.style
+  }
+}
+
+// Watch
+watch(() => props.modelValue, (value) => {
+  showTip.value = value
+}, { immediate: true })
+watch(() => props.style, (value) => {
+  location.value = refresh()
+}, { immediate: true, deep: true })
+
+// Functions
+function onUpdated (value) {
+  emit('update:modelValue', value)
+}
+</script>

package/map/client/components/tools/KGeolocateTool.vue

@@ -1,9 +1,10 @@
 <template>
   <KAction
+    v-if="CurrentActivity"
     id="locate-user"
     icon="las la-crosshairs"
-    tooltip="mixins.activity.SHOW_USER_LOCATION"
-    :toggle="{ tooltip: 'mixins.activity.HIDE_USER_LOCATION' }"
+    tooltip="layout.SHOW_USER_LOCATION"
+    :toggle="{ tooltip: 'layout.HIDE_USER_LOCATION' }"
     :toggled="isToggled"
     :disabled="!isEnabled "
     @toggled="onToggled"