Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GSLUX-686: Profil component #3198

Merged
merged 3 commits into from
Nov 28, 2024
Merged

GSLUX-686: Profil component #3198

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
471ffa0
feat: profile component from v4
AlitaBernachot Nov 18, 2024
bb85c9c
fix: prevent display geomarker when selected feat is not LineString
AlitaBernachot Nov 28, 2024
85cc5f8
chore(package.json): update v4 lib GSLUX-686
AlitaBernachot Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions geoportal/geoportailv3_geoportal/static-ngeo/js/apps/MainController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ import useLuxLib, {
watch,
AlertNotifications,
AuthForm,
ProfileDraw,
ProfileMeasures,
LayerPanel,
LegendsPanel,
MapContainer,
Expand Down Expand Up @@ -132,6 +134,8 @@ const AlertNotificationsElement = createElementInstance(AlertNotifications, app)
customElements.define('alert-notifications', AlertNotificationsElement)

customElements.define('auth-form', createElementInstance(AuthForm, app))
customElements.define('profile-draw', createElementInstance(ProfileDraw, app))
customElements.define('profile-measures', createElementInstance(ProfileMeasures, app))

import i18next from 'i18next';

Expand Down
7 changes: 7 additions & 0 deletions geoportal/geoportailv3_geoportal/static-ngeo/js/draw/DrawController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ import olInteractionSelect from 'ol/interaction/Select.js';
import {noModifierKeys, singleClick} from 'ol/events/condition.js';
import {getDistance as haversineDistance, getArea} from 'ol/sphere.js';

import { useDrawStore, storeToRefs } from "luxembourg-geoportail/bundle/lux.dist.js";

/**
* @param {!angular.Scope} $scope Scope.
* @param {app.draw.FeaturePopup} appFeaturePopup Feature popup service.
Expand Down Expand Up @@ -543,6 +545,11 @@ exports.prototype.onChangeActive_ = function(event) {
} else {
this.showMapMatchingButton = false;
}

// v4
const { editStateActive } = storeToRefs(useDrawStore())

editStateActive.value = active ? "editX" : undefined
};


Expand Down
21 changes: 21 additions & 0 deletions geoportal/geoportailv3_geoportal/static-ngeo/js/draw/FeaturePopupController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import olGeomLineString from 'ol/geom/LineString.js';
import olGeomGeometryType from 'ol/geom/GeometryType.js';
import {getDistance as haversineDistance} from 'ol/sphere.js';

import { useProfileDrawv3Store, useDrawStore, storeToRefs } from "luxembourg-geoportail/bundle/lux.dist.js";

/**
* @constructor
* @param {angular.Scope} $scope Scope.
Expand Down Expand Up @@ -295,13 +297,22 @@ const exports = function($scope, $sce, appFeaturePopup,
}
}.bind(this));

// v4 set editStateActive to hide geomarker when hovering on feature
this.unwatch6_ = $scope.$watch(function() {
return this.feature ? this.feature.get('__editable__') : false;
}.bind(this), function(newVal, oldVal) {
const { editStateActive } = storeToRefs(useDrawStore())
editStateActive.value = newVal === 1 ? 'editLine' : undefined
}.bind(this));

$scope.$on('$destroy', function() {
unlistenByKey(this.event_);
this.unwatch1_();
this.unwatch2_();
this.unwatch3_();
this.unwatch4_();
this.unwatch5_();
this.unwatch6_();
}.bind(this));

};
Expand Down Expand Up @@ -592,6 +603,12 @@ exports.prototype.updateElevation = function() {
* @export
*/
exports.prototype.updateProfile = function() {

// v4 Force reset feature
const profileStore = useProfileDrawv3Store()
const { feature_v3 } = storeToRefs(profileStore);
feature_v3.value = undefined;

if (this.feature !== undefined &&
this.feature.getGeometry().getType() === olGeomGeometryType.LINE_STRING &&
!this.ngeoOfflineMode_.isEnabled()) {
Expand All @@ -600,6 +617,10 @@ exports.prototype.updateProfile = function() {
console.assert(geom !== null && geom !== undefined);
this.appFeaturePopup_.getProfile(/** @type {!ol.geom.LineString} */ (geom)).then(function(profile) {
this.featureProfile = profile;

// v4 Update profile data for v4 component
profileStore.setProfileData(this.map, this.feature, profile);

}.bind(this));
} else {
this.featureProfile = undefined;
Expand Down
10 changes: 8 additions & 2 deletions geoportal/geoportailv3_geoportal/static-ngeo/js/draw/featurepopup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,14 @@
</div>
<span ng-show="ctrl.featureElevation" translate>Elevation: {{ ctrl.featureElevation }}</span>
<div class="feature-popup-profile" ng-show="ctrl.showFeatureProfile.active">
<app-profile app-profile-data="ctrl.featureProfile" app-profile-map="::ctrl.map" app-profile-interaction="ctrl.showFeatureProfile"
app-profile-show-tooltip="!ctrl.isEditable()" app-profile-is-loading-msg="true">

<!-- v4 Elevation Profile component -->
<div style="width: 256px; height: auto;">
<profile-draw />
</div>

<!-- <app-profile app-profile-data="ctrl.featureProfile" app-profile-map="::ctrl.map" app-profile-interaction="ctrl.showFeatureProfile"
app-profile-show-tooltip="!ctrl.isEditable()" app-profile-is-loading-msg="true"> -->
</div>
</div>

Expand Down
20 changes: 20 additions & 0 deletions geoportal/geoportailv3_geoportal/static-ngeo/js/measure/MeasureController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import olLayerVector from 'ol/layer/Vector.js';
import olSourceVector from 'ol/source/Vector.js';
import { fromCircle } from 'ol/geom/Polygon';

import { useProfileMeasuresv3Store, storeToRefs, watch } from "luxembourg-geoportail/bundle/lux.dist.js";

/**
* @param {!angular.Scope} $scope Scope.
Expand Down Expand Up @@ -323,15 +324,24 @@ const exports = function($scope, $q, $http, $compile, gettext,
}.bind(this));
}.bind(this));

const profileStore = useProfileMeasuresv3Store()

listen(measureProfile, 'measureend',
function(evt) {
// v4 Force reset feature
const { feature_v3 } = storeToRefs(profileStore);
feature_v3.value = undefined;

this['persistedFeature'] = evt.detail.feature
this['persistedFeature'].set('text',
clearText(this['measureProfile'].getTooltipElement().innerHTML))
var geom = /** @type {ol.geom.LineString} */
(evt.detail.feature.getGeometry());
this.getProfile_(geom).then(
function(resp) {
// v4 Update profile data for v4 component
profileStore.setProfileData(this.map_, evt.detail.feature, resp)

this['profileData'] = resp;
}.bind(this));
}, this);
Expand Down Expand Up @@ -396,6 +406,16 @@ exports.prototype.$onInit = function() {
this.map_.addInteraction(this['measureLength']);
this.map_.addInteraction(this['measureArea']);
this.map_.addInteraction(this['measureAzimut']);

// v4 Listen to fake close event from v4 profile component
const profileStore = useProfileMeasuresv3Store()
const { closeEvent_v3 } = storeToRefs(profileStore)

watch(closeEvent_v3, (newVal, oldVal) => {
if (newVal !== oldVal) {
this['measureProfile'].setActive(false);
}
})

};

Expand Down
12 changes: 10 additions & 2 deletions geoportal/geoportailv3_geoportal/static-ngeo/js/measure/measure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,20 @@
<li ng-class="{active: ctrl.measureProfile.active}">
<a href translate ngeo-btn
ng-model="ctrl.measureProfile.active" ng-show="!ctrl.measureProfile.active">Profile</a>
<app-profile app-profile-data="ctrl.profileData" app-profile-interaction="ctrl.measureProfile" app-profile-map="::ctrl.map"></app-profile>

<!-- v4 Elevation Profile component -->
<div ng-show="ctrl.measureProfile.active" style="display: inline;">
<div style="width: 450px; height: auto;">
<profile-measures />
</div>
</div>

<!-- <app-profile app-profile-data="ctrl.profileData" app-profile-interaction="ctrl.measureProfile" app-profile-map="::ctrl.map"></app-profile> -->
</li>
<li ngeo-btn ng-model="ctrl.profileLidarOpen" ng-show="!ctrl.measureProfile.active">
<a href translate>Profil Lidar</a>
</li>
<li ng-show="!ctrl.measureProfile.active">
<a href translate ng-click="ctrl.removeFeatures()">Reset</a>
</li>
</ul>
</ul>
100 changes: 53 additions & 47 deletions geoportal/geoportailv3_geoportal/static-ngeo/js/profile/ProfileController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,8 @@ const exports = function($scope, ngeoFeatureOverlayMgr, echocsvUrl,
* @type {ol.Feature}
* @private
*/
this.snappedPoint_ = new olFeature();
this.featureOverlay_.addFeature(this.snappedPoint_);
// this.snappedPoint_ = new olFeature();
// this.featureOverlay_.addFeature(this.snappedPoint_);

/**
* @param {Object} point The point.
Expand Down Expand Up @@ -204,8 +204,8 @@ const exports = function($scope, ngeoFeatureOverlayMgr, echocsvUrl,
this['profileOptions'] = {
linesConfiguration: linesConfiguration,
distanceExtractor: dist,
hoverCallback: hoverCallback,
outCallback: outCallback,
// hoverCallback: hoverCallback,
// outCallback: outCallback,
formatter: {
xhover: this.formatDistance_,
yhover: this.formatElevation_
Expand All @@ -215,52 +215,58 @@ const exports = function($scope, ngeoFeatureOverlayMgr, echocsvUrl,

this['point'] = null;

this.unwatchProfileData = $scope.$watch(function() {
return this['profileData'];
}.bind(this), function(newVal, oldVal) {
if (newVal !== undefined) {
var i;
var len = newVal.length;
var lineString = new olGeomLineString([], olGeomGeometryLayout.XYM);
for (i = 0; i < len; i++) {
var p = newVal[i];
p = new olGeomPoint([p['x'], p['y']]);
p.transform('EPSG:2169', this.map_.getView().getProjection());
lineString.appendCoordinate(
p.getCoordinates().concat(newVal[i]['dist']));
}
this.line_ = lineString;
this.elevationGain = this.formatElevationGain_(newVal[len - 1]['elevationGain'], 'm');
this.elevationLoss = this.formatElevationGain_(-1 * newVal[len - 1]['elevationLoss'], 'm');
this.cumulativeElevation = this.formatElevationGain_(newVal[len - 1]['cumulativeElevation'], 'm');
} else {
this.line_ = null;
}
}.bind(this));

this.scope_.$on('$destroy', function() {
unlistenByKey(this.event_);
this.unwatchProfileData();
}.bind(this));
// Deactivate following code because this is now handled by v4

// this.unwatchProfileData = $scope.$watch(function() {
// return this['profileData'];
// }.bind(this), function(newVal, oldVal) {
// if (newVal !== undefined) {
// var i;
// var len = newVal.length;
// var lineString = new olGeomLineString([], olGeomGeometryLayout.XYM);
// for (i = 0; i < len; i++) {
// var p = newVal[i];
// p = new olGeomPoint([p['x'], p['y']]);
// p.transform('EPSG:2169', this.map_.getView().getProjection());
// lineString.appendCoordinate(
// p.getCoordinates().concat(newVal[i]['dist']));
// }
// this.line_ = lineString;
// this.elevationGain = this.formatElevationGain_(newVal[len - 1]['elevationGain'], 'm');
// this.elevationLoss = this.formatElevationGain_(-1 * newVal[len - 1]['elevationLoss'], 'm');
// this.cumulativeElevation = this.formatElevationGain_(newVal[len - 1]['cumulativeElevation'], 'm');
// } else {
// this.line_ = null;
// }
// }.bind(this));

// Deactivate following code because this is now handled by v4
// this.scope_.$on('$destroy', function() {
// unlistenByKey(this.event_);

// // this.unwatchProfileData();
// }.bind(this));
};


exports.prototype.$onInit = function() {
this.map_ = this['map'];
if (this.map_) {
this.event_ = listen(this.map_, 'pointermove',
/**
* @param {ol.MapBrowserPointerEvent} evt Map browser event.
*/
function(evt) {
if (evt.dragging || this.line_ === null) {
return;
}
var coordinate = this.map_.getEventCoordinate(evt.originalEvent);
this.snapToGeometry_(coordinate, this.line_);
}, this);
}
}
// Deactivate following code because this is now handled by v4

// exports.prototype.$onInit = function() {
// this.map_ = this['map'];
// if (this.map_) {
// this.event_ = listen(this.map_, 'pointermove',
// /**
// * @param {ol.MapBrowserPointerEvent} evt Map browser event.
// */
// function(evt) {
// if (evt.dragging || this.line_ === null) {
// return;
// }
// var coordinate = this.map_.getEventCoordinate(evt.originalEvent);
// this.snapToGeometry_(coordinate, this.line_);
// }, this);
// }
// }

/**
* Creates a new measure tooltip
Expand Down
16 changes: 9 additions & 7 deletions geoportal/geoportailv3_geoportal/static-ngeo/ngeo/examples/elevationProfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,13 +122,15 @@ exports.MainController = function($http, $scope) {
});


map.on('pointermove', (evt) => {
if (evt.dragging) {
return;
}
const coordinate = map.getEventCoordinate(evt.originalEvent);
this.snapToGeometry(coordinate, source.getFeatures()[0].getGeometry());
});
// Deactivate following code because this is now handled by v4

// map.on('pointermove', (evt) => {
// if (evt.dragging) {
// return;
// }
// const coordinate = map.getEventCoordinate(evt.originalEvent);
// this.snapToGeometry(coordinate, source.getFeatures()[0].getGeometry());
// });


/**
Expand Down