From 507fb69bcee3fe2448b74e47863ad7a779e98054 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Mon, 5 Nov 2018 15:41:03 +0530
Subject: [PATCH] Show preview dimension when resizing the main split. fixes
 #317

---
 src/components/ContentWrap.jsx      | 16 +++++++++++++++-
 src/components/ContentWrapFiles.jsx | 19 +++++++++++++++----
 src/components/SplitPane.jsx        |  5 +++++
 src/components/UserCodeMirror.jsx   |  1 -
 src/components/app.jsx              |  2 +-
 src/style.css                       | 10 ++++++++++
 6 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
index 6f176cc..6a93da1 100644
--- a/src/components/ContentWrap.jsx
+++ b/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}
diff --git a/src/components/ContentWrapFiles.jsx b/src/components/ContentWrapFiles.jsx
index 396e6fe..8d58c0d 100644
--- a/src/components/ContentWrapFiles.jsx
+++ b/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}
diff --git a/src/components/SplitPane.jsx b/src/components/SplitPane.jsx
index 96149db..de87362 100644
--- a/src/components/SplitPane.jsx
+++ b/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 */
 
diff --git a/src/components/UserCodeMirror.jsx b/src/components/UserCodeMirror.jsx
index 19a794f..270ddc0 100644
--- a/src/components/UserCodeMirror.jsx
+++ b/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(
diff --git a/src/components/app.jsx b/src/components/app.jsx
index 1430210..fc0de15 100644
--- a/src/components/app.jsx
+++ b/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 {};
diff --git a/src/style.css b/src/style.css
index 898f531..820f11d 100644
--- a/src/style.css
+++ b/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%;