Source: control/ControlBarSelectCreate.js

import '../../typedef/index'

import Bar from 'ol-ext/control/Bar'
import Toggle from 'ol-ext/control/Toggle'
import TextButton from 'ol-ext/control/TextButton'
import { getButtonHtml } from './ControlBarUtils'

const onActivate = async function (button) {
  switch (button.get('type')) {
    case 'select':
    case 'multiselect':
    case 'rectangular':
    case 'zonal':
    case 'polygon':
      this.viewer.dataLayer.changeMapMode(button.get('type'), button.get('toolId'))
      break
    case 'create': {
      const options = button.get('options')
      const idFeature = typeof options.idFeature === 'function' ? options.idFeature() : options.idFeature
      const idLayer = typeof options.idLayer === 'function' ? options.idLayer() : options.idLayer
      const geometryType = typeof options.geometryType === 'function' ? options.geometryType() : options.geometryType
      const properties = typeof options.properties === 'function' ? options.properties() : options.properties
      const padding = typeof options.padding === 'function' ? options.padding() : options.padding
      const createTemplates = typeof options.createTemplates === 'function' ? options.createTemplates() : options.createTemplates
      const digitalizeOptions = typeof options.digitalizeOptions === 'function' ? options.digitalizeOptions() : options.digitalizeOptions
      const title = button.get('title')
      const toolId = button.get('toolId')

      try {
        await this.viewer.dataLayer.createFeature({ idFeature, idLayer, geometryType, properties, padding, digitalizeOptions, createTemplates, toolId, title })
        // TODO option createOnce (le retour au select est en dur dans le code, la on remet le select par défaut)
      } catch (ex) {

      } finally {
        button.setActive(false)
      } }
      break
  }
}

// lorsque l'on clic sur un des bouton on referme le menu
// TODO: option autoclose?
const onToggle = function (active) {
  this.toggle.toggle()
}

const getToolDefaultIcon = function (tool) {
  const toolsIcon = {
    select: '<i class="kmapv-icon kmapv-icon-pointer"></i>',
    multiselect: '<i class="kmapv-icon kmapv-icon-multiple"></i>',
    rectangular: '<i class="kmapv-icon kmapv-icon-square"></i>',
    zonal: '<i class="kmapv-icon kmapv-icon-zonal"></i>',
    polygon: '<i class="kmapv-icon kmapv-icon-polygon"></i>',
    create: '<i class="kmapv-icon kmapv-icon-plus"></i>',
  }
  return toolsIcon[tool]
}

/**
 * Creation d'une bar d'outils de selection/creation et de son bouton toggle (a implementer dans une controlbar)
 * @param {SelectCreateOptions} options Options de barre d'outil de selection / creation
 * @returns {Object} ControlBarSelectCreate
 */
const ControlBarSelectCreate = function (options) {
  options = options || {}
  this.viewer = options.viewer || null
  const className = (options.className || '') + ' kmapv-select-create-bar'

  let previousIsSeparator = false

  const controls = options.tools.map((tool) => {
    if (tool.type === 'separator' && !previousIsSeparator) {
      const separator = new TextButton({
        name: 'kmapv-separator',
        className: 'separator',
        text: '',
      })
      separator.set('type', 'separator')
      previousIsSeparator = true
      return separator
    } else if (tool.type === 'separator' && previousIsSeparator) {
      return null
    }

    previousIsSeparator = false
    const ctrl = new Toggle({
      html: getButtonHtml(tool.html, tool.iconId, tool.icon, getToolDefaultIcon(tool.type)),
      name: `kmapv-${tool.type}-${tool.toolId}`,
      title: tool.title,
      onToggle: onToggle.bind(this),
    })

    ctrl.set('type', tool.type)
    ctrl.set('toolId', tool.toolId)
    if (tool.options) {
      ctrl.set('options', tool.options)
    }
    // lorsque l'on clique sur un bouton, le toggle va prendre l'icone du bouton actif, sinon celui du bouton "par défaut"
    ctrl.on('change:active', (evt) => {
      if (evt.active) {
        this.toggle.setHtml(evt.target.getButtonElement().innerHTML)
        onActivate.call(this, evt.target)
      } else if (!bar.getControls().some((ctrl) => ctrl.get('type') !== 'separator' && ctrl.getActive())) {
        this.toggle.getSubBar().getControls()[0].setActive(true)
      }

      if (tool.selectOnce && evt.active) {
        this.viewer.once('change:selection', () => {
          // on décalle le stop de 10ms: le dernier clic pourrait être interprété par l'interaction select et cancel notre dernier outil..
          // l'idéal serait de faire un stopPropagation dans l'event qui trigger change: selection mais on a pas tjs l'event d'origine
          setTimeout(() => ctrl.setActive(false), 10)
        })
      }
    })

    return ctrl
  }).filter((ctrl) => ctrl !== null)

  const bar = new Bar({
    className,
    group: true,
    toggleOne: true,
    controls,
  })

  this.toggle = new Toggle({
    html: 's',
    name: 'kmapv-select-create-bar',
    title: 'Outils de sélection / création',
    bar,
  })
  this.toggle.set('modal', true)

  this.toggle.getSubBar().getControls()[0].setActive(true)

  // si on change le mode vers un mode connu de la toolbar, on le set actif
  this.viewer.on('change:mapmode', (mapMode) => {
    const controls = this.toggle.getSubBar().getControlsByName(`kmapv-${mapMode.name}-${mapMode.toolId}`)
    if (!controls.some((ctrl) => ctrl.getActive())) {
      if (controls.length > 0) {
        controls[0].setActive(true)
      }
    }
  })

  return this.toggle
}

export default ControlBarSelectCreate