monman53/exstitch

Cross stitch design editor running on web (React)

exstitch's Issues

Undo/Redo 機能を追加

パレットの見た目を良くする

N本取りに対応

背景画像の平行移動と拡大縮小を可能にする

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

• 平行移動 aea5142
• 拡大縮小 b5ec8c4

Web Storage を利用したテータの保存（lost 防止）

ref: https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

起動してすぐに塗りつぶした色が、黒ではなく薄い灰色になってしまう。

UI を Bootstrap で仕上げる

ドラッグで入力できるようにする

色パレットを分割

After #2

パレットを2次元に分割。

例）

• 葉っぱ用パレット
  • 案1用パレット
  • 案2用パレット
• 花用パレット
  • 案1用パレット
  • 案2用パレット
  • 案3用パレット

例えば、花用パレット1と2を切り替えると、花を構成する色だけが変わる。案用パレットはタブで切り替えられると良さそう。

TODO

• 縦方向の分割
  • 各パレットは閉じられるようになっているとより良い。
• 横方向（案ごと）の分割
  • タブを使いたい https://getbootstrap.com/docs/5.0/components/navs-tabs/#tabs-with-dropdowns

グリッドの間隔を可変にする

TODO

• 太い線の周期を指定できるようにする
• グリッドの表示非表示を切り替えられるようにする
  • https://getbootstrap.com/docs/5.0/forms/checks-radios/#switches

主要メーカーの色のプリセットを用意

• オリムパス
  • https://www.olympus-thread.com/catalog/2022/html5.html#page=11 を見ながら手打ち?
• コスモ
  • https://www.lecien.co.jp/arthobby/catalog/2021cosmo_catalog_japanese.pdf を見ながら手打ち?
• DMC
  • 本家ではないが http://www.camelia.sk/dmc_1.htm からデータを取れそう

楽しそう。

TODO

• 作業量的に大きすぎるので issue 分割（milestone）
• スキーマ検討
• ユーザーが選んだ色に一番近いプリセットを suggest する機能
• Color picker に埋め込んでしまうというのも手 https://casesandberg.github.io/react-color/

色パレットを sortable にする

After #3

パレットを構成する各色を sortable（順序をドラッグで入れ替えられるよう）にする。

https://github.com/SortableJS/Sortable を使うと良さそう。

デザインのサイズ（外接矩形のサイズ）を表示する

いらないファイルを削除

いらないファイルが結構ありそう

favicon を導入

Canvas の描画を高速化する

• 必要なときだけ再描画を行うように変更。
  • https://qiita.com/seira/items/e62890f11e91f6b9653f#%E5%89%AF%E4%BD%9C%E7%94%A8%E3%82%92%E5%AE%9F%E8%A1%8C%E5%88%B6%E5%BE%A1%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%ABuseeffect%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B
• grid を別レイヤで描画

画像から図案を自動生成

• 色数を指定
• カラーパレットを指定

テスト機能を追加

テストが無いのはやばい

陰影も再現?

変則縫いに対応する

クロス以外の縫い方に対応する

• 複数マスを跨ぐ縫い方

編集データの save/load

state にある情報のうち必要なものを json などに store/load できるようにする。

TODO

• save
• load

カーソルが重なっているグリッドをハイライトする

ソースコード分割

色パレットを追加削除できるようにする

現状3色しかパレットがないので、増やしたり減らしたりできるようにする。最低限1つ必要。

TODO

• 追加機能
• 削除機能

右クリックで Erase

グリッド表示

制作の目安となるグリッド表示機能を追加

生地テクスチャ（パターン）を用意

完成イメージをより正確にする機能として、布地のパターンを用意したい。

有名メーカーのプリセットも用意したい。

糸の必要量の概算表示

範囲選択して移動やコピーできるようにする

塗りつぶし機能

マスの矩形以外の見た目を追加

1マスを矩形以外で表現するモードを追加したい。

• クロス形

完成図の出力機能

PNG? SVG?

色などを間違えて消してしまわない機構を導入する

ポップアップする

各色の表示非表示を切り替えられるようにする