Angular には Material Component がたくさん用意されていますので、コピペである程度のGUIを開発していくことができます。
今回は、SideNav と Monaco-Editorを使用して、エディターっぽいGUIを開発してみます。
※中身の実装はしていませんので、GUIで動くところだけです。
1. 完成イメージ
右側にVisual Studio Codeライクなエディタを配置し、左側にフォルダツリーを表示します。フォルダツリーはトグルボタンで、表示と非表示を切り替えることができるようにしています。
2. 構成
ものすごくわかりにくいですが、コンポーネント構成はこんな感じです。
Material Design の Drawer と SideNav で大枠を作成し、左側のフォルダツリーは Tree コンポーネントを使用しています。また、右側のエディタは Monaco Editor を使用しました。
3. コンポーネント作成
以下のコマンドで、Angular コンポーネントを作成します。
ng generate component EditorArea
今回は EditorArea というコンポーネントを作成します。
4. Drawer SideNav 配置
https://material.angular.io/components/sidenav/overview
MatSidenavModule が必要ですので、app.module.ts に追加します。
HTML は以下のように書きました。
<mat-drawer #drawer class="sidenav" mode="side">
File Folder Tree
Editor
5. Visual Studio Code ライクエディタ
Monaco Editor というオープンソースのJavascript ライブラリを使用します。
https://github.com/atularen/ngx-monaco-editor
上記の github のページのとおりにパッケージをインストールしていきます。
editor-area.component.ts ファイルに以下を記述します。
editorOptions = {theme: 'vs-dark', language: 'javascript'};
code: string= 'function x() {\nconsole.log("Hello world!");\n}';
HTML は以下のようになります。
<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
6. フォルダツリー
Material Design の Tree コンポーネントを使用します。
https://material.angular.io/components/tree/overview
MatTreeModule が必要ですので、app.module.ts に追加します。
ほぼサンプルのコピーですが、HTML は以下のようにしました。
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
{ {node.name}}
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{ {treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{ {node.name}}
</mat-tree-node>
</mat-tree>
メニュー構成は以下のように定義します。
const TREE_DATA: FoodNode[] = [
{
name: 'Sample Project',
children: [
{name: 'index.js'},
{name: 'config.json'},
{name: '.gitignore'},
]
}
];
サンプルどおりにその他もろもろをコーディングしていきます。
7. フォルダツリーの表示／非表示のトグルボタン
表示／非表示のトグルは drawer.toggle() 関数で出来ます。
HTML に以下のように書けば実装できると思います。
<button type="button" mat-button (click)="drawer.toggle();" id="ToggleTreeButton">
{ {ToggleLabel}}
</button>
コメント