feat(attributes): Update attribute metadata to support vectorial attr…

app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -56,10 +56,13 @@ const color = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshEdgesVertexAttributeName(id.value),
+    item: dataStyleStore.meshEdgesVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
@@ -83,10 +86,13 @@ const vertex_attribute_color_map = computed({
   },
 });
 const edge_attribute_name = computed({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+    item: dataStyleStore.meshEdgesEdgeAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue),
+      dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },

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

@@ -56,10 +56,13 @@ const textures = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshCellsVertexAttributeName(id.value),
+    item: dataStyleStore.meshCellsVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshCellsVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshCellsVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
@@ -83,10 +86,13 @@ const vertex_attribute_color_map = computed({
   },
 });
 const cell_attribute_name = computed({
-  get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshCellsCellAttributeName(id.value),
+    item: dataStyleStore.meshCellsCellAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshCellsCellAttributeName(targetId, newValue),
+      dataStyleStore.setMeshCellsCellAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },

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

@@ -57,10 +57,13 @@ const color = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPointsVertexAttributeName(id.value),
+    item: dataStyleStore.meshPointsVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPointsVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPointsVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },

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

@@ -47,10 +47,13 @@ const color = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
+    item: dataStyleStore.meshPolyhedraVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
@@ -74,10 +77,17 @@ const vertex_attribute_color_map = computed({
   },
 });
 const polyhedron_attribute_name = computed({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
+    item: dataStyleStore.meshPolyhedraPolyhedronAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(
+        targetId,
+        newValue.name,
+        newValue.item,
+      ),
     );
     hybridViewerStore.remoteRender();
   },

app/components/Viewer/Generic/Model/BlocksOptions.vue

@@ -67,9 +67,17 @@ const blockActiveColoring = computed({
 
 // Group Attributes
 const blocksVertexAttributeName = computed({
-  get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId, targetBlockIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelBlocksVertexAttributeName(modelId, targetBlockIds[0]),
+    item: dataStyleStore.modelBlocksVertexAttributeValue(modelId, targetBlockIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksVertexAttributeName(modelId, targetBlockIds, newValue);
+    await dataStyleStore.setModelBlocksVertexAttributeName(
+      modelId,
+      targetBlockIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -96,9 +104,17 @@ const blocksVertexAttributeColorMap = computed({
 });
 
 const blocksPolyhedronAttributeName = computed({
-  get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, targetBlockIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, targetBlockIds[0]),
+    item: dataStyleStore.modelBlocksPolyhedronAttributeValue(modelId, targetBlockIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, targetBlockIds, newValue);
+    await dataStyleStore.setModelBlocksPolyhedronAttributeName(
+      modelId,
+      targetBlockIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -130,9 +146,17 @@ const blocksPolyhedronAttributeColorMap = computed({
 
 // Individual Attributes
 const vertexAttributeName = computed({
-  get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId, blockId),
+  get: () => ({
+    name: dataStyleStore.modelBlocksVertexAttributeName(modelId, blockId),
+    item: dataStyleStore.modelBlocksVertexAttributeValue(modelId, blockId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksVertexAttributeName(modelId, [blockId], newValue);
+    await dataStyleStore.setModelBlocksVertexAttributeName(
+      modelId,
+      [blockId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -159,9 +183,17 @@ const vertexAttributeColorMap = computed({
 });
 
 const polyhedronAttributeName = computed({
-  get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, blockId),
+  get: () => ({
+    name: dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, blockId),
+    item: dataStyleStore.modelBlocksPolyhedronAttributeValue(modelId, blockId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, [blockId], newValue);
+    await dataStyleStore.setModelBlocksPolyhedronAttributeName(
+      modelId,
+      [blockId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });

app/components/Viewer/Generic/Model/CornersOptions.vue

@@ -68,9 +68,17 @@ const cornerActiveColoring = computed({
 
 // Group Attributes
 const cornersVertexAttributeName = computed({
-  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, targetCornerIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelCornersVertexAttributeName(modelId, targetCornerIds[0]),
+    item: dataStyleStore.modelCornersVertexAttributeValue(modelId, targetCornerIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelCornersVertexAttributeName(modelId, targetCornerIds, newValue);
+    await dataStyleStore.setModelCornersVertexAttributeName(
+      modelId,
+      targetCornerIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -98,9 +106,17 @@ const cornersVertexAttributeColorMap = computed({
 
 // Individual Attributes
 const vertexAttributeName = computed({
-  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, cornerId),
+  get: () => ({
+    name: dataStyleStore.modelCornersVertexAttributeName(modelId, cornerId),
+    item: dataStyleStore.modelCornersVertexAttributeValue(modelId, cornerId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelCornersVertexAttributeName(modelId, [cornerId], newValue);
+    await dataStyleStore.setModelCornersVertexAttributeName(
+      modelId,
+      [cornerId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });

app/components/Viewer/Generic/Model/LinesOptions.vue

@@ -67,9 +67,17 @@ const lineActiveColoring = computed({
 
 // Group Attributes
 const linesVertexAttributeName = computed({
-  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, targetLineIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelLinesVertexAttributeName(modelId, targetLineIds[0]),
+    item: dataStyleStore.modelLinesVertexAttributeValue(modelId, targetLineIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesVertexAttributeName(modelId, targetLineIds, newValue);
+    await dataStyleStore.setModelLinesVertexAttributeName(
+      modelId,
+      targetLineIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -96,9 +104,17 @@ const linesVertexAttributeColorMap = computed({
 });
 
 const linesEdgeAttributeName = computed({
-  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, targetLineIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelLinesEdgeAttributeName(modelId, targetLineIds[0]),
+    item: dataStyleStore.modelLinesEdgeAttributeValue(modelId, targetLineIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, targetLineIds, newValue);
+    await dataStyleStore.setModelLinesEdgeAttributeName(
+      modelId,
+      targetLineIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -126,9 +142,17 @@ const linesEdgeAttributeColorMap = computed({
 
 // Individual Attributes
 const vertexAttributeName = computed({
-  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, lineId),
+  get: () => ({
+    name: dataStyleStore.modelLinesVertexAttributeName(modelId, lineId),
+    item: dataStyleStore.modelLinesVertexAttributeValue(modelId, lineId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesVertexAttributeName(modelId, [lineId], newValue);
+    await dataStyleStore.setModelLinesVertexAttributeName(
+      modelId,
+      [lineId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -155,9 +179,17 @@ const vertexAttributeColorMap = computed({
 });
 
 const edgeAttributeName = computed({
-  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, lineId),
+  get: () => ({
+    name: dataStyleStore.modelLinesEdgeAttributeName(modelId, lineId),
+    item: dataStyleStore.modelLinesEdgeAttributeValue(modelId, lineId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, [lineId], newValue);
+    await dataStyleStore.setModelLinesEdgeAttributeName(
+      modelId,
+      [lineId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });

app/components/Viewer/Generic/Model/SurfacesOptions.vue

@@ -67,9 +67,17 @@ const surfaceActiveColoring = computed({
 
 // Group Attributes
 const surfacesVertexAttributeName = computed({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, targetSurfaceIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelSurfacesVertexAttributeName(modelId, targetSurfaceIds[0]),
+    item: dataStyleStore.modelSurfacesVertexAttributeValue(modelId, targetSurfaceIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, targetSurfaceIds, newValue);
+    await dataStyleStore.setModelSurfacesVertexAttributeName(
+      modelId,
+      targetSurfaceIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -100,9 +108,17 @@ const surfacesVertexAttributeColorMap = computed({
 });
 
 const surfacesPolygonAttributeName = computed({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, targetSurfaceIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelSurfacesPolygonAttributeName(modelId, targetSurfaceIds[0]),
+    item: dataStyleStore.modelSurfacesPolygonAttributeValue(modelId, targetSurfaceIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, targetSurfaceIds, newValue);
+    await dataStyleStore.setModelSurfacesPolygonAttributeName(
+      modelId,
+      targetSurfaceIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -134,9 +150,17 @@ const surfacesPolygonAttributeColorMap = computed({
 
 // Individual Attributes
 const vertexAttributeName = computed({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, surfaceId),
+  get: () => ({
+    name: dataStyleStore.modelSurfacesVertexAttributeName(modelId, surfaceId),
+    item: dataStyleStore.modelSurfacesVertexAttributeValue(modelId, surfaceId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, [surfaceId], newValue);
+    await dataStyleStore.setModelSurfacesVertexAttributeName(
+      modelId,
+      [surfaceId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -163,9 +187,17 @@ const vertexAttributeColorMap = computed({
 });
 
 const polygonAttributeName = computed({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, surfaceId),
+  get: () => ({
+    name: dataStyleStore.modelSurfacesPolygonAttributeName(modelId, surfaceId),
+    item: dataStyleStore.modelSurfacesPolygonAttributeValue(modelId, surfaceId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, [surfaceId], newValue);
+    await dataStyleStore.setModelSurfacesPolygonAttributeName(
+      modelId,
+      [surfaceId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });