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 ({ export default ({
width = '100%', width = '100%',
height = '100%', height = '445px',
value, value,
language = 'javascript', language = 'javascript',
options = {}, options = {},
@ -78,20 +78,9 @@ export default ({
const [init, setInit] = useState(false) const [init, setInit] = useState(false)
function onLayout() { function onLayout() {
if (window.ResizeObserver) { setTimeout(() => {
const ro = new window.ResizeObserver(entries => { editor.current.instance.layout()
for (let entry of entries) { }, 100)
if (entry.target.offsetHeight > 0) {
editor.current.instance.layout()
}
}
})
ro.observe(editorEl.current.parentElement)
} else {
setTimeout(() => {
editor.current.instance.layout()
}, 100);
}
} }
useEffect(() => { 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' }}> <div style={{ display: (codeLoading ? 'block' : 'none'), textAlign: 'center' }}>
<span style={{ color: '#ddd', display: 'block' }}>正在加载中，请稍后...</span> <span style={{ color: '#ddd', display: 'block' }}>正在加载中，请稍后...</span>
</div> </div>
<div style={{ display: (codeLoading ? 'none' : 'block') }}> <div style={{ display: (codeLoading ? 'none' : 'block'), height: '100%' }}>
<CodeRepositoryViewContainer {...this.props} ></CodeRepositoryViewContainer> <CodeRepositoryViewContainer {...this.props} ></CodeRepositoryViewContainer>
</div> </div>
</React.Fragment> </React.Fragment>

218
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) { function getNewTreeData(treeData, curKey, child, level) {
const loop = (data) => { const loop = (data) => {
data.forEach((item) => { data.forEach((item) => {
// 这里不能用indexOf 同一级可能出现test目录和test.py文件 // 这里不能用indexOf 同一级可能出现test目录和test.py文件
if (item.key == curKey) { if (item.key == curKey) {
if (child && child.length) { // 可能没有子节点 if (child && child.length) { // 可能没有子节点
child = addPrePath(child, curKey); child = addPrePath(child, curKey);
item.children = child; item.children = child;
} }
item.isLeaf = false; item.isLeaf = false;
} else { } else {
if (item.children) { if (item.children) {
loop(item.children); loop(item.children);
} }
} }
}); });
}; };
loop(treeData); loop(treeData);
} }
function fileData2TreeData(repoFilesData) { function fileData2TreeData(repoFilesData) {
if(repoFilesData!=null){ if (repoFilesData != null) {
const fileTreeData = []; const fileTreeData = [];
repoFilesData.forEach((item) => { repoFilesData.forEach((item) => {
if (item.kind === 'file') { if (item.kind === 'file') {
@ -79,17 +79,17 @@ class CodeRepositoryViewContainer extends Component {
} }
} }
showSettingDrawer = (open) => { showSettingDrawer = (open) => {
this.setState({settingDrawerOpen: open}) this.setState({ settingDrawerOpen: open })
} }
tabIndexChange = (index) => { tabIndexChange = (index) => {
this.setState({tabIndex: index}); this.setState({ tabIndex: index });
} }
onRepositoryViewExpand() { onRepositoryViewExpand() {
window.repository_extend_and_zoom(); window.repository_extend_and_zoom();
this.setState({ this.setState({
evaluateViewExpanded: !this.state.evaluateViewExpanded evaluateViewExpanded: !this.state.evaluateViewExpanded
}, () => { }, () => {
setTimeout(()=>{ setTimeout(() => {
window.__tpiOnResize() window.__tpiOnResize()
}, 300) }, 300)
}) })
@ -104,8 +104,8 @@ class CodeRepositoryViewContainer extends Component {
} }
this.setState({ this.setState({
drawerOpen: open, drawerOpen: open,
}) })
} }
loadRepoFiles = () => { loadRepoFiles = () => {
if (!this.state.fileTreeData) { if (!this.state.fileTreeData) {
@ -122,20 +122,20 @@ class CodeRepositoryViewContainer extends Component {
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
const { game, challenge } = this.props 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({ 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) { } else if (this.state.fileTreeSelectedKeys.length === 0 && challenge && challenge.path) {
this.setState({ this.setState({
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[0] : challenge.path ] fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[0] : challenge.path]
}) })
} else if (challenge && prevProps && prevProps.challenge } else if (challenge && prevProps && prevProps.challenge
&& challenge.pathIndex != prevProps.challenge.pathIndex && challenge.pathIndex != prevProps.challenge.pathIndex
&& challenge.pathIndex !== -1) { && challenge.pathIndex !== -1) {
this.setState({ this.setState({
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[challenge.pathIndex] : challenge.path ] fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[challenge.pathIndex] : challenge.path]
}) })
} }
} }
@ -146,15 +146,15 @@ class CodeRepositoryViewContainer extends Component {
}) })
} }
onLoadData = (treeNode) => { onLoadData = (treeNode) => {
if (treeNode.props.children && treeNode.props.children.length) { if (treeNode.props.children && treeNode.props.children.length) {
return new Promise((resolve) => { return new Promise((resolve) => {
resolve(); resolve();
}); });
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.fetchRepoFiles(treeNode, resolve, reject) this.fetchRepoFiles(treeNode, resolve, reject)
}); });
} }
map2OldData = (treeData) => { map2OldData = (treeData) => {
if (!treeData || treeData.length == 0) { if (!treeData || treeData.length == 0) {
return [] return []
@ -179,7 +179,7 @@ class CodeRepositoryViewContainer extends Component {
// var ar = this.props.challenge.path.split('/'); // var ar = this.props.challenge.path.split('/');
// ar.length = ar.length - 2; // ar.length = ar.length - 2;
// var _path = ar.join('/'); // var _path = ar.join('/');
var _path = treeNode ? treeNode.props.eventKey : '' ; var _path = treeNode ? treeNode.props.eventKey : '';
if (_path.charAt(0) === '/') { if (_path.charAt(0) === '/') {
_path = _path.substring(1) _path = _path.substring(1)
} }
@ -194,44 +194,44 @@ class CodeRepositoryViewContainer extends Component {
} }
var that = this; var that = this;
axios.post(url, { axios.post(url, {
path: _path path: _path
// withCredentials: true, // withCredentials: true,
}) })
.then((response) => { .then((response) => {
// if (!response) { // if (!response) {
// resolve && resolve(); // resolve && resolve();
// return; // return;
// } // }
const repoFilesData = this.map2OldData(response.data.trees) const repoFilesData = this.map2OldData(response.data.trees)
if (!this.state.fileTreeData || this.state.fileTreeData.length === 0) { // 还没树节点，没加载过 if (!this.state.fileTreeData || this.state.fileTreeData.length === 0) { // 还没树节点，没加载过
const fileTreeData = fileData2TreeData(repoFilesData) const fileTreeData = fileData2TreeData(repoFilesData)
this.setState({ this.setState({
fileTreeData, fileTreeData,
loadingFirstRepoFiles: false, loadingFirstRepoFiles: false,
}); });
} else { } else {
var _treeNode = treeNode; var _treeNode = treeNode;
var _eventKey = _treeNode.props.eventKey; var _eventKey = _treeNode.props.eventKey;
const fileTreeData = that.state.fileTreeData; const fileTreeData = that.state.fileTreeData;
// 新的数组放置到treenode下 // 新的数组放置到treenode下
const tempFileTreeData = fileData2TreeData(repoFilesData) const tempFileTreeData = fileData2TreeData(repoFilesData)
getNewTreeData(fileTreeData, _eventKey, tempFileTreeData, 2); getNewTreeData(fileTreeData, _eventKey, tempFileTreeData, 2);
this.setState({ this.setState({
fileTreeData, fileTreeData,
}) })
} }
resolve && resolve(); resolve && resolve();
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
reject && reject(); reject && reject();
}); });
} }
onTreeSelect = (selectedKeys, info) => { onTreeSelect = (selectedKeys, info) => {
const isLeaf = info.node.isLeaf(); const isLeaf = info.node.isLeaf();
@ -281,8 +281,8 @@ class CodeRepositoryViewContainer extends Component {
if (nodePath) { if (nodePath) {
const filetype = nodePath.split('.').pop().toLowerCase(); const filetype = nodePath.split('.').pop().toLowerCase();
if (filetype == 'jpg' || filetype == 'png' || filetype == 'gif' || filetype == 'jpeg' if (filetype == 'jpg' || filetype == 'png' || filetype == 'gif' || filetype == 'jpeg'
|| filetype == 'jar' || filetype == 'jar'
|| filetype == 'doc' || filetype == 'pdf' || filetype == 'xsl' || filetype == 'ppt') { || filetype == 'doc' || filetype == 'pdf' || filetype == 'xsl' || filetype == 'ppt') {
showSnackbar(`不支持加载${filetype}类型的文件。`) showSnackbar(`不支持加载${filetype}类型的文件。`)
return; return;
} }
@ -292,48 +292,22 @@ class CodeRepositoryViewContainer extends Component {
} }
} }
} }
// /shixuns/mnf6b7z3/shixun_discuss?challenge_id=88 // /shixuns/mnf6b7z3/shixun_discuss?challenge_id=88
render() { render() {
return ( return (
// <React.Fragment> <React.Fragment>
// {this.props.isOnlyContainer == true ? {this.props.isOnlyContainer == true ?
// React.Children.map(this.props.children, child => { React.Children.map(this.props.children, child => {
// if(!child) { if (!child) {
// return '' return ''
// } }
// return React.cloneElement(child, Object.assign({...this.state}, { return React.cloneElement(child, Object.assign({ ...this.state }, {
// loadRepoFiles: this.loadRepoFiles, loadRepoFiles: this.loadRepoFiles,
// onTreeSelect: this.onTreeSelect, onTreeSelect: this.onTreeSelect,
// onLoadData: this.onLoadData, 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,
}))
})
: :
@ -342,14 +316,14 @@ class CodeRepositoryViewContainer extends Component {
showFilesDrawer={this.showFilesDrawer} showFilesDrawer={this.showFilesDrawer}
loadRepoFiles={this.loadRepoFiles} loadRepoFiles={this.loadRepoFiles}
onLoadData={this.onLoadData} onLoadData={this.onLoadData}
onTreeSelect={ this.onTreeSelect } onTreeSelect={this.onTreeSelect}
onRepositoryViewExpand={this.onRepositoryViewExpand} onRepositoryViewExpand={this.onRepositoryViewExpand}
tabIndexChange={this.tabIndexChange} tabIndexChange={this.tabIndexChange}
showSettingDrawer={this.showSettingDrawer} showSettingDrawer={this.showSettingDrawer}
></CodeRepositoryView> } ></CodeRepositoryView>}
</React.Fragment> </React.Fragment>
); );
} }
} }
export default CodeRepositoryViewContainer; export default CodeRepositoryViewContainer;

Write Preview
Loading…
Cancel
Save