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

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

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

Виды ожидающих соединений

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

Замена

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

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

Вставка

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

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

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

Если вы хотите использовать другой визуальный элемент для предварительного просмотра ожидающих подключений, вы можете создать пользовательскую реализацию 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,
  },
};

Более подробную информацию о регистрации см. в разделе Внедрение подклассов .