数式エディタパネル

長くて複雑な数式は、狭い数式バーや 1 つのセル ボックスで表示および編集するのが困難です。SpreadJSは数式エディタを提供し、長くて複雑な数式をインデント付きの複数行で表示して、読みやすく編集することができます。

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 要素-->
<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 キー押下で数式の前にタブスペースを挿入するために使用されます。

数式エディタの操作を開始するには、下の画像に示すように、編集する数式を含むセルを選択します。

その他の機能

数式エディタのその他の機能は以下の通りです。

フォーマッタ: 数式のインデント、間隔、改行などを調整して、数式を読みやすく、保守しやすくします。

オートコンプリート：数式のオートコンプリート、関数パラメーターのヒントなどで数式の記述効率を向上させます。数式を入力するときに、使用可能な関数、カスタム名、列挙されたパラメーターなどを提案します。

アウトラインビュー：数式エディタで数式ビューを折りたたんだり展開したりできます。

シンタックスの強調表示：数式内の要素を強調表示して数式を使いやすくて読みやすくにします。

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はエディタのテキストをセルに自動的に同期します。さらに、［フォーマット］ボタンを使用して、数式の書式設定されたツリービューを取得したり、数式の幅とタブサイズの制限を変更したりできます。

次の画像は、デザイナの 数式エディタパネルを示しています。

ショートカットキー

次のショートカットキーは、書式エディタを使用して数式を書式設定するときに使用できます。