Merge pull request #147 from Geoportail-Luxembourg/GSLUX-733-point-sy…

…mbole

GSLUX-733: Symbols

.env

@@ -3,6 +3,10 @@ VITE_USE_PROXYURL=true
 VITE_PROXYURL_WMS="https://map.geoportail.lu/ogcproxywms"
 VITE_PROXYURL_REMOTE="https://map.geoportail.lu/httpsproxy"
 
+# Paths for symbols
+VITE_SYMBOL_ICONS_URL="https://map.geoportail.lu/mymaps"
+VITE_SYMBOLS_URL="https://map.geoportail.lu/mymaps/symbols"
+
 # Urls for vectortiles
 VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu"
 

.env.development

@@ -3,6 +3,10 @@ VITE_USE_PROXYURL=true
 VITE_PROXYURL_WMS="https://map.geoportail.lu/ogcproxywms"
 VITE_PROXYURL_REMOTE="https://map.geoportail.lu/httpsproxy"
 
+# Paths for symbols
+VITE_SYMBOL_ICONS_URL="https://map.geoportail.lu/mymaps"
+VITE_SYMBOLS_URL="https://map.geoportail.lu/mymaps/symbols"
+
 # Urls for vectortiles
 VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu"
 

.env.e2e

@@ -3,6 +3,10 @@ VITE_USE_PROXYURL=true
 VITE_PROXYURL_WMS="https://map.geoportail.lu/ogcproxywms"
 VITE_PROXYURL_REMOTE="https://map.geoportail.lu/httpsproxy"
 
+# Paths for symbols
+VITE_SYMBOL_ICONS_URL="https://map.geoportail.lu/mymaps"
+VITE_SYMBOLS_URL="https://map.geoportail.lu/mymaps/symbols"
+
 # Urls for vectortiles
 VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu"
 

.env.staging

@@ -3,6 +3,10 @@ VITE_USE_PROXYURL=true
 VITE_PROXYURL_WMS="https://map.geoportail.lu/ogcproxywms"
 VITE_PROXYURL_REMOTE="https://map.geoportail.lu/httpsproxy"
 
+# Paths for symbols
+VITE_SYMBOL_ICONS_URL="https://map.geoportail.lu/mymaps"
+VITE_SYMBOLS_URL="https://map.geoportail.lu/mymaps/symbols"
+
 # Urls for vectortiles
 VITE_VECTORTILES_URL="https://vectortiles-staging.geoportail.lu"
 

.eslintrc.cjs

@@ -27,6 +27,7 @@ module.exports = {
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': ['error'],
     'import/no-unresolved': 'off',
+    'no-console': 'error',
   },
   parserOptions: {
     ecmaVersion: 'latest',

cypress/e2e/draw/draw-feat-point.cy.ts

@@ -8,6 +8,17 @@ function testFeatItemMeasurements() {
   cy.get('*[data-cy="featItemProfile"]').should('not.exist')
 }
 
+function testFeatStyleEditionTabContent() {
+  cy.get('*[data-cy="featStyleColor"]').should('exist')
+  cy.get('*[data-cy="featStyleSize"]').should('exist')
+  cy.get('*[data-cy="featStyleAngle"]').should('not.exist')
+  cy.get('*[data-cy="featStyleSymbol"]').should('exist')
+  cy.get('*[data-cy="featStyleLineStyle"]').should('not.exist')
+  cy.get('*[data-cy="featStyleLineWidth"]').should('not.exist')
+  cy.get('*[data-cy="featStyleOpacity"]').should('not.exist')
+  cy.get('*[data-cy="featStyleOrientation"]').should('not.exist')
+}
+
 describe('Draw "Point"', () => {
   beforeEach(() => {
     cy.visit('/')
@@ -49,4 +60,50 @@ describe('Draw "Point"', () => {
       cy.get('@menuItem').eq(2).should('contain.text', 'Exporter un Shapefile')
     })
   })
+
+  describe('When editing feature style', () => {
+    beforeEach(() => {
+      cy.get('*[data-cy="featItemActionStyle"]').click()
+    })
+
+    it('displays the style edition tab for "Point"', () => {
+      testFeatStyleEditionTabContent()
+    })
+
+    describe('When editing symbol', () => {
+      beforeEach(() => {
+        cy.get('[data-cy="featStyleSymbolEdit"]').click()
+      })
+
+      it('displays the symbol edition tab', () => {
+        cy.get('[data-cy="featStyleColor"]').should('exist')
+        cy.get('[data-cy="featStyleSymbol"]').should('have.length', 4)
+      })
+
+      describe('When browsing public symbols', () => {
+        beforeEach(() => {
+          cy.get('[data-cy="featStyleSymbolTab"]').eq(1).click()
+        })
+
+        it('displays the public symbol list', () => {
+          cy.get('[data-cy="featStyleSymbolFilterList"]').should('exist')
+          cy.get('[data-cy="featStyleSymbolIcon"]').should('have.length', 81)
+        })
+
+        describe('When filtering public symbols', () => {
+          it('displays the public symbol list', () => {
+            cy.get('[data-cy="featStyleSymbolFilterList"]').type('pin1')
+            cy.get('[data-cy="featStyleSymbolIcon"]').should('have.length', 2)
+          })
+        })
+      })
+
+      describe('When clicking close button', () => {
+        it('returns to style edition tab', () => {
+          cy.get('[data-cy="featStyleNavBack"]').click()
+          testFeatStyleEditionTabContent()
+        })
+      })
+    })
+  })
 })

src/assets/main.css

@@ -387,6 +387,14 @@
     @apply bg-white border border-black p-1;
   }
 
+  .lux-tab {
+    @apply text-secondary text-2xl pt-2 pb-1 px-3 mr-2 hover:text-white hover:bg-primary cursor-pointer text-center uppercase bg-tertiary;
+  }
+
+  .lux-tab.active {
+    @apply text-white bg-primary cursor-default;
+  }
+
   .form-control {
     border: 1px solid var(--color-gray);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

src/components/common/range-input/range-input.spec.ts

@@ -0,0 +1,64 @@
+import { mount } from '@vue/test-utils'
+import RangeInput from './range-input.vue'
+
+describe('RangeInput', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(RangeInput)
+    const rangeInput = wrapper.find('input[type="range"]')
+    const numberInput = wrapper.find('input[type="number"]')
+
+    expect(rangeInput.element.value).toBe('0')
+    expect(rangeInput.element.min).toBe('0')
+    expect(rangeInput.element.max).toBe('10')
+    expect(rangeInput.element.step).toBe('1')
+
+    expect(numberInput.element.value).toBe('0')
+    expect(numberInput.element.min).toBe('0')
+    expect(numberInput.element.max).toBe('10')
+    expect(numberInput.element.step).toBe('1')
+  })
+
+  it('renders with passed props', () => {
+    const wrapper = mount(RangeInput, {
+      props: {
+        min: 5,
+        max: 20,
+        step: 2,
+        value: 10,
+      },
+    })
+    const rangeInput = wrapper.find('input[type="range"]')
+    const numberInput = wrapper.find('input[type="number"]')
+
+    expect(rangeInput.element.value).toBe('10')
+    expect(rangeInput.element.min).toBe('5')
+    expect(rangeInput.element.max).toBe('20')
+    expect(rangeInput.element.step).toBe('2')
+
+    expect(numberInput.element.value).toBe('10')
+    expect(numberInput.element.min).toBe('5')
+    expect(numberInput.element.max).toBe('20')
+    expect(numberInput.element.step).toBe('2')
+  })
+
+  it('updates value when input changes', async () => {
+    const wrapper = mount(RangeInput)
+    const rangeInput = wrapper.find('input[type="range"]')
+    const numberInput = wrapper.find('input[type="number"]')
+
+    await rangeInput.setValue('5')
+    expect(numberInput.element.value).toBe('5')
+
+    await numberInput.setValue('7')
+    expect(rangeInput.element.value).toBe('7')
+  })
+
+  it('emits change event with correct value', async () => {
+    const wrapper = mount(RangeInput)
+    const numberInput = wrapper.find('input[type="number"]')
+
+    await numberInput.setValue('5')
+    expect(wrapper.emitted('change')).toHaveLength(1)
+    expect(wrapper.emitted('change')?.[0]).toEqual([5])
+  })
+})

src/components/common/range-input/range-input.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    min?: number
+    max?: number
+    step?: number
+    value?: number
+  }>(),
+  {
+    min: 0,
+    max: 10,
+    step: 1,
+    value: 0,
+  }
+)
+defineEmits(['change'])
+const inputValue = ref(props.value)
+</script>
+
+<template>
+  <div class="flex">
+    <input
+      type="range"
+      class="m-2.5 w-16 h-[5px] rounded-lg appearance-none cursor-pointer"
+      :min="min"
+      :max="max"
+      :step="step"
+      v-model="inputValue"
+    />
+    <input
+      type="number"
+      class="w-12"
+      :min="min"
+      :max="max"
+      :step="step"
+      v-model="inputValue"
+      @change="$emit('change', inputValue)"
+    />
+  </div>
+</template>

src/components/common/symbol/circleSymbol.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    radius?: number
+    fillColor?: string
+  }>(),
+  {
+    radius: 9,
+    fillColor: 'red',
+  }
+)
+const size = props.radius * 2
+</script>
+
+<template>
+  <svg :height="size" :width="size">
+    <circle :cx="radius" :cy="radius" :r="radius" :fill="fillColor" />
+  </svg>
+</template>

src/components/common/symbol/crossSymbol.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    fillColor?: string
+    fontSize?: number
+    height?: number
+    width?: number
+  }>(),
+  {
+    fillColor: 'red',
+    fontSize: 42,
+    height: 18,
+    width: 18,
+  }
+)
+</script>
+
+<template>
+  <svg :height="height" :width="width">
+    <text x="1" :y="height + 2" :font-size="fontSize" :fill="fillColor">+</text>
+  </svg>
+</template>

src/components/common/symbol/rectangleSymbol.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    fillColor?: string
+    height?: number
+    width?: number
+  }>(),
+  {
+    fillColor: 'red',
+    height: 18,
+    width: 18,
+  }
+)
+</script>
+
+<template>
+  <svg :height="height" :width="width">
+    <rect height="100%" width="100%" :fill="fillColor" />
+  </svg>
+</template>

src/components/common/symbol/triangleSymbol.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    fillColor?: string
+    size?: number
+  }>(),
+  {
+    fillColor: 'red',
+    size: 18,
+  }
+)
+const top = props.size / 2
+const points = `0,${props.size} ${top},0 ${props.size},${props.size}`
+</script>
+
+<template>
+  <svg :height="size" :width="size">
+    <polygon :points="points" :fill="fillColor"></polygon>
+  </svg>
+</template>

src/components/draw/feature-edit-info.vue

@@ -1,27 +1,26 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { inject } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 const { t } = useTranslation()
-const props = defineProps<{
-  feature: DrawnFeature
-}>()
-const feat = ref(props.feature)
+const feature: DrawnFeature | undefined = inject('feature')
 </script>
 
 <template>
   {{ t('Modification des informations') }}
   <input
     type="text"
     class="form-control block mt-2 mb-4"
-    v-model="feat.label"
+    v-if="feature"
+    v-model="feature.label"
   />
   <textarea
     rows="3"
     class="form-control block w-full"
-    v-model="feat.description"
+    v-if="feature"
+    v-model="feature.description"
   ></textarea>
 
   <slot name="footer"></slot>