Commit a8fd8ed2 authored by Adrian Wuillemet's avatar Adrian Wuillemet
Browse files

#45 Add syntax coloring to the GUI and redo code area

parent 7dda5dc6
/* PrismJS 1.16.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+c+csharp+bash+cpp+aspnet+ruby+java+kotlin+lua+typescript+python+r */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
/*
* Stylesheet modified to meet style requirements of Beads.
*/
code[class*="language-"],
pre[class*="language-"] {
color: #595959ff;
font-family: 'Oswald', Courier, monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background-color: #fdfaf0;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background-color: #fdfaf0;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
......@@ -7,10 +7,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="media/fav-icon.png" type="image/png">
<link rel="stylesheet" href="./css/gui.css">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/gui.css">
<script src="eel.js" defer></script>
<script src="js/d3.min.js" defer></script>
<script src="js/prism.js" defer></script>
<script src="js/gui.js" defer></script>
<title>Beads - GUI</title>
......@@ -38,8 +40,10 @@
</div>
<!-- Container where code is written into if the code preview is toggled -->
<textarea id="code-container" readonly>
</textarea>
<div id="text-area">
<div id="code-container">
</div>
</div>
<div id="code-functions">
<!-- Button to toggle the visibility of the code - container -->
......
This diff is collapsed.
......@@ -47,7 +47,7 @@ $highlight: brightness(0) saturate(100%) invert(64%) sepia(94%) saturate(234%) h
}
}
code, input {
code, span[class*='token '], input {
@include prefix(user-select, text, webkit moz ms);
}
......
/*
* Styling for the container displaying generated code.
*/
@mixin code-container() {
@mixin text-area() {
@include selectable();
@include display();
border-top-left-radius: d("border-radius");
border-bottom-left-radius: d("border-radius");
border: 1px solid color("orange");
z-index: z("overlay");
position: fixed;
overflow: hidden;
position: absolute;
$distance: d("fixed-outer");
top: $distance;
left: $distance;
bottom: $distance;
height: 55vh;
width: 35vw;
width: 22vw;
$d: 2 * $distance;
max-height: calc(100vh - #{$d});
......@@ -25,4 +29,25 @@
$d-min: 200px;
min-width: $d-min;
min-height: $d-min;
padding-bottom: 50px;
&::after {
cursor: ew-resize;
content: " ";
background-color: color("orange");
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8px;
}
#code-container {
@include display();
box-sizing: content-box;
padding-right: 8px;
}
}
......@@ -7,11 +7,11 @@
z-index: z("above-all");
background-color: color("white");
$button-radius: d("button-radius");
border-radius: d("border-radius");
button {
$button-radius: d("button-radius");
height: 100%;
background-color: transparent;
display: inline-block;
......
......@@ -24,6 +24,7 @@
border-radius: d("border-radius");
grid-row-start: 1;
grid-row-end: 2;
background-color: color("white");
}
> div {
......
......@@ -61,13 +61,14 @@
}
}
textarea {
pre {
@include display($as-full: false);
background-color: color("white");
grid-row-start: 2;
grid-row-end: 3;
resize: none;
overflow: scroll;
}
}
}
\ No newline at end of file
......@@ -11,6 +11,8 @@
overflow: hidden;
position: relative;
background-color: color("white");
> div {
// Vertical line via css
position: absolute;
......
......@@ -24,8 +24,8 @@ html {
@include graph-container();
}
#code-container {
@include code-container();
#text-area {
@include text-area();
}
#menu {
......
......@@ -11,7 +11,7 @@ d3.select("#code-gen-button").on("click", () => {
let selectedLanguage: string = BACKENDOPTIONS.getSelectedLanguage();
let options: Options = BACKENDOPTIONS.getGenerationOptions();
EEL.parse(fsm, selectedLanguage, options, displayCode);
EEL.parse(fsm, selectedLanguage, options, (code, error) => displayCode(code, error, selectedLanguage));
});
d3.select("#toggle-code-button").on("click", () => {
......@@ -19,7 +19,7 @@ d3.select("#toggle-code-button").on("click", () => {
let select = !btn.classed('selected');
btn.classed('selected', select);
d3.select("#code-container").classed('selected', select);
d3.select("#text-area").classed('selected', select);
});
d3.select("#delete-btn").on("click", () => {
......@@ -39,7 +39,7 @@ d3.select('#save-as-png-btn').on('click', () => savePNG());
d3.select('#save-as-json-btn').on('click', () => saveJson());
function displayCode(code: string, error: string): void {
function displayCode(code: string, error: string, language: string): void {
if(error) {
d3.select("#code-container")
.html(`ERROR:\n\n${error}`)
......@@ -48,12 +48,14 @@ function displayCode(code: string, error: string): void {
.classed("error", true);
} else {
let codeContainer = d3.select("#code-container");
if(codeContainer.classed('selected')) {
d3.select("#code-container")
.html(code)
if(d3.select('#text-area').classed('selected')) {
codeContainer
.html(`<pre><code class="language-${language}">${code}</code></pre>`)
.classed("error", false);
d3.select("#toggle-code-button")
.classed("error", false);
// @ts-ignore
Prism.highlightAllUnder(document.getElementById("code-container"));
} else {
saveCode();
}
......
......@@ -29,15 +29,17 @@ class LanguagePreview extends ElementWrapper {
super();
let graph = this.create('img', {'src': LanguagePreview.IMG_SRC});
let innerDiv = this.create('div', {'content': [graph]});
let textarea = this.create('textarea', {'disabled': true});
this.element = this.create('div', {'content': [innerDiv, textarea]});
let pre = this.create('pre', {'classList': `language-${language}`});
this.element = this.create('div', {'content': [innerDiv, pre]});
EEL.parse(previewGraph, this.language, LanguagePreview.OPTS, (code, error) => {
if(error) {
console.log(error);
textarea.innerHTML = "No code preview available!"
pre.innerHTML = "No code preview available!"
} else {
textarea.innerHTML = code;
pre.appendChild(this.create('code', {'content': code}));
// @ts-ignore
Prism.highlightAllUnder(pre);
}
});
}
......
class ResizeHandler extends ElementWrapper {
private static DRAGGABLE_BORDER_SIZE: number = 8;
private position: number;
constructor(element: HTMLElement) {
super(element);
let listener = (mousemove) => this.resize(mousemove);
this.element.addEventListener("mousedown", (mousedown) => {
let undraggableSpace = parseInt(getComputedStyle(this.element, '').width) - ResizeHandler.DRAGGABLE_BORDER_SIZE - 2;
if (mousedown.offsetX > undraggableSpace) {
this.position = mousedown.x;
document.addEventListener("mousemove", listener, false);
}
}, false);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", listener, false);
}, false);
}
public resize(mousemove) {
let distance = this.position - mousemove.x;
this.position = mousemove.x;
let newWidth = parseInt(getComputedStyle(this.element, '').width) - distance;
this.element.style.width = `${newWidth}px`;
}
}
const CODERESIZER = new ResizeHandler(document.getElementById('text-area'));
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment