-
Notifications
You must be signed in to change notification settings - Fork 201
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: format playground with prettier
- Loading branch information
Showing
7 changed files
with
2,497 additions
and
2,114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,176 +1,244 @@ | ||
function attachEditorEvents() { | ||
var diagramHeaders = $(".diagramHeader") | ||
_.forEach(diagramHeaders, function (header) { | ||
header.addEventListener("mouseover", onDiagramHeaderMouseOver) | ||
header.addEventListener("mouseout", onDiagramHeaderMouseOut) | ||
header.addEventListener("click", onDiagramHeaderMouseClick) | ||
}) | ||
|
||
var noneTerminals = $(".non-terminal text") | ||
_.forEach(noneTerminals, function (nonTerminal) { | ||
nonTerminal.addEventListener("mouseover", onDiagramNonTerminalMouseOver) | ||
nonTerminal.addEventListener("mouseout", onDiagramNonTerminalMouseOut) | ||
nonTerminal.addEventListener("click", onDiagramNonTerminalMouseClick) | ||
}) | ||
|
||
var terminals = $(".terminal text") | ||
_.forEach(terminals, function (terminal) { | ||
terminal.addEventListener("mouseover", onDiagramTerminalMouseOver) | ||
terminal.addEventListener("mouseout", onDiagramTerminalMouseOut) | ||
terminal.addEventListener("click", onDiagramTerminalMouseClick) | ||
}) | ||
var diagramHeaders = $(".diagramHeader"); | ||
_.forEach(diagramHeaders, function (header) { | ||
header.addEventListener("mouseover", onDiagramHeaderMouseOver); | ||
header.addEventListener("mouseout", onDiagramHeaderMouseOut); | ||
header.addEventListener("click", onDiagramHeaderMouseClick); | ||
}); | ||
|
||
var noneTerminals = $(".non-terminal text"); | ||
_.forEach(noneTerminals, function (nonTerminal) { | ||
nonTerminal.addEventListener("mouseover", onDiagramNonTerminalMouseOver); | ||
nonTerminal.addEventListener("mouseout", onDiagramNonTerminalMouseOut); | ||
nonTerminal.addEventListener("click", onDiagramNonTerminalMouseClick); | ||
}); | ||
|
||
var terminals = $(".terminal text"); | ||
_.forEach(terminals, function (terminal) { | ||
terminal.addEventListener("mouseover", onDiagramTerminalMouseOver); | ||
terminal.addEventListener("mouseout", onDiagramTerminalMouseOut); | ||
terminal.addEventListener("click", onDiagramTerminalMouseClick); | ||
}); | ||
} | ||
|
||
var usageMarkers = [] | ||
var usageMarkers = []; | ||
// we only need one but this simplifies the logic (at the cost of redundant work...) | ||
var definitionTextMarkers = [] | ||
|
||
var markNonTerminalsUsagesAndDefs = _.partialRight(markUsagesAndDefsInTextEditor, locateSubruleRef, locateRuleDefinition) | ||
var markTerminalsConsumeUsagesAndDefs = _.partialRight(markUsagesAndDefsInTextEditor, locateConsume, locateTokenDefinition) | ||
var markTerminalsManySepUsagesAndDefs = _.partialRight(markUsagesAndDefsInTextEditor, locateManySepSeparator, locateTokenDefinition) | ||
var markTerminalsAtLeastOneUsagesAndDefs = _.partialRight(markUsagesAndDefsInTextEditor, locateAtLeastOneSepSeparator, locateTokenDefinition) | ||
|
||
function markUsagesAndDefsInTextEditor(ruleName, usagesLocatorFunc, definitionLocatorFunc) { | ||
var escapedRuleName = _.escapeRegExp(ruleName) | ||
var textUsages = usagesLocatorFunc(javaScriptEditor.getValue(), escapedRuleName, javaScriptEditor) | ||
var newMarkers = _.map(textUsages, function (currTextUsagePos) { | ||
return javaScriptEditor.markText(currTextUsagePos.start, currTextUsagePos.end, { | ||
className: "markDiagramsUsageTextHover" | ||
}) | ||
var definitionTextMarkers = []; | ||
|
||
var markNonTerminalsUsagesAndDefs = _.partialRight( | ||
markUsagesAndDefsInTextEditor, | ||
locateSubruleRef, | ||
locateRuleDefinition | ||
); | ||
var markTerminalsConsumeUsagesAndDefs = _.partialRight( | ||
markUsagesAndDefsInTextEditor, | ||
locateConsume, | ||
locateTokenDefinition | ||
); | ||
var markTerminalsManySepUsagesAndDefs = _.partialRight( | ||
markUsagesAndDefsInTextEditor, | ||
locateManySepSeparator, | ||
locateTokenDefinition | ||
); | ||
var markTerminalsAtLeastOneUsagesAndDefs = _.partialRight( | ||
markUsagesAndDefsInTextEditor, | ||
locateAtLeastOneSepSeparator, | ||
locateTokenDefinition | ||
); | ||
|
||
function markUsagesAndDefsInTextEditor( | ||
ruleName, | ||
usagesLocatorFunc, | ||
definitionLocatorFunc | ||
) { | ||
var escapedRuleName = _.escapeRegExp(ruleName); | ||
var textUsages = usagesLocatorFunc( | ||
javaScriptEditor.getValue(), | ||
escapedRuleName, | ||
javaScriptEditor | ||
); | ||
var newMarkers = _.map(textUsages, function (currTextUsagePos) { | ||
return javaScriptEditor.markText( | ||
currTextUsagePos.start, | ||
currTextUsagePos.end, | ||
{ | ||
className: "markDiagramsUsageTextHover", | ||
} | ||
); | ||
}); | ||
usageMarkers = usageMarkers.concat(newMarkers); | ||
|
||
var definitionPos = definitionLocatorFunc( | ||
escapedRuleName, | ||
javaScriptEditor.getValue(), | ||
javaScriptEditor | ||
); | ||
var pos = _.first(definitionPos); | ||
definitionTextMarkers.push( | ||
javaScriptEditor.markText(pos.start, pos.end, { | ||
className: "markDiagramsTextHover", | ||
}) | ||
usageMarkers = usageMarkers.concat(newMarkers) | ||
|
||
var definitionPos = definitionLocatorFunc(escapedRuleName, javaScriptEditor.getValue(), javaScriptEditor) | ||
var pos = _.first(definitionPos) | ||
definitionTextMarkers.push(javaScriptEditor.markText(pos.start, pos.end, { | ||
className: "markDiagramsTextHover" | ||
})) | ||
); | ||
} | ||
|
||
function clearUsagesAndDefsInTextEditor() { | ||
_.forEach(usageMarkers, function (currMarker) { | ||
currMarker.clear(); | ||
}) | ||
usageMarkers = [] | ||
_.forEach(usageMarkers, function (currMarker) { | ||
currMarker.clear(); | ||
}); | ||
usageMarkers = []; | ||
|
||
_.forEach(definitionTextMarkers, function (currMarker) { | ||
currMarker.clear(); | ||
}) | ||
_.forEach(definitionTextMarkers, function (currMarker) { | ||
currMarker.clear(); | ||
}); | ||
|
||
definitionTextMarkers = [] | ||
definitionTextMarkers = []; | ||
} | ||
|
||
function getMatchingNonTerminalPositionsInText(textNode) { | ||
var ruleName = textNode.innerHTML | ||
var occurrenceIdx = textNode.getAttribute("occurrenceidx") | ||
var topRuleName = textNode.getAttribute("toprulename") | ||
var topRuleText = parser[topRuleName].originalGrammarAction.toString() | ||
|
||
var positions = locateSubruleRef(javaScriptEditor.getValue(), ruleName, javaScriptEditor, topRuleText, occurrenceIdx) | ||
|
||
return positions; | ||
var ruleName = textNode.innerHTML; | ||
var occurrenceIdx = textNode.getAttribute("occurrenceidx"); | ||
var topRuleName = textNode.getAttribute("toprulename"); | ||
var topRuleText = parser[topRuleName].originalGrammarAction.toString(); | ||
|
||
var positions = locateSubruleRef( | ||
javaScriptEditor.getValue(), | ||
ruleName, | ||
javaScriptEditor, | ||
topRuleText, | ||
occurrenceIdx | ||
); | ||
|
||
return positions; | ||
} | ||
|
||
function getMatchingTerminalPositionsInText(textNode) { | ||
// the tokenName attribute is the actual Token name instead of the label. | ||
var terminalName = textNode.getAttribute("tokenname") | ||
var occurrenceIdx = textNode.getAttribute("occurrenceidx") | ||
var dslRule = textNode.getAttribute("dslrulename") | ||
var topRuleName = textNode.getAttribute("toprulename") | ||
var topRuleText = parser[topRuleName].originalGrammarAction.toString() | ||
|
||
var positions | ||
switch (dslRule) { | ||
case "consume": | ||
positions = locateConsume(javaScriptEditor.getValue(), terminalName, javaScriptEditor, topRuleText, occurrenceIdx) | ||
break | ||
case "many_sep": | ||
positions = locateManySepSeparator(javaScriptEditor.getValue(), terminalName, javaScriptEditor, topRuleText, occurrenceIdx) | ||
break | ||
case "at_least_one_sep": | ||
positions = locateAtLeastOneSepSeparator(javaScriptEditor.getValue(), terminalName, javaScriptEditor, topRuleText, occurrenceIdx) | ||
break | ||
} | ||
|
||
return positions; | ||
// the tokenName attribute is the actual Token name instead of the label. | ||
var terminalName = textNode.getAttribute("tokenname"); | ||
var occurrenceIdx = textNode.getAttribute("occurrenceidx"); | ||
var dslRule = textNode.getAttribute("dslrulename"); | ||
var topRuleName = textNode.getAttribute("toprulename"); | ||
var topRuleText = parser[topRuleName].originalGrammarAction.toString(); | ||
|
||
var positions; | ||
switch (dslRule) { | ||
case "consume": | ||
positions = locateConsume( | ||
javaScriptEditor.getValue(), | ||
terminalName, | ||
javaScriptEditor, | ||
topRuleText, | ||
occurrenceIdx | ||
); | ||
break; | ||
case "many_sep": | ||
positions = locateManySepSeparator( | ||
javaScriptEditor.getValue(), | ||
terminalName, | ||
javaScriptEditor, | ||
topRuleText, | ||
occurrenceIdx | ||
); | ||
break; | ||
case "at_least_one_sep": | ||
positions = locateAtLeastOneSepSeparator( | ||
javaScriptEditor.getValue(), | ||
terminalName, | ||
javaScriptEditor, | ||
topRuleText, | ||
occurrenceIdx | ||
); | ||
break; | ||
} | ||
|
||
return positions; | ||
} | ||
|
||
function onDiagramTerminalMouseOver(mouseEvent) { | ||
// the tokenName attribute is the actual Token name instead of the label. | ||
var terminalName = mouseEvent.target.getAttribute("tokenname") | ||
markTerminalsConsumeUsagesAndDefs(terminalName) | ||
markTerminalsManySepUsagesAndDefs(terminalName) | ||
markTerminalsAtLeastOneUsagesAndDefs(terminalName) | ||
|
||
// marking the matching text for the diagram we are hovering over | ||
// more explicitly with underline. This is done do differentiate it from | ||
// other usage markers in the text. | ||
var usagePositions = getMatchingTerminalPositionsInText(mouseEvent.target) | ||
var pos = _.first(usagePositions) | ||
definitionTextMarkers.push(javaScriptEditor.markText(pos.start, pos.end, { | ||
className: "markSelectedDiagramsUsageTextHover" | ||
})) | ||
// the tokenName attribute is the actual Token name instead of the label. | ||
var terminalName = mouseEvent.target.getAttribute("tokenname"); | ||
markTerminalsConsumeUsagesAndDefs(terminalName); | ||
markTerminalsManySepUsagesAndDefs(terminalName); | ||
markTerminalsAtLeastOneUsagesAndDefs(terminalName); | ||
|
||
// marking the matching text for the diagram we are hovering over | ||
// more explicitly with underline. This is done do differentiate it from | ||
// other usage markers in the text. | ||
var usagePositions = getMatchingTerminalPositionsInText(mouseEvent.target); | ||
var pos = _.first(usagePositions); | ||
definitionTextMarkers.push( | ||
javaScriptEditor.markText(pos.start, pos.end, { | ||
className: "markSelectedDiagramsUsageTextHover", | ||
}) | ||
); | ||
} | ||
|
||
function onDiagramTerminalMouseOut(mouseEvent) { | ||
clearUsagesAndDefsInTextEditor() | ||
clearUsagesAndDefsInTextEditor(); | ||
} | ||
|
||
|
||
function onDiagramTerminalMouseClick(mouseEvent) { | ||
var usagePositions = getMatchingTerminalPositionsInText(mouseEvent.target) | ||
var usagePositions = getMatchingTerminalPositionsInText(mouseEvent.target); | ||
|
||
var pos = _.first(usagePositions) | ||
center(pos.start.line) | ||
javaScriptEditor.focus() | ||
javaScriptEditor.setCursor(pos.start) | ||
var pos = _.first(usagePositions); | ||
center(pos.start.line); | ||
javaScriptEditor.focus(); | ||
javaScriptEditor.setCursor(pos.start); | ||
} | ||
|
||
function onDiagramNonTerminalMouseOver(mouseEvent) { | ||
markNonTerminalsUsagesAndDefs(mouseEvent.target.innerHTML) | ||
|
||
// marking the matching text for the diagram we are hovering over | ||
// more explicitly with underline. This is done do differentiate it from | ||
// other usage markers in the text. | ||
var usagePositions = getMatchingNonTerminalPositionsInText(mouseEvent.target) | ||
var pos = _.first(usagePositions) | ||
definitionTextMarkers.push(javaScriptEditor.markText(pos.start, pos.end, { | ||
className: "markSelectedDiagramsUsageTextHover" | ||
})) | ||
markNonTerminalsUsagesAndDefs(mouseEvent.target.innerHTML); | ||
|
||
// marking the matching text for the diagram we are hovering over | ||
// more explicitly with underline. This is done do differentiate it from | ||
// other usage markers in the text. | ||
var usagePositions = getMatchingNonTerminalPositionsInText(mouseEvent.target); | ||
var pos = _.first(usagePositions); | ||
definitionTextMarkers.push( | ||
javaScriptEditor.markText(pos.start, pos.end, { | ||
className: "markSelectedDiagramsUsageTextHover", | ||
}) | ||
); | ||
} | ||
|
||
function onDiagramNonTerminalMouseOut(mouseEvent) { | ||
clearUsagesAndDefsInTextEditor() | ||
clearUsagesAndDefsInTextEditor(); | ||
} | ||
|
||
function onDiagramNonTerminalMouseClick(mouseEvent) { | ||
var positions = getMatchingNonTerminalPositionsInText(mouseEvent.target) | ||
var pos = _.first(positions) | ||
center(pos.start.line) | ||
javaScriptEditor.focus() | ||
javaScriptEditor.setCursor(pos.start) | ||
var positions = getMatchingNonTerminalPositionsInText(mouseEvent.target); | ||
var pos = _.first(positions); | ||
center(pos.start.line); | ||
javaScriptEditor.focus(); | ||
javaScriptEditor.setCursor(pos.start); | ||
} | ||
|
||
function onDiagramHeaderMouseOver(mouseEvent) { | ||
var definitionName = mouseEvent.target.innerHTML | ||
markNonTerminalsUsagesAndDefs(definitionName) | ||
var definitionName = mouseEvent.target.innerHTML; | ||
markNonTerminalsUsagesAndDefs(definitionName); | ||
} | ||
|
||
function onDiagramHeaderMouseOut(mouseEvent) { | ||
clearUsagesAndDefsInTextEditor() | ||
clearUsagesAndDefsInTextEditor(); | ||
} | ||
|
||
function onDiagramHeaderMouseClick(mouseEvent) { | ||
var definitionName = mouseEvent.target.innerHTML | ||
var definitionPos = locateRuleDefinition(definitionName, javaScriptEditor.getValue(), javaScriptEditor) | ||
var pos = _.first(definitionPos) | ||
center(pos.start.line) | ||
javaScriptEditor.focus() | ||
javaScriptEditor.setCursor(pos.start) | ||
var definitionName = mouseEvent.target.innerHTML; | ||
var definitionPos = locateRuleDefinition( | ||
definitionName, | ||
javaScriptEditor.getValue(), | ||
javaScriptEditor | ||
); | ||
var pos = _.first(definitionPos); | ||
center(pos.start.line); | ||
javaScriptEditor.focus(); | ||
javaScriptEditor.setCursor(pos.start); | ||
} | ||
|
||
function center(line) { | ||
var wholeHeight = javaScriptEditor.charCoords({line: line, ch: 0}, "local").top | ||
var offsetFromTop = javaScriptEditor.getScrollerElement().offsetHeight / 5 | ||
javaScriptEditor.scrollTo(null, wholeHeight - offsetFromTop - 5) | ||
var wholeHeight = javaScriptEditor.charCoords( | ||
{ line: line, ch: 0 }, | ||
"local" | ||
).top; | ||
var offsetFromTop = javaScriptEditor.getScrollerElement().offsetHeight / 5; | ||
javaScriptEditor.scrollTo(null, wholeHeight - offsetFromTop - 5); | ||
} |
Oops, something went wrong.