c80_map_floors 0.1.0.2 → 0.1.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6acbfc5688ec8e6b14430cc033efc22aecd3367c
-  data.tar.gz: a5e9b23bf22b43fd8ef7c1df5c6d07edad1336a0
+  metadata.gz: caa429ebe88b99d0a303010a2794cae3935e8d30
+  data.tar.gz: 6d2440c4d8a4b1793f3ccc6ae2fde6065460f09a
 SHA512:
-  metadata.gz: df5dd1c8a930be07ac3078171fdb989b149f5fd9d7c7971cd1c2db4460eaccbb21d477fa4594c4efdcc231f721ce9e1c3169bbbf33e4358a8a1ae0effa5adaf8
-  data.tar.gz: 47b31d1c1d37dba45c2eee482da8fce399a9b3018b77e43bd27e8b43c0e21b5309465a97f34c8acbded1d4a147021d131f2bbdc5fa3c7e5d166919310158b216
+  metadata.gz: 59d17da106e56573b4e644b6ac22a65d5cff1376f0d83ef5cbe56342a610c1f07b56544da1911d2ef81f05674fb0947a1a45108213dd26b62903980c7c7003a1
+  data.tar.gz: fa3b4d8e7c6d3cf39e2da4c3c786eefbb4a892dff3235cf7c9eec9827f3c22f7d483c3380a196eceff1bfae19cecf7ce03c8fa948b90ee3e48e3d1e2afee928e

data/app/admin/c80_map_floors/floors.rb

@@ -43,7 +43,7 @@ ActiveAdmin.register C80MapFloors::Floor, as: 'Floor' do
       f.input :title
       f.input :tag
       f.input :ord
-      f.input :coords
+      f.input :coords, :input_html => {:style => 'height:80px'}
       f.input :img_bg, :hint => "#{image_tag(f.object.img_bg.thumb.url)}".html_safe
       # f.input :img_overlay, :hint => "#{image_tag(f.object.img_overlay.thumb.url)}".html_safe
       f.input :map_building,

data/app/admin/c80_map_floors/map_buildings.rb

@@ -38,8 +38,8 @@ ActiveAdmin.register C80MapFloors::MapBuilding, as: 'MapBuilding' do
     f.inputs 'Свойства' do
       f.input :tag
       f.input :title
-      f.input :coords
-      f.input :coords_img
+      f.input :coords, :input_html => {:style => 'height:50px'}
+      f.input :coords_img, :input_html => {:style => 'height:50px'}
       # f.input :img, :hint => "#{image_tag(f.object.img.thumb.url) if f.object.img.present?}".html_safe
     end
 

data/app/assets/javascripts/c80_map_floors.js.coffee

@@ -6,13 +6,15 @@
 #= require bootstrap/dropdown
 #= require bootstrap-select
 
+#= require_tree ./lib
+
 #= require ./svg_elements/helper.js
 #= require ./svg_elements/polygon.js
 #= require ./svg_elements/area_label.js
 #= require ./svg_elements/building_label.js
 
-#= require_directory ./events
-#= require_directory ./map_objects
+#= require_tree ./events
+#= require_tree ./map_objects
 #= require_tree ./view
 #= require_tree ./buttons
 #= require_tree ./ui
@@ -21,4 +23,5 @@
 #= require ./src/utils/opacity_buttons_utils.js
 #= require ./src/utils/map_utils.js
 #= require ./src/state_controller.js
+#= require ./src/image_loader.js
 #= require ./src/main.js

data/app/assets/javascripts/lib/spin.js

@@ -0,0 +1,377 @@
+/**
+ * Copyright (c) 2011-2014 Felix Gnass
+ * Licensed under the MIT license
+ * http://spin.js.org/
+ *
+ * Example:
+    var opts = {
+      lines: 12             // The number of lines to draw
+    , length: 7             // The length of each line
+    , width: 5              // The line thickness
+    , radius: 10            // The radius of the inner circle
+    , scale: 1.0            // Scales overall size of the spinner
+    , corners: 1            // Roundness (0..1)
+    , color: '#000'         // #rgb or #rrggbb
+    , opacity: 1/4          // Opacity of the lines
+    , rotate: 0             // Rotation offset
+    , direction: 1          // 1: clockwise, -1: counterclockwise
+    , speed: 1              // Rounds per second
+    , trail: 100            // Afterglow percentage
+    , fps: 20               // Frames per second when using setTimeout()
+    , zIndex: 2e9           // Use a high z-index by default
+    , className: 'spinner'  // CSS class to assign to the element
+    , top: '50%'            // center vertically
+    , left: '50%'           // center horizontally
+    , shadow: false         // Whether to render a shadow
+    , hwaccel: false        // Whether to use hardware acceleration (might be buggy)
+    , position: 'absolute'  // Element positioning
+    }
+    var target = document.getElementById('foo')
+    var spinner = new Spinner(opts).spin(target)
+ */
+;(function (root, factory) {
+
+  /* CommonJS */
+  if (typeof module == 'object' && module.exports) module.exports = factory()
+
+  /* AMD module */
+  else if (typeof define == 'function' && define.amd) define(factory)
+
+  /* Browser global */
+  else root.Spinner = factory()
+}(this, function () {
+  "use strict"
+
+  var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
+    , animations = {} /* Animation rules keyed by their name */
+    , useCssAnimations /* Whether to use CSS animations or setTimeout */
+    , sheet /* A stylesheet to hold the @keyframe or VML rules. */
+
+  /**
+   * Utility function to create elements. If no tag name is given,
+   * a DIV is created. Optionally properties can be passed.
+   */
+  function createEl (tag, prop) {
+    var el = document.createElement(tag || 'div')
+      , n
+
+    for (n in prop) el[n] = prop[n]
+    return el
+  }
+
+  /**
+   * Appends children and returns the parent.
+   */
+  function ins (parent /* child1, child2, ...*/) {
+    for (var i = 1, n = arguments.length; i < n; i++) {
+      parent.appendChild(arguments[i])
+    }
+
+    return parent
+  }
+
+  /**
+   * Creates an opacity keyframe animation rule and returns its name.
+   * Since most mobile Webkits have timing issues with animation-delay,
+   * we create separate rules for each line/segment.
+   */
+  function addAnimation (alpha, trail, i, lines) {
+    var name = ['opacity', trail, ~~(alpha * 100), i, lines].join('-')
+      , start = 0.01 + i/lines * 100
+      , z = Math.max(1 - (1-alpha) / trail * (100-start), alpha)
+      , prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase()
+      , pre = prefix && '-' + prefix + '-' || ''
+
+    if (!animations[name]) {
+      sheet.insertRule(
+        '@' + pre + 'keyframes ' + name + '{' +
+        '0%{opacity:' + z + '}' +
+        start + '%{opacity:' + alpha + '}' +
+        (start+0.01) + '%{opacity:1}' +
+        (start+trail) % 100 + '%{opacity:' + alpha + '}' +
+        '100%{opacity:' + z + '}' +
+        '}', sheet.cssRules.length)
+
+      animations[name] = 1
+    }
+
+    return name
+  }
+
+  /**
+   * Tries various vendor prefixes and returns the first supported property.
+   */
+  function vendor (el, prop) {
+    var s = el.style
+      , pp
+      , i
+
+    prop = prop.charAt(0).toUpperCase() + prop.slice(1)
+    if (s[prop] !== undefined) return prop
+    for (i = 0; i < prefixes.length; i++) {
+      pp = prefixes[i]+prop
+      if (s[pp] !== undefined) return pp
+    }
+  }
+
+  /**
+   * Sets multiple style properties at once.
+   */
+  function css (el, prop) {
+    for (var n in prop) {
+      el.style[vendor(el, n) || n] = prop[n]
+    }
+
+    return el
+  }
+
+  /**
+   * Fills in default values.
+   */
+  function merge (obj) {
+    for (var i = 1; i < arguments.length; i++) {
+      var def = arguments[i]
+      for (var n in def) {
+        if (obj[n] === undefined) obj[n] = def[n]
+      }
+    }
+    return obj
+  }
+
+  /**
+   * Returns the line color from the given string or array.
+   */
+  function getColor (color, idx) {
+    return typeof color == 'string' ? color : color[idx % color.length]
+  }
+
+  // Built-in defaults
+
+  var defaults = {
+    lines: 12             // The number of lines to draw
+  , length: 7             // The length of each line
+  , width: 5              // The line thickness
+  , radius: 10            // The radius of the inner circle
+  , scale: 1.0            // Scales overall size of the spinner
+  , corners: 1            // Roundness (0..1)
+  , color: '#000'         // #rgb or #rrggbb
+  , opacity: 1/4          // Opacity of the lines
+  , rotate: 0             // Rotation offset
+  , direction: 1          // 1: clockwise, -1: counterclockwise
+  , speed: 1              // Rounds per second
+  , trail: 100            // Afterglow percentage
+  , fps: 20               // Frames per second when using setTimeout()
+  , zIndex: 2e9           // Use a high z-index by default
+  , className: 'spinner'  // CSS class to assign to the element
+  , top: '50%'            // center vertically
+  , left: '50%'           // center horizontally
+  , shadow: false         // Whether to render a shadow
+  , hwaccel: false        // Whether to use hardware acceleration (might be buggy)
+  , position: 'absolute'  // Element positioning
+  }
+
+  /** The constructor */
+  function Spinner (o) {
+    this.opts = merge(o || {}, Spinner.defaults, defaults)
+  }
+
+  // Global defaults that override the built-ins:
+  Spinner.defaults = {}
+
+  merge(Spinner.prototype, {
+    /**
+     * Adds the spinner to the given target element. If this instance is already
+     * spinning, it is automatically removed from its previous target b calling
+     * stop() internally.
+     */
+    spin: function (target) {
+      this.stop()
+
+      var self = this
+        , o = self.opts
+        , el = self.el = createEl(null, {className: o.className})
+
+      css(el, {
+        position: o.position
+      , width: 0
+      , zIndex: o.zIndex
+      , left: o.left
+      , top: o.top
+      })
+
+      if (target) {
+        target.insertBefore(el, target.firstChild || null)
+      }
+
+      el.setAttribute('role', 'progressbar')
+      self.lines(el, self.opts)
+
+      if (!useCssAnimations) {
+        // No CSS animation support, use setTimeout() instead
+        var i = 0
+          , start = (o.lines - 1) * (1 - o.direction) / 2
+          , alpha
+          , fps = o.fps
+          , f = fps / o.speed
+          , ostep = (1 - o.opacity) / (f * o.trail / 100)
+          , astep = f / o.lines
+
+        ;(function anim () {
+          i++
+          for (var j = 0; j < o.lines; j++) {
+            alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity)
+
+            self.opacity(el, j * o.direction + start, alpha, o)
+          }
+          self.timeout = self.el && setTimeout(anim, ~~(1000 / fps))
+        })()
+      }
+      return self
+    }
+
+    /**
+     * Stops and removes the Spinner.
+     */
+  , stop: function () {
+      var el = this.el
+      if (el) {
+        clearTimeout(this.timeout)
+        if (el.parentNode) el.parentNode.removeChild(el)
+        this.el = undefined
+      }
+      return this
+    }
+
+    /**
+     * Internal method that draws the individual lines. Will be overwritten
+     * in VML fallback mode below.
+     */
+  , lines: function (el, o) {
+      var i = 0
+        , start = (o.lines - 1) * (1 - o.direction) / 2
+        , seg
+
+      function fill (color, shadow) {
+        return css(createEl(), {
+          position: 'absolute'
+        , width: o.scale * (o.length + o.width) + 'px'
+        , height: o.scale * o.width + 'px'
+        , background: color
+        , boxShadow: shadow
+        , transformOrigin: 'left'
+        , transform: 'rotate(' + ~~(360/o.lines*i + o.rotate) + 'deg) translate(' + o.scale*o.radius + 'px' + ',0)'
+        , borderRadius: (o.corners * o.scale * o.width >> 1) + 'px'
+        })
+      }
+
+      for (; i < o.lines; i++) {
+        seg = css(createEl(), {
+          position: 'absolute'
+        , top: 1 + ~(o.scale * o.width / 2) + 'px'
+        , transform: o.hwaccel ? 'translate3d(0,0,0)' : ''
+        , opacity: o.opacity
+        , animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1 / o.speed + 's linear infinite'
+        })
+
+        if (o.shadow) ins(seg, css(fill('#000', '0 0 4px #000'), {top: '2px'}))
+        ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)')))
+      }
+      return el
+    }
+
+    /**
+     * Internal method that adjusts the opacity of a single line.
+     * Will be overwritten in VML fallback mode below.
+     */
+  , opacity: function (el, i, val) {
+      if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
+    }
+
+  })
+
+
+  function initVML () {
+
+    /* Utility function to create a VML tag */
+    function vml (tag, attr) {
+      return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
+    }
+
+    // No CSS transforms but VML support, add a CSS rule for VML elements:
+    sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
+
+    Spinner.prototype.lines = function (el, o) {
+      var r = o.scale * (o.length + o.width)
+        , s = o.scale * 2 * r
+
+      function grp () {
+        return css(
+          vml('group', {
+            coordsize: s + ' ' + s
+          , coordorigin: -r + ' ' + -r
+          })
+        , { width: s, height: s }
+        )
+      }
+
+      var margin = -(o.width + o.length) * o.scale * 2 + 'px'
+        , g = css(grp(), {position: 'absolute', top: margin, left: margin})
+        , i
+
+      function seg (i, dx, filter) {
+        ins(
+          g
+        , ins(
+            css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx})
+          , ins(
+              css(
+                vml('roundrect', {arcsize: o.corners})
+              , { width: r
+                , height: o.scale * o.width
+                , left: o.scale * o.radius
+                , top: -o.scale * o.width >> 1
+                , filter: filter
+                }
+              )
+            , vml('fill', {color: getColor(o.color, i), opacity: o.opacity})
+            , vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
+            )
+          )
+        )
+      }
+
+      if (o.shadow)
+        for (i = 1; i <= o.lines; i++) {
+          seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
+        }
+
+      for (i = 1; i <= o.lines; i++) seg(i)
+      return ins(el, g)
+    }
+
+    Spinner.prototype.opacity = function (el, i, val, o) {
+      var c = el.firstChild
+      o = o.shadow && o.lines || 0
+      if (c && i + o < c.childNodes.length) {
+        c = c.childNodes[i + o]; c = c && c.firstChild; c = c && c.firstChild
+        if (c) c.opacity = val
+      }
+    }
+  }
+
+  if (typeof document !== 'undefined') {
+    sheet = (function () {
+      var el = createEl('style', {type : 'text/css'})
+      ins(document.getElementsByTagName('head')[0], el)
+      return el.sheet || el.styleSheet
+    }())
+
+    var probe = css(createEl('group'), {behavior: 'url(#default#VML)'})
+
+    if (!vendor(probe, 'transform') && probe.adj) initVML()
+    else useCssAnimations = vendor(probe, 'animation')
+  }
+
+  return Spinner
+
+}));

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

@@ -21,7 +21,7 @@ function Building() {
     var _cx = null;
     var _cy = null;
 
-    var _image_bg = null;
+    var _$image_bg = null;
     var _image_overlay = null;
 
     var _zoomToMe = function () {
@@ -33,31 +33,7 @@ function Building() {
         //console.log("<Building.enter> scaleX = " + scaleX + ", scaleY = " + scaleY);
 
         var scale = (scaleX < scaleY) ? scaleX : scaleY;
-        //var selfX = _map.calcCoord(scale, _map.X1, _bbox.xmin);
-        //var selfY = _map.calcCoord(scale, _map.Y1, _bbox.ymin);
-
-        //_map.scale = scale;
-        //_map.x = selfX;
-        //_map.y = selfY;
-
-        /* по-отдельности */
-
-        //var scaleX = _map.calcScale(_bbox.xmin, _bbox.xmax, _map.X1, _map.X2);
-        //console.log("<Building.enter> scaleX = " + scaleX);
-        //var selfX = _map.calcCoord(scaleX, _map.X1, _bbox.xmin);
-        //_map.scale = scaleX;
-        //_map.x = selfX;
-
-        //var scaleY = _map.calcScale(_bbox.ymin, _bbox.ymax, _map.Y1, _map.Y2);
-        //console.log("<Building.enter> scaleY = " + scaleY);
-        //var selfY = _map.calcCoord(scaleY, _map.Y1, _bbox.ymin);
-        //_map.scale = scaleY;
-        //_map.y = selfY;
-
-        // совмещаем точку на экране, в которую надо центрировать дома, с центром дома с учётом рассчитанного масштаба
-        // или, другими словами, перегоняем логические координаты в систему координат экрана
-        //_map.x = _map.normalizeX(_map.CX - scale * _cx - _map.container.offset().left);
-        //_map.y = _map.normalizeY(_map.CY - scale * _cy - _map.container.offset().top);
+        scale = _map.normalizeScale(scale);
 
         var x = _map.normalizeX({
             x: _map.CX - scale * _cx - _map.container.offset().left,
@@ -126,13 +102,11 @@ function Building() {
                 yy2 = parseInt(tmp2[1]);
             }
 
-            // сначала попросим карту очистить слой с img_bg картинками
-            _map.clear_all_map_object_image_bg();
+            // пока не загрузили картинку этажа - не будем удалять отображённые картинки этажей, отметим их "для удаления"
+            _map.mark_all_map_object_images_for_clean();
 
             // просим карту нарисовать картинку с данными характеристиками
-            _image_bg = _map.draw_map_object_image_bg(the_floor["img_bg"]["url"], {
-                //x: _bbox.xmin,
-                //y: _bbox.ymin,
+            _$image_bg = _map.draw_map_object_image_bg(the_floor["img_bg"]["url"], {
                 x: xx + xx2,
                 y: yy + yy2,
                 width: the_floor["img_bg_width"],
@@ -214,7 +188,7 @@ function Building() {
 
         _zoomToMe();
 
-        //setTimeout(function () {
+        setTimeout(function () {
 
             // попросим изменить состояние окружающей среды
             _map.setMode('view_building');
@@ -222,16 +196,16 @@ function Building() {
             // запустим внутренний механизм парсинга этажей и их отрисовки
             _proccess_floors_data();
 
-        //}, 400);
+            _map.building_info_klass.setSelectedFloor(0);
 
+        }, 400);
+
+        // при входе в здание удаляем все кликабельные полигоны зданий
         _map.svgRemoveAllNodes();
 
         //console.log("<Building.enter> id: " + _this.id);
         _map.mark_virgin = false;
 
-        //
-        _map.building_info_klass.setSelectedFloor(0);
-
     };
 
     /**
@@ -249,14 +223,14 @@ function Building() {
         }
 
 
-    }
+    };
 
     _this.exit = function () {
-        if (_image_bg != null) _image_bg.remove();
+        if (_$image_bg != null) _$image_bg.remove();
         if (_image_overlay != null) {
             _image_overlay.remove();
         }
-        _image_bg = null;
+        _$image_bg = null;
         _image_overlay = null;
         //_zoomToMe();
     };

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

@@ -0,0 +1,116 @@
+"use strict";
+
+function ImageLoader() {
+
+    var _this = this;
+
+    //--[ private ]----------------------------------------------------------------------------------------------------------------------
+
+    /** Показать прелоадер в диве $target.
+     *
+     * @param $target
+     * @param params    {x,y,width,height} - габариты и местонах. прелоадера
+     * @private
+     */
+    _this._preloader_show = function ($target, params) {
+
+        var left = params["x"];
+        var top = params["y"];
+        var width = params["width"];
+        var height = params["height"];
+
+        var $a = $('<div class="anim"></div>');
+
+        var $d = $('<div></div>')
+            .css('top', top)
+            .css('left', left)
+            .css('width', width)
+            .css('height', height)
+            .append('<span class="helper"></span>')
+            .append($a)
+            .addClass('image_loader_preloader')
+            .appendTo($target);
+
+        var spinner = new Spinner().spin();
+        $a[0].appendChild(spinner.el);
+
+        $d.addClass('shown');
+
+    };
+
+    _this._preloader_hide = function ($target) {
+        var $ilp = $target.find('.image_loader_preloader');
+        $ilp.removeClass('shown');
+        setTimeout(function () {
+            $ilp.remove();
+        }, 400);
+    };
+
+    //--[ public ]----------------------------------------------------------------------------------------------------------------------
+
+    /** Загрузить картинку и отобразить её в options["$target"].
+     *  Процесс оснастить прелоадером.
+     *  Показать картинку плавно.
+     *
+     * @param img_src   урл картинки
+     * @param options   { $target, params }, где:
+     *        - $target: див, к которому надо прикрепить картинку
+     *        - params: {x,y,width,height} - габариты и местонах. картинки
+     */
+    _this.load = function (img_src, options) {
+
+        console.log('<ImageLoader.load> ' + img_src);
+
+        // покажем прелоадер
+        _this._preloader_show(options["$target"], options["params"]);
+
+        // создадим картинку
+        var img = new Image();
+        var $img = $(img);
+
+        // настроим картинку
+        $img.data('top', options['params']['y'])
+            .data('left', options['params']['x'])
+            .data('width', options['params']['width'])
+            .data('height', options['params']['height'])
+            .addClass('map_object_image_bg'); /* этот класс используем при [zoomove]*/
+
+        img.onload = function () {
+
+            // NOTE:: разделим вставку в DOM и отображение: в mozilla картинка отображается постепенно прорисовываясь сверху вниз, некрасиво
+
+            $img.appendTo(options["$target"]);
+
+            setTimeout(function () {
+
+                // спрячем прелоадер
+                _this._preloader_hide(options["$target"]);
+
+                // сделаем картинку видимой
+                $img.addClass('shown');
+
+                // вызовем колбэк
+                if (options['on_load'] != undefined) {
+                    options['on_load']( $img );
+                }
+
+            }, 300);
+
+        };
+
+        // отобразим картинку
+        img.src = img_src;
+
+        return $img;
+
+    };
+
+    //--[ run ]----------------------------------------------------------------------------------------------------------------------
+
+    var _fInit = function () {
+
+    };
+
+    _fInit();
+
+}

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

@@ -89,7 +89,7 @@ var clog = function () {
         self.drawn_buildings = []; // если имеются нарисованные но несохранённые Здания - они хранятся тут
         self.save_preloader_klass = null;
         self.last_clicked_g = null; // начали просматривать area\building (запустили сессию), и здесь храним ссылку на последний кликнутый полигон из svg_overlay в течение сессии
-        self.dnd_enable = null; // если да, то можно карту dnd мышкой
+        //self.o.dnd_enable = null; // если да, то можно карту dnd мышкой
         self.building_info_klass = null; // класс, занимающися отображением данных об этаже\здании\площади
 
         // во время анимации каждый шаг рассчитывается мгновенный scale
@@ -106,7 +106,13 @@ var clog = function () {
         // чтобы вернуть карту в исходное состояние после нажатия кнопки "назад на карту"
         self.initial_map_position = null;
 
+        // грузит и отображает картинки заранее известного размера (WxH px), показывает прелоадер
+        self._imageLoader = null;
+
         self.init = function (el, params) {
+
+            console.log('<Map.init>');
+
             // extend options
             self.o = $.extend(self.o, params);
 
@@ -219,6 +225,8 @@ var clog = function () {
             sc.init(self);
             self.setMode = sc.setMode;
 
+            self._imageLoader = new ImageLoader();
+
             // Admin buttons
             $.ajax({
                 url: '/ajax/map_edit_buttons',
@@ -442,7 +450,7 @@ var clog = function () {
             // Drag & drop
             function onDragNdrop(event) {
                 //clog("<mousedown> edit_type = " + self.edit_type);
-                clog("<mousedown> mode = " + self.mode);
+                console.log("<mousedown> mode = " + self.mode + " dnd_enable = " + self.o.dnd_enable);
                 //clog(event);
 
                 // если в данный момент не редактируем фигуру (т.е. не двигаем вершину фигуры)
@@ -462,7 +470,7 @@ var clog = function () {
                     self.map.on('mousemove', function (event) {
                         self.dragging = true;
 
-                        if (self.dnd_enable) {
+                        if (self.o.dnd_enable) { // NOTE:: добавить возможность делать dnd находясь в режиме рисования (админа?)
                             var x = event.pageX - map.data('mouseX') + self.x;
                             var y = event.pageY - map.data('mouseY') + self.y;
 
@@ -835,44 +843,45 @@ var clog = function () {
          *      <div class='map_object_image_bg'>        // style='background-image:url(#{img_src});'
          *          <img src=#{img_src} />
          *      </div>
-         *  и помещает его map_layers
+         *  и помещает его в map_layers
          *
          *  left и top - координаты bound box верхнего левого угла здания
          *
+         *  В новой версии используем предварительную загрузку картинки,
+         *  и показ прелоадера во время загрузки. Когда картинка загрузится,
+         *  она будет отображена на экране.
          */
         self.draw_map_object_image_bg = function (img_src, params) {
-            //console.log('<draw_map_object_image_bg>');
 
             // породим DOM
             var $div_map_object_image_bg = $('<div></div>')
                 .addClass('mlayer')
-                //.attr('style','background-image:url("'+img_src+'")')
-                .appendTo(self.map_layers); // .hide()
+                .appendTo(self.map_layers);
 
-            // сохраним начальные параметры в data
-            var left = params["x"];
-            var top = params["y"];
-            var width = params["width"];
-            var height = params["height"];
-
-            var $img = $('<img>')
-                .data('top', top)
-                .data('left', left)
-                .data('width', width)
-                .data('height', height)
-                .attr('src', img_src)
-                .addClass('map_object_image_bg') /* этот класс используем при [zoomove]*/
-                .appendTo($div_map_object_image_bg);
+            // загрузим в него картинку
+            return self._imageLoader.load(img_src, {
+                $target:   $div_map_object_image_bg,
+                 params:   params,
+                on_load:   self._draw_map_object_image_bg_onload
+            });
 
-            // рассчитаем позиционирующий стиль и применим его к созданной оверлейной картинке
-            self.__compose_css_style_for_map_object_image($img);
+        };
 
-            return $div_map_object_image_bg;
+        self._draw_map_object_image_bg_onload = function ($image) {
+            self.clear_all_map_object_image_bg();
+            self.__compose_css_style_for_map_object_image($image); // рассчитаем позиционирующий стиль и применим его к созданной оверлейной картинке
+        };
 
+        self.mark_all_map_object_images_for_clean = function () {
+            $('.map_object_image_bg').addClass('for_clean');
         };
 
         self.clear_all_map_object_image_bg = function () {
-            $('.map_object_image_bg').parent().remove();
+            var $cc = $('.map_object_image_bg.for_clean');
+            $cc.removeClass('shown');
+            setTimeout(function () {
+                $cc.parent().remove();
+            },400);
         };
 
         /**
@@ -897,6 +906,8 @@ var clog = function () {
             var width = $i.data("width")*self.scale_during_animation;
             var height = $i.data("height")*self.scale_during_animation;
 
+            console.log('<__compose_css_style_for_map_object_image>');
+
             // впишем в DOM стили
             var style = 'top:';
             style += top + 'px;';

data/app/assets/stylesheets/view/elems/map_objects/map_object_image_bg.scss

@@ -7,4 +7,17 @@ img.map_object_image_bg {
   -ms-user-select: none;
   user-select: none;
   width: auto;
+
+  opacity: 0;
+
+  transition: opacity 0.4s ease-in-out;
+  -webkit-transition: opacity 0.4s ease-in-out;
+  -moz-transition: opacity 0.4s ease-in-out;
+  -ms-transition: opacity 0.4s ease-in-out;
+  -o-transition: opacity 0.4s ease-in-out;  
+  
+  &.shown {
+    opacity: 1;
+  }
+
 }

data/app/assets/stylesheets/view/image_loader_preloader.scss

@@ -0,0 +1,48 @@
+div.image_loader_preloader {
+  position: absolute;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: auto;
+
+  /*background-color: rgba(0, 0, 0, .01);*/
+  /*display: none;*/
+  opacity: 0;
+
+  transition: all 0.4s ease-in-out;
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
+  -ms-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+
+  text-align: center;         /*!*/
+  white-space: nowrap;        /*!*/
+
+  span.helper {
+    display: inline-block;      /*!*/
+    vertical-align: middle;     /*!*/
+    height: 100%;               /*!*/
+  }
+
+  .anim {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;     /*!*/
+    display: inline-block;
+
+    /*background-color: rgba(0, 0, 0, .1);*/
+
+  }
+
+
+  &.shown {
+    /*background-color: rgba(0, 0, 0, .4);*/
+    opacity: 1;
+  }
+
+}

data/app/models/c80_map_floors/base_map_object.rb

@@ -16,7 +16,8 @@ module C80MapFloors
           # has_many :map_buildings, :as => :building_representator, :class_name => 'C80MapFloors::MapBuilding', :dependent => :destroy
           after_save :update_json
           # after_destroy :update_json
-          validates :coords, uniqueness: true
+          # validates :coords, uniqueness: true
+          validates_uniqueness_of :coords, :allow_nil => true, :allow_blank => true
 
           def update_json
             MapJson.update_json

data/app/models/c80_map_floors/map_building.rb

@@ -1,4 +1,5 @@
 require 'c80_map_floors/base_map_object'
+require 'integer'
 
 module C80MapFloors
   class MapBuilding < ActiveRecord::Base
@@ -7,6 +8,9 @@ module C80MapFloors
     belongs_to :building_representator, :polymorphic => true
     # validates :coords, uniqueness: true
     # after_save :update_json
+
+    after_create :calc_coords_img
+
     acts_as_base_map_object
 
     mount_uploader :img, C80MapFloors::BuildingImageUploader
@@ -35,6 +39,48 @@ module C80MapFloors
             }.merge(options || {} ))
     end
 
+    def calc_coords_img
+
+      cs = self.coords.split(',') # 511,71,511,71,497,88,497,110,865,196,865,172,876,155
+
+      #-> Рассчитаем весь bounding box, но вернём только верхний левый угол
+
+      xmin = Integer::MAX.to_f
+      ymin = Integer::MAX.to_f
+      xmax = Integer::MIN.to_f
+      ymax = Integer::MIN.to_f
+
+      (0..cs.count-1).step(2) do |i|
+
+        ix = cs[i].to_f
+        iy = cs[i+1].to_f
+
+        # Rails.logger.debug "[TRACE] <map_building.calc> #{ix}, #{iy}"
+
+        xmin = ix < xmin ? ix : xmin
+        ymin = iy < ymin ? iy : ymin
+        
+        xmax = ix > xmax ? ix : xmax
+        ymax = iy > ymax ? iy : ymax
+
+      end
+
+      # bbox = {
+      #     xmin: xmin,
+      #     ymin: ymin,
+      #     xmax: xmax,
+      #     ymax: ymax
+      # }
+
+      str = [
+          '%.01f' % xmin,
+          '%.01f' % ymin
+      ].join(',')
+
+      self.update_column(:coords_img, str)
+
+    end
+
     # private
 
     # def update_json

data/lib/c80_map_floors/version.rb

@@ -1,3 +1,3 @@
 module C80MapFloors
-  VERSION = "0.1.0.2"
+  VERSION = '0.1.0.3'
 end

data/lib/integer.rb

@@ -0,0 +1,6 @@
+class Integer
+  N_BYTES = [42].pack('i').size
+  N_BITS = N_BYTES * 16
+  MAX = 2 ** (N_BITS - 2) - 1
+  MIN = -MAX - 1
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: c80_map_floors
 version: !ruby/object:Gem::Version
-  version: 0.1.0.2
+  version: 0.1.0.3
 platform: ruby
 authors:
 - C80609A
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-10-26 00:00:00.000000000 Z
+date: 2016-11-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -124,10 +124,12 @@ files:
 - app/assets/javascripts/buttons/zoom_buttons.js
 - app/assets/javascripts/c80_map_floors.js.coffee
 - app/assets/javascripts/events/app_event.js
+- app/assets/javascripts/lib/spin.js
 - app/assets/javascripts/map_objects/area.js
 - app/assets/javascripts/map_objects/building.js
 - app/assets/javascripts/map_objects/dot.js
 - app/assets/javascripts/map_objects/floor.js
+- app/assets/javascripts/src/image_loader.js
 - app/assets/javascripts/src/main.js
 - app/assets/javascripts/src/state_controller.js
 - app/assets/javascripts/src/utils/map_utils.js
@@ -147,6 +149,7 @@ files:
 - app/assets/stylesheets/view/elems/building_info.scss
 - app/assets/stylesheets/view/elems/free_areas_label.scss
 - app/assets/stylesheets/view/elems/map_objects/map_object_image_bg.scss
+- app/assets/stylesheets/view/image_loader_preloader.scss
 - app/assets/stylesheets/view/modal_window.scss
 - app/assets/stylesheets/view/save_preloader.scss
 - app/controllers/c80_map_floors/ajax_controller.rb
@@ -194,6 +197,7 @@ files:
 - lib/c80_map_floors.rb
 - lib/c80_map_floors/engine.rb
 - lib/c80_map_floors/version.rb
+- lib/integer.rb
 homepage: http://www.vorsa-park.ru
 licenses:
 - MIT