Skip to content

Commit 34de958

Browse files
KocalKocal
committed
[Map] Rework SvgIcon and factory method name, UX Icon to get generated HTML, and icons rendering
1 parent 311689c commit 34de958

File tree

14 files changed

+150
-60
lines changed

14 files changed

+150
-60
lines changed

‎src/Map/assets/dist/abstract_map_controller.d.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,23 @@ export type WithIdentifier<T extends Record<string, unknown>> = T & {
99
};
1010
export declare const IconTypes: {
1111
readonly Url: "url";
12-
readonly InlineSvg: "inline-svg";
12+
readonly Svg: "svg";
1313
readonly UxIcon: "ux-icon";
1414
};
15-
export type IconType = (typeof IconTypes)[keyof typeof IconTypes];
1615
export type Icon = {
17-
content: string;
18-
type: IconType;
1916
width: number;
2017
height: number;
21-
};
18+
} & ({
19+
type: typeof IconTypes.UxIcon;
20+
name: string;
21+
_generated_html: string;
22+
} | {
23+
type: typeof IconTypes.Url;
24+
url: string;
25+
} | {
26+
type: typeof IconTypes.Svg;
27+
html: string;
28+
});
2229
export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = WithIdentifier<{
2330
position: Point;
2431
title: string | null;

‎src/Map/assets/dist/abstract_map_controller.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Controller } from '@hotwired/stimulus';
22

33
const IconTypes = {
44
Url: 'url',
5-
InlineSvg: 'inline-svg',
5+
Svg: 'svg',
66
UxIcon: 'ux-icon',
77
};
88
class default_1 extends Controller {

‎src/Map/assets/src/abstract_map_controller.ts‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,27 @@ export type WithIdentifier<T extends Record<string, unknown>> = T & { '@id': Ide
66

77
export const IconTypes = {
88
Url: 'url',
9-
InlineSvg: 'inline-svg',
9+
Svg: 'svg',
1010
UxIcon: 'ux-icon',
1111
} as const;
12-
export type IconType = (typeof IconTypes)[keyof typeof IconTypes];
1312
export type Icon = {
14-
content: string;
15-
type: IconType;
1613
width: number;
1714
height: number;
18-
};
15+
} & (
16+
| {
17+
type: typeof IconTypes.UxIcon;
18+
name: string;
19+
_generated_html: string,
20+
}
21+
| {
22+
type: typeof IconTypes.Url;
23+
url: string;
24+
}
25+
| {
26+
type: typeof IconTypes.Svg;
27+
html: string;
28+
}
29+
);
1930

2031
export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = WithIdentifier<{
2132
position: Point;

‎src/Map/doc/index.rst‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -141,15 +141,12 @@ Add Marker icons
141141

142142
A ``Marker`` can be customized with an ``Icon`` instance, which can either be an UX Icon, an URL, or a SVG content::
143143

144-
// It can be a UX Icon (requires `symfony/ux-icons` package)
145-
$icon = Icon::ux('fa:map-marker');
146-
// Or an URL pointing to an image
147-
$icon = Icon::url('https://example.com/marker.png');
148-
// Or a plain SVG content
149-
$icon = Icon::svg('<svg>(...)</svg>');
150-
151-
// Configure the icon size with the `width()` and `height()` methods
152-
$icon = Icon::ux('fa:map-marker')->width(48)->height(48);
144+
// It can be a UX Icon (requires `symfony/ux-icons` package)...
145+
$icon = Icon::ux('fa:map-marker')->width(24)->height(24);
146+
// ... or an URL pointing to an image
147+
$icon = Icon::url('https://example.com/marker.png')->width(24)->height(24);
148+
// ... or a plain SVG string
149+
$icon = Icon::svg('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">...</svg>');
153150

154151
$map->addMarker(new Marker(
155152
// ...

‎src/Map/src/Bridge/Google/assets/dist/map_controller.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { LoaderOptions } from '@googlemaps/js-api-loader';
2-
import AbstractMapController from '@symfony/ux-map';
32
import type { Icon, InfoWindowWithoutPositionDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition } from '@symfony/ux-map';
3+
import AbstractMapController from '@symfony/ux-map';
44
type MapOptions = Pick<google.maps.MapOptions, 'mapId' | 'gestureHandling' | 'backgroundColor' | 'disableDoubleClickZoom' | 'zoomControl' | 'zoomControlOptions' | 'mapTypeControl' | 'mapTypeControlOptions' | 'streetViewControl' | 'streetViewControlOptions' | 'fullscreenControl' | 'fullscreenControlOptions'>;
55
export default class extends AbstractMapController<MapOptions, google.maps.Map, google.maps.marker.AdvancedMarkerElementOptions, google.maps.marker.AdvancedMarkerElement, google.maps.InfoWindowOptions, google.maps.InfoWindow, google.maps.PolygonOptions, google.maps.Polygon, google.maps.PolylineOptions, google.maps.Polyline> {
66
providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'>;

‎src/Map/src/Bridge/Google/assets/dist/map_controller.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Controller } from '@hotwired/stimulus';
33

44
const IconTypes = {
55
Url: 'url',
6-
InlineSvg: 'inline-svg',
6+
Svg: 'svg',
77
UxIcon: 'ux-icon',
88
};
99
class default_1 extends Controller {
@@ -109,6 +109,7 @@ default_1.values = {
109109
};
110110

111111
let _google;
112+
const parser = new DOMParser();
112113
class map_controller extends default_1 {
113114
async connect() {
114115
if (!_google) {
@@ -282,18 +283,23 @@ class map_controller extends default_1 {
282283
return content;
283284
}
284285
doCreateIcon({ definition, element, }) {
285-
const { content, type, width, height } = definition;
286-
if (type === IconTypes.InlineSvg) {
287-
const icon = this.parser.parseFromString(content, 'image/svg+xml').documentElement;
288-
element.content = icon;
286+
const { type, width, height } = definition;
287+
if (type === IconTypes.Svg) {
288+
element.content = parser.parseFromString(definition.html, 'image/svg+xml').documentElement;
289289
}
290-
else {
290+
else if (type === IconTypes.UxIcon) {
291+
element.content = parser.parseFromString(definition._generated_html, 'image/svg+xml').documentElement;
292+
}
293+
else if (type === IconTypes.Url) {
291294
const icon = document.createElement('img');
292295
icon.width = width;
293296
icon.height = height;
294-
icon.src = content;
297+
icon.src = definition.url;
295298
element.content = icon;
296299
}
300+
else {
301+
throw new Error(`Unsupported icon type: ${type}.`);
302+
}
297303
}
298304
closeInfoWindowsExcept(infoWindow) {
299305
this.infoWindows.forEach((otherInfoWindow) => {

‎src/Map/src/Bridge/Google/assets/src/map_controller.ts‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99

1010
import type { LoaderOptions } from '@googlemaps/js-api-loader';
1111
import { Loader } from '@googlemaps/js-api-loader';
12-
import AbstractMapController, { IconTypes } from '@symfony/ux-map';
1312
import type {
1413
Icon,
1514
InfoWindowWithoutPositionDefinition,
@@ -18,6 +17,7 @@ import type {
1817
PolygonDefinition,
1918
PolylineDefinition,
2019
} from '@symfony/ux-map';
20+
import AbstractMapController, { IconTypes } from '@symfony/ux-map';
2121

2222
type MapOptions = Pick<
2323
google.maps.MapOptions,
@@ -37,6 +37,8 @@ type MapOptions = Pick<
3737

3838
let _google: typeof google;
3939

40+
const parser = new DOMParser();
41+
4042
export default class extends AbstractMapController<
4143
MapOptions,
4244
google.maps.Map,
@@ -312,16 +314,20 @@ export default class extends AbstractMapController<
312314
definition: Icon;
313315
element: google.maps.marker.AdvancedMarkerElement;
314316
}): void {
315-
const { content, type, width, height } = definition;
316-
if (type === IconTypes.InlineSvg) {
317-
const icon = this.parser.parseFromString(content, 'image/svg+xml').documentElement;
318-
element.content = icon;
319-
} else {
317+
const { type, width, height } = definition;
318+
319+
if (type === IconTypes.Svg) {
320+
element.content = parser.parseFromString(definition.html, 'image/svg+xml').documentElement;
321+
} else if (type === IconTypes.UxIcon) {
322+
element.content = parser.parseFromString(definition._generated_html, 'image/svg+xml').documentElement;
323+
} else if (type === IconTypes.Url) {
320324
const icon = document.createElement('img');
321325
icon.width = width;
322326
icon.height = height;
323-
icon.src = content;
327+
icon.src = definition.url;
324328
element.content = icon;
329+
} else {
330+
throw new Error(`Unsupported icon type: ${type}.`);
325331
}
326332
}
327333

‎src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as L from 'leaflet';
44

55
const IconTypes = {
66
Url: 'url',
7-
InlineSvg: 'inline-svg',
7+
Svg: 'svg',
88
UxIcon: 'ux-icon',
99
};
1010
class default_1 extends Controller {
@@ -206,10 +206,20 @@ class map_controller extends default_1 {
206206
return popup;
207207
}
208208
doCreateIcon({ definition, element, }) {
209-
const { content, type, width, height } = definition;
210-
const icon = type === IconTypes.InlineSvg
211-
? L.divIcon({ html: content, iconSize: [width, height] })
212-
: L.icon({ iconUrl: content, iconSize: [width, height] });
209+
const { type, width, height } = definition;
210+
let icon;
211+
if (type === IconTypes.Svg) {
212+
icon = L.divIcon({ html: definition.html, iconSize: [width, height], className: '' });
213+
}
214+
else if (type === IconTypes.UxIcon) {
215+
icon = L.divIcon({ html: definition._generated_html, iconSize: [width, height], className: '' });
216+
}
217+
else if (type === IconTypes.Url) {
218+
icon = L.icon({ iconUrl: definition.url, iconSize: [width, height], className: '' });
219+
}
220+
else {
221+
throw new Error(`Unsupported icon type: ${type}.`);
222+
}
213223
element.setIcon(icon);
214224
}
215225
doFitBoundsToMarkers() {

‎src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -185,11 +185,18 @@ export default class extends AbstractMapController<
185185
definition: Icon;
186186
element: L.Marker;
187187
}): void {
188-
const { content, type, width, height } = definition;
189-
const icon =
190-
type === IconTypes.InlineSvg
191-
? L.divIcon({ html: content, iconSize: [width, height] })
192-
: L.icon({ iconUrl: content, iconSize: [width, height] });
188+
const { type, width, height } = definition;
189+
190+
let icon: L.DivIcon | L.Icon;
191+
if (type === IconTypes.Svg) {
192+
icon = L.divIcon({ html: definition.html, iconSize: [width, height], className: '' });
193+
} else if (type === IconTypes.UxIcon) {
194+
icon = L.divIcon({ html: definition._generated_html, iconSize: [width, height], className: '' });
195+
} else if (type === IconTypes.Url) {
196+
icon = L.icon({ iconUrl: definition.url, iconSize: [width, height], className: '' });
197+
} else {
198+
throw new Error(`Unsupported icon type: ${type}.`);
199+
}
193200
element.setIcon(icon);
194201
}
195202

‎src/Map/src/Icon/SvgIcon.php‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,33 @@ class SvgIcon extends Icon
2323
{
2424
/**
2525
* @param non-empty-string $html
26-
* @param positive-int $width
27-
* @param positive-int $height
2826
*/
2927
protected function __construct(
3028
protected string $html,
31-
int $width = 24,
32-
int $height = 24,
3329
) {
34-
parent::__construct(IconType::Svg, $width, $height);
30+
parent::__construct(IconType::Svg);
3531
}
3632

3733
/**
38-
* @param array{ html: string, width: positive-int, height: positive-int } $data
34+
* @param array{ html: string } $data
3935
*/
4036
public static function fromArray(array $data): static
4137
{
4238
return new self(
4339
html: $data['html'],
44-
width: $data['width'],
45-
height: $data['height'],
4640
);
4741
}
4842

43+
public function width(int $width): static
44+
{
45+
throw new \LogicException('Unable to configure the SvgIcon width, please configure it in the HTML with the "width" attribute on the root element instead.');
46+
}
47+
48+
public function height(int $height): static
49+
{
50+
throw new \LogicException('Unable to configure the SvgIcon height, please configure it in the HTML with the "height" attribute on the root element instead.');
51+
}
52+
4953
public function toArray(): array
5054
{
5155
return [

0 commit comments

Comments
 (0)