c80_map 0.1.0

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

@@ -0,0 +1,220 @@
+"use strict";
+
+function StateController() {
+
+    var _map = null;
+    var _this = this;
+
+    _this.left_side = $("#left_side");
+    _this.right_side = $("#right_side");
+    _this.new_button = $('.mapplic-new-button');
+    _this.mzoom_buttons = $('.mzoom_buttons');
+    _this.map_creating = $('#map_creating');
+    _this.map_editing = $('#map_editing');
+    _this.main_map = $('.main_map');
+    _this.svg_overlay = $('#svg_overlay');
+    _this.building_info = $('.building_info');
+    _this.area_order_button = $('.area_order_button');
+    _this.masked = $('#masked');
+
+    _this.setMode = function (mode) {
+
+        // Должен быть учёт, из какого состояния пришли в состояние рисования, и возвращаться в него
+        //      * При рисовании, находясь внутри здания, возвращаться в 'edit_building'
+        //      * При рисовании, находясь внутри площади, возвращаться в 'edit_area'
+        // За исключением ситуации, когда начали редактировать, находясь на карте
+        if (mode == 'editing' && _map.prev_mode != 'viewing') {
+            mode = _map.prev_mode;
+        }
+
+        clog('<StateController.setMode> mode = ' + mode);
+
+        _map.prev_mode = _map.mode;
+        _map.mode = mode;
+
+        // этот код коррелирует с [x9cs7]. Возможно, нужен рефакторинг.
+        _map.container.removeClass("viewing");
+        _map.container.removeClass("editing");
+        _map.container.removeClass("creating");
+        _map.container.removeClass("view_building");
+        _map.container.removeClass("edit_building");
+        _map.container.removeClass("view_area");
+        _map.container.removeClass("edit_area");
+        _map.container.addClass(mode);
+
+        _this.checkMode();
+    };
+
+    _this.checkMode = function () {
+
+        if (_this.new_button.length == 0) _this.new_button = $('.mapplic-new-button');
+        if (_this.right_side.length == 0) _this.right_side = $('#right_side');
+        if (_this.left_side.length == 0) _this.left_side = $('#left_side');
+        if (_this.mzoom_buttons.length == 0) _this.mzoom_buttons = $('.mzoom_buttons');
+        if (_this.map_creating.length == 0) _this.map_creating = $('#map_creating');
+        if (_this.map_editing.length == 0) _this.map_editing = $('#map_editing');
+        if (_this.main_map.length == 0) _this.main_map = $('.main_map');
+        if (_this.svg_overlay.length == 0) _this.svg_overlay = $('#svg_overlay');
+        if (_this.building_info.length == 0) _this.building_info = $('.building_info');
+        if (_this.area_order_button.length == 0) _this.area_order_button = $('.area_order_button');
+        if (_this.masked.length == 0) _this.masked = $("#masked");
+
+        switch (_map.mode) {
+
+            // перешли в состояние
+            // редактирования карты
+            case "editing":
+
+                // спрячем надписи "цена за метр" и адрес с телефоном
+                _this.left_side.css("top", -300);
+                _this.right_side.css("top", -300);
+
+                // покажем кнопку "добавить фигуру"
+                _this.new_button.css('opacity', '1');
+                _this.new_button.removeClass('mapplic-disabled');
+                _map.new_button_klass.resetState();
+
+                // спрячем статусную область
+                _this.map_creating.css('display', 'none');
+                _this.map_editing.css('display', 'block');
+
+                // покажем кнопки, присущие этому режиму
+                _this.mzoom_buttons.css('opacity', '1');
+
+                _this.main_map.css('opacity', '1');
+
+                _map.save_button_klass.show();
+                _map.save_button_klass.check_and_enable();
+
+                break;
+
+            // перешли в состояние
+            // просмотра карты, все здания с крышами
+            case "viewing":
+                //clog("_this.left_side.data('init') = " + _this.left_side.data('init'));
+
+                // покажем надписи "цена за метр" и адрес с телефоном
+                if (_this.left_side.data('init') == undefined) {
+                    _this.left_side.data('init', _this.left_side.css("top"));
+                }
+                if (_this.right_side.data('init') == undefined) {
+                    _this.right_side.data('init', _this.right_side.css("top"));
+                }
+                _this.left_side.css("top", _this.left_side.data('init'));
+                _this.right_side.css("top", _this.right_side.data('init'));
+
+                _this.new_button.css('opacity', '0');
+                _this.new_button.addClass('mapplic-disabled');
+                _this.mzoom_buttons.css('opacity', '1');
+
+                _this.map_creating.css('display', 'none');
+                _this.map_editing.css('display', 'none');
+
+                _this.main_map.css('opacity', '1');
+                _this.svg_overlay.css('display', 'none');
+
+                if (_this.building_info.data("init") == undefined) {
+                    _this.building_info.data('init', _this.building_info.css("top"));
+                }
+                _this.building_info.css("top", -300);
+                _this.building_info.css("display", "block");
+
+                _map.back_to_map_button_klass.hide();
+                _this.masked.addClass('hiddn');
+
+                _this.area_order_button.css('display', 'none');
+
+                // актуально, когда входим в это состояние
+                // из здания\площади, нажав кнопку "обратно на карту"
+                _map.edit_button_klass.setState('viewing', true); // [a1x7]
+
+                if (_map.save_button_klass) {
+                    _map.save_button_klass.hide();
+                }
+
+                break;
+
+            // перешли в состояние рисования полигона
+            case "creating":
+                //_this.mzoom_buttons.css('opacity', '0');
+                _this.map_creating.css('display', 'block');
+                _this.map_editing.css('display', 'none');
+
+                _this.main_map.css('opacity', '1');
+
+                break;
+
+            // вошли в здание
+            case "view_building":
+                // спрячем надписи "цена за метр" и адрес с телефоном
+                _this.left_side.css("top", -300);
+                _this.right_side.css("top", -300);
+
+                //_this.main_map.css('opacity','0.7');
+                _this.svg_overlay.css('display', 'block');
+
+                _this.building_info.css("top", _this.building_info.data("init"));
+                _map.back_to_map_button_klass.show();
+                _this.masked.addClass('hiddn');
+
+                _this.area_order_button.css('display', 'none');
+                _map.edit_button_klass.setState('view_building', true); // [a1x7]
+                _map.current_building.resetOverlayZindex();
+                _map.save_button_klass.hide();
+
+                break;
+
+            // вошли в площадь
+            case "view_area":
+                _map.back_to_map_button_klass.show();
+                _this.masked.removeClass('hiddn');
+                var t = _this.building_info.height() + _this.building_info.offset().top;
+                var tt = _this.building_info.css("left");
+                var tq = (_this.building_info.width() + 40) + "px";
+                _this.area_order_button.css("top", t + "px");
+                // _this.area_order_button.css("bottom","400px");
+                _this.area_order_button.css("left", tt);
+                _this.area_order_button.css("width", tq);
+                _this.area_order_button.css('display', 'block');
+                _map.edit_button_klass.setState('view_area', true); // [a1x7]
+            break;
+
+            // редактируем, находясь в здании
+            case "edit_building":
+                _map.back_to_map_button_klass.hide();
+
+                // т.к. этот слой используется испключительно в помощь при рисовании обводки площадей
+                // и перехватывает клики при dnd, то тут он нам не нужен
+                _this.svg_overlay.css('display', 'none');
+
+                // заодно поменяем z-index слоёв с колоннами и слоя с svg
+                // полигонами площадей, чтобы можно было добраться мышкой
+                // до этих полигонов и редактировать их
+                _map.current_building.changeOverlayZindex();
+
+                // покажем кнопку "добавить фигуру"
+                _this.new_button.css('opacity', '1');
+                _this.new_button.removeClass('mapplic-disabled');
+                _map.new_button_klass.resetState();
+
+                // спрячем инфу о здании
+                _this.building_info.css("top", -300);
+
+                // спрячем статус строку "вы создаёте полигон"
+                _this.map_creating.css('display', 'none');
+
+                // покажем, возможно спрятанные, zoom кнопки
+                _this.mzoom_buttons.css('opacity', '1');
+
+                _map.save_button_klass.show();
+                _map.save_button_klass.check_and_enable();
+
+            break;
+        }
+    };
+
+    _this.init = function (link_to_map) {
+        _map = link_to_map;
+    }
+    
+}

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

@@ -0,0 +1,127 @@
+
+var utils = {
+
+    offsetX: function (node) {
+        var box = node.getBoundingClientRect(),
+            scroll = window.pageXOffset;
+
+        return Math.round(box.left + scroll);
+    },
+    offsetY: function (node) {
+        var box = node.getBoundingClientRect(),
+            scroll = window.pageYOffset;
+
+        return Math.round(box.top + scroll);
+    },
+
+    trim: function (str) {
+        return str.replace(/^\s+|\s+$/g, '');
+    },
+    id: function (str) {
+        return document.getElementById(str);
+    },
+    hide: function (node) {
+        node.style.display = 'none';
+
+        return this;
+    },
+    show: function (node) {
+        node.style.display = 'block';
+
+        return this;
+    },
+    encode: function (str) {
+        return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    },
+    decode: function (str) {
+        return str.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
+    },
+    foreach: function (arr, func) {
+        for (var i = 0, count = arr.length; i < count; i++) {
+            func(arr[i], i);
+        }
+    },
+    foreachReverse: function (arr, func) {
+        for (var i = arr.length - 1; i >= 0; i--) {
+            func(arr[i], i);
+        }
+    },
+    debug: (function () {
+        var output = document.getElementById('debug');
+        return function () {
+            output.innerHTML = [].join.call(arguments, ' ');
+        }
+    })(),
+    stopEvent: function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        return this;
+    },
+    addClass: function (node, str) {
+        // node.className.baseVal for SVG-elements
+        // or
+        // node.className for HTML-elements
+        var is_svg = node.className.baseVal !== undefined ? true : false,
+            arr = is_svg ? node.className.baseVal.split(' ') : node.className.split(' '),
+            isset = false;
+
+        utils.foreach(arr, function (x) {
+            if (x === str) {
+                isset = true;
+            }
+        });
+
+        if (!isset) {
+            arr.push(str);
+            is_svg ? node.className.baseVal = arr.join(' ') : node.className = arr.join(' ');
+        }
+
+        return this;
+    },
+    removeClass: function (node, str) {
+        var is_svg = node.className.baseVal !== undefined ? true : false,
+            arr = is_svg ? node.className.baseVal.split(' ') : node.className.split(' '),
+            isset = false;
+
+        utils.foreach(arr, function (x, i) {
+            if (x === str) {
+                isset = true;
+                arr.splice(i--, 1);
+            }
+        });
+
+        if (isset) {
+            is_svg ? node.className.baseVal = arr.join(' ') : node.className = arr.join(' ');
+        }
+
+        return this;
+    },
+    hasClass: function (node, str) {
+        var is_svg = node.className.baseVal !== undefined ? true : false,
+            arr = is_svg ? node.className.baseVal.split(' ') : node.className.split(' '),
+            isset = false;
+
+        utils.foreach(arr, function (x) {
+            if (x === str) {
+                isset = true;
+            }
+        });
+
+        return isset;
+    },
+    extend: function (obj, options) {
+        var target = {};
+
+        for (var name in obj) {
+            if (obj.hasOwnProperty(name)) {
+                target[name] = options[name] ? options[name] : obj[name];
+            }
+        }
+
+        return target;
+    },
+    supportFileReader: (function () {
+        return (typeof FileReader !== 'undefined');
+    })()
+};

data/app/assets/javascripts/svg_elements/helper.js

@@ -0,0 +1,36 @@
+
+/* Helper constructor */
+function Helper(node, x, y) {
+    this.helper = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    this.helper.setAttribute('class', 'helper');
+    this.helper.setAttribute('height', 5);
+    this.helper.setAttribute('width', 5);
+    this.helper.setAttribute('x', x - 3);
+    this.helper.setAttribute('y', y - 3);
+    node.appendChild(this.helper);
+}
+
+Helper.prototype.setCoords = function (x, y) {
+    this.helper.setAttribute('x', x - 3);
+    this.helper.setAttribute('y', y - 3);
+
+    return this;
+};
+
+Helper.prototype.setAction = function (action) {
+    this.helper.action = action;
+
+    return this;
+};
+
+Helper.prototype.setCursor = function (cursor) {
+    utils.addClass(this.helper, cursor);
+
+    return this;
+};
+
+Helper.prototype.setId = function (id) {
+    this.helper.n = id;
+
+    return this;
+};

data/app/assets/javascripts/svg_elements/polygon.js

@@ -0,0 +1,192 @@
+/* Polygon constructor */
+var Polygon = function (x, y, is_overlay, self) {
+
+    this._map = self;
+    this._map.is_draw = true;
+
+    this.params = [x, y]; //array of coordinates of polygon points
+
+    this.g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    this.polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+    this._map.addNodeToSvg(this.g, is_overlay);
+    this.g.appendChild(this.polygon);
+
+    this.g.obj = this;
+    /* Link to parent object */
+
+    this.helpers = [ //array of all helpers-rectangles
+        new Helper(this.g, this.params[0], this.params[1])
+    ];
+
+    this.helpers[0].setAction('pointMove').setCursor('pointer').setId(0);
+
+    this.selected_point = -1;
+
+    this.select().redraw();
+
+    // app.addObject(this); //add this object to array of all objects
+};
+
+Polygon.prototype.setCoords = function (params) {
+    //console.log(params);
+    var coords_values = params.join(' ');
+    this.polygon.setAttribute('points', coords_values);
+    utils.foreach(this.helpers, function (x, i) {
+        x.setCoords(params[2 * i], params[2 * i + 1]);
+    });
+
+    return this;
+};
+
+Polygon.prototype.setParams = function (arr) {
+    this.params = Array.prototype.slice.call(arr);
+
+    return this;
+};
+
+Polygon.prototype.addPoint = function (x, y) {
+    var helper = new Helper(this.g, x, y);
+    helper.setAction('pointMove').setCursor('pointer').setId(this.helpers.length);
+    this.helpers.push(helper);
+    this.params.push(x, y);
+    this.redraw();
+
+    return this;
+};
+
+Polygon.prototype.redraw = function () {
+    this.setCoords(this.params);
+
+    return this;
+};
+
+Polygon.prototype.right_angle = function (x, y) {
+    var old_x = this.params[this.params.length - 2],
+        old_y = this.params[this.params.length - 1],
+        dx = x - old_x,
+        dy = -(y - old_y),
+        tan = dy / dx; //tangens
+
+    if (dx > 0 && dy > 0) {
+        if (tan > 2.414) {
+            x = old_x;
+        } else if (tan < 0.414) {
+            y = old_y;
+        } else {
+            Math.abs(dx) > Math.abs(dy) ? x = old_x + dy : y = old_y - dx;
+        }
+    } else if (dx < 0 && dy > 0) {
+        if (tan < -2.414) {
+            x = old_x;
+        } else if (tan > -0.414) {
+            y = old_y;
+        } else {
+            Math.abs(dx) > Math.abs(dy) ? x = old_x - dy : y = old_y + dx;
+        }
+    } else if (dx < 0 && dy < 0) {
+        if (tan > 2.414) {
+            x = old_x;
+        } else if (tan < 0.414) {
+            y = old_y;
+        } else {
+            Math.abs(dx) > Math.abs(dy) ? x = old_x + dy : y = old_y - dx;
+        }
+    } else if (dx > 0 && dy < 0) {
+        if (tan < -2.414) {
+            x = old_x;
+        } else if (tan > -0.414) {
+            y = old_y;
+        } else {
+            Math.abs(dx) > Math.abs(dy) ? x = old_x - dy : y = old_y + dx;
+        }
+    }
+
+    return {
+        x: x,
+        y: y
+    };
+};
+
+Polygon.prototype.dynamicDraw = function (x, y, right_angle) {
+    var temp_params = [].concat(this.params);
+
+    if (right_angle) {
+        var right_coords = this.right_angle(x, y);
+        x = right_coords.x;
+        y = right_coords.y;
+    }
+
+    temp_params.push(x, y);
+
+    this.setCoords(temp_params);
+
+    return temp_params;
+};
+
+Polygon.prototype.move = function (x, y) { //offset x and y
+    var temp_params = Object.create(this.params);
+
+    for (var i = 0, count = this.params.length; i < count; i++) {
+        //i % 2 ? this.params[i] += y : this.params[i] += x;
+        if (i % 2) {
+            this.params[i] = Number(this.params[i]) + y;
+        } else {
+            this.params[i] = Number(this.params[i]) + x;
+        }
+    }
+
+    return temp_params;
+};
+
+Polygon.prototype.pointMove = function (x, y) { //offset x and y
+    this.params[2 * this.selected_point] += x;
+    this.params[2 * this.selected_point + 1] += y;
+
+    return this.params;
+};
+
+Polygon.prototype.dynamicEdit = function (temp_params) {
+    this.setCoords(temp_params);
+
+    return temp_params;
+};
+
+Polygon.prototype.remove = function () {
+    this._map.removeNodeFromSvg(this.g);
+};
+
+Polygon.prototype.select = function () {
+    utils.addClass(this.polygon, 'selected');
+
+    return this;
+};
+
+Polygon.prototype.deselect = function () {
+    utils.removeClass(this.polygon, 'selected');
+
+    return this;
+};
+
+Polygon.createFromSaved = function (params, is_overlay, self) {
+    //console.log("<Polygon.createFromSaved>");
+    console.log("<Polygon.createFromSaved> is_overlay = " + is_overlay);
+
+    var coords = params.coords,
+        area = new Polygon(coords[0], coords[1], is_overlay, self);
+
+    for (var i = 2, c = coords.length; i < c; i += 2) {
+        area.addPoint(coords[i], coords[i + 1]);
+    }
+
+    area.polyline = area.polygon;
+    area.polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+    area.g.replaceChild(area.polygon, area.polyline);
+    area.setCoords(area.params).deselect();
+    delete(area.polyline);
+
+    self.is_draw = false;
+    self.drawing_poligon = null;
+
+    return area;
+
+};

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

@@ -0,0 +1,30 @@
+function SavePreloader() {
+
+    var _this = this;
+    var $el;
+
+    _this.init = function () {
+        $el = $("#savePreloader");
+    };
+
+    _this.show = function () {
+        $el.css("display","block");
+        $el.addClass('shown');
+    };
+
+    _this.hide = function () {
+        $el.removeClass('shown');
+        setTimeout(function () {
+            $el.css("display","none");
+        },500);
+    };
+
+    _this.toggle = function () {
+        if ($el.hasClass('shown')) {
+            _this.hide();
+        } else {
+            _this.show();
+        }
+    };
+
+}

data/app/assets/stylesheets/c80_map.scss

@@ -0,0 +1,2 @@
+@import "map";
+@import "view/**/*";