연결 미리보기 도구

연결 미리보기 도구는 대기 중인 연결의 시각적 미리보기를 만듭니다. 드래그한 블록을 놓을 때 연결될 위치를 나타냅니다.

기본 연결 미리보기 도구는 블록이 연결될 위치에 삽입 마커를 배치합니다. 또한 연결을 강조 표시하고 교체 및 연결 해제될 블록에 페이드 효과를 적용합니다.

대기 중인 연결의 종류

대기 중인 연결에는 두 가지 종류가 있습니다. 한 경우에는 삭제된 블록이 기존 블록을 대체하고 기존 블록의 연결이 끊어집니다. 다른 경우에는 다른 블록의 연결을 해제하지 않고도 삭제된 블록이 삽입됩니다.

대체

드래그된 블록의 연결이 이미 블록이 있는 연결에 연결되고 기존 블록을 다시 연결할 곳이 없는 경우 대체가 발생합니다. 드래그한 블록을 놓으면 교체된 블록의 연결이 해제되고 드래그한 블록이 그 자리에 연결됩니다.

기본적으로 대체되는 블록에 페이드 효과를 적용하여 이를 나타냅니다.

삽입

삽입은 다음 두 가지 경우에 발생합니다. 드래그된 블록의 연결이 비어 있는 연결에 연결될 때 발생합니다. 드래그된 블록의 연결이 이미 블록이 있는 연결로 이동하지만 두 기존 블록 사이에 삽입할 수 있으므로 기존 블록의 연결이 끊어지지 않는 경우에 발생합니다.

기본적으로 삽입 마커를 만들고 연결할 연결을 강조 표시하여 이를 나타냅니다.

맞춤 미리보기 도구 만들기

다른 시각화를 사용하여 대기 중인 연결을 미리 보려면 맞춤 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를 적용하여 연결을 미리 볼 수 있습니다. 예를 들어 블록에 blocklyReplaceable CSS 클래스를 추가하여 기본 대체 페이드가 전환됩니다.

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,
  },
};

등록에 관한 자세한 내용은 서브클래스 삽입을 참고하세요.