Skip to content

Commit

Permalink
228065. Add multilayers support for sideByside. (#615)
Browse files Browse the repository at this point in the history 
Co-authored-by: Kochneva Tatyana <tkochneva@ics.perm.ru>
  • Loading branch information
@TattiKochneva
TattiKochneva and Kochneva Tatyana authored Sep 13, 2022
1 parent 9a197af commit 67df846
Show file tree
Hide file tree
Showing 24 changed files with 596 additions and 249 deletions.
148 changes: 43 additions & 105 deletions addon/components/flexberry-maplayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import layout from '../templates/components/flexberry-maplayer';
import {
translationMacro as t
} from 'ember-i18n';

import CompareLayerMixin from '../mixins/compare-layers';
/**
Component's CSS-classes names.
JSON-object containing string constants with CSS-classes names related to component's hbs-markup elements.
Expand Down Expand Up @@ -141,7 +141,8 @@ let FlexberryMaplayerComponent = Ember.Component.extend(
RequiredActionsMixin,
DomActionsMixin,
DynamicActionsMixin,
DynamicPropertiesMixin, {
DynamicPropertiesMixin,
CompareLayerMixin, {

dynamicButtons: [],

Expand Down Expand Up @@ -524,12 +525,6 @@ let FlexberryMaplayerComponent = Ember.Component.extend(
*/
hasBeenExpanded: false,

//side to add layer to comapre
side: '',

//compare enabled
compareLayersEnabled: false,

/**
Flag: indicates whether submenu is visible.
Expand Down Expand Up @@ -563,6 +558,42 @@ let FlexberryMaplayerComponent = Ember.Component.extend(
return date;
}),

/**
* Value for checkbox in compare mode.
* Should be true, if layer is enabled on any side.
* @type Bool
*/
comparedLayerEnable: Ember.computed('compare.side',
'compare.compareState.Left.childLayersEnabled',
'compare.compareState.Right.childLayersEnabled',
'compare.compareState.Left.groupLayersEnabled',
'compare.compareState.Right.groupLayersEnabled', function() {
const side = this.get('compare.side');
const oppositeSide = this.getOppositeSide(side);
const groupSideSettings = this.get(`compare.compareState.${side}.groupLayersEnabled`);
const childSideSettings = this.get(`compare.compareState.${side}.childLayersEnabled`);
const oppositeChildSideSettings = this.get(`compare.compareState.${oppositeSide}.childLayersEnabled`);
const layer = this.get('layer');
if (this.get('isGroup')) {
return !!groupSideSettings.find(id => id === layer.get('id'));
}

return !![...childSideSettings, ...oppositeChildSideSettings].find(l => l.id === this.get('layer.id'));
}),

/**
* Readonly for checkbox.
* Should be true, if layer is enabled on the opposite side.
* @type Bool
*/
isLayerSelectedOnOtherSide: Ember.computed('compare.side',
'compare.compareState.Left.childLayersEnabled.[]',
'compare.compareState.Right.childLayersEnabled.[]', function() {
const oppositeSide = this.getOppositeSide(this.get('compare.side'));
const oppositechildSideSettings = this.get(`compare.compareState.${oppositeSide}.childLayersEnabled`);
return (!!oppositechildSideSettings.find(l => l.id === this.get('layer.id')));
}),

/**
Initializes DOM-related component's properties.
*/
Expand Down Expand Up @@ -591,32 +622,6 @@ let FlexberryMaplayerComponent = Ember.Component.extend(
}
}
},
/**
Redefine L.Control.SideBySide._updateClip for work with layer and label layer.
@method updateClip
*/
updateClip: function () {
let map = this.get('leafletMap');
let sbs = this.get('sideBySide');
var nw = map.containerPointToLayerPoint([0, 0]);
var se = map.containerPointToLayerPoint(map.getSize());
var clipX = nw.x + sbs.getPosition();
var dividerX = sbs.getPosition();
sbs._divider.style.left = dividerX + 'px';
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)';
sbs._leftLayers.forEach(function (layer) {
if (!Ember.isNone(layer) && !Ember.isNone(layer.getContainer)) {
layer.getContainer().style.clip = clipLeft;
}
});
sbs._rightLayers.forEach(function (layer) {
if (!Ember.isNone(layer) && !Ember.isNone(layer.getContainer)) {
layer.getContainer().style.clip = clipRight;
}
});
},

actions: {
onLayerTimeChange() {
Expand All @@ -635,79 +640,12 @@ let FlexberryMaplayerComponent = Ember.Component.extend(
*/
onChange(e) {
let layer = this.get('layer');
let sbs = this.get('sideBySide');
Ember.set(sbs, 'baseUpdateClip', sbs._updateClip);
if (e.newValue === false) {
sbs.off('dividermove', this.updateClip, this);
if (this.get('side') === 'Left') {
sbs.setLeftLayers(null);
this.get('leftLayer._leafletObject').remove();
if (layer.get('settingsAsObject.labelSettings.signMapObjects')) {
this.get('leftLayer._leafletObject._labelsLayer').remove();
}

this.set('leftLayer.side', null);
this.set('leftLayer.visibility', false);
this.set('leftLayer', null);
} else {
sbs.setRightLayers(null);
this.get('rightLayer._leafletObject').remove();
if (layer.get('settingsAsObject.labelSettings.signMapObjects')) {
this.get('rightLayer._leafletObject._labelsLayer').remove();
}

this.set('rightLayer.side', null);
this.set('rightLayer.visibility', false);
this.set('rightLayer', null);
}
let map = this.get('leafletMap');
if (this.get('isGroup')) {
this.setGroupLayerBySide(layer, this.get('compare.side'), map);
} else {
Ember.set(layer, 'visibility', true);
let map = this.get('leafletMap');
sbs._updateClip = this.get('updateClip').bind(this);
sbs.on('dividermove', this.updateClip, this);

if (this.get('side') === 'Left') {
if (this.get('leftLayer') !== null) {
sbs.setLeftLayers(null);
this.get('leftLayer._leafletObject').remove();
this.set('leftLayer.visibility', false);
this.set('leftLayer.side', null);
}

let leafletObject = Ember.get(layer, '_leafletObject').addTo(map);
let left = [];
left.push(leafletObject);
if (layer.get('settingsAsObject.labelSettings.signMapObjects')) {
left.push(leafletObject._labelsLayer.addTo(map));
}

Ember.set(layer, 'side', 'Left');
this.set('leftLayer', layer);
sbs.setLeftLayers(left);
}

if (this.get('side') === 'Right') {
if (this.get('rightLayer') !== null) {
sbs.setRightLayers(null);
this.get('rightLayer._leafletObject').remove();
this.set('rightLayer.visibility', false);
this.set('rightLayer.side', null);
}

let leafletObject = Ember.get(layer, '_leafletObject').addTo(map);
let right = [];
right.push(leafletObject);
if (layer.get('settingsAsObject.labelSettings.signMapObjects')) {
right.push(leafletObject._labelsLayer.addTo(map));
}

Ember.set(layer, 'side', 'Right');
this.set('rightLayer', layer);
sbs.setRightLayers(right);
}
this.setChildLayerBySide(layer, this.get('compare.side'), map);
}

this.sendAction('onChangeLayer', this.get('leftLayer'), this.get('rightLayer'));
},

/**
Expand Down
118 changes: 42 additions & 76 deletions addon/components/flexberry-maplayers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import DynamicActionsMixin from 'ember-flexberry/mixins/dynamic-actions';
import DynamicPropertiesMixin from '../mixins/dynamic-properties';
import layout from '../templates/components/flexberry-maplayers';
import { translationMacro as t } from 'ember-i18n';
import CompareLayersMixin from '../mixins/compare-layers';

/**
Component's CSS-classes names.
JSON-object containing string constants with CSS-classes names related to component's hbs-markup elements.
Expand Down Expand Up @@ -114,7 +116,8 @@ let FlexberryMaplayersComponent = Ember.Component.extend(
RequiredActionsMixin,
DomActionsMixin,
DynamicActionsMixin,
DynamicPropertiesMixin, {
DynamicPropertiesMixin,
CompareLayersMixin, {

/**
Component's required actions names.
Expand Down Expand Up @@ -376,15 +379,6 @@ let FlexberryMaplayersComponent = Ember.Component.extend(
*/
showFooter: true,

/**
String contains on what side to add layer in sideBySide control.
@property side
@type String
@default 'Left'
*/
side: 'Left',

/**
Property contatining sideBySide component.
Expand Down Expand Up @@ -421,15 +415,6 @@ let FlexberryMaplayersComponent = Ember.Component.extend(
*/
currentLayers: [],

/**
Flag indicates if compare layers mode enabled.
@property compareLayersEnabled
@type Boolean
@default false
*/
compareLayersEnabled: false,

/**
Flag for checkAll visibility
Expand All @@ -448,14 +433,30 @@ let FlexberryMaplayersComponent = Ember.Component.extend(
*/
rasterLayers: [],

/**
* Number of enabled layers on each side
*/
compareLayersCount: Ember.computed('compare.side', 'compare.compareState.Left.layers.[]', 'compare.compareState.Right.layers.[]', function() {
return this.get(`compare.compareState.${this.get('compare.side')}.layers`).length;
}),

/**
* Array of background layers ids for tree filter
*/
backgroundIds: Ember.computed('backgroundLayers', 'backgroundLayers.[]', function() {
const backgroundLayers = this.get('backgroundLayers');
return (backgroundLayers) ? this.get('backgroundLayers').map(l => l.get('id')) : [];
}),

/**
Adds side by side control to map and removes current visible layers.
@method onCompareLayersEnabled
*/
onCompareLayersEnabled: Ember.observer('compareLayersEnabled', function() {
onCompareLayersEnabled: Ember.observer('compare.compareLayersEnabled', 'ignoreCompareMode', function() {
let map = this.get('leafletMap');
if (this.get('compareLayersEnabled')) {
let sbs = this.get('sideBySide');
if (this.get('compare.compareLayersEnabled') && !this.get('ignoreCompareMode')) {
let layers = this.get('layers');
let layersArray = [];
layers.forEach(layer => {
Expand All @@ -467,44 +468,32 @@ let FlexberryMaplayersComponent = Ember.Component.extend(
layer.set('visibility', false);
});
this.set('currentLayers', layersArray);
this.get('sideBySide').addTo(map);
} else {
let sbs = this.get('sideBySide');
if (!Ember.isNone(sbs.baseUpdateClip)) {
sbs.off('dividermove', this.updateClip, this);
sbs._updateClip = Ember.get(sbs, 'baseUpdateClip').bind(this);
map.off('move', this._updateClip, this);
if (this.get('selectedBaseLayer')) {
this.setBgLayerBySide(this.get('selectedBaseLayer'), 'Left', map);
this.setBgLayerBySide(this.get('selectedBaseLayer'), 'Right', map);
}

sbs._leftLayers.forEach(function (layer) {
if (!Ember.isNone(layer)) {
layer.getContainer().style.clip = '';
}
});
sbs._rightLayers.forEach(function (layer) {
if (!Ember.isNone(layer)) {
layer.getContainer().style.clip = '';
}
});
sbs.addTo(map);
} else {
this.destroyCompare(map);
sbs.remove();
let rightLayer = this.get('rightLayer');
if (!Ember.isNone(rightLayer)) {
rightLayer.set('visibility', false);
rightLayer.set('side', null);
this.set('rightLayer', null);
}

let leftLayer = this.get('leftLayer');
if (!Ember.isNone(leftLayer)) {
leftLayer.set('visibility', false);
leftLayer.set('side', null);
this.set('leftLayer', null);
}

let layersToAdd = this.get('currentLayers');
layersToAdd.forEach(layer => {
Ember.set(layer, 'visibility', true);
let layers = this.get('layers');
layers.forEach(layer => {
const leafletLayer = layer.get('_leafletObject');
if (leafletLayer && leafletLayer.getContainer && leafletLayer.getContainer()) {
leafletLayer.getContainer().style.clip = '';
}

if (layer.get('settingsAsObject.labelSettings.signMapObjects')) {
const labelsOriginalLayer = layer.get('_leafletObject._labelsLayer');
if (labelsOriginalLayer && labelsOriginalLayer.getContainer && labelsOriginalLayer.getContainer()) {
leafletLayer.getContainer().style.clip = '';
}
}
});
layersToAdd.forEach(layer => Ember.set(layer, 'visibility', true));
}
}),

Expand Down Expand Up @@ -535,11 +524,6 @@ let FlexberryMaplayersComponent = Ember.Component.extend(
setVisibility(layers);
},

onChangeLayer(leftLayer, rightLayer) {
this.set('leftLayer', leftLayer);
this.set('rightLayer', rightLayer);
},

onLayerTimeChanged(layer, time) {
this.sendAction('layerTimeChanged', layer, time);
},
Expand Down Expand Up @@ -576,24 +560,6 @@ let FlexberryMaplayersComponent = Ember.Component.extend(
onAddDialogApprove(...args) {
// Send outer 'add' action.
this.sendAction('add', ...args);
},

/**
Handles clicks on left side button.
@method actions.onLeftClick
*/
onLeftClick() {
this.set('side', 'Left');
},

/**
Handles clicks on right side button.
@method actions.onLeftClick
*/
onRightClick() {
this.set('side', 'Right');
}
},

Expand Down
Loading

0 comments on commit 67df846

Please sign in to comment.