levvsha

export const getSelectionRange = () => {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return null;
  return selection.getRangeAt(0);
};

levvsha

export default class DraftEditor extends Component {
  constructor() {
    super();

    this.state = {
      editorState: EditorState.createEmpty()
    };

    this.onChange = (editorState) => {
      console.log('editorState ==>', editorState.toJS());

levvsha

const zoom = d3.zoom()
  .scaleExtent([1, 10])
  .translateExtent([[0, 0], [chartAreaWidth, chartAreaHeight]])
  .on('start', () => {
    hoverDot
      .attr('cx', -5)
      .attr('cy', 0);
  })
  .on('zoom', zoomed);
  

levvsha

function dragged(d) {
  const draggedNodeWidth = draggedNode.attr('width');
  const draggedNodeHeight = draggedNode.attr('height');
  const x = clamp(d3.event.x, 0, previewWidth - draggedNodeWidth);
  const y = clamp(d3.event.y, 0, previewHeight - draggedNodeHeight);

  d3.select(this)
    .attr('x', d.x = x)
    .attr('y', d.y = y);

levvsha

const previewX = d3.scaleTime()
  .range([0, previewWidth]);

const previewY = d3.scaleLinear()
  .range([previewHeight, 0]);

/* ... */

previewX.domain(d3.extent(data, d => d.date));
previewY.domain([0, d3.max(data, d => d.percent)]);

levvsha

const margin = { top: 20, right: 20, bottom: 250, left: 50 };
const previewMargin = { top: 10, right: 10, bottom: 15, left: 30 };
const width = 750 - margin.left - margin.right;
const height = 615 - margin.top - margin.bottom;

const ratio = 4;

const previewWidth = width / ratio;
const previewHeight = height / ratio;

levvsha

const lineGenerator = d3.line()
  .x(d => rescaledX(d.date))
  .y(d => rescaledY(d.percent));
  
/* ... */

function voronoiMouseover(d) {
  /* ... */
  
  hoverDot

levvsha

function zoomed() {
  const transformation = d3.event.transform;

  const rightEdge = Math.abs(transformation.x) / transformation.k + width / transformation.k;
  const bottomEdge = Math.abs(transformation.y) / transformation.k + height / transformation.k;

  if (rightEdge > width) {
    transformation.x = -(width * transformation.k - width);
  }

levvsha

function voronoiMouseover(d) {
  legendsDate.text(timeFormatter(d.data.date));

  legendsValues.text(dataItem => {
    const value = percentsByDate[d.data.date][dataItem];

    return value ? value + '%' : 'N.A.';
  });

  d3.select(`#region-${ d.data.regionId }`).classed('region-hover', true);

levvsha

const legendsDate = legendsSvg.append('text')
  .attr('visibility', 'hidden')
  .attr('x', 0)
  .attr('y', 10);

const legendsValues = legends
  .append('text')
  .attr('x', 0)
  .attr('y', 10)
  .attr('class', 'legend-value');