m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix monaco editor layout with resizeObserve

Browse Source
dev_aliyun2
harry 5 years ago
parent 54a44ebb61
commit d4c032420f
3 changed files with 116 additions and 153 deletions
Show Stats Download Patch File Download Diff File

19
public/react/src/components/monaco-editor/index.jsx
Unescape View File

@ -64,7 +64,7 @@ function getLanguageByMirrorName(mirror_name) {
export default ({
width = '100%',
height = '100%',
height = '445px',
value,
language = 'javascript',
options = {},
@ -78,20 +78,9 @@ export default ({
const [init, setInit] = useState(false)
function onLayout() {
if (window.ResizeObserver) {
const ro = new window.ResizeObserver(entries => {
for (let entry of entries) {
if (entry.target.offsetHeight > 0) {
editor.current.instance.layout()
}
}
})
ro.observe(editorEl.current.parentElement)
} else {
setTimeout(() => {
editor.current.instance.layout()
}, 100);
}
setTimeout(() => {
editor.current.instance.layout()
}, 100)
}
useEffect(() => {

2
public/react/src/modules/page/MainContent.js
Unescape View File

@ -155,7 +155,7 @@ class MainContent extends Component {
<div style={{ display: (codeLoading ? 'block' : 'none'), textAlign: 'center' }}>
<span style={{ color: '#ddd', display: 'block' }}>正在加载中，请稍后...</span>
</div>
<div style={{ display: (codeLoading ? 'none' : 'block') }}>
<div style={{ display: (codeLoading ? 'none' : 'block'), height: '100%' }}>
<CodeRepositoryViewContainer {...this.props} ></CodeRepositoryViewContainer>
</div>
</React.Fragment>

248
public/react/src/modules/page/main/CodeRepositoryViewContainer.js
Unescape View File

@ -17,27 +17,27 @@ function addPrePath(treeData, parentNodePath) {
})
}
function getNewTreeData(treeData, curKey, child, level) {
const loop = (data) => {
data.forEach((item) => {
// 这里不能用indexOf 同一级可能出现test目录和test.py文件
if (item.key == curKey) {
if (child && child.length) { // 可能没有子节点
child = addPrePath(child, curKey);
item.children = child;
}
item.isLeaf = false;
} else {
if (item.children) {
loop(item.children);
}
}
});
};
loop(treeData);
const loop = (data) => {
data.forEach((item) => {
// 这里不能用indexOf 同一级可能出现test目录和test.py文件
if (item.key == curKey) {
if (child && child.length) { // 可能没有子节点
child = addPrePath(child, curKey);
item.children = child;
}
item.isLeaf = false;
} else {
if (item.children) {
loop(item.children);
}
}
});
};
loop(treeData);
}
function fileData2TreeData(repoFilesData) {
if(repoFilesData!=null){
if (repoFilesData != null) {
const fileTreeData = [];
repoFilesData.forEach((item) => {
if (item.kind === 'file') {
@ -79,17 +79,17 @@ class CodeRepositoryViewContainer extends Component {
}
}
showSettingDrawer = (open) => {
this.setState({settingDrawerOpen: open})
this.setState({ settingDrawerOpen: open })
}
tabIndexChange = (index) => {
this.setState({tabIndex: index});
this.setState({ tabIndex: index });
}
onRepositoryViewExpand() {
window.repository_extend_and_zoom();
this.setState({
evaluateViewExpanded: !this.state.evaluateViewExpanded
}, () => {
setTimeout(()=>{
setTimeout(() => {
window.__tpiOnResize()
}, 300)
})
@ -104,8 +104,8 @@ class CodeRepositoryViewContainer extends Component {
}
this.setState({
drawerOpen: open,
})
drawerOpen: open,
})
}
loadRepoFiles = () => {
if (!this.state.fileTreeData) {
@ -114,28 +114,28 @@ class CodeRepositoryViewContainer extends Component {
}
componentWillReceiveProps(newProps, oldProps) {
}
componentDidMount() {
}
componentDidUpdate(prevProps, prevState, snapshot) {
const { game, challenge } = this.props
if (this.props.game && (!prevProps.game || prevProps.game.identifier !== this.props.game.identifier) ) {
if (this.props.game && (!prevProps.game || prevProps.game.identifier !== this.props.game.identifier)) {
this.setState({
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[0] : challenge.path ]
fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[0] : challenge.path]
})
// 初始化
} else if (this.state.fileTreeSelectedKeys.length === 0 && challenge && challenge.path) {
this.setState({
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[0] : challenge.path ]
fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[0] : challenge.path]
})
} else if (challenge && prevProps && prevProps.challenge
&& challenge.pathIndex != prevProps.challenge.pathIndex
&& challenge.pathIndex !== -1) {
&& challenge.pathIndex != prevProps.challenge.pathIndex
&& challenge.pathIndex !== -1) {
this.setState({
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[challenge.pathIndex] : challenge.path ]
fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[challenge.pathIndex] : challenge.path]
})
}
}
@ -146,20 +146,20 @@ class CodeRepositoryViewContainer extends Component {
})
}
onLoadData = (treeNode) => {
if (treeNode.props.children && treeNode.props.children.length) {
return new Promise((resolve) => {
resolve();
});
}
return new Promise((resolve, reject) => {
this.fetchRepoFiles(treeNode, resolve, reject)
});
}
if (treeNode.props.children && treeNode.props.children.length) {
return new Promise((resolve) => {
resolve();
});
}
return new Promise((resolve, reject) => {
this.fetchRepoFiles(treeNode, resolve, reject)
});
}
map2OldData = (treeData) => {
if (!treeData || treeData.length == 0) {
return []
}
if (!treeData || treeData.length === 0) return treeData;
treeData = treeData.map(item => {
return {
@ -170,7 +170,7 @@ class CodeRepositoryViewContainer extends Component {
})
return treeData;
}
fetchRepoFiles(treeNode, resolve, reject) {
// http://localhost:3000/api/v1/games/829al3mst4fy/entries?path=src/step1&rev=master
if (!this.props.challenge || !this.props.game) {
@ -179,14 +179,14 @@ class CodeRepositoryViewContainer extends Component {
// var ar = this.props.challenge.path.split('/');
// ar.length = ar.length - 2;
// var _path = ar.join('/');
var _path = treeNode ? treeNode.props.eventKey : '' ;
var _path = treeNode ? treeNode.props.eventKey : '';
if (_path.charAt(0) === '/') {
_path = _path.substring(1)
}
// var url = `/api/v1/games/${this.props.game.identifier}/entries?path=${_path}&rev=master&gpid=${this.props.myshixun.gpid}`
let url = `/myshixuns/${this.props.myshixun.identifier}/repository.json`
if (!this.state.fileTreeData || this.state.fileTreeData.length === 0) {
this.setState({
loadingFirstRepoFiles: true,
@ -194,44 +194,44 @@ class CodeRepositoryViewContainer extends Component {
}
var that = this;
axios.post(url, {
path: _path
// withCredentials: true,
})
.then((response) => {
path: _path
// withCredentials: true,
})
.then((response) => {
// if (!response) {
// resolve && resolve();
// return;
// }
const repoFilesData = this.map2OldData(response.data.trees)
if (!this.state.fileTreeData || this.state.fileTreeData.length === 0) { // 还没树节点，没加载过
const fileTreeData = fileData2TreeData(repoFilesData)
this.setState({
fileTreeData,
loadingFirstRepoFiles: false,
});
} else {
var _treeNode = treeNode;
var _eventKey = _treeNode.props.eventKey;
const fileTreeData = that.state.fileTreeData;
// 新的数组放置到treenode下
const tempFileTreeData = fileData2TreeData(repoFilesData)
getNewTreeData(fileTreeData, _eventKey, tempFileTreeData, 2);
this.setState({
fileTreeData,
})
}
resolve && resolve();
})
.catch(function (error) {
console.log(error);
reject && reject();
});
const repoFilesData = this.map2OldData(response.data.trees)
if (!this.state.fileTreeData || this.state.fileTreeData.length === 0) { // 还没树节点，没加载过
const fileTreeData = fileData2TreeData(repoFilesData)
this.setState({
fileTreeData,
loadingFirstRepoFiles: false,
});
} else {
var _treeNode = treeNode;
var _eventKey = _treeNode.props.eventKey;
const fileTreeData = that.state.fileTreeData;
// 新的数组放置到treenode下
const tempFileTreeData = fileData2TreeData(repoFilesData)
getNewTreeData(fileTreeData, _eventKey, tempFileTreeData, 2);
this.setState({
fileTreeData,
})
}
resolve && resolve();
})
.catch(function (error) {
console.log(error);
reject && reject();
});
}
onTreeSelect = (selectedKeys, info) => {
const isLeaf = info.node.isLeaf();
@ -240,7 +240,7 @@ class CodeRepositoryViewContainer extends Component {
fileTreeSelectedKeys: selectedKeys
})
const { fetchRepositoryCode, onPathChange, showSnackbar, challenge } = this.props;
const nodePath = info.node.props.eventKey;
let isCurrentFile = false;
// 设置pathIndex为-1，那么代码文件下拉可以切回可编辑的文件
@ -249,7 +249,7 @@ class CodeRepositoryViewContainer extends Component {
if (challenge.pathIndex === 0) {
showSnackbar(`当前编辑文件已经是${nodePath}`)
} else {
fetchRepositoryCode(null, nodePath, 1);
fetchRepositoryCode(null, nodePath, 1);
onPathChange(0)
}
return;
@ -257,7 +257,7 @@ class CodeRepositoryViewContainer extends Component {
onPathChange(-1)
}
} else {
let cur_index = -1;
if (challenge.path && challenge.path.forEach) {
challenge.path.forEach((item, index) => {
@ -267,7 +267,7 @@ class CodeRepositoryViewContainer extends Component {
}
})
}
if (isCurrentFile) {
if (challenge.pathIndex == cur_index) {
showSnackbar(`当前编辑文件已经是${nodePath}`)
@ -281,75 +281,49 @@ class CodeRepositoryViewContainer extends Component {
if (nodePath) {
const filetype = nodePath.split('.').pop().toLowerCase();
if (filetype == 'jpg' || filetype == 'png' || filetype == 'gif' || filetype == 'jpeg'
|| filetype == 'jar'
|| filetype == 'doc' || filetype == 'pdf' || filetype == 'xsl' || filetype == 'ppt') {
|| filetype == 'jar'
|| filetype == 'doc' || filetype == 'pdf' || filetype == 'xsl' || filetype == 'ppt') {
showSnackbar(`不支持加载${filetype}类型的文件。`)
return;
}
fetchRepositoryCode(null, nodePath, 1);
fetchRepositoryCode(null, nodePath, 1);
} else {
console.error('no eventKey:', info.node)
}
}
}
// /shixuns/mnf6b7z3/shixun_discuss?challenge_id=88
render() {
return (
// <React.Fragment>
// {this.props.isOnlyContainer == true ?
// React.Children.map(this.props.children, child => {
// if(!child) {
// return ''
// }
// return React.cloneElement(child, Object.assign({...this.state}, {
// loadRepoFiles: this.loadRepoFiles,
// onTreeSelect: this.onTreeSelect,
// onLoadData: this.onLoadData,
// }))
// })
// :
// <CodeRepositoryView {...this.props}
// {...this.state}
// showFilesDrawer={this.showFilesDrawer}
// loadRepoFiles={this.loadRepoFiles}
// onLoadData={this.onLoadData}
// onTreeSelect={ this.onTreeSelect }
// onRepositoryViewExpand={this.onRepositoryViewExpand}
// tabIndexChange={this.tabIndexChange}
// showSettingDrawer={this.showSettingDrawer}
// ></CodeRepositoryView> }
// </React.Fragment>
<React.Fragment>
{this.props.isOnlyContainer == true ?
React.Children.map(this.props.children, child => {
if(!child) {
return ''
}
return React.cloneElement(child, Object.assign({...this.state}, {
loadRepoFiles: this.loadRepoFiles,
onTreeSelect: this.onTreeSelect,
onLoadData: this.onLoadData,
}))
})
:
<CodeRepositoryView {...this.props}
{...this.state}
// /shixuns/mnf6b7z3/shixun_discuss?challenge_id=88
render() {
return (
<React.Fragment>
{this.props.isOnlyContainer == true ?
React.Children.map(this.props.children, child => {
if (!child) {
return ''
}
return React.cloneElement(child, Object.assign({ ...this.state }, {
loadRepoFiles: this.loadRepoFiles,
onTreeSelect: this.onTreeSelect,
onLoadData: this.onLoadData,
}))
})
:
<CodeRepositoryView {...this.props}
{...this.state}
showFilesDrawer={this.showFilesDrawer}
loadRepoFiles={this.loadRepoFiles}
onLoadData={this.onLoadData}
onTreeSelect={ this.onTreeSelect }
onTreeSelect={this.onTreeSelect}
onRepositoryViewExpand={this.onRepositoryViewExpand}
tabIndexChange={this.tabIndexChange}
showSettingDrawer={this.showSettingDrawer}
></CodeRepositoryView> }
</React.Fragment>
);
}
></CodeRepositoryView>}
</React.Fragment>
);
}
}
export default CodeRepositoryViewContainer;

Write Preview
Loading…
Cancel
Save