From dda493e6394e88998c4f9484b080f2d524a27a75 Mon Sep 17 00:00:00 2001 From: "hung.pv" Date: Thu, 24 Apr 2025 22:39:45 +0700 Subject: [PATCH 1/9] feat: add get first --- apps/demo-map/src/views/AllMapView.vue | 2 + .../dataset/src/interfaces/dataset.parts.ts | 4 + .../src/model/data-management/model.ts | 30 +++--- .../model/identify/identifyMapboxMerged.ts | 1 - libs/map/dataset/src/model/identify/models.ts | 56 +++++++++++ libs/map/dataset/src/model/part-menu.model.ts | 4 +- libs/map/dataset/src/model/source/base.ts | 5 +- libs/map/dataset/src/model/source/model.ts | 23 +++++ .../IdentifyControl/IdentifyControl.vue | 6 +- .../IdentifyShowFirstControl.vue | 98 +++++++++++++++++++ .../modules/LayerHighlight/LayerHighlight.vue | 51 ++++++---- libs/map/dataset/src/modules/index.ts | 1 + libs/map/dataset/src/store/component.ts | 11 +++ libs/map/dataset/src/store/highlight.ts | 47 ++++++--- libs/map/dataset/src/utils/convert.ts | 19 ++++ 15 files changed, 298 insertions(+), 60 deletions(-) create mode 100644 libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue create mode 100644 libs/map/dataset/src/utils/convert.ts diff --git a/apps/demo-map/src/views/AllMapView.vue b/apps/demo-map/src/views/AllMapView.vue index 049bf06..22f4ee6 100644 --- a/apps/demo-map/src/views/AllMapView.vue +++ b/apps/demo-map/src/views/AllMapView.vue @@ -41,6 +41,7 @@ import { DatasetComposite, findSiblingOrNearestLeaf, IdentifyControl, + IdentifyShowFirstControl, IListViewUI, isDataManagementView, isDatasetMap, @@ -344,6 +345,7 @@ function createMenuDrawLayer() { + diff --git a/libs/map/dataset/src/interfaces/dataset.parts.ts b/libs/map/dataset/src/interfaces/dataset.parts.ts index de67050..4c46c9e 100644 --- a/libs/map/dataset/src/interfaces/dataset.parts.ts +++ b/libs/map/dataset/src/interfaces/dataset.parts.ts @@ -90,6 +90,10 @@ export type IMapboxSourceView = IDatasetMap & { updateData?(map: MapSimple, data: any): void; getFieldsInfo(): IFieldInfo[]; getDataInfo(): any; + hightLight?( + map: MapSimple, + geojsonData: GeoJSON.Feature | undefined + ): void; }; export type IMapboxLayerView = IDatasetMap & { diff --git a/libs/map/dataset/src/model/data-management/model.ts b/libs/map/dataset/src/model/data-management/model.ts index 0b80586..fa52f58 100644 --- a/libs/map/dataset/src/model/data-management/model.ts +++ b/libs/map/dataset/src/model/data-management/model.ts @@ -6,6 +6,10 @@ import type { Feature } from 'geojson'; import LayerDetail from '../../modules/LayerDetail/LayerDetail.vue'; import { addComponent, setFeatureHighlight } from '../../store'; import { isDatasetSourceMap } from '../../utils/check'; +import { + convertFeatureToItem, + convertItemToFeature, +} from '../../utils/convert'; import { createNamedComponent } from '../base'; import { findSiblingOrNearestLeaf } from '../dataset.visitors'; import { createDatasetPartDataManagementComponent } from './base'; @@ -53,8 +57,14 @@ export function createDataManagementMapboxComponent< fields: config.fields, view: dataComponent, }, + check: 'detail', }); - setFeatureHighlight(mapId, convertItemToFeature(detail), 'detail'); + setFeatureHighlight( + mapId, + convertItemToFeature(detail), + 'detail', + dataComponent + ); }; const dataComponent = createNamedComponent('DataManagementMapboxComponent', { @@ -101,21 +111,3 @@ export function createDataManagementMapboxComponent< return dataComponent; } - -function convertFeatureToItem(feature: Feature): T { - return { - id: feature.id, - ...feature.properties, - geometry: feature.geometry, - } as T; -} - -function convertItemToFeature(item: any): Feature { - const { geometry, ...properties } = item; - return { - id: item.id, - type: 'Feature', - geometry, - properties, - }; -} diff --git a/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts b/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts index 7c604a4..3a446c1 100644 --- a/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts +++ b/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts @@ -1,7 +1,6 @@ import { getMap } from '@hungpvq/vue-map-core'; import { MapboxGeoJSONFeature, PointLike } from 'mapbox-gl'; import { - IDataManagementView, IDataset, IdentifyResult, IIdentifyViewWithMerge, diff --git a/libs/map/dataset/src/model/identify/models.ts b/libs/map/dataset/src/model/identify/models.ts index a8fa710..a8de07b 100644 --- a/libs/map/dataset/src/model/identify/models.ts +++ b/libs/map/dataset/src/model/identify/models.ts @@ -10,6 +10,7 @@ import type { IMapboxLayerView, } from '../../interfaces/dataset.parts'; import { isIdentifyMergeView, isMapboxLayerView } from '../../utils/check'; +import { convertFeatureToItem } from '../../utils/convert'; import { createNamedComponent } from '../base'; import { createDatasetLeaf } from '../dataset.base.function'; import { @@ -194,3 +195,58 @@ export async function handleMultiIdentify( return Promise.all(promises).then((res) => res.flat()); } + +export async function handleMultiIdentifyGetFirst( + identifies: IIdentifyView[], + mapId: string, + pointOrBox?: PointLike | [PointLike, PointLike] +): Promise { + const allLayerIds: string[] = []; + const cache: Record = {}; + identifies.forEach((identify) => { + const results = runAllComponentsWithCheck( + identify.getParent() || identify, + (dataset): dataset is IDataset & IMapboxLayerView => + isMapboxLayerView(dataset), + [ + (dataset) => { + return dataset.getAllLayerIds(); + }, + ] + ); + const layerIds = Array.from(results.values()).flat(2); + layerIds.forEach((layerId) => { + cache[layerId] = identify; + }); + allLayerIds.push(...layerIds); + }); + return new Promise((resolve) => { + getMap(mapId, (map: MapSimple) => { + const features: MapboxGeoJSONFeature[] = map.queryRenderedFeatures( + pointOrBox, + { + layers: allLayerIds, + } + ); + if (features.length > 0) { + const x = features[0]; + const datasetPartIdentify = cache[x.layer.id]; + const id = + x.properties?.[datasetPartIdentify?.config?.field_id || 'id'] ?? x.id; + const name = + x.properties?.[datasetPartIdentify?.config?.field_name || 'id'] ?? + x.id; + resolve({ + identify: datasetPartIdentify, + features: [ + { + id, + name, + data: convertFeatureToItem(x), + }, + ], + }); + } + }); + }); +} diff --git a/libs/map/dataset/src/model/part-menu.model.ts b/libs/map/dataset/src/model/part-menu.model.ts index 8818e72..82c6d76 100644 --- a/libs/map/dataset/src/model/part-menu.model.ts +++ b/libs/map/dataset/src/model/part-menu.model.ts @@ -103,7 +103,8 @@ export function createMenuItemToBoundActionForItem() { geometry, properties, }, - 'identify' + 'identify', + layer ); }); }, @@ -143,6 +144,7 @@ export function createMenuItemShowDetailInfoSource() { fields: source.getFieldsInfo(), view: layer, }, + check: 'detail', }); }, }); diff --git a/libs/map/dataset/src/model/source/base.ts b/libs/map/dataset/src/model/source/base.ts index 49fe02b..a0383d5 100644 --- a/libs/map/dataset/src/model/source/base.ts +++ b/libs/map/dataset/src/model/source/base.ts @@ -1,6 +1,6 @@ import type { MapSimple } from '@hungpvq/shared-map'; import type { AnySourceData } from 'mapbox-gl'; -import { IDataset, IDatasetMap, IMapboxSourceView } from '../../interfaces'; +import { IDataset, IMapboxSourceView } from '../../interfaces'; import { createNamedComponent } from '../base'; import { createDatasetLeaf } from '../dataset.base.function'; @@ -21,6 +21,9 @@ export function createDatasetPartMapboxSourceComponent( } }, removeFromMap(map: MapSimple) { + if (base.id && map.getLayer(base.id + '-hightLight')) { + map.removeLayer(base.id + '-hightLight'); + } if (base.id && map.getSource(base.id)) { map.removeSource(base.id); } diff --git a/libs/map/dataset/src/model/source/model.ts b/libs/map/dataset/src/model/source/model.ts index 55abd77..fc6354c 100644 --- a/libs/map/dataset/src/model/source/model.ts +++ b/libs/map/dataset/src/model/source/model.ts @@ -54,6 +54,29 @@ export function createDatasetPartGeojsonSourceComponent( } base.setData(data); }, + hightLight(map: MapSimple, geojsonData: GeoJSON.Feature) { + const layer = map.getLayer(base.id + '-hightLight'); + if (!layer) { + map.addLayer({ + id: base.id + '-hightLight', + source: base.id, + type: 'line', + filter: ['==', ['get', 'id'], geojsonData?.properties?.id || null], + paint: { + 'line-color': '#004E98', + 'line-width': 4, + 'line-dasharray': [2, 2], + }, + }); + } else { + map.setFilter(base.id + '-hightLight', [ + '==', + ['get', 'id'], + geojsonData?.properties?.id || null, + ]); + } + map.moveLayer(base.id + '-hightLight'); + }, }); } export function createDatasetPartRasterSourceComponent( diff --git a/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue b/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue index af2b1a0..74cbd0a 100644 --- a/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue +++ b/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue @@ -29,7 +29,7 @@ const path = { }; const props = defineProps({ ...withMapProps, - immediately: { type: Boolean, default: true }, + immediately: Boolean, }); const { mapId, moduleContainerProps } = useMap(props); const { trans, setLocale } = useLang(mapId.value); @@ -205,10 +205,10 @@ function onMenuAction( menu: MenuAction, item: any ) { - if (menu.type != 'item' || !identify || !menu.click) { + if (menu.type != 'item' || !identify) { return; } - menu.click(identify, mapId.value, item); + if ('click' in menu) menu.click(identify, mapId.value, item); } onMounted(() => { if (props.immediately) onUseMapClick(); diff --git a/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue b/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue new file mode 100644 index 0000000..f198618 --- /dev/null +++ b/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue @@ -0,0 +1,98 @@ + + diff --git a/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue b/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue index 822980d..450dc66 100644 --- a/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue +++ b/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue @@ -9,7 +9,12 @@ import { center } from '@turf/turf'; import type { FillLayer, GeoJSONSourceRaw } from 'mapbox-gl'; import { Marker } from 'mapbox-gl'; import { computed, watch } from 'vue'; -import { getFeatureHighlight } from '../../store/highlight'; +import { IMapboxSourceView } from '../../interfaces'; +import { findSiblingOrNearestLeaf } from '../../model/dataset.visitors'; +import { + getDatesetHighlight, + getFeatureHighlight, +} from '../../store/highlight'; const props = defineProps({ ...withMapProps, @@ -32,28 +37,28 @@ let marker: Marker | undefined = undefined; const { mapId, callMap } = useMap(props); const storeFeature = computed(() => { - return ( - getFeatureHighlight(mapId.value)?.value || { - type: 'FeatureCollection' as const, - features: [], - } - ); + return getFeatureHighlight(mapId.value)?.value; }); const updateSource = ( map: mapboxgl.Map, - geojsonData: - | GeoJSON.Feature - | GeoJSON.FeatureCollection - | string + geojsonData?: GeoJSON.Feature ) => { const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource; if (source) { - source.setData(geojsonData); + source.setData( + geojsonData || { + type: 'FeatureCollection' as const, + features: [], + } + ); } else { map.addSource(sourceId, { type: 'geojson', - data: geojsonData, + data: geojsonData || { + type: 'FeatureCollection' as const, + features: [], + }, }); } }; @@ -98,12 +103,20 @@ const updateMarker = ( } }; -function updateHighlight( - geojsonData: - | GeoJSON.Feature - | GeoJSON.FeatureCollection - | string -) { +function updateHighlight(geojsonData?: GeoJSON.Feature) { + const dataset = getDatesetHighlight(mapId.value); + if (dataset) { + const source = findSiblingOrNearestLeaf( + dataset, + (dataset) => dataset.type == 'source' + ) as unknown as IMapboxSourceView; + if (source && 'hightLight' in source) { + callMap((map: MapSimple) => { + source.hightLight?.(map, geojsonData); + }); + return; + } + } callMap((map: MapSimple) => { updateSource(map, geojsonData); updateLayer(map); diff --git a/libs/map/dataset/src/modules/index.ts b/libs/map/dataset/src/modules/index.ts index fc7fcae..416e7bc 100644 --- a/libs/map/dataset/src/modules/index.ts +++ b/libs/map/dataset/src/modules/index.ts @@ -1,6 +1,7 @@ export { default as ComponentManagementControl } from './ComponentManagementControl/ComponentManagementControl.vue'; export { default as CreateControl } from './CreateControl/CreateControl.vue'; export { default as IdentifyControl } from './IdentifyControl/IdentifyControl.vue'; +export { default as IdentifyShowFirstControl } from './IdentifyControl/IdentifyShowFirstControl.vue'; export { default as LayerControl } from './LayerControl/LayerControl.vue'; export { default as LayerInfoControl } from './LayerControl/LayerInfoControl.vue'; export { default as LayerDetail } from './LayerDetail/LayerDetail.vue'; diff --git a/libs/map/dataset/src/store/component.ts b/libs/map/dataset/src/store/component.ts index 0b5fc68..9723f37 100644 --- a/libs/map/dataset/src/store/component.ts +++ b/libs/map/dataset/src/store/component.ts @@ -6,6 +6,7 @@ export const KEY = 'dataset-component'; export type ComponentItem = { id: string; + check?: string; component: () => any; attr: any; }; @@ -49,6 +50,16 @@ export function addComponent( const store = getComponentStore(mapId); if (!store) return; + if (component.check) { + const index = store.components.findIndex((x) => x.check == component.check); + if (index >= 0) { + const id = store.components[index].id; + Object.assign(store.components[index], component); + store.componentIds.value.splice(index, 1); + store.componentIds.value.push(id); + return id; + } + } const id = generateId(); store.components.push({ ...component, diff --git a/libs/map/dataset/src/store/highlight.ts b/libs/map/dataset/src/store/highlight.ts index bacc12b..b5065e4 100644 --- a/libs/map/dataset/src/store/highlight.ts +++ b/libs/map/dataset/src/store/highlight.ts @@ -1,24 +1,23 @@ -import { addStore, addToQueue, getStore } from '@hungpvq/vue-map-core'; -import type { GeoJSONSourceRaw, Layer } from 'mapbox-gl'; -import { ref } from 'vue'; +import { MapSimple } from '@hungpvq/shared-map'; +import { addStore, addToQueue, getMap, getStore } from '@hungpvq/vue-map-core'; import type { Ref } from 'vue'; +import { ref } from 'vue'; +import { IDataset, IMapboxSourceView } from '../interfaces'; +import { findSiblingOrNearestLeaf } from '../model'; export const KEY = 'dataset-highlight'; export type MapDatasetHighlightStore = { - feature: Ref< - | GeoJSON.Feature - | GeoJSON.FeatureCollection - | string - | undefined - >; + feature: Ref | undefined>; source: Ref; + dataset?: IDataset; }; function initMapStore(mapId: string) { const store: MapDatasetHighlightStore = { feature: ref(undefined), source: ref(undefined), + dataset: undefined, }; addStore(mapId, KEY, store); @@ -32,12 +31,9 @@ export function getDatasetHighlightStore(mapId: string) { export function setFeatureHighlight( mapId: string, - feature: - | GeoJSON.Feature - | GeoJSON.FeatureCollection - | string - | undefined, - source?: string + feature: GeoJSON.Feature | undefined, + source: string, + dataset?: IDataset ) { const store = getDatasetHighlightStore(mapId); if (!store) return; @@ -46,9 +42,22 @@ export function setFeatureHighlight( if (!feature && store.source.value === source && store.feature.value) { store.feature.value = undefined; store.source.value = undefined; + if (store.dataset) { + const source = findSiblingOrNearestLeaf( + store.dataset, + (dataset) => dataset.type == 'source' + ) as unknown as IMapboxSourceView; + if (source && 'hightLight' in source) { + getMap(mapId, (map: MapSimple) => { + source.hightLight?.(map, undefined); + }); + return; + } + } + store.dataset = undefined; return; } - + store.dataset = dataset; store.feature.value = feature; store.source.value = source; } @@ -64,3 +73,9 @@ export function getHighlightSource(mapId: string) { if (!store) return; return store.source; } + +export function getDatesetHighlight(mapId: string) { + const store = getDatasetHighlightStore(mapId); + if (!store) return; + return store.dataset; +} diff --git a/libs/map/dataset/src/utils/convert.ts b/libs/map/dataset/src/utils/convert.ts new file mode 100644 index 0000000..6f4dacf --- /dev/null +++ b/libs/map/dataset/src/utils/convert.ts @@ -0,0 +1,19 @@ +import type { Feature } from 'geojson'; + +export function convertFeatureToItem(feature: Feature): T { + return { + id: feature.id, + ...feature.properties, + geometry: feature.geometry, + } as T; +} + +export function convertItemToFeature(item: any): Feature { + const { geometry, ...properties } = item; + return { + id: item.id, + type: 'Feature', + geometry, + properties, + }; +} From a6e99c90cc7429521491a47c605b1ab3f16781da Mon Sep 17 00:00:00 2001 From: "hung.pv" Date: Sat, 26 Apr 2025 00:17:01 +0700 Subject: [PATCH 2/9] feat: fix style control --- apps/demo-map/src/views/AllMapView.vue | 3 + deploy/demo-map | 2 +- libs/map/core/src/field/input-choose.vue | 1 + libs/map/dataset/.eslintrc.json | 13 + libs/map/dataset/src/builder/geojson.ts | 4 +- libs/map/dataset/src/builder/raster.ts | 2 +- .../dataset/src/interfaces/dataset.parts.ts | 2 +- .../dataset/src/model/data-management/base.ts | 2 +- .../src/model/dataset.base.function.ts | 2 +- .../model/identify/identifyMapboxMerged.ts | 4 +- libs/map/dataset/src/model/layer/base.ts | 2 +- libs/map/dataset/src/model/part-menu.model.ts | 7 +- libs/map/dataset/src/model/source/base.ts | 2 +- libs/map/dataset/src/model/source/model.ts | 8 +- .../helper/custom/ConfigRasterJsonHelper.ts | 6 +- .../helper/custom/ConfigRasterUrlHelper.ts | 6 +- .../helper/custom/Geojsonhelper.ts | 6 +- .../StyleControl/component/tab-content.vue | 13 +- .../StyleControl/component/tab-item.vue | 73 +++- .../StyleControl/lang/style/circle-style.json | 3 +- .../StyleControl/lang/style/symbol-style.json | 58 ++- .../modules/StyleControl/style-control.vue | 24 +- .../StyleControl/style/multi-style.vue | 2 +- .../StyleControl/style/single-style.vue | 58 ++- .../modules/StyleControl/style/type/circle.ts | 20 +- .../StyleControl/style/type/default.ts | 3 +- .../modules/StyleControl/style/type/fill.ts | 28 +- .../modules/StyleControl/style/type/index.ts | 8 +- .../modules/StyleControl/style/type/line.ts | 81 +++- .../modules/StyleControl/style/type/raster.ts | 5 +- .../modules/StyleControl/style/type/style.ts | 106 +++-- .../modules/StyleControl/style/type/symbol.ts | 363 ++++++++++++++++-- libs/map/dataset/src/store/highlight.ts | 4 +- libs/map/dataset/src/store/index.ts | 5 +- libs/map/dataset/src/utils/check.ts | 2 +- 35 files changed, 743 insertions(+), 185 deletions(-) diff --git a/apps/demo-map/src/views/AllMapView.vue b/apps/demo-map/src/views/AllMapView.vue index 22f4ee6..789a6c1 100644 --- a/apps/demo-map/src/views/AllMapView.vue +++ b/apps/demo-map/src/views/AllMapView.vue @@ -36,6 +36,7 @@ import { createMenuItemStyleEdit, createMenuItemToBoundActionForItem, createMenuItemToBoundActionForList, + createMenuItemToggleShow, createMultiLegend, createMultiMapboxLayerComponent, DatasetComposite, @@ -153,11 +154,13 @@ function onMapLoaded(map: MapSimple) { .build(), ]); list1.addMenus([ + createMenuItemToggleShow({ location: 'extra' }), createMenuItemToBoundActionForList(), createMenuItemShowDetailInfoSource(), createMenuItemStyleEdit(), ]); list2.addMenus([ + createMenuItemToggleShow({ location: 'extra' }), createMenuItemToBoundActionForList(), createMenuDrawLayer(), createMenuDownload(), diff --git a/deploy/demo-map b/deploy/demo-map index bca4369..7725804 160000 --- a/deploy/demo-map +++ b/deploy/demo-map @@ -1 +1 @@ -Subproject commit bca4369793f986015368481f037c220bfce980d3 +Subproject commit 7725804fe0ee96c058cb65fc8d00067bc7f8aa85 diff --git a/libs/map/core/src/field/input-choose.vue b/libs/map/core/src/field/input-choose.vue index aa53d6e..b827dae 100644 --- a/libs/map/core/src/field/input-choose.vue +++ b/libs/map/core/src/field/input-choose.vue @@ -51,6 +51,7 @@ function onSetValue(item) { text-align: center; display: flex; align-items: center; + justify-content: center; } .item-choose-active { color: var(--v-primary-base, #1a73e8); diff --git a/libs/map/dataset/.eslintrc.json b/libs/map/dataset/.eslintrc.json index 04e3c00..0e341fb 100644 --- a/libs/map/dataset/.eslintrc.json +++ b/libs/map/dataset/.eslintrc.json @@ -8,6 +8,19 @@ ], "ignorePatterns": ["!**/*"], "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/consistent-type-imports": [ + "error", + { + "prefer": "type-imports", + "disallowTypeAnnotations": false + } + ] + } + }, { "files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"], "rules": { diff --git a/libs/map/dataset/src/builder/geojson.ts b/libs/map/dataset/src/builder/geojson.ts index e40eec9..e4d3ee0 100644 --- a/libs/map/dataset/src/builder/geojson.ts +++ b/libs/map/dataset/src/builder/geojson.ts @@ -1,7 +1,8 @@ import type { Color } from '@hungpvq/shared-map'; import { getChartRandomColor } from '@hungpvq/vue-map-core'; import type { GeoJSON } from 'geojson'; -import { IDataset, IListViewUI } from '../interfaces'; +import type { IDataset, IListViewUI } from '../interfaces'; +import type { DatasetComposite } from '../model'; import { createDataManagementMapboxComponent, createDataset, @@ -11,7 +12,6 @@ import { createMenuItemShowDetailForItem, createMenuItemToBoundActionForItem, createMultiMapboxLayerComponent, - DatasetComposite, } from '../model'; import { LayerSimpleMapboxBuild } from '../utils/layer-simple-builder'; export type GeojsonDatasetOption = { diff --git a/libs/map/dataset/src/builder/raster.ts b/libs/map/dataset/src/builder/raster.ts index a986d94..7198de3 100644 --- a/libs/map/dataset/src/builder/raster.ts +++ b/libs/map/dataset/src/builder/raster.ts @@ -1,5 +1,5 @@ import type { BBox } from 'geojson'; -import { IDataset } from '../interfaces'; +import type { IDataset } from '../interfaces'; import { createDataset, createDatasetPartListViewUiComponent, diff --git a/libs/map/dataset/src/interfaces/dataset.parts.ts b/libs/map/dataset/src/interfaces/dataset.parts.ts index 4c46c9e..73aa213 100644 --- a/libs/map/dataset/src/interfaces/dataset.parts.ts +++ b/libs/map/dataset/src/interfaces/dataset.parts.ts @@ -1,5 +1,5 @@ import type { Color, MapSimple } from '@hungpvq/shared-map'; -import { IDrawHandler } from '@hungpvq/vue-map-core'; +import type { IDrawHandler } from '@hungpvq/vue-map-core'; import type { BBox } from 'geojson'; import type { AnySourceData, PointLike } from 'mapbox-gl'; import type { IDataset } from './dataset.base'; diff --git a/libs/map/dataset/src/model/data-management/base.ts b/libs/map/dataset/src/model/data-management/base.ts index 3dc70a1..16d9cfd 100644 --- a/libs/map/dataset/src/model/data-management/base.ts +++ b/libs/map/dataset/src/model/data-management/base.ts @@ -1,4 +1,4 @@ -import { IDataManagementView, IDataset } from '../../interfaces'; +import type { IDataManagementView, IDataset } from '../../interfaces'; import { createNamedComponent } from '../base'; import { createDatasetLeaf } from '../dataset.base.function'; diff --git a/libs/map/dataset/src/model/dataset.base.function.ts b/libs/map/dataset/src/model/dataset.base.function.ts index 03b4e7d..9ed31ac 100644 --- a/libs/map/dataset/src/model/dataset.base.function.ts +++ b/libs/map/dataset/src/model/dataset.base.function.ts @@ -1,4 +1,4 @@ -import { IDataset, IDatasetVisitor } from '../interfaces'; +import type { IDataset, IDatasetVisitor } from '../interfaces'; import { createBase } from './base'; export function createDatasetComponent( diff --git a/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts b/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts index 3a446c1..116e0e4 100644 --- a/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts +++ b/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts @@ -1,6 +1,6 @@ import { getMap } from '@hungpvq/vue-map-core'; -import { MapboxGeoJSONFeature, PointLike } from 'mapbox-gl'; -import { +import type { MapboxGeoJSONFeature, PointLike } from 'mapbox-gl'; +import type { IDataset, IdentifyResult, IIdentifyViewWithMerge, diff --git a/libs/map/dataset/src/model/layer/base.ts b/libs/map/dataset/src/model/layer/base.ts index 8fe6ef6..1824b05 100644 --- a/libs/map/dataset/src/model/layer/base.ts +++ b/libs/map/dataset/src/model/layer/base.ts @@ -1,5 +1,5 @@ import type { MapSimple } from '@hungpvq/shared-map'; -import { IDataset, IMapboxLayerView } from '../../interfaces'; +import type { IDataset, IMapboxLayerView } from '../../interfaces'; import { createNamedComponent } from '../base'; import { createDatasetLeaf } from '../dataset.base.function'; import { createDatasetMenu } from '../part-menu.model'; diff --git a/libs/map/dataset/src/model/part-menu.model.ts b/libs/map/dataset/src/model/part-menu.model.ts index 82c6d76..057fe9a 100644 --- a/libs/map/dataset/src/model/part-menu.model.ts +++ b/libs/map/dataset/src/model/part-menu.model.ts @@ -1,7 +1,7 @@ import { fitBounds } from '@hungpvq/shared-map'; import { getMap } from '@hungpvq/vue-map-core'; import { mdiCrosshairsGps, mdiFormatLineStyle, mdiInformation } from '@mdi/js'; -import { +import type { IActionForView, IDataManagementView, IDataset, @@ -165,11 +165,14 @@ export function createMenuItemStyleEdit() { }); } -export function createMenuItemToggleShow() { +export function createMenuItemToggleShow( + menu: Partial> +) { return createMenuItem({ type: 'item', location: 'bottom', name: 'ToggleShow', component: () => ToggleShow, + ...menu, }); } diff --git a/libs/map/dataset/src/model/source/base.ts b/libs/map/dataset/src/model/source/base.ts index a0383d5..8fb3313 100644 --- a/libs/map/dataset/src/model/source/base.ts +++ b/libs/map/dataset/src/model/source/base.ts @@ -1,6 +1,6 @@ import type { MapSimple } from '@hungpvq/shared-map'; import type { AnySourceData } from 'mapbox-gl'; -import { IDataset, IMapboxSourceView } from '../../interfaces'; +import type { IDataset, IMapboxSourceView } from '../../interfaces'; import { createNamedComponent } from '../base'; import { createDatasetLeaf } from '../dataset.base.function'; diff --git a/libs/map/dataset/src/model/source/model.ts b/libs/map/dataset/src/model/source/model.ts index fc6354c..2749bbb 100644 --- a/libs/map/dataset/src/model/source/model.ts +++ b/libs/map/dataset/src/model/source/model.ts @@ -1,6 +1,10 @@ import type { MapSimple } from '@hungpvq/shared-map'; -import { GeoJSONSource, GeoJSONSourceRaw, RasterSource } from 'mapbox-gl'; -import { IDataset, IMapboxSourceView, IMetadataView } from '../../interfaces'; +import type { GeoJSONSource, GeoJSONSourceRaw, RasterSource } from 'mapbox-gl'; +import type { + IDataset, + IMapboxSourceView, + IMetadataView, +} from '../../interfaces'; import { createNamedComponent } from '../base'; import { findSiblingOrNearestLeaf } from '../dataset.visitors'; import { createDatasetPartMapboxSourceComponent } from './base'; diff --git a/libs/map/dataset/src/modules/CreateControl/helper/custom/ConfigRasterJsonHelper.ts b/libs/map/dataset/src/modules/CreateControl/helper/custom/ConfigRasterJsonHelper.ts index ad66579..ce70a03 100644 --- a/libs/map/dataset/src/modules/CreateControl/helper/custom/ConfigRasterJsonHelper.ts +++ b/libs/map/dataset/src/modules/CreateControl/helper/custom/ConfigRasterJsonHelper.ts @@ -1,7 +1,5 @@ -import { - createRasterUrlDataset, - RasterUrlDatasetOption, -} from '../../../../builder'; +import type { RasterUrlDatasetOption } from '../../../../builder'; +import { createRasterUrlDataset } from '../../../../builder'; import { ConfigRasterJson } from '../../config'; import { ConfigHelper } from '../_default'; diff --git a/libs/map/dataset/src/modules/CreateControl/helper/custom/ConfigRasterUrlHelper.ts b/libs/map/dataset/src/modules/CreateControl/helper/custom/ConfigRasterUrlHelper.ts index 4df8ad6..72554d0 100644 --- a/libs/map/dataset/src/modules/CreateControl/helper/custom/ConfigRasterUrlHelper.ts +++ b/libs/map/dataset/src/modules/CreateControl/helper/custom/ConfigRasterUrlHelper.ts @@ -1,7 +1,5 @@ -import { - createRasterUrlDataset, - RasterUrlDatasetOption, -} from '../../../../builder'; +import type { RasterUrlDatasetOption } from '../../../../builder'; +import { createRasterUrlDataset } from '../../../../builder'; import { ConfigRasterUrl } from '../../config'; import { ConfigHelper } from '../_default'; diff --git a/libs/map/dataset/src/modules/CreateControl/helper/custom/Geojsonhelper.ts b/libs/map/dataset/src/modules/CreateControl/helper/custom/Geojsonhelper.ts index 17ba2c6..d65da98 100644 --- a/libs/map/dataset/src/modules/CreateControl/helper/custom/Geojsonhelper.ts +++ b/libs/map/dataset/src/modules/CreateControl/helper/custom/Geojsonhelper.ts @@ -1,7 +1,5 @@ -import { - createGeoJsonDataset, - GeojsonDatasetOption, -} from '../../../../builder'; +import type { GeojsonDatasetOption } from '../../../../builder'; +import { createGeoJsonDataset } from '../../../../builder'; import { GeojsonUpload } from '../../config'; import { ConfigHelper } from '../_default'; diff --git a/libs/map/dataset/src/modules/StyleControl/component/tab-content.vue b/libs/map/dataset/src/modules/StyleControl/component/tab-content.vue index 2c292cb..93346e6 100644 --- a/libs/map/dataset/src/modules/StyleControl/component/tab-content.vue +++ b/libs/map/dataset/src/modules/StyleControl/component/tab-content.vue @@ -2,7 +2,7 @@

{{ value || default_value }} @@ -15,6 +15,7 @@ :modelValue="form" @update:modelValue="form = $event" :mapId="mapId" + class="tab-item-content" >

@@ -71,7 +72,6 @@ const onSetDefaultValue = () => { diff --git a/libs/map/dataset/src/modules/StyleControl/component/tab-item.vue b/libs/map/dataset/src/modules/StyleControl/component/tab-item.vue index 119262f..1eea438 100644 --- a/libs/map/dataset/src/modules/StyleControl/component/tab-item.vue +++ b/libs/map/dataset/src/modules/StyleControl/component/tab-item.vue @@ -1,17 +1,17 @@ diff --git a/libs/map/dataset/src/modules/StyleControl/lang/style/circle-style.json b/libs/map/dataset/src/modules/StyleControl/lang/style/circle-style.json index 2073cd1..ddade3b 100644 --- a/libs/map/dataset/src/modules/StyleControl/lang/style/circle-style.json +++ b/libs/map/dataset/src/modules/StyleControl/lang/style/circle-style.json @@ -8,6 +8,7 @@ "circle-pitch-alignment": "Pitch alignment", "circle-pitch-scale": "Pitch scale", "stroke-width": "Stroke width", - "stroke-opacity": "Stroke opacity" + "stroke-opacity": "Stroke opacity", + "translate": "Translate" } } diff --git a/libs/map/dataset/src/modules/StyleControl/lang/style/symbol-style.json b/libs/map/dataset/src/modules/StyleControl/lang/style/symbol-style.json index 6f0506a..10a9959 100644 --- a/libs/map/dataset/src/modules/StyleControl/lang/style/symbol-style.json +++ b/libs/map/dataset/src/modules/StyleControl/lang/style/symbol-style.json @@ -6,20 +6,50 @@ "placement": "Placement" }, "setting": { - "text-field": "Text field", + "text-font": "Font", "text-color": "Color", - "text-size": "Size", - "text-opacity": "Opacity", - "text-transform": "Transform", - "text-letter-spacing": "Letter spacing", - "text-line-height": "Line height", - "text-max-width": "Max width", - "text-halo-blur": "Halo blur", - "text-halo-width": "Halo width", - "text-halo-color": "Halo color", - "icon-image": "Image", - "icon-size": "Size", - "icon-opacity": "Opacity", - "icon-text-fit": "Fill icon to text" + "text-field": "Content", + "image": "Image", + "color": "Color", + "opacity": "Opacity", + "font": "Font", + "letter-spacing": "Letter spacing", + "line-height": "Line height", + "max-width": "Max width", + "transform": "Transform", + "halo-color": "Halo color", + "halo-width": "Halo width", + "halo-blur": "Halo blur", + "fit-icon": "Fit icon to text", + "size": "Size", + "icon-opacity": "Icon opacity", + "icon-size": "Icon size", + "icon-text-fit": "Fit icon to text", + "icon-text-fit-padding": "Icon-text padding", + "icon-image": "Icon image", + "text-justify": "Text justification", + "text-anchor": "Text anchor", + "text-offset": "Text offset", + "text-radial-offset": "Text radial offset", + "text-translate": "Text translation", + "text-rotate": "Text rotation", + "text-pitch-alignment": "Text pitch alignment", + "icon-offset": "Icon offset", + "icon-translate": "Icon translation", + "icon-rotate": "Icon rotation", + "symbol-placement": "Symbol placement", + "symbol-spacing": "Symbol spacing", + "text-max-angle": "Max text angle", + "avoid-edges": "Avoid edges", + "sort-key": "Sort key", + "text-orientation": "Text orientation", + "text-padding": "Text padding", + "allow-text-overlap": "Allow text overlap", + "text-ignore-placement": "Text ignore placement", + "text-optional": "Text optional", + "icon-padding": "Icon padding", + "allow-icon-overlap": "Allow icon overlap", + "icon-ignore-placement": "Icon ignore placement", + "icon-optional": "Icon optional" } } diff --git a/libs/map/dataset/src/modules/StyleControl/style-control.vue b/libs/map/dataset/src/modules/StyleControl/style-control.vue index 6292fe3..5ab5c07 100644 --- a/libs/map/dataset/src/modules/StyleControl/style-control.vue +++ b/libs/map/dataset/src/modules/StyleControl/style-control.vue @@ -39,16 +39,7 @@ let layer_map_component: any = shallowRef(''); onMounted(() => { toggleShow(true); layer_map.value = undefined; - const layerView = findSiblingOrNearestLeaf(props.item, (dataset) => - isMapboxLayerView(dataset) - ); - if (layerView) { - if (isMapboxLayerView(layerView)) { - layer_map.value = layerView || undefined; - layer_map_component.value = layerView.getComponentUpdate(); - layer.value = copyByJson(layerView.getData()); - } - } + updateValue(); }); const onClose = () => { layer_map.value = undefined; @@ -62,6 +53,19 @@ const onUpdateStyle = (value: any) => { } layer_map.value.updateValue(map, value); }); + updateValue(); +}; +const updateValue = () => { + const layerView = findSiblingOrNearestLeaf(props.item, (dataset) => + isMapboxLayerView(dataset) + ); + if (layerView) { + if (isMapboxLayerView(layerView)) { + layer_map.value = layerView || undefined; + layer_map_component.value = layerView.getComponentUpdate(); + layer.value = copyByJson(layerView.getData()); + } + } };