Как отобразить разные фигуры в каждой строке диаграммы Ганта SAPUI5? - PullRequest
Новая
       33

Как отобразить разные фигуры в каждой строке диаграммы Ганта SAPUI5?

1 голос
/ 22 марта 2019

В моем приложении я должен отобразить проекты, задачи и этапы.Проекты и задачи - это разноцветные полосы, а Milestone - это Diamond (я использую BaseRectangle и BaseDiamond соответственно).

Так как некоторые элементы в моей иерархии - это Projects, Some Tasks и Some Milestones,как я могу отображать разные формы в каждой строке?

Моей первой мыслью было использование общего свойства visible, но у форм его нет, наоборот, «непрозрачность» делает вещи невидимыми, но они все равно реагируют наположение мыши.

Затем я попытался использовать фабричную функцию агрегации, но, хотя мой график правильно отображается при первом отображении, он не пересчитывает фигуры на расширяющихся или сворачивающихся ветвях.

Кажется,мне, что фабричная функция должна работать, но в диаграмме что-то ломается, что не выдает ошибок в консоль.

На данный момент в моем шаблоне XML у меня есть следующее:

  • rowSettingTemplate имеет shapes1={path: factory:} и не имеет shapes1 элемента.
  • Каждый из моих BaseShapes находится в отдельном фрагменте, который прикрепленк моим TreeTable как зависимым.

Пример фрагмента формы - Project.fragment.xml 

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:gnt2="sap.gantt.simple">

    <gnt2:BaseRectangle id="shapeProject"
        shapeId="{plandata>id}" countInBirdEye="true"
        time="{plandata>start_date}" endTime="{plandata>end_date}"
        resizable="true" selectable="true" draggable= "true" connectable="true"
        title="{plandata>text}" showTitle="true"
        tooltip=""
        fill="#0c1" />

</core:FragmentDefinition>

Фабричная функция: 

    shapeFactory: function(sId, oContext) {
        var parentId = (/(.*)-\d+$/.exec(sId))[1];
        var rowSettings = sap.ui.getCore().byId(parentId);

        var node: Project.Node = oContext.getProperty();

        if (String(node.id) == rowSettings.getProperty("rowId")) {
            switch (node.type) {
                case "project":
                    return this.byId('shapeProject').clone(sId);
                case "task":
                    return this.byId('shapeTask').clone(sId);
                case "milestone":
                    return this.byId('shapeMilestone').clone(sId);
                default:
                    return this.byId('shapeErr').clone(sId);
            }
        } else {
            return this.byId('shapeEmpty').clone(sId);
        }
    }

Моя пустая фигураBaseGroup - обратите внимание, что SAPUI5 падает, если я возвращаю null с завода, поэтому что-то должно быть возвращено, когда я на самом деле ничего не хочу.

Я также попытался обернуть все свои фигуры в BaseGroup, поэтомучто диаграмма всегда видит один и тот же тип элемента управления, но это не работает.Также обратите внимание, что если я возвращаю клон Empty каждый раз без какой-либо специальной логики, тогда диаграмма работает правильно.

Я надеюсь, что это настройки или что-то, чтобы гарантировать, что агрегация работает правильно каждыйвремя.Моя версия SAPUI5 - 1.61.2 - я попробую 1.63.1, когда у меня будет какое-то время, но я думаю, что эта проблема довольно глубока.

Если у кого-то есть какие-либо идеи или примеры кода, это будетс благодарностью.

1 Ответ

1 голос
/ 23 марта 2019

Я нашел обходной путь для этого, который может сэкономить кому-то несколько часов. По сути, вместо определения агрегации shape1 с помощью фабричной функции, я использовал вместо этого тег <shapes1>. Мой тег Shapes1 содержит ссылку на мою собственную форму, которая является производной от BaseRectangle. Моя пользовательская фигура может затем визуализировать любой SVG, который ей требуется, на основе контекста связанного объекта. Теперь моё дерево может разворачиваться и разрушаться, пока рендеринг требует любых форм.

Мой рендерер теперь выглядит так: 

CustomChartShape.prototype.renderElementRectangle = BaseRectangle.prototype.renderElement;
CustomChartShape.prototype.renderElementDiamond = BaseDiamond.prototype.renderElement;

CustomChartShape.prototype.renderElement = function(oRm, oElement) {
    // There is possibilities that x is invalid number.
    // for instance wrong timestamp binded to time property
    if (this.bHasInvalidPropValue) { return; }

    var Node = this.getBindingInfo('endTime').binding.getContext().getProperty();

    if (Node.type == "milestone") {
        this.renderElementDiamond(oRm, oElement);
    } else {
        this.renderElementRectangle(oRm, oElement);
    }
}

Я должен был предоставить функцию 'getD', которая имеет фиксированную ширину, и мне придется пройтись и переписать несколько функций, но я думаю, что это будет работать для меня.

...