Browse Source

WIP on GoldenLayout

dev/git-series/gccdum
Matt Godbolt 7 years ago
parent
commit
ef7f5d74d7
  1. 3
      .idea/gcc-explorer.iml
  2. 2
      .idea/jsLibraryMappings.xml
  3. 15
      .idea/libraries/gcc_explorer_node_modules.xml
  4. 67
      static/compiler.js
  5. 210
      static/ext/golden-layout/goldenlayout-base.css
  6. 162
      static/ext/golden-layout/goldenlayout-light-theme.css
  7. 2
      static/ext/golden-layout/goldenlayout.min.js
  8. 41
      static/gcc.js
  9. 56
      static/index.html

3
.idea/gcc-explorer.iml

@ -1,11 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<component name="NewModuleRootManager" inherit-compiler-output="false">
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/test" isTestSource="true" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="gcc-explorer node_modules" level="project" />
</component>
</module>

2
.idea/jsLibraryMappings.xml

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="file://$PROJECT_DIR$" libraries="{gcc-explorer node_modules}" />
<file url="file://$PROJECT_DIR$" libraries="{gcc-explorer/node_modules}" />
</component>
</project>

15
.idea/libraries/gcc_explorer_node_modules.xml

@ -1,15 +0,0 @@
<component name="libraryTable">
<library name="gcc-explorer node_modules" type="javaScript">
<properties>
<option name="frameworkName" value="node_modules" />
<sourceFilesUrls>
<item url="file://$PROJECT_DIR$/node_modules" />
</sourceFilesUrls>
</properties>
<CLASSES>
<root url="file://$PROJECT_DIR$/node_modules" />
</CLASSES>
<JAVADOC />
<SOURCES />
</library>
</component>

67
static/compiler.js

@ -45,6 +45,71 @@ function clearBackground(cm) {
}
}
function Editor(container, lang) {
var domRoot = container.getElement();
var cmMode;
switch (lang.toLowerCase()) {
default:
cmMode = "text/x-c++src";
break;
case "c":
cmMode = "text/x-c";
break;
case "rust":
cmMode = "text/x-rustsrc";
break;
case "d":
cmMode = "text/x-d";
break;
case "go":
cmMode = "text/x-go";
break;
}
var cppEditor = CodeMirror.fromTextArea(domRoot.find("textarea")[0], {
lineNumbers: true,
matchBrackets: true,
useCPP: true,
mode: cmMode
});
// With reference to "fix typing '#' in emacs mode"
// https://github.com/mattgodbolt/gcc-explorer/pull/131
cppEditor.setOption("extraKeys", {
"Alt-F": false
});
// cppEditor.on("change", function () {
// if ($('.autocompile').hasClass('active')) {
// onEditorChange();
// }
// });
function resize() {
cppEditor.setSize(domRoot.width(), domRoot.height());
cppEditor.refresh();
}
container.on('resize', resize);
container.on('open', resize);
container.setTitle(lang + " source");
}
function CompileToAsm(container) {
var domRoot = container.getElement();
var asmCodeMirror = CodeMirror.fromTextArea(domRoot.find("textarea")[0], {
lineNumbers: true,
mode: "text/x-asm",
readOnly: true,
gutters: ['CodeMirror-linenumbers'],
lineWrapping: true
});
function resize() {
asmCodeMirror.setSize(domRoot.width(), domRoot.height());
asmCodeMirror.refresh();
}
container.on('resize', resize);
container.on('open', resize);
container.setTitle("monkey");
}
const NumRainbowColours = 12;
// This function is called in function initialise in static/gcc.js
@ -207,7 +272,7 @@ function Compiler(domRoot, origFilters, windowLocalPrefix,
// [0] is mandatory here because domRoot.find() returns an array of all
// matching elements. It is not a problem for jquery which applies it's
// functions to all elements, whereas CodeMirror works on a single DOM node.
cppEditor = CodeMirror.fromTextArea(domRoot.find(".editor textarea")[0], {
cppEditor = CodeMirror.fromTextArea(domRoot.find("textarea.editor")[0], {
lineNumbers: true,
matchBrackets: true,
useCPP: true,

210
static/ext/golden-layout/goldenlayout-base.css

@ -0,0 +1,210 @@
.lm_root{
position: relative;
}
.lm_row > .lm_item{
float: left;
}
.lm_content{
overflow: hidden;
}
.lm_dragging, .lm_dragging *{
cursor: move !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.lm_maximised{
position: absolute;
left: 0;
top: 0;
z-index: 40;
}
.lm_maximise_placeholder{
display: none;
}
.lm_splitter{
position: relative;
z-index: 2;
}
.lm_splitter:hover{
background: orange;
}
.lm_splitter.lm_vertical .lm_drag_handle{
position: absolute;
height: 25px;
top: -10px;
cursor: n-resize;
width: 100%;
}
.lm_splitter.lm_horizontal{
height: 100%;
float: left;
}
.lm_splitter.lm_horizontal .lm_drag_handle{
position: absolute;
width: 25px;
left: -10px;
cursor: e-resize;
height: 100%;
}
.lm_header{
position: relative;
overflow: visible;
}
.lm_header * {
box-sizing: content-box !important;
}
.lm_header > ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.lm_header .lm_controls{
right: 3px;
position: absolute;
}
.lm_header .lm_controls > li{
width: 18px;
height: 18px;
float: left;
text-align: center;
cursor: pointer;
}
.lm_header .lm_tabs{
position: absolute;
}
.lm_header .lm_tab{
float: left;
padding: 0px 10px 5px;
height: 14px;
margin-top: 1px;
cursor: pointer;
position: relative;
padding-right: 25px;
}
.lm_header .lm_tab i{
height: 19px;
width: 2px;
position: absolute;
}
.lm_header .lm_tab i.lm_left{
left: -2px;
top: 0;
}
.lm_header .lm_tab i.lm_right{
right: -2px;
top: 0;
}
.lm_header .lm_tab .lm_title{
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
}
.lm_header .lm_tab .lm_close_tab{
position: absolute;
right: 0;
top: 0;
width: 14px;
height: 14px;
text-align: center;
}
.lm_drop_tab_placeholder{
width: 100px;
height: 10px;
float: left;
visibility: hidden;
}
/***********************************
* Drag Proxy
***********************************/
.lm_dragProxy{
position: absolute;
z-index: 3;
top: 0;
left: 0;
}
.lm_dragProxy .lm_header{
background: transparent;
}
.lm_dragProxy .lm_content{
border-top: none;
overflow: hidden;
}
.lm_dropTargetIndicator{
position: absolute;
z-index: 2;
display: none;
}
.lm_dropTargetIndicator .lm_inner{
position: relative;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.lm_transition_indicator{
position: absolute;
top: 0;
left: 0;
display: none;
width: 20px;
height: 20px;
z-index: 2;
}
.lm_popin{
width: 20px;
height: 20px;
position: absolute;
z-index: 9999;
bottom: 0;
right: 0;
}
.lm_popin > *{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.lm_popin > .lm_bg{
z-index: 1;
}
.lm_popin > .lm_icon{
z-index: 2;
}

162
static/ext/golden-layout/goldenlayout-light-theme.css

File diff suppressed because one or more lines are too long

2
static/ext/golden-layout/goldenlayout.min.js vendored

File diff suppressed because one or more lines are too long

41
static/gcc.js

@ -309,7 +309,47 @@ function resizeEditors() {
currentCompiler.setEditorHeight(height);
}
function codeEditorFactory(container, state) {
var template = $('#codeEditor');
var options = state.options;
container.getElement().html(template.html());
return new Editor(container, options.language);
}
function compilerOutputFactory(container, state) {
var template = $('#compiler');
var options = state.options;
container.getElement().html(template.html());
return new CompileToAsm(container);
}
function initialise(options) {
var config = {
content: [{
type: 'row',
content: [{
type: 'component',
componentName: 'codeEditor',
componentState: { options: options }
}, {
type: 'column',
content: [{
type: 'component',
componentName: 'compilerOutput',
componentState: { options: options }
}, {
type: 'component',
componentName: 'compilerOutput',
componentState: { options: options }
}]
}]
}]
};
var myLayout = new GoldenLayout(config, $("#root")[0]);
myLayout.registerComponent('codeEditor', codeEditorFactory);
myLayout.registerComponent('compilerOutput', compilerOutputFactory);
myLayout.init();
/*
var defaultFilters = JSON.stringify(getAsmFilters());
var actualFilters = $.parseJSON(window.localStorage.filter || defaultFilters);
setFilterUi(actualFilters);
@ -382,6 +422,7 @@ function initialise(options) {
$(window).on("resize", resizeEditors);
resizeEditors();
*/
}
function getAsmFilters() {

56
static/index.html

@ -7,11 +7,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="ext/codemirror/codemirror.css" rel="stylesheet">
<link href="ext/golden-layout/goldenlayout-base.css" rel="stylesheet">
<link href="ext/golden-layout/goldenlayout-light-theme.css" rel="stylesheet">
<link href="gcc.css" rel="stylesheet">
<script src="client-options.js"></script>
<script src="ext/codemirror/codemirror.js"></script>
<script src="asm-mode.js"></script>
<script src="ext/jquery/jquery-2.2.2.min.js"></script>
<script src="ext/golden-layout/goldenlayout.min.js"></script>
<script src="ext/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script src="ext/rison.js"></script>
<script src="ext/underscore-min.js"></script>
@ -59,7 +62,7 @@
</script>
</head>
<body>
<div class="navbar-nav navbar-inverse navbar-fixed-top">
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Compiler Explorer - <span class="language-name"></span></a>
@ -100,7 +103,48 @@
</div>
</div>
<div class="container-fluid">
<div id="codeEditor" class="template">
<textarea>// Type your code here, or load an example.</textarea>
</div>
<div id="compiler" class="template">
<div class="panel-body">
<div class="params">
<form class="well well-sm form-inline">
<table>
<tbody>
<tr>
<td class="dropdown compilers-container">
<button type="button" title="Compiler to use" class="btn btn-default dropdown-toggle compiler-selection" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="compiler">g++</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu compilers">
</ul>
</td>
<td>
<input accesskey="" title="Options to pass to compiler" class="compiler-options" placeholder="compiler options" type="text" value="" style="width:90%">
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="asm">
<textarea>Awaiting...</textarea>
</div>
<div class="output">
<div class="result">
<div class="topbar">Compiler output &mdash; <span class="compilerVersion"></span></div>
<div class="output">
<div class="template"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="#root"><!--
<ul id="draggablePanelList" class="list-unstyled">
<li class="panel panel-primary col-md-3">
<div class="panel-heading"><span class="title">Code editor</span></div>
@ -203,7 +247,7 @@
<td>
<p class="leaderSlotIcon unselectable characterIcon unselectedCharacterIcon">&#9734;</p>
<td class="dropdown compilers-container">
<!-- the accesskey is set in static/compiler.js -->
&lt;!&ndash; the accesskey is set in static/compiler.js &ndash;&gt;
<button accesskey="" type="button" title="Compiler to use (alt-C)" class="btn btn-default dropdown-toggle compiler-selection" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="compiler">g++</span>
<span class="caret"></span>
@ -212,14 +256,14 @@
</ul>
</td>
<td>
<!-- the accesskey is set in static/compiler.js -->
&lt;!&ndash; the accesskey is set in static/compiler.js &ndash;&gt;
<input accesskey="" title="Options to pass to compiler (alt-O)" class="compiler-options" placeholder="compiler options" type="text" value="" style="width:90%">
</td>
</tr>
</tbody>
</table>
<div class="btn-group btn-group-sm filter">
<!-- Place slot-specific buttons here. -->
&lt;!&ndash; Place slot-specific buttons here. &ndash;&gt;
</div>
</form>
</div>
@ -278,7 +322,7 @@
</li>
</ul>
</div>
--></div>
<div class="template lang c">// Type your code here, or load an example.
int square(int num) {

Loading…
Cancel
Save