c80_map_floors 0.1.0.25 → 0.2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a29cc94d09f89bc12853f7ccbbaa07492715f6e8
-  data.tar.gz: 106961b0879d3e43293ad8f4bf9cf382fbc9c9e6
+  metadata.gz: 29c8408b56215867ecb61bc6c0c96541a8b3645c
+  data.tar.gz: ee01051314c85f074b1d9acb033095fa1095cee0
 SHA512:
-  metadata.gz: 82b6ff9925c03e6d9823f93bc56dc1b0e158e92e815ef300dcce2d909a181ad652407dd5f8cbf199bebc3d7008a0055b4ba62f314d86858d08daed75decaabb7
-  data.tar.gz: 6cbf672924aa9db5751a6ef7b6842ad4f6b73a8f76c93ec853bcb80bbdc6c8057d85795a316ed5e75d7b60934c003b4c25e75404673d56c48b0f44a80e6292e1
+  metadata.gz: d8ccb255f481143ab61df377077b9205d0d9df7162d4c5fc9569a8d49a3abf4989b68149af9a276f01d719b87ebe6465eb419f1541d5004e28e459a4d8e7f199
+  data.tar.gz: 60502338215bf6d3c889ac9cce8ef9e288d833c659af2f158f19eb6ee6f4c315c7a099f650f885ffe524bba819f39273db5a5fd647673f39770ed9a221e1bf71

data/README.md

@@ -69,12 +69,17 @@ Create in host app's assets\javascripts:
 $(document).ready(function() {
     if ($('#map_wrapper').length) {
         InitMap({
-            dnd_enable:false
+            dnd_enable:false,
+            debug: true,
+            left_padding: 50,
+            right_padding: 50,
+            focus_area_width: 500,
+            focus_area_height: 500
         });
     }
 });
 ```
-
+![map padding tuning](map_padding_tuning.jpg)
 
 # Helpers
 ```

data/app/assets/javascripts/buttons/button_back_to_map.js

@@ -6,12 +6,13 @@ function BackToMapButton() {
     var _this = this;
 
     var _cnt = null;
-    var _btn = null;
+    var _$btn = null;
+    
+    var __$building_info = null; // вспомогательно: относительно окна выравниваем кнопку
+    var __$mcontainer = null;     // вспомогательно: для выравнивания кнопки
 
-    // вспомогательно: относительно окна выравниваем кнопку
-    var _$building_info = null;
-
-    var _onClick = function () {
+    var _onClick = function (e) {
+        e.preventDefault();
         _map.setMode('viewing');
 
         if (_map.current_building) {
@@ -44,13 +45,13 @@ function BackToMapButton() {
         _map = link_to_map;
         _cnt = $('<div></div>').addClass('back_to_map_button');
         _cnt.appendTo($(parent_div_selector));
-        _btn = $('<a href="#" id="BackToMapButton">Обратно на карту</a>');
+        _$btn = $('<a href="#" id="BackToMapButton">Обратно на карту</a>');
         //noinspection JSUnresolvedFunction
-        _btn.on('click', _onClick);
-        _cnt.append(_btn);
+        _$btn.on('click', _onClick);
+        _cnt.append(_$btn);
 
-        // фиксируем вспомогательный элемент
-        _$building_info = $('.building_info');
+        __$building_info = $('.building_info'); // фиксируем вспомогательные элементы
+        __$mcontainer = $('.mcontainer'); // фиксируем вспомогательные элементы
 
     };
 
@@ -63,25 +64,25 @@ function BackToMapButton() {
     };
     var __show = function () {
         // фиксируем
-        var building_info_top = _$building_info.offset().top - _map.container.offset().top;
-        var building_info_height = _$building_info.height();
+        var building_info_top = __$building_info.offset().top - __$mcontainer.offset().top;
+        var building_info_height = __$building_info.outerHeight(true);
 
         // считаем
         var btn_top = building_info_top + building_info_height;
-        var btn_left = _$building_info.offset().left;
+        var btn_left = __$building_info.offset().left - __$mcontainer.offset().left;
 
         // позиционируем
-        _btn.css('top', btn_top + 'px');
-        _btn.css('left', btn_left + 'px');
+        _$btn.css('top', btn_top + 'px');
+        _$btn.css('left', btn_left + 'px');
 
         // показываем
-        _btn.css('opacity','1');
+        _$btn.css('opacity','1');
         _cnt.css('display', 'block');
     };
 
     _this.hide = function () {
         _cnt.css('display', 'none');
-        _btn.css('opacity', '0');
+        _$btn.css('opacity', '0');
     }
 
 }

data/app/assets/javascripts/map_objects/building.js

@@ -104,14 +104,7 @@ function Building() {
         }
         if (map_floor_as_json["img_bg"]["url"] != "null") {
 
-            // NOTE::картинку этажа рисуем не по bounding box здания, а по значениям из базы
-
-            // сначала возьём координаты coords_img здания
-            var tmp = _options["coords_img"].split(",");
-            var xx = parseFloat(tmp[0]);
-            var yy = parseFloat(tmp[1]);
-
-            // и сложим их с корректирующими координатами coords этажа
+            // картинку этажа рисуем по значениям из базы
             var xx2 = 0;
             var yy2 = 0;
             if (map_floor_as_json["coords"].length) {
@@ -125,8 +118,8 @@ function Building() {
 
             // просим карту нарисовать картинку с данными характеристиками
             _$image_bg = _map.draw_map_object_image_bg(map_floor_as_json["img_bg"]["url"], {
-                x: xx + xx2,
-                y: yy + yy2,
+                x: xx2,
+                y: yy2,
                 width: map_floor_as_json["img_bg_width"],
                 height: map_floor_as_json["img_bg_height"]
             }/*, 'building'*/);

data/app/assets/javascripts/src/main.js

@@ -24,18 +24,17 @@ var InitMap = function (params) {
     var y = (window_height - image_height)/2;
     // - to delete end -----------------------------------------------------------------------------------------------------------------------
 
-    map_on_index_page = $('#map_wrapper').beMap(
-        {
-            source:LOCS_HASH,
-            scale: scale,
-            x: x,
-            y: y,
-            mapwidth: MAP_WIDTH,
-            mapheight: MAP_HEIGHT,
-            height: window_height,
-            dnd_enable: dnd_enable
-        }
-    );
+    var map_params = {
+        source:LOCS_HASH,
+        scale: scale,
+        x: x,
+        y: y,
+        mapwidth: MAP_WIDTH,
+        mapheight: MAP_HEIGHT,
+        height: window_height
+    };
+    map_params = $.extend(map_params, params);
+    map_on_index_page = $('#map_wrapper').beMap(map_params);
 
 };
 
@@ -44,7 +43,6 @@ var InitMap = function (params) {
     var Map = function () {
         var self = this;
 
-        self.debug = false;
         self.o = {
             source: 'locations.json', // data
             height: 400,    // viewbox height, pixels
@@ -59,7 +57,12 @@ var InitMap = function (params) {
             scale: 1,
             x: 0,
             y: 0,
-            dnd_enable: true
+            dnd_enable: true,
+            debug: false,
+            left_padding: 20,
+            focus_area_width: 520,
+            top_padding: 20,
+            focus_area_height: 520
         };
         self.svg = null;
         self.svg_overlay = null;
@@ -295,7 +298,7 @@ var InitMap = function (params) {
             self.draw_childs(data["buildings"]);
 
             // проверим, всё ли уместилось
-            self.ivalidateViewArea();
+            self.invalidateViewArea();
 
             // инициализируем класс, обслуживающий поиск
             self.search_gui_klass = new SearchGUI(self);
@@ -390,7 +393,7 @@ var InitMap = function (params) {
                 // ------------------------------------------------------------------------------------------------------------------------
 
 
-                self.ivalidateViewArea();
+                self.invalidateViewArea();
 
             }).resize();
 
@@ -724,7 +727,7 @@ var InitMap = function (params) {
             return pageC - scale * logicC;
         };
 
-        /* --- ivalidateViewArea BEGIN --------------------------------------------------------------------------------- */
+        /* --- invalidateViewArea BEGIN --------------------------------------------------------------------------------- */
 
         var _$m = $("#map_wrapper");
         var _$b = $('.container');//$('footer .container');
@@ -733,21 +736,24 @@ var InitMap = function (params) {
         var _is_debug_drawn = false;
         var _$address_p = $('#paddress'); // 20161003: после редизайна надо дополнительно позиционировать блок с адресом
 
-        self.ivalidateViewArea = function () {
-            //console.log('<init> _$b.offset().left = ' + _$b.offset().left);
+        self.invalidateViewArea = function () {
+            console.log('<invalidateViewArea>');
 
             // рассчитаем "константы" - прямоугольник, в который надо вписывать картинки зданий при входе в них
-            self.X1 = _$b.offset().left + 100;
+            self.X1 = self.o.left_padding;
+            self.X2 = self.o.left_padding + self.o.focus_area_width;
+
+            self.Y1 = self.o.top_padding;
+            self.Y2 = self.o.top_padding + self.o.focus_area_height;
+
+            self.CX = (self.X2 + self.X1) / 2;
+            self.CY = (self.Y2 + self.Y1) / 2;
+
             self.X1S = _$b.offset().left + 200;
-            self.Y1 = 73;
             self.Y1S = 140;
-            self.X2 = self.X1 + _$b.width() * .5;
             self.X2S = self.X1 + _$b.width() * .4;
             self.X3 = self.X1 + _$b.width() - 100;
-            self.Y2 = _$m.height() - 20;
             self.Y2S = _$m.height() - 80;
-            self.CX = (self.X2 - self.X1) / 2 - 2 + self.X1;
-            self.CY = (self.Y2 - self.Y1) / 2 - 2 + self.Y1;
 
             self.X10 = _$b.offset().left + 15;
             self.X20 = self.X10 + _$b.width();
@@ -760,21 +766,24 @@ var InitMap = function (params) {
             if (self.container) $container_buttons.css("margin-top", (self.container.height() -10) + "px");
 
             // DEBUG
-            if (self.debug) {
+            if (self.o.debug) {
 
                 if (!_is_debug_drawn) {
                     _is_debug_drawn = true;
 
-                    var style = "display:block;position:absolute;background-color:#00ff00;opacity:0.4;";
+                    var style = "display:block;position:absolute;background-color:#00ff00;opacity:0.7;";
                     var style_x = style + "width:1px;height:800px;top:0;left:{X}px;";
                     var style_y = style + "width:3000px;height:1px;left:0;top:{Y}px;";
                     //var style_dot = style + 'width:4px;height:4px;left:{X}px;top:{Y}px;';
 
                     var to_draw = [
-                        {x: self.X10},
-                        {x: self.X20},
-                        {y: self.Y10},
-                        {y: self.Y20},
+                        {x: self.X1},
+                        {x: self.X2},
+                        {y: self.Y1},
+                        {y: self.Y2},
+                        //{x: self.X20},
+                        //{y: self.Y10},
+                        //{y: self.Y20},
                         {x: self.CX},
                         {y: self.CY}
                     ];
@@ -799,7 +808,7 @@ var InitMap = function (params) {
 
         };
 
-        /* --- ivalidateViewArea END ----------------------------------------------------------------------------------- */
+        /* --- invalidateViewArea END ----------------------------------------------------------------------------------- */
 
         self.addEvent = function (target, eventType, func) {
             self.events.push(new AppEvent(target, eventType, func));
@@ -942,7 +951,9 @@ var InitMap = function (params) {
         };
 
         self._draw_map_object_image_bg_onload = function ($image) {
-            self.clear_all_map_object_image_bg();
+            setTimeout(function() {
+                self.clear_all_map_object_image_bg();
+            }, 500);
             self.__compose_css_style_for_map_object_image($image); // рассчитаем позиционирующий стиль и применим его к созданной оверлейной картинке
         };
 

data/app/assets/javascripts/view/building_info/building_info.js

@@ -12,7 +12,7 @@ function BuildingInfo(options) {
 
     var _this = this;
 
-    var _el_building_info = null;
+    var _$el_building_info = null;
 
     // текуще отображаемое здание (Это данные от C80MapFloors::MapBuilding, метод my_as_json5)
     var _cur_map_building_json;
@@ -137,18 +137,18 @@ function BuildingInfo(options) {
     };
 
     this.show = function() {
-        _el_building_info.css("top", _el_building_info.data("init"));
+        _$el_building_info.css("top", _$el_building_info.data("init"));
     };
 
     this.hide = function() {
 
-        if (_el_building_info.data("init") == undefined) {
-            _el_building_info.data('init', _el_building_info.css("top"));
+        if (_$el_building_info.data("init") == undefined) {
+            _$el_building_info.data('init', _$el_building_info.css("top"));
         }        
         
-        var h = _el_building_info.height() + 100;
-        _el_building_info.css("top", -h+'px');
-        _el_building_info.css("display", "block");
+        var h = _$el_building_info.height() + 100;
+        _$el_building_info.css("top", -h+'px');
+        _$el_building_info.css("display", "block");
     };
 
     /**
@@ -220,7 +220,7 @@ function BuildingInfo(options) {
 
             // TODO:: этот код должен переехать туда, где будем выводить инфо о площади без арендатора
             /*// заполняем данными ссылку 'Оставить заявку'
-            var $a_make_order = _el_building_info.find('.c80_order_invoking_btn');
+            var $a_make_order = _$el_building_info.find('.c80_order_invoking_btn');
             $a_make_order.data('comment-text', 'Здравствуйте, оставляю заявку на площадь: ' + area_json["title"]);
             $a_make_order.data('subj-id', area_json["id"]);*/
 
@@ -229,7 +229,7 @@ function BuildingInfo(options) {
     };
 
     this.set_left = function(left) {
-        _el_building_info.css("left", left + "px");
+        _$el_building_info.css("left", left + "px");
     };
 
  //------------------------------------------------------------------------------------------------------------------------
@@ -253,7 +253,7 @@ function BuildingInfo(options) {
     this._fInit = function (options) {
 
         // фиксируем html-узел
-        _el_building_info = $('.building_info');
+        _$el_building_info = $('.building_info');
 
         // TODO:: _options extend options
         _options = $.extend(_options, options);
@@ -267,7 +267,7 @@ function BuildingInfo(options) {
         });
 
         // находим заголовок
-        _$title = _el_building_info.find('h3');
+        _$title = _$el_building_info.find('h3');
 
     };
 

data/app/assets/javascripts/view/search_gui.js

@@ -122,8 +122,10 @@ function SearchGUI(link_to_map) {
      */
     this.position_inside = function () {
         //console.log('<position_inside> [breakpoint].');
-        _$container.css("left", -200);
-        _$container.css("top", _$container.data('init_position_top'));
+        if (_$container != null) { // может быть null, если вдруг gui поиска не пришёл с сервера
+            _$container.css("left", -200);
+            _$container.css("top", _$container.data('init_position_top'));
+        }
     };
 
     /**
@@ -131,7 +133,9 @@ function SearchGUI(link_to_map) {
      * Например, когда переходим в режим редактирования.
      */
     this.position_hide = function () {
-        _$container.css("top", -200);
+        if (_$container != null) { // может быть null, если вдруг gui поиска не пришёл с сервера
+            _$container.css("top", -200);
+        }
     };
     
     //--[ private ]-----------------------------------------------------------------------------------------------------

data/app/assets/stylesheets/view/buttons/back_to_map_button.scss

@@ -1,5 +1,5 @@
 #BackToMapButton {
-  background-color: #3377A8;
+  background-color: #5FCE4B;
   color: #fff !important;
   display: block;
   font-size: 17px;
@@ -20,9 +20,10 @@
   text-transform: uppercase;
   /*font-family: FrankRegular, sans-serif;*/
   font-weight: normal;
+  margin: 10px 0;
 
   &:hover {
-    background-color: #5FCE4B;
+    background-color: #3377A8;
   }
 
 }

data/app/assets/stylesheets/view/elems/building_info.scss

@@ -2,7 +2,7 @@
 .building_info {
   position: absolute;
   z-index: 5;
-  top: 10px;
+  top: 15px;
   padding: 20px;
   background-color: #ededed;
   display: none;

data/app/helpers/c80_map_floors/model_floor_helper.rb

@@ -0,0 +1,26 @@
+# Предыстория: изначально карта создавалась на основе арта 101км.
+# Чтобы при приближении к картинке этажа не возникало мыла,
+# я их готовил размерами в 2 раза больше.
+# Теперь пришёл единый psd (карта s40), в котором картинки этажей
+# уже размещены и позиционированы поверх картинки карты. И нет
+# надобности увеличивать их в 2 раза.
+#
+# Поэтому: методы модели Floor обращаются теперь к этому хелперу,
+# задача которого - выдавать размеры картинок этажей. 20170413
+# + в host приложении можно переопределить этот функционал.
+#
+module C80MapFloors
+  module ModelFloorHelper
+
+    def get_width(image)
+      img = MiniMagick::Image.open(image.path)
+      img['width']/2
+    end
+    
+    def get_height(image)
+      img = MiniMagick::Image.open(image.path)
+      img['height']/2
+    end
+
+  end
+end

data/app/models/c80_map_floors/floor.rb

@@ -14,13 +14,16 @@ module C80MapFloors
     mount_uploader :img_bg, C80MapFloors::FloorImageUploader   # TODO:: FloorImageUploader класс должен использоваться только для загрузки img_bg [потому что 78aasq]
     mount_uploader :img_overlay, C80MapFloors::FloorImageUploader
 
+    include C80MapFloors::ModelFloorHelper
+
     # NOTE:: Т.к. для этажей используются картинки в два раза детальнее (в два раза больше, чем оригинал карты), то делим попалам
     # размеры картинки уйдут в js - они помогут её css-абсолютно правильно масштабировать и позиционировать
     def img_bg_width
       res = nil
       if img_bg.present?
-        img = MiniMagick::Image.open(img_bg.path)
-        res = img["width"]/2
+        res = get_width(img_bg)
+        # img = MiniMagick::Image.open(img_bg.path)
+        # res = img["width"]/2
       end
       res
     end
@@ -28,8 +31,9 @@ module C80MapFloors
     def img_bg_height
       res = nil
       if img_bg.present?
-        img = MiniMagick::Image.open(img_bg.path)
-        res = img["height"]/2
+        res = get_height(img_bg)
+        # img = MiniMagick::Image.open(img_bg.path)
+        # res = img["height"]/2
       end
       res
     end

data/lib/c80_map_floors/version.rb

@@ -1,3 +1,3 @@
 module C80MapFloors
-  VERSION = '0.1.0.25'
+  VERSION = '0.2.0.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: c80_map_floors
 version: !ruby/object:Gem::Version
-  version: 0.1.0.25
+  version: 0.2.0.0
 platform: ruby
 authors:
 - C80609A
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-04-12 00:00:00.000000000 Z
+date: 2017-04-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -169,6 +169,7 @@ files:
 - app/controllers/c80_map_floors/application_controller.rb
 - app/controllers/c80_map_floors/map_ajax_controller.rb
 - app/helpers/c80_map_floors/application_helper.rb
+- app/helpers/c80_map_floors/model_floor_helper.rb
 - app/helpers/c80_map_floors/search_gui_helper.rb
 - app/models/c80_map_floors/area.rb
 - app/models/c80_map_floors/area_representator.rb
@@ -220,6 +221,7 @@ files:
 - lib/c80_map_floors/version.rb
 - lib/integer.rb
 - lib/search_result.rb
+- map_padding_tuning.jpg
 homepage: http://www.vorsa-park.ru
 licenses:
 - MIT