① メニューバー
② ブロックセレクター
③ ブロックコードのキャンバス
④ ステージ
⑤ スプライト操作画面
⑥ 背景操作画面
⑦ バックパック
        

            
            import keyMirror from 'keymirror';

//...中略

export default {
    // standardStageWidth: 480,
    // standardStageHeight: 360,
    fullSizeMinWidth: 1096,
    fullSizePaintMinWidth: 1250
};

//...中略
        

            
            import PropTypes from 'prop-types';

//...中略

const StageComponent = props => {

    //...中略

    //👇isFullScreen_という変数を定義し、trueを入れる
    const isFullScreen_ = true;

    //👇コメントアウト
    //const stageDimensions = getStageDimensions(stageSize, isFullScreen);
    //👇isFullScreen_に引数を書き換え
    const stageDimensions = getStageDimensions(stageSize, isFullScreen_);

    return (
        <React.Fragment>
            <Box
                className={classNames(
                    styles.stageWrapper,
                    //👇コメントアウト
                    //{[styles.withColorPicker]: !isFullScreen && isColorPicking})}
                    //👇isFullScreen_に引数を書き換え
                    {[styles.withColorPicker]: !isFullScreen_ && isColorPicking})}
                onDoubleClick={onDoubleClick}
            >
                <Box
                    className={classNames(
                        styles.stage,
                        //👇コメントアウト
                        // {[styles.fullScreen]: isFullScreen}
                        //👇isFullScreen_に引数を書き換え
                        {[styles.fullScreen]: isFullScreen_}
                    )}
                    //👇ステージのサイズの箇所をコメントアウト
                    // style={{
                    //     height: stageDimensions.height,
                    //     width: stageDimensions.width
                    // }}
                >
                    <DOMElementRenderer
                        domElement={canvas}
                        //👇外部cssファイルからステージサイズを注入(重要！)
                        className={styles.outerTargetedCanvas}
                        //👇ステージのサイズの箇所をコメントアウト
                        // style={{
                        //     height: stageDimensions.height,
                        //     width: stageDimensions.width
                        // }}
                        {...boxProps}
                    />
                    <Box className={styles.monitorWrapper}>
                        <MonitorList
                            draggable={useEditorDragStyle}
                            stageSize={stageDimensions}
                        />
                    </Box>
                    {/*👇ステージのサイズの箇所をコメントアウト*/}
                    {/* <Box className={styles.frameWrapper}>
                        <TargetHighlight
                            className={styles.frame}
                            stageHeight={stageDimensions.height}
                            stageWidth={stageDimensions.width}
                        />
                    </Box> */}
                    {isColorPicking && colorInfo ? (
                        <Loupe colorInfo={colorInfo} />
                    ) : null}
                </Box>

                {/* `stageOverlays` is for items that should *not* have their overflow contained within the stage */}
                <Box
                    className={classNames(
                        styles.stageOverlays,
                        //👇コメントアウト
                        // {[styles.fullScreen]: isFullScreen}
                        //👇isFullScreen_に引数を書き換え
                        {[styles.fullScreen]: isFullScreen_}
                    )}
                >
                    <div
                        className={styles.stageBottomWrapper}
                        //👇ステージのサイズの箇所をコメントアウト
                        // style={{
                        //     width: stageDimensions.width,
                        //     height: stageDimensions.height
                        // }}
                    >
                        {micIndicator ? (
                            <MicIndicator
                                className={styles.micIndicator}
                                stageSize={stageDimensions}
                            />
                        ) : null}
                        {question === null ? null : (
                            <div
                                className={styles.questionWrapper}
                                //👇ステージのサイズの箇所をコメントアウト
                                // style={{width: stageDimensions.width}}
                            >
                                <Question
                                    question={question}
                                    onQuestionAnswered={onQuestionAnswered}
                                />
                            </div>
                        )}
                    </div>
                    <canvas
                        className={styles.draggingSprite}
                        height={0}
                        ref={dragRef}
                        width={0}
                    />
                </Box>
                {isStarted ? null : (
                    <GreenFlagOverlay
                        className={styles.greenFlagOverlay}
                        wrapperClass={styles.greenFlagOverlayWrapper}
                    />
                )}
            </Box>
            {isColorPicking ? (
                <Box
                    className={styles.colorPickerBackground}
                    onClick={onDeactivateColorPicker}
                />
            ) : null}
        </React.Fragment>
    );
};
//...以下略
        

            
            ① ステージをフルスクリーン表示に強制的に切り替えるために、
    isFullScreen_ = true を使って、各DOMの属性に割り当てる。

② ステージの中身であるDOMElementRendererコンポーネントに、
    外部cssファイルからouter-targeted-canvasクラスのスタイルを渡す。

③ ステージの画面サイズで固定値を渡している変数である
    stageDimensions.heightとstageDimensions.widthが属性値として仕込んである
    コンポーネントからは全て外しておく。
        

            
            /* ...中略 */

.outer-targeted-canvas {
    width: 90vw;
    max-width: 1056px;
}
        

            
            import PropTypes from 'prop-types';

//...中略

const StageWrapperComponent = function (props) {
    //...中略

    //👇isFullScreen_という変数を定義し、trueを入れる
    const isFullScreen_ = true;

    return (
        <Box
            className={classNames(
                styles.stageWrapper,
                //👇コメントアウト
                // {[styles.fullScreen]: isFullScreen}
                //👇isFullScreen_に引数を書き換え
                {[styles.fullScreen]: isFullScreen_}
            )}
            dir={isRtl ? 'rtl' : 'ltr'}
        >
            <Box className={styles.stageMenuWrapper}>
                <StageHeader
                    stageSize={stageSize}
                    vm={vm}
                />
            </Box>
            <Box className={styles.stageCanvasWrapper}>
                {
                    isRendererSupported ?
                        <Stage
                            stageSize={stageSize}
                            vm={vm}
                        /> :
                        null
                }
            </Box>
            {loading ? (
                //👇コメントアウト
                // <Loader isFullScreen={isFullScreen} />
                //👇isFullScreen_に引数を書き換え
                <Loader isFullScreen={isFullScreen_} />
            ) : null}
        </Box>
    );
};
//...以下略
        

            
            @import "../../css/units.css";

/* ...中略 */

.stage-wrapper.full-screen {

    /* top: $stage-menu-height; */
    /* 👇に書き換え */
    top: 0;

    /* 中略 */

    /* padding: $stage-full-screen-stage-padding; */
    /* 👇に書き換え */
    padding: 0;

    /* 以下略 */
}