chore: 实现舞台区域支持多尺寸模式

yutucc · Sep 29, 2022 · c06a63c · c06a63c
1 parent d4ee40d
commit c06a63c
Show file tree

Hide file tree

Showing 18 changed files with 575 additions and 94 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "lodash.find": "^4.6.0",
+    "lodash.isequal": "^4.5.0",
     "lodash.omit": "4.5.0",
     "lodash.throttle": "4.0.1",
     "minilog": "3.1.0",

diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
@@ -101,3 +101,45 @@
     user-select: none;
     cursor: pointer;
 }
+
+.stageNativeSize {
+    padding: 4px 0;
+
+    font-size: 14px;
+}
+
+.stageNativeSizeButton {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    position: relative;
+
+    padding: 0 8px;
+    width: 110px;
+    height: 36px;
+
+    cursor: pointer;
+
+    color: #425170;
+}
+
+.stageNativeSizeButton:hover {
+    background: #E9F9FF;
+}
+.stageNativeSizeButton--sel {
+    background: #E9F9FF;
+}
+.stageNativeSizeButton--sel::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    border-radius: 0 3px 3px 0;
+    width: 3px;
+    height: 100%;
+
+    background: hsla(215, 100%, 65%, 1);
+
+    content: '';
+}
diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
@@ -4,17 +4,20 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import VM from 'scratch-vm';
+import Popover from 'react-popover';
+import isEqual from 'lodash.isequal';
 
 import Box from '../box/box.jsx';
 import Button from '../button/button.jsx';
 import Controls from '../../containers/controls.jsx';
 import {getStageDimensions} from '../../lib/screen-utils';
-import {STAGE_SIZE_MODES} from '../../lib/layout-constants';
+import { STAGE_SIZE_MODES, STAGE_NATIVE_SIZES } from '../../lib/layout-constants';
 
 import fullScreenIcon from './icon--fullscreen.svg';
-import largeStageIcon from './icon--large-stage.svg';
-import smallStageIcon from './icon--small-stage.svg';
+// import largeStageIcon from './icon--large-stage.svg';
+// import smallStageIcon from './icon--small-stage.svg';
 import unFullScreenIcon from './icon--unfullscreen.svg';
+import stageSizeIcon from './stageSize.svg';
 
 import scratchLogo from '../menu-bar/scratch-logo.svg';
 import styles from './stage-header.css';
@@ -64,10 +67,48 @@ const StageHeaderComponent = function (props) {
         onTriggerCoordinate,
         onZoomOutCoordinateFontSize,
         onZoomInCoordinateFontSize,
+
+        stageNativeSize,
+        onSetStageNativeSize,
+        stageNativeSizePopoverOpen,
+        onOpenStageNativeSizePopover,
+        onCloseStageNativeSizePopover,
     } = props;
 
     let header = null;
 
+    const stageNativeSizePopoverBody = (
+        <div className={styles.stageNativeSize}>
+            {
+                STAGE_NATIVE_SIZES.map((item) => {
+                    const {
+                        width,
+                        height,
+                        title,
+                    } = item;
+                    const isCurSel = isEqual(stageNativeSize, [width, height]);
+
+                    return (
+                        <div
+                            key={`key_${width}_${height}`}
+                            className={classNames(
+                                styles.stageNativeSizeButton,
+                                {
+                                    [styles['stageNativeSizeButton--sel']]: isCurSel,
+                                }
+                            )}
+                            onClick={() => {
+                                onSetStageNativeSize([width, height]);
+                            }}
+                        >
+                            {title}
+                        </div>
+                    );
+                })
+            }
+        </div>
+    );
+
     if (isFullScreen) {
         const stageDimensions = getStageDimensions(null, true);
         const stageButton = showBranding ? (
@@ -127,7 +168,30 @@ const StageHeaderComponent = function (props) {
                         }
                     </div>
 
-                    <div>
+                    {/* 新增 stageNativeSize 的 Popover 组件，用于选择舞台尺寸，如图： ![](http://res.watermcc.top/blog/2022/20220929-1664437753.png) */}
+                    <Popover
+                        className="custom-popover"
+                        body={stageNativeSizePopoverBody}
+                        isOpen={stageNativeSizePopoverOpen}
+                        preferPlace="below"
+                        onOuterAction={onCloseStageNativeSizePopover}
+                    >
+                        <div>
+                            <Button
+                                className={styles.stageButton}
+                                onClick={onOpenStageNativeSizePopover}
+                            >
+                                <img
+                                    className={styles.stageButtonIcon}
+                                    draggable={false}
+                                    src={stageSizeIcon}
+                                />
+                            </Button>
+                        </div>
+                    </Popover>
+
+                    {/* FIXME: 原本用于等比例放大缩小舞台尺寸的功能就先注释掉 */}
+                    {/* <div>
                         <Button
                             className={classNames(
                                 styles.stageButton,
@@ -160,7 +224,7 @@ const StageHeaderComponent = function (props) {
                                 src={largeStageIcon}
                             />
                         </Button>
-                    </div>
+                    </div> */}
                 </div>
             );
         header = (
@@ -214,6 +278,12 @@ StageHeaderComponent.propTypes = {
     onTriggerCoordinate: PropTypes.func.isRequired, // 控制是否显示网格坐标
     onZoomOutCoordinateFontSize: PropTypes.func.isRequired, // 缩小网格坐标系的字体大小
     onZoomInCoordinateFontSize: PropTypes.func.isRequired, // 放大网格坐标系的字体大小
+
+    stageNativeSize: PropTypes.array.isRequired, // 当前舞台尺寸
+    onSetStageNativeSize: PropTypes.func.isRequired, // 设置当前舞台尺寸
+    stageNativeSizePopoverOpen: PropTypes.bool.isRequired, // 用来控制 stageNativeSize 的 Popover 组件是否显示
+    onOpenStageNativeSizePopover: PropTypes.func.isRequired, // 打开 stageNativeSize 的 Popover 组件
+    onCloseStageNativeSizePopover: PropTypes.func.isRequired, // 关闭 stageNativeSize 的 Popover 组件
 };
 
 StageHeaderComponent.defaultProps = {

diff --git a/src/components/stage-header/stageSize.svg b/src/components/stage-header/stageSize.svg
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
@@ -7,7 +7,10 @@
         Fixes a few extra pixels of margin/padding, that adds on to the bottom
         of the element, which messes up the chrome padding consistency
     */
-    display: block;
+    /* display: block; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     border-radius: $space;
     border: $stage-standard-border-width solid $ui-black-transparent;
@@ -28,6 +31,8 @@
 
 .stage.full-screen {
     border: $stage-full-screen-border-width solid rgb(126, 133, 151);
+
+    background-color: #E2F7FF;
 }
 
 .with-color-picker {
@@ -50,22 +55,33 @@
     position: relative;
 }
 
+/* .stage 里包括的唯一元素，在这个里面再放舞台的 canvas 和其它元素
+canvas 用来撑开这个 .stageContainer 的宽高，而其它元素设置成 absolute 后，就可以不用关心自身的宽高，直接跟这个元素一致就好 */
+.stageContainer {
+    position: relative;
+}
+
 /* we want stage overlays to all be positioned in the same spot as the stage, but can't put them inside the border
 because we want their overflow to be visible, and the bordered element must have overflow: hidden set so that the
 stage doesn't "spill" out from under its rounded corners. instead, shift these over by the border width. */
 .stage-overlays {
     position: absolute;
-    top: $stage-standard-border-width;
-    left: $stage-standard-border-width;
+    /* top: $stage-standard-border-width;
+    left: $stage-standard-border-width; */
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
 
     /* the overlay itself should not capture pointer events; only its child elements can do that */
     pointer-events: none;
 }
 
-.stage-overlays.full-screen {
+/* .stage-overlays.full-screen {
     top: $stage-full-screen-border-width;
     left: $stage-full-screen-border-width;
-}
+} */
 
 .monitor-wrapper,
 .frame-wrapper,
@@ -76,6 +92,13 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
     pointer-events: none;
 }
 
+/* 设置跟父容器（ .stageContainer ）一样的宽高 */
+.monitor-wrapper {
+    width: 100%;
+    height: 100%;
+}
+
+
 .dragging-sprite {
     position: absolute;
     top: 0;
@@ -89,10 +112,13 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    top: 0;
+    /* top: 0; */
     left: 0;
     overflow: hidden;
     pointer-events: none;
+
+    bottom: 0;
+    width: 100%;
 }
 
 .mic-indicator {
@@ -105,6 +131,8 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
 .question-wrapper {
     z-index: $z-index-stage-question;
     pointer-events: auto;
+
+    width: 100%;
 }
 
 .frame {