plotly / plotly/plotly.js

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

Offen
#6,879 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug P2
Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
28

Beschreibung

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
}

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Reproduziere den Fehler in Plotlys Samples mit ctrl plus Ziehen nach links/rechts oder shift plus Ziehen nach rechts, und verfolge dann die im Issue gezeigten Funktionen onMove und dragTail. Überprüfe, dass das Ziehen abgeschlossen wird, ohne undefined-Updates an _guiRelayout zu übergeben, und dass die Exception nicht mehr in der Konsole erscheint.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
data-visualization
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.