Невозможно добавить HTML в элемент JointJS в машинописи - PullRequest
Новая
       33

Невозможно добавить HTML в элемент JointJS в машинописи

0 голосов
/ 22 июня 2019

Я добавляю HTML в код внутри пользовательского элемента JointJS в машинописи.Я следую этому учебнику .Когда я использовал тот же код в машинописи ngOnInit().Я не вижу элементы HTML на бумаге.Я могу проверить, установив непрозрачность в 1, что эти прямоугольники присутствуют, но текст и стиль HTML отсутствуют.

Код: 

joint.shapes['html'] = {};
    joint.shapes['html'].Element = joint.shapes.basic.Rect.extend({
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            attrs: {
                rect: { stroke: 'none', 'fill-opacity': 0 }
            }
        }, joint.shapes.basic.Rect.prototype.defaults)
    });

joint.shapes['html'].ElementView = joint.dia.ElementView.extend({

        template: [
            '<div style="position: absolute; background: #3498DB;z-index: 2000;">',
            '<button class="delete">x</button>',
            '<label></label>',
            '<span></span>', '<br/>',
            '<select><option>--</option><option>one</option><option>two</option></select>',
            '<input type="text" value="I\'m HTML input" />',
            '</div>'
        ].join(''),

        initialize(): void {
            console.log("Init function called") //THIS LINE IS NEVER PRINTED ON THE CONSOLE
            _.bindAll(this, 'updateBox');
            joint.dia.ElementView.prototype.initialize.apply(this, arguments);

            this.$box = $(_.template(this.template)());
            // Prevent paper from handling pointerdown.
            this.$box.find('input,select').on('mousedown click', function(evt) {
                evt.stopPropagation();
            });
            // This is an example of reacting on the input change and storing the input data in the cell model.
            this.$box.find('input').on('change', _.bind(function(evt) {
              this.model.set('input', $(evt.target).val());
            }, this));
            this.$box.find('select').on('change', _.bind(function(evt) {
              this.model.set('select', $(evt.target).val());
            }, this));
            this.$box.find('select').val(this.model.get('select'));
            this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
            // Update the box position whenever the underlying model changes.
            this.model.on('change', this.updateBox, this);
            // Remove the box when the model gets removed from the graph.
            this.model.on('remove', this.removeBox, this);
            console.log("************Init function processed"+this)

            this.updateBox();
        },
        render: function() {
            joint.dia.ElementView.prototype.render.apply(this, arguments);
            this.paper.$el.prepend(this.$box);
            this.updateBox();
            return this;
        },
        updateBox: function() {
          console.log("****This is the time")
          // Set the position and dimension of the box so that it covers the JointJS element.
          var bbox = this.model.getBBox();
          // Example of updating the HTML with a data stored in the cell model.
          this.$box.find('label').text(this.model.get('label'));
          this.$box.find('span').text(this.model.get('select'));
          this.$box.css({
              width: bbox.width,
              height: bbox.height,
              left: bbox.x,
              top: bbox.y,
              transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
          });
      },

      removeBox: function(evt) {
        this.$box.remove();
      }
    });

Я добавилсообщение журнала консоли в методе initialize ElementView, но оно никогда не печатается.Код из учебника такой же, с небольшим изменением joint.shapes.html.Element на joint.shapes['html'].Element, так как машинопись не поддерживает первую.

Может кто-нибудь предложить, какие изменения мне нужно внести, чтобы сделать код совместимым с машинописью?

...