연결 미리보기 도구

연결 미리보기 도구는 대기 중인 연결의 시각적 미리보기를 만듭니다. 드래그 블록이 드롭되면 연결되는 위치를 나타냅니다.

기본 연결 미리보기에서는 블록이 연결되는 위치에 삽입 마커를 배치합니다. 또한 연결 부분을 강조표시하고 교체하거나 연결 해제할 블록에 페이드 효과를 적용합니다.

대기 중인 연결의 유형

대기 중인 연결에는 두 가지 유형이 있습니다. 경우에 따라 드롭된 블록이 기존 블록을 대체하고 기존 블록이 연결 해제됩니다. 다른 경우에는 드롭된 블록이 다른 블록의 연결을 해제하지 않고 삽입됩니다.

교체

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

기본적으로 교체할 블록에 페이드 효과를 적용하여 이를 표시합니다.

삽입

삽입은 두 가지 경우에 발생합니다. 드래그된 블록의 연결이 비어 있는 연결에 연결하려고 할 때 발생합니다. 드래그한 블록의 연결이 이미 블록이 있는 연결로 연결되지만 두 기존 블록 사이에 삽입할 수 있어 기존 블록이 연결 해제되지 않을 때 이러한 상황이 발생합니다.

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

맞춤 미리보기 도구 만들기

다른 시각적 요소를 사용하여 대기 중인 연결을 미리 보려면 맞춤 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에서 미리보기를 숨길 수 있어야 합니다. 이 메서드는 드래그된 블록이 모든 연결의 범위를 벗어나면 호출되므로 미리보기가 표시되지 않습니다. 또한 Previewer가 제거되기 직전에 호출됩니다.

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

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