From 3b2810954b64ca97f815f2495a06ebc7c444a4a0 Mon Sep 17 00:00:00 2001 From: David Iglesias Teixeira Date: Wed, 30 Sep 2020 21:59:16 -0700 Subject: [PATCH 1/5] [google_maps_flutter_web] Convert initial Polyline/Polygon points correctly. Fixes https://github.com/flutter/flutter/issues/65152 --- .../google_maps_flutter_web/lib/src/convert.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart b/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart index 0ec00871e676..5d0969fab5e6 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart +++ b/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart @@ -319,7 +319,7 @@ Set _rawOptionsToInitialPolylines(Map rawOptions) { zIndex: rawPolyline['zIndex'], width: rawPolyline['width'], points: rawPolyline['points'] - ?.map((rawPoint) => LatLng.fromJson(rawPoint)) + ?.map((rawPoint) => LatLng.fromJson(rawPoint)) ?.toList(), ); }) ?? @@ -342,7 +342,7 @@ Set _rawOptionsToInitialPolygons(Map rawOptions) { visible: rawPolygon['visible'], zIndex: rawPolygon['zIndex'], points: rawPolygon['points'] - ?.map((rawPoint) => LatLng.fromJson(rawPoint)) + ?.map((rawPoint) => LatLng.fromJson(rawPoint)) ?.toList(), ); }) ?? From 82a68cffa446e88a8c650e31de3eb2bc2dc53b6b Mon Sep 17 00:00:00 2001 From: David Iglesias Teixeira Date: Wed, 30 Sep 2020 22:01:49 -0700 Subject: [PATCH 2/5] [google_maps_flutter_web] Convert Flutter Color to CSS correctly. Fixes https://github.com/flutter/flutter/issues/67032 --- .../lib/src/convert.dart | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart b/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart index 5d0969fab5e6..3e1b1f182fc9 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart +++ b/packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart @@ -13,6 +13,8 @@ final _nullLatLngBounds = LatLngBounds( // Defaults taken from the Google Maps Platform SDK documentation. final _defaultStrokeColor = Colors.black.value; final _defaultFillColor = Colors.transparent.value; +final _defaultCssColor = '#000000'; +final _defaultCssOpacity = 0.0; // Indices in the plugin side don't match with the ones // in the gmaps lib. This translates from plugin -> gmaps. @@ -24,6 +26,22 @@ final _mapTypeToMapTypeId = { 4: gmaps.MapTypeId.HYBRID, }; +// Converts a [Color] into a valid CSS value #RRGGBB. +String _getCssColor(Color color) { + if (color == null) { + return _defaultCssColor; + } + return '#' + color.value.toRadixString(16).padLeft(8, '0').substring(2); +} + +// Extracts the opacity from a [Color]. +double _getCssOpacity(Color color) { + if (color == null) { + return _defaultCssOpacity; + } + return color.opacity; +} + // Converts options from the plugin into gmaps.MapOptions that can be used by the JS SDK. // The following options are not handled here, for various reasons: // The following are not available in web, because the map doesn't rotate there: @@ -418,11 +436,11 @@ gmaps.MarkerOptions _markerOptionsFromMarker( gmaps.CircleOptions _circleOptionsFromCircle(Circle circle) { final populationOptions = gmaps.CircleOptions() - ..strokeColor = '#' + circle.strokeColor.value.toRadixString(16) - ..strokeOpacity = 0.8 + ..strokeColor = _getCssColor(circle.strokeColor) + ..strokeOpacity = _getCssOpacity(circle.strokeColor) ..strokeWeight = circle.strokeWidth - ..fillColor = '#' + circle.fillColor.value.toRadixString(16) - ..fillOpacity = 0.6 + ..fillColor = _getCssColor(circle.fillColor) + ..fillOpacity = _getCssOpacity(circle.fillColor) ..center = gmaps.LatLng(circle.center.latitude, circle.center.longitude) ..radius = circle.radius ..visible = circle.visible; @@ -437,11 +455,11 @@ gmaps.PolygonOptions _polygonOptionsFromPolygon( }); return gmaps.PolygonOptions() ..paths = paths - ..strokeColor = '#' + polygon.strokeColor.value.toRadixString(16) - ..strokeOpacity = 0.8 + ..strokeColor = _getCssColor(polygon.strokeColor) + ..strokeOpacity = _getCssOpacity(polygon.strokeColor) ..strokeWeight = polygon.strokeWidth - ..fillColor = '#' + polygon.fillColor.value.toRadixString(16) - ..fillOpacity = 0.35 + ..fillColor = _getCssColor(polygon.fillColor) + ..fillOpacity = _getCssOpacity(polygon.fillColor) ..visible = polygon.visible ..zIndex = polygon.zIndex ..geodesic = polygon.geodesic; @@ -456,9 +474,9 @@ gmaps.PolylineOptions _polylineOptionsFromPolyline( return gmaps.PolylineOptions() ..path = paths - ..strokeOpacity = 1.0 ..strokeWeight = polyline.width - ..strokeColor = '#' + polyline.color.value.toRadixString(16).substring(0, 6) + ..strokeColor = _getCssColor(polyline.color) + ..strokeOpacity = _getCssOpacity(polyline.color) ..visible = polyline.visible ..zIndex = polyline.zIndex ..geodesic = polyline.geodesic; From c120f4c1a0f517d152f2a9f959f5fd3f4c27a94d Mon Sep 17 00:00:00 2001 From: David Iglesias Teixeira Date: Wed, 30 Sep 2020 22:15:52 -0700 Subject: [PATCH 3/5] Test conversion of initial polygons/polylines. --- .../google_maps_controller_integration.dart | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/google_maps_flutter/google_maps_flutter_web/test/test_driver/google_maps_controller_integration.dart b/packages/google_maps_flutter/google_maps_flutter_web/test/test_driver/google_maps_controller_integration.dart index fc21476e9703..625ecb355a31 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/test/test_driver/google_maps_controller_integration.dart +++ b/packages/google_maps_flutter/google_maps_flutter_web/test/test_driver/google_maps_controller_integration.dart @@ -149,10 +149,26 @@ void main() { {'markerId': 'marker-1'} ], 'polygonsToAdd': [ - {'polygonId': 'polygon-1'} + { + 'polygonId': 'polygon-1', + 'points': [ + [43.355114, -5.851333], + [43.354797, -5.851860], + [43.354469, -5.851318], + [43.354762, -5.850824], + ], + }, ], 'polylinesToAdd': [ - {'polylineId': 'polyline-1'} + { + 'polylineId': 'polyline-1', + 'points': [ + [43.355114, -5.851333], + [43.354797, -5.851860], + [43.354469, -5.851318], + [43.354762, -5.850824], + ], + }, ], }); controller.debugSetOverrides( From f3b5c48b1432bec1027797e266c0fc5415f64047 Mon Sep 17 00:00:00 2001 From: David Iglesias Teixeira Date: Wed, 30 Sep 2020 22:49:03 -0700 Subject: [PATCH 4/5] Test color conversion when creating shapes. --- .../test/test_driver/shapes_integration.dart | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/packages/google_maps_flutter/google_maps_flutter_web/test/test_driver/shapes_integration.dart b/packages/google_maps_flutter/google_maps_flutter_web/test/test_driver/shapes_integration.dart index b1bff7edd429..4345843eb537 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/test/test_driver/shapes_integration.dart +++ b/packages/google_maps_flutter/google_maps_flutter_web/test/test_driver/shapes_integration.dart @@ -3,12 +3,18 @@ // found in the LICENSE file. import 'dart:async'; +import 'dart:ui'; import 'package:integration_test/integration_test.dart'; import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart'; import 'package:google_maps_flutter_web/google_maps_flutter_web.dart'; import 'package:flutter_test/flutter_test.dart'; +// This value is used when comparing the results of +// converting from a byte value to a double between 0 and 1. +// (For Color opacity values, for example) +const _acceptableDelta = 0.01; + /// Test Shapes (Circle, Polygon, Polyline) void main() { IntegrationTestWidgetsFlutterBinding.ensureInitialized(); @@ -77,6 +83,25 @@ void main() { expect(controller.circles, contains(CircleId('2'))); expect(controller.circles, isNot(contains(CircleId('3')))); }); + + testWidgets('Converts colors to CSS', (WidgetTester tester) async { + final circles = { + Circle( + circleId: CircleId('1'), + fillColor: Color(0x7FFABADA), + strokeColor: Color(0xFFC0FFEE), + ), + }; + + controller.addCircles(circles); + + final circle = controller.circles.values.first.circle; + + expect(circle.get('fillColor'), '#fabada'); + expect(circle.get('fillOpacity'), closeTo(0.5, _acceptableDelta)); + expect(circle.get('strokeColor'), '#c0ffee'); + expect(circle.get('strokeOpacity'), closeTo(1, _acceptableDelta)); + }); }); group('PolygonsController', () { @@ -144,6 +169,25 @@ void main() { expect(controller.polygons, contains(PolygonId('2'))); expect(controller.polygons, isNot(contains(PolygonId('3')))); }); + + testWidgets('Converts colors to CSS', (WidgetTester tester) async { + final polygons = { + Polygon( + polygonId: PolygonId('1'), + fillColor: Color(0x7FFABADA), + strokeColor: Color(0xFFC0FFEE), + ), + }; + + controller.addPolygons(polygons); + + final polygon = controller.polygons.values.first.polygon; + + expect(polygon.get('fillColor'), '#fabada'); + expect(polygon.get('fillOpacity'), closeTo(0.5, _acceptableDelta)); + expect(polygon.get('strokeColor'), '#c0ffee'); + expect(polygon.get('strokeOpacity'), closeTo(1, _acceptableDelta)); + }); }); group('PolylinesController', () { @@ -210,5 +254,21 @@ void main() { expect(controller.lines, contains(PolylineId('2'))); expect(controller.lines, isNot(contains(PolylineId('3')))); }); + + testWidgets('Converts colors to CSS', (WidgetTester tester) async { + final lines = { + Polyline( + polylineId: PolylineId('1'), + color: Color(0x7FFABADA), + ), + }; + + controller.addPolylines(lines); + + final line = controller.lines.values.first.line; + + expect(line.get('strokeColor'), '#fabada'); + expect(line.get('strokeOpacity'), closeTo(0.5, _acceptableDelta)); + }); }); } From b5d226e85efffc37d9a37230ece14704a04c721b Mon Sep 17 00:00:00 2001 From: David Iglesias Teixeira Date: Wed, 30 Sep 2020 22:54:35 -0700 Subject: [PATCH 5/5] Bump version and changelog. --- .../google_maps_flutter/google_maps_flutter_web/CHANGELOG.md | 5 +++++ .../google_maps_flutter/google_maps_flutter_web/pubspec.yaml | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md b/packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md index 0121042b1a02..42805c34926d 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md +++ b/packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md @@ -1,3 +1,8 @@ +## 0.1.0+3 + +* Fix crash when converting initial polylines and polygons. [Issue](https://github.com/flutter/flutter/issues/65152). +* Correctly convert Colors when rendering polylines, polygons and circles. [Issue](https://github.com/flutter/flutter/issues/67032). + ## 0.1.0+2 * Fix crash when converting Markers with icon explicitly set to null. [Issue](https://github.com/flutter/flutter/issues/64938). diff --git a/packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml b/packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml index 5a879c2b39b0..3fb80d4a5c18 100644 --- a/packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml +++ b/packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml @@ -1,7 +1,7 @@ name: google_maps_flutter_web description: Web platform implementation of google_maps_flutter homepage: https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter -version: 0.1.0+2 +version: 0.1.0+3 flutter: plugin: