mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-31 18:50:14 +02:00
Code Issues Releases Wiki Activity

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

Browse Source 
Preview dimension 317
This commit is contained in:
Kushagra Gour
2018-11-05 15:48:54 +05:30
committed by GitHub
parent 418899ec51 507fb69bce
commit 951497dcee
8 changed files with 104 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.babelrc
View File

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

3
src/components/Console.jsx
View File

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

35
src/components/ContentWrap.jsx
View File

@@ -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(
this
)}
onClearConsoleBtnClick={this.clearConsoleBtnClickHandler.bind(this)}
toggleConsole={this.toggleConsole.bind(this)}
onEvalInputKeyup={this.evalConsoleExpr.bind(this)}
onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler}
onClearConsoleBtnClick={this.clearConsoleBtnClickHandler}
toggleConsole={this.toggleConsole}
onEvalInputKeyup={this.evalConsoleExpr}
/>
<CssSettingsModal
show={this.state.isCssSettingsModalOpen}

40
src/components/ContentWrapFiles.jsx
View File

@@ -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(
this
)}
onClearConsoleBtnClick={this.clearConsoleBtnClickHandler.bind(this)}
toggleConsole={this.toggleConsole.bind(this)}
onEvalInputKeyup={this.evalConsoleExpr.bind(this)}
onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler}
onClearConsoleBtnClick={this.clearConsoleBtnClickHandler}
toggleConsole={this.toggleConsole}
onEvalInputKeyup={this.evalConsoleExpr}
/>
</div>
</SplitPane>

61
src/components/SplitPane.jsx
View File

@@ -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) {
this.splitInstance.destroy();
componentDidUpdate(prevProps) {
if (this.hasGutter() && !this.hasPropsChanged(prevProps, this.props)) {
return;
}
}
componentDidUpdate() {
this.updateSplit();
}
componentWillUnmount() {
this.splitInstance.destroy();
delete this.splitInstance;
}
hasGutter() {
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 options = {
direction: this.props.direction,
minSize: this.props.minSize,
gutterSize: 6,
sizes: this.props.sizes
};
if (this.props.onDragEnd) {
options.onDragEnd = this.props.onDragEnd;
}
if (this.props.onDragStart) {
options.onDragStart = this.props.onDragStart;
const { children, ...options } = this.props;
options.gutterSize = 6;
if (this.splitInstance && this.hasGutter()) {
this.splitInstance.destroy();
}
/* eslint-disable new-cap */
this.splitInstance = Split(
this.props.children.map(node => '#' + node.attributes.id),
options
);
this.splitInstance = Split([...this.parent.children], options);
console.log('recreating split');
/* 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>
);
}
}

1
src/components/UserCodeMirror.jsx
View File

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

2
src/components/app.jsx
View File

@@ -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 {};

10
src/style.css
View File

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