Skip to content

Update color button, map color based on maptype, isDarkMode #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kaytran2992 merged 3 commits into from
Jan 24, 2025
Merged

Update color button, map color based on maptype, isDarkMode #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
85c57a7
Update color button, map color based on maptype, isDarkMode
kaytran2992 Jan 24, 2025
512c5af
Update comment code
kaytran2992 Jan 24, 2025
8a32a37
Update seperate config button and map color
kaytran2992 Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions lib-compose/src/main/java/com/what3words/components/compose/maps/W3WMapComponent.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,11 @@ import androidx.compose.ui.layout.boundsInParent
import androidx.compose.ui.layout.onGloballyPositioned
import com.google.accompanist.permissions.ExperimentalPermissionsApi
import com.google.accompanist.permissions.rememberMultiplePermissionsState
import com.what3words.components.compose.maps.W3WMapDefaults.MapColors
import com.what3words.components.compose.maps.W3WMapDefaults.defaultMapColors
import com.what3words.components.compose.maps.buttons.W3WMapButtons
import com.what3words.components.compose.maps.buttons.W3WMapButtonsDefault
import com.what3words.components.compose.maps.buttons.W3WMapButtonsDefault.defaultButtonColors
import com.what3words.components.compose.maps.models.W3WGridScreenCell
import com.what3words.components.compose.maps.models.W3WLocationSource
import com.what3words.components.compose.maps.models.W3WMapProjection
Expand Down Expand Up @@ -50,6 +54,13 @@ import kotlinx.coroutines.launch
* @param modifier Modifier for styling and layout.
* @param layoutConfig [W3WMapDefaults.LayoutConfig] Configuration for the map's layout.
* @param mapConfig [W3WMapDefaults.MapConfig] Configuration for the map's appearance such as custom dark mode, grid line config.
* Determines the map's color scheme based on the current map type and dark mode setting.
* - If the `mapType` is `NORMAL` or `TERRAIN`:
* - If `isDarkMode` is `true`, the dark color scheme (`darkMapColor`) is used.
* - If `isDarkMode` is `false`, the normal color scheme (`normalMapColor`) is used.
* - If the `mapType` is `HYBRID` or `SATELLITE`, the satellite color scheme (`satelliteMapColor`) is used, regardless of the dark mode setting.
* @param mapColors [W3WMapDefaults.MapColor] Configuration for the map's color such as light, dark and satellite mode will based on mapType and state isDarkMode
* @param buttonColors [W3WMapButtonsDefault.ButtonColors] Configuration for the button's color which are applied according to the current theme
* @param mapManager The [W3WMapManager] instance that manages the map's mapState and interactions.
* @param locationSource An optional [W3WLocationSource] used to fetch the user's location.
* @param content Optional composable content to be displayed on the map.
Expand All @@ -60,6 +71,8 @@ fun W3WMapComponent(
modifier: Modifier = Modifier,
layoutConfig: W3WMapDefaults.LayoutConfig = W3WMapDefaults.defaultLayoutConfig(),
mapConfig: W3WMapDefaults.MapConfig = W3WMapDefaults.defaultMapConfig(),
buttonColors: W3WMapButtonsDefault.ButtonColors = defaultButtonColors(),
mapColors: MapColors = defaultMapColors(),
mapManager: W3WMapManager,
onSelectedSquareChanged: (W3WAddress) -> Unit,
locationSource: W3WLocationSource? = null,
Expand Down Expand Up @@ -102,6 +115,8 @@ fun W3WMapComponent(
modifier = modifier,
layoutConfig = currentLayoutConfig.value,
mapConfig = currentMapConfig.value,
mapColors = mapColors,
buttonColors = buttonColors,
mapProvider = mapManager.mapProvider,
content = content,
mapState = mapState,
Expand Down Expand Up @@ -157,6 +172,13 @@ fun W3WMapComponent(
* @param modifier Modifier for styling and layout.
* @param layoutConfig [W3WMapDefaults.LayoutConfig] Configuration for the map's layout.
* @param mapConfig [W3WMapDefaults.MapConfig] Configuration for the map's appearance.
* Determines the map's color scheme based on the current map type and dark mode setting.
* - If the `mapType` is `NORMAL` or `TERRAIN`:
* - If `isDarkMode` is `true`, the dark color scheme (`darkMapColor`) is used.
* - If `isDarkMode` is `false`, the normal color scheme (`normalMapColor`) is used.
* - If the `mapType` is `HYBRID` or `SATELLITE`, the satellite color scheme (`satelliteMapColor`) is used, regardless of the dark mode setting.
* @param mapColors [W3WMapDefaults.MapColor] Configuration for the map's color such as light, dark and satellite mode will based on mapType and state isDarkMode
* @param buttonColors [W3WMapButtonsDefault.ButtonColors] Configuration for the button's color which are applied according to the current theme
* @param mapState The [W3WMapState] object that holds the mapState of the map.
* @param buttonState The [W3WButtonsState] object that holds the buttonState of the map.
* @param mapProvider An instance of enum [MapProvider] to define map provide: GoogleMap, MapBox.
Expand All @@ -172,6 +194,8 @@ fun W3WMapComponent(
modifier: Modifier = Modifier,
layoutConfig: W3WMapDefaults.LayoutConfig = W3WMapDefaults.defaultLayoutConfig(),
mapConfig: W3WMapDefaults.MapConfig = W3WMapDefaults.defaultMapConfig(),
buttonColors: W3WMapButtonsDefault.ButtonColors = defaultButtonColors(),
mapColors: MapColors = defaultMapColors(),
mapState: W3WMapState,
buttonState: W3WButtonsState,
mapProvider: MapProvider,
Expand All @@ -191,6 +215,8 @@ fun W3WMapComponent(
modifier = modifier,
layoutConfig = layoutConfig,
mapConfig = mapConfig,
mapColors = mapColors,
buttonColors = buttonColors,
mapProvider = mapProvider,
content = content,
mapState = mapState,
Expand Down Expand Up @@ -233,6 +259,13 @@ fun W3WMapComponent(
** @param modifier Modifier for styling and layout.
* @param layoutConfig [W3WMapDefaults.LayoutConfig] Configuration for the map's layout.
* @param mapConfig [W3WMapDefaults.MapConfig] Configuration for the map's appearance.
* Determines the map's color scheme based on the current map type and dark mode setting.
* - If the `mapType` is `NORMAL` or `TERRAIN`:
* - If `isDarkMode` is `true`, the dark color scheme (`darkMapColor`) is used.
* - If `isDarkMode` is `false`, the normal color scheme (`normalMapColor`) is used.
* - If the `mapType` is `HYBRID` or `SATELLITE`, the satellite color scheme (`satelliteMapColor`) is used, regardless of the dark mode setting.
* @param mapColors [W3WMapDefaults.MapColors] Configuration for the map's color such as light, dark and satellite mode will based on mapType and state isDarkMode
* @param buttonColors [W3WMapButtonsDefault.ButtonColors] Configuration for the button's color which are applied according to the current theme
* @param mapState The [W3WMapState] object that holds the mapState of the map.
* @param buttonState The [W3WButtonsState] object that holds the buttonState of the map.
* @param mapProvider An instance of enum [MapProvider] to define map provide: GoogleMap, MapBox.
Expand All @@ -248,6 +281,8 @@ internal fun W3WMapContent(
modifier: Modifier = Modifier,
layoutConfig: W3WMapDefaults.LayoutConfig = W3WMapDefaults.defaultLayoutConfig(),
mapConfig: W3WMapDefaults.MapConfig = W3WMapDefaults.defaultMapConfig(),
buttonColors: W3WMapButtonsDefault.ButtonColors = defaultButtonColors(),
mapColors: MapColors = defaultMapColors(),
mapState: W3WMapState,
buttonState: W3WButtonsState,
mapProvider: MapProvider,
Expand Down Expand Up @@ -279,6 +314,19 @@ internal fun W3WMapContent(
}
}

val mapColor = remember(mapState.mapType, mapState.isDarkMode) {
when(mapState.mapType) {
W3WMapType.NORMAL,
W3WMapType.TERRAIN -> {
if(mapState.isDarkMode) mapColors.darkMapColor else mapColors.normalMapColor
}
W3WMapType.HYBRID,
W3WMapType.SATELLITE -> {
mapColors.satelliteMapColor
}
}
}

LaunchedEffect(bounds) {
bounds.let {
val leftTop = PointF(it.left, it.top)
Expand All @@ -305,6 +353,7 @@ internal fun W3WMapContent(
modifier = modifier,
layoutConfig = layoutConfig,
mapConfig = mapConfig,
mapColor = mapColor,
mapProvider = mapProvider,
mapState = mapState,
onMarkerClicked = onMarkerClicked,
Expand All @@ -320,6 +369,7 @@ internal fun W3WMapContent(
.padding(layoutConfig.contentPadding),
buttonConfig = mapConfig.buttonConfig,
buttonState = buttonState,
buttonColors = buttonColors,
isLocationEnabled = mapState.isMyLocationEnabled,
onMapTypeClicked = onMapTypeClicked,
onMyLocationClicked = onMyLocationClicked,
Expand Down Expand Up @@ -386,6 +436,7 @@ internal fun MapPermissionsHandler(
* @param modifier Modifier for styling and layout of the map view.
* @param layoutConfig [W3WMapDefaults.LayoutConfig] Configuration for the map's layout.
* @param mapConfig [W3WMapDefaults.MapConfig] Configuration for the map's appearance.
* @param mapColor [W3WMapDefaults.MapColor] Configuration for the map's appearance color such gridLine, marker.
* @param mapProvider An instance of enum [MapProvider] to define map provide: GoogleMap, MapBox.
* @param mapState The [W3WMapState] object that holds the mapState of the map.
* @param content Optional composable content to be displayed on the map.
Expand All @@ -397,6 +448,7 @@ internal fun W3WMapView(
modifier: Modifier,
layoutConfig: W3WMapDefaults.LayoutConfig,
mapConfig: W3WMapDefaults.MapConfig,
mapColor: W3WMapDefaults.MapColor,
mapProvider: MapProvider,
mapState: W3WMapState,
content: (@Composable () -> Unit)? = null,
Expand All @@ -411,6 +463,7 @@ internal fun W3WMapView(
modifier = modifier,
layoutConfig = layoutConfig,
mapConfig = mapConfig,
mapColor = mapColor,
state = mapState,
content = content,
onMapClicked = onMapClicked,
Expand All @@ -425,6 +478,7 @@ internal fun W3WMapView(
modifier = modifier,
layoutConfig = layoutConfig,
mapConfig = mapConfig,
mapColor = mapColor,
state = mapState,
content = content,
onMapClicked = onMapClicked,
Expand Down
100 changes: 73 additions & 27 deletions lib-compose/src/main/java/com/what3words/components/compose/maps/W3WMapDefaults.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.what3words.components.compose.maps.buttons.W3WMapButtonsDefault
import com.what3words.components.compose.maps.buttons.W3WMapButtonsDefault.defaultButtonColors
import com.what3words.components.compose.maps.models.DarkModeStyle
import com.what3words.components.compose.maps.models.W3WMarkerColor
import com.what3words.core.types.geometry.W3WCoordinates
Expand All @@ -24,8 +26,6 @@ enum class MapProvider {
object W3WMapDefaults {
val LOCATION_DEFAULT = W3WCoordinates(51.521251, -0.203586)
val MARKER_COLOR_DEFAULT = W3WMarkerColor(background = Color.Red, slash = Color.White)
private val SELECTED_ZOOM_OUT_MARKER_COLOR_DEFAULT =
W3WMarkerColor(background = Color(0xFF0A3049), slash = Color.White)
const val MIN_SUPPORT_GRID_ZOOM_LEVEL_GOOGLE = 19f
const val MIN_SUPPORT_GRID_ZOOM_LEVEL_MAP_BOX = 18.5f

Expand All @@ -41,9 +41,6 @@ object W3WMapDefaults {
val darkModeCustomJsonStyle: String = DarkModeStyle.darkMode,
val isBuildingEnable: Boolean,

// Marker
val markerConfig: MarkerConfig,

// Grid view
val gridLineConfig: GridLinesConfig,

Expand All @@ -55,7 +52,6 @@ object W3WMapDefaults {
* Data class representing the configuration for grid lines on the map.
*
* @property isGridEnabled Whether the grid is enabled or not.
* @property gridColor The color of the grid lines.
* @property gridLineWidth The width of the grid lines.
* @property zoomSwitchLevel The zoom level at which the grid appearance changes.
* @property gridScale The scale factor for the grid. Determines how much larger the grid is
Expand All @@ -65,8 +61,6 @@ object W3WMapDefaults {
@Immutable
data class GridLinesConfig(
val isGridEnabled: Boolean,
val gridColor: Color,
val gridColorDarkMode: Color,
val gridLineWidth: Dp,
val zoomSwitchLevel: Float,
val gridScale: Float
Expand Down Expand Up @@ -100,11 +94,23 @@ object W3WMapDefaults {
)

@Immutable
data class MarkerConfig(
val defaultMarkerColor: W3WMarkerColor,
data class MapColors(
val normalMapColor: MapColor,
val darkMapColor: MapColor,
val satelliteMapColor: MapColor
)

@Immutable
data class MapColor(
val gridLineColor: Color,
val markerColors: MarkerColors
)

@Immutable
data class MarkerColors(
val selectedColor: Color,
val selectedZoomOutColor: W3WMarkerColor,
val selectedZoomInColor: Color,
val selectedZoomInColorDarkMode: Color,
val defaultMarkerColor: W3WMarkerColor
)

@Composable
Expand All @@ -121,29 +127,23 @@ object W3WMapDefaults {
isBuildingEnable: Boolean = false,
gridLineConfig: GridLinesConfig = defaultGridLinesConfig(),
buttonConfig: ButtonConfig = defaultButtonConfig(),
markerConfig: MarkerConfig = defaultMarkerConfig()
): MapConfig {
return MapConfig(
darkModeCustomJsonStyle = darkModeCustomJsonStyle,
isBuildingEnable = isBuildingEnable,
gridLineConfig = gridLineConfig,
buttonConfig = buttonConfig,
markerConfig = markerConfig
)
}

fun defaultGridLinesConfig(
isGridEnabled: Boolean = true,
gridColor: Color = Color(0xB3697F8D),
gridColorDarkMode: Color = Color(0xB3697F8D),
zoomSwitchLevel: Float = 19f,
gridLineWidth: Dp = 2.dp,
gridScale: Float = 6f
): GridLinesConfig {
return GridLinesConfig(
isGridEnabled = isGridEnabled,
gridColor = gridColor,
gridColorDarkMode = gridColorDarkMode,
zoomSwitchLevel = zoomSwitchLevel,
gridLineWidth = gridLineWidth,
gridScale = gridScale
Expand All @@ -162,17 +162,63 @@ object W3WMapDefaults {
)
}

fun defaultMarkerConfig(
selectedZoomOutColor: W3WMarkerColor = SELECTED_ZOOM_OUT_MARKER_COLOR_DEFAULT,
defaultMarkerColor: W3WMarkerColor = MARKER_COLOR_DEFAULT,
selectedColor: Color = Color.Black,
selectedColorDarkMode: Color = Color.White
): MarkerConfig {
return MarkerConfig(
fun defaultMapColors(
normalMapColor: MapColor = defaultNormalMapColor(),
darkMapColor: MapColor = defaultDarkMapColor(),
satelliteMapColor: MapColor = defaultSatelliteMapColor()
): MapColors {
return MapColors(
normalMapColor = normalMapColor,
satelliteMapColor = satelliteMapColor,
darkMapColor = darkMapColor
)
}

fun defaultNormalMapColor(
gridLineColor: Color = Color(0x29697F8D),
markerColors: MarkerColors = defaultMarkerColor()
): MapColor {
return MapColor(
gridLineColor = gridLineColor,
markerColors = markerColors
)
}

fun defaultSatelliteMapColor(
gridLineColor: Color = Color(0x29FFFFFF),
markerColors: MarkerColors = defaultMarkerColor(
selectedZoomOutColor = W3WMarkerColor(background = Color(0xffdbeffa), slash = Color(0xff0a3049)),
selectedColor = Color(0xfffcfcff)
)
): MapColor {
return MapColor(
gridLineColor = gridLineColor,
markerColors = markerColors
)
}

fun defaultDarkMapColor(
gridLineColor: Color = Color(0x29FFFFFF),
markerColors: MarkerColors = defaultMarkerColor(
selectedZoomOutColor = W3WMarkerColor(background = Color(0xffdbeffa), slash = Color(0xff0a3049)),
selectedColor = Color(0xfffcfcff)
)
): MapColor {
return MapColor(
gridLineColor = gridLineColor,
markerColors = markerColors
)
}

fun defaultMarkerColor(
selectedZoomOutColor: W3WMarkerColor = W3WMarkerColor(background = Color(0xFF0A3049), slash = Color(0xFFFCFCFF)),
defaultMarkerColor: W3WMarkerColor = W3WMarkerColor(background = Color(0xffe11f26), slash = Color(0xfffffbff)),
selectedColor: Color = Color(0xFF0A3049),
): MarkerColors {
return MarkerColors(
selectedZoomOutColor = selectedZoomOutColor,
defaultMarkerColor = defaultMarkerColor,
selectedZoomInColor = selectedColor,
selectedZoomInColorDarkMode = selectedColorDarkMode
selectedColor = selectedColor
)
}
}
Loading
Loading