steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 23:53: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 style = this.getStyle();
let fileStyle = {}; let fileStyle = {};
if (style.color.length === 1) { if (style.color.length === 1) {
fileStyle['color'] = style.color[0]; fileStyle['gpx_style:color'] = style.color[0];
} }
if (style.weight.length === 1) { if (style.weight.length === 1) {
fileStyle['weight'] = style.weight[0]; fileStyle['gpx_style:weight'] = style.weight[0];
} }
if (style.opacity.length === 1) { if (style.opacity.length === 1) {
fileStyle['opacity'] = style.opacity[0]; fileStyle['gpx_style:opacity'] = style.opacity[0];
} }
if (Object.keys(fileStyle).length > 0) { if (Object.keys(fileStyle).length > 0) {
this.setStyle(fileStyle); this.setStyle(fileStyle);
@@ -188,14 +188,14 @@ export class GPXFile extends GPXTreeNode<Track> {
getStyle(): MergedLineStyles { getStyle(): MergedLineStyles {
return this.trk.map((track) => track.getStyle()).reduce((acc, style) => { return this.trk.map((track) => track.getStyle()).reduce((acc, style) => {
if (style) { if (style) {
if (style.color && !acc.color.includes(style.color)) { if (style["gpx_style:color"] && !acc.color.includes(style["gpx_style:color"])) {
acc.color.push(style.color); acc.color.push(style["gpx_style:color"]);
} }
if (style.opacity && !acc.opacity.includes(style.opacity)) { if (style["gpx_style:opacity"] && !acc.opacity.includes(style["gpx_style:opacity"])) {
acc.opacity.push(style.opacity); acc.opacity.push(style["gpx_style:opacity"]);
} }
if (style.weight && !acc.weight.includes(style.weight)) { if (style["gpx_style:weight"] && !acc.weight.includes(style["gpx_style:weight"])) {
acc.weight.push(style.weight); acc.weight.push(style["gpx_style:weight"]);
} }
} }
return acc; return acc;
@@ -399,14 +399,14 @@ export class GPXFile extends GPXTreeNode<Track> {
if (!this._data.style) { if (!this._data.style) {
this._data.style = {}; this._data.style = {};
} }
if (style.color) { if (style["gpx_style:color"]) {
this._data.style.color = style.color.replace('#', ''); this._data.style.color = style["gpx_style:color"].replace('#', '');
} }
if (style.opacity) { if (style["gpx_style:opacity"]) {
this._data.style.opacity = style.opacity; this._data.style.opacity = style["gpx_style:opacity"];
} }
if (style.weight) { if (style["gpx_style:weight"]) {
this._data.style.weight = style.weight; this._data.style.weight = style["gpx_style:weight"];
} }
} }
@@ -506,10 +506,10 @@ export class Track extends GPXTreeNode<TrackSegment> {
getStyle(): LineStyleExtension | undefined { getStyle(): LineStyleExtension | undefined {
if (this.extensions && this.extensions['gpx_style:line']) { 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 { return {
...this.extensions["gpx_style:line"], ...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']; return this.extensions['gpx_style:line'];
@@ -521,14 +521,14 @@ export class Track extends GPXTreeNode<TrackSegment> {
return this.children.map((child) => { return this.children.map((child) => {
let geoJSON = child.toGeoJSON(); let geoJSON = child.toGeoJSON();
if (this.extensions && this.extensions['gpx_style:line']) { if (this.extensions && this.extensions['gpx_style:line']) {
if (this.extensions['gpx_style:line'].color) { if (this.extensions['gpx_style:line']["gpx_style:color"]) {
geoJSON.properties['color'] = `#${this.extensions['gpx_style:line'].color}`; geoJSON.properties['color'] = `#${this.extensions['gpx_style:line']["gpx_style:color"]}`;
} }
if (this.extensions['gpx_style:line'].opacity) { if (this.extensions['gpx_style:line']["gpx_style:opacity"]) {
geoJSON.properties['opacity'] = this.extensions['gpx_style:line'].opacity; geoJSON.properties['opacity'] = this.extensions['gpx_style:line']["gpx_style:opacity"];
} }
if (this.extensions['gpx_style:line'].weight) { if (this.extensions['gpx_style:line']["gpx_style:weight"]) {
geoJSON.properties['weight'] = this.extensions['gpx_style:line'].weight; geoJSON.properties['weight'] = this.extensions['gpx_style:line']["gpx_style:weight"];
} }
} }
return geoJSON; return geoJSON;
@@ -641,14 +641,14 @@ export class Track extends GPXTreeNode<TrackSegment> {
if (!this.extensions['gpx_style:line']) { if (!this.extensions['gpx_style:line']) {
this.extensions['gpx_style:line'] = {}; this.extensions['gpx_style:line'] = {};
} }
if (style.color !== undefined && (force || this.extensions['gpx_style:line'].color === undefined)) { if (style["gpx_style:color"] !== undefined && (force || this.extensions['gpx_style:line']["gpx_style:color"] === undefined)) {
this.extensions['gpx_style:line'].color = style.color.replace('#', ''); 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)) { if (style["gpx_style:opacity"] !== undefined && (force || this.extensions['gpx_style:line']["gpx_style:opacity"] === undefined)) {
this.extensions['gpx_style:line'].opacity = style.opacity; this.extensions['gpx_style:line']["gpx_style:opacity"] = style["gpx_style:opacity"];
} }
if (style.weight !== undefined && (force || this.extensions['gpx_style:line'].weight === undefined)) { if (style["gpx_style:weight"] !== undefined && (force || this.extensions['gpx_style:line']["gpx_style:weight"] === undefined)) {
this.extensions['gpx_style:line'].weight = style.weight; 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); 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); return parseFloat(tagValue);
} }

6
gpx/src/types.ts
View File

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

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

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

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

@@ -84,8 +84,8 @@
} else if (node instanceof Track) { } else if (node instanceof Track) {
let style = node.getStyle(); let style = node.getStyle();
if (style) { if (style) {
if (style.color && !nodeColors.includes(style.color)) { if (style['gpx_style:color'] && !nodeColors.includes(style['gpx_style:color'])) {
nodeColors.push(style.color); nodeColors.push(style['gpx_style:color']);
} }
} }
if (nodeColors.length === 0) { 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 track = file.trk[item.getTrackIndex()];
let style = track.getStyle(); let style = track.getStyle();
if (style) { if (style) {
if (style.color && !colors.includes(style.color)) { if (style['gpx_style:color'] && !colors.includes(style['gpx_style:color'])) {
colors.push(style.color); colors.push(style['gpx_style:color']);
} }
if (style.opacity && !opacity.includes(style.opacity)) { if (style['gpx_style:opacity'] && !opacity.includes(style['gpx_style:opacity'])) {
opacity.push(style.opacity); opacity.push(style['gpx_style:opacity']);
} }
if (style.weight && !weight.includes(style.weight)) { if (style['gpx_style:weight'] && !weight.includes(style['gpx_style:weight'])) {
weight.push(style.weight); weight.push(style['gpx_style:weight']);
} }
} }
if (!colors.includes(layer.layerColor)) { if (!colors.includes(layer.layerColor)) {
@@ -138,22 +138,22 @@
on:click={() => { on:click={() => {
let style = {}; let style = {};
if (colorChanged) { if (colorChanged) {
style.color = color; style['gpx_style:color'] = color;
} }
if (opacityChanged) { if (opacityChanged) {
style.opacity = opacity[0]; style['gpx_style:opacity'] = opacity[0];
} }
if (weightChanged) { if (weightChanged) {
style.weight = weight[0]; style['gpx_style:weight'] = weight[0];
} }
dbUtils.setStyleToSelection(style); dbUtils.setStyleToSelection(style);
if (item instanceof ListFileItem && $selection.size === gpxLayers.size) { if (item instanceof ListFileItem && $selection.size === gpxLayers.size) {
if (style.opacity) { if (style['gpx_style:opacity']) {
$defaultOpacity = style.opacity; $defaultOpacity = style['gpx_style:opacity'];
} }
if (style.weight) { if (style['gpx_style:weight']) {
$defaultWeight = style.weight; $defaultWeight = style['gpx_style:weight'];
} }
} }