고급 맞춤설정

Blockly를 사용하면 해당 Blockly 클래스를 대체하여 특정 기능을 맞춤설정할 수 있습니다.

대체 가능한 클래스

다음 Blockly 클래스를 대체할 수 있습니다.

Blockly 클래스 인터페이스 레지스트리 유형 이름
Blockly.dragging.Dragger Blockly.IDragger blockDragger
Blockly.ConnectionChecker Blockly.IConnectionChecker connectionChecker
Blockly.InsertionMarkerPreviewer Blockly.IConnectionPreviewer connectionPreviewer
Blockly.HorizontalFlyout Blockly.IFlyout flyoutsHorizontalToolbox
Blockly.VerticalFlyout Blockly.IFlyout flyoutsVerticalToolbox
Blockly.MetricsManager Blockly.IMetricsManager metricsManager
Blockly.Toolbox Blockly.IToolbox toolbox
Blockly.VariableMap Blockly.IVariableMap variableMap
Blockly.VariableModel Blockly.IVariableModel --

렌더러를 바꾸는 방법은 맞춤 렌더러 만들기를 참고하세요.

대체 클래스 만들기

대체 클래스를 만들려면 해당 인터페이스에서 함수를 구현하세요. 새 클래스에서 이러한 함수를 모두 구현하거나 Blockly 클래스를 확장하고 변경하려는 함수만 재정의할 수 있습니다. 유일한 요구사항은 인터페이스의 모든 함수를 구현하고 인터페이스의 주석에 설명된 요구사항을 준수해야 한다는 것입니다.

특정 인터페이스를 구현한다고 유형 검사기에 표시하려면 @implements {InterfaceName} JSDoc 태그 (JavaScript) 또는 implements 키워드 (TypeScript)로 클래스에 주석을 추가합니다.

Blockly에 대체 클래스 알리기

Blockly에 대체 클래스를 알리는 방법에는 두 가지가 있습니다. 해당 유형의 기본 클래스로 등록하거나 (권장) plugins 구성 옵션을 사용하여 삽입합니다.

대체 클래스를 기본값으로 등록

Blockly에 대체 클래스를 알리는 기본 방법은 해당 유형의 기본값으로 등록하는 것입니다. 이렇게 하려면 Blockly.registry.DEFAULT 이름을 사용하여 Blockly.registry.register를 호출하고 opt_allowOverrides 매개변수를 true로 설정합니다.

Blockly.registry.register(
  Blockly.registry.Type.VARIABLE_MODEL,
  Blockly.registry.DEFAULT,
  CustomVariableModel,
  true,
);

대체 클래스 삽입

plugins 구성 옵션을 사용하여 대체 클래스를 삽입할 수도 있습니다. 등록 유형 이름을 속성 이름으로 사용하고 대체 클래스 또는 등록된 이름을 속성 값으로 사용하는 객체입니다.

(plugins 속성의 이름과 달리 클래스는 Blockly를 확장하는 데 사용되는 플러그인처럼 npm을 통해 패키징되고 배포될 필요가 없습니다.)

교체 클래스를 Blockly.inject에 전달합니다.

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': CustomMetricsManagerClass
  }
}

또는 Blockly.registry.register를 사용하여 클래스를 등록하고 등록된 이름을 Blockly.inject에 전달합니다. 순수 JSON으로 구성 옵션을 저장하는 경우에 유용합니다.

Blockly.registry.register(Blockly.registry.Type.METRICS_MANAGER, 'YOUR_NAME', CustomMetricsManagerClass);

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': 'YOUR_NAME'
  }
}