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

Show other markers on the map in the edit mode #581

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Show other markers on the map in the edit mode #581

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a245233
Show other markers on the map in the edit mode
circus2271 Mar 2, 2023
295609a
temp
circus2271 Jun 10, 2023
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
24 changes: 22 additions & 2 deletions public/js/module/map/map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -626,10 +626,30 @@ define([

// Обработчик переключения режима редактирования
editHandler: function (edit) {
const self = this;

if (edit) {
this.pointHighlightDestroy().pointEditCreate().markerManager.disable();
let highlightedPhotoLayer;

this.markerManager.layerPhotos.eachLayer(function (marker) {
Copy link
Member

@kabalin kabalin Mar 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would suggest instead of looping over markers and disabling event, use this.editing flag (in map controller) in the popupPhotoOver and clickMarker event processing functions in the marker.js (in those functions do not do anything if editing mode is on).

if (_.isEqual(self.point.geo(), marker.options.data.obj.geo)) {
highlightedPhotoLayer = marker;
}

marker
.off('click')
.off('mouseover');
});

if (highlightedPhotoLayer) {
this.markerManager.layerPhotos.removeLayer(highlightedPhotoLayer);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not quite work, if you move editing pin out of screen by dragging the map and then drag it back, the point will be re-added, also this is not ideal to loop over all points every time we editing to find the right point (as pointed earlier). I suggest to refactor this in a way that cid would be used to identify the point. To do this:

  1. Keep cid of editing point in map controller object.
  2. When editing mode is on, identify current point using photos[cid].marker (markers module) and remove it from layer group (this.markerManager.layerPhotos.removeLayer).
  3. When new markers are added as result of panning/zooming map and editing is on, check if newly added point is matching editing cid, if so, do not add it to the layer group.
  4. When editing mode is off, add a new point marker only to the layer group, no need to refresh all.

Copy link
Contributor Author

@circus2271 circus2271 Mar 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, I'll see

thanks for your feedback

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(пока что отдыхаю)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @circus2271, are you planning to complete this at any time soon? If not I can take it over and finish (if you don't mind).

Copy link
Contributor Author

@circus2271 circus2271 Sep 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I don't mind at all
That would be great, thanks

(I was too lazy to complete it)

}

this.pointHighlightDestroy().pointEditCreate();
} else {
this.pointEditDestroy().pointHighlightCreate().markerManager.enable();
this.markerManager.disable();
this.pointEditDestroy().pointHighlightCreate();
this.markerManager.enable();
}
},
// Включает режим редактирования
Expand Down
20 changes: 20 additions & 0 deletions public/style/map/map.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -892,6 +892,26 @@
}

.mapContainer.embedded {
&.editing {
.clusterIcon {
display: none !important;
}

.clusterIconLocal,
.photoIcon {
opacity: 0.4;
cursor: grab;
}

.photoIcon:hover {
width: 8px !important;
height: 8px !important;
margin-left: -4px !important;
margin-top: -4px !important;
.box-shadow(0 0 1px 1px #fff);
}
}

.mapNavigation {
top: -33px;
left: -13px;
Expand Down
2 changes: 1 addition & 1 deletion views/module/map/map.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.mapModuleWrapper(data-bind="with: repository[M!M]")
.mapContainer(data-bind="css: {embedded: embedded}")
.mapContainer(data-bind="css: {embedded: embedded, editing: editing}")
.map

//ko if: embedded
Expand Down