Re-designed Draw widget

[JeffreyThompson2]

This is a re-designed version the draw widget by @RobertScheitlin__GISP. His draw widget has a number of advantages over the OOTB draw widget including the ability to use text, editing a drawing and more drawing tools. However, the user interface needs some improvement.

This widget has modified his code to improve the overall user experience.

Changes:

• Many of the internal menus were displaying behind other menus making them difficult or impossible to access. These issues should all be fixed.
• Text added to clarify if the widget is in draw or edit mode and how to access the other mode.
• The draw tools have been placed in a flexbox div to make the layout better organized.
• The options button has been widened and labeled to make it clear that is different than the draw tool buttons.
• The Undo/Redo buttons will only display if it is possible to undo or redo something.
• Text in the delete button will clarify if deleting a single or all graphics.
• Text options menu has been re-ordered and re-designed with additional text to clarify options.
• Entering text does not require deleting default text.
• Preview will accurately reflect the map symbol regardless of theme font.

Edited: Undo and Redo buttons should perform correct action.

[ElisabethFenn]

Awesome! This is going to solve a number of issues we were having with the basic draw widget. Thanks for sharing. 

Playing around with the new widget I noticed that the labels on the undo and redo buttons were switched. I made a small change to the widget.tsx to fix. 

Went from this: 

<div className="drawToolbarBottomDiv">
            {canUndo || canRedo ? <div>
                <Button size='sm' type='secondary' active={undoBtnActive}
                    onClick={this.drawUndoBtnClick} title={this.nls('drawUndo')} disabled={!canUndo}>
                    <ArrowRedoOutlined></ArrowRedoOutlined>
                    Redo</Button>
                <Button size='sm' type='secondary' active={redoBtnActive}
                    onClick={this.drawRedoBtnClick} title={this.nls('drawRedo')} disabled={!canRedo}>
                    <ArrowUndoOutlined></ArrowUndoOutlined>
                    Undo</Button>

to this: 

<div className="drawToolbarBottomDiv">
            {canUndo || canRedo ? <div>
                <Button size='sm' type='secondary' active={undoBtnActive}
                    onClick={this.drawUndoBtnClick} title={this.nls('drawUndo')} disabled={!canUndo}>
                    <ArrowUndoOutlined></ArrowUndoOutlined>
                    Undo</Button>
                <Button size='sm' type='secondary' active={redoBtnActive}
                    onClick={this.drawRedoBtnClick} title={this.nls('drawRedo')} disabled={!canRedo}>
                    <ArrowRedoOutlined></ArrowRedoOutlined>
                    Redo</Button>

[JeffreyThompson2]

Thanks for finding this. It has been fixed.

[JohnnySun]

Hello Jeffrey! I've successfully integrated your Draw widget into my web application and it's functioning smoothly.

However, I have a query/request: Is there a way to enhance the Draw widget by adding an option to export KML files? This would enable users to save their drawings in KML format, which would be incredibly beneficial.

I've attempted to display the drawLayer, and while it appears in the layer list widget, I'm still unable to export it. Here's the code snippet:

componentDidMount() {
    this.setState({widgetInit: true});
    this.drawLayer = new GraphicsLayer({id:"DrawGL", listMode: 'show'});
}

Could you provide any suggestions on how to implement this feature? Thanks for your help!

[JeffreyThompson2]

To clarify, I did not build this widget. It was made by @RobertScheitlin__GISP. I just gave it a facelift.

He was at one point planning to create some sort of download feature, but he no longer appears active on this site.

I suggest asking/searching the Javascript API boards for coding examples for downloading a layer. I don't think I have ever seen one.

[MichaelLev]

This widget is still class and it is bewildering me...

I will greatly appreciate it if there was a Function version for this widget.