【ドット絵エディタ制作】１６回目：カラーパレットの変更

on 投稿日:

カラーパレットをライブラリ「vanilla-picker」を使用した実装に変更した。

作ったもの

これまでInputタグのみで実装していたが、
選択するたびにピッカーのUIが表示されてしまうのが嫌だったので
ライブラリを使用して実装しなおした。

確認用ページ

ソースコード

クラス図

追加したのはカラーパレットウィンドウの中身を管理する「ColorpalettePanelController」。

カラーパレットの下部で色をストックしておくUIのための
・Boxクラス
も新たに作成し、
ColorpalettePanelController.ts内に記載しているが、
クラスをexportしていないためクラス図に表示されていない。

つまづきポイント

vanilla-pickerの導入

カラーパレットエリア上部のカラーピッカー部分を実装するライブラリ。

参考：https://github.com/Sphinxxxx/vanilla-picker

インストール用コマンド

npm i vanilla-picker

TypeScript内でのインポート

import Picker from 'vanilla-picker';

実装例

new Picker({
  parent: <HTMLElement>document.querySelector('#colorpalettePanel'),
  popup: false,
  alpha: false,
  editor: false,
  onChange: (color:any) => {
    console.log(color.hex);
  }
});

Flexで左右中央のグリッドレイアウト

SASSの記述例

.flex-container {
  display: flex;
  justify-content: center; //左右の中央
  gap:5px 10px; //行間 列間
  
  > .flex-item {
    width:30px;
    height:20px
  }
}

コンテナ側の幅やアイテムの数が変わる場合は、
gapでマージンを作ると、最終行でレイアウトが気持ち悪くなるので、
以下のようにして、アイテムの中でマージンを表現する方が良さげ。

.flex-container {
  display: flex;
  justify-content: space-evenly; //flexアイテム間のすべての余白を均等にする
  gap:5px 0; //行間 列間
  
  > .flex-item {
    width:40px; //gapの列間分のをwidthに足す
    height:20px
  }
}

ひとこと

今回は、すでに組み込んでいる機能のUIを変更しただけなので、
比較的スムーズに実装できた。