diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx index 888dfa1c6fa105a4038a4c88f8ff7ce7812f7465..077006fccc29be381fe66b0ae4b224437a9e98e9 100644 --- a/src/containers/stage.jsx +++ b/src/containers/stage.jsx @@ -59,6 +59,12 @@ class Stage extends React.Component { this.canvas = document.createElement('canvas'); this.renderer = new Renderer(this.canvas); this.props.vm.attachRenderer(this.renderer); + + // Calling draw a single time before any project is loaded just makes + // the canvas white instead of solid black–needed because it is not + // possible to use CSS to style the canvas to have a different + // default color + this.props.vm.renderer.draw(); } this.props.vm.attachV2SVGAdapter(new V2SVGAdapter()); this.props.vm.attachV2BitmapAdapter(new V2BitmapAdapter()); diff --git a/src/lib/vm-manager-hoc.jsx b/src/lib/vm-manager-hoc.jsx index cbbf10385d53935daadd571d2c5ccf214a2675d2..981fe8326f73baecc3576e24a47e55cc85b61fa2 100644 --- a/src/lib/vm-manager-hoc.jsx +++ b/src/lib/vm-manager-hoc.jsx @@ -53,6 +53,17 @@ const vmManagerHOC = function (WrappedComponent) { return this.props.vm.loadProject(this.props.projectData) .then(() => { this.props.onLoadedProject(this.props.loadingState, this.props.canSave); + + // If the vm is not running, call draw on the renderer manually + // This draws the state of the loaded project with no blocks running + // which closely matches the 2.0 behavior, except for monitors– + // 2.0 runs monitors and shows updates (e.g. timer monitor) + // before the VM starts running other hat blocks. + if (!this.props.isStarted) { + // Wrap in a setTimeout because skin loading in + // the renderer can be async. + setTimeout(() => this.props.vm.renderer.draw()); + } }) .catch(e => { this.props.onError(e);