Merge pull request #343 from chinchang/preview-dimension-317

Preview dimension 317

.babelrc

@@ -1,5 +1,4 @@
 {
-	"presets": ["preact-cli/babel"],
 	"env": {
 		"test": {
 			"presets": [["preact-cli/babel", { "modules": "commonjs" }]]

src/components/Console.jsx

@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import { Inspector, chromeDark } from 'react-inspector';
 import { Trans } from '@lingui/macro';
+import { PureComponent } from 'preact-compat';
 
 class LogRow extends Component {
 	shouldComponentUpdate() {
@@ -22,7 +23,7 @@ class LogRow extends Component {
 	}
 }
 
-export class Console extends Component {
+export class Console extends PureComponent {
 	componentWillUpdate(nextProps) {
 		if (nextProps.logs != this.props.logs) {
 			// Scroll down after new log dom is inserted

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;
@@ -37,6 +39,15 @@ export default class ContentWrap extends Component {
 		window.previewException = this.previewException.bind(this);
 		// `clearConsole` is on window because it gets called from inside iframe also.
 		window.clearConsole = this.clearConsole.bind(this);
+
+		this.consoleHeaderDblClickHandler = this.consoleHeaderDblClickHandler.bind(
+			this
+		);
+		this.clearConsoleBtnClickHandler = this.clearConsoleBtnClickHandler.bind(
+			this
+		);
+		this.toggleConsole = this.toggleConsole.bind(this);
+		this.evalConsoleExpr = this.evalConsoleExpr.bind(this);
 	}
 	shouldComponentUpdate(nextProps, nextState) {
 		return (
@@ -416,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');
 	}
@@ -627,6 +644,8 @@ export default class ContentWrap extends Component {
 	}
 
 	render() {
+		log('contentwrap update');
+
 		return (
 			<SplitPane
 				class="content-wrap  flex  flex-grow"
@@ -636,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
@@ -837,15 +857,16 @@ 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}
-						onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler.bind(
+						onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler}
-							this
+						onClearConsoleBtnClick={this.clearConsoleBtnClickHandler}
-						)}
+						toggleConsole={this.toggleConsole}
-						onClearConsoleBtnClick={this.clearConsoleBtnClickHandler.bind(this)}
+						onEvalInputKeyup={this.evalConsoleExpr}
-						toggleConsole={this.toggleConsole.bind(this)}
-						onEvalInputKeyup={this.evalConsoleExpr.bind(this)}
 					/>
 					<CssSettingsModal
 						show={this.state.isCssSettingsModalOpen}

src/components/ContentWrapFiles.jsx

@@ -19,10 +19,11 @@ 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;
 
-/* global htmlCodeEl, jsCodeEl, cssCodeEl, logCountEl
+/* global htmlCodeEl
 */
 export default class ContentWrapFiles extends Component {
 	constructor(props) {
@@ -46,6 +47,15 @@ export default class ContentWrapFiles extends Component {
 		window.previewException = this.previewException.bind(this);
 		// `clearConsole` is on window because it gets called from inside iframe also.
 		window.clearConsole = this.clearConsole.bind(this);
+
+		this.consoleHeaderDblClickHandler = this.consoleHeaderDblClickHandler.bind(
+			this
+		);
+		this.clearConsoleBtnClickHandler = this.clearConsoleBtnClickHandler.bind(
+			this
+		);
+		this.toggleConsole = this.toggleConsole.bind(this);
+		this.evalConsoleExpr = this.evalConsoleExpr.bind(this);
 	}
 	shouldComponentUpdate(nextProps, nextState) {
 		return (
@@ -98,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();
@@ -394,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
@@ -519,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) {
@@ -528,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) {
@@ -577,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">
@@ -638,15 +657,14 @@ 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}
-						onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler.bind(
+						onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler}
-							this
+						onClearConsoleBtnClick={this.clearConsoleBtnClickHandler}
-						)}
+						toggleConsole={this.toggleConsole}
-						onClearConsoleBtnClick={this.clearConsoleBtnClickHandler.bind(this)}
+						onEvalInputKeyup={this.evalConsoleExpr}
-						toggleConsole={this.toggleConsole.bind(this)}
-						onEvalInputKeyup={this.evalConsoleExpr.bind(this)}
 					/>
 				</div>
 			</SplitPane>

src/components/SplitPane.jsx

@@ -2,42 +2,45 @@ import { h, Component } from 'preact';
 import Split from 'split.js';
 
 export class SplitPane extends Component {
-	// shouldComponentUpdate(nextProps, nextState) {
-	// 	return (
-	// 		nextProps.direction !== this.props.direction ||
-	// 		nextProps.sizes.join('') !== this.props.sizes.join('')
-	// 	);
-	// }
 	componentDidMount() {
 		this.updateSplit();
 	}
-	componentWillUpdate() {
+
-		if (this.splitInstance) {
+	componentDidUpdate(prevProps) {
-			this.splitInstance.destroy();
+		if (this.hasGutter() && !this.hasPropsChanged(prevProps, this.props)) {
+			return;
 		}
-	}
-	componentDidUpdate() {
 		this.updateSplit();
 	}
-	updateSplit() {
+	componentWillUnmount() {
-		const options = {
+		this.splitInstance.destroy();
-			direction: this.props.direction,
+		delete this.splitInstance;
-			minSize: this.props.minSize,
-			gutterSize: 6,
-			sizes: this.props.sizes
-		};
-		if (this.props.onDragEnd) {
-			options.onDragEnd = this.props.onDragEnd;
 	}
-		if (this.props.onDragStart) {
+	hasGutter() {
-			options.onDragStart = this.props.onDragStart;
+		return (
+			[...this.parent.children].indexOf(
+				this.parent.querySelector('.gutter')
+			) !== -1
+		);
+	}
+	hasPropsChanged(a, b) {
+		return (
+			a.direction !== b.direction ||
+			(a.sizes && b.sizes && a.sizes.join('') !== b.sizes.join(''))
+		);
+	}
+	updateSplit() {
+		const { children, ...options } = this.props;
+		options.gutterSize = 6;
+
+		if (this.splitInstance && this.hasGutter()) {
+			this.splitInstance.destroy();
 		}
 
 		/* eslint-disable new-cap */
-		this.splitInstance = Split(
+		this.splitInstance = Split([...this.parent.children], options);
-			this.props.children.map(node => '#' + node.attributes.id),
+		console.log('recreating split');
-			options
+
-		);
 		/* eslint-enable new-cap */
 
 		if (this.props.onSplit) {
@@ -49,6 +52,10 @@ export class SplitPane extends Component {
 		const { children, ...props } = this.props;
 		/* eslint-enable no-unused-vars */
 
-		return <div {...props}>{this.props.children}</div>;
+		return (
+			<div ref={el => (this.parent = el)} {...props}>
+				{this.props.children}
+			</div>
+		);
 	}
 }

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%;