diff --git a/README.md b/README.md
index c2db74d..c2fd601 100644
--- a/README.md
+++ b/README.md
@@ -121,6 +121,7 @@ This is how the Decorator pattern looks like in nomnoml syntax:
#gutter: 5
#edgeMargin: 0
#edges: hard | rounded
+ #background: transparent
#fill: #eee8d5; #fdf6e3
#fillArrows: false
#font: Calibri
diff --git a/dist/nomnoml.js b/dist/nomnoml.js
index 9cac15a..c11c76c 100644
--- a/dist/nomnoml.js
+++ b/dist/nomnoml.js
@@ -319,6 +319,7 @@ var nomnoml;
edgeMargin: (+d.edgeMargin) || 0,
edges: d.edges == 'hard' ? 'hard' : 'rounded',
fill: (d.fill || '#eee8d5;#fdf6e3;#eee8d5;#fdf6e3').split(';'),
+ background: d.background || 'transparent',
fillArrows: d.fillArrows === 'true',
font: d.font || 'Calibri',
fontSize: (+d.fontSize) || 12,
@@ -582,14 +583,22 @@ var nomnoml;
if (config.lineWidth % 2 === 1)
g.translate(0.5, 0.5);
}
- g.clear();
- setFont(config, 'bold');
+ function setBackground() {
+ g.clear();
+ g.save();
+ g.strokeStyle('transparent');
+ g.fillStyle(config.background);
+ g.rect(0, 0, compartment.width, compartment.height).fill();
+ g.restore;
+ }
g.save();
+ g.scale(config.zoom, config.zoom);
+ setBackground();
+ setFont(config, 'bold');
g.lineWidth(config.lineWidth);
g.lineJoin('round');
g.lineCap('round');
g.strokeStyle(config.stroke);
- g.scale(config.zoom, config.zoom);
snapToPixels();
renderCompartment(compartment, nomnoml.buildStyle({ stroke: undefined }), 0);
g.restore();
@@ -641,11 +650,6 @@ var nomnoml;
return chainable;
}
};
- function color255(r, g, b, a) {
- var optionalAlpha = a === undefined ? 1 : a;
- var comps = [Math.floor(r), Math.floor(g), Math.floor(b), optionalAlpha];
- return 'rgba(' + comps.join() + ')';
- }
function tracePath(path, offset, s) {
s = s === undefined ? 1 : s;
offset = offset || { x: 0, y: 0 };
@@ -659,10 +663,6 @@ var nomnoml;
mousePos: function () { return mousePos; },
width: function () { return canvas.width; },
height: function () { return canvas.height; },
- background: function (r, g, b) {
- ctx.fillStyle = color255(r, g, b);
- ctx.fillRect(0, 0, canvas.width, canvas.height);
- },
clear: function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
},
@@ -826,7 +826,6 @@ var nomnoml;
return {
width: function () { return 0; },
height: function () { return 0; },
- background: function () { },
clear: function () { },
circle: function (p, r) {
var element = Element('circle', { r: r, cx: tX(p.x), cy: tY(p.y) });
diff --git a/index.html b/index.html
index 432f687..863807c 100644
--- a/index.html
+++ b/index.html
@@ -67,6 +67,7 @@ Directives
#gutter: 5
#edgeMargin: 0
#edges: hard | rounded
+ #background: transparent
#fill: #eee8d5; #fdf6e3
#fillArrows: false
#font: Calibri
diff --git a/src/Graphics.ts b/src/Graphics.ts
index 7b6563e..121957a 100644
--- a/src/Graphics.ts
+++ b/src/Graphics.ts
@@ -12,7 +12,6 @@ interface Chainable {
interface Graphics {
width(): number
height(): number
- background(r: number, g: number, b: number): void
clear(): void
circle(center: Vec, r: number): Chainable
ellipse(center: Vec, w: number, h: number, start?: number, stop?: number): Chainable
diff --git a/src/domain.ts b/src/domain.ts
index 62208d8..e157a3f 100644
--- a/src/domain.ts
+++ b/src/domain.ts
@@ -9,6 +9,7 @@ interface Config {
gutter: number
styles: { [key: string]: Style }
fill: string[]
+ background: string
edges: string
edgeMargin: number
spacing: number
diff --git a/src/parser.ts b/src/parser.ts
index b03b82b..50cf2db 100644
--- a/src/parser.ts
+++ b/src/parser.ts
@@ -95,6 +95,7 @@ namespace nomnoml {
edgeMargin: (+d.edgeMargin) || 0,
edges: d.edges == 'hard' ? 'hard' : 'rounded',
fill: (d.fill || '#eee8d5;#fdf6e3;#eee8d5;#fdf6e3').split(';'),
+ background: d.background || 'transparent',
fillArrows: d.fillArrows === 'true',
font: d.font || 'Calibri',
fontSize: (+d.fontSize) || 12,
diff --git a/src/renderer.ts b/src/renderer.ts
index 33cbd53..9feff15 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -194,15 +194,24 @@ namespace nomnoml {
if (config.lineWidth % 2 === 1)
g.translate(0.5, 0.5)
}
+
+ function setBackground() {
+ g.clear()
+ g.save()
+ g.strokeStyle('transparent')
+ g.fillStyle(config.background)
+ g.rect(0, 0, compartment.width, compartment.height).fill()
+ g.restore
+ }
- g.clear()
- setFont(config, 'bold')
g.save()
+ g.scale(config.zoom, config.zoom)
+ setBackground()
+ setFont(config, 'bold')
g.lineWidth(config.lineWidth)
g.lineJoin('round')
g.lineCap('round')
g.strokeStyle(config.stroke)
- g.scale(config.zoom, config.zoom)
snapToPixels()
renderCompartment(compartment, buildStyle({ stroke: undefined }), 0)
g.restore()
diff --git a/src/skanaar.canvas.ts b/src/skanaar.canvas.ts
index 937ea69..91193b1 100644
--- a/src/skanaar.canvas.ts
+++ b/src/skanaar.canvas.ts
@@ -48,12 +48,6 @@ namespace nomnoml.skanaar {
}
}
- function color255(r: number, g: number, b: number, a?: number): string {
- var optionalAlpha = a === undefined ? 1 : a
- var comps = [Math.floor(r), Math.floor(g), Math.floor(b), optionalAlpha]
- return 'rgba('+ comps.join() +')'
- }
-
function tracePath(path: Vec[], offset?: Vec, s?: number){
s = s === undefined ? 1 : s
offset = offset || {x:0, y:0}
@@ -68,10 +62,6 @@ namespace nomnoml.skanaar {
mousePos: function (){ return mousePos },
width: function (){ return canvas.width },
height: function (){ return canvas.height },
- background: function (r, g, b){
- ctx.fillStyle = color255(r, g, b)
- ctx.fillRect (0, 0, canvas.width, canvas.height)
- },
clear: function (){
ctx.clearRect(0, 0, canvas.width, canvas.height)
},
diff --git a/src/skanaar.svg.ts b/src/skanaar.svg.ts
index 33db775..f1e3f06 100644
--- a/src/skanaar.svg.ts
+++ b/src/skanaar.svg.ts
@@ -104,7 +104,6 @@ namespace nomnoml.skanaar {
return {
width: function (){ return 0 },
height: function (){ return 0 },
- background: function (/*r, g, b*/){},
clear: function (){},
circle: function (p: Vec, r: number){
var element = Element('circle', {r: r, cx: tX(p.x), cy: tY(p.y)})