수식 편집기 패널

긴 수식 및 복잡한 수식은 좁은 수식 입력줄이나 단일 셀 상자에서 보기 및 편집하기 어렵습니다. 따라서, 수식 편집기(formula editor)는 수식을 여러 줄로 나누고 들여쓰기를 적용하여 보다 쉽게 읽고 편집할 수 있도록 해줍니다.

SpreadJS는 이 기능을 gc.spread.sheets.formulapanel.x.x.x.min.js 스크립트 파일에 의존하는 플러그인으로 제공합니다. 따라서, 애플리케이션에서 수식 편집기 패널을 사용하려면 해당 스크립트 파일을 포함해야 합니다.

워크북이 수식 편집기 패널과 동기화되도록 하려면 attach() 메서드를 사용하여 바인딩해야 합니다.

다음 코드 샘플은 워크북을 수식 편집기 패널에 바인딩하는 방법을 보여줍니다.

let workbook = new GC.Spread.Sheets.Workbook("spread-host");
let formulaEditor = new GC.Spread.Sheets.FormulaPanel.FormulaEditor("formula-editor-host");
formulaEditor.options.formatWidthLimit = -1;
formulaEditor.options.tabSize = 4;
formulaEditor.attach(workbook);
......
<!--DOM element-->
<div id="spread-host" style="width:100%; height:250px;border: 1px solid gray;"></div>
<div id="formula-editor-host" style="width:100%; height:300px;border: 1px solid gray;"></div>

수식 편집기는 formatWidthLimit 옵션을 제공하여 선택한 제한 값에 따라 수식 텍스트 너비를 조정할 수 있습니다. 사용 가능한 값은 다음과 같습니다:

또한 tabSize 옵션은 Tab 키를 눌렀을 때 수식 표현식 앞에 삽입될 탭 공백 수를 지정합니다. 수식 편집기를 사용하려면 편집할 수식을 포함하는 셀을 선택합니다. 아래 이미지를 참고하시기 바랍니다 :

주요 기능

수식 편집기의 주요 기능은 아래와 같습니다.

Formatter: 수식 들여쓰기, 공백, 줄바꿈 등을 조정하여 수식을 더 읽기 쉽고 유지보수하기 쉬운 형태로 만듭니다.

자동 완성 제안: 수식 자동 완성, 함수 인수 힌트 등을 제공하여 수식 작성을 더 효율적으로 만들어줍니다. 수식을 입력하는 동안 사용 가능한 함수, 사용자 정의 이름, 열거형 인수 등을 지능적으로 제안합니다:

유연한 아웃라인 뷰: 수식 편집기에서 수식 뷰를 확장 또는 축소할 수 있습니다.

구문 강조 표시: 수식의 다양한 구문 요소를 강조 표시하여 가독성과 사용성을 향상시킵니다.:

Lint 옵션: 잘못된 함수 인수, 괄호 불일치 등 오류를 알려주는 경고 메시지를 제공합니다.

툴팁 정보: 사용자가 함수 위에 마우스를 올리거나 함수를 입력할 때 해당 함수에 대한 자세한 내용을 툴팁으로 표시합니다.

테마 커스터마이징: 여러 테마를 제공하며, 기존 테마를 사용자 지정하여 편집기의 외관을 변경할 수 있습니다.

CSS 파일을 수정하여 수식 편집기의 외형(예: 글꼴, 툴팁, 배경, 전경, 참조된 범위 등)을 변경할 수 있습니다.

다음 CSS는 수식 편집기 패널의 글꼴 및 함수, 문자열, 전경, 배경색을 정의하는 방법을 설명합니다:

// 함수 토큰의 색상을 정의
.gc-formula-editor-token-function {
 color: blue;
}

// 문자열 토큰의 색상을 정의
.gc-formula-editor-token-const-string {
  color: red;
}

// 수식 편집기의 색상, 배경색, 글꼴을 정의
.gc-formula-editor-content {
color: black;
background-color: white;
font: 16px, sans-serif;
}

SpreadJS 디자이너 사용

Spread 디자이너에서 수식 편집기를 사용하려면, 편집할 수식을 포함하는 셀을 선택하고 수식(FORMULAS) > 수식 분석(Formulas Auditing) 탭 그룹의 수식 편집기 표시(Show Formula Editor) 버튼을 클릭해야 합니다.

수식 편집기를 통해 패널에 표시될 수식 뷰를 선택할 수 있습니다. 수식 뷰와 수식 텍스트 모두 편집할 수 있으며, 편집된 수식은 저장(Save) 버튼을 사용해 저장할 수 있습니다. 저장 시, SpreadJS는 에디터 텍스트를 셀에 자동으로 동기화합니다. 또한 editor.commandManager API를 사용하여 비동기화 처리도 가능합니다.

추가로, 설정(Format) 버튼을 사용하여 적용된 수식의 포맷된 트리 뷰를 가져오거나 수식 너비 및 탭 크기 제한을 변경할 수 있습니다.

아래 GIF는 SpreadJS 디자이너의 수식 편집기 패널을 보여줍니다:

단축키

수식 편집기에서 수식을 포맷할 때 사용할 수 있는 단축키는 다음과 같습니다: