Предварительный просмотр подключений

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

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

Виды ожидающих подключений

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

Замена

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

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

Вставка

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

По умолчанию мы указываем это, создавая маркеры вставки и выделяя соединения, которые будут соединяться.

Создайте собственный просмотрщик

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

Строительство и утилизация

Вам необходимо реализовать конструктор и метод удаления для вашего IConnectionPreviewer .

Конструктор вызывается каждый раз, когда начинается перетаскивание блока, и ему передается перетаскиваемый блок. Если вам нужно инициализировать какое-либо состояние на основе блока, вы можете сделать это в конструкторе.

class MyConnectionPreviewer implements IConnectionPreviewer {
  constructor(draggedBlock: Blockly.BlockSvg) {
    // Initialize state here.
  }
}

Метод dispose вызывается всякий раз, когда перетаскивание блока заканчивается. Если вам нужно разыменовать какое-либо состояние при удалении экземпляра IConnectionPreviewer , вам следует сделать это здесь.

dispose() {
  // Dispose of and dereference any state.
}

Создать предварительный просмотр

Ваш IConnectionPreviewer должен реализовать логику для визуального предварительного просмотра соединений.

Замена

Для предварительного просмотра замен реализуйте методпредварительного previewReplacement .

previewReplacement(draggedConn, staticConn, replacedBlock) {
  // Visually indicate that the replacedBlock will be disconnected, and the
  // draggedConn will be connected to the staticConn.
}

Вставка

Для предварительного просмотра вставок реализуйте метод previewConnection .

previewConnection(draggedConn, staticConn) {
  // Visually indicate the draggedConn will be connected to the staticConn.
}

Если вы хотите иметь другой предварительный просмотр в зависимости от того, подключается ли перетаскиваемый блок к пустому входу или вставляется между блоками, вы можете проверить, подключен ли staticConn в данный момент к другому соединению. Если staticConn в данный момент подключен, то draggedConn вставляется между блоками.

previewConnection(draggedConn, staticConn) {
  if (staticConn.targetConnection) {
    // The dragged block is being inserted between blocks.
  } else {
    // The dragged block is connecting to an empty input.
  }
}

Предварительный просмотр CSS

Вы можете просмотреть соединения, применив CSS к блоку. Например, затухание замены по умолчанию переключается путем добавления в блок CSS-класса blocklyReplaceable .

previewReplacement(draggedConn, staticConn, replacedBlock) {
  Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}

Предварительный просмотр рендерера

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

previewReplacement(draggedConn, staticConn, replacedBlock) {
  const renderer = replacedBlock.workspace.getRenderer()
  if (renderer.addReplacementIndicator) {
    renderer.addReplacementIndicator(replacedBlock);
  }
}

Скрыть предварительный просмотр

Ваш IConnectionPreviewer должен иметь возможность скрывать предварительный просмотр. Это вызывается, когда перетаскиваемый блок выходит за пределы диапазона всех соединений, поэтому предварительный просмотр не должен отображаться. Он также вызывается непосредственно перед удалением средства предварительного просмотра.

hidePreview() {
  // Remove CSS classes, toggle renderer methods, etc.
}

Регистрация и использование

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

Blockly.registry.register(
  Blockly.registry.Type.CONNECTION_PREVIEWER,
  'MyConnectionPreviewer',
  MyConnectionPreviewer,
);

// You can use the string.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: 'myConnectionPreviewer',
  },
};

// Or you can pass the class / constructor directly.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: MyConnectionPreviewer,
  },
};

Дополнительные сведения о регистрации см. в разделе Внедрение подклассов .