polyline to follow kendo modal on drag

Question

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.

CamCode · Answer

Haha, thanks yes I figured this much.

RobertScheitlin__GISP · Answer

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.

CamCode · Answer

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.