@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
489 lines (488 loc) • 29.5 kB
JavaScript
import { html as uHtml } from 'uhtml';
import GirafeResizableElement from '../../../base/GirafeResizableElement.js';
import { Scatterplot } from '../scatterplot.js';
import { PytreeManager } from '../pytreemanager.js';
import { computeColors } from '../utils.js';
import { download } from '../../../tools/export/download.js';
class CrossSectionViewComponent extends GirafeResizableElement {
templateUrl = null;
styleUrls = null;
template = () => {
return uHtml `<style>
:host,#panel{background:var(--bkg-color);width:100%;height:100%;min-height:10rem;position:absolute;inset:0;overflow:hidden}#profile-panel{background-color:none;width:100%;height:100%;margin:auto;position:relative;overflow:hidden}#gutter{background:var(--bkg-color);cursor:row-resize;border:none;width:100%;height:6px;position:absolute;top:0;left:0}#glcanvas{position:absolute}#svg-outer{z-index:1;position:absolute}.svg-axis{user-select:none;font-family:inherit,sans-serif;font-size:12px}.ruler-text{text-anchor:middle}.point:hover{stroke:#00f;fill:#7fff00}#spinner{visibility:hidden;background-color:#f7f7f7;border-radius:50%}.spinner{z-index:99;width:30px;height:30px;-webkit-animation:2s linear infinite spin;-moz-animation:2s linear infinite spin;animation:2s linear infinite spin;position:absolute;top:15px;right:10px}@-moz-keyframes spin{to{-moz-transform:rotate(360deg)}}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg)}} spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
</style><style>
.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)} spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}} 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}button,input,select,textarea{font:inherit}.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-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.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-icon{justify-content:center;align-items:center;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:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.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}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
</style>
<style>${this.customStyle}</style>
<div id="panel"><div id="profile-panel"></div><div id="gutter"></div></div>
${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
};
crossSectionState;
eventsCallbacks = [];
darkFrontendMode = false;
visible = false;
scatterplot;
abortController;
uv;
rgb; // 1 byte * 3 values
intensity;
classification;
group;
currentRefreshId;
panel = null;
pytreeManager = null;
scatterplotInitialized = false;
constructor() {
super('cross-section-view');
}
async initPytreeManager() {
const baseURL = this.context.configManager.Config.lidar?.url.replace(/\/?$/, '/') ?? '';
this.pytreeManager = new PytreeManager(baseURL);
await this.pytreeManager.getConfig();
if (!this.pytreeManager.config.pointclouds) {
this.pytreeManager.config.pointclouds = [this.pytreeManager.config?.default_point_cloud];
}
const ds = [];
for (const [k, id] of this.pytreeManager.config.pointclouds.entries()) {
ds.push({
id: id,
group: k,
color: this.crossSectionState.qualitativeColors[k % this.crossSectionState.qualitativeColors.length],
active: id === this.pytreeManager.config?.default_point_cloud,
isloaded: false,
loading: false,
levelOfDetail: 0,
colorby: 'uniform',
numberOfLoadedPoints: 0,
subsets: []
});
}
this.crossSectionState.datasets = ds;
}
async refreshData(lineWidth, lineCoordinates, incremental = false) {
// Only abort if we were actually loading
if (this.crossSectionState.loading && this.abortController) {
this.abortOngoingRequest();
}
// Reset if not incremental
if (!incremental) {
this.scatterplot.clearGLPoints();
this.crossSectionState.numberOfPoints = 0;
this.uv = new Float32Array(this.crossSectionState.maxNumberOfPoints * 2);
this.rgb = new Uint8Array(this.crossSectionState.maxNumberOfPoints * 3);
this.intensity = new Uint16Array(this.crossSectionState.maxNumberOfPoints);
this.classification = new Uint8Array(this.crossSectionState.maxNumberOfPoints);
this.group = new Uint8Array(this.crossSectionState.maxNumberOfPoints);
for (const ds of this.crossSectionState.datasets) {
ds.numberOfLoadedPoints = 0;
ds.isloaded = false;
ds.loading = true;
ds.levelOfDetail = 0;
ds.subsets = [];
}
}
if (!this.pytreeManager) {
await this.initPytreeManager();
}
// Check argument validity
if (!this.validateRequestArgs(lineWidth, lineCoordinates)) {
return;
}
// Abort any previous fetch
this.abortController = new AbortController();
const signal = this.abortController.signal;
const coordinateString = lineCoordinates.map((c) => `{${c}}`).join();
const refreshId = Symbol('refreshId');
this.currentRefreshId = refreshId;
for (let LOD = this.crossSectionState.minLOD; LOD <= this.crossSectionState.maxLOD; LOD++) {
const keepGoing = await this.fetchOneLOD(LOD, lineWidth, coordinateString, signal, refreshId);
if (!keepGoing) {
break;
}
// If final LOD reached and not aborted, disable loading
if (LOD === this.crossSectionState.maxLOD) {
this.crossSectionState.loading = false;
}
}
}
// Fetch data for a single LOD across all datasets.
async fetchOneLOD(LOD, lineWidth, coordinateString, signal, refreshId) {
this.crossSectionState.loading = true;
for (const ds of this.crossSectionState.datasets) {
if (!ds.active || ds.isloaded) {
continue;
}
const response = await this.pytreeManager.getData(ds.id, LOD, LOD, lineWidth, coordinateString, signal);
// Abort if no response, cancelled, or a new refresh started
if (!response || signal.aborted || this.currentRefreshId !== refreshId) {
console.warn('Data fetch aborted');
return false;
}
const ptsRemaining = this.crossSectionState.maxNumberOfPoints - this.crossSectionState.numberOfPoints;
const ptsReturned = response.metadata.points;
// if no points returned, mark ds as loaded at max LOD and skip
if (ptsReturned === 0) {
if (LOD === this.crossSectionState.maxLOD) {
ds.isloaded = true;
ds.loading = false;
}
continue;
}
if (ptsReturned > 0 && ptsRemaining > 0) {
new Uint8Array(ptsReturned).fill(ds.group).forEach((g, i) => {
this.group[this.crossSectionState.numberOfPoints + i] = g;
});
const data = response.data;
if (data.POSITION_PROJECTED_PROFILE) {
this.uv.set(data.POSITION_PROJECTED_PROFILE.slice(0, ptsRemaining * 2), this.crossSectionState.numberOfPoints * 2);
}
if (data.RGB) {
this.rgb.set(data.RGB.slice(0, ptsRemaining * 3), this.crossSectionState.numberOfPoints * 3);
}
if (data.INTENSITY) {
this.intensity.set(data.INTENSITY.slice(0, ptsRemaining), this.crossSectionState.numberOfPoints);
}
if (data.CLASSIFICATION) {
this.classification.set(data.CLASSIFICATION.slice(0, ptsRemaining), this.crossSectionState.numberOfPoints);
}
ds.subsets.push({
lod: LOD,
offset: this.crossSectionState.numberOfPoints,
count: ptsReturned
});
this.crossSectionState.numberOfPoints = Math.min(this.crossSectionState.maxNumberOfPoints, this.crossSectionState.numberOfPoints + ptsReturned);
ds.numberOfLoadedPoints += ptsReturned;
// Push partial update to GL
this.updateScatterplot(refreshId);
}
ds.levelOfDetail = LOD;
// If maximum number of points to display is reached, stop loading
if (this.crossSectionState.numberOfPoints >= this.crossSectionState.maxNumberOfPoints) {
for (const other of this.crossSectionState.datasets) {
if (other.active) {
other.isloaded = true;
other.loading = false;
}
}
this.crossSectionState.loading = false;
return false;
}
}
return true;
}
// Rebuild the element‑index buffer and patch‑uploads any changed colour slices, then issues one GL draw call
redrawChangedDatasets() {
if (!this.scatterplot) {
return;
}
// Rebuild index buffer (to draw only selected datasets)
const idx = this.buildIndexList(this.crossSectionState.datasets);
this.scatterplot.updateIndex(idx);
// Recompute & patch‑upload colours for every active dataset
for (const ds of this.crossSectionState.datasets) {
if (!ds.active) {
continue;
}
for (const subset of ds.subsets) {
const slice = this.changeColormap(ds.colorby, ds.color, subset.offset, subset.count, this.crossSectionState.colorPalette);
this.scatterplot.updateColorsSlice(slice, subset.offset);
}
}
this.scatterplot.updateTransform();
}
validateRequestArgs(lineWidth, lineCoordinates) {
if (lineWidth <= 0.0) {
console.warn('lineWidth must be larger than 0');
return false;
}
if (lineCoordinates.length < 2) {
console.warn('At least two line coordinates are required');
return false;
}
return true;
}
abortOngoingRequest() {
if (this.crossSectionState.loading) {
this.abortController.abort('New linestring requested before previous data finished loading');
this.scatterplot.clearGLPoints();
this.crossSectionState.loading = false;
}
this.abortController = new AbortController();
}
buildIndexList(datasets) {
const indices = [];
for (const dataset of datasets) {
if (!dataset.active) {
continue;
}
for (const subset of dataset.subsets) {
const start = subset.offset;
const end = start + subset.count;
for (let i = start; i < end; i++) {
indices.push(i);
}
}
}
return new Uint32Array(indices);
}
updateScatterplot(refreshId) {
if (!this.scatterplot || this.currentRefreshId !== refreshId) {
return;
}
const idx = this.buildIndexList(this.crossSectionState.datasets);
const points = this.uv.subarray(0, this.crossSectionState.numberOfPoints * 2);
const colors = new Uint8Array(this.crossSectionState.numberOfPoints * 3);
for (const ds of this.crossSectionState.datasets) {
if (!ds.active)
continue;
for (const s of ds.subsets) {
const slice = this.changeColormap(ds.colorby, ds.color, s.offset, s.count, this.crossSectionState.colorPalette);
colors.set(slice, s.offset * 3);
}
}
this.scatterplot.updatePoints(points);
this.scatterplot.updateColors(colors);
// Initial GL set‑up happens only once
if (!this.scatterplotInitialized) {
this.scatterplot.initializeGL();
this.scatterplotInitialized = true;
}
this.scatterplot.updateIndex(idx);
this.scatterplot.updateTransform();
// Draw the SVG overlays
this.scatterplot.updatePlot();
}
changeColormap(variable, color, offset, numberOfPoints, colormap = 'spectral') {
let colors;
const offsetStart = offset;
const offsetEnd = offset + numberOfPoints;
switch (variable) {
case 'intensity':
colors = computeColors(this.intensity.slice(offsetStart, offsetEnd), colormap, [15000, 65000]);
break;
case 'natural':
colors = this.rgb.slice(offsetStart * 3, (offsetStart + numberOfPoints) * 3);
break;
case 'classification':
colors = this.pytreeManager.getClassificationColor(this.classification.slice(offsetStart, offsetEnd), this.pytreeManager.config.classification_colors);
break;
case 'uniform':
colors = computeColors(this.classification.slice(offsetStart, offsetEnd), color, []);
break;
}
return colors;
}
printCanvas() {
this.scatterplot?.updateTransform();
const canvas = this.scatterplot?.canvas.node();
if (canvas) {
const scaleFactor = 1.0;
const printWidth = scaleFactor * canvas.width;
const printHeight = scaleFactor * canvas.height;
// Get SVG elements
const svg = this.scatterplot?.containerSVG.node().cloneNode(true);
// Adjust SVG dimensions for print
svg.setAttribute('width', printWidth.toString());
svg.setAttribute('height', printHeight.toString());
// Serialise SVG
const svgString = new XMLSerializer().serializeToString(svg);
const printString = `<svg width="${printWidth}" height="${printHeight}" xmlns="http://www.w3.org/2000/svg"><image href="${canvas.toDataURL('image/png')}" x="0" y="0" width="${printWidth}" height="${printHeight}" />${svgString}</svg>`;
download(printString, 'profile.svg', 'image/svg+xml;charset=utf-8');
}
}
render() {
if (this.visible) {
this.renderComponent();
}
else {
this.abortOngoingRequest();
this.unregisterEvents();
this.renderEmpty();
}
}
renderComponent() {
super.render();
super.girafeTranslate();
this.panel = this.shadowRoot.getElementById('profile-panel');
this.scatterplot = new Scatterplot(this.panel, this.crossSectionState.margins, new Float32Array(0), new Uint8Array(0));
this.scatterplot.setZoom(this.crossSectionState.zoom);
this.registerEvents();
}
registerEvents() {
this.eventsCallbacks.push(this.subscribe('interface.darkFrontendMode', (_oldValue, _newValue) => {
this.darkFrontendMode = _newValue;
}), this.subscribe('extendedState.crossSection.verticalExaggerationSettings.value', (_oldVal, _newVal) => {
this.scatterplot?.updateVerticalExaggeration(_newVal);
}), this.subscribe('extendedState.crossSection.pointSizeSettings.value', (_oldVal, _newVal, _parent) => {
this.scatterplot?.updatePointSize(_newVal);
}), this.subscribe('extendedState.crossSection.backgroundColor', (_oldVal, _newVal, _parent) => {
this.scatterplot?.setBackgroundColor(_newVal);
}), this.subscribe('extendedState.crossSection.gridVisible', (_oldVal, _newVal, _parent) => {
this.scatterplot?.setGridVisibility(_newVal);
}), this.subscribe('extendedState.crossSection.colorPalette', (_oldVal, _newVal, _parent) => {
// Recolor data slices in‑place
if (this.crossSectionState.numberOfPoints > 0) {
this.redrawChangedDatasets();
}
}), this.subscribe('extendedState.crossSection.zoom', (_oldVal, _newVal, _parent) => {
if (this.crossSectionState.zoomUpdate) {
this.scatterplot?.setZoom(_newVal);
}
}), this.subscribe('extendedState.crossSection.sectionWidthSettings.value', (_oldVal, _newVal) => {
if (_newVal > 0 && this.crossSectionState.linestringCoordinates.length >= 2) {
this.refreshData(_newVal, this.crossSectionState.linestringCoordinates);
}
}), this.subscribe('extendedState.crossSection.linestringCoordinates', (_oldVal, _newVal, _parent) => {
this.scatterplot?.deleteAllMeasurements();
if (_newVal.length === 0) {
this.abortController.abort('Cross-section-viewer: current data fetch was aborted by new request');
this.scatterplot.resetPlot();
this.scatterplotInitialized = false;
return;
}
if (this.crossSectionState.sectionWidthSettings.value > 0 &&
this.crossSectionState.linestringCoordinates.length >= 2) {
this.refreshData(this.crossSectionState.sectionWidthSettings.value, this.crossSectionState.linestringCoordinates);
}
}),
// Measurement mode
this.subscribe('extendedState.crossSection.drawMeasurement', (_oldVal, _newVal, _parent) => {
if (_newVal) {
// Disable annotation mode to avoid conflict with measurement mode
this.crossSectionState.drawMarker = false;
}
this.scatterplot?.toggleMeasurement(_newVal);
}),
// Annotation (marker drawing) mode
this.subscribe('extendedState.crossSection.drawMarker', (_oldVal, _newVal, _parent) => {
if (_newVal) {
// Disable measurement mode to avoid conflict with annotation mode
this.crossSectionState.drawMeasurement = false;
}
this.scatterplot?.toggleAnnotation(_newVal);
}),
// Markers array
this.subscribe('extendedState.crossSection.markers', (_oldVal, _newVal, _parent) => {
this.scatterplot.markers = _newVal;
this.scatterplot?.updateMarkers();
this.scatterplot?.updateMeasurements();
this.scatterplot?.updateLabels();
}),
// Dataset visibility
this.subscribe(/extendedState\.crossSection\.datasets\..*\.active/, (_oldActive, newActive, _parent) => {
if (newActive) {
const ds = this.crossSectionState.datasets.find((ds) => ds.active && !ds.isloaded);
if (ds) {
this.refreshData(this.crossSectionState.sectionWidthSettings.value, this.crossSectionState.linestringCoordinates, true);
return;
}
}
this.redrawChangedDatasets();
}),
// Dataset color by
this.subscribe(/extendedState\.crossSection\.datasets\..*\.(colorby|color)/, (_oldColorBy, _newColorBy) => {
// Recolor data slices in‑place
this.redrawChangedDatasets();
}));
// Delete all annotations (markers)
document.addEventListener('delete-markers', () => {
this.scatterplot?.deleteAllMarkers();
});
// Listen to 'delete-measurements' event emitted by the cross-section settings component (CrossSectionSettingsComponent). Delete all measurements when event fires.
document.addEventListener('delete-measurements', () => {
this.scatterplot?.deleteAllMeasurements();
});
// Listen to 'print-canvas' event emitted by the cross-section settings component (CrossSectionSettingsComponent). Print profile canvas when event fires.
document.addEventListener('print-canvas', () => {
this.printCanvas();
});
// Listen to 'cursormove' event emitted by the scatterplot. Update cursordomain coordinates in the state manager when event fires.
this.panel?.addEventListener('cursormove', ((e) => {
this.crossSectionState.cursorDomainCoordinates = e.detail.domainCoords;
}));
// Changed profile domain (X-Y extent)
this.panel?.addEventListener('changedomain', ((e) => {
console.debug('Cross-section viewer: changedomain event fired');
this.crossSectionState.domain = {
xmin: e.detail.xDomain[0],
xmax: e.detail.xDomain[1],
ymin: e.detail.yDomain[0],
ymax: e.detail.yDomain[1]
};
this.crossSectionState.zoomUpdate = false;
this.crossSectionState.zoom = {
k: this.scatterplot.zoomTransform.k,
tx: this.scatterplot.zoomTransform.x,
ty: this.scatterplot.zoomTransform.y
};
}));
// Listen to changes in Markers array
this.panel?.addEventListener('changemarkers', ((e) => {
console.debug('Cross-section viewer: changemarkers event fired');
const newMarkers = e.detail.markers;
const current = this.crossSectionState.markers;
const newIdSet = new Set(newMarkers.map((m) => m.id));
// Update/add markers
for (const nm of newMarkers) {
const existing = current.find((cm) => cm.id === nm.id);
if (existing) {
Object.assign(existing, nm);
}
else {
current.push(nm);
}
}
// Remove deleted markers
for (let i = current.length - 1; i >= 0; i--) {
if (!newIdSet.has(current[i].id)) {
current.splice(i, 1);
}
}
}));
// Listen to 'changemeasurements' event emitted by the scatterplot. Update measurements array in the state manager when event fires.
this.panel?.addEventListener('changemeasurements', ((e) => {
console.debug('Cross-section viewer: changemeasurements event fired');
this.crossSectionState.measurements = e.detail.measurements;
}));
}
unregisterEvents() {
this.unsubscribe(this.eventsCallbacks);
this.eventsCallbacks.length = 0;
}
registerVisibilityEvents() {
this.subscribe('interface.crossSectionPanelVisible', (_oldValue, _newValue) => {
this.togglePanel(_newValue);
});
}
closePanel() {
this.togglePanel(false);
}
togglePanel(visible) {
this.visible = visible;
this.render();
}
connectedCallback() {
super.connectedCallback();
this.crossSectionState = this.state.extendedState.crossSection;
this.abortController = new AbortController();
// Initialize point data attributes
this.uv = new Float32Array(this.crossSectionState.maxNumberOfPoints * 2); // 4 bytes * 2 values
this.rgb = new Uint8Array(this.crossSectionState.maxNumberOfPoints * 3); // 1 byte * 3 values
this.intensity = new Uint16Array(this.crossSectionState.maxNumberOfPoints); // 2 bytes * 1 value
this.classification = new Uint8Array(this.crossSectionState.maxNumberOfPoints); // 1 bytes * 1 value
this.group = new Uint8Array(this.crossSectionState.maxNumberOfPoints); // 1 bytes * 1 value
// Load pytree manager
if (this.context.configManager.Config.lidar) {
this.render();
this.registerVisibilityEvents();
this.initPytreeManager()
.then(() => this.render())
.catch((err) => console.error('PytreeManager loading failed:', err));
}
else {
// No Lidar configuration
this.renderEmpty();
}
}
}
export default CrossSectionViewComponent;