nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Sketch Widget Disable Reshape

JoelGoransson

Hi everyone, novice programmer here tasked with making a project, I'm a little out of my depth. I'm using this plugin to allow a user to select a basic rectangular area on a map, I found that the Sketch widget is pretty much exactly what I need.

There is a sample of it here: Sketch widget | ArcGIS API for JavaScript 4.15

As I only want a basic rectangle I wanted to disable the other options of drawing, I found I could do this with this "availableCreateTools: ["rectangle"]" code but now I still have the issue of the reshape tool being able to modify the rectangle into complex shapes, and the transform tool being able to rotate the rectangle (which I do not want either).

How can I disable both of these behaviors? (Most importantly the reshape one first).

Please see my code pen here: https://codepen.io/issun/pen/BaopmQV?editors=1010

Thanks in advance for all your answers!

UPDATE 1: Figured out how to disable rotation, by adding the line "sketch.defaultUpdateOptions.enableRotation = false;" before adding sketch to the view. Now I just need help with disabling the reshape tool

Find more posts tagged with

Accepted answers

rscheitlin

Joel,

So Add this css rule to prevent the reshape button from showing.

<SPAN class="selector token">button[title="Reshape"]</SPAN><SPAN class="punctuation token">{</SPAN>
  <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

JoelGoransson

Ah thank you Robert, using this (hiding the button) combined with the above defaultUpdateOptions: {toggleOnClick: false} so the user cannot switch to that tool by double clicking, disables it completely, solved my problem, cheers

rscheitlin

Joel,

So Add this css rule to prevent the reshape button from showing.

<SPAN class="selector token">button[title="Reshape"]</SPAN><SPAN class="punctuation token">{</SPAN>
  <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

JoelGoransson

Thanks Robert, this is much better than me adding a line after the constructor, but the "toggleToolOnClick" property does not disable the reshape tool, it only disables switching between the transform and reshape tools when clicking more than once on a created shape.

I've updated my codepen with the changes you suggested, see here: https://codepen.io/issun/pen/BaopmQV?editors=1010

rscheitlin

Joel,

Sure just add this:

defaultUpdateOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>enableRotation<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> toggleToolOnClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.