Мероприятия

Каждое изменение в рабочей области вызывает событие. Эти события полностью описывают состояние до и после каждого изменения.

Слушайте события из рабочей области

В рабочих областях есть методы addChangeListener и removeChangeListener , которые можно использовать для прослушивания потока событий. Одним из примеров является генерация кода в реальном времени . Другой пример — демо-версия максимального лимита блоков . Как это часто бывает, ни один из этих двух примеров не заботится о том, какое событие стало триггером. Они просто смотрят на текущее состояние рабочего пространства.

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

function onFirstComment(event) {
  if (event.type == Blockly.Events.BLOCK_CHANGE &&
      event.element == 'comment' &&
      !event.oldValue && event.newValue) {
    alert('Congratulations on creating your first comment!')
    workspace.removeChangeListener(onFirstComment);
  }
}
workspace.addChangeListener(onFirstComment);

Чтобы прослушивать любые события, происходящие внутри всплывающего окна, в рабочую область всплывающего окна можно добавить прослушиватель.

var flyoutWorkspace = yourWorkspace.getFlyout().getWorkspace();
flyoutWorkspace.addChangeListener(onFirstComment);

Слушайте события из блоков

Блоки могут иметь функции прослушивания изменений, которые вызываются при любом изменении рабочей области (включая те, которые не связаны с блоком). Они часто используются для установки текста предупреждения блока или аналогичного уведомления пользователя за пределами рабочей области.

Функция добавляется путем вызова Block.setOnChange с функцией и может быть выполнена во время инициализации или через расширение JSON , если вы планируете использовать его на всех платформах.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

Вы также можете установить свойство onchange непосредственно в блоке:

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.onchange = function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    };
  }
}

Система вызывает функцию, передавая событие изменения. Внутри функции this относится к экземпляру блока.

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

Примеры см. в блоках controls_flow_statements , logic_compare и procedures_ifreturn .

Обратите внимание, что редактируемые поля имеют собственные прослушиватели событий для проверки ввода и возникновения побочных эффектов.

Типы событий

Информацию об отдельных событиях можно найти в справочной документации .

Демо

Пример интересных вещей, которые можно делать с событиями, можно посмотреть в демонстрационной версии зеркала . В этой демонстрации есть два рабочих пространства Blockly, которые синхронизируются с помощью событий.