polyline to follow kendo modal on drag

CamCode — Wed, 01 Jan 2020 23:30:27 GMT

I have this almost working; but instead of it following the kendo modal when dragged, it's following the mouse pointer at all times...

So, currently it's following the mouse pointer and so is the modal; but this is horrible for usability so would just like to stay with and follow the modal on the standard click and drag.

Below is the JavaScript, here is the live demo CodePen. The line should always be with the modal for point B, which it's doing; but the modal should only be movable on drag.

require([      "esri/Map",      "esri/views/MapView",      "esri/Graphic",      "esri/layers/GraphicsLayer",      "esri/geometry/support/webMercatorUtils",      "dojo/dom",    ],     function init (Map, MapView, Graphic, GraphicsLayer, webMercatorUtils, dom) {    var map = new Map({      basemap: "topo-vector"          });    var view = new MapView({      container: "viewDiv",                    map: map,      center: [-80.96135253906438, 35.9411934679851],      zoom: 3    });     var graphicsLayer = new GraphicsLayer();    map.add(graphicsLayer);        var simpleLineSymbol = {       type: "simple-line",       color: [13,121,190, .9],       style: "short-dash",       width: 3     };    var coordinatesAx;    var coordinatesAy;       var coordinatesBx ;    var coordinatesBy;     var moveAlong = false;    var windowElem;     view.when(function(){        view.on("pointer-move", showCoordinates);    });     // NEW: Stop/start moving the modal along with the pointer by map click    view.when(function(){        view.on("click", function () { moveAlong = !moveAlong;});           });     coordinatesAx = -80.96135253906438;    coordinatesAy = 35.9411934679851;     document.getElementById("modal").onclick = function fun() {                 windowElem = document.querySelector('.k-window');                 moveAlong = true;                // Bind Kendo dialog dragstart to movement        $("#dialog").data('kendoWindow').bind("dragstart", function (ev) {                                //graphicsLayer.removeAll();              moveAlong = true;            showCoordinates(ev);                     })              }    function showCoordinates(evt) {             var point = view.toMap({x: evt.x, y: evt.y});      var mp = webMercatorUtils.webMercatorToGeographic(point);      dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);      coordinatesBx = mp.x.toFixed(3);     coordinatesBy = mp.y.toFixed(3);      var polyline = {       type: "polyline",       paths: [         [coordinatesAx, coordinatesAy],           [coordinatesBx, coordinatesBy]       ]     };     var polylineGraphic = new Graphic({       geometry: polyline,       symbol: simpleLineSymbol      })      if (moveAlong) {               if (graphicsLayer.graphics.items.length < 0) {            graphicsLayer.add(polylineGraphic)       } else {            // Recreate the line and reposition the modal            graphicsLayer.removeAll();            graphicsLayer.add(polylineGraphic)                      windowElem.style.top = evt.y + 0 + "px";            windowElem.style.left = evt.x + 0 + "px";       }             }              }});

Update: here is a new logic I am trying to find the modal points in terms of screePoints.

        $profileWindow = $("#" + elem).parents(".outter-div-wrapper");        profileWindowOffset = $profileWindow.offset();        profileWindowWidth = $profileWindow.outerWidth();        profileWindowHeight = $profileWindow.outerHeight();         screenPointTopLeft = new Point(profileWindowOffset.left, profileWindowOffset.top, app.ui.mapview.map.spatialReference);        screenPointTopRight = new Point(profileWindowOffset.left + profileWindowWidth, profileWindowOffset.top, app.ui.mapview.map.spatialReference);        screenPointBottomLeft = new Point(profileWindowOffset.left, profileWindowOffset.top + profileWindowHeight, app.ui.mapview.map.spatialReference);        screenPointBottomRight = new Point(profileWindowOffset.left + profileWindowWidth, profileWindowOffset.top + profileWindowHeight, app.ui.mapview.map.spatialReference);         arrayOfCorners.push(screenPointTopLeft);        arrayOfCorners.push(screenPointTopRight);        arrayOfCorners.push(screenPointBottomLeft);        arrayOfCorners.push(screenPointBottomRight);        //convert to screenpoint        graphicsScreenPoint = esri.geometry.toScreenPoint(        $profileWindow = $("#" + elem).parents(".outter-div-wrapper");        profileWindowOffset = $profileWindow.offset();        profileWindowWidth = $profileWindow.outerWidth();        profileWindowHeight = $profileWindow.outerHeight();         screenPointTopLeft = new Point(profileWindowOffset.left, profileWindowOffset.top, app.ui.mapview.map.spatialReference);        screenPointTopRight = new Point(profileWindowOffset.left + profileWindowWidth, profileWindowOffset.top, app.ui.mapview.map.spatialReference);        screenPointBottomLeft = new Point(profileWindowOffset.left, profileWindowOffset.top + profileWindowHeight, app.ui.mapview.map.spatialReference);        screenPointBottomRight = new Point(profileWindowOffset.left + profileWindowWidth, profileWindowOffset.top + profileWindowHeight, app.ui.mapview.map.spatialReference);         arrayOfCorners.push(screenPointTopLeft);        arrayOfCorners.push(screenPointTopRight);        arrayOfCorners.push(screenPointBottomLeft);        arrayOfCorners.push(screenPointBottomRight);        //convert to screenpoint        graphicsScreenPoint = esri.geometry.toScreenPoint(app.ui.mapview.map.extent, app.ui.mapview.map.width, app.ui.mapview.map.height, self.mapPoint_);         //find closest Point        profileWindowScreenPoint = this.findClosest(arrayOfCorners, graphicsScreenPoint);        //convert from screen point to map point        profileWindowClosestMapPoint = app.ui.mapview.map.toMap(profileWindowScreenPoint);         mapProfileWindowPoint.push(profileWindowClosestMapPoint.x);        mapProfileWindowPoint.push(profileWindowClosestMapPoint.y);
.extent, app.ui.mapview.map.width, app.ui.mapview.map.height, self.mapPoint_); //find closest Point profileWindowScreenPoint = this.findClosest(arrayOfCorners, graphicsScreenPoint); //convert from screen point to map point profileWindowClosestMapPoint = app.ui.mapview.map.toMap(profileWindowScreenPoint); mapProfileWindowPoint.push(profileWindowClosestMapPoint.x); mapProfileWindowPoint.push(profileWindowClosestMapPoint.y);

>> Live Demo / CodePen.

Re: polyline to follow kendo modal on drag

RobertScheitlin__GISP — Thu, 02 Jan 2020 15:37:21 GMT

Cameron,

You need to consider a different workflow. The issue is that the Kendo window blocks the views pointer-move event from occurring and that is no kendo widow dragging event that you can use to get the mouse position. I tried to add a standard JS eventlistener to the viewDiv but something with the kendo window dragging is hit or miss on the mose move event listeners you have attached to the view.

Re: polyline to follow kendo modal on drag

CamCode — Thu, 02 Jan 2020 17:30:15 GMT

Thanks for checking it out... I actually don't NEED the mouse position... for some reason I started using that logic to get the pointB modal position point... All I need is for the ability for the line point B to follow the modal when the modal is dragged.

Re: polyline to follow kendo modal on drag

RobertScheitlin__GISP — Thu, 02 Jan 2020 17:49:15 GMT

Cameron,

There lies the issue. As I mentioned the modal window is interfering with tracking mouse movement for some reason. So getting the line to follow the modal window is the real issue.

Re: polyline to follow kendo modal on drag

CamCode — Thu, 02 Jan 2020 20:15:30 GMT

Haha, thanks yes I figured this much.

topic Re: polyline to follow kendo modal on drag in ArcGIS JavaScript Maps SDK Questions

polyline to follow kendo modal on drag

Re: polyline to follow kendo modal on drag

Re: polyline to follow kendo modal on drag

Re: polyline to follow kendo modal on drag

Re: polyline to follow kendo modal on drag