Merge pull request #810 from Flexberry/wi_234045_comboStyle

combo style

addon/components/base-vector-layer.js

@@ -5,9 +5,10 @@
 import Ember from 'ember';
 import BaseLayer from './base-layer';
 import { setLeafletLayerOpacity } from '../utils/leaflet-opacity';
-import { checkMapZoom } from '../utils/check-zoom';
+import { checkMapZoom, checkMapZoomStyle } from '../utils/check-zoom';
 import layerLabel from '../mixins/layer-label';
 import featureWithAreaIntersect from '../utils/feature-with-area-intersect';
+
 const { assert } = Ember;
 
 /**
@@ -402,6 +403,10 @@ export default BaseLayer.extend(layerLabel, {
     let leafletMap = this.get('leafletMap');
     let layerLabel = e.layer._label;
 
+    if (e.type === 'layeradd') {
+      this._setLayerStyle();
+    }
+
     if (layerLabel) {
       if (e.type === 'layeradd') {
         layerLabel.forEach(label => {
@@ -749,22 +754,143 @@ export default BaseLayer.extend(layerLabel, {
         vectorLayer.hideAllLayerObjects = this.get('hideAllLayerObjects').bind(this);
         vectorLayer._setVisibilityObjects = this.get('_setVisibilityObjects').bind(this);
 
+        // change style by change zoom
+        let styleRules = this.get('layerModel.settingsAsObject.styleRules');
+        if (styleRules && styleRules.length > 0) {
+          this.set('styleRules', styleRules);
+          this.set('layerModel.styleRules', styleRules);
+          this._updateStyleRules();
+          this.get('leafletMap').on('zoomend', this._updateStyleRules, this);
+        }
+
+        // load images for style
+        let imagePromises = Ember.A();
+        let styleSettings = this.get('layerModel.settingsAsObject.styleSettings');
+        if (styleSettings && styleRules.length === 0) {
+          this._imageFromStyleSettings(imagePromises, styleSettings);
+        } else {
+          this._imageFromStyleRules(imagePromises);
+        }
+
         if (Ember.isNone(vectorLayer.loadLayerFeatures)) {
           Ember.set(vectorLayer, 'loadLayerFeatures', this.loadLayerFeatures.bind(this));
         }
 
+        let resultLayer = vectorLayer;
         if (this.get('clusterize')) {
           let clusterLayer = this.createClusterLayer(vectorLayer);
-          resolve(clusterLayer);
+          resultLayer = clusterLayer;
+        }
+
+        if (imagePromises.length > 0) {
+          Ember.RSVP.allSettled(imagePromises).then((styles) => {
+            styles.forEach(style => {
+              for (let property in style.value) {
+                if (!Ember.isNone(style.value[property].tagName)) {
+                  styleSettings.style.path[property].imagePattern = style.value[property];
+                } else {
+                  for (let propertyInner in style.value[property]) {
+                    styleRules[property].styleSettings.style.path[propertyInner].imagePattern = style.value[property][propertyInner];
+                  }
+                }
+              }
+            });
+            resolve(resultLayer);
+          });
         } else {
-          resolve(vectorLayer);
+          resolve(resultLayer);
         }
       }).catch((e) => {
         reject(e);
       });
     });
   },
 
+  /**
+    Add in array promise which load pattern from styleSettings.
+
+    @method _imageFromStyleSettings
+  */
+  _imageFromStyleSettings(imagePromises, styleSettings, index) {
+    if (styleSettings.style.path) {
+      if (Ember.isArray(styleSettings.style.path)) {
+        styleSettings.style.path.forEach((style, i) => {
+          if (style.fillStyle === 'pattern') {
+            imagePromises.addObject(this._setPattern(style, i, index));
+          }
+        });
+      } else if (styleSettings.style.path.fillStyle === 'pattern') {
+        imagePromises.addObject(this._setPattern(styleSettings.style.path, 0, index));
+      }
+    }
+  },
+
+  /**
+    For each styleRules load pattern.
+
+    @method _imageFromStyleRules
+  */
+  _imageFromStyleRules(imagePromises) {
+    let styleRules = this.get('styleRules');
+    if (Ember.isNone(styleRules)) {
+      return;
+    }
+
+    styleRules.forEach((styleRule, i) => {
+      this._imageFromStyleSettings(imagePromises, styleRule.styleSettings, i);
+    });
+  },
+
+  /**
+    Change styleSettings depending on the zoom.
+
+    @method _updateStyleRules
+  */
+  _updateStyleRules() {
+    let styleRules = this.get('styleRules');
+    if (Ember.isNone(styleRules)) {
+      return;
+    }
+
+    let leafletMap = this.get('leafletMap');
+    styleRules.forEach(styleRule => {
+      let rule = styleRule.rule;
+      let caption = `${this.get('i18n').t('components.base-vector-layer.zoomFrom')} ${rule.minZoom}
+        ${this.get('i18n').t('components.base-vector-layer.zoomTo')} ${rule.maxZoom}`;
+      Ember.set(rule, 'caption', caption);
+      if (checkMapZoomStyle(leafletMap, styleRule.rule) && this.get('styleSettings') !== styleRule.styleSettings) {
+        this.set('styleSettings', styleRule.styleSettings);
+      }
+    });
+  },
+
+  /**
+    Load image for pattern.
+
+    @method _setPattern
+  */
+  _setPattern(style, i, index = null) {
+    return new Ember.RSVP.Promise((resolve) => {
+      let image = new Image();
+      Ember.set(style, 'pattern', true);
+      image.onload = function() {
+        Ember.set(style, 'imagePattern', this);
+        let result = {};
+        if (!index) {
+          result[i] = this;
+        } else {
+          let inner = {};
+          inner[i] = this;
+          result[index] = inner;
+        }
+
+        return resolve(result);
+      };
+
+      image.src = style.fillPattern;
+    });
+  },
+
   /**
     Destroys leaflet layer related to layer type.
 
@@ -1106,6 +1232,19 @@ export default BaseLayer.extend(layerLabel, {
     if (!Ember.isNone(leafletMap)) {
       leafletMap.off('flexberry-map:getOrLoadLayerFeatures', this._getOrLoadLayerFeatures, this);
 
+      if (this.get('typeGeometry') === 'polyline') {
+        leafletMap.off('zoomend', this._updatePositionLabelForLine, this);
+      }
+
+      if (this.get('showExisting') !== false) {
+        leafletMap.off('moveend', this._showLabelsMovingMap, this);
+      }
+
+      let styleRules = this.get('layerModel.settingsAsObject.styleRules');
+      if (styleRules.length > 0) {
+        leafletMap.off('zoomend', this._updateStyleRules, this);
+      }
+
       this.willDestroyElementLabel(leafletMap);
     }
   },
@@ -1127,6 +1266,9 @@ export default BaseLayer.extend(layerLabel, {
   _setLayerVisibility() {
     if (this.get('visibility')) {
       this._addLayerToLeafletContainer();
+      if (this.typeGeometry === 'marker' && !this.clusterize) {
+        this._setLayerStyle();
+      }
 
       let leafletObject = this.returnLeafletObject();
       this._setLayerVisibilityLabel(leafletObject);

addon/components/flexberry-edit-layermap.js

@@ -441,7 +441,7 @@ export default Ember.Component.extend(
         Ember.getOwner(this).knownForType('layer', className);
 
       // Style settings are available only for vector layers.
-      return !Ember.isNone(layerClass) && layerClass.isVectorType(this.get('layer'));
+      return !Ember.isNone(layerClass) && layerClass.isVectorType(this.get('layer')) && false;
     }),
 
     /**
@@ -455,7 +455,7 @@ export default Ember.Component.extend(
     _labelsSettingsAreAvailableForType: Ember.computed('_layer.type', function () {
       let className = this.get('_layer.type');
 
-      return Ember.getOwner(this).isKnownNameForType('layer', className) && className !== 'group';
+      return Ember.getOwner(this).isKnownNameForType('layer', className) && className !== 'group' && false;
     }),
 
     /**

addon/components/flexberry-map.js

@@ -452,6 +452,13 @@ let FlexberryMapComponent = Ember.Component.extend(
   */
   _zoomend(e) {
     this.sendAction('zoomend', e);
+    let $leafletContainer = this.get('_$leafletContainer');
+    if (this.get('zoomControl') && $leafletContainer) {
+      let $zoomControl = $leafletContainer.find('.leaflet-control-container .leaflet-control-zoom');
+      let $viewZoom = $zoomControl.find('.leaflet-control-zoom-view');
+      let zoom = e.target._zoom.toFixed(1);
+      Ember.$($viewZoom[0]).text(zoom);
+    }
   },
 
   /**
@@ -469,6 +476,9 @@ let FlexberryMapComponent = Ember.Component.extend(
       let $zoomInButton = $zoomControl.find('.leaflet-control-zoom-in');
       let $zoomOutButton = $zoomControl.find('.leaflet-control-zoom-out');
 
+      let viewZoom = '<a class="leaflet-control-zoom-view">' + Number(this.get('zoom')).toFixed(1) + '</a>';
+      Ember.$($zoomInButton[0]).after(viewZoom);
+
       $zoomInButton.attr('title', i18n.t('components.flexberry-map.zoom-control.zoom-in-button.title'));
       $zoomOutButton.attr('title', i18n.t('components.flexberry-map.zoom-control.zoom-out-button.title'));
     }

addon/components/layers/wms-layer.js

@@ -101,7 +101,7 @@ export default TileLayer.extend({
     // can be used in SLD-styles
     this.setEnv();
 
-    options = Ember.$.extend(true, {}, options, { filter: filter, env: this.get('env') });
+    options = Ember.$.extend(true, {}, options, { filter: filter, env: this.get('env'), rules: this.get('styleRules') });
 
     return L.tileLayer.wms(this.get('url'), options);
   },

addon/components/legends/layers-styles/-private/base.js

@@ -17,7 +17,8 @@ import layout from '../../../../templates/components/legends/layers-styles/-priv
 const flexberryClassNames = {
   imageWrapper: 'layer-legend-image-wrapper',
   image: 'layer-legend-image',
-  caption: 'layer-legend-caption'
+  caption: 'layer-legend-caption',
+  zoom: 'layer-legend-zoom'
 };
 
 /**

addon/components/legends/layers-styles/combo.js

@@ -0,0 +1,99 @@
+import Ember from 'ember';
+import layout from '../../../templates/components/legends/layers-styles/simple';
+import SimpleLayerStyleLegendComponent from './simple';
+
+/**
+  Component representing legend for vector layer with 'simple' style.
+
+  @class SimpleLayerStyleLegendComponent
+  @extends BaseLayerStyleLegendComponent
+*/
+export default SimpleLayerStyleLegendComponent.extend({
+  /**
+    Flag: indicates whether to show linear & polygonal objects on legend or not.
+
+    @property _geometriesCanBeDisplayed
+    @type Boolean
+    @private
+    @readOnly
+  */
+  _geometriesCanBeDisplayed: Ember.computed('legendSettings.geometriesCanBeDisplayed', function() {
+    return this.get('legendSettings.geometriesCanBeDisplayed') !== false;
+  }),
+
+  /**
+    Flag: indicates whether to show point objects on legend or not.
+
+    @property _markersCanBeDisplayed
+    @type Boolean
+    @private
+    @readOnly
+  */
+  _markersCanBeDisplayed: Ember.computed('legendSettings.markersCanBeDisplayed', function() {
+    return this.get('legendSettings.markersCanBeDisplayed') !== false;
+  }),
+
+  /**
+    Reference to component's template.
+  */
+  layout,
+
+  /**
+    Legend width (for image only, without label).
+
+    @property width
+    @type Number
+    @default 24
+  */
+  width: 24,
+
+  /**
+    Legend height (for image only, without label).
+
+    @property height
+    @type Number
+
+    @default 24
+    Reference to component's template.
+  */
+  height: 24,
+
+  /**
+    Renderes legends each time component gets rendered.
+  */
+  didRender() {
+    this._super(...arguments);
+
+    if (this.get('_geometriesCanBeDisplayed')) {
+      let styleSettings = this.get('styleSettings');
+      let canvas = this.$('canvas.geometries')[0];
+
+      let layersStylesRenderer = this.get('_layersStylesRenderer');
+      let legendStyle = this.parentView.layer.legendStyle;
+      if (!Ember.isNone(legendStyle)) {
+        styleSettings = layersStylesRenderer.getDefaultStyleSettings('simple');
+        for (let opt in legendStyle.style.path) {
+          styleSettings.style.path[opt] = legendStyle.style.path[opt];
+        }
+      }
+
+      layersStylesRenderer.renderOnCanvas({
+        styleSettings: styleSettings,
+        canvas: canvas,
+        target: 'legend'
+      });
+    }
+
+    if (this.get('_markersCanBeDisplayed')) {
+      let styleSettings = Ember.isNone(this.parentView.layer.legendStyle) ? this.get('styleSettings.style.marker') : this.parentView.layer.legendStyle;
+      let canvas = this.$('canvas.markers')[0];
+
+      let markersStylesRenderer = this.get('_markersStylesRenderer');
+      markersStylesRenderer.renderOnCanvas({
+        styleSettings: styleSettings,
+        canvas: canvas,
+        target: 'legend'
+      });
+    }
+  }
+});