Browse Source

Make colouring configurable. Add a bunch of palettes.

Includes two colourblind-friendly palettes.

Fixes #265
dev/git-series/gccdum
Matt Godbolt 6 years ago
parent
commit
e2c636b4de
  1. 18
      static/colour.js
  2. 154
      static/colours.css
  3. 4
      static/compiler.js
  4. 9
      static/editor.js
  5. 52
      static/explorer.css
  6. 13
      static/index.html
  7. 19
      static/settings.js

18
static/colour.js

@ -29,16 +29,25 @@ define(function (require) {
var _ = require('underscore');
var monaco = require('monaco');
var NumRainbowColours = 12;
var schemes = [
{name: 'rainbow', desc: 'Rainbow 1', count: 12},
{name: 'rainbow2', desc: 'Rainbow 2', count: 12},
{name: 'earth', desc: 'Earth tones (colourblind safe)', count: 9},
{name: 'green-blue', desc: 'Greens and blues (colourblind safe)', count: 4}
];
function applyColours(editor, colours, prevDecorations) {
function applyColours(editor, colours, schemeName, prevDecorations) {
var scheme = _.findWhere(schemes, {name: schemeName});
if (!scheme) {
scheme = schemes[0];
}
var newDecorations = _.map(colours, function (ordinal, line) {
line = parseInt(line) + 1;
return {
range: new monaco.Range(line, 1, line, 1),
options: {
isWholeLine: true,
className: "rainbow-" + (ordinal % NumRainbowColours)
className: scheme.name + "-" + (ordinal % scheme.count)
}
};
});
@ -46,6 +55,7 @@ define(function (require) {
}
return {
applyColours: applyColours
applyColours: applyColours,
schemes: schemes
};
});

154
static/colours.css

@ -0,0 +1,154 @@
/* These colours from Cynthia Brewer's excellent page at
* http://colorbrewer2.org/
*/
/* rainbow is 12 Set3 */
.rainbow-0 {
background: rgba(141, 211, 199, 0.35) !important;
}
.rainbow-1 {
background: rgba(255, 255, 179, 0.35) !important;
}
.rainbow-2 {
background: rgba(190, 186, 218, 0.35) !important;
}
.rainbow-3 {
background: rgba(251, 128, 114, 0.35) !important;
}
.rainbow-4 {
background: rgba(128, 177, 211, 0.35) !important;
}
.rainbow-5 {
background: rgba(253, 180, 98, 0.35) !important;
}
.rainbow-6 {
background: rgba(179, 222, 105, 0.35) !important;
}
.rainbow-7 {
background: rgba(252, 205, 229, 0.35) !important;
}
.rainbow-8 {
background: rgba(217, 217, 217, 0.35) !important;
}
.rainbow-9 {
background: rgba(188, 128, 189, 0.35) !important;
}
.rainbow-10 {
background: rgba(204, 234, 197, 0.35) !important;
}
.rainbow-11 {
background: rgba(255, 237, 111, 0.35) !important;
}
/* rainbow2 is 12 Paired */
.rainbow2-0 {
background: rgba(166, 206, 227, 0.35) !important;
}
.rainbow2-1 {
background: rgba(31, 120, 180, 0.35) !important;
}
.rainbow2-2 {
background: rgba(178, 223, 138, 0.35) !important;
}
.rainbow2-3 {
background: rgba(51, 160, 44, 0.35) !important;
}
.rainbow2-4 {
background: rgba(251, 154, 153, 0.35) !important;
}
.rainbow2-5 {
background: rgba(227, 26, 28, 0.35) !important;
}
.rainbow2-6 {
background: rgba(253, 191, 111, 0.35) !important;
}
.rainbow2-7 {
background: rgba(255, 127, 0, 0.35) !important;
}
.rainbow2-8 {
background: rgba(202, 178, 214, 0.35) !important;
}
.rainbow2-9 {
background: rgba(106, 61, 154, 0.35) !important;
}
.rainbow2-10 {
background: rgba(255, 255, 153, 0.35) !important;
}
.rainbow2-11 {
background: rgba(177, 89, 40, 0.35) !important;
}
/* earth is 'BrBG' */
.earth-0 {
background: rgba(140, 81, 10, 0.35) !important;
}
.earth-1 {
background: rgba(191, 129, 45, 0.35) !important;
}
.earth-2 {
background: rgba(223, 194, 125, 0.35) !important;
}
.earth-3 {
background: rgba(246, 232, 195, 0.35) !important;
}
.earth-4 {
background: rgba(245, 245, 245, 0.35) !important;
}
.earth-5 {
background: rgba(199, 234, 229, 0.35) !important;
}
.earth-6 {
background: rgba(128, 205, 193, 0.35) !important;
}
.earth-7 {
background: rgba(53, 151, 143, 0.35) !important;
}
.earth-8 {
background: rgba(1, 102, 94, 0.35) !important;
}
/* Greens and blues is Paired */
.green-blue-0 {
background: rgba(166, 206, 227, 0.35) !important;
}
.green-blue-1 {
background: rgba(31, 120, 180, 0.35) !important;
}
.green-blue-2 {
background: rgba(178, 223, 138, 0.35) !important;
}
.green-blue-3 {
background: rgba(51, 160, 44, 0.35) !important;
}

4
static/compiler.js

@ -454,13 +454,13 @@ define(function (require) {
this.eventHub.emit('compilerFontScale', this.id, this.fontScale.scale);
};
Compiler.prototype.onColours = function (editor, colours) {
Compiler.prototype.onColours = function (editor, colours, scheme) {
if (editor == this.sourceEditorId) {
var asmColours = {};
_.each(this.assembly, function (x, index) {
if (x.source) asmColours[index] = colours[x.source - 1];
});
this.colours = colour.applyColours(this.outputEditor, asmColours, this.colours);
this.colours = colour.applyColours(this.outputEditor, asmColours, scheme, this.colours);
}
};

9
static/editor.js

@ -216,10 +216,7 @@ define(function (require) {
}
}
if (before.colouriseAsm !== after.colouriseAsm) {
// if the colourise option has been toggled...recompute colours
this.numberUsedLines();
}
this.numberUsedLines();
};
Editor.prototype.numberUsedLines = function () {
@ -241,8 +238,8 @@ define(function (require) {
};
Editor.prototype.updateColours = function (colours) {
this.colours = colour.applyColours(this.editor, colours, this.colours);
this.eventHub.emit('colours', this.id, colours);
this.colours = colour.applyColours(this.editor, colours, this.settings.colourScheme, this.colours);
this.eventHub.emit('colours', this.id, colours, this.settings.colourScheme);
};
Editor.prototype.onCompilerClose = function (compilerId) {

52
static/explorer.css

@ -3,6 +3,7 @@
@import url("ext/golden-layout/src/css/goldenlayout-light-theme.css");
@import url("ext/selectize/dist/css/selectize.bootstrap2.css");
@import url("ext/seiyria-bootstrap-slider/dist/css/bootstrap-slider.css");
@import url("colours.css");
/* TEMP HACK: https://github.com/Microsoft/monaco-editor/issues/349 */
.quick-open-tree .row { margin-left: 0; }
@ -74,57 +75,6 @@ input.options {
background-color: #5bc0de !important;
}
/* These colours from Cynthia Brewer's excellent page at
* http://colorbrewer2.org/
*/
.rainbow-0 {
background: rgba(141, 211, 199, 0.35) !important;
}
.rainbow-1 {
background: rgba(255, 255, 179, 0.35) !important;
}
.rainbow-2 {
background: rgba(190, 186, 218, 0.35) !important;
}
.rainbow-3 {
background: rgba(251, 128, 114, 0.35) !important;
}
.rainbow-4 {
background: rgba(128, 177, 211, 0.35) !important;
}
.rainbow-5 {
background: rgba(253, 180, 98, 0.35) !important;
}
.rainbow-6 {
background: rgba(179, 222, 105, 0.35) !important;
}
.rainbow-7 {
background: rgba(252, 205, 229, 0.35) !important;
}
.rainbow-8 {
background: rgba(217, 217, 217, 0.35) !important;
}
.rainbow-9 {
background: rgba(188, 128, 189, 0.35) !important;
}
.rainbow-10 {
background: rgba(204, 234, 197, 0.35) !important;
}
.rainbow-11 {
background: rgba(255, 237, 111, 0.35) !important;
}
.address {
width: 5em;
font-size: smaller;

13
static/index.html

@ -308,17 +308,18 @@ int square(int num) {
URLs, and are persisted locally using browser local storage.
</div>
<h4>Editor</h4>
<div class="form-group options" role="group">
<div class="checkbox"><label><input type="checkbox" class="autoCloseBrackets">
<div class="form-group" role="group">
<div class="form-control checkbox"><label><input type="checkbox" class="autoCloseBrackets">
Automatically insert matching brackets and parentheses</label></div>
<div>Delay before compiling:&nbsp;<b>Disabled</b>
<div class="form-control">Delay before compiling:&nbsp;<b>Disabled</b>
<div class="slider slider-horizontal delay"></div>
<b>3s</b></div>
</div>
<h4>Compilation</h4>
<div class="form-group options" role="group">
<div class="checkbox"><label><input type="checkbox" class="colourise">Colourise lines so one can see
how the source maps to the output</label></div>
<div class="form-group" role="group">
<div class="form-control checkbox"><label><input type="checkbox" class="colourise">Colourise lines
so one can see how the source maps to the output</label></div>
<div class="form-control"><label>Colour scheme: <select class="colourScheme"></select></label></div>
</div>
</div>
<!-- model-body -->

19
static/settings.js

@ -25,6 +25,7 @@
define(function (require) {
var _ = require('underscore');
var colour = require('./colour');
function Setting(elem, name, Control, param) {
this.elem = elem;
@ -49,6 +50,20 @@ define(function (require) {
elem.prop('checked', !!value);
};
function Select(elem, populate) {
elem.empty();
_.each(populate, function (e) {
elem.append($('<option value="' + e.label + '">' + e.desc + "</option>"));
});
}
Select.prototype.getUi = function (elem) {
return elem.val();
};
Select.prototype.putUi = function (elem, value) {
elem.val(value);
};
function Slider(elem, sliderSettings) {
elem.slider(sliderSettings);
}
@ -95,6 +110,10 @@ define(function (require) {
add(root.find('.colourise'), 'colouriseAsm', true, Checkbox);
add(root.find('.autoCloseBrackets'), 'autoCloseBrackets', true, Checkbox);
add(root.find('.colourScheme'), 'colourScheme', colour.schemes[0].name, Select,
_.map(colour.schemes, function (scheme) {
return {label: scheme.name, desc: scheme.desc};
}));
add(root.find('.slider'), 'delayAfterChange', 750, Slider, {
max: 3000,
step: 250,

Loading…
Cancel
Save