@geode/opengeodeweb-front 10.21.1-rc.2 → 10.22.0-rc.2

package/app/components/ObjectSelector.vue

@@ -17,6 +17,7 @@ const backStore = useBackStore();
 const loading = ref(false);
 const allowed_objects = ref({});
 const toggle_loading = useToggle(loading);
+const multiple_files_no_common = ref(false);
 
 function select_geode_object(object_map) {
   const object_keys = Object.keys(object_map);
@@ -51,12 +52,18 @@ function select_geode_object(object_map) {
 async function get_allowed_objects() {
   toggle_loading();
   allowed_objects.value = {};
+  multiple_files_no_common.value = false;
 
   const promise_array = filenames.map((filename) => backStore.request(schema, { filename }));
   const responses = await Promise.all(promise_array);
   const allowed_objects_list = responses.map((response) => response.allowed_objects);
   const all_keys = [...new Set(allowed_objects_list.flatMap((obj) => Object.keys(obj)))];
   const common_keys = all_keys.filter((key) => allowed_objects_list.every((obj) => key in obj));
+
+  if (filenames.length > 1 && all_keys.length > 0 && common_keys.length === 0) {
+    multiple_files_no_common.value = true;
+  }
+
   const final_object = {};
   for (const key of common_keys) {
     const load_scores = allowed_objects_list.map((obj) => obj[key].is_loadable);
@@ -127,6 +134,13 @@ await get_allowed_objects();
       </v-tooltip>
     </v-col>
   </v-row>
+  <v-row v-else-if="multiple_files_no_common" class="pa-5">
+    <v-card class="card" variant="tonal" rounded>
+      <v-card-text>
+        These files cannot be loaded together because they don't share a common data type.
+      </v-card-text>
+    </v-card>
+  </v-row>
   <v-row v-else class="pa-5">
     <v-card class="card" variant="tonal" rounded>
       <v-card-text>

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -5,11 +5,13 @@ import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Opti
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },
@@ -20,70 +22,90 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.meshEdgesVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const width = computed({
   get: () => dataStyleStore.meshEdgesWidth(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesWidth(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesWidth(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const coloring_style_key = computed({
   get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesActiveColoring(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const color = computed({
   get: () => dataStyleStore.meshEdgesColor(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesColor(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesColor(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_name = computed({
   get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVertexAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVertexAttributeRange(id.value, newValue[0], newValue[1]);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_color_map = computed({
   get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVertexAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const edge_attribute_name = computed({
   get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesEdgeAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const edge_attribute_range = computed({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesEdgeAttributeRange(id.value, newValue[0], newValue[1]);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, newValue[0], newValue[1]),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const edge_attribute_color_map = computed({
   get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesEdgeAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Generic/Mesh/CellsOptions.vue

@@ -3,11 +3,13 @@ import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/Cont
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps, btn_image, tooltip } = defineProps({
   itemProps: { type: Object, required: true },
@@ -20,70 +22,90 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.meshCellsVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshCellsVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const coloring_style_key = computed({
   get: () => dataStyleStore.meshCellsActiveColoring(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshCellsActiveColoring(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsActiveColoring(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const color = computed({
   get: () => dataStyleStore.meshCellsColor(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshCellsColor(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsColor(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const textures = computed({
   get: () => dataStyleStore.meshCellsTextures(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshCellsTextures(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsTextures(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_name = computed({
   get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshCellsVertexAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsVertexAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshCellsVertexAttributeRange(id.value, newValue[0], newValue[1]);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_color_map = computed({
   get: () => dataStyleStore.meshCellsVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshCellsVertexAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsVertexAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const cell_attribute_name = computed({
   get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshCellsCellAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsCellAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const cell_attribute_range = computed({
   get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshCellsCellAttributeRange(id.value, newValue[0], newValue[1]);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsCellAttributeRange(targetId, newValue[0], newValue[1]),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const cell_attribute_color_map = computed({
   get: () => dataStyleStore.meshCellsCellAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshCellsCellAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsCellAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -4,11 +4,13 @@ import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Opti
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps, btn_image, tooltip } = defineProps({
   itemProps: { type: Object, required: true },
@@ -21,28 +23,36 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.meshEdgesVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const size = computed({
   get: () => dataStyleStore.meshEdgesWidth(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesWidth(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesWidth(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const coloring_style_key = computed({
   get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesActiveColoring(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const color = computed({
   get: () => dataStyleStore.meshEdgesColor(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesColor(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesColor(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -4,11 +4,13 @@ import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Opti
 import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps, btn_image, tooltip } = defineProps({
   itemProps: { type: Object, required: true },
@@ -21,49 +23,63 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.meshPointsVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const size = computed({
   get: () => dataStyleStore.meshPointsSize(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsSize(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsSize(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const coloring_style_key = computed({
   get: () => dataStyleStore.meshPointsActiveColoring(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsActiveColoring(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsActiveColoring(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const color = computed({
   get: () => dataStyleStore.meshPointsColor(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsColor(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsColor(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_name = computed({
   get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsVertexAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVertexAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsVertexAttributeRange(id.value, newValue[0], newValue[1]);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_color_map = computed({
   get: () => dataStyleStore.meshPointsVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsVertexAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVertexAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue

@@ -3,11 +3,13 @@ import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/Cont
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps, btn_image, tooltip } = defineProps({
   itemProps: { type: Object, required: true },
@@ -20,28 +22,36 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.meshPolygonsVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const coloring_style_key = computed({
   get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsActiveColoring(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const color = computed({
   get: () => dataStyleStore.meshPolygonsColor(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsColor(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsColor(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const textures = computed({
   get: () => dataStyleStore.meshPolygonsTextures(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsTextures(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsTextures(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue

@@ -3,11 +3,13 @@ import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/Cont
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps, btn_image, tooltip } = defineProps({
   itemProps: { type: Object, required: true },
@@ -20,49 +22,63 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.meshPolyhedraVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const coloring_style_key = computed({
   get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraActiveColoring(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const color = computed({
   get: () => dataStyleStore.meshPolyhedraColor(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraColor(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraColor(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_name = computed({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraVertexAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraVertexAttributeRange(id.value, newValue[0], newValue[1]);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_color_map = computed({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const polyhedron_attribute_name = computed({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -80,7 +96,9 @@ const polyhedron_attribute_range = computed({
 const polyhedron_attribute_color_map = computed({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Generic/Model/EdgesOptions.vue

@@ -3,11 +3,13 @@ import SurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg";
 import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },
@@ -18,7 +20,9 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.modelEdgesVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setModelEdgesVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setModelEdgesVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Generic/Model/ModelStyleCard.vue

@@ -5,10 +5,20 @@ import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwi
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const dataStore = useDataStore();
+const treeviewStore = useTreeviewStore();
+
+function getBatchComponentIds(currentId) {
+  const { activeItems } = treeviewStore;
+  if (activeItems.includes(currentId) && activeItems.length > 1) {
+    return activeItems;
+  }
+  return [currentId];
+}
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },
@@ -40,11 +50,11 @@ const modelVisibility = computed({
 const modelComponentTypeVisibility = computed({
   get: () => selection.value.includes(componentType.value),
   set: async (newValue) => {
-    await dataStyleStore.setModelComponentTypeVisibility(
-      modelId.value,
-      componentType.value,
-      newValue,
+    const targetTypes = getBatchComponentIds(componentType.value);
+    const promises = targetTypes.map((type) =>
+      dataStyleStore.setModelComponentTypeVisibility(modelId.value, type, newValue),
     );
+    await Promise.all(promises);
     hybridViewerStore.remoteRender();
   },
 });
@@ -52,7 +62,8 @@ const modelComponentTypeVisibility = computed({
 const componentVisibility = computed({
   get: () => selection.value.includes(componentId.value),
   set: async (newValue) => {
-    await dataStyleStore.setModelComponentsVisibility(modelId.value, [componentId.value], newValue);
+    const targetIds = getBatchComponentIds(componentId.value);
+    await dataStyleStore.setModelComponentsVisibility(modelId.value, targetIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
@@ -68,7 +79,8 @@ const componentColor = computed({
       : undefined,
   set: async (color) => {
     if (componentId.value) {
-      await dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], color);
+      const targetIds = getBatchComponentIds(componentId.value);
+      await dataStyleStore.setModelComponentsColor(modelId.value, targetIds, color);
       hybridViewerStore.remoteRender();
     }
   },
@@ -81,7 +93,11 @@ const modelComponentTypeColor = computed({
       : undefined,
   set: async (color) => {
     if (componentType.value) {
-      await dataStyleStore.setModelComponentTypeColor(modelId.value, componentType.value, color);
+      const targetTypes = getBatchComponentIds(componentType.value);
+      const promises = targetTypes.map((type) =>
+        dataStyleStore.setModelComponentTypeColor(modelId.value, type, color),
+      );
+      await Promise.all(promises);
       hybridViewerStore.remoteRender();
     }
   },
@@ -91,11 +107,11 @@ const modelComponentTypeColorMode = computed({
   get: () => dataStyleStore.getModelComponentTypeColorMode(modelId.value, componentType.value),
   set: async (colorMode) => {
     if (componentType.value) {
-      await dataStyleStore.setModelComponentTypeColorMode(
-        modelId.value,
-        componentType.value,
-        colorMode,
+      const targetTypes = getBatchComponentIds(componentType.value);
+      const promises = targetTypes.map((type) =>
+        dataStyleStore.setModelComponentTypeColorMode(modelId.value, type, colorMode),
       );
+      await Promise.all(promises);
       hybridViewerStore.remoteRender();
     }
   },
@@ -105,7 +121,11 @@ const componentColorMode = computed({
   get: () => dataStyleStore.getModelComponentColorMode(modelId.value, componentId.value),
   set: async (colorMode) => {
     if (componentId.value) {
-      await dataStyleStore.setModelComponentColorMode(modelId.value, componentId.value, colorMode);
+      const targetIds = getBatchComponentIds(componentId.value);
+      const promises = targetIds.map((id) =>
+        dataStyleStore.setModelComponentColorMode(modelId.value, id, colorMode),
+      );
+      await Promise.all(promises);
       hybridViewerStore.remoteRender();
     }
   },

package/app/components/Viewer/Generic/Model/PointsOptions.vue

@@ -4,11 +4,13 @@ import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/Cont
 import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },
@@ -19,14 +21,18 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.modelPointsVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setModelPointsVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setModelPointsVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const size = computed({
   get: () => dataStyleStore.modelPointsSize(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setModelPointsSize(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setModelPointsSize(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue

@@ -5,10 +5,11 @@ import { useTreeKeyboardNav } from "@ogw_front/composables/tree_keyboard_nav";
 import { useTreeScroll } from "@ogw_front/composables/tree_scroll";
 import { useVirtualTree } from "@ogw_front/composables/virtual_tree";
 
-const { items, opened, selected, scrollTop, options } = defineProps({
+const { items, opened, selected, active, scrollTop, options } = defineProps({
   items: { type: Array, required: true },
   opened: { type: Array, required: false, default: () => [] },
   selected: { type: Array, required: false, default: () => [] },
+  active: { type: Array, required: false, default: () => [] },
   scrollTop: { type: Number, required: false, default: 0 },
   options: { type: Object, required: false, default: () => ({}) },
 });
@@ -18,6 +19,7 @@ const treeWrapper = ref(undefined);
 const emit = defineEmits([
   "update:opened",
   "update:selected",
+  "update:active",
   "click:item",
   "update:scrollTop",
   "hover:enter",
@@ -37,6 +39,7 @@ const {
     items,
     opened,
     selected,
+    active,
     ...options,
   })),
   emit,
@@ -49,11 +52,48 @@ const { virtualScrollRef, stickyHeader, handleScroll, scrollToIndex } = useTreeS
   actualItemProps,
 );
 
-function handleItemClick(item, index) {
+const lastActiveIndex = ref(-1);
+
+function handleItemClick(item, index, event) {
   if (index !== undefined) {
     focusedIndex.value = index;
   }
+
+  if (event && (event.ctrlKey || event.metaKey || event.shiftKey)) {
+    const newActive = new Set(active);
+    const id = item.raw[actualItemProps.value.value];
+
+    if (event.shiftKey && lastActiveIndex.value !== -1 && index !== undefined) {
+      const start = Math.min(lastActiveIndex.value, index);
+      const end = Math.max(lastActiveIndex.value, index);
+      for (let i = start; i <= end; i += 1) {
+        const rowItem = displayItems.value[i];
+        if (rowItem && rowItem.isLeaf) {
+          newActive.add(rowItem.raw[actualItemProps.value.value]);
+        }
+      }
+    } else {
+      if (newActive.has(id)) {
+        newActive.delete(id);
+      } else {
+        newActive.add(id);
+      }
+      if (index !== undefined) {
+        lastActiveIndex.value = index;
+      }
+    }
+    emit("update:active", [...newActive]);
+    return;
+  }
+
+  // Normal click
   if (item.isLeaf) {
+    const newActive = [item.raw[actualItemProps.value.value]];
+    emit("update:active", newActive);
+    if (index !== undefined) {
+      lastActiveIndex.value = index;
+    }
+
     toggleSelect(item.raw);
     emit("click:item", item.raw);
   } else {
@@ -104,13 +144,17 @@ const { focusedIndex, handleKeyDown } = useTreeKeyboardNav(
         <v-list-item
           :class="[
             'tree-row-wrapper',
-            { 'leaf-row': item.isLeaf, 'is-focused': focusedIndex === index },
+            {
+              'leaf-row': item.isLeaf,
+              'is-focused': focusedIndex === index,
+              'is-active': item.isActive,
+            },
           ]"
           class="pa-0"
           tabindex="-1"
           @mousedown.prevent
           @click="
-            handleItemClick(item, index);
+            handleItemClick(item, index, $event);
             treeWrapper.focus();
           "
           @mouseenter="emit('hover:enter', { item })"
@@ -176,7 +220,11 @@ const { focusedIndex, handleKeyDown } = useTreeKeyboardNav(
   box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15);
 }
 
-.tree-row-wrapper:hover:not(.is-focused) {
+.tree-row-wrapper.is-active {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+}
+
+.tree-row-wrapper:hover:not(.is-focused):not(.is-active) {
   background-color: rgba(0, 0, 0, 0.04) !important;
 }
 

package/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue

@@ -156,6 +156,7 @@ function expandAll() {
     <CommonTreeView
       :selected="visibleSelection"
       v-model:opened="opened"
+      v-model:active="treeviewStore.activeItems"
       :items="processedItems"
       :options="{
         selection: { selectable: true },

package/app/components/Viewer/ObjectTree/Views/ModelCollections.vue

@@ -160,6 +160,7 @@ function getLeafViewerIds(item) {
     <CommonTreeView
       :selected="visibleSelection"
       v-model:opened="opened"
+      v-model:active="treeviewStore.activeItems"
       :items="itemsForTreeView"
       :options="{
         selection: { selectable: true, strategy: 'classic' },

package/app/components/Viewer/ObjectTree/Views/ModelComponents.vue

@@ -151,6 +151,7 @@ function expandAll() {
     <CommonTreeView
       :selected="visibleSelection"
       v-model:opened="opened"
+      v-model:active="treeviewStore.activeItems"
       :items="itemsForTreeView"
       :options="{
         selection: { selectable: true, strategy: 'classic' },

package/app/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -4,11 +4,13 @@ import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/Cont
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },
@@ -19,49 +21,63 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.meshPointsVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const size = computed({
   get: () => dataStyleStore.meshPointsSize(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsSize(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsSize(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const coloring_style_key = computed({
   get: () => dataStyleStore.meshPointsActiveColoring(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsActiveColoring(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsActiveColoring(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const color = computed({
   get: () => dataStyleStore.meshPointsColor(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsColor(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsColor(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_name = computed({
   get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsVertexAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVertexAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsVertexAttributeRange(id.value, newValue[0], newValue[1]);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_color_map = computed({
   get: () => dataStyleStore.meshPointsVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPointsVertexAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVertexAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue

@@ -4,11 +4,13 @@ import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/Cont
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },
@@ -20,49 +22,63 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.meshPolyhedraVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const coloring_style_key = computed({
   get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraActiveColoring(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const color = computed({
   get: () => dataStyleStore.meshPolyhedraColor(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraColor(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraColor(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_name = computed({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraVertexAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraVertexAttributeRange(id.value, newValue[0], newValue[1]);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_color_map = computed({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const polyhedron_attribute_name = computed({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -80,7 +96,9 @@ const polyhedron_attribute_range = computed({
 const polyhedron_attribute_color_map = computed({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Surface/PolygonsOptions.vue

@@ -4,11 +4,13 @@ import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/Cont
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },
@@ -20,70 +22,90 @@ const id = toRef(() => itemProps.id);
 const visibility = computed({
   get: () => dataStyleStore.meshPolygonsVisibility(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsVisibility(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const coloring_style_key = computed({
   get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsActiveColoring(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const color = computed({
   get: () => dataStyleStore.meshPolygonsColor(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsColor(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsColor(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const textures = computed({
   get: () => dataStyleStore.meshPolygonsTextures(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsTextures(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsTextures(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_name = computed({
   get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsVertexAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsVertexAttributeRange(id.value, newValue[0], newValue[1]);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const vertex_attribute_color_map = computed({
   get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsVertexAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const polygon_attribute_name = computed({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsPolygonAttributeName(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const polygon_attribute_range = computed({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsPolygonAttributeRange(id.value, newValue[0], newValue[1]);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, newValue[0], newValue[1]),
+    );
     hybridViewerStore.remoteRender();
   },
 });
 const polygon_attribute_color_map = computed({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(id.value, newValue);
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });

package/app/composables/batch_style.js

@@ -0,0 +1,38 @@
+import { useDataStore } from "@ogw_front/stores/data";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+export function useBatchStyle() {
+  const treeviewStore = useTreeviewStore();
+  const dataStore = useDataStore();
+
+  async function applyBatchStyle(id, action) {
+    const isActive = treeviewStore.activeItems.includes(id);
+    if (!isActive || treeviewStore.activeItems.length <= 1) {
+      await action(id);
+      return;
+    }
+
+    try {
+      const currentItem = await dataStore.item(id);
+      const targetType = currentItem.geode_object_type;
+
+      const promises = treeviewStore.activeItems.map(async (selectedId) => {
+        try {
+          const item = await dataStore.item(selectedId);
+          if (item && item.geode_object_type === targetType) {
+            await action(selectedId);
+          }
+        } catch (error) {
+          console.error("Failed to apply batch style to item", selectedId, error);
+        }
+      });
+
+      await Promise.all(promises);
+    } catch (error) {
+      console.error("Failed to fetch current item for batch style", id, error);
+      await action(id);
+    }
+  }
+
+  return { applyBatchStyle };
+}

package/app/composables/virtual_tree.js

@@ -17,6 +17,7 @@ export function useVirtualTree(propsIn, emit) {
 
   const openedSet = computed(() => new Set(props.value.opened));
   const selectedSet = computed(() => new Set(props.value.selected));
+  const activeSet = computed(() => new Set(props.value.active || []));
 
   function toggleOpen(item) {
     const id = item[actualItemProps.value.value];
@@ -106,6 +107,7 @@ export function useVirtualTree(propsIn, emit) {
       const hasChildren = children && children.length > 0;
 
       const isOpen = openedSet.value.has(id);
+      const isActive = activeSet.value.has(id);
 
       if (lowerSearch) {
         const matches = customFilter
@@ -125,6 +127,7 @@ export function useVirtualTree(propsIn, emit) {
             id,
             depth,
             isOpen,
+            isActive,
             isLeaf: false,
           });
           if (isOpen) {
@@ -142,6 +145,7 @@ export function useVirtualTree(propsIn, emit) {
         id,
         depth,
         isOpen,
+        isActive,
         isLeaf: !hasChildren,
       });
 

package/app/stores/treeview.js

@@ -9,6 +9,7 @@ const PANEL_WIDTH = 300;
 export const useTreeviewStore = defineStore("treeview", () => {
   const items = ref([]);
   const selection = ref([]);
+  const activeItems = ref([]);
   const opened_views = ref([
     { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
   ]);
@@ -192,6 +193,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
   function clear() {
     items.value = [];
     selection.value = [];
+    activeItems.value = [];
     pendingSelectionIds.value = [];
     opened_views.value = [
       { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
@@ -261,6 +263,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
   return {
     items,
     selection,
+    activeItems,
     opened_views,
     panelWidth,
     additionalPanelWidth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.21.1-rc.2",
+  "version": "10.22.0-rc.2",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {