Disable scaling feature in Editor widget

achyl · ‎05-27-2024

Hi, how can i disable scaling in editor widget?
I would like to disable scaling for CityFurnitureLayer when creating and updating.

const editor = new Editor({

view: view,

layerInfos: [

CityFurnitureInfos(CityFurnitureLayer, content),

VegetationInfos(VegetationLayer, content),

BaseInfos(BaseLayer, content),

PathInfos(pathLayer, content),

],

tooltipOptions: { enabled: true },

labelOptions: { enabled: true }

});

export const CityFurnitureInfos = (CityFurnitureLayer, content) => {

return {

layer: CityFurnitureLayer,

formTemplate: {

elements: [

{

type: 'field',

fieldName: 'TYPE',

label: content.furnitureInfos.labelType

},

{

type: 'field',

fieldName: 'SIZE',

label: content.furnitureInfos.labelSize,

formatter: function (value) {

return value.toFixed(2);

},

format: {

places: 2,

digitSeparator: true

},

editorType: 'number'

},

{

type: 'field',

fieldName: 'ROTATION',

label: content.furnitureInfos.labelRotation,

}

]

},

fieldInfos: [{

fieldName: 'SIZE',

label: content.furnitureInfos.labelSize,

format: {

places: 2,

digitSeparator: true

}

}]

};

Jan62 · ‎06-03-2024

We have the same problem. It seems, only 4.29 is affectet under 4.28 it works fine. The the Sandbox Code.

4.28 Works as intended

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Edit features with the Editor widget | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.28/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

  </style>

  <script>
    require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Editor"
      ], (
        WebMap, MapView,
        Editor
      ) => {

        // Create a map from the referenced webmap item id
        const webmap = new WebMap({
          portalItem: {
            id: "4793230052ed498ebf1c7bed9966bd35"
          }
        });

        const view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(() => {
          const editor = new Editor({
            view: view,
          });
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableRotation  = true;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableScaling  = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableZ  = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.multipleSelectionEnabled = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.preserveAspectRatio  = true;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.toggleToolOnClick = false;
          editor.viewModel.sketchViewModel.tool = "transform";
          

          // Add the widget to the view
          view.ui.add(editor, "top-right");
        });
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

4.29 Overrides the defaults and enables scaling

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Edit features with the Editor widget | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.29/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

  </style>

  <script>
    require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Editor"
      ], (
        WebMap, MapView,
        Editor
      ) => {

        // Create a map from the referenced webmap item id
        const webmap = new WebMap({
          portalItem: {
            id: "4793230052ed498ebf1c7bed9966bd35"
          }
        });

        const view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(() => {
          const editor = new Editor({
            view: view,
          });
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableRotation  = true;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableScaling  = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableZ  = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.multipleSelectionEnabled = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.preserveAspectRatio  = true;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.toggleToolOnClick = false;
          editor.viewModel.sketchViewModel.tool = "transform";
          

          // Add the widget to the view
          view.ui.add(editor, "top-right");
        });
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

View solution in original post

JoelBennett · ‎05-27-2024

You can disable scaling on updates like so:

editor.viewModel.sketchViewModel.defaultUpdateOptions.enableScaling = false;

Unfortunately, the defaultCreateOptions provide no such property. They do have a preserveAspectRatio property though which may be helpful, as does defaultUpdateOptions:

editor.viewModel.sketchViewModel.defaultCreateOptions.preserveAspectRatio = false;

achyl · ‎05-27-2024

It didn't work,
I set this property in editor.when(), but when I create a new object, this property is overwritten

Jan62 · ‎06-03-2024

We have the same problem. It seems, only 4.29 is affectet under 4.28 it works fine. The the Sandbox Code.

4.28 Works as intended

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Edit features with the Editor widget | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.28/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

  </style>

  <script>
    require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Editor"
      ], (
        WebMap, MapView,
        Editor
      ) => {

        // Create a map from the referenced webmap item id
        const webmap = new WebMap({
          portalItem: {
            id: "4793230052ed498ebf1c7bed9966bd35"
          }
        });

        const view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(() => {
          const editor = new Editor({
            view: view,
          });
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableRotation  = true;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableScaling  = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableZ  = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.multipleSelectionEnabled = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.preserveAspectRatio  = true;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.toggleToolOnClick = false;
          editor.viewModel.sketchViewModel.tool = "transform";
          

          // Add the widget to the view
          view.ui.add(editor, "top-right");
        });
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

4.29 Overrides the defaults and enables scaling

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Edit features with the Editor widget | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.29/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

  </style>

  <script>
    require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Editor"
      ], (
        WebMap, MapView,
        Editor
      ) => {

        // Create a map from the referenced webmap item id
        const webmap = new WebMap({
          portalItem: {
            id: "4793230052ed498ebf1c7bed9966bd35"
          }
        });

        const view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(() => {
          const editor = new Editor({
            view: view,
          });
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableRotation  = true;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableScaling  = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.enableZ  = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.multipleSelectionEnabled = false;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.preserveAspectRatio  = true;
          editor.viewModel.sketchViewModel.defaultUpdateOptions.toggleToolOnClick = false;
          editor.viewModel.sketchViewModel.tool = "transform";
          

          // Add the widget to the view
          view.ui.add(editor, "top-right");
        });
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

achyl · ‎06-06-2024

Thank you,
after downgrading version it works, but only for 2D objects, I can't lock the scaling of a point-3d type symbol.

Jan62

Update:

with 4.30 now it works to override the behavior. Look at SupportingWidgetDefaults Editor | API Reference | ArcGIS Maps SDK for JavaScript 4.30 | Esri Developer

The example disables the scaling and rotation on update.

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Edit features with the Editor widget | Sample | ArcGIS Maps SDK for JavaScript 4.30</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.30/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

  </style>

  <script>
    require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Editor"
      ], (
        WebMap, MapView,
        Editor
      ) => {

        // Create a map from the referenced webmap item id
        const webmap = new WebMap({
          portalItem: {
            id: "4793230052ed498ebf1c7bed9966bd35"
          }
        });

        const view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(() => {
          const editor = new Editor({
            view: view,
            supportingWidgetDefaults:{
              sketch:{
                defaultUpdateOptions:{
                  enableRotation: false,
                  enableScaling: false
                }
              }
            }
          });
                   

          // Add the widget to the view
          view.ui.add(editor, "top-right");
        });
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>