diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx index 312ba4cc0ffebba144002db5ae7e4c459f4339ec..f5d52388ff336680fbdce501f1fcc14821b9d169 100644 --- a/src/containers/blocks.jsx +++ b/src/containers/blocks.jsx @@ -14,7 +14,7 @@ import ExtensionLibrary from './extension-library.jsx'; import extensionData from '../lib/libraries/extensions/index.jsx'; import CustomProcedures from './custom-procedures.jsx'; import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx'; -import {STAGE_DISPLAY_SIZES} from '../lib/layout-constants'; +import {BLOCKS_DEFAULT_SCALE, STAGE_DISPLAY_SIZES} from '../lib/layout-constants'; import DropAreaHOC from '../lib/drop-area-hoc.jsx'; import DragConstants from '../lib/drag-constants'; import defineDynamicBlock from '../lib/define-dynamic-block'; @@ -509,7 +509,7 @@ class Blocks extends React.Component { }); } render () { - /* eslint-disable no-unused-vars, no-shadow */ + /* eslint-disable no-unused-vars */ const { anyModalVisible, canUseCloud, @@ -528,11 +528,11 @@ class Blocks extends React.Component { onRequestCloseExtensionLibrary, onRequestCloseCustomProcedures, toolboxXML, + updateMetrics: updateMetricsProp, workspaceMetrics, - updateMetrics, ...props } = this.props; - /* eslint-enable no-unused-vars, no-shadow */ + /* eslint-enable no-unused-vars */ return ( <React.Fragment> <DroppableBlocks @@ -612,15 +612,19 @@ Blocks.propTypes = { }), stageSize: PropTypes.oneOf(Object.keys(STAGE_DISPLAY_SIZES)).isRequired, toolboxXML: PropTypes.string, + updateMetrics: PropTypes.func, updateToolboxState: PropTypes.func, - vm: PropTypes.instanceOf(VM).isRequired + vm: PropTypes.instanceOf(VM).isRequired, + workspaceMetrics: PropTypes.shape({ + targets: PropTypes.objectOf(PropTypes.object) + }) }; Blocks.defaultOptions = { zoom: { controls: true, wheel: true, - startScale: 0.675 + startScale: BLOCKS_DEFAULT_SCALE }, grid: { spacing: 40, diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx index d955a3a6ff5b449dda9a870638343382c633663a..b5af39b16ddfaa6d66597c4ea7ce79e96009ad96 100644 --- a/src/containers/target-pane.jsx +++ b/src/containers/target-pane.jsx @@ -14,6 +14,7 @@ import {showStandardAlert, closeAlertWithId} from '../reducers/alerts'; import {setRestore} from '../reducers/restore-deletion'; import DragConstants from '../lib/drag-constants'; import TargetPaneComponent from '../components/target-pane/target-pane.jsx'; +import {BLOCKS_DEFAULT_SCALE} from '../lib/layout-constants'; import spriteLibraryContent from '../lib/libraries/sprites.json'; import {handleFileUpload, spriteUpload} from '../lib/file-uploader.js'; import sharedMessages from '../lib/shared-messages'; @@ -171,7 +172,7 @@ class TargetPane extends React.Component { metrics = { scrollX: 0, scrollY: 0, - scale: 0.675 // TODO: Define this in a constant somewhere. + scale: BLOCKS_DEFAULT_SCALE }; } diff --git a/src/lib/layout-constants.js b/src/lib/layout-constants.js index 89cc7f3d9b6e34a768108771cceb4426dc1116dc..8766efae2cbf5bfdc831b3d77f78e1ab4ba0d446 100644 --- a/src/lib/layout-constants.js +++ b/src/lib/layout-constants.js @@ -37,6 +37,9 @@ const STAGE_DISPLAY_SIZES = keyMirror({ small: null }); +// zoom level to start with +const BLOCKS_DEFAULT_SCALE = 0.675; + const STAGE_DISPLAY_SCALES = {}; STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.large] = 1; // large mode, wide browser (standard) STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.largeConstrained] = 0.85; // large mode but narrow browser @@ -50,6 +53,7 @@ export default { }; export { + BLOCKS_DEFAULT_SCALE, STAGE_DISPLAY_SCALES, STAGE_DISPLAY_SIZES, STAGE_SIZE_MODES diff --git a/test/unit/reducers/workspace-metrics-reducer.test.js b/test/unit/reducers/workspace-metrics-reducer.test.js new file mode 100644 index 0000000000000000000000000000000000000000..f1cf1a70de4e31640473855a8e17745c97fde9f3 --- /dev/null +++ b/test/unit/reducers/workspace-metrics-reducer.test.js @@ -0,0 +1,25 @@ +/* eslint-env jest */ +import workspaceMetricsReducer, {updateMetrics} from '../../../src/reducers/workspace-metrics'; + +test('initialState', () => { + let defaultState; + /* workspaceMetricsReducer(state, action) */ + expect(workspaceMetricsReducer(defaultState, {type: 'anything'})).toBeDefined(); + expect(workspaceMetricsReducer(defaultState, {type: 'anything'})).toEqual({targets: {}}); +}); + +test('updateMetrics action creator', () => { + let defaultState; + const action = updateMetrics({ + targetID: 'abcde', + scrollX: 225, + scrollY: 315, + scale: 1.25 + }); + const resultState = workspaceMetricsReducer(defaultState, action); + expect(Object.keys(resultState.targets).length).toBe(1); + expect(resultState.targets.abcde).toBeDefined(); + expect(resultState.targets.abcde.scrollX).toBe(225); + expect(resultState.targets.abcde.scrollY).toBe(315); + expect(resultState.targets.abcde.scale).toBe(1.25); +});