Skip to content

Commit e4bc6d7

Browse files
author
cnouguier
committed
wip: Create a style editor #1073
wip: Create a style manager #1072
1 parent 7f4835e commit e4bc6d7

File tree

5 files changed

+53
-49
lines changed

5 files changed

+53
-49
lines changed

‎map/client/components/styles/KStyleEditor.vue

+44-41
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,24 @@
2020
<KStyleEditorSection
2121
v-if="canEditPoint"
2222
label="KStyleEditor.POINT_SECTION"
23-
:style="style"
23+
:style="model"
2424
type="point"
2525
:dense="dense"
2626
>
27-
<KStyleProperty v-model="style.point.color" :name="$t('KStyleEditor.COLOR')" type="color" :dense="dense" />
28-
<KStyleProperty v-model="style.point.size" :name="$t('KStyleEditor.SIZE')" type="size" :min="8" :max="64" :dense="dense" />
29-
<KStyleProperty v-model="style.point.opacity" :name="$t('KStyleEditor.OPACITY')" type="opacity" :dense="dense" />
30-
<KStyleProperty v-model="style.point.shape" :name="$t('KStyleEditor.SHAPE')" type="shape" :dense="dense" />
27+
<KStyleProperty v-model="model.point.color" :name="$t('KStyleEditor.COLOR')" type="color" :default="getDefaultValue('point.color')" :dense="dense" />
28+
<KStyleProperty v-model="model.point.size" :name="$t('KStyleEditor.SIZE')" type="size" :min="8" :max="64" :default="getDefaultValue('point.size')" :dense="dense" />
29+
<KStyleProperty v-model="model.point.opacity" :name="$t('KStyleEditor.OPACITY')" type="opacity" :default="getDefaultValue('point.opacity')" :dense="dense" />
30+
<KStyleProperty v-model="model.point.shape" :name="$t('KStyleEditor.SHAPE')" type="shape" :default="getDefaultValue('point.shape')" :dense="dense" />
3131
<KStylePropertiesGroup
3232
v-if="!is3D"
3333
label="KStyleEditor.ICON_GROUP"
34-
v-model="style.point.icon"
34+
v-model="model.point.icon"
3535
:properties="pointIconProperties"
3636
:dense="dense"
3737
/>
3838
<KStylePropertiesGroup
3939
label="KStyleEditor.STROKE_GROUP"
40-
v-model="style.point.stroke"
40+
v-model="model.point.stroke"
4141
:properties="pointStrokeProperties"
4242
:dense="dense"
4343
/>
@@ -46,27 +46,27 @@
4646
<KStyleEditorSection
4747
v-if="canEditLine"
4848
label="KStyleEditor.LINE_SECTION"
49-
:style="style"
49+
:style="model"
5050
type="line"
5151
:dense="dense"
5252
>
53-
<KStyleProperty v-model="style.line.color" :name="$t('KStyleEditor.COLOR')" type="color" :dense="dense" />
54-
<KStyleProperty v-model="style.line.width" :name="$t('KStyleEditor.SIZE')" type="size" :min="1" :max="12" :dense="dense" />
55-
<KStyleProperty v-model="style.line.opacity" :name="$t('KStyleEditor.OPACITY')" type="opacity" :dense="dense" />
53+
<KStyleProperty v-model="model.line.color" :name="$t('KStyleEditor.COLOR')" type="color" :default="getDefaultValue('line.color')" :dense="dense" />
54+
<KStyleProperty v-model="model.line.width" :name="$t('KStyleEditor.SIZE')" type="size" :min="1" :max="12" :default="getDefaultValue('line.width')" :dense="dense" />
55+
<KStyleProperty v-model="model.line.opacity" :name="$t('KStyleEditor.OPACITY')" type="opacity" :default="getDefaultValue('line.opacity')" :dense="dense" />
5656
</KStyleEditorSection>
5757
<!-- Polygon editor -->
5858
<KStyleEditorSection
5959
v-if="canEditPolygon"
6060
label="KStyleEditor.POLYGON_SECTION"
61-
:style="style"
61+
:style="model"
6262
type="polygon"
6363
:dense="dense"
6464
>
65-
<KStyleProperty v-model="style.polygon.color" :name="$t('KStyleEditor.FILL_COLOR')" type="color" :dense="dense" />
66-
<KStyleProperty v-model="style.polygon.opacity" :name="$t('KStyleEditor.FILL_OPACITY')" type="opacity" :dense="dense" />
65+
<KStyleProperty v-model="model.polygon.color" :name="$t('KStyleEditor.FILL_COLOR')" type="color" :default="getDefaultValue('polygon.color')" :dense="dense" />
66+
<KStyleProperty v-model="model.polygon.opacity" :name="$t('KStyleEditor.FILL_OPACITY')" type="opacity" :default="getDefaultValue('polygon.opacity')" :dense="dense" />
6767
<KStylePropertiesGroup
6868
label="KStyleEditor.STROKE_GROUP"
69-
v-model="style.polygon.stroke"
69+
v-model="model.polygon.stroke"
7070
:properties="polygonStrokeProperties"
7171
:dense="dense"
7272
/>
@@ -85,9 +85,11 @@
8585

8686
<script setup>
8787
import _ from 'lodash'
88+
import config from 'config'
8889
import logger from 'loglevel'
8990
import { ref, computed, watch } from 'vue'
9091
import { api, i18n, utils as kdkCoreUtils } from '@kalisio/kdk/core.client'
92+
import { useCurrentActivity } from '../../composables'
9193
import KPanel from '../../../../core/client/components/KPanel.vue'
9294
import KStyleEditorSection from './KStyleEditorSection.vue'
9395
import KStylePropertiesGroup from './KStylePropertiesGroup.vue'
@@ -100,14 +102,6 @@ const props = defineProps({
100102
type: Object,
101103
default: () => null
102104
},
103-
default: {
104-
type: Object,
105-
default: () => null
106-
},
107-
is3D: {
108-
type: Boolean,
109-
default: false
110-
},
111105
title: {
112106
type: String,
113107
default: ''
@@ -120,7 +114,7 @@ const props = defineProps({
120114
type: Array,
121115
default: null
122116
},
123-
allowedStyles: {
117+
allowedTypes: {
124118
type: Array,
125119
default: ['point', 'line', 'polygon']
126120
},
@@ -134,8 +128,9 @@ const props = defineProps({
134128
const emit = defineEmits(['applied', 'canceled'])
135129
136130
// Data
131+
const { CurrentActivityContext } = useCurrentActivity()
137132
const formRef = ref(null)
138-
const style = ref(null)
133+
const model = ref(null)
139134
const mode = props.style ? 'edition' : 'creation'
140135
const formSchema = {
141136
$schema: 'http://json-schema.org/draft-07/schema#',
@@ -160,27 +155,33 @@ const formValues = computed(() => {
160155
if (_.isEmpty(props.style)) return null
161156
return { name: _.get(props.style, 'name') }
162157
})
158+
const engine = computed(() => {
159+
return _.get(CurrentActivityContext.config, 'engine', _.get(config, 'engines.leaflet'))
160+
})
161+
const is3D = computed(() => {
162+
return engine.value === 'cesium'
163+
})
163164
const defaultStyle = computed(() => {
164-
return _.defaultsDeep(props.default, DefaultStyle)
165+
return _.merge(DefaultStyle, engine.value.style)
165166
})
166167
const pointStrokeProperties = computed(() => {
167168
return [
168-
{ name: 'color', label: 'KStyleEditor.STROKE_COLOR', type: 'color', default: defaultStyle.value.point.stroke.color },
169-
{ name: 'width', label: 'KStyleEditor.STROKE_WIDTH', type: 'size', min: 1, max: 12, default: defaultStyle.value.point.stroke.width },
170-
{ name: 'opacity', label: 'KStyleEditor.STROKE_OPACITY', type: 'opacity', default: defaultStyle.value.point.stroke.opacity }
169+
{ name: 'color', label: 'KStyleEditor.STROKE_COLOR', type: 'color', default: getDefaultValue('point.stroke.color') },
170+
{ name: 'width', label: 'KStyleEditor.STROKE_WIDTH', type: 'size', min: 1, max: 12, default: getDefaultValue('point.stroke.width') },
171+
{ name: 'opacity', label: 'KStyleEditor.STROKE_OPACITY', type: 'opacity', default: getDefaultValue('point.stroke.opacity') }
171172
]
172173
})
173174
const pointIconProperties = computed(() => {
174175
return [
175-
{ name: 'classes', label: 'KStyleEditor.ICON', type: 'icon', default: defaultStyle.value.point.icon.classes },
176-
{ name: 'size', label: 'KStyleEditor.ICON_SIZE', type: 'size', min: 8, max: 48, default: defaultStyle.value.point.icon.size }
176+
{ name: 'classes', label: 'KStyleEditor.ICON', type: 'icon', default: getDefaultValue('point.icon.classes') },
177+
{ name: 'size', label: 'KStyleEditor.ICON_SIZE', type: 'size', min: 8, max: 48, default: getDefaultValue('point.icon.size') }
177178
]
178179
})
179180
const polygonStrokeProperties = computed(() => {
180181
return [
181-
{ name: 'color', label: 'KStyleEditor.STROKE_COLOR', type: 'color', default: defaultStyle.value.polygon.stroke.color },
182-
{ name: 'width', label: 'KStyleEditor.STROKE_WIDTH', type: 'size', min: 1, max: 12, default: defaultStyle.value.polygon.stroke.width },
183-
{ name: 'opacity', label: 'KStyleEditor.STROKE_OPACITY', type: 'opacity', default: defaultStyle.value.polygon.stroke.opacity }
182+
{ name: 'color', label: 'KStyleEditor.STROKE_COLOR', type: 'color', default: getDefaultValue('polygon.stroke.color') },
183+
{ name: 'width', label: 'KStyleEditor.STROKE_WIDTH', type: 'size', min: 1, max: 12, default: getDefaultValue('polygon.stroke.width') },
184+
{ name: 'opacity', label: 'KStyleEditor.STROKE_OPACITY', type: 'opacity', default: getDefaultValue('polygon.stroke.opacity') }
184185
]
185186
})
186187
const buttons = computed(() => {
@@ -201,16 +202,20 @@ const buttons = computed(() => {
201202
}
202203
]
203204
})
204-
const canEditPoint = computed(() => props.allowedStyles.includes('point'))
205-
const canEditLine = computed(() => props.allowedStyles.includes('line'))
206-
const canEditPolygon = computed(() => props.allowedStyles.includes('polygon'))
205+
const canEditPoint = computed(() => props.allowedTypes.includes('point'))
206+
const canEditLine = computed(() => props.allowedTypes.includes('line'))
207+
const canEditPolygon = computed(() => props.allowedTypes.includes('polygon'))
207208
208209
// Watch
209210
watch(() => props.style, (value) => {
210-
style.value = value
211+
if (!value) model.value = engine.value.style
212+
else model.value = value
211213
}, { immediate: true })
212214
213215
// Functions
216+
function getDefaultValue (path) {
217+
return _.get(engine.value.style, path, _.get(DefaultStyle, path))
218+
}
214219
const onNameChanged = _.debounce(async (field, value) => {
215220
if (_.size(value) > 2) await checkName(value)
216221
}, 200)
@@ -230,13 +235,11 @@ async function apply () {
230235
const isUnique = await checkName(values.name)
231236
if (!isUnique) return false
232237
// create to patch the style
233-
let data
238+
const data = _.merge(model.value, values)
234239
if (mode === 'creation') {
235-
data = _.merge(style.value, values)
236240
logger.debug('[KDK] Create style with values:', data)
237241
await service.create(data)
238242
} else {
239-
data = _.merge(style.value, values)
240243
logger.debug(`[KDK] Patch style ${style._id} with values:`, data)
241244
await service.patch(style.value._id, data)
242245
}

‎map/client/components/styles/KStyleEditorSection.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const showTip = ref(false)
6666
6767
// Watch
6868
watch(isOpened, (value) => {
69-
setTimeout(() => { showTip.value = value }, 300)
69+
setTimeout(() => { showTip.value = value }, 500)
7070
})
7171
7272
// Functions

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@
6565
<KStyleEditor
6666
ref="styleEditor"
6767
:style="style"
68-
:default="defaultStyle"
6968
@canceled="onCanceled"
7069
@applied="onApplied"
7170
class="col"
@@ -92,7 +91,7 @@ import KStyleEditor from './KStyleEditor.vue'
9291
defineProps({
9392
title: {
9493
type: String,
95-
default: ''
94+
default: null
9695
}
9796
})
9897
@@ -101,9 +100,6 @@ const { getSelectedFeaturesByLayer, CurrentActivity, CurrentActivityContext } =
101100
const styleEditor = ref(null)
102101
const style = ref(null)
103102
const viewMode = ref('list')
104-
const defaultStyle = _.pick(_.get(CurrentActivityContext.config, 'engine.style'), ['point', 'line', 'polygon'])
105-
106-
console.log(defaultStyle)
107103
108104
// Computed
109105
const baseQuery = computed(() => {

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,11 @@ import KColorPicker from '../../../../core/client/components/input/KColorPicker.
8888
const props = defineProps({
8989
modelValue: {
9090
type: [String, Number, Object],
91-
default: '#FF0000'
91+
default: null
92+
},
93+
default: {
94+
type: [String, Number, Object],
95+
default: null
9296
},
9397
name: {
9498
type: String,
@@ -121,7 +125,7 @@ const props = defineProps({
121125
const emit = defineEmits(['update:modelValue'])
122126
123127
// Data
124-
const value = ref(props.modelValue)
128+
const value = ref(props.modelValue || props.default)
125129
126130
// Computed
127131
const min = computed(() => {

‎map/client/utils/utils.style.js

+1
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ export const DefaultStyle = {
146146
isSelectable: true,
147147
point: {
148148
color: 'red',
149+
opacity: 1,
149150
size: 24,
150151
shape: 'circle',
151152
stroke: {

0 commit comments

Comments
 (0)