feat(map): improve icon text coloring and alignment (#355)

* fix(graphql): remove local fields * feat(map): improve icon text coloring and alignment
f-eld-ch · Feb 22, 2024 · 5a48958 · 5a48958
1 parent f9a9314
commit 5a48958
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 35 deletions.
diff --git a/ui/src/cache.tsx b/ui/src/cache.tsx
@@ -1,23 +1,22 @@
 import { InMemoryCache, makeVar } from "@apollo/client";
 
-// active drawing Layer
-export const activeLayerVar = makeVar<string>("");
-
 // active Incident
 export const activeIncidentVar = makeVar<string>("");
 
 
-export const cache: InMemoryCache = new InMemoryCache({
-    typePolicies: {
-        Layers: {
-            fields: {
-                isActive: {
-                    read(_, { readField }) {
-                        const layerId = readField('id');
-                        return layerId === activeLayerVar()
-                    }
-                }
-            }
-        }
-    }
-});
+export const cache: InMemoryCache = new InMemoryCache(
+    // {
+    //     typePolicies: {
+    //         Layers: {
+    //             fields: {
+    //                 isActive: {
+    //                     read(_, { readField }) {
+    //                         const layerId = readField('id');
+    //                         return layerId === activeLayerVar()
+    //                     }
+    //                 }
+    //             }
+    //         }
+    //     }
+    // }
+);
diff --git a/ui/src/types/layer.ts b/ui/src/types/layer.ts
@@ -3,7 +3,6 @@ import { Incident } from "./incident";
 
 export type Layer = {
   id: string;
-  isActive: boolean;
   name: string;
   incident: Incident;
   features: Feature[];

diff --git a/ui/src/views/map/Map.tsx b/ui/src/views/map/Map.tsx
@@ -197,7 +197,6 @@ function Draw(props: { activeLayer: string | undefined }) {
 
     const onCreate = useCallback((e: FeatureEvent) => {
         if (props.activeLayer === undefined) {
-            console.log("undefined active layer")
             return
         }
 
@@ -223,8 +222,6 @@ function Draw(props: { activeLayer: string | undefined }) {
     }, [props.activeLayer, dispatch, addFeature]);
 
     const onUpdate = useCallback((e: FeatureEvent) => {
-        console.log("[onUpdate]", e)
-
         const updatedFeatures: Feature[] = e.features;
         updatedFeatures.forEach(f => {
             let feature = CleanFeature(f);

diff --git a/ui/src/views/map/controls/BabsIconController.tsx b/ui/src/views/map/controls/BabsIconController.tsx
@@ -95,14 +95,13 @@ function IconGroupMenu(props: GroupMenuProps) {
         let properties: GeoJsonProperties = Object.assign({}, feature.properties, {
             "icon": i.name,
             "iconType": i.name,
-            // "iconRotation": feature.geometry.type === "LineString" ? calculateIconRotationForLines(feature as Feature<LineString>) : iconRotation
+            "color": ColorsForIconGroup[name],
         });
-
         feature.properties = omitBy(properties, isUndefined || isEmpty);
         onUpdate({ features: [feature], action: "featureDetail" });
         setActive(!active);
 
-    }, [setActive, active, onUpdate, feature])
+    }, [feature, name, onUpdate, active])
 
 
     if (active || lastIcon === undefined) {
@@ -235,9 +234,27 @@ interface TypesType {
 const Colors = {
     Red: "#ff0000",
     Blue: "#0000ff",
-    Black: '#000000',
+    Black: "#000000",
+    Orange: "#F38D11",
 }
 
+type ColorsForIconGroupType = {
+    [key: string]: string;
+};
+
+const ColorsForIconGroup: ColorsForIconGroupType = {
+    'Schäden': Colors.Red,
+    'Schadenauswirkungen': Colors.Red,
+    'Einrichtungen Im Einsatzraum': Colors.Blue,
+    'Zivile Führungsstandorte': Colors.Blue,
+    'Zivile Mittel': Colors.Blue,
+    'Fahrzeuge': Colors.Blue,
+    'Bildhafte Signaturen (Gesellschaft)': Colors.Red,
+    'Bildhafte Signaturen (Natur)': Colors.Red,
+    'Bildhafte Signaturen (Technisch)': Colors.Red,
+    'Gefahren': Colors.Red,
+};
+
 const ZoneTypes: SelectableTypes = {
     "Einsatzraum": {
         name: "Einsatzraum", description: "Einsatzraum", icon: ZonePatterns.Einsatzraum, color: Colors.Blue

diff --git a/ui/src/views/map/graphql.ts b/ui/src/views/map/graphql.ts
@@ -4,7 +4,6 @@ const GET_LAYERS = gql`
     query GetLayers($incidentId: uuid!) {
         layers(where: {incidentId: {_eq: $incidentId}}) {
             id
-            isActive @client
             name
             features {
                 id

diff --git a/ui/src/views/map/style.ts b/ui/src/views/map/style.ts
@@ -287,6 +287,8 @@ export const drawStyle: LayerProps[] = [
             'text-font': ["B612 Bold"],
             'text-anchor': 'center',
             'text-offset': [0, 0],
+            'icon-text-fit': "both",
+            'icon-text-fit-padding': [20, 20, 20, 20],
             'text-ignore-placement': true,
             'text-size': ['interpolate', ['linear'], ['zoom'], 12, 4, 17, 22]
         },
@@ -308,13 +310,14 @@ export const drawStyle: LayerProps[] = [
         'layout': {
             'text-field': ["coalesce", ["get", "user_name"], ""],
             'text-font': ["B612 Bold"],
-            'text-anchor': 'right',
-            'text-offset': [2.25, 0.25],
+            'text-anchor': 'left',
+            'text-offset': [1.5, 0.1],
             'text-ignore-placement': true,
-            'text-size': ['interpolate', ['linear'], ['zoom'], 12, 4, 17, 22]
+            'text-justify': "right",
+            'text-size': ['interpolate', ['linear'], ['zoom'], 12, 4, 18, 28]
         },
         'paint': {
-            'text-color': '#ff0000',
+            'text-color': ['coalesce', ['get', 'user_color'], '#ff0000'],
         }
     },
     {
@@ -323,6 +326,7 @@ export const drawStyle: LayerProps[] = [
         'filter': ['all',
             ['==', 'meta', 'feature'],
             ['has', 'user_name'],
+            ['has', 'user_color'],
             ['!in', 'user_icon', 'EingesperrteAbgeschnittene', 'Obdachlose', 'Tote', 'Vermisste', 'Verletzte'],
             ['==', '$type', 'Point'],
             ['!=', 'mode', 'static']
@@ -331,9 +335,9 @@ export const drawStyle: LayerProps[] = [
             'text-field': ["coalesce", ["get", "user_name"], ""],
             'text-font': ["B612 Bold"],
             'text-anchor': 'center',
-            'text-offset': [0, 1.75],
+            'text-offset': [0, 2],
             'text-ignore-placement': true,
-            'text-size': ['interpolate', ['linear'], ['zoom'], 11, 2, 17, 16]
+            'text-size': ['interpolate', ['linear'], ['zoom'], 13, 2, 17, 16]
         },
         'paint': {
             'text-color': ['coalesce', ['get', 'user_color'], '#000000'],
@@ -652,13 +656,13 @@ export const displayStyle: LayerProps[] = [
         'layout': {
             'text-field': ["coalesce", ["get", "name"], ""],
             'text-font': ["B612 Bold"],
-            'text-anchor': 'right',
-            'text-offset': [2.25, 0.25],
+            'text-anchor': 'left',
+            'text-offset': [3, 0],
             'text-ignore-placement': true,
             'text-size': ['interpolate', ['linear'], ['zoom'], 12, 4, 17, 22]
         },
         'paint': {
-            'text-color': '#ff0000',
+            'text-color': ['coalesce', ['get', 'color'], '#ff0000'],
         }
     },
     {