Goでの自動化が唸るカッコいいworkflow画面を作りたい

f:id:kaminashi-developer:20201218053700p:plain

これはGo 4 Advent Calendar 2020 18日目の記事です

こんにちは株式会社カミナシのエンジニアの浦岡です。

個人的に、Goが一番輝きを放つのはworkflowの自動化だと思っています。 k8sなど自動化分野でGoはなくてはならない存在ですよね！

ただ、そのworkflow、テキストで記述するか、画面があってもフローチャートのような物が多く、どこか味けなくないでしょうか？

f:id:kaminashi-developer:20201218061918p:plain

見た目大事！！

少しジャンルは違いますが、こちらIntegromatというiPaaSのworkflow画面です。なんとも個性的じゃないですか？幾何学的なデザインが自動化魂に火をつけてくれます🔥🔥

f:id:kaminashi-developer:20201218053945p:plain

「よし、Workflow作るぞ！」と思い立ったユーザーを盛り立ててくれる演出があってもいいのではないでしょうか？今回モックレベル（見た目だけ）ですが、それっぽい物ができるかチャレンジします！

※GoのAdvent Calendarですが、Goのソースは一切出てきません🙏

チャレンジ

workflowはブラウザ上で扱えるように、webアプリとして作成します。フレームワークには、Goと同じくgoogle製のAngularを使ってみます。

具体的には以下のworkflowの構成要素を作ります。

f:id:kaminashi-developer:20201218054419p:plain — 言葉の定義

ノードの作成

まず、以下の構成でノードとソケットを作ります。

f:id:kaminashi-developer:20201218054724p:plain

ノードはドラッグ操作で移動できるように、Angular CDKのDrag and Dropを使用。

<div class="node" cdkDrag (cdkDragMoved)="handleDragMoved($event)" [cdkDragFreeDragPosition]="node.initialPosition"
 (cdkDragMoved)="handleDragMoved($event)">
   <input-socket *ngIf="node.inputSocket"></input-socket>
   <div class="circle">
     {{node.icon}}
   </div>
   <div class="title">{{node.title}}</div>
   <output-socket *ngIf="node.outputSocket"></output-socket>
</div>

下のようなjsonを基にノードが描画されます。

f:id:kaminashi-developer:20201218055249p:plain

パスの作成

次にノード間を連結するパスで、これはCSSではなくSVGでレイアウトするようにしました。 SVG要素として表現することで、後々アニメーションなども仕込みやすくなるはずです。

<div class="svg-area">
 <svg class="full-screen">
   <path *ngFor="let path of paths" class="svg-path" stroke-dasharray="7, 5" [attr.d]="getD(path)" />
 </svg>
</div>

<node *ngFor="let node of nodes" [node]="node" (changePosition)="handleChangeNodePosition($event)"></node>

SVGのpathタグでベジェ曲線も表現することができます。

public static getD(startPosition: Position, endPosition: Position): string {
   const hx1 =
     startPosition.x + Math.abs(endPosition.x - startPosition.x) * 0.8;
   const hx2 = endPosition.x - Math.abs(endPosition.x - startPosition.x) * 0.8;

   return `M ${startPosition.x} ${startPosition.y} C ${hx1} ${
     startPosition.y
   } ${hx2} ${endPosition.y} ${endPosition.x} ${endPosition.y}`;
 }

パスは下のようなfrom, toのノードのidだけ持たせたjsonです。

f:id:kaminashi-developer:20201218055726p:plain