esri.dijit.editing.Editor undoManager

YvesCaron · ‎06-05-2012

Hi,

I'm looking for an example to work with the undoManager option in the esri.dijit.editing.Editor or how to implement it.

Thanks

JianHuang · ‎06-06-2012

Here is a sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/ed/ed_editing_widget.html

YvesCaron · ‎06-07-2012

Thanks Jian,

It is so simple, here is my solution.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <title>
      Default Editor
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      dojoConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">
    </script>
    <style type="text/css">
      html,body {
        height:100%;
        width:100%;
        margin:0;
      }

      body {
        background-color:#fff;
        overflow:hidden;
        font-family:Helvetica;
      }

      #templatePickerPane {
        width:225px;
        overflow:hidden;
      }

      #panelHeader{
        background-color:#92A661;
        border-bottom: solid 1px #92A860;
        color:#FFF;
        font-size:18px;
        height:24px;
        line-height:22px;
        margin:0;
        overflow:hidden;
        padding:10px 10px 10px 10px;
      }
      #map {
        margin-right:5px;
        padding:0;
      }

      .esriEditor .templatePicker {
        padding-bottom:5px;
        padding-top:5px;
        height:500px;
        border-radius:0px 0px 4px 4px;
        border:solid 1px #92A661;
      }

   .undoButtons{
     width:50%;
     margin-left:auto;
     margin-right:auto;
     padding-top:4px;
   }

   .undoIcon {
     background-image:url(images/undo.png);
     width:16px;
     height:16px;
   }
   .redoIcon {
     background-image:url(images/redo.png);
     width:16px;
     height:16px;
   }
   .undoGrayIcon {
     background-image:url(images/undo_gray.png);
     width:16px;
     height:16px;
   }
   .redoGrayIcon {
     background-image:url(images/redo_gray.png);
     width:16px;
     height:16px;
   }
      .dj_ie .infowindow .window .top .right .user .content,.dj_ie .simpleInfoWindow .content {
      position:relative;
      }
    </style>
    <script type="text/javascript">
      dojo.require("esri.dijit.editing.Editor-all");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.SnappingManager");

      var map;

      function init() {
        //snapping is enabled for this sample - change the tooltip to reflect this
        esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start + "<br/>Press <b>CTRL</b> to enable snapping";
        esri.bundle.toolbars.draw.addPoint = esri.bundle.toolbars.draw.addPoint + "<br/>Press <b>CTRL</b> to enable snapping";

        //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
        //for details on setting up a proxy page.
        esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";

        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        var extent = new esri.geometry.Extent({
          "xmin": -8576501,
          "ymin": 4705377,
          "xmax": -8574612,
          "ymax": 4706867,
          "spatialReference": {
            "wkid": 102100
          }
        });


        map = new esri.Map("map", {
          extent: extent
        });
        dojo.connect(map, "onLoad", function() {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        dojo.connect(map, "onLayersAddResult", initEditing);
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer...", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });

undoManager = new esri.UndoManager({maxOperations:8});
        dijit.byId("undo").set("iconClass","undoGrayIcon");
dijit.byId("redo").set("iconClass","redoGrayIcon");
dojo.connect(undoManager,"onChange",function(){
              //enable or disable buttons depending on current state of application
              if (undoManager.canUndo) {
                dijit.byId("undo").set("disabled", false);
                dijit.byId("undo").set("iconClass","undoIcon");
              } else {
                dijit.byId("undo").set("disabled", true);
                dijit.byId("undo").set("iconClass","undoGrayIcon");
     }

              if (undoManager.canRedo) {
                dijit.byId("redo").set("disabled", false);
                dijit.byId("redo").set("iconClass","redoIcon");
              } else {
                dijit.byId("redo").set("disabled", true);
                dijit.byId("redo").set("iconClass","redoGrayIcon");
              }
        });
         //listen for the undo/redo button click events
         dojo.connect(dojo.byId('undo'), 'onclick', function(e) {
    console.log("Je undo ", undoManager);
          undoManager.undo();
         });
         dojo.connect(dojo.byId('redo'), 'onclick', function(e) {
    console.log("Je redo ", undoManager);
          undoManager.redo();
         });

        map.addLayers([operationsPointLayer]);
        map.infoWindow.resize(400, 300);
      }

      function initEditing(results) {
console.log("initEditing =>", results);
        var featureLayerInfos = dojo.map(results, function(result) {
          return {
            'featureLayer': result.layer
          };
        });

        var settings = {
          map: map,
          layerInfos: featureLayerInfos,
    enableUndoRedo: true,
    undoManager: undoManager
        };

        var params = {
          settings: settings
        };
        var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');

        var options = {snapKey:dojo.keys.copyKey};
        map.enableSnapping(options);

        editorWidget.startup();

      }

      dojo.addOnLoad(init);
    </script>
</head>

<body class="tundra">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" id="templatePickerPane" data-dojo-props="region:'right'">
        <div id="panelHeader">
          �?diteur
        </div>
        <div style="padding:10px;" id="editorDiv">
        </div>
     <div class="undoButtons">
                <button id="undo" data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'undoIcon'"></button>
                <button id="redo" data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'redoIcon'"></button>
     </div>
      </div>
    </div>
</body>

</html>

KevinGooss · ‎08-29-2012

so you are able to undo/redo edit operations that involve feature geometry changes?
How does it track what was done during each edit in order to rollback?

YvesCaron · ‎08-29-2012

Hi,

This is done by the esri.UndoManager class