Basic

Freehand
Geometry type
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Basic</title>
</head>
<body>
  <div class="container">
    <div class="form">
      <div>
        <button type="button" id="clear">clear</button>
      </div>
      <div>
        <label>Freehand</label>
        <input type="checkbox" id="freehand" />
      </div>
      <div>
        <label>Geometry type</label>
        <select id="draw-type">
          <option value="Point">Point</option>
          <option value="Circle">Circle</option>
          <option value="Line">Line</option>
          <option value="Polygon">Polygon</option>
          <option value="Box">Box</option>
          <option value="RegularPolygon">RegularPolygon</option>
        </select>
        <span id="extend" style="display: none;">
          <label>sides</label>
          <input type="text" id="sides" value="3">
        </span>
      </div>
    </div>
    <div id="pad"></div>
  </div>
</body>
</html>
<script type="module">
  import Sketchpad from '../src/instance/index.js'
  import Draw, {createBox, createRegularPolygon} from '../src/interaction/Draw.js'

  const
    pad = new Sketchpad($('pad')),

    domExtend = $('extend'),
    btnClear = $('clear'),
    inputType = $('draw-type'),
    inputFreehand = $('freehand'),
    inputSides = $('sides')

  function $(selector) {
    return document.getElementById(selector)
  }

  function settingChange() {
    const
      freehandValue = inputFreehand.checked,
      sidesValue = inputSides.value

    let
      typeValue = inputType.value,
      _createGeometryCoordinates

    domExtend.style.display = 'none'

    if (typeValue === 'Box') {
      typeValue = 'Custom'
      _createGeometryCoordinates = createBox()
    } else if (typeValue === 'RegularPolygon') {
      domExtend.style.display = 'inline-block'

      typeValue = 'Custom'
      _createGeometryCoordinates = createRegularPolygon(sidesValue)
    }

    pad.setDraw(new Draw({
      type: typeValue,
      freehand: freehandValue,
      createGeometryCoordinates: _createGeometryCoordinates
    }))
  }

  btnClear.onclick = function() {
    pad.clear()
    pad.clearFeature()
  }

  inputType.onchange = function() {
    settingChange()
  }

  inputFreehand.onchange = function() {
    settingChange()
  }

  inputSides.onchange = function() {
    settingChange()
  }

  settingChange()
</script>