steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix line weight attribute with correct one: line width

Browse Source
This commit is contained in:
vcoppe
2025-01-01 14:40:28 +01:00
parent 077f2b4435
commit 6cb6c88cd1
7 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
gpx/src/gpx.ts
View File

@@ -140,8 +140,8 @@ export class GPXFile extends GPXTreeNode<Track> {
if (style.color.length === 1) { if (style.color.length === 1) {
fileStyle['gpx_style:color'] = style.color[0]; fileStyle['gpx_style:color'] = style.color[0];
} }
if (style.weight.length === 1) { if (style.width.length === 1) {
fileStyle['gpx_style:weight'] = style.weight[0]; fileStyle['gpx_style:width'] = style.width[0];
} }
if (style.opacity.length === 1) { if (style.opacity.length === 1) {
fileStyle['gpx_style:opacity'] = style.opacity[0]; fileStyle['gpx_style:opacity'] = style.opacity[0];
@@ -194,15 +194,15 @@ export class GPXFile extends GPXTreeNode<Track> {
if (style["gpx_style:opacity"] && !acc.opacity.includes(style["gpx_style:opacity"])) { if (style["gpx_style:opacity"] && !acc.opacity.includes(style["gpx_style:opacity"])) {
acc.opacity.push(style["gpx_style:opacity"]); acc.opacity.push(style["gpx_style:opacity"]);
} }
if (style["gpx_style:weight"] && !acc.weight.includes(style["gpx_style:weight"])) { if (style["gpx_style:width"] && !acc.width.includes(style["gpx_style:width"])) {
acc.weight.push(style["gpx_style:weight"]); acc.width.push(style["gpx_style:width"]);
} }
} }
return acc; return acc;
}, { }, {
color: [], color: [],
opacity: [], opacity: [],
weight: [] width: []
}); });
} }
@@ -405,8 +405,8 @@ export class GPXFile extends GPXTreeNode<Track> {
if (style["gpx_style:opacity"]) { if (style["gpx_style:opacity"]) {
this._data.style.opacity = style["gpx_style:opacity"]; this._data.style.opacity = style["gpx_style:opacity"];
} }
if (style["gpx_style:weight"]) { if (style["gpx_style:width"]) {
this._data.style.weight = style["gpx_style:weight"]; this._data.style.width = style["gpx_style:width"];
} }
} }
@@ -527,8 +527,8 @@ export class Track extends GPXTreeNode<TrackSegment> {
if (this.extensions['gpx_style:line']["gpx_style:opacity"]) { if (this.extensions['gpx_style:line']["gpx_style:opacity"]) {
geoJSON.properties['opacity'] = this.extensions['gpx_style:line']["gpx_style:opacity"]; geoJSON.properties['opacity'] = this.extensions['gpx_style:line']["gpx_style:opacity"];
} }
if (this.extensions['gpx_style:line']["gpx_style:weight"]) { if (this.extensions['gpx_style:line']["gpx_style:width"]) {
geoJSON.properties['weight'] = this.extensions['gpx_style:line']["gpx_style:weight"]; geoJSON.properties['width'] = this.extensions['gpx_style:line']["gpx_style:width"];
} }
} }
return geoJSON; return geoJSON;
@@ -647,8 +647,8 @@ export class Track extends GPXTreeNode<TrackSegment> {
if (style["gpx_style:opacity"] !== undefined && (force || this.extensions['gpx_style:line']["gpx_style:opacity"] === undefined)) { if (style["gpx_style:opacity"] !== undefined && (force || this.extensions['gpx_style:line']["gpx_style:opacity"] === undefined)) {
this.extensions['gpx_style:line']["gpx_style:opacity"] = style["gpx_style:opacity"]; this.extensions['gpx_style:line']["gpx_style:opacity"] = style["gpx_style:opacity"];
} }
if (style["gpx_style:weight"] !== undefined && (force || this.extensions['gpx_style:line']["gpx_style:weight"] === undefined)) { if (style["gpx_style:width"] !== undefined && (force || this.extensions['gpx_style:line']["gpx_style:width"] === undefined)) {
this.extensions['gpx_style:line']["gpx_style:weight"] = style["gpx_style:weight"]; this.extensions['gpx_style:line']["gpx_style:width"] = style["gpx_style:width"];
} }
} }
@@ -1632,7 +1632,7 @@ function getOriginal(obj: any): any {
export type MergedLineStyles = { export type MergedLineStyles = {
color: string[] color: string[]
opacity: number[], opacity: number[],
weight: number[], width: number[],
}; };
function convertRouteToTrack(route: RouteType): Track { function convertRouteToTrack(route: RouteType): Track {

2
gpx/src/io.ts
View File

@@ -35,7 +35,7 @@ export function parseGPX(gpxData: string): GPXFile {
} }
if (tagName === 'gpxtpx:atemp' || tagName === 'gpxtpx:hr' || tagName === 'gpxtpx:cad' || tagName === 'gpxpx:PowerInWatts' || if (tagName === 'gpxtpx:atemp' || tagName === 'gpxtpx:hr' || tagName === 'gpxtpx:cad' || tagName === 'gpxpx:PowerInWatts' ||
tagName === 'gpx_style:opacity' || tagName === 'gpx_style:weight') { tagName === 'gpx_style:opacity' || tagName === 'gpx_style:width') {
return parseFloat(tagValue); return parseFloat(tagValue);
} }

2
gpx/src/types.ts
View File

@@ -69,7 +69,7 @@ export type TrackExtensions = {
export type LineStyleExtension = { export type LineStyleExtension = {
'gpx_style:color'?: string; 'gpx_style:color'?: string;
'gpx_style:opacity'?: number; 'gpx_style:opacity'?: number;
'gpx_style:weight'?: number; 'gpx_style:width'?: number;
}; };
export type TrackSegmentType = { export type TrackSegmentType = {

2
gpx/test-data/with_style.gpx
View File

@@ -18,7 +18,7 @@
<gpx_style:line> <gpx_style:line>
<gpx_style:color>2d3ee9</gpx_style:color> <gpx_style:color>2d3ee9</gpx_style:color>
<gpx_style:opacity>0.5</gpx_style:opacity> <gpx_style:opacity>0.5</gpx_style:opacity>
<gpx_style:weight>6</gpx_style:weight> <gpx_style:width>6</gpx_style:width>
</gpx_style:line> </gpx_style:line>
</extensions> </extensions>
<trkseg> <trkseg>

38
website/src/lib/components/file-list/StyleDialog.svelte
View File

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

10
website/src/lib/components/gpx-layer/GPXLayer.ts
View File

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

2
website/src/lib/db.ts
View File

@@ -107,7 +107,7 @@ export const settings = {
streetViewSource: dexieSettingStore('streetViewSource', 'mapillary'), streetViewSource: dexieSettingStore('streetViewSource', 'mapillary'),
fileOrder: dexieSettingStore<string[]>('fileOrder', []), fileOrder: dexieSettingStore<string[]>('fileOrder', []),
defaultOpacity: dexieSettingStore('defaultOpacity', 0.7), 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), bottomPanelSize: dexieSettingStore('bottomPanelSize', 170),
rightPanelSize: dexieSettingStore('rightPanelSize', 240), rightPanelSize: dexieSettingStore('rightPanelSize', 240),
}; };