plotly / plotly/plotly.js

Unhandled exception on "ctrl+left/right-click" drag or "shift+right-click" drag on a chart

Aperta
#6,879 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

bug P2
Lingua principale
JavaScript
Stelle
18.3k
Fork
2k
Merge medio
2g 12h
PR unite (30g)
28

Descrizione

On a chart if I hold ctrl and try to drag with left-click or right-click or shift+right-click drag, then getting an exception.

After analyzing the code, I found that ctrl is treated as right-click, and if drag operation and right click then "options.moveFn(dx, dy);" function is not getting called which results in not updating "updates" for the dragTail() function that calls "_guiRelayout" with undefined updates and in that function exception is raised if updates are undefined. Pasting js code of these function below:

This issue can be replicated easily in plotly's samples as well. Just hold ctrl and drag with left/right-click, you can see error in console.

Attaching snapshot:

image

function onMove(e) {
  e.preventDefault();

  var offset = pointerOffset(e);
  var minDrag = options.minDrag || constants.MINDRAG;
  var dxdy = clampFn(offset[0] - startX, offset[1] - startY, minDrag);
  var dx = dxdy[0];
  var dy = dxdy[1];

  if (dx || dy) {
    gd._dragged = true;
    dragElement.unhover(gd);
  }

  if (gd._dragged && options.moveFn && !rightClick) {
    gd._dragdata = {
      element: element,
      dx: dx,
      dy: dy,
    };
    options.moveFn(dx, dy);
  }

  return;
}

// dragTail - finish a drag event with a redraw
function dragTail() {
  // put the subplot viewboxes back to default (Because we're going to)
  // be repositioning the data in the relayout. But DON'T call
  // ticksAndAnnotations again - it's unnecessary and would overwrite `updates`
  updateSubplots([0, 0, pw, ph]);

  // since we may have been redrawing some things during the drag, we may have
  // accumulated MathJax promises - wait for them before we relayout.
  Lib.syncOrAsync(
    [
      Plots.previousPromises,
      function () {
        gd._fullLayout._replotting = false;
        Registry.call("_guiRelayout", gd, updates);
      },
    ],
    gd
  );
}

function relayout(gd, astr, val) {
  gd = Lib.getGraphDiv(gd);
  helpers.clearPromiseQueue(gd);

  if (gd.framework && gd.framework.isPolar) {
    return Promise.resolve(gd);
  }

  var aobj = {};
  if (typeof astr === "string") {
    aobj[astr] = val;
  } else if (Lib.isPlainObject(astr)) {
    aobj = Lib.extendFlat({}, astr);
  } else {
    Lib.warn("Relayout fail.", astr, val);
    return Promise.reject(); // From here exception is raised
  }
  .... Rest of the code
}

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Riproduci il malfunzionamento negli esempi di Plotly con ctrl più trascinamento verso sinistra/destra oppure shift più trascinamento verso destra, quindi segui le funzioni onMove e dragTail mostrate nell’issue. Verifica che il trascinamento venga completato senza passare aggiornamenti undefined a _guiRelayout e che l’eccezione non compaia più nella console.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript
Ambito
data-visualization
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.