Drawing undo, redo

이 샘플에서는 Drawing Manager 객체의 undo, redo 메소드 사용 방법을 설명합니다.

original docs : https://apis.map.kakao.com/web/sample/drawingUndo/

JavaScript (live)

결과

Loading...

라이브 에디터

function Main() { const managerRef = useRef(null) const [undoable, setUndoable] = useState(false) const [redoable, setRedoable] = useState(false) function selectOverlay(type) { const manager = managerRef.current manager.cancel() manager.select(type) } const handleStateChanged = () => { const manager = managerRef.current setRedoable(manager.redoable()) setUndoable(manager.undoable()) } const undo = () => { const manager = managerRef.current manager.undo() } const redo = () => { const manager = managerRef.current manager.redo() } return ( <> <Map center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 > <DrawingManager ref={managerRef} onStateChanged={handleStateChanged} drawingMode={[ "arrow", "circle", "ellipse", "marker", "polyline", "rectangle", "polygon", ]} guideTooltip={["draw", "drag", "edit"]} markerOptions={{ // 마커 옵션입니다 draggable: true, // 마커를 그리고 나서 드래그 가능하게 합니다 removable: true, // 마커를 삭제 할 수 있도록 x 버튼이 표시됩니다 }} polylineOptions={{ // 선 옵션입니다 draggable: true, // 그린 후 드래그가 가능하도록 설정합니다 removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다 editable: true, // 그린 후 수정할 수 있도록 설정합니다 strokeColor: "#39f", // 선 색 hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일 hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도 }} rectangleOptions={{ draggable: true, removable: true, editable: true, strokeColor: "#39f", // 외곽선 색 fillColor: "#39f", // 채우기 색 fillOpacity: 0.5, // 채우기색 투명도 }} circleOptions={{ draggable: true, removable: true, editable: true, strokeColor: "#39f", fillColor: "#39f", fillOpacity: 0.5, }} polygonOptions={{ draggable: true, removable: true, editable: true, strokeColor: "#39f", fillColor: "#39f", fillOpacity: 0.5, hintStrokeStyle: "dash", hintStrokeOpacity: 0.5, }} arrowOptions={{ draggable: true, // 그린 후 드래그가 가능하도록 설정합니다 removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다 editable: true, // 그린 후 수정할 수 있도록 설정합니다 strokeColor: "#39f", // 선 색 hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일 hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도 }} ellipseOptions={{ draggable: true, removable: true, editable: true, strokeColor: "#39f", fillColor: "#39f", fillOpacity: 0.5, }} /> </Map> <div style={{ display: "flex", gap: "8px", }} > <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.POLYLINE) }} > 선 </button> <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.ARROW) }} > 화살표 </button> <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.CIRCLE) }} > 원 </button> <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.MARKER) }} > 마커 </button> <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.POLYGON) }} > 다각형 </button> <button onClick={(e) => { selectOverlay(kakao.maps.drawing.OverlayType.RECTANGLE) }} > 사각형 </button> </div> <div> <button disabled={!undoable} onClick={undo}> undo </button> <button disabled={!redoable} onClick={redo}> redo </button> </div> </> ) }

function Main() {
  const managerRef = useRef(null)
  const [undoable, setUndoable] = useState(false)
  const [redoable, setRedoable] = useState(false)

  function selectOverlay(type) {
    const manager = managerRef.current
    manager.cancel()
    manager.select(type)
  }

  const handleStateChanged = () => {
    const manager = managerRef.current

    setRedoable(manager.redoable())
    setUndoable(manager.undoable())
  }

  const undo = () => {
    const manager = managerRef.current
    manager.undo()
  }

  const redo = () => {
    const manager = managerRef.current
    manager.redo()
  }

  return (
    <>
      <Map
        center={{
          // 지도의 중심좌표
          lat: 33.450701,
          lng: 126.570667,
        }}
        style={{
          width: "100%",
          height: "450px",
        }}
        level={3} // 지도의 확대 레벨
      >
        <DrawingManager
          ref={managerRef}
          onStateChanged={handleStateChanged}
          drawingMode={[
            "arrow",
            "circle",
            "ellipse",
            "marker",
            "polyline",
            "rectangle",
            "polygon",
          ]}
          guideTooltip={["draw", "drag", "edit"]}
          markerOptions={{
            // 마커 옵션입니다
            draggable: true, // 마커를 그리고 나서 드래그 가능하게 합니다
            removable: true, // 마커를 삭제 할 수 있도록 x 버튼이 표시됩니다
          }}
          polylineOptions={{
            // 선 옵션입니다
            draggable: true, // 그린 후 드래그가 가능하도록 설정합니다
            removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다
            editable: true, // 그린 후 수정할 수 있도록 설정합니다
            strokeColor: "#39f", // 선 색
            hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일
            hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도
          }}
          rectangleOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f", // 외곽선 색
            fillColor: "#39f", // 채우기 색
            fillOpacity: 0.5, // 채우기색 투명도
          }}
          circleOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
          }}
          polygonOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
            hintStrokeStyle: "dash",
            hintStrokeOpacity: 0.5,
          }}
          arrowOptions={{
            draggable: true, // 그린 후 드래그가 가능하도록 설정합니다
            removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다
            editable: true, // 그린 후 수정할 수 있도록 설정합니다
            strokeColor: "#39f", // 선 색
            hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일
            hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도
          }}
          ellipseOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
          }}
        />
      </Map>
      <div
        style={{
          display: "flex",
          gap: "8px",
        }}
      >
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.POLYLINE)
          }}
        >
          선
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.ARROW)
          }}
        >
          화살표
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.CIRCLE)
          }}
        >
          원
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.MARKER)
          }}
        >
          마커
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.POLYGON)
          }}
        >
          다각형
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.RECTANGLE)
          }}
        >
          사각형
        </button>
      </div>
      <div>
        <button disabled={!undoable} onClick={undo}>
          undo
        </button>
        <button disabled={!redoable} onClick={redo}>
          redo
        </button>
      </div>
    </>
  )
}

TypeScript

const Main = () => {
  const managerRef =
    useRef<
      kakao.maps.drawing.DrawingManager<
        | kakao.maps.drawing.OverlayType.ARROW
        | kakao.maps.drawing.OverlayType.CIRCLE
        | kakao.maps.drawing.OverlayType.ELLIPSE
        | kakao.maps.drawing.OverlayType.MARKER
        | kakao.maps.drawing.OverlayType.POLYLINE
        | kakao.maps.drawing.OverlayType.RECTANGLE
        | kakao.maps.drawing.OverlayType.POLYGON
      >
    >(null)
  const [undoable, setUndoable] = useState(false)
  const [redoable, setRedoable] = useState(false)

  function selectOverlay(type: kakao.maps.drawing.OverlayType) {
    const manager = managerRef.current
    manager.cancel()
    manager.select(type)
  }

  const handleStateChanged = () => {
    const manager = managerRef.current

    setRedoable(manager.redoable())
    setUndoable(manager.undoable())
  }

  const undo = () => {
    const manager = managerRef.current
    manager.undo()
  }

  const redo = () => {
    const manager = managerRef.current
    manager.redo()
  }

  return (
    <>
      <Map
        center={{
          // 지도의 중심좌표
          lat: 33.450701,
          lng: 126.570667,
        }}
        style={{
          width: "100%",
          height: "450px",
        }}
        level={3} // 지도의 확대 레벨
      >
        <DrawingManager
          ref={managerRef}
          onStateChanged={handleStateChanged}
          drawingMode={[
            kakao.maps.drawing.OverlayType.ARROW,
            kakao.maps.drawing.OverlayType.CIRCLE,
            kakao.maps.drawing.OverlayType.ELLIPSE,
            kakao.maps.drawing.OverlayType.MARKER,
            kakao.maps.drawing.OverlayType.POLYLINE,
            kakao.maps.drawing.OverlayType.RECTANGLE,
            kakao.maps.drawing.OverlayType.POLYGON,
          ]}
          guideTooltip={["draw", "drag", "edit"]}
          markerOptions={{
            // 마커 옵션입니다
            draggable: true, // 마커를 그리고 나서 드래그 가능하게 합니다
            removable: true, // 마커를 삭제 할 수 있도록 x 버튼이 표시됩니다
          }}
          polylineOptions={{
            // 선 옵션입니다
            draggable: true, // 그린 후 드래그가 가능하도록 설정합니다
            removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다
            editable: true, // 그린 후 수정할 수 있도록 설정합니다
            strokeColor: "#39f", // 선 색
            hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일
            hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도
          }}
          rectangleOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f", // 외곽선 색
            fillColor: "#39f", // 채우기 색
            fillOpacity: 0.5, // 채우기색 투명도
          }}
          circleOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
          }}
          polygonOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
            hintStrokeStyle: "dash",
            hintStrokeOpacity: 0.5,
          }}
          arrowOptions={{
            draggable: true, // 그린 후 드래그가 가능하도록 설정합니다
            removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다
            editable: true, // 그린 후 수정할 수 있도록 설정합니다
            strokeColor: "#39f", // 선 색
            hintStrokeStyle: "dash", // 그리중 마우스를 따라다니는 보조선의 선 스타일
            hintStrokeOpacity: 0.5, // 그리중 마우스를 따라다니는 보조선의 투명도
          }}
          ellipseOptions={{
            draggable: true,
            removable: true,
            editable: true,
            strokeColor: "#39f",
            fillColor: "#39f",
            fillOpacity: 0.5,
          }}
        />
      </Map>
      <div
        style={{
          display: "flex",
          gap: "8px",
        }}
      >
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.POLYLINE)
          }}
        >
          선
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.ARROW)
          }}
        >
          화살표
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.CIRCLE)
          }}
        >
          원
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.MARKER)
          }}
        >
          마커
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.POLYGON)
          }}
        >
          다각형
        </button>
        <button
          onClick={(e) => {
            selectOverlay(kakao.maps.drawing.OverlayType.RECTANGLE)
          }}
        >
          사각형
        </button>
      </div>
      <div>
        <button disabled={!undoable} onClick={undo}>
          undo
        </button>
        <button disabled={!redoable} onClick={redo}>
          redo
        </button>
      </div>
    </>
  )
}