Method setActiveTool

js/main.js:1511–1570

(b)

  setActiveTool(b) {
    this.activeTool = b;
    
    this.zoomButtonActive = false;
    const btnEl = this.getBtnEl(this.activeTool);
    if (btnEl) {
      btnEl.className += ' ptro-color-active-control';
    }
    let ctrls = '';
    (b.controls || []).forEach((ctl) => {
      ctl.id = genId();
      if (ctl.title) {
        ctrls += `<span class="ptro-tool-ctl-name" title="${tr(ctl.titleFull)}">${tr(ctl.title)}</span>`;
      }
      if (ctl.type === 'btn') {
        ctrls += `<button type="button" ${ctl.hint ? `title="${tr(ctl.hint)}"` : ''} class="ptro-color-control ${ctl.icon ? 'ptro-icon-btn' : 'ptro-named-btn'}" ` +
          `id=${ctl.id}>${ctl.icon ? `<i class="ptro-icon ptro-icon-${ctl.icon}"></i>` : ''}` +
          `<p>${ctl.name || ''}</p></button>`;
      } else if (ctl.type === 'color') {
        ctrls += `<button type="button" id=${ctl.id} data-id='${ctl.target}' ` +
          `style="background-color: ${this.colorWidgetState[ctl.target].alphaColor}" ` +
          'class="color-diwget-btn ptro-color-btn ptro-bordered-btn ptro-color-control"></button>' +
          '<span class="ptro-btn-color-checkers-bar"></span>';
      } else if (ctl.type === 'int') {
        ctrls += `<input id=${ctl.id} class="ptro-input" type="number" min="${ctl.min}" max="${ctl.max}" ` +
          `data-id='${ctl.target}'/>`;
      } else if (ctl.type === 'bool') {
        ctrls += `<button id=${ctl.id} class="ptro-input ptro-check" data-value="false" type="button" ` +
          `data-id='${ctl.target}'></button>`;
      } else if (ctl.type === 'dropdown') {
        let options = '';
        ctl.getAvailableValues().forEach((o) => {
          options += `<option ${o.extraStyle ? `style='${o.extraStyle}'` : ''}` +
            ` value='${o.value}' ${o.title ? `title='${o.title}'` : ''}>${o.name}</option>`;
        });
        ctrls += `<select id=${ctl.id} class="ptro-input" ` +
          `data-id='${ctl.target}'>${options}</select>`;
      }
    });
    this.toolControls.innerHTML = ctrls;
    (b.controls || []).forEach((ctl) => {
      if (ctl.type === 'int') {
        this.getElemByIdSafe(ctl.id).value = ctl.getValue();
        if (ctl.options && ctl.options.eventOnChange){
          this.getElemByIdSafe(ctl.id).onchange = ctl.action;
        } else {
        this.getElemByIdSafe(ctl.id).oninput = ctl.action;
        }
      } else if (ctl.type === 'bool') {
        this.getElemByIdSafe(ctl.id).setAttribute('data-value', ctl.getValue() ? 'true' : 'false');
        this.getElemByIdSafe(ctl.id).onclick = ctl.action;
      } else if (ctl.type === 'dropdown') {
        this.getElemByIdSafe(ctl.id).onchange = ctl.action;
        this.getElemByIdSafe(ctl.id).value = ctl.getValue();
      } else {
        this.getElemByIdSafe(ctl.id).onclick = ctl.action;
      }
    });