diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx index 1cf1aed7ea937e05206b269091cd3ed4a112376a..ede5048ea8a2c96e7b5535b2b63651d88e16099b 100644 --- a/src/components/stage/stage.jsx +++ b/src/components/stage/stage.jsx @@ -65,7 +65,11 @@ const StageComponent = props => { /> </Box> <Box className={styles.frameWrapper}> - <TargetHighlight className={styles.frame} /> + <TargetHighlight + className={styles.frame} + stageHeight={stageDimensions.height} + stageWidth={stageDimensions.width} + /> </Box> {isColorPicking && colorInfo ? ( <Box className={styles.colorPickerWrapper}> diff --git a/src/containers/target-highlight.jsx b/src/containers/target-highlight.jsx index a1e90aafd1c1081616c0f32377df812a86088024..9162c7ba904ee4047a43542b8f41e418a91e7672 100644 --- a/src/containers/target-highlight.jsx +++ b/src/containers/target-highlight.jsx @@ -15,11 +15,12 @@ class TargetHighlight extends React.Component { // Transform scratch coordinates into page coordinates getPageCoords (x, y) { - const nativeSize = this.props.vm.renderer.getNativeSize(); - const rect = this.props.vm.renderer.canvas.getBoundingClientRect(); + const {stageWidth, stageHeight, vm} = this.props; + // The renderers "nativeSize" is the [width, height] of the stage in scratch-units + const nativeSize = vm.renderer.getNativeSize(); return [ - ((rect.width / nativeSize[0]) * x) + (rect.width / 2), - -((rect.height / nativeSize[1]) * y) + (rect.height / 2) + ((stageWidth / nativeSize[0]) * x) + (stageWidth / 2), + -((stageHeight / nativeSize[1]) * y) + (stageHeight / 2) ]; } @@ -61,6 +62,8 @@ TargetHighlight.propTypes = { className: PropTypes.string, highlightedTargetId: PropTypes.string, highlightedTargetTime: PropTypes.number, + stageHeight: PropTypes.number, + stageWidth: PropTypes.number, vm: PropTypes.instanceOf(VM) };