From 08e183757e95eed34352177e73cd25311a1f4681 Mon Sep 17 00:00:00 2001 From: Felix Riehm Date: Sat, 16 Mar 2024 16:34:08 +0100 Subject: [PATCH] fix area highlight when switching service --- web/src/canvas/geo/geoCircle.ts | 11 ++++++----- web/src/canvas/geo/geoCirclesLayer.ts | 4 ++++ web/src/canvas/geo/geoVisualisation.ts | 20 ++++++++++++++++---- web/src/theme/bloxberg.ts | 2 ++ web/src/theme/keeper.ts | 2 ++ web/src/theme/minerva.ts | 2 ++ web/src/theme/model.ts | 2 ++ 7 files changed, 34 insertions(+), 9 deletions(-) diff --git a/web/src/canvas/geo/geoCircle.ts b/web/src/canvas/geo/geoCircle.ts index 489a2bd..5eb59c2 100644 --- a/web/src/canvas/geo/geoCircle.ts +++ b/web/src/canvas/geo/geoCircle.ts @@ -8,6 +8,7 @@ export class GeoCircle { private readonly circlesLayer: GeoCirclesLayer private readonly root: Selection; private readonly canvas: Canvas; + private readonly areaColor = '#ccc'; constructor(circlesLayer: GeoCirclesLayer, circleData: CircleData, svgCircle: SVGCircleElement, service: HatnoteVisService) { @@ -44,7 +45,7 @@ export class GeoCircle { .attr('r', 10) .duration(40000) .on('interrupt', _ => { - highlightedArea.interrupt() + highlightedArea.interrupt(); popUpContainer.remove(); if(this.canvas.settings.debug_mode){ console.log('Circle removed for ' + circleData.type) @@ -87,19 +88,19 @@ export class GeoCircle { private highlightCountry(countryId: string): Selection { let country = this.canvas.root.select(`path[data-country-id="${countryId}"]`) - .style('fill', '#eddc4e') + .style('fill', this.canvas.visDirector.current_service_theme.geo_area_highlight_color) country.transition() .duration(5000) - .style('fill', '#ccc'); + .style('fill', this.canvas.visDirector.current_service_theme.geo_area_color) return country }; private highlightState(stateId: string): Selection { let country = this.canvas.root.select(`path[data-state-id="${stateId}"]`) - .style('fill', '#eddc4e') + .style('fill', this.canvas.visDirector.current_service_theme.geo_area_highlight_color) country.transition() .duration(5000) - .style('fill', '#ccc'); + .style('fill', this.canvas.visDirector.current_service_theme.geo_area_color) return country }; } \ No newline at end of file diff --git a/web/src/canvas/geo/geoCirclesLayer.ts b/web/src/canvas/geo/geoCirclesLayer.ts index 7213ddb..f409886 100644 --- a/web/src/canvas/geo/geoCirclesLayer.ts +++ b/web/src/canvas/geo/geoCirclesLayer.ts @@ -24,6 +24,10 @@ export class GeoCirclesLayer{ } private addCircle(circle: CircleData){ + if(circle.location === undefined) { + return; + } + let that = this; // make sure that circle that already exits a removed so that the animation can start from start diff --git a/web/src/canvas/geo/geoVisualisation.ts b/web/src/canvas/geo/geoVisualisation.ts index ce88e35..3a85872 100644 --- a/web/src/canvas/geo/geoVisualisation.ts +++ b/web/src/canvas/geo/geoVisualisation.ts @@ -41,6 +41,18 @@ export class GeoVisualisation { next: (_) => this.canvas.geoPopUpContainer.attr("style", "opacity: 0;") }) + this.canvas.onThemeHasChanged.subscribe({ + next: (_) => { + if (this.canvas.visDirector.current_service_theme.id_name === HatnoteVisService.Bloxberg){ + this.worldMap.selectAll("#countries-mesh path").interrupt() + .style('fill',this.canvas.visDirector.current_service_theme.geo_area_color) + } else { + this.germanyMap.selectAll("#state-mesh path").interrupt() + .style('fill',this.canvas.visDirector.current_service_theme.geo_area_color) + } + } + }) + this.canvas.onCarouselTransitionEnd.subscribe({ next: (_) => this.canvas.geoPopUpContainer.attr("style", "opacity: 1;") }) @@ -87,11 +99,11 @@ export class GeoVisualisation { // Add a path for each country and color it according te this data. this.germanyMap.append("g") - .attr("id", "countries-mesh") + .attr("id", "state-mesh") .selectAll("path") .data((states as FeatureCollection).features) .join("path") - .attr("fill", d => '#ccc') + .attr("fill", this.canvas.visDirector.current_service_theme.geo_area_color) .attr("d", path) .attr("data-state-id", c => `${c.id}`) .attr("data-state-name", c => `${c.properties?.name}`) @@ -99,7 +111,7 @@ export class GeoVisualisation { let countrymesh = mesh(germany, statesGeometry as GeometryObject, (a: GeometryObject, b: GeometryObject) => a !== b) // Add a white mesh. this.germanyMap.append("path") - .attr("id", "countries-border-mesh") + .attr("id", "state-border-mesh") .datum(countrymesh) .attr("fill", "none") .attr("stroke", "white") @@ -129,7 +141,7 @@ export class GeoVisualisation { .selectAll("path") .data((countries as FeatureCollection).features) .join("path") - .attr("fill", d => '#ccc') + .attr("fill", this.canvas.visDirector.current_service_theme.geo_area_color) .attr("d", path) .attr("data-country-id", c => `${c.id}`) .attr("data-country-name", c => `${c.properties?.name}`) diff --git a/web/src/theme/bloxberg.ts b/web/src/theme/bloxberg.ts index c00017f..7e93a2e 100644 --- a/web/src/theme/bloxberg.ts +++ b/web/src/theme/bloxberg.ts @@ -14,6 +14,8 @@ export const bloxberg_service_theme: ServiceTheme = { header_logo: BloxbergLogo, carousel_time: 300000, header_y: 0, + geo_area_color: '#ccc', + geo_area_highlight_color: '#eddc4e', transition_logo: TransitionBloxbergLogo, qr_code: { image: QrCodeBloxberg, diff --git a/web/src/theme/keeper.ts b/web/src/theme/keeper.ts index 27575a4..b3fb453 100644 --- a/web/src/theme/keeper.ts +++ b/web/src/theme/keeper.ts @@ -14,6 +14,8 @@ export const keeper_service_theme: ServiceTheme = { header_logo: KeeperLogo, carousel_time: 300000, header_y: 2, + geo_area_color: '#ccc', + geo_area_highlight_color: '#eddc4e', transition_logo: TransitionKeeperLogo, qr_code: { image: QrCodeKeeper, diff --git a/web/src/theme/minerva.ts b/web/src/theme/minerva.ts index 6f903ec..1d42602 100644 --- a/web/src/theme/minerva.ts +++ b/web/src/theme/minerva.ts @@ -14,6 +14,8 @@ export const minerva_service_theme: ServiceTheme = { header_logo: MinervaLogo, carousel_time: 300000, header_y: 4, + geo_area_color: '#ccc', + geo_area_highlight_color: '#eddc4e', transition_logo: TransitionMinervaLogo, qr_code: { image: QrCodeMinerva, diff --git a/web/src/theme/model.ts b/web/src/theme/model.ts index 6767a06..e25c4e9 100644 --- a/web/src/theme/model.ts +++ b/web/src/theme/model.ts @@ -25,6 +25,8 @@ export interface ServiceTheme { header_title: string, header_logo: any, header_y: number, + geo_area_color: string, + geo_area_highlight_color: string, carousel_time: number transition_logo: any, qr_code: ThemeQrCode,