gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(client): use the view zones to place the widgets (#43519)

Browse Source 
Rather than calculating the widget (i.e. the jaws) position ourselves,
we can use the fact that monaco knows where the view zones are.
This commit is contained in:
Oliver Eyton-Williams
2021-09-22 05:59:29 +02:00
committed by GitHub
parent a007c19c44
commit 7200269534
1 changed files with 17 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
client/src/templates/Challenges/classic/editor.tsx
View File

@ -78,8 +78,8 @@ interface EditorProperties {
startEditDecId: string; startEditDecId: string;
endEditDecId: string; endEditDecId: string;
insideEditDecId: string; insideEditDecId: string;
descriptionZoneHeight: number; descriptionZoneTop: number;
outputZoneHeight: number; outputZoneTop: number;
outputZoneId: string; outputZoneId: string;
descriptionNode?: HTMLDivElement; descriptionNode?: HTMLDivElement;
outputNode?: HTMLDivElement; outputNode?: HTMLDivElement;
@ -178,9 +178,9 @@ const initialData: EditorProperties = {
startEditDecId: '', startEditDecId: '',
endEditDecId: '', endEditDecId: '',
insideEditDecId: '', insideEditDecId: '',
descriptionZoneHeight: 0, descriptionZoneTop: 0,
outputZoneId: '', outputZoneId: '',
outputZoneHeight: 0 outputZoneTop: 0
}; };
const Editor = (props: EditorProps): JSX.Element => { const Editor = (props: EditorProps): JSX.Element => {
@ -444,8 +444,6 @@ const Editor = (props: EditorProps): JSX.Element => {
domNode.style.width = `${editor.getLayoutInfo().contentWidth}px`; domNode.style.width = `${editor.getLayoutInfo().contentWidth}px`;
data.descriptionZoneHeight = domNode.offsetHeight;
// We have to wait for the viewZone to finish rendering before adjusting the // We have to wait for the viewZone to finish rendering before adjusting the
// position of the overlayWidget (i.e. trigger it via onComputedHeight). If // position of the overlayWidget (i.e. trigger it via onComputedHeight). If
// not the editor may report the wrong value for position of the lines. // not the editor may report the wrong value for position of the lines.
@ -455,7 +453,12 @@ const Editor = (props: EditorProps): JSX.Element => {
domNode: document.createElement('div'), domNode: document.createElement('div'),
onComputedHeight: () => onComputedHeight: () =>
data.descriptionWidget && data.descriptionWidget &&
editor.layoutOverlayWidget(data.descriptionWidget) editor.layoutOverlayWidget(data.descriptionWidget),
onDomNodeTop: (top: number) => {
data.descriptionZoneTop = top;
if (data.descriptionWidget)
editor.layoutOverlayWidget(data.descriptionWidget);
}
}; };
data.descriptionZoneId = changeAccessor.addZone(viewZone); data.descriptionZoneId = changeAccessor.addZone(viewZone);
@ -472,8 +475,6 @@ const Editor = (props: EditorProps): JSX.Element => {
outputNode.style.width = `${editor.getLayoutInfo().contentWidth}px`; outputNode.style.width = `${editor.getLayoutInfo().contentWidth}px`;
data.outputZoneHeight = outputNode.offsetHeight;
// We have to wait for the viewZone to finish rendering before adjusting the // We have to wait for the viewZone to finish rendering before adjusting the
// position of the overlayWidget (i.e. trigger it via onComputedHeight). If // position of the overlayWidget (i.e. trigger it via onComputedHeight). If
// not the editor may report the wrong value for position of the lines. // not the editor may report the wrong value for position of the lines.
@ -482,7 +483,11 @@ const Editor = (props: EditorProps): JSX.Element => {
heightInPx: outputNode.offsetHeight, heightInPx: outputNode.offsetHeight,
domNode: document.createElement('div'), domNode: document.createElement('div'),
onComputedHeight: () => onComputedHeight: () =>
data.outputWidget && editor.layoutOverlayWidget(data.outputWidget) data.outputWidget && editor.layoutOverlayWidget(data.outputWidget),
onDomNodeTop: (top: number) => {
data.outputZoneTop = top;
if (data.outputWidget) editor.layoutOverlayWidget(data.outputWidget);
}
}; };
data.outputZoneId = changeAccessor.addZone(viewZone); data.outputZoneId = changeAccessor.addZone(viewZone);
@ -654,36 +659,12 @@ const Editor = (props: EditorProps): JSX.Element => {
return target.deltaDecorations(oldIds, [inlineDecoration]); return target.deltaDecorations(oldIds, [inlineDecoration]);
} }
// NOTE: this is where the view zone *should* be, not necessarily were it
// currently is. (see getLineAfterDescriptionZone)
// TODO: DRY this and getOutputZoneTop out.
function getDescriptionZoneTop() { function getDescriptionZoneTop() {
const editor = data.editor; return `${data.descriptionZoneTop}px`;
const heightDelta = data.descriptionZoneHeight;
if (editor) {
const top = `${
editor.getTopForLineNumber(getLineAfterDescriptionZone()) -
heightDelta -
editor.getScrollTop()
}px`;
return top;
}
return '0';
} }
function getOutputZoneTop() { function getOutputZoneTop() {
const editor = data.editor; return `${data.outputZoneTop}px`;
const heightDelta = data.outputZoneHeight;
if (editor) {
const top = `${
editor.getTopForLineNumber(getLineAfterEditableRegion()) -
heightDelta -
editor.getScrollTop()
}px`;
return top;
}
return '0';
} }
// It's not possible to directly access the current view zone so we track // It's not possible to directly access the current view zone so we track