컨텍스트 메뉴

컨텍스트 메뉴에는 작업공간의 일부 요소와 관련하여 실행할 수 있는 작업 목록이 포함되어 있습니다. 마우스 오른쪽 버튼을 클릭하고 길게 누르면 컨텍스트 메뉴가 표시됩니다.

사용자가 실행할 수 있는 새로운 종류의 작업을 추가하려면 맞춤 컨텍스트 메뉴 옵션을 만드는 것이 좋습니다. 예를 들어 작업공간에서 모든 블록을 구성하거나 블록 이미지를 다운로드합니다. 작업이 드물게 사용될 것 같다면 컨텍스트 메뉴에 작업을 넣는 것이 좋습니다. 그렇지 않으면 작업에 액세스하는 더 검색 가능한 방법을 만드는 것이 좋습니다.

새 옵션 구현

새 컨텍스트 메뉴 옵션을 구현하려면 RegistryItem 인터페이스를 처리해야 합니다.

ID

id 속성은 컨텍스트 메뉴 옵션의 기능을 나타내는 고유한 문자열이어야 합니다.

const deleteOption = {
  id: 'deleteElement',
};

범위

scopeType 속성은 메뉴 옵션이 표시될 수 있는 컨텍스트와 displayText, preconditionFn, callback에 전달할 정보를 Blockly에 알립니다. 컨텍스트 메뉴는 차단, 작업공간 댓글, 작업공간으로 범위를 지정할 수 있습니다.

const deleteOption = {
  scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
};

컨텍스트 메뉴가 여러 범위에서 작동하도록 하려면 컨텍스트 메뉴 옵션을 복제하고 각 범위의 범위 매개변수를 재정의해야 합니다.

const otherDeleteOption = {...deleteOption};
otherDeleteOption.scopeType = Blockly.ContextMenuRegistry.ScopeType.COMMENT;

표시 텍스트

displayText는 메뉴 옵션의 일부로 사용자에게 표시되어야 합니다. 표시 텍스트는 문자열, HTML 또는 문자열이나 HTML을 반환하는 함수일 수 있습니다.

const deleteOption = {
  displayText: 'Delete block',
};

Blockly.Msg의 번역을 표시하려면 함수를 사용해야 합니다. 값을 직접 할당하려고 하면 메시지가 로드되지 않을 수 있으며 대신 undefined 값이 표시됩니다.

const deleteOption = {
  displayText: () => Blockly.Msg['MY_DELETE_OPTION_TEXT'],
};

함수를 사용하는 경우 컨텍스트 메뉴가 연결된 요소 (예: 블록 또는 작업공간)에 액세스할 수 있는 Scope 값도 전달됩니다. 이를 사용하여 요소에 대한 정보를 표시 텍스트에 추가할 수 있습니다.

const deleteOption = {
  displayText: (scope) => `Delete ${scope.block.type} block`,
}

무게

weight는 컨텍스트 메뉴 항목이 표시되는 순서를 결정합니다. 양수 값이 많은 값이 양수 값이 아닌 값보다 목록에서 낮게 표시됩니다. 가중치가 높은 옵션은 '더 무거워' 맨 아래로 가라앉는다고 생각할 수 있습니다.

const deleteOption = {
  weight: 10;
}

기본 제공 컨텍스트 메뉴 옵션의 가중치는 1에서 시작하여 1씩 증가하는 순서로 진행됩니다.

전제조건

scopeType 외에도 preconditionFn를 사용하여 컨텍스트 메뉴 옵션이 표시되는 시기와 방법을 제한할 수 있습니다.

문자열 집합 'enabled', 'disabled', 'hidden' 중 하나를 반환해야 합니다.

값	설명	이미지
사용 설정됨	옵션이 활성 상태임을 표시합니다.
사용 중지됨	옵션이 활성화되지 않았음을 나타냅니다.
히든	옵션을 숨깁니다.

preconditionFn에는 옵션의 상태를 확인하는 데 사용할 수 있는 Scope도 전달됩니다.

const deleteOption = {
  preconditionFn: (scope) => {
    if (scope.block.isDeletable()) {
      return 'enabled';
    }
    return 'disabled';
  }
}

콜백

callback 속성은 컨텍스트 메뉴 항목의 작업을 실행합니다. Scope 및 PointerEvent이 전달됩니다. PointerEvent는 옵션을 선택한 이벤트가 아니라 컨텍스트 메뉴 열기를 트리거한 원래 이벤트입니다. 이벤트를 사용하여 클릭이 발생한 위치를 파악할 수 있습니다. 이렇게 하면 예를 들어 클릭 위치에 새 블록을 만들 수 있습니다.

const deleteOption = {
  callback: (scope, e) => {
    scope.block.dispose();
  }
}

등록

컨텍스트 메뉴 옵션을 사용하려면 등록해야 합니다. 이 작업은 페이지 로드 시 한 번 수행해야 합니다. 작업공간을 삽입하기 전이나 후에 발생할 수 있습니다.

const deleteOption = { /* implementations from above */ };
Blockly.ContextMenuRegistry.registry.register(deleteOption);

블록 유형별 옵션 수정

블록에는 컨텍스트 메뉴를 수정할 수 있는 추가적인 방법이 있습니다. 이 방법으로 customContextMenu 속성을 덮어씁니다. 이 메서드는 등록된 메뉴 항목에서 정렬된 ContextMenuOption 객체의 배열을 가져온 다음 해당 배열을 제자리에서 수정하여 표시되는 최종 옵션 집합을 결정합니다.

자세한 내용은 블록 정의, 맞춤 컨텍스트 메뉴를 참고하세요.

작업공간에는 비슷하게 작동하는 configureContextMenu 메서드도 있습니다.

옵션 삭제하기

ID로 등록을 취소하여 컨텍스트 메뉴에서 옵션을 삭제할 수 있습니다.

Blockly.ContextMenuRegistry.registry.unregister('someID');

기본 옵션의 ID는 contextmenu_items.ts에 있습니다.

옵션 수정하기

레지스트리에서 항목을 가져온 다음 해당 위치에서 수정하여 기존 옵션을 수정할 수 있습니다.

const option = Blockly.ContextMenuRegistry.registry.getItem('someID');
option?.displayText = 'some other display text';