port pane size saving and loading

webmaker/src/components/ContentWrap.jsx

@@ -246,7 +246,9 @@ export default class ContentWrap extends Component {
 	shouldComponentUpdate(nextProps, nextState) {
 		return (
 			this.state.isConsoleOpen !== nextState.isConsoleOpen ||
-			this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen
+			this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
+			this.state.codeSplitSizes != nextState.codeSplitSizes ||
+			this.state.mainSplitSizes != nextState.mainSplitSizes
 		);
 	}
 	componentDidUpdate() {
@@ -262,7 +264,6 @@ export default class ContentWrap extends Component {
 		this.props.onRef(this);
 	}
 	refreshEditor() {
-		console.log('ContentWrap refresh editor');
 		this.cmCodes.html = this.props.currentItem.html;
 		this.cmCodes.css = this.props.currentItem.css;
 		this.cmCodes.js = this.props.currentItem.js;
@@ -330,23 +331,6 @@ export default class ContentWrap extends Component {
 		});
 	}
 
-	// Returns the sizes of main code & preview panes.
-	getMainSplitSizesToApply() {
-		var mainSplitSizes;
-		const { currentItem, currentLayoutMode } = this.props;
-		if (currentItem && currentItem.mainSizes) {
-			// For layout mode 3, main panes are reversed using flex-direction.
-			// So we need to apply the saved sizes in reverse order.
-			mainSplitSizes =
-				currentLayoutMode === 3
-					? [currentItem.mainSizes[1], currentItem.mainSizes[0]]
-					: currentItem.mainSizes;
-		} else {
-			mainSplitSizes = currentLayoutMode === 5 ? [75, 25] : [50, 50];
-		}
-		return mainSplitSizes;
-	}
-
 	// Check all the code wrap if they are minimized or maximized
 	updateCodeWrapCollapseStates() {
 		// This is debounced!
@@ -410,11 +394,29 @@ export default class ContentWrap extends Component {
 	}
 
 	resetSplitting() {
-		const codeSplitSizes = this.getCodeSplitSizes();
 		this.setState({
-			codeSplitSizes: this.codeSplitSizes
+			codeSplitSizes: this.getCodeSplitSizes(),
+			mainSplitSizes: this.getMainSplitSizesToApply()
 		});
 	}
+
+	// Returns the sizes of main code & preview panes.
+	getMainSplitSizesToApply() {
+		var mainSplitSizes;
+		const { currentItem, currentLayoutMode } = this.props;
+		if (currentItem && currentItem.mainSizes) {
+			// For layout mode 3, main panes are reversed using flex-direction.
+			// So we need to apply the saved sizes in reverse order.
+			mainSplitSizes =
+				currentLayoutMode === 3
+					? [currentItem.mainSizes[1], currentItem.mainSizes[0]]
+					: currentItem.mainSizes;
+		} else {
+			mainSplitSizes = currentLayoutMode === 5 ? [75, 25] : [50, 50];
+		}
+		return mainSplitSizes;
+	}
+
 	getCodeSplitSizes() {
 		if (this.props.currentItem && this.props.currentItem.sizes) {
 			return this.props.currentItem.sizes;
@@ -678,8 +680,9 @@ export default class ContentWrap extends Component {
 		return (
 			<SplitPane
 				class="content-wrap  flex  flex-grow"
-				sizes={this.getMainSplitSizesToApply()}
+				sizes={this.state.mainSplitSizes}
 				minSize={150}
+				style=""
 				direction={
 					this.props.currentLayoutMode === 2 ? 'vertical' : 'horizontal'
 				}
@@ -863,7 +866,7 @@ export default class ContentWrap extends Component {
 						{/* Inlet(scope.cm.js); */}
 					</div>
 				</SplitPane>
-				<div class="demo-side" id="js-demo-side">
+				<div class="demo-side" id="js-demo-side" style="">
 					<iframe
 						ref={el => (this.frame = el)}
 						src="about://blank"

webmaker/src/components/SplitPane.jsx

@@ -33,9 +33,8 @@ export class SplitPane extends Component {
 		if (this.props.onDragStart) {
 			options.onDragStart = this.props.onDragStart;
 		}
-		// debugger;
-		// log('SIZE UPDATED', options);
 
+		// log('SIZE UPDATTED', ...options);
 		this.splitInstance = Split(
 			this.props.children.map(node => '#' + node.attributes.id),
 			options

webmaker/src/components/app.jsx

@@ -148,7 +148,7 @@ export default class App extends Component {
 				code: ''
 			},
 			result => {
-				// this.toggleLayout(result.layoutMode);
+				this.toggleLayout(result.layoutMode);
 				this.state.prefs.layoutMode = result.layoutMode;
 				if (result.code) {
 					lastCode = result.code;
@@ -324,11 +324,11 @@ export default class App extends Component {
 	}
 
 	populateItemsInSavedPane(items) {
-		const savedItemsPane = $('#js-saved-items-pane');
 		// TODO: sort desc. by updation date
 		this.setState({
 			savedItems: { ...this.state.savedItems }
 		});
+		var a = 343478798793397;
 
 		this.toggleSavedItemsPane();
 		// HACK: Set overflow after sometime so that the items can animate without getting cropped.
@@ -493,6 +493,7 @@ export default class App extends Component {
 		mode = window.innerWidth < 500 ? 2 : mode;
 
 		if (this.state.currentLayoutMode === mode) {
+			this.contentWrap.resetSplitting();
 			// mainSplitInstance.setSizes(getMainSplitSizesToApply());
 			// codeSplitInstance.setSizes(currentItem.sizes || [33.33, 33.33, 33.33]);
 			this.setState({ currentLayoutMode: mode });
@@ -516,6 +517,48 @@ export default class App extends Component {
 		trackEvent('ui', 'toggleLayoutClick', layoutId);
 		this.toggleLayout(layoutId);
 	}
+
+	// Calculates the sizes of html, css & js code panes.
+	getCodePaneSizes() {
+		var sizes;
+		const currentLayoutMode = this.state.currentLayoutMode;
+		var dimensionProperty =
+			currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
+		try {
+			sizes = [
+				htmlCodeEl.style[dimensionProperty],
+				cssCodeEl.style[dimensionProperty],
+				jsCodeEl.style[dimensionProperty]
+			];
+		} catch (e) {
+			sizes = [33.33, 33.33, 33.33];
+		} finally {
+			/* eslint-disable no-unsafe-finally */
+			return sizes;
+
+			/* eslint-enable no-unsafe-finally */
+		}
+	}
+
+	// Calculates the current sizes of code & preview panes.
+	getMainPaneSizes() {
+		var sizes;
+		const currentLayoutMode = this.state.currentLayoutMode;
+		var dimensionProperty = currentLayoutMode === 2 ? 'height' : 'width';
+		try {
+			sizes = [
+				+$('#js-code-side').style[dimensionProperty].match(/([\d.]+)%/)[1],
+				+$('#js-demo-side').style[dimensionProperty].match(/([\d.]+)%/)[1]
+			];
+		} catch (e) {
+			sizes = [50, 50];
+		} finally {
+			/* eslint-disable no-unsafe-finally */
+			return sizes;
+
+			/* eslint-enable no-unsafe-finally */
+		}
+	}
 	saveSetting(setting, value) {
 		const d = deferred();
 		const obj = {
@@ -529,8 +572,8 @@ export default class App extends Component {
 		this.state.currentItem.updatedOn = Date.now();
 		this.state.currentItem.layoutMode = this.state.currentLayoutMode;
 
-		// currentItem.sizes = getCodePaneSizes();
+		this.state.currentItem.sizes = this.getCodePaneSizes();
-		// currentItem.mainSizes = getMainPaneSizes();
+		this.state.currentItem.mainSizes = this.getMainPaneSizes();
 
 		log('saving key', key || this.state.currentItem.id, this.state.currentItem);