mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-15 11:06:21 +02:00
Code Issues Releases Wiki Activity

port pane size saving and loading

Browse Source
This commit is contained in:
Kushagra Gour
2018-06-10 15:16:03 +05:30
parent 3981fa2488
commit 6c7b587ede
3 changed files with 74 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
webmaker/src/components/ContentWrap.jsx
View File

@ -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"

3
webmaker/src/components/SplitPane.jsx
View File

@ -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

51
webmaker/src/components/app.jsx
View File

@ -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();
// currentItem.mainSizes = getMainPaneSizes();
this.state.currentItem.sizes = this.getCodePaneSizes();
this.state.currentItem.mainSizes = this.getMainPaneSizes();
log('saving key', key || this.state.currentItem.id, this.state.currentItem);