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 style extension handling

Browse Source
This commit is contained in:
vcoppe
2024-12-28 15:16:32 +01:00
parent 745c7e8470
commit d7aae81c41
6 changed files with 52 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
gpx/src/gpx.ts
View File

@@ -138,13 +138,13 @@ export class GPXFile extends GPXTreeNode<Track> {
let style = this.getStyle();
let fileStyle = {};
if (style.color.length === 1) {
fileStyle['color'] = style.color[0];
fileStyle['gpx_style:color'] = style.color[0];
}
if (style.weight.length === 1) {
fileStyle['weight'] = style.weight[0];
fileStyle['gpx_style:weight'] = style.weight[0];
}
if (style.opacity.length === 1) {
fileStyle['opacity'] = style.opacity[0];
fileStyle['gpx_style:opacity'] = style.opacity[0];
}
if (Object.keys(fileStyle).length > 0) {
this.setStyle(fileStyle);
@@ -188,14 +188,14 @@ export class GPXFile extends GPXTreeNode<Track> {
getStyle(): MergedLineStyles {
return this.trk.map((track) => track.getStyle()).reduce((acc, style) => {
if (style) {
if (style.color && !acc.color.includes(style.color)) {
acc.color.push(style.color);
if (style["gpx_style:color"] && !acc.color.includes(style["gpx_style:color"])) {
acc.color.push(style["gpx_style:color"]);
}
if (style.opacity && !acc.opacity.includes(style.opacity)) {
acc.opacity.push(style.opacity);
if (style["gpx_style:opacity"] && !acc.opacity.includes(style["gpx_style:opacity"])) {
acc.opacity.push(style["gpx_style:opacity"]);
}
if (style.weight && !acc.weight.includes(style.weight)) {
acc.weight.push(style.weight);
if (style["gpx_style:weight"] && !acc.weight.includes(style["gpx_style:weight"])) {
acc.weight.push(style["gpx_style:weight"]);
}
}
return acc;
@@ -399,14 +399,14 @@ export class GPXFile extends GPXTreeNode<Track> {
if (!this._data.style) {
this._data.style = {};
}
if (style.color) {
this._data.style.color = style.color.replace('#', '');
if (style["gpx_style:color"]) {
this._data.style.color = style["gpx_style:color"].replace('#', '');
}
if (style.opacity) {
this._data.style.opacity = style.opacity;
if (style["gpx_style:opacity"]) {
this._data.style.opacity = style["gpx_style:opacity"];
}
if (style.weight) {
this._data.style.weight = style.weight;
if (style["gpx_style:weight"]) {
this._data.style.weight = style["gpx_style:weight"];
}
}
@@ -506,10 +506,10 @@ export class Track extends GPXTreeNode<TrackSegment> {
getStyle(): LineStyleExtension | undefined {
if (this.extensions && this.extensions['gpx_style:line']) {
if (this.extensions["gpx_style:line"].color) {
if (this.extensions["gpx_style:line"]["gpx_style:color"]) {
return {
...this.extensions["gpx_style:line"],
color: `#${this.extensions["gpx_style:line"].color}`
["gpx_style:color"]: `#${this.extensions["gpx_style:line"]["gpx_style:color"]}`
}
}
return this.extensions['gpx_style:line'];
@@ -521,14 +521,14 @@ export class Track extends GPXTreeNode<TrackSegment> {
return this.children.map((child) => {
let geoJSON = child.toGeoJSON();
if (this.extensions && this.extensions['gpx_style:line']) {
if (this.extensions['gpx_style:line'].color) {
geoJSON.properties['color'] = `#${this.extensions['gpx_style:line'].color}`;
if (this.extensions['gpx_style:line']["gpx_style:color"]) {
geoJSON.properties['color'] = `#${this.extensions['gpx_style:line']["gpx_style:color"]}`;
}
if (this.extensions['gpx_style:line'].opacity) {
geoJSON.properties['opacity'] = this.extensions['gpx_style:line'].opacity;
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'].weight) {
geoJSON.properties['weight'] = this.extensions['gpx_style:line'].weight;
if (this.extensions['gpx_style:line']["gpx_style:weight"]) {
geoJSON.properties['weight'] = this.extensions['gpx_style:line']["gpx_style:weight"];
}
}
return geoJSON;
@@ -641,14 +641,14 @@ export class Track extends GPXTreeNode<TrackSegment> {
if (!this.extensions['gpx_style:line']) {
this.extensions['gpx_style:line'] = {};
}
if (style.color !== undefined && (force || this.extensions['gpx_style:line'].color === undefined)) {
this.extensions['gpx_style:line'].color = style.color.replace('#', '');
if (style["gpx_style:color"] !== undefined && (force || this.extensions['gpx_style:line']["gpx_style:color"] === undefined)) {
this.extensions['gpx_style:line']["gpx_style:color"] = style["gpx_style:color"].replace('#', '');
}
if (style.opacity !== undefined && (force || this.extensions['gpx_style:line'].opacity === undefined)) {
this.extensions['gpx_style:line'].opacity = style.opacity;
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.weight !== undefined && (force || this.extensions['gpx_style:line'].weight === undefined)) {
this.extensions['gpx_style:line'].weight = style.weight;
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"];
}
}

3
gpx/src/io.ts
View File

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

6
gpx/src/types.ts
View File

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

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

@@ -16,9 +16,9 @@
<type>Cycling</type>
<extensions>
<gpx_style:line>
<color>#2d3ee9</color>
<opacity>0.5</opacity>
<weight>6</weight>
<gpx_style:color>2d3ee9</gpx_style:color>
<gpx_style:opacity>0.5</gpx_style:opacity>
<gpx_style:weight>6</gpx_style:weight>
</gpx_style:line>
</extensions>
<trkseg>

4
website/src/lib/components/file-list/FileListNodeLabel.svelte
View File

@@ -84,8 +84,8 @@
} else if (node instanceof Track) {
let style = node.getStyle();
if (style) {
if (style.color && !nodeColors.includes(style.color)) {
nodeColors.push(style.color);
if (style['gpx_style:color'] && !nodeColors.includes(style['gpx_style:color'])) {
nodeColors.push(style['gpx_style:color']);
}
}
if (nodeColors.length === 0) {

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

@@ -60,14 +60,14 @@
let track = file.trk[item.getTrackIndex()];
let style = track.getStyle();
if (style) {
if (style.color && !colors.includes(style.color)) {
colors.push(style.color);
if (style['gpx_style:color'] && !colors.includes(style['gpx_style:color'])) {
colors.push(style['gpx_style:color']);
}
if (style.opacity && !opacity.includes(style.opacity)) {
opacity.push(style.opacity);
if (style['gpx_style:opacity'] && !opacity.includes(style['gpx_style:opacity'])) {
opacity.push(style['gpx_style:opacity']);
}
if (style.weight && !weight.includes(style.weight)) {
weight.push(style.weight);
if (style['gpx_style:weight'] && !weight.includes(style['gpx_style:weight'])) {
weight.push(style['gpx_style:weight']);
}
}
if (!colors.includes(layer.layerColor)) {
@@ -138,22 +138,22 @@
on:click={() => {
let style = {};
if (colorChanged) {
style.color = color;
style['gpx_style:color'] = color;
}
if (opacityChanged) {
style.opacity = opacity[0];
style['gpx_style:opacity'] = opacity[0];
}
if (weightChanged) {
style.weight = weight[0];
style['gpx_style:weight'] = weight[0];
}
dbUtils.setStyleToSelection(style);
if (item instanceof ListFileItem && $selection.size === gpxLayers.size) {
if (style.opacity) {
$defaultOpacity = style.opacity;
if (style['gpx_style:opacity']) {
$defaultOpacity = style['gpx_style:opacity'];
}
if (style.weight) {
$defaultWeight = style.weight;
if (style['gpx_style:weight']) {
$defaultWeight = style['gpx_style:weight'];
}
}