fix: 修复编辑器转化bug,增加窗口最大最小化功能

This commit is contained in:
zude.hzd 2020-10-26 22:14:17 +08:00
parent 79be069544
commit 05666af7d6
4 changed files with 40 additions and 40 deletions

View File

@ -26,13 +26,6 @@
"version": "1.0.0",
"urls": ["https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js", "https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css"],
"library": "MCBreadcrumb"
},
{
"title": "krumpDemo",
"package": "krumpDemo",
"version": "1.0.0",
"urls": ["http://30.37.82.74:8000/lc-engine.js"],
"library": "krump-test-module"
}
],
"components": [

View File

@ -89,17 +89,17 @@ export default class ExpressionView extends PureComponent {
return null;
}
onChange(value: string, actionType: string) {
let realInputValue = value;
onChange(value: string) {
const realInputValue = value;
const realDataSource = null;
let nextCursorIndex: number;
// 更新值
if (actionType === 'itemClick' || actionType === 'enter') {
const curValue = this.state.value;
if (curValue) {
realInputValue = curValue + realInputValue;
}
}
// if (actionType === 'itemClick' || actionType === 'enter') {
// // const curValue = this.state.value;
// // if (curValue) {
// // realInputValue = curValue + realInputValue;
// // }
// }
// 更新数据源
const newState = {
value: realInputValue,

View File

@ -58,12 +58,12 @@ export default class SourceEditor extends Component<{
private originSize: {
width: '',
height: ''
}
};
state = {
isShowSaveBtn: true,
visiable: false,
fullScreenStatus:false
fullScreenStatus: false,
};
// eslint-disable-next-line react/no-deprecated
@ -103,7 +103,7 @@ export default class SourceEditor extends Component<{
componentDidMount() {
this.editorNode = this.editorJsRef.current; // 记录当前dom节点
// this.editorNode = this.editorJsRef.current; // 记录当前dom节点
}
/**
@ -152,6 +152,7 @@ export default class SourceEditor extends Component<{
css,
selectTab: TAB_KEY.JS_TAB,
visiable: true,
fullScreenStatus: false,
});
};
@ -204,9 +205,14 @@ export default class SourceEditor extends Component<{
if (this.editorCmd) {
this.callEditorEvent(this.editorCmd.eventName, this.editorCmd.params);
}
setTimeout(() => {
this.editorNode = this.editorJsRef.current; // 记录当前dom节点
}, 0);
};
fullScreen = () => {
console.log(this.editorNode);
document.body.appendChild(this.editorNode);
// this.originSize = {
// width: this.editorNode.clientWidth,
@ -224,33 +230,34 @@ export default class SourceEditor extends Component<{
this.monocoEditor.layout({
height: document.body.clientHeight,
width: document.body.clientWidth
})
width: document.body.clientWidth,
});
this.monocoEditor.updateOptions(fullScreenOption);
this.setState({
fullScreenStatus:true
})
fullScreenStatus: true,
});
};
minScreen = () => {
// document.body.removeChild(this.editorNode);
let node=document.getElementById("editor-context-container").lastChild;
document.getElementById('editor-context-container')?.insertBefore(node,this.editorNode);
const listNode = document.getElementById('editor-context-container');
listNode.insertBefore(this.editorNode, listNode.childNodes[0]);
const minScreenOption = {
...defaultEditorOption
...defaultEditorOption,
minimap: {
enabled: false,
},
};
this.monocoEditor.updateOptions(minScreenOption);
this.setState({
fullScreenStatus:false
})
fullScreenStatus: false,
});
}
};
onTabChange = (key) => {
const { editor } = this.props;
@ -312,7 +319,7 @@ export default class SourceEditor extends Component<{
};
render() {
const { selectTab, jsCode, css, isShowSaveBtn, visiable,fullScreenStatus } = this.state;
const { selectTab, jsCode, css, isShowSaveBtn, visiable, fullScreenStatus } = this.state;
const tabs = [
{ tab: 'index.js', key: TAB_KEY.JS_TAB },
{ tab: 'style.css', key: TAB_KEY.CSS_TAB },
@ -331,7 +338,7 @@ export default class SourceEditor extends Component<{
{ visiable &&
<div style={{ height: '100%' }} className="editor-context-container" id="editor-context-container">
<div id="jsEditorDom" className="editor-context" ref={this.editorJsRef}>
<MonacoEditor
value={jsCode}
{...defaultEditorOption}
@ -341,13 +348,13 @@ export default class SourceEditor extends Component<{
/>
{
!fullScreenStatus?
<div className="full-screen-container" onClick={this.fullScreen}>
<img src="https://gw.alicdn.com/tfs/TB1d7XqE1T2gK0jSZFvXXXnFXXa-200-200.png"></img>
</div>:
<div className="min-screen-container" onClick={this.minScreen}>
<img src="https://gw.alicdn.com/tfs/TB1IIonZHY1gK0jSZTEXXXDQVXa-200-200.png"></img>
</div>
!fullScreenStatus ?
<div className="full-screen-container" onClick={this.fullScreen}>
<img src="https://gw.alicdn.com/tfs/TB1d7XqE1T2gK0jSZFvXXXnFXXa-200-200.png" />
</div> :
<div className="min-screen-container" onClick={this.minScreen}>
<img src="https://gw.alicdn.com/tfs/TB1IIonZHY1gK0jSZTEXXXDQVXa-200-200.png" />
</div>
}
</div>

View File

@ -84,7 +84,7 @@ const transfrom = {
// eslint-disable-next-line no-useless-escape
const reg = /\w+\s?\((\w|\,|\s|\{|\}|\=|\'|\")*\)\s?\{/;
const result = codeStr.match(reg);
if (result && result[0]) {
const functionNameStr = result[0];