@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
1,115 lines (1,096 loc) • 63.7 kB
JavaScript
import { html as uHtml } from 'uhtml';
import GirafeHTMLElement from '../../../base/GirafeHTMLElement';
import { CrossSectionState } from '../crosssectionstate';
import { download } from '../../../tools/export/download';
import MapManager from '../../../tools/state/mapManager';
import I18nManager from '../../../tools/i18n/i18nmanager';
import { Circle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature';
import { LinearRing, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon, GeometryCollection } from 'ol/geom';
import { Draw, Modify } from 'ol/interaction';
import { KML, GeoJSON, GPX } from 'ol/format';
import { noModifierKeys, primaryAction } from 'ol/events/condition';
import OL3Parser from 'jsts/org/locationtech/jts/io/OL3Parser.js';
import { BufferOp, BufferParameters } from 'jsts/org/locationtech/jts/operation/buffer.js';
import { getDistance } from '../../../tools/utils/olutils';
class CrossSectionSettingsComponent extends GirafeHTMLElement {
constructor() {
super('cross-section-settings');
Object.defineProperty(this, "template", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
return uHtml `<style>
#panel{min-width:20rem;height:100%;overflow:auto}#content{background:var(--bkg-color);margin:0;padding:1.5rem}#content .message{text-align:center;width:100%}#content .message *{margin:.25rem}#content div.option{justify-content:space-between;margin-top:.5rem;display:flex}h3,.text-label{color:var(--text-color)}.scrollable-table-container{width:100%;max-height:200px;display:block;overflow-y:auto}.scrollable-table{border-collapse:collapse;width:100%}.scrollable-table td{color:var(--text-color)}.table-cell{border:none;padding:4px 2px}.sticky-header{z-index:1;background-color:#f1f1f1;border:none;padding:5px 2px;position:sticky;top:0}.cell{flex:100px;min-width:100px;max-width:100%}input{background-color:var(--bkg-color);color:var(--text-color);border:solid 1px var(--text-color);border-radius:3px;outline:0}.btn-group{margin:5px 0}.btn-group-flex{flex-direction:row;gap:.5rem;margin:.5rem auto;display:flex}.btn-group-flex>button,.btn-group-flex>select,.btn-group-flex>input{flex:50%}.btn-group-flex>label{text-align:right;flex:50%}.btn-group-flex label:after{content:" :"}.btn-group-inline{gap:5px;margin:10px auto;display:inline}.btn-group-grid{gap:5px;margin:10px auto;display:grid}.reset-btn{background-color:var(--bkg-color);width:22px;color:var(--text-color);border:none;border-radius:50%;justify-content:center;align-items:center;margin:2px;padding:0;display:flex}.reset-btn img{object-fit:contain}.reset-btn:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.action-btn{color:#fff;background-color:none;border-radius:50%;margin:2px;padding:2px}.action-btn:hover{background-color:var(--bkg-color-grad1);cursor:pointer;border-radius:50%}
</style><style>
*{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;border-bottom:1px solid gray;justify-content:left;align-items:end;gap:1rem;height:2rem;margin:.5rem auto 1rem;display:flex}.gg-tab{cursor:pointer;color:var(--text-color);background:0 0;border:none;padding:.5rem}.gg-tab.active{border-bottom:solid 2px var(--text-color-grad2);font-weight:600}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}
</style>
<div id="panel">
<div id="content">
<!-- DRAW/DELETE CROSS SECTION BUTTONS -->
<div class="btn-group-flex">
<button
id="draw-profile-btn"
class="${this.crossSectionState.drawProfile ? 'gg-button active' : 'gg-button'}"
tip="draw_profile_help"
onclick="${() => this.toggleLineDraw()}"
i18n="draw_profile">
Draw
</button>
<button
id="delete-profile-btn"
class="gg-button"
tip="delete_help"
onclick="${() => this.deleteProfile()}"
i18n="delete">
Delete
</button>
</div>
<!-- CROSS SECTION WIDTH BUTTON -->
<div class="btn-group-flex">
<label for="section-width-btn" i18n="profile_width" class="gg-label">Width [m]</label>
<input
id="section-width-btn"
class="gg-input"
type="number"
value="${this.crossSectionState.sectionWidthSettings.value}"
min="${this.crossSectionState.sectionWidthSettings.min}"
max="${this.crossSectionState.sectionWidthSettings.max}"
step="${this.crossSectionState.sectionWidthSettings.step}"
oninput="${(e) => this.setSectionWidth(parseFloat(e.target.value))}" />
</div>
<!-- MAP/CROSS SECTION VIEW SYNC BUTTONS -->
<div class="btn-group-flex">
<button
id="reset-zoom-btn"
class="gg-button"
tip="profile_reset_view_help"
onclick="${() => this.resetZoom()}"
i18n="profile_reset_view">
Reset view
</button>
<button
id="sync-views-btn"
class="${this.crossSectionState.syncViews ? 'gg-button active' : 'gg-button'}"
tip="profile_sync_view_help"
onclick="${() => this.setViewSync(!this.crossSectionState.syncViews)}"
i18n="profile_sync_view">
Sync. views
</button>
</div>
<!-- TRANSLATE PROFILE BUTTONS -->
<div class="btn-group-flex">
<button
class="gg-icon-button gg-big"
tip="profile_shift_up_help"
onclick="${() => this.shiftLinestring([0.0, this.crossSectionState.linestringShift])}">
<img src="icons/arrow_up.svg" alt="${this.i18nManager.getTranslation('profile_shift_up_help')}" />
</button>
<button
class="gg-icon-button gg-big"
tip="profile_shift_down_help"
onclick="${() => this.shiftLinestring([0.0, -this.crossSectionState.linestringShift])}">
<img src="icons/arrow_down.svg" alt="${this.i18nManager.getTranslation('profile_shift_down_help')}" />
</button>
<button
class="gg-icon-button gg-big"
tip="profile_shift_left_help"
onclick="${() => this.shiftLinestring([-this.crossSectionState.linestringShift, 0.0])}">
<img src="icons/arrow_left.svg" alt="${this.i18nManager.getTranslation('profile_shift_left_help')}" />
</button>
<button
class="gg-icon-button gg-big"
tip="profile_shift_right_help"
onclick="${() => this.shiftLinestring([this.crossSectionState.linestringShift, 0.0])}">
<img src="icons/arrow_right.svg" alt="${this.i18nManager.getTranslation('profile_shift_right_help')}" />
</button>
</div>
<div class="btn-group-flex">
<div class="cell">
<label for="z-ratio-btn" class="gg-label">
${this.i18nManager.getTranslation('profile_exaggeration')}
(${this.crossSectionState.verticalExaggerationSettings.value})</label
>
<div style="display: flex; align-items: center">
<input
id="z-ratio-btn"
type="range"
class="gg-range"
min="${this.crossSectionState.verticalExaggerationSettings.min}"
max="${this.crossSectionState.verticalExaggerationSettings.max}"
step="${this.crossSectionState.verticalExaggerationSettings.step}"
value="${this.crossSectionState.verticalExaggerationSettings.value}"
oninput="${(e) => this.setVerticalExaggeration(parseFloat(e.target.value))}"
style="flex: 1; min-width: 0; box-sizing: border-box" />
<button
id="z-ratio-reset-btn"
class="reset-btn"
tip="profile_exaggeration_reset_help"
onclick="${() => this.setVerticalExaggeration(this.crossSectionState.verticalExaggerationSettings.default)}">
<img
src="icons/restart_alt.svg"
alt="${this.i18nManager.getTranslation('profile_exaggeration_reset_help')}" />
</button>
</div>
</div>
</div>
<div class="btn-group-flex">
<div class="cell">
<label for="point-size-label" class="gg-label">
${this.i18nManager.getTranslation('profile_point_size')}
(${this.crossSectionState.pointSizeSettings.value})</label
>
<div style="display: flex; align-items: center">
<input
id="point-size-btn"
type="range"
class="gg-range"
min="${this.crossSectionState.pointSizeSettings.min}"
max="${this.crossSectionState.pointSizeSettings.max}"
step="${this.crossSectionState.pointSizeSettings.step}"
value="${this.crossSectionState.pointSizeSettings.value}"
oninput="${(e) => this.setPointSize(parseFloat(e.target.value))}"
style="flex: 1; min-width: 0; box-sizing: border-box" />
<button
id="point-size-reset-btn"
class="reset-btn"
tip="profile_point_size_reset_help"
onclick="${() => this.setPointSize(this.crossSectionState.pointSizeSettings.default)}">
<img
src="icons/restart_alt.svg"
alt="${this.i18nManager.getTranslation('profile_point_size_reset_help')}" />
</button>
</div>
</div>
</div>
<h3 i18n="profile_colors">Colors</h3>
<div class="btn-group-flex">
<!-- SELECT VARIABLE USED FOR COLORING -->
<label for="color-variable-btn" i18n="profile_color_by" class="gg-label">Color by</label>
<select
id="color-variable-btn"
class="gg-select"
oninput="${(e) => this.setColorVariable(e.target.value)}">
<option
value="uniform"
i18n="color_option_uniform"
?selected="${this.crossSectionState.colorVariable === 'uniform'}">
Single color
</option>
<option
value="natural"
i18n="color_option_natural"
?selected="${this.crossSectionState.colorVariable === 'natural'}">
Natural
</option>
<option
value="intensity"
i18n="color_option_intensity"
?selected="${this.crossSectionState.colorVariable === 'intensity'}">
Intensity
</option>
<option
value="classification"
i18n="color_option_classification"
?selected="${this.crossSectionState.colorVariable === 'classification'}">
Classification
</option>
</select>
</div>
<div class="btn-group-flex" hidden="${this.crossSectionState.colorVariable !== 'intensity'}">
<!-- SELECT PALETTE -->
<label for="sequential-color-btn" i18n="profile_colormap" class="gg-label">Colorscale</label>
<select
id="sequential-color-btn"
class="gg-select"
oninput="${(e) => this.setColorPalette(e.target.value)}">
<option
value="spectral"
?selected="${this.crossSectionState.colorPalette === 'spectral'}"
i18n="palette_option_spectral">
Spectral
</option>
<option
value="greys"
?selected="${this.crossSectionState.colorPalette === 'greys'}"
i18n="palette_option_greys">
Greys
</option>
<option
value="blues"
?selected="${this.crossSectionState.colorPalette === 'blues'}"
i18n="palette_option_blues">
Blues
</option>
<option
value="viridis"
?selected="${this.crossSectionState.colorPalette === 'viridis'}"
i18n="palette_option_viridis">
Viridis
</option>
<option
value="magma"
?selected="${this.crossSectionState.colorPalette === 'magma'}"
i18n="palette_option_magma">
Magma
</option>
</select>
</div>
<div class="btn-group-flex" hidden="${this.crossSectionState.colorVariable !== 'uniform'}">
<!-- SELECT UNIFORM COLOR -->
<label for="uniform-color-btn" i18n="color_option_uniform" class="gg-label">Uniform color</label>
<input
id="uniform-color-btn"
class="gg-input"
type="color"
value="${this.crossSectionState.colorUniform}"
oninput="${(e) => this.setUniformColor(e.target.value)}" />
</div>
<!-- SELECT BACKGROUND COLOR -->
<div class="btn-group-flex">
<label for="background-color-btn" i18n="profile_background_color" class="gg-label">Background color</label>
<input
id="background-color-btn"
class="gg-input"
type="color"
value="${this.crossSectionState.backgroundColor}"
oninput="${(e) => this.setBackgroundColor(e.target.value)}" />
</div>
<!-- MEASUREMENTS BUTTONS -->
<div class="btn-group-flex">
<button
id="draw-measurements-btn"
class="${this.crossSectionState.drawMeasurement ? 'gg-button active' : 'gg-button'}"
tip="profile_measurement_help"
onclick="${() => this.toggleMeasureDraw()}"
i18n="profile_measurement"
?disabled="${!this.crossSectionState.enableMeasurement}">
Measure
</button>
<button
id="delete-measurements-btn"
class="gg-button"
tip="profile_delete_measurements_help"
onclick="${() => this.deleteAllMeasurements()}"
i18n="profile_delete_measurements">
Delete all
</button>
</div>
<!-- MEASUREMENTS TABLE -->
<div class="scrollable-table-container">
<table id="measurements-table" class="scrollable-table">
<thead>
<tr>
<th class="table-cell sticky-header" style="text-align: center"></th>
<th class="table-cell sticky-header" style="text-align: right" i18n="profile_table_dist">DIST.</th>
<th class="table-cell sticky-header" style="text-align: right" i18n="profile_table_slope">SLOPE.</th>
<th class="table-cell sticky-header" style="text-align: center"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- DRAW/DELETE MARKERS SECTION -->
<div class="btn-group-flex">
<button
id="draw-markers-btn"
class="${this.crossSectionState.drawMarker ? 'gg-button active' : 'gg-button'}"
tip="profile_draw_markers_help"
onclick="${() => this.toggleMarkerDraw()}"
i18n="profile_draw_markers"
?disabled="${!this.crossSectionState.enableAnnotation}">
Annotate
</button>
<button
id="delete-markers-btn"
class="gg-button"
tip="profile_delete_markers_help"
onclick="${() => this.deleteAllMarkers()}"
i18n="profile_delete_markers">
Delete all
</button>
</div>
<!-- ANNOTATIONS TABLE -->
<div class="scrollable-table-container">
<table id="markers-table" class="scrollable-table">
<thead>
<tr>
<th class="sticky-header" style="text-align: center" i18n="profile_table_id">ID</th>
<th class="sticky-header" style="text-align: right" i18n="profile_table_coord">COORD.</th>
<th class="sticky-header" style="text-align: center"></th>
<th class="sticky-header" style="text-align: center"></th>
<th class="sticky-header" style="text-align: center"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<h3 i18n="profile_print_title">Print</h3>
<!-- PRINT BUTTON -->
<div class="btn-group-flex">
<select
id="print-profile-format-btn"
class="gg-select"
oninput="${(e) => this.setPrintFileFormat(e.target.value)}">
<option value="svg" i18n="SVG">SVG</option>
</select>
<button
id="print-profile-btn"
class="gg-button"
tip="profile_print_help"
onclick="${() => this.printPlot(this.crossSectionState.printFileFormat)}"
i18n="profile_print">
Print
</button>
</div>
<h3 i18n="profile_download_title">Downloads</h3>
<!-- MARKERS DOWNLOAD BUTTON -->
<div class="text-label" i18n="profile_markers_download">Markers</div>
<div class="btn-group-flex">
<select
id="download-markers-format-btn"
class="gg-select"
oninput="${(e) => this.setAnnotationsFileFormat(e.target.value)}">
<option value="kml" i18n="KML">KML</option>
<option value="geojson" i18n="GeoJSON">GeoJSON</option>
<option value="gpx" i18n="GPX">GPX</option>
</select>
<button
id="download-markers-btn"
class="gg-button"
tip="download_help"
onclick="${() => this.exportFeature(this.points, 'markers', this.crossSectionState.downloadAnnotationsFormat)}"
i18n="download"
?disabled="${!this.crossSectionState.enableAnnotationsDownload}">
Download
</button>
</div>
<!-- LINESTRING DOWNLOAD BUTTON -->
<div class="text-label" i18n="profile_linestring_download">Profile line</div>
<div class="btn-group-flex">
<select
id="download-linestring-format-btn"
class="gg-select"
oninput="${(e) => this.setLineFileFormat(e.target.value)}">
<option value="kml" i18n="KML">KML</option>
<option value="geojson" i18n="GeoJSON">GeoJSON</option>
<option value="gpx" i18n="GPX">GPX</option>
</select>
<button
id="download-linestring-btn"
class="gg-button"
tip="download_help"
onclick="${() => this.exportFeature([this.linestring], 'linestring', this.crossSectionState.downloadLinestringFormat)}"
i18n="download"
?disabled="${!this.crossSectionState.enableLinestringDownload}">
Download
</button>
</div>
</div>
</div>
`;
}
});
Object.defineProperty(this, "crossSectionState", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "i18nManager", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "eventsCallbacks", {
enumerable: true,
configurable: true,
writable: true,
value: []
});
Object.defineProperty(this, "darkFrontendMode", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "visible", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "map", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "linestring", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "linestringSource", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "linesLayer", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "domainLinestring", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "domainLinestringSource", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "domainLineStringLayer", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "polygon", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "polygonSource", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "polygonLayer", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "pointer", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "pointerSource", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "pointerLayer", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "points", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "pointsSource", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "pointsLayer", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "drawInteraction", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "modifyInteraction", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "linestringLength", {
enumerable: true,
configurable: true,
writable: true,
value: 0.0
});
Object.defineProperty(this, "markersTable", {
enumerable: true,
configurable: true,
writable: true,
value: null
}); // reference to 'markers-table' shadow DOM element
Object.defineProperty(this, "measurementsTable", {
enumerable: true,
configurable: true,
writable: true,
value: null
}); // reference to 'measurements-table' shadow DOM element
// @ts-expect-error: Annoying initiator
Object.defineProperty(this, "parser", {
enumerable: true,
configurable: true,
writable: true,
value: new OL3Parser(undefined, undefined)
});
Object.defineProperty(this, "iconStyle", {
enumerable: true,
configurable: true,
writable: true,
value: new Style({
image: new Icon({
color: '#FF8C00',
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: 'icons/adjust.svg'
})
})
});
Object.defineProperty(this, "pointStyleFunction", {
enumerable: true,
configurable: true,
writable: true,
value: (feature) => {
return new Style({
image: new Circle({
radius: 7,
fill: new Fill({ color: feature.get('show') ? [255, 255, 0, 0.75] : [0, 0, 0, 0.75] }),
stroke: new Stroke({ color: feature.get('show') ? '#FF0000' : '#000000', width: 2 })
}),
text: new Text({
text: `${feature.get('label')}`,
font: '16px sans-serif',
textAlign: 'center',
justify: 'center',
textBaseline: 'middle',
placement: 'point',
fill: new Fill({ color: [255, 255, 255, 1] }),
offsetY: -30,
backgroundFill: new Fill({ color: [0, 0, 0, 1] }),
padding: [5, 7, 5, 7]
})
});
}
});
this.state.extendedState.crossSection = new CrossSectionState();
this.crossSectionState = this.state.extendedState.crossSection;
this.i18nManager = I18nManager.getInstance();
this.map = MapManager.getInstance().getMap();
// Initialize JSTS parser
this.parser.inject(Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon, GeometryCollection);
this.initializeMapElements();
}
initializeMapElements() {
this.initializeLinestring();
this.initializeDomainLinestring();
this.initializePolygon();
this.initializePointer();
this.initializePointsLayer();
this.initializeInteractions();
}
initializeLinestring() {
this.linestring = new Feature({
id: 'cross-section-linestring',
geometry: new LineString([])
});
this.linestringSource = new VectorSource();
this.linestringSource.on('addfeature', (e) => {
this.handleAddFeature(e);
});
this.linesLayer = new VectorLayer({
source: this.linestringSource,
style: {
'fill-color': 'rgba(255, 255, 255, 0.2)',
'stroke-color': '#ff0000',
'stroke-width': 2
},
properties: {
addToPrintedLayers: true,
altitudeMode: 'clampToGround'
}
});
this.map.addLayer(this.linesLayer);
}
initializeDomainLinestring() {
this.domainLinestring = new Feature({
id: 'domainLinestring',
geometry: new LineString([])
});
this.domainLinestringSource = new VectorSource({ features: [] });
this.domainLineStringLayer = new VectorLayer({
source: this.domainLinestringSource,
style: {
'stroke-color': '#0000ff',
'stroke-width': 2
},
properties: {
addToPrintedLayers: true,
altitudeMode: 'clampToGround'
}
});
this.map.addLayer(this.domainLineStringLayer);
}
initializePolygon() {
this.polygon = new Feature({
id: 'linestringBuffer',
geometry: new Polygon([])
});
this.polygonSource = new VectorSource({ features: [] });
this.polygonLayer = new VectorLayer({
source: this.polygonSource,
style: {
'fill-color': 'rgba(255, 255, 255, 0.2)',
'stroke-color': '#ff0000',
'stroke-width': 2
},
properties: {
addToPrintedLayers: true,
altitudeMode: 'clampToGround'
}
});
this.map.addLayer(this.polygonLayer);
}
initializePointer() {
this.pointer = new Feature({
geometry: new Point([]),
style: this.iconStyle
});
this.pointerSource = new VectorSource({
features: [],
wrapX: false
});
this.pointerLayer = new VectorLayer({
source: this.pointerSource,
style: this.iconStyle,
properties: {
addToPrintedLayers: true,
altitudeMode: 'clampToGround'
}
});
this.map.addLayer(this.pointerLayer);
}
initializePointsLayer() {
this.points = [];
this.pointsSource = new VectorSource({
features: this.points,
wrapX: false
});
this.pointsLayer = new VectorLayer({
source: this.pointsSource,
style: this.pointStyleFunction,
properties: {
addToPrintedLayers: true,
altitudeMode: 'clampToGround'
}
});
this.map.addLayer(this.pointsLayer);
}
initializeInteractions() {
this.initializeDrawInteraction();
this.initializeModifyInteraction();
}
handleAddFeature(e) {
const geometry = e.feature?.getGeometry();
this.linestring.setGeometry(geometry);
this.crossSectionState.linestringCoordinates = geometry.getCoordinates();
}
initializeDrawInteraction() {
this.drawInteraction = new Draw({
source: this.linestringSource,
type: 'LineString',
freehand: false,
// noModifierKeys(e) is the default condition for drawing
// canExecute: If another tool is exclusively drawing, this interaction will be prevented from reacting
condition: (e) => noModifierKeys(e) && this.canExecute('map.draw')
});
this.drawInteraction.on('drawstart', (_e) => {
this.deleteProfile();
});
// Listen to drawing end event (note: the DRAWEND event is dispatched before inserting the feature in the source)
this.drawInteraction.on('drawend', (e) => {
this.handleAddFeature(e);
});
}
initializeModifyInteraction() {
this.modifyInteraction = new Modify({
source: this.linestringSource,
condition: (e) => primaryAction(e) && this.canExecute('map.modify')
});
this.modifyInteraction.on('modifystart', (_e) => {
this.polygonSource.clear();
this.domainLinestringSource.clear();
this.pointerSource.clear();
});
this.modifyInteraction.on('modifyend', (_e) => {
// The linestring coordinates are only updated when the modify interaction has ended, to
// avoid redrawing the buffer and domain linestring during modification
this.crossSectionState.linestringCoordinates = this.linestring.getGeometry().getCoordinates();
});
}
updateMarkers(polygon) {
if (!this.linestring) {
console.warn('updateMarkers: The cross-section linestring is undefined, unable to update markers');
return;
}
const linestringGeom = this.linestring.getGeometry();
this.points.forEach((el) => {
const coord = el.getGeometry()?.getCoordinates();
if (!coord) {
console.warn('updateMarkers: Map point feature coordinate is undefined, unable to update markers');
return;
}
// Check if the marker is inside the polygon (buffer around the linestring)
const inside = polygon.getGeometry()?.intersectsCoordinate(coord);
const target = this.crossSectionState.markers.find((x) => x.id == el.get('id'));
if (target) {
target.show = inside;
el.set('show', inside);
if (inside) {
// Get map coordinates of the closest point on the profile linestring
const closestPoint = linestringGeom.getClosestPoint(coord);
// Get linear coordinates of the closest point on the profile linestring and update marker scatterplot position in state manager
target.x = this.getDistanceAtCoord(linestringGeom, closestPoint);
}
}
});
}
drawLinestringBuffer() {
if (this.crossSectionState.linestringCoordinates.length < 2) {
return;
}
if (!this.linestring) {
console.warn('updateLinestringBuffer: Linestring is undefined, unable to update buffer');
return;
}
this.polygonSource.clear();
const geometry = this.linestring.getGeometry();
// @ts-expect-error: JSTS types not clean
const jstsGeom = this.parser.read(geometry);
const bufferParams = new BufferParameters(BufferParameters.DEFAULT_QUADRANT_SEGMENTS, BufferParameters.CAP_FLAT, BufferParameters.JOIN_MITRE, BufferParameters.DEFAULT_MITRE_LIMIT);
const bo = new BufferOp(jstsGeom, bufferParams);
const buffered = bo.getResultGeometry(this.crossSectionState.sectionWidthSettings.value);
const mypoly = this.parser.write(buffered);
this.polygon.setGeometry(mypoly);
this.polygonSource.addFeature(this.polygon);
this.updateMarkers(this.polygon);
}
updateLinestringCoordinates() {
this.pointerSource.clear();
this.domainLinestringSource.clear();
this.polygonSource.clear();
if (this.crossSectionState.linestringCoordinates.length >= 2) {
this.linestring.getGeometry().setCoordinates(this.crossSectionState.linestringCoordinates);
this.linestringLength = getDistance(this.linestring.getGeometry().getCoordinates());
this.drawDomainLinestring();
this.drawLinestringBuffer();
}
else {
this.linestringSource.clear();
}
}
drawDomainLinestring() {
if (this.crossSectionState.linestringCoordinates.length < 2) {
return;
}
const geometry = this.linestring.getGeometry();
if (!geometry) {
console.warn('drawDomainLinestring: Linestring geometry is undefined, unable to clip');
return;
}
if (geometry.getCoordinates().length < 2) {
return;
}
const linestringLength = getDistance(geometry.getCoordinates());
// Get map coordinates of profile domain extent
const fStart = Math.max(0.0, this.crossSectionState.domain.xmin / linestringLength);
const fEnd = Math.min(1.0, this.crossSectionState.domain.xmax / linestringLength);
if (fStart >= 0.0 && fStart <= 1.0 && fEnd >= 0.0 && fEnd <= 1.0) {
const coordStart = geometry.getCoordinateAt(fStart);
const coordEnd = geometry.getCoordinateAt(fEnd);
const lineStringCoords = geometry.getCoordinates();
const coords = [];
coords.push(coordStart);
for (const coord of lineStringCoords) {
const distance = this.getDistanceAtCoord(geometry, coord);
if (distance >= this.crossSectionState.domain.xmin && distance <= this.crossSectionState.domain.xmax) {
coords.push(coord);
}
}
coords.push(coordEnd);
this.domainLinestring.getGeometry().setCoordinates(coords);
if (this.domainLinestringSource.getFeatures().length === 0) {
this.domainLinestringSource.addFeature(this.domainLinestring);
}
// Zoom to extent
if (this.crossSectionState.syncViews) {
const view = this.map.getView();
view.setCenter(this.domainLinestring.getGeometry().getCoordinateAt(0.5));
}
}
}
// Get distance from start on linestring at given coordinate
getDistanceAtCoord(lineStringGeom, coord) {
const lineStringCoords = lineStringGeom.getCoordinates();
let distance = 0;
// Iterate over each segment of the linestring
for (let i = 0; i < lineStringCoords.length - 1; i++) {
const p1 = lineStringCoords[i];
const p2 = lineStringCoords[i + 1];
const segment = new LineString([p1, p2]);
const intersects = segment.intersectsCoordinate(coord);
if (intersects) {
distance += getDistance([p1, coord]);
break;
}
distance += getDistance([p1, p2]);
}
return distance;
}
shiftLinestring(shift = [0.0, 0.0]) {
this.crossSectionState.linestringCoordinates = this.crossSectionState.linestringCoordinates.map((x) => [x[0] + shift[0], x[1] + shift[1]]);
}
drawPointer(coords) {
const geometry = this.pointer.getGeometry();
if (!geometry) {
return;
}
geometry.setCoordinates(coords);
if (this.pointerSource.getFeatures().length === 0) {
this.pointerSource.addFeature(this.pointer);
}
}
drawMapMarkers() {
if (!this.linestring) {
console.warn('drawMapMarkers: Linestring is undefined, unable to draw markers on map');
return;
}
// Clear markers on the map
this.points = [];
this.crossSectionState.markers.forEach((el) => {
// Update markers in state manager
if (el.update) {
const coords = this.linestring.getGeometry().getCoordinateAt(el.x / this.linestringLength);
el.xm = coords[0];
el.ym = coords[1];
}
el.update = false;
// Update markers on map
const mapPoint = new Feature({
geometry: new Point([el.xm, el.ym]),
id: el.id,
label: el.label,
Z: el.y.toFixed(2),
size: 20,
show: el.show
});
mapPoint.setId(el.id);
this.points.push(mapPoint);
});
// Refresh points layer on map
this.pointsSource.clear();
this.pointsSource.addFeatures(this.points);
this.pointsLayer.setSource(this.pointsSource);
this.pointsLayer.changed();
}
addInteractions() {
this.map.addInteraction(this.drawInteraction);
this.map.addInteraction(this.modifyInteraction);
}
removeInteractions() {
this.map.removeInteraction(this.drawInteraction);
this.map.removeInteraction(this.modifyInteraction);
}
toggleMeasureDraw() {
this.crossSectionState.drawMeasurement = !this.crossSectionState.drawMeasurement;
}
toggleMarkerDraw() {
this.crossSectionState.drawMarker = !this.crossSectionState.drawMarker;
}
toggleLineDraw() {
this.crossSectionState.drawProfile = !this.crossSectionState.drawProfile;
}
setLineDrawingMode(val) {
this.crossSectionState.drawProfile = val;
if (val) {
this.addInteractions();
}
else {
this.removeInteractions();
}
super.render();
}
setSectionWidth(val) {
if (val <= 0 ||
val < this.crossSectionState.sectionWidthSettings.min ||
val > this.crossSectionState.sectionWidthSettings.max) {
val = this.crossSectionState.sectionWidthSettings.default;
console.warn(`setSectionWidth: Width is not within accepted range [${this.crossSectionState.sectionWidthSettings.min}, ${this.crossSectionState.sectionWidthSettings.max}]. Resetting to default value`);
}
this.crossSectionState.sectionWidthSettings.value = val;
}
setVerticalExaggeration(val) {
if (val <= 0 ||
val < this.crossSectionState.verticalExaggerationSettings.min ||
val > this.crossSectionState.verticalExaggerationSettings.max) {
val = this.crossSectionState.verticalExaggerationSettings.default;
console.warn(`setVerticalExaggeration: vertical exaggeration is not within accepted range [${this.crossSectionState.verticalExaggerationSettings.min}, ${this.crossSectionState.verticalExaggerationSettings.max}]. Resetting to default value`);
}
this.crossSectionState.verticalExaggerationSettings.value = val;
super.render();
}
setPointSize(val) {
if (val <= 0 ||
val < this.crossSectionState.pointSizeSettings.min ||
val > this.crossSectionState.pointSizeSettings.max) {
val = this.crossSectionState.pointSizeSettings.default;
console.warn(`setPointSize: point size is not within accepted range [${this.crossSectionState.pointSizeSettings.min}, ${this.crossSectionState.pointSizeSettings.max}]. Resetting to default value`);
}
this.crossSectionState.pointSizeSettings.value = val;
super.render();
}
setBackgroundColor(val) {
this.crossSectionState.backgroundColor = val;
}
setUniformColor(val) {
this.crossSectionState.colorUniform = val;
}
setColorPalette(val) {
this.crossSectionState.colorPalette = val;
}
setColorVariable(val) {
this.crossSectionState.colorVariable = val;
super.render();
}
exportFeature(features, filename, format) {
switch (format) {
case 'geojson': {
const geoJsonString = new GeoJSON().writeFeatures(features, {
featureProjection: this.state.projection
});
download(geoJsonString, filename + '.geojson', 'application/geo+json');
break;
}
case 'kml': {
const kmlString = new KML().writeFeatures(features, {
featureProjection: this.state.projection
});
download(kmlString, filename + '.kml', 'application/vnd.google-earth.kml+xml');
break;
}
case 'gpx': {
const gpxString = new GPX().writeFeatures(features, {
featureProjection: this.state.projection
});
download(gpxString, filename + '.gpx', 'application/gpx+xml');
break;
}
}
}
renderMeasurementsTable(table, records) {
table.tBodies[0].remove();
const tableBody = document.createElement('tbody');
table.appendChild(tableBody);
// Add rows
records.forEach((_d) => {
const from = this.crossSectionState.markers.find((x) => x.id === _d['from']);
const to = this.crossSectionState.markers.find((x) => x.id === _d['to']);
const newRow = tableBody.insertRow(-1);
newRow.id = `row-${_d.id}`;
// Add cell to the row
// FROM > TO
const cell1 = newRow.insertCell(-1);
cell1.classList.add('table-cell');
cell1.style.setProperty('text-align', 'center');
cell1.innerHTML = `${from.label} → ${to.label}`;
// DISTANCE
let cell = newRow.insertCell(-1);
cell.classList.add('table-cell');
cell.style.setProperty('text-align', 'right');
cell.innerHTML = `${_d['distance'].toFixed(2)}`;
// SLOPE
cell = newRow.insertCell(-1);
cell.classList.add('table-cell');
cell.style.setProperty('text-align', 'right');
cell.innerHTML = `${(100 * _d['slope']).toFixed(2)}%`;
// COPY BUTTON
const btn1 = document.createElement('img');
btn1.title = 'Copy to clipboard';
btn1.width = 20;
btn1.classList.add('action-btn');
btn1.src = 'icons/content_copy.svg';
btn1.onclick = (_e) => {
const str = `${_d['id']}, ${_d['from']}, ${_d['to']}, ${_d['distance']}, ${_d['slope']}`;
navigator.clipboard.writeText(str);
};
const cell4 = newRow.insertCell(-1);
cell4.classList.add('table-cell');
cell4.style.setProperty('text-align', 'center');
cell4.appendChild(btn1);
});
}
renderAnnotationsTable(table, records) {
table.tBodies[0].remove();
const tableBody = document.createElement('tbody');
table.appendChild(tableBody);
// Add rows
records.forEach((_d) => {
const newRow = tableBody.insertRow(-1);
newRow.id = `row-${_d.id}`;
// Add cells to the row
// MARKER ID
const cell1 = newRow.insertCell(-1);
cell1.classList.add('table-cell');
cell1.style.setProperty('text-align', 'center');
cell1.innerHTML = `${_d['label']}`;
// MARKER X
const cell2 = newRow.insertCell(-1);
cell2.classList.add('table-cell');
cell2.style.setProperty('text-align', 'right');
cell2.innerHTML = `${_d['xm'].toFixed(2)}<br>${_d['ym'].toFixed(2)}<br>${_d['y'].toFixed(2)}`;
// COPY BUTTON
const btn1 = document.createElement('img');
btn1.title = 'Copy to clipboard';
btn1.width = 20;
btn1.classList.add('action-btn');
btn1.src = 'icons/content_copy.svg';
btn1.onclick = (_e) => {
const str = `${_d['id']}, ${_d['xm']}, ${_d['ym']}, ${_d['y']}, ${_d['x']}`;
navigator.clipboard.writeText(str);
};
const cell4 = newRow.insertCell(-1);
cell4.classList.add('table-cell');
cell4.style.setProperty('text-align', 'center');
cell4.appendChild(btn1);
// FOCUS BUTTON
const btn2 = document.createElement('img');
btn2.title = 'Zoom to marker on map';
btn2.width = 20;
btn2.classList.add('action-btn');
btn2.src = 'icons/loupe.svg';
btn2.onclick = (_e) => {
this.zoomTo