steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-11-04 05:21:09 +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) {
fileStyle['gpx_style:color'] = style.color[0];
}
if (style.weight.length === 1) {
fileStyle['gpx_style:weight'] = style.weight[0];
if (style.width.length === 1) {
fileStyle['gpx_style:width'] = style.width[0];
}
if (style.opacity.length === 1) {
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"])) {
acc.opacity.push(style["gpx_style:opacity"]);
}
if (style["gpx_style:weight"] && !acc.weight.includes(style["gpx_style:weight"])) {
acc.weight.push(style["gpx_style:weight"]);
if (style["gpx_style:width"] && !acc.width.includes(style["gpx_style:width"])) {
acc.width.push(style["gpx_style:width"]);
}
}
return acc;
}, {
color: [],
opacity: [],
weight: []
width: []
});
}
@@ -405,8 +405,8 @@ export class GPXFile extends GPXTreeNode<Track> {
if (style["gpx_style:opacity"]) {
this._data.style.opacity = style["gpx_style:opacity"];
}
if (style["gpx_style:weight"]) {
this._data.style.weight = style["gpx_style:weight"];
if (style["gpx_style:width"]) {
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"]) {
geoJSON.properties['opacity'] = this.extensions['gpx_style:line']["gpx_style:opacity"];
}
if (this.extensions['gpx_style:line']["gpx_style:weight"]) {
geoJSON.properties['weight'] = this.extensions['gpx_style:line']["gpx_style:weight"];
if (this.extensions['gpx_style:line']["gpx_style:width"]) {
geoJSON.properties['width'] = this.extensions['gpx_style:line']["gpx_style:width"];
}
}
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)) {
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)) {
this.extensions['gpx_style:line']["gpx_style:weight"] = style["gpx_style:weight"];
if (style["gpx_style:width"] !== undefined && (force || this.extensions['gpx_style:line']["gpx_style:width"] === undefined)) {
this.extensions['gpx_style:line']["gpx_style:width"] = style["gpx_style:width"];
}
}
@@ -1632,7 +1632,7 @@ function getOriginal(obj: any): any {
export type MergedLineStyles = {
color: string[]
opacity: number[],
weight: number[],
width: number[],
};
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' ||
tagName === 'gpx_style:opacity' || tagName === 'gpx_style:weight') {
tagName === 'gpx_style:opacity' || tagName === 'gpx_style:width') {
return parseFloat(tagValue);
}

2
gpx/src/types.ts
View File

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

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

@@ -18,7 +18,7 @@
<gpx_style:line>
<gpx_style:color>2d3ee9</gpx_style:color>
<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>
</extensions>
<trkseg>

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

@@ -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'];
}
}

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

@@ -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;

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

@@ -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),
};