연결 미리보기 도구

연결 미리보기 도구는 대기 중인 연결을 시각적으로 미리 보여줍니다. 그것은 드래그 블록이 연결될 때 연결되는 위치를 감소함

기본 연결 미리보기 도구는 삽입 마커를 블록이 연결될 것입니다 또한 연결을 강조 표시하고 페이드 아웃을 적용합니다. 영향을 미칩니다.

대기 중인 연결의 종류

대기 중인 연결에는 두 가지 종류가 있습니다. 한 사례에서 누락된 블록은 기존 블록이 대체되고 기존 블록은 연결이 해제됩니다. 다른 이 경우 다른 블록의 연결을 해제하지 않고 드롭된 블록이 삽입됩니다.

대체

드래그한 블록의 연결이 연결될 때 교체가 발생함 이미 블록이 있는 연결에 연결되고 기존에 다시 연결할 수 있습니다. 드래그한 블록이 드롭되면 교체된 블록이 연결이 끊어지고 드래그된 블록이 그 자리에 연결됩니다.

기본적으로 블록에 페이드 효과를 적용하여 교체됩니다

삽입

삽입은 두 가지 경우에 발생합니다. 드래그 앤 드롭 시 비어 있는 연결에 연결할 것입니다 사용자가 드래그한 블록의 연결은 두 개의 기존 블록 사이에 삽입할 수 있으므로 블록의 연결이 해제되지 않습니다

기본적으로 삽입 마커를 만들고 연결의 역할을 합니다.

맞춤 미리보기 도구 만들기

다른 이미지를 사용하여 대기 중인 연결을 미리 보려면 다음 안내를 따르세요. 맞춤 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,
  },
};

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