Show preview dimension when resizing the main split. fixes #317

src/components/ContentWrap.jsx

@@ -9,9 +9,10 @@ import CodeMirror from '../CodeMirror';
 import { Console } from './Console';
 import { deferred } from '../deferred';
 import CssSettingsModal from './CssSettingsModal';
+import { PreviewDimension } from './PreviewDimension.jsx';
 const minCodeWrapSize = 33;
 
-/* global htmlCodeEl, jsCodeEl, cssCodeEl, logCountEl
+/* global htmlCodeEl
 */
 
 export default class ContentWrap extends Component {
@@ -22,6 +23,7 @@ export default class ContentWrap extends Component {
 			isCssSettingsModalOpen: false,
 			logs: []
 		};
+
 		this.updateTimer = null;
 		this.updateDelay = 500;
 		this.htmlMode = HtmlModes.HTML;
@@ -425,6 +427,12 @@ export default class ContentWrap extends Component {
 		}
 		this.updateSplits();
 	}
+	mainSplitDragHandler() {
+		this.previewDimension.update({
+			w: this.frame.clientWidth,
+			h: this.frame.clientHeight
+		});
+	}
 	codeSplitDragStart() {
 		document.body.classList.add('is-dragging');
 	}
@@ -636,6 +644,8 @@ export default class ContentWrap extends Component {
 	}
 
 	render() {
+		log('contentwrap update');
+
 		return (
 			<SplitPane
 				class="content-wrap  flex  flex-grow"
@@ -645,6 +655,7 @@ export default class ContentWrap extends Component {
 				direction={
 					this.props.currentLayoutMode === 2 ? 'vertical' : 'horizontal'
 				}
+				onDrag={this.mainSplitDragHandler.bind(this)}
 				onDragEnd={this.mainSplitDragEndHandler.bind(this)}
 			>
 				<SplitPane
@@ -846,6 +857,9 @@ export default class ContentWrap extends Component {
 						id="demo-frame"
 						allowfullscreen
 					/>
+
+					<PreviewDimension ref={comp => (this.previewDimension = comp)} />
+
 					<Console
 						logs={this.state.logs}
 						isConsoleOpen={this.state.isConsoleOpen}

src/components/ContentWrapFiles.jsx

@@ -19,6 +19,7 @@ import { SidePane } from './SidePane';
 import { Console } from './Console';
 import { SWITCH_FILE_EVENT } from '../commands';
 import { commandPaletteService } from '../commandPaletteService';
+import { PreviewDimension } from './PreviewDimension';
 
 const minCodeWrapSize = 33;
 
@@ -107,8 +108,6 @@ export default class ContentWrapFiles extends Component {
 			this.fileSelectHandler(linearFiles[0]);
 		}
 
-		// HACK: becuase its a DOM manipulation
-		// window.logCountEl.textContent = this.logCount;
 		// log('🚀', 'didupdate', this.props.currentItem);
 		// if (this.isValidItem(this.props.currentItem)) {
 		// this.refreshEditor();
@@ -403,6 +402,12 @@ export default class ContentWrapFiles extends Component {
 		}
 		this.updateSplits();
 	}
+	mainSplitDragHandler() {
+		this.previewDimension.update({
+			w: this.frame.clientWidth,
+			h: this.frame.clientHeight
+		});
+	}
 
 	/**
 	 * Loaded the code comiler based on the mode selected
@@ -528,7 +533,9 @@ export default class ContentWrapFiles extends Component {
 			}
 			return arg;
 		});
-		this.setState({ logs: [...this.state.logs, ...logs] });
+		this.setState({
+			logs: [...this.state.logs, ...logs]
+		});
 	}
 
 	previewException(error) {
@@ -537,7 +544,9 @@ export default class ContentWrapFiles extends Component {
 	}
 
 	toggleConsole() {
-		this.setState({ isConsoleOpen: !this.state.isConsoleOpen });
+		this.setState({
+			isConsoleOpen: !this.state.isConsoleOpen
+		});
 		trackEvent('ui', 'consoleToggle');
 	}
 	consoleHeaderDblClickHandler(e) {
@@ -586,6 +595,7 @@ export default class ContentWrapFiles extends Component {
 				direction={
 					this.props.currentLayoutMode === 2 ? 'vertical' : 'horizontal'
 				}
+				onDrag={this.mainSplitDragHandler.bind(this)}
 				onDragEnd={this.mainSplitDragEndHandler.bind(this)}
 			>
 				<div id="js-sidebar">
@@ -647,6 +657,7 @@ export default class ContentWrapFiles extends Component {
 						id="demo-frame"
 						allowfullscreen
 					/>
+					<PreviewDimension ref={comp => (this.previewDimension = comp)} />
 					<Console
 						logs={this.state.logs}
 						isConsoleOpen={this.state.isConsoleOpen}

src/components/SplitPane.jsx

@@ -12,6 +12,10 @@ export class SplitPane extends Component {
 		}
 		this.updateSplit();
 	}
+	componentWillUnmount() {
+		this.splitInstance.destroy();
+		delete this.splitInstance;
+	}
 	hasGutter() {
 		return (
 			[...this.parent.children].indexOf(
@@ -35,6 +39,7 @@ export class SplitPane extends Component {
 
 		/* eslint-disable new-cap */
 		this.splitInstance = Split([...this.parent.children], options);
+		console.log('recreating split');
 
 		/* eslint-enable new-cap */
 

src/components/UserCodeMirror.jsx

@@ -43,7 +43,6 @@ export default class UserCodeMirror extends Component {
 	shouldComponentUpdate(nextProps) {
 		if (nextProps.prefs !== this.props.prefs) {
 			const { prefs } = nextProps;
-			console.log('updating CM prefs', prefs);
 
 			this.cm.setOption('indentWithTabs', prefs.indentWith !== 'spaces');
 			this.cm.setOption(

src/components/app.jsx

@@ -255,7 +255,7 @@ export default class App extends Component {
 	}
 
 	getLanguageDefinition() {
-		console.log('🇯🇲 fetching defninition');
+		// console.log('🇯🇲 fetching defninition');
 		const { lang } = this.state.prefs;
 		if (!lang || lang === 'en') {
 			return {};

src/style.css

@@ -1812,6 +1812,16 @@ while the theme CSS file is loading */
 	margin-left: 10px;
 	font-size: 0.8em;
 }
+
+.preview-dimension {
+	position: absolute;
+	right: 0;
+	top: 0;
+	background: #ccc;
+	color: black;
+	padding: 5px;
+	z-index: 1;
+}
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;