Автопрокрутка переполнения текста в mxGraph - PullRequest
Новая
       17

Автопрокрутка переполнения текста в mxGraph

1 голос
/ 24 апреля 2019

Я хочу иметь автопрокрутку на метке, если она переполняет контейнер (эффект такой: https://codepen.io/jamesbarnett/pen/kfmKa).Метка в SVG отображается как тег ForeignObject, содержащий значение, заключенное в два элемента div.Я попытался переопределить функцию getLabelValue после загрузки mxGraph, чтобы она помещала значение метки в еще один div с необходимым стилем, но затем метка отображается в левом верхнем углу SVG вместо позиции элемента. 

window.mxCellRenderer.prototype.getLabelValue = function(state) {
        return (
            '<div class="scrolling-text">' +
            state.view.graph.getLabel(state.cell) +
            '</div>'
        );
    };

CSS: 

.scrolling-text {
        position: absolute;
        overflow: hidden;
        animation: marquee 5s linear infinite;
    }

    @keyframes marquee {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

Мне удается избавиться от foreignObject с помощью window.mxClient.NO_FO = true; Таким образом, div метки находится вне SVG, его позиция верна, но div обертки потерял свое измерение, поэтому метка не видна.

Важные моменты:

  1. Диаграмма создается с использованием draw.io, а затем отображается с помощью mxGraph.
  2. Значение метки будет изменено с событием mxValueChange, и анимация не должна сбрасываться после изменения.

Как реализовать такой эффект с заданными ограничениями?

...