fix(mobile-gui): dispatch resize event when orientation gate is dismissed#696
Merged
takaokouji merged 4 commits intoMay 21, 2026
Merged
Conversation
…ssed dismiss 時に window resize イベントを発火し、Blockly に toolbox / flyout の 再レイアウトを促す。これがないと、orientation gate に画面を覆われた状態で Blocks コンポーネントが初期化されたままになり、PaletteToggle が描画されない 不具合が dismiss 直後に発生する (タブ切替で復活する症状の根本原因)。 実機 portrait → landscape 回転時はブラウザが自動で resize を撃つため不要だが、 dismiss は viewport が変わらないので明示的に発火する必要がある。 Fixes #695
…re-measures useIsNarrowScreen の値が変化したタイミング (= ResponsiveGui が <MobileGui> と <GUI> を入れ替える瞬間) に、新しい React サブツリーで初期化される Blockly workspace へ明示的な resize イベントを撃つ。これがないと、新しい workspace が初期描画時の getBBox / getBoundingClientRect 結果のまま固まり、 PaletteToggle (◀/▶) の親要素が null 扱いになって描画されない。 ブラウザの resize イベントは swap 前に既に発火しているため、新しい workspace には届かない。useEffect で swap 後 (commit 後) に dispatch する ことでこの問題を回避する。 Refs #695
…n change `this.workspace` is an instance variable, not React state, so `inject()` in `componentDidMount` does not trigger a re-render. The first `render()` runs with `workspace=null`, skipping PaletteToggle. Calling `_applyPaletteVisibility` at the end of `componentDidMount` forces a re-render after the workspace is ready, so PaletteToggle appears on mount regardless of dismiss state or portrait/landscape cycle. The `window.resize` workarounds in `ResponsiveGui` and `MobileOrientationGate` are now redundant and removed. Fixes #695
github-actions Bot
pushed a commit
that referenced
this pull request
May 21, 2026
…-orientation-gate-blockly-resize fix(mobile-gui): dispatch resize event when orientation gate is dismissed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
dismiss 直後と、MobileGui ↔ desktop GUI 切り替え直後の 2 箇所で
windowのresizeイベントを撃ち、Blockly に toolbox / flyout の再レイアウトを促す。これによりコードタブのPaletteToggle(◀/▶) が消えていた不具合を解消する。Fixes #695
Root Cause
Blocksコンポーネント (packages/scratch-gui/src/containers/blocks.jsx220–232) のshouldComponentUpdateは限られた prop 変化しか拾わない。PaletteToggle はrender()内でtoolbox = this.workspace.getToolbox()が真の場合のみ描画されるが、Blockly workspace が初期化される瞬間の dimension が不正だと未計測のまま固定される。そのトリガーが 2 通り存在する:
MobileOrientationGateの overlay 配下で初期化された workspace は、overlay を消しても resize 機会が無く未計測のまま。<MobileGui>と<GUI>を入れ替える瞬間、新しい React サブツリーが mount される。ブラウザ自体の resize イベントは swap 前に発火しているため、新しい workspace には届かない。タブ切替で復活していたのは、
Blocks.componentDidUpdateがisVisible変化でworkspace.setVisible(true)→vm.refreshWorkspace()→window.dispatchEvent(new Event('resize'))を実行するため (blocks.jsx:268–296)。実機 portrait → landscape 回転の場合はブラウザが自動で resize を撃つため発生しなかった。Changes Made
src/components/mobile-orientation-gate/mobile-orientation-gate.jsx:handleDismissにwindow.dispatchEvent(new Event('resize'))を追加src/lib/responsive-gui.jsx:isNarrowが変化したタイミングでuseEffectから resize を撃つ (初回 mount はスキップ)test/unit/components/mobile-orientation-gate.test.jsx: dismiss クリックで resize が発火することを検証する unit テスト追加test/unit/lib/responsive-gui.test.jsx: 初回 mount では resize を撃たないこと、narrow / wide を切り替えると都度 resize を撃つことを検証する unit テスト追加Test Coverage
mobile-orientation-gate.test.jsx: 9 件 pass (新規 1 件)responsive-gui.test.jsx: 6 件 pass (新規 2 件)Definition of Done
PaletteToggle(◀/▶) が表示されているPaletteToggleが表示されたままであるPaletteToggleが消えないSP / iPad 影響
src/components/mobile-orientation-gate/+src/lib/responsive-gui.jsx（SP / 切替判定）Related Issues
Fixes #695
Surfaced by PR #693 (Issue #691) の dismiss 機能追加に伴うユーザーテストで発見。