Selection Tools Not Starting at Cursor

151
2
Jump to solution
04-03-2024 08:30 AM
DavidDrennan
New Contributor

Hello, we have come across a seemingly novel issue in our Vue 3 app that uses `@arcgis/core`, where for whatever reason both of the selection tools will start at the top left corner of the map, instead of where the cursor is.

Here's a sample of how we use the Sketch widget:

 

 

// All of this is inside of the body of
// mapView.value.when() statement
//
// Anything with .value is a Vue 3 ref
// https://vuejs.org/api/reactivity-core.html#ref

const graphicLayer = new GraphicsLayer({
  id: 'our-graphics-layer',
  title: 'Graphics',
  parent: map.value?.basemap
});

const sketch = new Sketch({
  layer: graphicLayer,
  layout: 'horizontal',
  view: mapView.value,
  creationMode: "update",
  defaultCreateOptions: {
    mode: "hybrid",
  },
  snappingOptions: {
    enabled: true,
    featureSources: [{ layer: graphicLayer, enabled: true }]
  }
});

mapView.value.map.add(graphicLayer);

// isBlank is a utility function that just checks if a variables value is
// undefine, null or ''
graphicLayer.when(() => {
   mapView.value.extent = graphicLayer.fullExtent;
   if (!isBlank(mapView.value?.graphics) && mapView.value?.graphics?.length > 0) {
     graphicLayer.graphics.addMany(mapView.value?.graphics);
   }
});

mapView.value.ui.add(sketch, "bottom-left");

 

 

We've tried with on `@arcgis/core` version `4.29.7` and `4.29.10`.

As of note, we can draw points, lines, rectangles, circles and polygons just fine, as well as move them around just fine.

The only issue is that the selection tools will start a selection in the top-left most corner of the map, and not at the cursors position.

EDIT: As a note, this is happening on recent versions of both Firefox and Chrome.

0 Kudos
1 Solution

Accepted Solutions
AndyGup
Esri Regular Contributor

Hi @DavidDrennan it sounds like this could be a CSS issue. Did it work in previous versions of the API? Try to repro in a codepen using vanillaJS. Otherwise, you'll need to provide a simple, focused StackBlitz or GitHub repo.

View solution in original post

0 Kudos
2 Replies
AndyGup
Esri Regular Contributor

Hi @DavidDrennan it sounds like this could be a CSS issue. Did it work in previous versions of the API? Try to repro in a codepen using vanillaJS. Otherwise, you'll need to provide a simple, focused StackBlitz or GitHub repo.

0 Kudos
DavidDrennan
New Contributor

It ended up being CSS, we still had the CSS for an older version of the library loaded. Thanks!

0 Kudos