Socket
Socket
Sign inDemoInstall

vega-scenegraph

Package Overview
Dependencies
Maintainers
2
Versions
110
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vega-scenegraph - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0-beta

.eslintrc

83

package.json
{
"name": "vega-scenegraph",
"version": "1.1.0",
"version": "2.0.0-beta",
"description": "Vega scenegraph and renderers.",
"license": "BSD-3-Clause",
"author": {
"name": "Jeffrey Heer",
"url": "http://idl.cs.washington.edu"
},
"contributors": [
{
"name": "Arvind Satyanarayan",
"url": "http://arvindsatya.com"
},
{
"name": "Emily Gu",
"url": "https://github.com/emilygu"
}
],
"main": "build/vega-scenegraph.js",
"module": "index",
"jsnext:main": "index",
"repository": {

@@ -9,56 +27,25 @@ "type": "git",

},
"author": {
"name": "Jeffrey Heer",
"url": "http://idl.cs.washington.edu"
"scripts": {
"build": "npm run test && uglifyjs build/vega-scenegraph.js -c -m -o build/vega-scenegraph.min.js",
"pretest": "rm -rf build && mkdir build && rollup -f umd -g d3-path:d3,d3-shape:d3,vega-loader:vega -n vega -o build/vega-scenegraph.js -- index.js && bin/schema > build/vega-scenegraph-schema.json",
"test": "tape 'test/**/*-test.js' && eslint index.js src test",
"prepublish": "npm run build",
"postpublish": "git push && git push --tags && zip -j build/vega-scenegraph.zip -- LICENSE README.md build/vega-scenegraph-schema.json build/vega-scenegraph.js build/vega-scenegraph.min.js"
},
"contributors": [{
"name": "Arvind Satyanarayan",
"url": "http://arvindsatya.com"
}, {
"name": "Emily Gu",
"url": "https://github.com/emilygu"
}],
"license": "BSD-3-Clause",
"dependencies": {
"d3": "^3.5.6",
"datalib": "^1.4.6"
"d3-path": "1",
"d3-shape": "1",
"vega-loader": "1"
},
"optionalDependencies": {
"canvas": "^1.2.9"
"canvas": "^1.4.0"
},
"devDependencies": {
"browserify": "^10.2.6",
"browserify-shim": "^3.8.9",
"browserify-versionify": "^1.0.4",
"chai": "^3.0.0",
"istanbul": "latest",
"eslint": "2",
"jsdom": "^3.0.0",
"jshint": "^2.8.0",
"mocha": "^2.2.5",
"tv4": "^1.1.12",
"uglify-js": "^2.4.24",
"watchify": "^3.2.3"
},
"main": "src/index.js",
"scripts": {
"lint": "jshint src/",
"test": "npm run schema && mocha --timeout 5000 --recursive test/",
"cover": "npm run schema && istanbul cover _mocha -- --timeout 5000 --recursive test/",
"build": "browserify src/index.js -d -s vg.scene -o vega-scenegraph.js",
"postbuild": "uglifyjs vega-scenegraph.js -cm > vega-scenegraph.min.js",
"schema": "node scripts/schema.js > vega-scenegraph-schema.json",
"watch": "watchify src/index.js -v -d -s vg.scene -o vega-scenegraph.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"d3": "global:d3",
"canvas": "global:canvas"
},
"browser": {
"canvas": false
"rollup": "0.36",
"tape": "4",
"tv4": "1",
"uglify-js": "2"
}
}
}

@@ -5,9 +5,24 @@ # vega-scenegraph

Renderers and event handlers for Vega's [mark-based](https://github.com/vega/vega/wiki/Marks) scenegraph. This module supports both pixel-based (canvas) and vector graphics (SVG) output. Renderers can either (re-)draw a complete scene or perform incremental re-rendering for a set of provided "dirty" items. A fast SVG string renderer is also provided to generate static SVG outside the browser environment.
Renderers and event handlers for Vega's mark-based scenegraph. This module
supports both pixel-based (canvas) and vector graphics (SVG) output. Renderers
can either (re-)draw a complete scene or perform incremental re-rendering for
a set of provided "dirty" items. A fast SVG string renderer is also provided
to generate static SVG outside the browser environment.
The [node-canvas](https://github.com/Automattic/node-canvas) library is used for server-side canvas rendering and bounds calculation. Node-canvas requires the native Cairo graphics library and compiles native code as part of the installation process. In some instances this may result in installation hiccups. Should you run into issues, you are likely to resolve them more quickly if you first search for help regarding node-canvas (as opposed to vega-scenegraph) installation.
The [node-canvas](https://github.com/Automattic/node-canvas) library is used
for server-side canvas rendering and bounds calculation. Node-canvas requires
the native Cairo graphics library and attempts to compile native code as part
of the installation process. In some instances this may result in installation
hiccups. Should you run into issues, you are likely to resolve them more
quickly if you first search for help regarding node-canvas (as opposed to
vega-scenegraph) installation. However, node-canvas is an option dependency,
and is not needed for SVG rendering. Bounds calculation can be performed
without node-canvas, though in the case of text marks the resulting bounds
may be slightly inaccurate due to font metric approximations.
### Scenegraph Definition
## Scenegraph Definition
The Vega scenegraph is a hierarchical (tree) data structure. The levels of the tree alternate between an enclosing _mark_ definition and contained sets of mark instances called _items_.
The Vega scenegraph is a hierarchical (tree) data structure. The levels of the
tree alternate between an enclosing *mark* definition and contained sets of
mark instances called *items*.

@@ -26,5 +41,10 @@ For example, here is a simple scenegraph containing three rectangles:

The supported mark types are rectangles (`rect`), plotting symbols (`symbol`), general paths or polygons (`path`), circular arcs (`arc`), filled areas (`area`), lines (`line`), images (`image`), text labels (`text`), and chart gridlines or rules (`rule`). Each item has a set of supported properties (`x`, `y`, `width`, `fill`, and so on) appropriate to the mark type.
The supported mark types are rectangles (`rect`), plotting symbols (`symbol`),
general paths or polygons (`path`), circular arcs (`arc`), filled areas
(`area`), lines (`line`), images (`image`), text labels (`text`), and chart
gridlines or rules (`rule`). Each item has a set of supported properties (`x`,
`y`, `width`, `fill`, and so on) appropriate to the mark type.
Scenegraphs may also contain `group` marks, which serve as containers for other marks. Groups may also include specialized subsets for axes and legends.
Scenegraphs may also contain `group` marks, which serve as containers for
other marks. Groups may also include specialized subsets for axes and legends.

@@ -42,4 +62,2 @@ For example, a top-level group mark may look like:

"items": [...], // array of contained mark instances
"axisItems": [...], // special array for axis groups
"legendItems": [...] // special array for legend groups
}

@@ -50,8 +68,18 @@ ]

In this example, the group _mark_ contains only a single group _item_. In practice a group mark may contain any number of group items, for example to describe a scene with multiple layers or sub-plots.
In this example, the group *mark* contains only a single group *item*. In
practice a group mark may contain any number of group items, for example to
describe a scene with multiple layers or sub-plots.
For more information regarding supported mark properties, please see the [Vega marks documentation](https://github.com/vega/vega/wiki/Marks).
For more information regarding supported mark properties, please see the
[Vega marks documentation](https://github.com/vega/vega/wiki/Marks).
### Scenegraph Serialization
## Scenegraph Serialization
The top-level export of this package includes `fromJSON` and `toJSON` methods to support scenegraph serialization. The `fromJSON` method expects a JSON string as input (similar to the examples listed above). It will then add additional parent pointers to the tree structure. For example, each item will have a `mark` property pointing to it's parent mark, and each mark will have a `group` property pointing to it's parent group (if any). The `toJSON` method maps a scenegraph instance to a JSON string, stripping any parent pointers or other non-standard properties.
The top-level export of this package includes `fromJSON` and `toJSON` methods
to support scenegraph serialization. The `fromJSON` method expects a JSON
string as input (similar to the examples listed above). It will then add
additional parent pointers to the tree structure. For example, each item will
have a `mark` property pointing to it's parent mark, and each mark will have a
`group` property pointing to it's parent group (if any). The `toJSON` method
maps a scenegraph instance to a JSON string, stripping any parent pointers or
other non-standard properties.

@@ -1,7 +0,8 @@

var segmentCache = {},
bezierCache = {},
join = [].join;
export var segmentCache = {};
export var bezierCache = {};
var join = [].join;
// Copied from Inkscape svgtopdf, thanks!
function segments(x, y, rx, ry, large, sweep, rotateX, ox, oy) {
export function segments(x, y, rx, ry, large, sweep, rotateX, ox, oy) {
var key = join.call(arguments);

@@ -64,3 +65,3 @@ if (segmentCache[key]) {

function bezier(params) {
export function bezier(params) {
var key = join.call(params);

@@ -70,3 +71,3 @@ if (bezierCache[key]) {

}
var cx = params[0],

@@ -107,10 +108,1 @@ cy = params[1],

}
module.exports = {
segments: segments,
bezier: bezier,
cache: {
segments: segmentCache,
bezier: bezierCache
}
};

@@ -5,3 +5,3 @@ // Path parsing and rendering code adapted from fabric.js -- Thanks!

module.exports = function(pathstr) {
export default function(pathstr) {
var result = [],

@@ -50,2 +50,2 @@ path,

return result;
};
}

@@ -1,4 +0,21 @@

var arc = require('./arc');
import {bezier, segments} from './arc';
module.exports = function(g, path, l, t) {
var temp = ['l', 0, 0, 0, 0, 0, 0, 0];
function scale(current, s) {
var c = (temp[0] = current[0]);
if (c === 'a' || c === 'A') {
temp[1] = s * current[1];
temp[2] = s * current[2];
temp[6] = s * current[6];
temp[7] = s * current[7];
} else {
for (var i=1, n=current.length; i<n; ++i) {
temp[i] = s * current[i];
}
}
return temp;
}
export default function(context, path, l, t, s) {
var current, // current instruction

@@ -17,7 +34,9 @@ previous = null,

if (t == null) t = 0;
if (s == null) s = 1;
g.beginPath();
if (context.beginPath) context.beginPath();
for (var i=0, len=path.length; i<len; ++i) {
current = path[i];
if (s !== 1) current = scale(current, s);

@@ -29,3 +48,3 @@ switch (current[0]) { // first letter

y += current[2];
g.lineTo(x + l, y + t);
context.lineTo(x + l, y + t);
break;

@@ -36,3 +55,3 @@

y = current[2];
g.lineTo(x + l, y + t);
context.lineTo(x + l, y + t);
break;

@@ -42,3 +61,3 @@

x += current[1];
g.lineTo(x + l, y + t);
context.lineTo(x + l, y + t);
break;

@@ -48,3 +67,3 @@

x = current[1];
g.lineTo(x + l, y + t);
context.lineTo(x + l, y + t);
break;

@@ -54,3 +73,3 @@

y += current[1];
g.lineTo(x + l, y + t);
context.lineTo(x + l, y + t);
break;

@@ -60,3 +79,3 @@

y = current[1];
g.lineTo(x + l, y + t);
context.lineTo(x + l, y + t);
break;

@@ -67,3 +86,3 @@

y += current[2];
g.moveTo(x + l, y + t);
context.moveTo(x + l, y + t);
break;

@@ -74,3 +93,3 @@

y = current[2];
g.moveTo(x + l, y + t);
context.moveTo(x + l, y + t);
break;

@@ -83,3 +102,3 @@

controlY = y + current[4];
g.bezierCurveTo(
context.bezierCurveTo(
x + current[1] + l, // x1

@@ -101,3 +120,3 @@ y + current[2] + t, // y1

controlY = current[4];
g.bezierCurveTo(
context.bezierCurveTo(
current[1] + l,

@@ -119,3 +138,3 @@ current[2] + t,

controlY = 2 * y - controlY;
g.bezierCurveTo(
context.bezierCurveTo(
controlX + l,

@@ -146,3 +165,3 @@ controlY + t,

controlY = 2*y - controlY;
g.bezierCurveTo(
context.bezierCurveTo(
controlX + l,

@@ -174,3 +193,3 @@ controlY + t,

g.quadraticCurveTo(
context.quadraticCurveTo(
controlX + l,

@@ -189,3 +208,3 @@ controlY + t,

g.quadraticCurveTo(
context.quadraticCurveTo(
current[1] + l,

@@ -228,3 +247,3 @@ current[2] + t,

g.quadraticCurveTo(
context.quadraticCurveTo(
controlX + l,

@@ -248,3 +267,3 @@ controlY + t,

controlY = 2 * y - controlY;
g.quadraticCurveTo(
context.quadraticCurveTo(
controlX + l,

@@ -260,3 +279,3 @@ controlY + t,

case 'a':
drawArc(g, x + l, y + t, [
drawArc(context, x + l, y + t, [
current[1],

@@ -275,3 +294,3 @@ current[2],

case 'A':
drawArc(g, x + l, y + t, [
drawArc(context, x + l, y + t, [
current[1],

@@ -291,3 +310,3 @@ current[2],

case 'Z':
g.closePath();
context.closePath();
break;

@@ -297,6 +316,6 @@ }

}
};
}
function drawArc(g, x, y, coords) {
var seg = arc.segments(
function drawArc(context, x, y, coords) {
var seg = segments(
coords[5], // end x

@@ -312,5 +331,5 @@ coords[6], // end y

for (var i=0; i<seg.length; ++i) {
var bez = arc.bezier(seg[i]);
g.bezierCurveTo.apply(g, bez);
var bez = bezier(seg[i]);
context.bezierCurveTo(bez[0], bez[1], bez[2], bez[3], bez[4], bez[5]);
}
}
// create a new DOM element
function create(doc, tag, ns) {
export function create(doc, tag, ns) {
return ns ? doc.createElementNS(ns, tag) : doc.createElement(tag);
}
// remove element from DOM
// recursively remove parent elements if empty
function remove(el) {
if (!el) return;
var p = el.parentNode;
if (p) {
p.removeChild(el);
if (!p.childNodes || !p.childNodes.length) remove(p);
// find first child element with matching tag
export function find(el, tag) {
tag = tag.toLowerCase();
var nodes = el.childNodes, i = 0, n = nodes.length;
for (; i<n; ++i) if (nodes[i].tagName.toLowerCase() === tag) {
return nodes[i];
}
}
module.exports = {
// find first child element with matching tag
find: function(el, tag) {
tag = tag.toLowerCase();
for (var i=0, n=el.childNodes.length; i<n; ++i) {
if (el.childNodes[i].tagName.toLowerCase() === tag) {
return el.childNodes[i];
}
}
},
// retrieve child element at given index
// create & insert if doesn't exist or if tag/className do not match
child: function(el, index, tag, ns, className, insert) {
var a, b;
a = b = el.childNodes[index];
if (!a || insert ||
a.tagName.toLowerCase() !== tag.toLowerCase() ||
className && a.getAttribute('class') != className) {
a = create(el.ownerDocument, tag, ns);
el.insertBefore(a, b || null);
if (className) a.setAttribute('class', className);
}
return a;
},
// remove all child elements at or above the given index
clear: function(el, index) {
var curr = el.childNodes.length;
while (curr > index) {
el.removeChild(el.childNodes[--curr]);
}
return el;
},
remove: remove,
// generate css class name for mark
cssClass: function(mark) {
return 'mark-' + mark.marktype + (mark.name ? ' '+mark.name : '');
},
// generate string for an opening xml tag
// tag: the name of the xml tag
// attr: hash of attribute name-value pairs to include
// raw: additional raw string to include in tag markup
openTag: function(tag, attr, raw) {
var s = '<' + tag, key, val;
if (attr) {
for (key in attr) {
val = attr[key];
if (val != null) {
s += ' ' + key + '="' + val + '"';
}
}
}
if (raw) s += ' ' + raw;
return s + '>';
},
// generate string for closing xml tag
// tag: the name of the xml tag
closeTag: function(tag) {
return '</' + tag + '>';
// retrieve child element at given index
// create & insert if doesn't exist or if tags do not match
export function child(el, index, tag, ns) {
var a = el.childNodes[index], b;
if (!a || a.tagName.toLowerCase() !== tag.toLowerCase()) {
b = a || null;
a = create(el.ownerDocument, tag, ns);
el.insertBefore(a, b);
}
};
return a;
}
// remove all child elements at or above the given index
export function clear(el, index) {
var nodes = el.childNodes,
curr = nodes.length;
while (curr > index) el.removeChild(nodes[--curr]);
return el;
}
// generate css class name for mark
export function cssClass(mark) {
return 'mark-' + mark.marktype + (mark.name ? ' '+mark.name : '');
}

@@ -1,33 +0,51 @@

function size(item) {
import Canvas from './canvas/canvas';
var context;
function estimateWidth(item) {
// make dumb, simple estimate if no canvas is available
return ~~(0.8 * textValue(item).length * height(item));
}
function measureWidth(item) {
// measure text width if canvas is available
context.font = font(item);
return context.measureText(textValue(item.text)).width;
}
export var width = (context = Canvas(1, 1))
? (context = context.getContext('2d'), measureWidth)
: estimateWidth;
export function height(item) {
return item.fontSize != null ? item.fontSize : 11;
}
module.exports = {
size: size,
value: function(s) {
return s != null ? String(s) : '';
},
font: function(item, quote) {
var font = item.font;
if (quote && font) {
font = String(font).replace(/\"/g, '\'');
}
return '' +
(item.fontStyle ? item.fontStyle + ' ' : '') +
(item.fontVariant ? item.fontVariant + ' ' : '') +
(item.fontWeight ? item.fontWeight + ' ' : '') +
size(item) + 'px ' +
(font || 'sans-serif');
},
offset: function(item) {
// perform our own font baseline calculation
// why? not all browsers support SVG 1.1 'alignment-baseline' :(
var baseline = item.baseline,
h = size(item);
return Math.round(
baseline === 'top' ? 0.93*h :
baseline === 'middle' ? 0.30*h :
baseline === 'bottom' ? -0.21*h : 0
);
export function textValue(s) {
return s != null ? String(s) : '';
}
export function font(item, quote) {
var font = item.font;
if (quote && font) {
font = String(font).replace(/\"/g, '\'');
}
};
return '' +
(item.fontStyle ? item.fontStyle + ' ' : '') +
(item.fontVariant ? item.fontVariant + ' ' : '') +
(item.fontWeight ? item.fontWeight + ' ' : '') +
height(item) + 'px ' +
(font || 'sans-serif');
}
export function offset(item) {
// perform our own font baseline calculation
// why? not all browsers support SVG 1.1 'alignment-baseline' :(
var baseline = item.baseline,
h = height(item);
return Math.round(
baseline === 'top' ? 0.93*h :
baseline === 'middle' ? 0.30*h :
baseline === 'bottom' ? -0.21*h : 0
);
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc