mappe/last_version/assets/component/leaflet/leaflet.markercluster.editablemarker.js

(function (window, document, undefined) {
  var editMarkerToolbarAction = L.Toolbar2.Action.extend({
    initialize: function (map, marker, options) {
      this._map = map;
      this._marker = marker;

      options = options || {
        toolbarIcon: {
          tooltip: 'Edit'
        }
      };

      if (this._marker.options.toolbarEditIconClass) {
        options.toolbarIcon.className = this._marker.options.toolbarEditIconClass
      } else {
        options.toolbarIcon.html = 'Edit';
      }

      L.Util.setOptions(this, options);

      L.Toolbar2.Action.prototype.initialize.call(this, map, options);
    },

    addHooks: function () {
      var that = this;

      that._marker._popupToolbar._onMarkerDrag = function (e) {
        that._marker._popupToolbar.setLatLng(that._marker.getLatLng());
        if (that._marker.label) {
          that._marker.updateLabelContent(that._marker.options.getLabelContent());
        }
        that._marker._dragged = true;
      };
      that._marker._popupToolbar._onMarkerDragEnd = function (e) {
        if (that._marker._popupToolbar._bringToFront) {
          that._marker._popupToolbar._bringToFront();
        }
      };

      if (!that._marker._enableEditMode) {
        that._marker._enableEditMode = function () {
          that._marker._editModeEnabled = true;

          that._marker.options.clusterGroup.removeLayer(that._marker);
          that._map.addLayer(that._marker);

          if (that._marker.options.editModeIcon) {
            that._marker.setIcon(that._marker.options.editModeIcon);
          }

          if (that._marker._popupToolbar._bringToFront) {
            that._marker._popupToolbar._bringToFront();
          }

          that._marker.options.draggable = true;
          that._marker.dragging.enable();

          if (that._marker.options.showLabelOnEdit && !that._marker.label) {
            that._marker.bindLabel(that._marker.options.getLabelContent(), {
              noHide: true,
              direction: 'auto',
              pane: that._map.getPanes.popupPane
            });
          }
          if (that._marker.label) {
            that._marker.showLabel();
          }

          that._marker.on('drag', that._marker._popupToolbar._onMarkerDrag);

          that._marker.on('dragend', that._marker._popupToolbar._onMarkerDragEnd);
        };
      }

      if (!that._marker._disableEditMode) {
        that._marker._disableEditMode = function () {
          that._marker._editModeEnabled = false;

          if (that._marker.options.normalModeIcon) {
            that._marker.setIcon(that._marker.options.normalModeIcon);
          } else {
            that._marker.setIcon(new L.Icon.Default);
          }

          that._marker.options.draggable = false;
          that._marker.dragging.disable();

          that._marker.off('drag', that._marker._popupToolbar._onMarkerDrag);
          that._marker.off('dragend', that._marker._popupToolbar._onMarkerDragEnd);

          that._map.removeLayer(that._marker);
          that._marker.options.clusterGroup.addLayer(that._marker);

          if (that._marker.label) {
            that._marker.hideLabel();
            that._marker.unbindLabel();
          }

          if (that._marker._popupToolbar._bringToFront) {
            that._marker._popupToolbar._bringToFront();
          }

          var visibleOne = that._marker.options.clusterGroup.getVisibleParent(that._marker);
          if (visibleOne && that._marker && !visibleOne.getLatLng().equals(that._marker.getLatLng()) && that._marker._popupToolbar) {
            that._marker._popupToolbar._removeToolbar();
          }

          if (that._marker.options.hideToolbarAfterEdit && that._marker._popupToolbar && that._marker._popupToolbar._removeToolbar) {
            that._marker._popupToolbar._removeToolbar();
          }
        };
      }

      if (that._marker._editModeEnabled) {
        that._marker._disableEditMode();

        if (that._marker._dragged) {
          that._marker._dragged = undefined;
          that._marker.fire('marker:edited');
        }
      } else {
        that._marker._enableEditMode();
      }
    }
  });

  var deleteMarkerToolbarAction = L.Toolbar2.Action.extend({
    initialize: function (map, marker, options) {
      this._map = map;
      this._marker = marker;

      options = options || {
        toolbarIcon: {
          tooltip: 'Delete'
        }
      };

      if (this._marker.options.toolbarDeleteIconClass) {
        options.toolbarIcon.className = this._marker.options.toolbarDeleteIconClass
      } else {
        options.toolbarIcon.html = 'Delete';
      }

      L.Util.setOptions(this, options);

      L.Toolbar2.Action.prototype.initialize.call(this, map, options);
    },

    addHooks: function () {
      if (this._marker._popupToolbar && this._marker._popupToolbar._removeToolbar) {
        this._marker._popupToolbar._removeToolbar();
      }

      var deleted = false;
      if (this._marker.options.clusterGroup.hasLayer(this._marker)) {
        this._marker.options.clusterGroup.removeLayer(this._marker);
        deleted = deleted || true;
      }

      if (this._map.hasLayer(this._marker)) {
        this._map.removeLayer(this._marker);
        deleted = deleted || true;
      }

      if (deleted) {
        this._marker.fire('marker:deleted');

        this._marker.off('marker:edited');
        this._marker.off('marker:deleted');
        this._marker.off('popuptoolbar:shown');
        this._marker.off('popuptoolbar:closed');
      }
    }
  });

  var closeMarkerToolbarAction = L.Toolbar2.Action.extend({
    initialize: function (map, marker, options) {
      this._map = map;
      this._marker = marker;

      options = options || {
        toolbarIcon: {
          tooltip: 'Close'
        }
      };

      if (this._marker.options.toolbarCloseIconClass) {
        options.toolbarIcon.className = this._marker.options.toolbarCloseIconClass
      } else {
        options.toolbarIcon.html = 'Close';
      }

      L.Util.setOptions(this, options);

      L.Toolbar2.Action.prototype.initialize.call(this, map, options);
    },

    addHooks: function () {
      if (this._marker._popupToolbar && this._marker._popupToolbar._removeToolbar) {
        this._marker._popupToolbar._removeToolbar();
      }
      if (this._marker._dragged) {
        this._marker._dragged = undefined;
        this._marker.fire('marker:edited');
      }
    }
  });

  var editableMarkerPopupToolbar = L.Toolbar2.Popup.extend({
    options: {
      actions: [
        editMarkerToolbarAction,
        deleteMarkerToolbarAction,
        closeMarkerToolbarAction
      ]
    },

    onAdd: function (map) {
      var that = this;
      var marker = this._arguments[1];

      if (marker instanceof L.Marker) {
        // Adjust the toolbar position so that it doesn't cover the marker.
        var popupAnchor = marker.options.icon.options.popupAnchor;
        this.options.anchor = L.point([popupAnchor[0], popupAnchor[1] - 6]);
      }

      L.Toolbar2.Popup.prototype.onAdd.call(this, map);

      if (marker.options.clusterGroup) {
        that._onClusterGroupAnimationEnd = function (e) {
          // Remove popup only if owner-marker clustered, otherwise don't remove.
          var visibleOne = marker.options.clusterGroup.getVisibleParent(marker);
          if (visibleOne && marker && !visibleOne.getLatLng().equals(marker.getLatLng()) && that._removeToolbar) {
            that._removeToolbar();
          }
        };

        marker.options.clusterGroup.on('animationend', that._onClusterGroupAnimationEnd);
      }

      that._removeToolbar = function () {
        if (that._onClusterGroupAnimationEnd) {
          marker.options.clusterGroup.off('animationend', that._onClusterGroupAnimationEnd);
          that._onClusterGroupAnimationEnd = undefined;
        }

        if (that._removeToolbar) {
          map.off('click', that._removeToolbar);
        }

        if (that._bringToFront) {
          that._bringToFront = undefined;
        }

        if (marker._editModeEnabled && marker._disableEditMode) {
          marker._disableEditMode();

          marker._editModeEnabled = undefined;
          marker._enableEditMode = undefined;
          marker._disableEditMode = undefined;
        }

        map.removeLayer(that);

        that._removeToolbar = undefined;
        marker._popupToolbar = undefined;

        marker.fire('popuptoolbar:closed');
      };

      // Bring to front imitation.
      that._bringToFront = function () {
        map.removeLayer(that);
        map.addLayer(that);
      };

      map.once('click', that._removeToolbar);
    }
  });

  // L.MarkerClusterGroup doesn't support draggable markers.
  // This extension fixes this problem.
  L.MarkerClusterGroup.EditableMarker = L.Marker.extend({
    options: {
      normalModeIcon: undefined,
      editModeIcon: undefined,
//      toolbarEditIconClass: undefined,
//      toolbarDeleteIconClass: undefined,
//      toolbarCloseIconClass: undefined,
        
      toolbarEditIconClass: 'fas fa-lg fa-pencil-square-o',
      toolbarDeleteIconClass: 'fas fa-lg fa-trash-o',
      toolbarCloseIconClass: 'fas fa-lg fa-close',        
        
      clusterGroup: undefined,
      getLabelContent: function () {
        return 'This is editable marker for cluster group.'
      },
      showLabelOnEdit: true,
      hideToolbarAfterEdit: false,
      dontShowToolbarOnFirstClick: false
    },

    initialize: function (latlng, options) {
      L.Util.setOptions(this, options);

      if (!(this.options.clusterGroup instanceof L.MarkerClusterGroup)) {
        throw new TypeError('Wrong type for \'clustrGroup\' option.');
      }

      if (!(this.options.normalModeIcon instanceof L.Icon)) {
        this.options.normalModeIcon = new L.Icon.Default;
      }

      this.options.icon = this.options.normalModeIcon;

      if (!(this.options.editModeIcon instanceof L.Icon)) {
        this.options.editModeIcon = new L.Icon.Default;
      }

      L.Marker.prototype.initialize.call(this, latlng, options);

      var markerWasClicked = false;

      this.on('click', function (e) {
        if (!this._popupToolbar && (!this.options.dontShowToolbarOnFirstClick || this.options.dontShowToolbarOnFirstClick && markerWasClicked)) {
          var prevMarker = this.options.clusterGroup._prevEditedMarker = this.options.clusterGroup._currentEditedMarker || {};
          this.options.clusterGroup._currentEditedMarker = this;

          if (prevMarker._popupToolbar && prevMarker._popupToolbar._removeToolbar) {
            prevMarker._popupToolbar._removeToolbar();
          }

          this._popupToolbar = (new editableMarkerPopupToolbar(e.latlng)).addTo(map, this);

          this.fire('popuptoolbar:shown');
        }

        markerWasClicked = true;
      });
    }
  });
})(window, document);