Method click_handler

js/src/Map.ts:181–233

()

  }

  click_handler() {
    const el = d3.select(d3GetEvent().target);
    if (this.is_hover_element(el)) {
      const data: any = el.data()[0];
      const idx = this.model.get('selected') || [];
      const selected = Array.from(idx);
      const elem_index = selected.indexOf(data.id);
      if (elem_index > -1) {
        selected.splice(elem_index, 1);
        el.transition('click_handler').style('fill-opacity', 0.0);
        this.highlight_g.selectAll('.hovered').remove();
        const choice = '#c'.concat(data.id.toString());
        d3.select(choice).remove();
      } else {
        this.highlight_g.selectAll('.hovered').remove();
        this.highlight_g
          .append(() => {
            return el.node().cloneNode(true);
          })
          .attr('id', 'c' + data.id)
          .classed('selected', true)
          .classed('event_layer', false);

        if (
          this.validate_color(this.model.get('selected_styles').selected_fill)
        ) {
          this.highlight_g
            .selectAll('.selected')
            .style('fill-opacity', 1.0)
            .style('fill', this.model.get('selected_styles').selected_fill);
        }

        if (
          this.validate_color(this.model.get('selected_styles').selected_stroke)
        ) {
          this.highlight_g
            .selectAll('.selected')
            .style('stroke', this.model.get('selected_styles').selected_stroke)
            .style(
              'stroke-width',
              this.model.get('selected_styles').selected_stroke_width
            );
        }
        selected.push(data.id);
        this.model.set('selected', selected);
        this.touch();
      }
      this.model.set('selected', selected.length === 0 ? null : selected, {
        updated_view: this,
      });
      this.touch();
    }
  }

  reset_zoom(that) {
    that.zoom.transform(that.parent.bg, d3.zoomIdentity);