단축키

Blockly는 키 (또는 ctrl-C과 같은 키 조합)를 작업에 매핑하는 단축키 레지스트리를 유지합니다. 레지스트리는 복사를 위한 ctrl-C 및 meta-C와 같은 여러 단축키로 미리 채워져 있습니다. 레지스트리에 바로가기를 추가하고 레지스트리에서 바로가기를 삭제할 수 있습니다.

단축키 작동 방식

단축키 등록 기관에는 단축키를 모델링하는 객체가 포함되어 있습니다. 사용자가 키 (또는 키 조합)를 누르면 Blockly는 다음 작업을 실행합니다.

  1. 레지스트리를 확인하여 단축키가 키에 적용되는지 확인합니다. 둘 이상의 단축키가 키를 사용하는 경우 단축키는 등록의 역순으로 시도됩니다. 즉, 가장 최근에 등록된 단축키가 먼저 시도됩니다.

  2. 단축어의 preconditionFn 함수를 호출하여 단축어가 현재 상황에 적용되는지 확인합니다. 예를 들어 복사 단축키는 블록에 적용되지만 워크스페이스에는 적용되지 않습니다. 단축키가 적용되지 않으면 Blockly는 목록에 있는 다음 단축키를 시도합니다(있는 경우).

  3. 바로가기의 callback 함수를 호출하여 바로가기의 작업을 실행합니다. 예를 들어 복사 단축키는 현재 포커스가 있는 객체(예: 블록)의 복사본을 만듭니다. 이 함수가 true을 반환하면 처리가 중지됩니다. false를 반환하면 Blockly는 목록에 있는 다음 단축키를 시도합니다(있는 경우).

범위

Scope 객체는 현재 포커스가 있는 Blockly 구성요소를 식별합니다. 범위 객체는 preconditionFn 및 callback에 전달되며, 이는 이를 사용하여 단축키가 특정 구성요소에 적용되는지 여부와 적용되는 경우 적용 방법을 결정합니다.

Scope 객체를 사용하려면 focusedNode 속성을 사용합니다. IFocusableNode을 구현하는 객체입니다. 이 인터페이스는 사용자 포커스가 가능한 모든 Blockly 구성요소(작업 영역, 블록, 필드, 주석, 자체 맞춤 구성요소 포함)에 의해 구현됩니다. 자세한 내용은 포커스 시스템을 참고하세요.

예를 들어 preconditionFn는 focusedNode를 사용하여 바로가기가 블록에만 적용되도록 할 수 있습니다.

preconditionFn(workspace, scope) {
  return (scope.focusedNode instanceof Blockly.BlockSvg);
}

KeyboardShortcut 인터페이스

바로가기 레지스트리의 객체는 KeyboardShortcut 인터페이스를 구현합니다. 여기에는 다음 속성이 포함됩니다.

이름(필수)

바로가기의 고유한 이름입니다. 사용자에게 표시되지 않으며 사람이 읽을 수 있을 필요는 없습니다. 번역하면 안 됩니다.

const logFieldsShortcut = {
  name: 'logFields',
  // ...
};

preconditionFn (선택사항)

Blockly는 이 함수를 호출하여 단축키가 현재 상황에 적용되는지 여부를 결정합니다. true를 반환하면 Blockly가 callback를 호출합니다. false를 반환하면 Blockly가 이 단축키를 무시합니다. 예를 들면 다음과 같습니다.

const logFieldsShortcut = {
  // ...
  preconditionFn(workspace, scope) {
    // This shortcut only applies to blocks.
    return (scope.focusedNode instanceof Blockly.BlockSvg);
  },
  // ...
};

단축키가 항상 적용되는 경우 (일반적이지 않음) 단축키에서 이 함수를 생략할 수 있습니다. 바로가기는 이 함수를 생략한 후 callback에서 조건부로 작업을 실행하면 안 됩니다. 이렇게 하면 Blockly가 적용 가능한 단축키를 표시하는 컨텍스트 도움말 메뉴를 빌드하는 등의 작업을 하지 않습니다.

콜백 (선택사항)

이 함수는 바로가기와 연결된 작업을 실행합니다. preconditionFn가 true을 반환하거나 존재하지 않는 경우에만 호출됩니다. 매개변수는 다음과 같습니다.

  • workspace: 현재 WorkspaceSvg입니다.
  • e: 바로가기를 시작한 Event입니다.
  • shortcut: KeyboardShortcut 자체입니다.
  • scope: 바로가기가 적용되는 Scope입니다.

성공하면 true를 반환하고 실패하면 false를 반환합니다.

예를 들면 다음과 같습니다.

const logFieldsShortcut = {
  // ...
  callback(workspace, event, shortcut, scope) {
    // preconditionFn required focusedNode to be a BlockSvg.
    for (input of scope.focusedNode.inputList) {
      // Log the values of all named fields. (Label fields usually don't have names.)
      for (field of input.fieldRow) {
        if (field.name) {
          console.log(field.name + ': ' + field.getText());
        }
      }
    }
    return true;
  },
  // ...
};

callback는 선택사항이지만 일반적으로 이를 구현하지 않을 이유는 없습니다.

keyCodes (선택사항)

이 단축키를 활성화하는 키 (또는 키 조합)의 배열입니다. 키를 식별하려면 Blockly.utils.KeyCodes의 키 코드를 사용하세요. 예를 들면 다음과 같습니다.

const logFieldsShortcut = {
  // ...
  keyCodes: [Blockly.utils.KeyCodes.L],
  // ...
};

기존 단축키에 키를 추가로 매핑하려면(예: 기본 단축키에 키를 추가하려는 경우) Blockly.ShortcutRegistry.registry.addKeyMapping를 호출하면 됩니다. 흔한 경우는 아닙니다.

키 조합

Control와 C을 동시에 누르는 등 키 조합으로 단축키가 활성화되는 경우 Blockly.ShortcutRegistry.registry.createSerializedKey를 호출하여 직렬화된 키 코드를 만듭니다.

const ctrlC = Blockly.ShortcutRegistry.registry.createSerializedKey(
  Blockly.utils.KeyCodes.C,       // Keycode of main key
  [Blockly.utils.KeyCodes.CTRL],  // Array of modifier keys
);

const copyShortcut = {
  // ...
  keyCodes: [ctrlC], // Use the serialized keycode
  // ...
};

Control 및 Meta

Windows에서는 Control 키로 많은 단축키가 활성화됩니다. Mac에서는 이러한 단축키가 META 키 코드로 인식되는 Command 키를 대신 사용합니다. 두 운영체제를 모두 지원하려면 CTRL 키 코드와 META 키 코드를 모두 사용하여 단축키를 등록하세요.

const ctrlC = Blockly.ShortcutRegistry.registry.createSerializedKey(
  Blockly.utils.KeyCodes.C,
  [Blockly.utils.KeyCodes.CTRL],
);
const metaC = Blockly.ShortcutRegistry.registry.createSerializedKey(
  Blockly.utils.KeyCodes.C,
  [Blockly.utils.KeyCodes.META],
);

const copyShortcut = {
  // ...
  keyCodes: [ctrlC, metaC],
  // ...
};

구현 참고사항

Blockly의 키보드 이벤트 핸들러는 지원 중단되었지만 KeyboardEvent의 keycode 속성을 사용합니다.

allowCollision (선택사항)

기본적으로 지정된 키 또는 키 조합에 단축키를 하나만 등록할 수 있습니다. 이 속성을 true로 설정하면 동일한 키 (또는 키 조합)가 있는 단축키가 이미 등록되어 있더라도 키 (또는 키 조합)를 등록할 수 있습니다.

이 속성은 이 단축키를 등록하려고 할 때만 적용됩니다. 다른 단축키가 동일한 키 (또는 키 조합)를 사용하는 것을 방지하지는 않습니다. 등록 가능 여부는 allowCollision 속성 값에 따라 달라집니다.

특정 키 또는 키 조합에 등록된 단축키 수와 관계없이 최대 하나만 성공적으로 실행됩니다. 단축키는 등록의 역순 (마지막 등록부터 첫 등록까지)으로 시도됩니다. 바로가기 중 하나가 콜백에서 true를 반환하면 다른 바로가기는 시도되지 않습니다.

메타데이터 (선택사항)

추가 정보가 포함된 임의의 객체입니다. shortcut 매개변수를 통해 callback에서 사용할 수 있습니다.

바로가기 추가, 삭제, 수정

새 단축키를 추가하려면 Blockly.ShortcutRegistry.registry.register를 호출하세요.

Blockly.ShortcutRegistry.registry.register(logFieldsShortcut);

이 함수에는 바로가기와 이름이 같은 기존 바로가기를 대체할 수 있는 두 번째 매개변수 (allowOverrides)가 있습니다. 이는 다른 이름을 가진 단축키를 추가할 수 있지만 기존 단축키와 동일한 키 또는 키 조합을 사용하는 KeyboardShortcut.allowCollision와는 다릅니다.

단축키를 삭제하려면 Blockly.ShortcutRegistry.registry.unregister를 호출하고 단축키의 이름을 전달합니다.

Blockly.ShortcutRegistry.registry.unregister('logFields');

바로가기는 수정할 수 없습니다. 대신 기존 단축키를 삭제하고 새 단축키를 추가해야 합니다. 예를 들면 다음과 같습니다.

// Get the existing shortcut. getRegistry returns an object keyed by shortcut name.
const allShortcuts = Blockly.ShortcutRegistry.registry.getRegistry();
const modLogFieldsShortcut = allShortcuts[logFieldsShortcut.name];
// Apply the shortcut only to math blocks,
modLogFieldsShortcut.preconditionFn = function (workspace, scope) {
  return (scope.focusedNode instanceof Blockly.BlockSvg &&
          scope.focusedNode.type.startsWith('math_'));
}
// Delete the existing shortcut and add the modified shortcut.
Blockly.ShortcutRegistry.registry.unregister(logFieldsShortcut.name);
Blockly.ShortcutRegistry.registry.register(modLogFieldsShortcut);

기본 단축키

바로가기 레지스트리는 여러 바로가기로 미리 채워져 있습니다. 이러한 항목은 https://github.com/google/blockly/blob/master/core/shortcut_items.ts에서 확인할 수 있습니다. 단축키는 registerXxxx 함수에 정의되어 있습니다.

키보드 탐색 단축키

키보드 탐색 플러그인에는 사용자가 화살표 키를 사용하는 등 키보드로 Blockly를 탐색할 수 있는 단축키가 포함되어 있습니다. 키보드 탐색은 거동 장애나 시각장애가 있는 사용자 등 마우스를 사용할 수 없는 사용자에게 필수적입니다. 효율성을 위해 단축키를 사용하려는 고급 사용자에게도 유용합니다.