Feature/change store

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode"]
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "firsttris.vscode-jest-runner"
+  ]
 }

apps/demo-draggable/src/main.ts

@@ -1,8 +1,8 @@
-import './styles.scss';
-
+import { createStoreRegistryPlugin } from '@hungpvq/shared-store';
 import { createApp } from 'vue';
 import App from './app/App.vue';
+import './styles.scss';
 
 const app = createApp(App);
-
+app.use(createStoreRegistryPlugin());
 app.mount('#root');

apps/demo-map/src/main.ts

@@ -2,11 +2,13 @@ import './styles.css';
 
 import router from './router';
 
+import { createStoreRegistryPlugin } from '@hungpvq/shared-store';
 import { createApp } from 'vue';
 import App from './app/App.vue';
 
 const app = createApp(App);
 
 app.use(router);
+app.use(createStoreRegistryPlugin());
 
 app.mount('#root');

apps/demo-map/src/views/AllMapCompareView.vue

@@ -4,11 +4,11 @@ import {
   CompareBaseMapControl,
 } from '@hungpvq/vue-map-basemap';
 import {
+  CompareSettingCard,
   CompareSettingControl,
   CrsControl,
   FullScreenControl,
   GeoLocateControl,
-  CompareSettingCard,
   GotoControl,
   HomeControl,
   MapCompare,
@@ -17,7 +17,6 @@ import {
   ZoomControl,
 } from '@hungpvq/vue-map-core';
 import {
-  addDataset,
   ComponentManagementControl,
   createDataManagementMapboxComponent,
   createDataset,
@@ -42,20 +41,21 @@ import {
   LayerHighlight,
   LayerInfoControl,
   LayerSimpleMapboxBuild,
+  useMapDataset,
 } from '@hungpvq/vue-map-dataset';
 import { MeasurementControl } from '@hungpvq/vue-map-measurement';
 import { mdiDownload, mdiPencil } from '@mdi/js';
 import { ref } from 'vue';
 const mapRef = ref();
 
 function onMapLoaded(props: { id: string }) {
+  const { addDataset } = useMapDataset(props.id);
   const dataset_raster = createDataset(
     'Group test',
     null,
-    true
+    true,
   ) as DatasetComposite;
   const source_raster = createDatasetPartRasterSourceComponent('source', {
-    name: 'raster 1',
     type: 'raster',
     tiles: [
       'https://naturalearthtiles.roblabs.com/tiles/natural_earth_cross_blended_hypso_shaded_relief.raster/{z}/{x}/{y}.png',
@@ -76,7 +76,7 @@ function onMapLoaded(props: { id: string }) {
   const groupLayer_raster = createDataset(
     'Group layer 1',
     null,
-    true
+    true,
   ) as DatasetComposite;
   dataset_raster.add(source_raster);
   groupLayer_raster.add(list_raster);
@@ -92,7 +92,7 @@ function onMapLoaded(props: { id: string }) {
   const groupLayer1 = createDataset(
     'Group layer 1',
     null,
-    true
+    true,
   ) as DatasetComposite;
   const list1: IListViewUI = createDatasetPartListViewUiComponent('test area');
   list1.color = '#0000FF';
@@ -125,7 +125,7 @@ function onMapLoaded(props: { id: string }) {
   const groupLayer2 = createDataset(
     'Group layer 2',
     null,
-    true
+    true,
   ) as DatasetComposite;
   const list2 = createDatasetPartListViewUiComponent('test point');
   list2.color = '#ff0000';
@@ -155,7 +155,7 @@ function onMapLoaded(props: { id: string }) {
         105.88454157202995, 20.878811643339404, 106.16710803591963,
         21.0854254401454,
       ],
-    }
+    },
   );
   const metadata = createDatasetPartMetadataComponent('metadata', {
     bbox: [
@@ -196,7 +196,7 @@ function onMapLoaded(props: { id: string }) {
         { text: 'Name', value: 'name' },
         { text: 'Name', value: 'name' },
       ],
-    }
+    },
   );
   dataManagement.setItems([
     {
@@ -238,8 +238,8 @@ function onMapLoaded(props: { id: string }) {
   dataset.add(groupLayer2);
   dataset.add(identify);
   dataset.add(metadata);
-  addDataset(props.id, dataset_raster);
-  addDataset(props.id, dataset);
+  addDataset(dataset_raster);
+  addDataset(dataset);
 }
 </script>
 <template>

apps/demo-map/src/views/AllMapView.vue

@@ -4,7 +4,6 @@ import {
   useDownloadFile,
   useGeoConvertToFile,
 } from '@hungpvq/shared-file';
-import { loggerFactory } from '@hungpvq/shared-log';
 import { type MapSimple } from '@hungpvq/shared-map';
 import { BaseMapCard, BaseMapControl } from '@hungpvq/vue-map-basemap';
 import {
@@ -21,11 +20,11 @@ import {
   ZoomControl,
 } from '@hungpvq/vue-map-core';
 import {
-  addDataset,
   ComponentManagementControl,
   createDataManagementMapboxComponent,
   createDataset,
   createDatasetPartGeojsonSourceComponent,
+  createDatasetPartHighlightComponent,
   createDatasetPartListViewUiComponent,
   createDatasetPartMetadataComponent,
   createDatasetPartRasterSourceComponent,
@@ -51,12 +50,13 @@ import {
   LayerControl,
   LayerHighlight,
   LayerSimpleMapboxBuild,
+  useMapDataset,
 } from '@hungpvq/vue-map-dataset';
 import {
-  callDraw,
   DrawControl,
   DrawingType,
   InspectControl,
+  useMapDraw,
 } from '@hungpvq/vue-map-draw';
 import { LegendControl } from '@hungpvq/vue-map-legend';
 import { MeasurementControl } from '@hungpvq/vue-map-measurement';
@@ -69,6 +69,7 @@ const mapRef = ref();
 const { convertList } = useConvertToGeoJSON();
 const { convert } = useGeoConvertToFile();
 function onMapLoaded(map: MapSimple) {
+  const { addDataset } = useMapDataset(map.id);
   const dataset_raster = createDataset(
     'Group test',
     null,
@@ -262,9 +263,69 @@ function onMapLoaded(map: MapSimple) {
   dataset.add(groupLayer2);
   dataset.add(identify);
   dataset.add(metadata);
-  addDataset(map.id, dataset);
-  addDataset(map.id, createDatasetPoint());
-  // addDataset(map.id, dataset_raster);
+  addDataset(dataset);
+  addDataset(createDatasetPoint());
+  addDataset(createDatasetLineString());
+  // addDataset( dataset_raster);
+}
+function createDatasetLineString() {
+  const dataset = createDataset('Group test', null, true) as DatasetComposite;
+  const source = createDatasetPartGeojsonSourceComponent('source', {
+    type: 'FeatureCollection',
+    features: [],
+  });
+  const groupLayer1 = createDataset(
+    'Group layer 1',
+    null,
+    true,
+  ) as DatasetComposite;
+  const list1: IListViewUI =
+    createDatasetPartListViewUiComponent('test line string');
+  const layer1 = createMultiMapboxLayerComponent('layer area', [
+    new LayerSimpleMapboxBuild()
+      .setStyleType('line')
+      .setColor(list1.color)
+      .build(),
+  ]);
+  groupLayer1.add(layer1);
+  groupLayer1.add(list1);
+  list1.addMenus([
+    createMenuItemToggleShow({ location: 'extra' }),
+    createMenuItemToBoundActionForList(),
+    createMenuItemShowDetailInfoSource(),
+    createMenuItemStyleEdit(),
+  ]);
+  const identify = createIdentifyMapboxComponent('test identify');
+  identify.addMenus([
+    createMenuItemToBoundActionForItem(),
+    createMenuItemShowDetailForItem(),
+  ]);
+  dataset.add(identify);
+  const dataManagement = createDataManagementMapboxComponent(
+    'data management',
+    {
+      fields: [{ text: 'Name', value: 'name' }],
+    },
+  );
+  dataManagement.setItems([
+    {
+      id: '2',
+      name: 'feature 2',
+      geometry: {
+        coordinates: [
+          [104.3289285884349, 21.35998263691249],
+          [105.11257582166496, 21.70421219227839],
+          [105.16699576841705, 21.35998263691249],
+          [104.89489603465671, 21.39038859819064],
+        ],
+        type: 'LineString',
+      },
+    },
+  ]);
+  dataset.add(source);
+  dataset.add(dataManagement);
+  dataset.add(groupLayer1);
+  return dataset;
 }
 function createDatasetPoint() {
   const dataset = createDataset('Group test', null, true) as DatasetComposite;
@@ -284,7 +345,9 @@ function createDatasetPoint() {
       .setColor(list1.color)
       .build(),
   ]);
+  const highlight = createDatasetPartHighlightComponent();
   groupLayer1.add(layer1);
+  groupLayer1.add(highlight);
   groupLayer1.add(list1);
   list1.addMenus([
     createMenuItemToggleShow({ location: 'extra' }),
@@ -348,12 +411,13 @@ function createMenuDrawLayer() {
     name: 'Edit feature',
     icon: mdiPencil,
     click: (layer, mapId) => {
+      const { callDraw } = useMapDraw(mapId);
       const maybeDataManagement = findSiblingOrNearestLeaf(
         layer,
         (dataset) => dataset.type === 'dataManagement',
       );
       if (isDataManagementView(maybeDataManagement)) {
-        callDraw(mapId, {
+        callDraw({
           cleanAfterDone: true,
           draw_support: [
             DrawingType.POINT,

libs/draggable/package.json

@@ -28,6 +28,7 @@
   "peerDependencies": {
     "vue-material-design-icons": "^5.3.0",
     "@hungpvq/shared": ">=0.0.1",
-    "vue-draggable-resizable": "^3.0.0"
+    "vue-draggable-resizable": "^3.0.0",
+    "@hungpvq/shared-store": ">=0.0.1"
   }
 }

libs/draggable/src/components/draggable/draggable-container.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getUUIDv4 } from '@hungpvq/shared';
 import { nextTick, onMounted, onUnmounted, provide, ref } from 'vue';
-import { useDragStore } from '../../store';
+import { useDragContainer } from '../../store';
 const emit = defineEmits({
   init: (id: string) => {
     return true;
@@ -14,9 +14,9 @@ const box = ref<HTMLDivElement>();
 const { containerId } = defineProps<{ containerId?: string }>();
 const p_container_id = ref(containerId || `draggable-container-${getUUIDv4()}`);
 const init_done = ref(false);
-const store = useDragStore(p_container_id.value);
+const store = useDragContainer(p_container_id.value);
 onMounted(() => {
-  store.actions.initContainer();
+  store.initContainer();
   window.addEventListener('resize', onResize);
   nextTick(() => {
     onResize();
@@ -25,14 +25,14 @@ onMounted(() => {
   });
 });
 onUnmounted(() => {
-  store.actions.removeContainer();
+  store.removeContainer();
   window.removeEventListener('resize', onResize);
   emit('destroy', p_container_id.value);
 });
 provide('containerId', p_container_id);
 function onResize() {
   const clientWidth = box.value?.clientWidth || 0;
-  store.actions.setParentProps({
+  store.setParentProps({
     width: clientWidth,
     height: box.value?.clientHeight || 0,
     isMobile: clientWidth < 600,

libs/draggable/src/components/draggable/item-sidebar.vue

@@ -18,7 +18,7 @@ import {
   withShowEmit,
   withShowProps,
 } from '../../hook';
-import { useDragStore } from '../../store';
+import { useDragComponent } from '../../store';
 import MapButton from '../parts/MapButton.vue';
 import MapSidebarToggle from '../parts/MapSidebarToggle.vue';
 const {
@@ -43,7 +43,7 @@ const containerId = inject<Ref<string>>(
   'containerId',
   ref(props.containerId || ''),
 );
-const store = useDragStore(containerId.value);
+const store = useDragComponent();
 if (!containerId.value) {
   throw 'Not set container id';
 }
@@ -63,7 +63,7 @@ const { componentCard, componentCardHeader } = useComponent({
 });
 const componentMapSidebarToggle = computed(
   () =>
-    store.getters.getComponentCardSidebarToggle() ||
+    store.getComponentCardSidebarToggle() ||
     props.componentMapSidebarToggle ||
     MapSidebarToggle,
 );

libs/draggable/src/hoc/mobile-handle.ts

@@ -1,5 +1,5 @@
 import { Component, Ref, computed, defineComponent, h, inject, ref } from 'vue';
-import { useDragStore } from '../store';
+import { useDragIsMobile } from '../store';
 
 export function WithMobileHandle<T = Component>(
   Component: T,
@@ -15,8 +15,8 @@ export function WithMobileHandle<T = Component>(
         'containerId',
         ref(props.containerId || ''),
       );
-      const store = useDragStore(p_containerId.value);
-      const isMobile = computed(() => store.getters.getIsMobile());
+      const store = useDragIsMobile(p_containerId.value);
+      const isMobile = computed(() => store.getIsMobile());
       return { p_containerId, isMobile };
     },
     render() {

libs/draggable/src/hook/useComponent.ts

@@ -2,21 +2,19 @@ import { computed } from 'vue';
 
 import MapCard from '../components/parts/MapCard.vue';
 import MapHeader from '../components/parts/MapHeader.vue';
-import { useDragStore } from '../store';
+import { useDragComponent } from '../store';
 export function useComponent(props: {
   componentCard?: any;
   componentCardHeader?: any;
   containerId: string;
 }) {
-  const store = useDragStore(props.containerId);
+  const store = useDragComponent();
   const componentCard = computed(
-    () => store.getters.getComponentCard() || props.componentCard || MapCard,
+    () => store.getComponentCard() || props.componentCard || MapCard,
   );
   const componentCardHeader = computed(
     () =>
-      store.getters.getComponentCardHeader() ||
-      props.componentCardHeader ||
-      MapHeader,
+      store.getComponentCardHeader() || props.componentCardHeader || MapHeader,
   );
   return { componentCard, componentCardHeader };
 }