Closed nonuplet closed 1 year ago
iOSで島編集画面のタイルをタップした時に出てくるメニューが非常に重い問題を解決しました。 fixed #129
以前にフォントサイズ変更の仕様変更で使用したContainer Queryが原因でした。 そのため直接的な原因は島編集画面ではなく、StatusTable.vue のほうでした。
StatusTable.vue
かといって以前の仕様に戻すとまたメモリリークが起きてしまうため、実装をまた大幅に変更しました。 fontSizeを用意しておき、DOM要素がレンダリング後（this.$nextTick）にコンテナのサイズを計算して調整しています。 v-bindからmethodを直接呼び出しているわけではなく、あくまでscreenWidthの変更を検知して再計算が走るので計算コストもそこまで重くないはずです。
ただ実装がレスポンシブベースではあるものの、StatusTableの発展ポイント～資源生産の個所のレイアウトを今後大幅に変更した場合は崩れる可能性があります。
たぶんこれが最適解だと思いますが、もしもっと改善案が浮かんだら再度修正するかもしれません。
よさそう、マージしますー
mjtakenon
commented
1 year ago mjtakenon
commented
1 year ago
Overview
iOSで島編集画面のタイルをタップした時に出てくるメニューが非常に重い問題を解決しました。 fixed #129
Description
以前にフォントサイズ変更の仕様変更で使用したContainer Queryが原因でした。 そのため直接的な原因は島編集画面ではなく、
StatusTable.vueのほうでした。かといって以前の仕様に戻すとまたメモリリークが起きてしまうため、実装をまた大幅に変更しました。 fontSizeを用意しておき、DOM要素がレンダリング後（this.$nextTick）にコンテナのサイズを計算して調整しています。 v-bindからmethodを直接呼び出しているわけではなく、あくまでscreenWidthの変更を検知して再計算が走るので計算コストもそこまで重くないはずです。
ただ実装がレスポンシブベースではあるものの、StatusTableの発展ポイント～資源生産の個所のレイアウトを今後大幅に変更した場合は崩れる可能性があります。
たぶんこれが最適解だと思いますが、もしもっと改善案が浮かんだら再度修正するかもしれません。