fix line weight attribute with correct one: line width

website/src/lib/components/file-list/StyleDialog.svelte

@@ -14,20 +14,20 @@
 	export let item: ListItem;
 	export let open = false;
 
-	const { defaultOpacity, defaultWeight } = settings;
+	const { defaultOpacity, defaultWidth } = settings;
 
 	let colors: string[] = [];
 	let color: string | undefined = undefined;
 	let opacity: number[] = [];
-	let weight: number[] = [];
+	let width: number[] = [];
 	let colorChanged = false;
 	let opacityChanged = false;
-	let weightChanged = false;
+	let widthChanged = false;
 
 	function setStyleInputs() {
 		colors = [];
 		opacity = [];
-		weight = [];
+		width = [];
 
 		$selection.forEach((item) => {
 			if (item instanceof ListFileItem) {
@@ -47,9 +47,9 @@
 							opacity.push(o);
 						}
 					});
-					style.weight.forEach((w) => {
-						if (!weight.includes(w)) {
-							weight.push(w);
+					style.width.forEach((w) => {
+						if (!width.includes(w)) {
+							width.push(w);
 						}
 					});
 				}
@@ -66,8 +66,8 @@
 						if (style['gpx_style:opacity'] && !opacity.includes(style['gpx_style:opacity'])) {
 							opacity.push(style['gpx_style:opacity']);
 						}
-						if (style['gpx_style:weight'] && !weight.includes(style['gpx_style:weight'])) {
-							weight.push(style['gpx_style:weight']);
+						if (style['gpx_style:width'] && !width.includes(style['gpx_style:width'])) {
+							width.push(style['gpx_style:width']);
 						}
 					}
 					if (!colors.includes(layer.layerColor)) {
@@ -79,11 +79,11 @@
 
 		color = colors[0];
 		opacity = [opacity[0] ?? $defaultOpacity];
-		weight = [weight[0] ?? $defaultWeight];
+		width = [width[0] ?? $defaultWidth];
 
 		colorChanged = false;
 		opacityChanged = false;
-		weightChanged = false;
+		widthChanged = false;
 	}
 
 	$: if ($selection && open) {
@@ -123,18 +123,18 @@
 			{$_('menu.style.width')}
 			<div class="w-40 p-2">
 				<Slider
-					bind:value={weight}
-					id="weight"
+					bind:value={width}
+					id="width"
 					min={1}
 					max={10}
 					step={1}
-					onValueChange={() => (weightChanged = true)}
+					onValueChange={() => (widthChanged = true)}
 				/>
 			</div>
 		</Label>
 		<Button
 			variant="outline"
-			disabled={!colorChanged && !opacityChanged && !weightChanged}
+			disabled={!colorChanged && !opacityChanged && !widthChanged}
 			on:click={() => {
 				let style = {};
 				if (colorChanged) {
@@ -143,8 +143,8 @@
 				if (opacityChanged) {
 					style['gpx_style:opacity'] = opacity[0];
 				}
-				if (weightChanged) {
-					style['gpx_style:weight'] = weight[0];
+				if (widthChanged) {
+					style['gpx_style:width'] = width[0];
 				}
 				dbUtils.setStyleToSelection(style);
 
@@ -152,8 +152,8 @@
 					if (style['gpx_style:opacity']) {
 						$defaultOpacity = style['gpx_style:opacity'];
 					}
-					if (style['gpx_style:weight']) {
-						$defaultWeight = style['gpx_style:weight'];
+					if (style['gpx_style:width']) {
+						$defaultWidth = style['gpx_style:width'];
 					}
 				}
 

website/src/lib/components/gpx-layer/GPXLayer.ts

@@ -89,7 +89,7 @@ function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
     </svg>`;
 }
 
-const { directionMarkers, treeFileView, defaultOpacity, defaultWeight } = settings;
+const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
 
 export class GPXLayer {
     map: mapboxgl.Map;
@@ -176,7 +176,7 @@ export class GPXLayer {
                     },
                     paint: {
                         'line-color': ['get', 'color'],
-                        'line-width': ['get', 'weight'],
+                        'line-width': ['get', 'width'],
                         'line-opacity': ['get', 'opacity']
                     }
                 });
@@ -453,14 +453,14 @@ export class GPXLayer {
             if (!feature.properties.color) {
                 feature.properties.color = this.layerColor;
             }
-            if (!feature.properties.weight) {
-                feature.properties.weight = get(defaultWeight);
+            if (!feature.properties.width) {
+                feature.properties.width = get(defaultWidth);
             }
             if (!feature.properties.opacity) {
                 feature.properties.opacity = get(defaultOpacity);
             }
             if (get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)) || get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), true)) {
-                feature.properties.weight = feature.properties.weight + 2;
+                feature.properties.width = feature.properties.width + 2;
                 feature.properties.opacity = Math.min(1, feature.properties.opacity + 0.1);
             }
             feature.properties.trackIndex = trackIndex;

website/src/lib/db.ts

@@ -107,7 +107,7 @@ export const settings = {
     streetViewSource: dexieSettingStore('streetViewSource', 'mapillary'),
     fileOrder: dexieSettingStore<string[]>('fileOrder', []),
     defaultOpacity: dexieSettingStore('defaultOpacity', 0.7),
-    defaultWeight: dexieSettingStore('defaultWeight', (browser && window.innerWidth < 600) ? 8 : 5),
+    defaultWidth: dexieSettingStore('defaultWidth', (browser && window.innerWidth < 600) ? 8 : 5),
     bottomPanelSize: dexieSettingStore('bottomPanelSize', 170),
     rightPanelSize: dexieSettingStore('rightPanelSize', 240),
 };