Jquery Блок-схема. При необходимости создать пользовательский оператор - PullRequest
Новая
       18

Jquery Блок-схема. При необходимости создать пользовательский оператор

0 голосов
/ 17 апреля 2020

Так что я использую jquery блок-схему для создания блок-схемы. Все работает, но я хочу поместить некоторые другие вещи в одного из операторов. Изображение из блок-схемы, которую я сейчас использую

Как вы можете видеть на этом изображении, операторы выглядят так, как они их делают. Я хочу вставить два поля ввода в большой блок оператора, один datetime и один текстовый ввод. Я не могу найти источник о том, как это сделать.

Я реверс-инжиниринг сжатой и свернутой jquery блок-схемы больших js библиотек и нашел в ней этот код: 

_getOperatorFullElement: function(t) {
            var e = this.getOperatorCompleteData(t),
                o = m('<div class="flowchart-operator"></div>');
            o.addClass(e.class);
            var r = m('<div class="flowchart-operator-title"></div>');
            r.html(e.title), r.appendTo(o);
            var n = m('<div class="flowchart-operator-body"></div>');
            n.html(e.body), e.body && n.appendTo(o);
            var a = m('<div class="flowchart-operator-inputs-outputs"></div>'),
                i = m('<div class="flowchart-operator-inputs"></div>'),
                s = m('<div class="flowchart-operator-outputs"></div>');
                this.options.verticalConnection ? (i.prependTo(o), s.appendTo(o)) : (a.appendTo(o), i.appendTo(a), s.appendTo(a));
            var l = this,
                p = {},
                c = {},
                h = {},
                u = {},
                d = {
                    operator: o,
                    title: r,
                    body: n,
                    connectorSets: h,
                    connectors: u,
                    connectorArrows: p,
                    connectorSmallArrows: c
                };

Хорошо, операторы генерируются так. Поэтому, если я добавлю к нему свои пользовательские входные данные следующим образом: 

_getOperatorFullElement: function(t) {
            var e = this.getOperatorCompleteData(t),
                o = m('<div class="flowchart-operator"></div>');
            o.addClass(e.class);
            var r = m('<div class="flowchart-operator-title"></div>');
            r.html(e.title), r.appendTo(o);
            var n = m('<div class="flowchart-operator-body"></div>');
            n.html(e.body), e.body && n.appendTo(o);
            var a = m('<div class="flowchart-operator-inputs-outputs"></div>'),
                i = m('<div class="flowchart-operator-inputs"></div>'),
                s = m('<div class="flowchart-operator-outputs"></div>');
                datetime = m('<div class="pickerbox"><input style="cursor:pointer;"type="text" id="datetimepicker"/></div>'); /* this is my datetime custom input */
            this.options.verticalConnection ? (i.prependTo(o), s.appendTo(o)) : (a.appendTo(o), i.appendTo(a), s.appendTo(a),datetime.appendTo(o));
            var l = this,
                p = {},
                c = {},
                h = {},
                u = {},
                d = {
                    operator: o,
                    title: r,
                    body: n,
                    connectorSets: h,
                    connectors: u,
                    connectorArrows: p,
                    connectorSmallArrows: c
                };

Это будет добавлено ко всем другим операторам на холсте. Так что я застрял с этим.

Вот как выглядят операторы, когда я добавляю свои собственные операторы

...