@mapsight/traffic-style 5.0.0

package/src/scss/features/_parking-dynamic.scss

@@ -0,0 +1,42 @@
+@use "../variables";
+
+#features [type="parking"] {
+	[|js="env.zoom >= 15"] {
+		// TODO: Use ../mixins/feature-label
+		text: {
+			font: bold 12px sans-serif;
+			offsetX: 17;
+			offsetY: 1;
+			textAlign: left;
+			fill-color: #03437e;
+			stroke-color: #fff;
+			stroke-width: 1;
+			text: "attr(title)";
+		}
+	}
+
+	[occupancyTrendString] {
+		[|js="env.zoom >= 13"],
+		[state="highlight"],
+		[state="select"] {
+			.background {
+				image-type: icon;
+
+				icon: {
+					anchorX: -14px;
+					anchorY: 12px;
+					src: variables.$MAPSIGHT_TRAFFIC_STYLE__IMAGE_PATH + "parking-dynamic/attr(occupancyTrendString).png";
+				}
+
+				[state="highlight"],
+				[state="select"] {
+					zIndex: variables.$MAPSIGHT_TRAFFIC_STYLE__BASE_Z_INDEX + 5;
+				}
+			}
+		}
+
+		[|js="env.zoom >= 15"] {
+			text-offsetX: 29;
+		}
+	}
+}

package/src/scss/features/_spread.scss

@@ -0,0 +1,31 @@
+@use "../variables";
+@use "../mixins/icon-base";
+@use "../mixins/icon";
+@use "../mixins/auto-icon";
+
+#features {
+	[spread] {
+		:not([state="highlight"]) :not([state="select"]) {
+			@include auto-icon.autoIcon("small");
+		}
+	}
+
+	[spreadFeatureLine] {
+		stroke-width: 1;
+		stroke-color: #000000;
+	}
+
+	[spreadFeatureDot] {
+		image-type: circle;
+		circle-radius: 3;
+		circle-fill-color: #000000;
+	}
+
+	[state="highlight"],
+	[state="select"] {
+		[spreadFeatureLine],
+		[spreadFeatureDot] {
+			cursor: default;
+		}
+	}
+}

package/src/scss/functions/_ends-with.scss

@@ -0,0 +1,16 @@
+@use "sass:string";
+
+// https://stackoverflow.com/questions/40389319/is-there-a-way-in-sass-to-do-if-string-contains-or-ends-with
+@function ends-with($string, $find) {
+	@if string.length($string) >=
+		string.length($find) and
+		(
+			string.slice($string, (string.length($string) - string.length($find) + 1)) ==
+				$find
+		)
+	{
+		@return true;
+	} @else {
+		@return false;
+	}
+}

package/src/scss/functions/_list-to-string.scss

@@ -0,0 +1,24 @@
+@use "sass:list";
+@use "sass:meta";
+
+// https://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/
+@function list-to-string($list, $glue: "", $is-nested: false) {
+	$result: null;
+
+	@for $i from 1 through list.length($list) {
+		$e: list.nth($list, $i);
+
+		@if meta.type-of($e) == list {
+			$result: $result#{list-to-string($e, $glue, true)};
+		} @else {
+			$result: if(
+				sass($i != list.length($list) or $is-nested):
+					$result #{$e}#{$glue};
+					else:
+						$result#{$e}
+			);
+		}
+	}
+
+	@return $result;
+}

package/src/scss/functions/_map-set.scss

@@ -0,0 +1,9 @@
+@use "sass:map";
+
+// a map-set function (not included with Sass)
+@function map-set($map, $key, $value) {
+	$new: (
+		$key: $value,
+	);
+	@return map.merge($map, $new);
+}

package/src/scss/functions/_str-replace.scss

@@ -0,0 +1,22 @@
+@use "sass:string";
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+	$index: string.index($string, $search);
+
+	@if $index {
+		@return string.slice($string, 1, $index - 1) + $replace +
+			str-replace(
+				string.slice($string, $index + string.length($search)),
+				$search,
+				$replace
+			);
+	}
+
+	@return $string;
+}

package/src/scss/mixins/_auto-icon.scss

@@ -0,0 +1,85 @@
+@use "sass:list";
+@use "sass:map";
+@use "../functions/ends-with";
+@use "../functions/str-replace";
+@use "../functions/list-to-string";
+
+@use "../variables";
+
+@use "./get-icon-dimensions";
+
+@mixin autoIcon(
+	$state: variables.$MAPSIGHT_TRAFFIC_STYLE__STATE_DEFAULT,
+	$iconDefault: variables.$MAPSIGHT_TRAFFIC_STYLE__ICON_DEFAULT,
+	$iconFallbackMap: variables.$MAPSIGHT_TRAFFIC_STYLE__ICON_FALLBACK_MAP,
+	$icons: variables.$MAPSIGHT_TRAFFIC_STYLE__ICONS
+) {
+	$stateSuffix: "-" + $state;
+
+	// default fallback
+	$defaultName: $iconDefault + $stateSuffix;
+	$defaultDimensions: map.get($icons, $defaultName);
+	@if $defaultDimensions {
+		@include get-icon-dimensions.getIconDimension($defaultDimensions);
+	} @else {
+		@debug "Default icon not found: " + $defaultName;
+	}
+
+	// fallback icons
+	@each $fallbackId, $iconIds in $iconFallbackMap {
+		$fallbackName: $fallbackId + $stateSuffix;
+		$fallbackIcon: map.get($icons, $fallbackName);
+
+		@if $fallbackIcon {
+			$selectors: ();
+
+			@each $iconId in $iconIds {
+				$selectors: list.append(
+					$selectors,
+					#{"[mapsightIconId = " + $iconId + "]"}
+				);
+				$selectors: list.append(
+					$selectors,
+					#{"[env|mapsightIconId = " + $iconId + "]"}
+				);
+			}
+
+			#{list-to-string.list-to-string($selectors, ", ")} {
+				@include get-icon-dimensions.getIconDimension($fallbackIcon);
+			}
+		} @else {
+			@debug "Fallback icon not found: " + $fallbackName;
+		}
+	}
+
+	// icons for state
+	@each $iconName, $dimensions in $icons {
+		$stateMatches: ends-with.ends-with($iconName, $stateSuffix);
+
+		@if $stateMatches {
+			$iconId: str-replace.str-replace($iconName, $stateSuffix, "");
+
+			[mapsightIconId="#{$iconId}"],
+			[env|mapsightIconId="#{$iconId}"] {
+				@include get-icon-dimensions.getIconDimension($dimensions);
+			}
+		}
+	}
+
+	@if variables.$MAPSIGHT_TRAFFIC_STYLE__ICON_ENABLE_FORCE_BY_ENV {
+		// force override by env
+		[env|mapsightIconUse="force"] {
+			@each $iconName, $dimensions in $icons {
+				$stateMatches: ends-with.ends-with($iconName, $stateSuffix);
+
+				@if $stateMatches {
+					$iconId: str-replace.str-replace($iconName, $stateSuffix, "");
+
+					[env|mapsightIconId="#{$iconId}"] {
+						@include get-icon-dimensions.getIconDimension($dimensions);
+					}
+				}
+			}
+		}
+	}
+}

package/src/scss/mixins/_feature-label.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "../variables";
+
+@function getFeatureLabelBaseOffsetX() {
+	@return variables.$MAPSIGHT_TRAFFIC_STYLE__FEATURE_LABEL_OFFSET_X +
+		map.get(variables.$MAPSIGHT_TRAFFIC_STYLE__ICON_MAX_SIZE, x);
+}
+
+@function getFeatureLabelBaseOffsetY() {
+	@return variables.$MAPSIGHT_TRAFFIC_STYLE__FEATURE_LABEL_OFFSET_Y;
+}
+
+@mixin featureLabel(
+	$minZoom: variables.$MAPSIGHT_TRAFFIC_STYLE__FEATURE_LABEL_DEFAULT_MIN_ZOOM,
+	$prefix: variables.$MAPSIGHT_TRAFFIC_STYLE__FEATURE_LABEL_DEFAULT_PREFIX,
+	$suffix: variables.$MAPSIGHT_TRAFFIC_STYLE__FEATURE_LABEL_DEFAULT_SUFFIX
+) {
+	[|js="env.zoom >= #{$minZoom}"] {
+		text: {
+			font: bold 12px sans-serif;
+			offsetX: getFeatureLabelBaseOffsetX();
+			offsetY: getFeatureLabelBaseOffsetY();
+			textAlign: left;
+			fill-color: #03437e;
+			stroke-color: #fff;
+			stroke-width: 1;
+			text: "#{$prefix}attr(title)#{$suffix}";
+		}
+	}
+}
+
+@mixin moveFeatureLabel($minZoom: 15, $x: 0, $y: 0) {
+	[|js="env.zoom >= #{$minZoom}"] {
+		text: {
+			offsetX: getFeatureLabelBaseOffsetX() + $x;
+			offsetY: getFeatureLabelBaseOffsetY() + $y;
+		}
+	}
+}

package/src/scss/mixins/_get-icon-dimensions.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+@mixin getIconDimension($dimensions) {
+	$x: map.get($dimensions, x);
+	$y: map.get($dimensions, y);
+	$width: map.get($dimensions, width);
+	$height: map.get($dimensions, height);
+
+	icon-offsetX: $x;
+	icon-offsetY: $y;
+	icon-sizeX: $width;
+	icon-sizeY: $height;
+}

package/src/scss/mixins/_icon-base.scss

@@ -0,0 +1,10 @@
+@use "../variables";
+
+@mixin iconBase {
+	image-type: icon;
+	icon: {
+		scale: variables.$MAPSIGHT_TRAFFIC_STYLE__IMG_BASE_SCALE;
+		src: variables.$MAPSIGHT_TRAFFIC_STYLE__SPRITE_PATH;
+		snapToPixel: true;
+	}
+}

package/src/scss/mixins/_icon.scss

@@ -0,0 +1,19 @@
+@use "sass:map";
+@use "../variables";
+
+@use "./get-icon-dimensions";
+
+@mixin icon(
+	$iconId: variables.$MAPSIGHT_TRAFFIC_STYLE__ICON_DEFAULT,
+	$state: variables.$MAPSIGHT_TRAFFIC_STYLE__STATE_DEFAULT,
+	$icons: variables.$MAPSIGHT_TRAFFIC_STYLE__ICONS
+) {
+	$stateSuffix: "-" + $state;
+	$dimensions: map.get($icons, $iconId + $stateSuffix);
+
+	@if $dimensions {
+		@include get-icon-dimensions.getIconDimension($dimensions);
+	} @else {
+		@error "Icon not found: " + $iconId + $stateSuffix;
+	}
+}