Skip to content

Doesn't support the same layer on both left and right. #48

Open
@oisact

Description

@oisact

My UI allows the user to select which layers they want on the left and right for comparison. This can result in the user selecting the same layer for both sides, even if just temporarily while they are making selections. The side-by-side control does not support this correctly, and typically the left side will be blanked (because there is just one layer, and the right side clip is set last, so it "wins").

The following simple fix removes the clip area from the layer if the left and right layers are the same.

_updateClip: function () {
    var map = this._map
    var nw = map.containerPointToLayerPoint([0, 0])
    var se = map.containerPointToLayerPoint(map.getSize())
    var clipX = nw.x + this.getPosition()
    var dividerX = this.getPosition()

    this._divider.style.left = dividerX + 'px'
    this.fire('dividermove', {x: dividerX})
    if (this._leftLayer === this._rightLayer && this._leftLayer) {
      this._leftLayer.getContainer().style.clip = '';
      this._rightLayer.getContainer().style.clip = '';
    } else {
      var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
      var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
      if (this._leftLayer) {
        this._leftLayer.getContainer().style.clip = clipLeft
      }
      if (this._rightLayer) {
        this._rightLayer.getContainer().style.clip = clipRight
      }
    }
  },

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions