MVC Javascript (часть 2 - event)

@Максим_М21 · Регистрация: 11.12.2013

Author24 — интернет-сервис помощи студентам

Добрый день, всем. Наконец-то немного разгреб завалы работы, и снова взялся за свою тестовую программу с использованием шаблона MVC.
После предыдущего обсуждения данной темы, прочел несколько статей, среди них https://habrahabr.ru/post/117791/.
Понял (возможно я ошибаюсь), что MVC, это огромное пространство для споров и обсуждений. У каждого свое мнение и в 95% случаев, каждый из оппонентов прав.
Сейчас, прошу вашей помощи больше не по самой концепции, а по логике JS.
Такая штука: мой код получает координаты курсора мыши и передает их точке на карте (то есть точка должна помещаться, при клике на место курсора).
Все работает, но если не проскролить карту. Тогда точка становится не в то место, куда хотелось бы.
Причину знаю. И даже нашел несколько вариантов решения проблемы, но не на MVC.
Все дело в том, что координаты считываются не с моего блока с картой, хотя, я так думал, этот отрывок кода

Javascript

var mapField = document.getElementById( 'mapField' );
 
//...
 
mapField.onclick = function(){
    //...               
}

должен был именно это и делать, а они считываются от границ экрана.

Вот весь код:

Javascript

var e,
    pointPosX,
    pointPosY,
    pointX,
    pointY;
/* -------------------------------- begin view -------------------------------------------- */
 
var view = {    
 
    getFieldMap: function( pointX, pointY ){    
        
        var mapField = document.getElementById( 'mapField' ),
            inputX = document.getElementById( 'coordinates_x' ),
            inputY = document.getElementById( 'coordinates_y' );
 
            inputX.value = pointX;
            inputY.value = pointY;
 
    },
 
    // place a button on the map
    setPointInMap: function( pointX, pointY ){
        
        var pointInMap = document.getElementById( 'mxPoint' ),
            pointInMapX = pointInMap.style.left = pointX + 'px',
            pointInMapY = pointInMap.style.top = pointY + 'px';
 
    }
 
 
};
 
/* -------------------------------- end view -------------------------------------------- */
 
 
/* ------------------------------- begin model ------------------------------------------ */
 
var model = {
 
    pointPosX: 0,
    pointPosY: 0,
 
    eventVar: function(){
 
        e = window.event || event;
 
    },
    getPositionPointX: function(){
 
        this.eventVar();
        this.pointPosX = e.clientX; 
        return this.pointPosX;
 
    },
    getPositionPointY: function(){
 
        this.eventVar();
        this.pointPosY = e.clientY;
        return this.pointPosY;
 
    }
    
};
 
/* ------------------------------- end model ------------------------------------------ */
 
 
/* --------------------------- begin controller ---------------------------------------- */
 
var controller = {
    
    getCoordinatesPoint: function(){
 
        pointX = model.getPositionPointX(),
        pointY = model.getPositionPointY();
 
        view.getFieldMap( pointX, pointY );
 
    },
 
    // place a button on the map (CONTR)
    setCoordinatesPointInMap: function(){
 
        pointX = model.getPositionPointX(),
        pointY = model.getPositionPointY();
 
        view.setPointInMap( pointX, pointY );
    }
 
};
 
/* ---------------------------- end controller ----------------------------------------- */
 
 
/* -------------------- anonymous initialize function------------------------------------ */
 
( function(){
 
    var start = {
 
        init: function(){
 
            this.main();
            this.control();
            this.event();
 
        },
        main: function(){
            //options
        },
        control: function(){
            //controllers
        },
        event: function(){
 
            mapField.onclick = function(){
 
                controller.getCoordinatesPoint();
                controller.setCoordinatesPointInMap();
                
            }
 
        }
    };
 
    start.init();
 
} )();
/* -------------------- anonymous initialize function------------------------------------ */

Вопрос в том, как в данном шаблоне считать координаты именно с карты, а не с области экрана?

@XRoy · 28.08.2016, 13:22

Максим_М21,
Почему бы не использовать маркеры, они реализованы в самом api карт?

@Максим_М21 · 28.08.2016, 15:50 **[ТС]**

Сообщение от XRoy

Почему бы не использовать маркеры, они реализованы в самом api карт?

XRoy, JS - это мечта. Очень хочу научится писать на JS. API, не для меня.

@XRoy · 28.08.2016, 16:57

Максим_М21,

Все дело в том, что координаты считываются не с моего блока с картой

они считываются от границ экрана

Координата экран - позиция блока = координата относительно блока

@Padimanskas · 28.08.2016, 17:04

Максим_М21, наверное я что-то пропустил, но при чем тут mvc?

представь бесконечное 2d пространство(слой) у которого нет координат, но которое содержит объекты. И у этих объектов есть координаты. Мы как наблюдатель(камера) диктуем пространству в какой точке мы находимся в данное время.

Например, есть объекты

Javascript

1	[{x:100,y:100}, {x:150,y:200}, {x:310,y:50}, {x:2500,y:920}, ...]

и наблюдатель говорит "Я смотрю в координаты 200:200"

Javascript

1	cameraInstance.pos(200, 200);

в этом конкретном случае, если свойства камеры width и height предположим равны 640x480, мы увидим только первые три объекта.

@Максим_М21 · 28.08.2016, 21:31 **[ТС]**

Сообщение от XRoy

Координата экран - позиция блока = координата относительно блока

К сожалению нет. Карта больше экрана.

Сообщение от Padimanskas

в этом конкретном случае, если свойства камеры width и height предположим равны 640x480, мы увидим только первые три объекта.

Согласен с Вами, но дело в том, что размер экрана не важен, так как точка ставится на карте. В моем случае примерно так:

HTML5

.Map{
   position: relative;
}
.Point{
   position: absolute;
   top: 200px;
   left: 160px;
}

@Padimanskas · 28.08.2016, 23:16

Сообщение от Максим_М21

но дело в том, что размер экрана не важен, так как точка ставится на карте.

Я же не про размер экрана. Точка в которую смотрит камера это мировые координаты, а указатель на странице это просто координаты вьюпорта(да, их можно и нужно переводить в мировые и локальные). То есть о чем я хотел сказать - камера утверждает "я смотрю в точку 100:100" и это верно, или объект в пространстве говорит "я нахожусь в координатах 150:200" и это тоже правильно, но само пространство ничего о координатах не знает, оно как бы посредник. Про концепцию в плане mvc (m-v-vm) я вообще, честно говоря, не въехал. Потому что все это делается, навскидку, медиатором и загрузчиком модулей. А может быть(или очень возможно) понадобится просто обсервер. как-то так..

@Максим_М21 · 29.08.2016, 09:49 **[ТС]**

Сообщение от Padimanskas

А может быть(или очень возможно) понадобится просто обсервер

Вы как будто опережаете меня в моей идеи) Да, на следующем шагу обсервер станет мне в помощь, однозначно. Но сейчас у меня преграда.
Вопрос не в картах или координатах (давайте на миг забудем об этом), вопрос в том как считать ивент с блока, а не с экрана.

Javascript

mapField.onclick = function(){
 
     controller.getCoordinatesPoint();
     controller.setCoordinatesPointInMap();
                
}

В этом отрывке сказано: по клике на поле получить точку относительно экрана и передать ее. Но нужно: "получить точку относительно поля".

@cyb0rg_01 · 29.08.2016, 10:18

Максим_М21, используйте ф-цию

Javascript

1	getBoundingClientRect()

для определения границ элемента.
Для получения точных координат относительно элемента можно использовать ф-цию:

Javascript

var getMousePos = function (element, event) {
    var rect = element.getBoundingClientRect();
    return {
        X: (event.clientX - rect.left),
        Y: (event.clientY - rect.top)
    };
}

Пример определения координат с вызовом getBoundingClientRect и без
https://jsfiddle.net/27g57dLb/1/

@mrtoxas · 29.08.2016, 10:32

Или так:

Javascript

1
2
3

block.addEventListener('click', function() {
  console.log('X: ' + event.offsetX + ' Y:' + event.offsetY);
})

Результат

@Максим_М21 · 29.08.2016, 11:01 **[ТС]**

pro_100_gram, mrtoxas, спасибо Вам за примеры, попробую все)
Padimanskas, эту конструкцию ( [{x:100,y:100}, {x:150,y:200}, {x:310,y:50}, {x:2500,y:920}, ...] ), обязательно возьму для составления маршрута, спасибо.

@XRoy 870 / 720 / 304 Регистрация: 15.04.2013 Сообщений: 2,047 Записей в блоге: 5
	28.08.2016, 13:22	2
	Максим_М21, Почему бы не использовать маркеры, они реализованы в самом api карт? 0

@Максим_М21 5 / 4 / 2 Регистрация: 11.12.2013 Сообщений: 168
	28.08.2016, 15:50 [ТС]	3
	Сообщение от XRoy Почему бы не использовать маркеры, они реализованы в самом api карт? XRoy, JS - это мечта. Очень хочу научится писать на JS. API, не для меня. 0

@XRoy 870 / 720 / 304 Регистрация: 15.04.2013 Сообщений: 2,047 Записей в блоге: 5
	28.08.2016, 16:57	4
	Максим_М21, Все дело в том, что координаты считываются не с моего блока с картой они считываются от границ экрана Координата экран - позиция блока = координата относительно блока 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	28.08.2016, 23:16	7
	Сообщение от Максим_М21 но дело в том, что размер экрана не важен, так как точка ставится на карте. Я же не про размер экрана. Точка в которую смотрит камера это мировые координаты, а указатель на странице это просто координаты вьюпорта(да, их можно и нужно переводить в мировые и локальные). То есть о чем я хотел сказать - камера утверждает "я смотрю в точку 100:100" и это верно, или объект в пространстве говорит "я нахожусь в координатах 150:200" и это тоже правильно, но само пространство ничего о координатах не знает, оно как бы посредник. Про концепцию в плане mvc (m-v-vm) я вообще, честно говоря, не въехал. Потому что все это делается, навскидку, медиатором и загрузчиком модулей. А может быть(или очень возможно) понадобится просто обсервер. как-то так.. 0

@Максим_М21 5 / 4 / 2 Регистрация: 11.12.2013 Сообщений: 168
	29.08.2016, 11:01 [ТС]	11
	pro_100_gram, mrtoxas, спасибо Вам за примеры, попробую все) Padimanskas, эту конструкцию ( [{x:100,y:100}, {x:150,y:200}, {x:310,y:50}, {x:2500,y:920}, ...] ), обязательно возьму для составления маршрута, спасибо. 0

MVC Javascript (часть 2 - event)

Решение