Thanks @ReneRubalcava for response. I tried what you suggest but still freehandpolygon and freehandpolyline is not showing up in UI.
Here is full code of mine, can you have look at it and help to make it run:
/* eslint-disable react/prop-types */
import React, { useState, useEffect, useRef, useContext, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { useTheme } from '@mui/material/styles';
import { IconButton, Popper, Box, Typography } from "@mui/material";
import IconMarkup from '../../assets/icons/IconMarkup.svg?react';
import { MapContext } from './Context/MapContext.jsx';
import "@arcgis/map-components/components/arcgis-sketch";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
// Import the new custom tool
import MarkupCustomTool from './MarkupCustomTool.jsx';
function MarkupTool ({
containerStyle,
activeDialog,
onDialogToggle,
}) {
const theme = useTheme();
const dialogId = 'markupDialog';
const dialogIsOpen = activeDialog === dialogId;
const [tooltipAnchorEl, setTooltipAnchorEl] = useState(null);
const [openPopper, setOpenPopper] = useState(false);
const id = openPopper ? 'markup-popper' : undefined;
const [sketchLayer, setSketchLayer] = useState(null);
const sketchRef = useRef(null);
const { mapView } = useContext(MapContext);
// Use useCallback for the ready handler
const handleSketchReady = useCallback(() => {
const sketchElement = document.querySelector("arcgis-sketch");
if (!sketchElement) {
console.log("Sketch element not found in handleSketchReady");
return;
}
console.log("✅ Sketch element ready (handleSketchReady fired)");
// Small timeout to ensure the element is fully initialized
setTimeout(() => {
sketchElement.availableCreateTools = [
"point",
"multipoint",
"polyline",
"freehandPolygon",
"freehandPolyline",
"polygon",
"rectangle",
"circle",
"text" // Not showing intentionally for now
];
console.log("Available tools set:", sketchElement.availableCreateTools);
}, 1000);
}, []);
useEffect(() => {
if (!mapView) return;
const layer = new GraphicsLayer({
id: "markup_graphics_layer",
title: "Markup Graphics"
});
setSketchLayer(layer);
mapView.map.add(layer);
return () => {
if (mapView && !mapView.destroyed) {
mapView.map.remove(layer);
}
};
}, [mapView]);
const handleButtonClick = () => {
onDialogToggle(dialogId);
setOpenPopper(false);
setTooltipAnchorEl(null);
};
const handleMouseEnter = (event) => {
setTooltipAnchorEl(event.currentTarget);
if (!dialogIsOpen) {
setOpenPopper(true);
}
};
const handleMouseLeave = () => {
setOpenPopper(false);
setTooltipAnchorEl(null);
};
useEffect(() => {
if (dialogIsOpen) {
setOpenPopper(false);
setTooltipAnchorEl(null);
}
}, [dialogIsOpen]);
useEffect(() => {
if (!dialogIsOpen || !mapView || !sketchLayer) return;
// Use a slight delay to ensure the element is in the DOM
const timer = setTimeout(() => {
const sketchElement = document.querySelector("arcgis-sketch");
if (!sketchElement) {
console.log("Sketch element not found");
return;
}
console.log("Setting up sketch element");
// Set view and layer first
sketchElement.view = mapView;
sketchElement.layer = sketchLayer;
// Check if already ready (widget property exists)
if (sketchElement.widget) {
console.log("Sketch element already ready");
handleSketchReady();
} else {
console.log("Waiting for arcgisReady event");
// Add event listener for when it becomes ready
sketchElement.addEventListener("arcgisReady", handleSketchReady);
}
// Cleanup function
return () => {
sketchElement.removeEventListener("arcgisReady", handleSketchReady);
};
}, 100);
return () => {
clearTimeout(timer);
};
}, [dialogIsOpen, mapView, sketchLayer, handleSketchReady]);
return (
<>
<IconButton
variant="contained"
style={containerStyle}
sx={{
width: 48,
height: 48,
backgroundColor: dialogIsOpen ? theme.appColor.darkGray : theme.appColor.darkGray,
color: dialogIsOpen ? theme.appColor.lightBlue: 'white',
'&:hover': {
backgroundColor: dialogIsOpen ? theme.appColor.darkGray : 'white',
color: dialogIsOpen ? theme.appColor.lightBlue : theme.appColor.darkGray,
},
'&:active': {
backgroundColor: dialogIsOpen ? 'white' : 'white',
color: dialogIsOpen ? theme.appColor.darkGray : theme.appColor.lightBlue,
},
}}
onClick={handleButtonClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
aria-describedby={id}
aria-label="MarkupButton"
>
<IconMarkup alt="Markup" />
</IconButton>
<Popper
id={id}
open={openPopper}
anchorEl={tooltipAnchorEl}
placement="left"
disablePortal={false}
modifiers={[{ name: 'offset', options: { offset: [0, 10] } }]}
>
<Box sx={{
border: '#DFDFDF',
padding: '12px',
bgcolor: 'white',
borderRadius: '8px',
boxShadow: 3,
}}>
<Typography variant="body2">Markup Tools</Typography>
</Box>
</Popper>
{dialogIsOpen && mapView && mapView.container && (
ReactDOM.createPortal(
<Box
sx={{
position: 'absolute',
top: 150,
right: 82,
backgroundColor: 'white',
boxShadow: 3,
borderRadius: '8px',
zIndex: 1300,
}}
>
<arcgis-sketch
ref={sketchRef}
layout="vertical"
creation-mode="update"
scale="m"
toolbar-kind="docked"
hide-selection-tools-lasso-selection
show-create-tools-freehand-polygon
show-create-tools-freehand-polyline
showCreateToolsFreehandPolyline
/>
<MarkupCustomTool
sketchLayer={sketchLayer}
sketchRef={sketchRef}
dialogIsOpen={dialogIsOpen}
/>
</Box>,
mapView.container
)
)}
</>
);
}
export default MarkupTool;
