mascot-vis 1.12.0 → 1.12.1

package/dist/mascot.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// version: 1.12.0
+// version: 1.12.1
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3'), require('pixi.js')) :
 	typeof define === 'function' && define.amd ? define(['exports', 'd3', 'pixi.js'], factory) :
@@ -257,7 +257,8 @@
 		FEATURE_NOT_IMPLEMENTED: "This feature has not been implemented yet",
 		LAYOUT_WITHOUT_TREE: "The layout can only be applied to a tree",
 		UNSUPPORTED_FIELDTYPE: "Unsupported field type for encoding ",
-		CANNOT_CLASSIFY: "Cannot classify items in "
+		CANNOT_CLASSIFY: "Cannot classify items in ",
+		CANNOT_CREATE_GLYPH: "Cannot create glyph. A glyph must consist of only paths or only texts, not a mixture of paths and texts"
 	};
 
 	const categoricalColorSchemes = [
@@ -272,1788 +273,1797 @@
 		"schemeBlues", "schemeGreens", "schemeGreys", "schemeOranges", "schemePurples", "schemeReds", "schemeBuGn", "schemeBuPu", "schemeGnBu", "schemeOrRd", "schemePuBuGn", "schemePuBu", "schemePuRd", "schemeRdPu", "schemeYlGnBu", "schemeYlGn", "schemeYlOrBr", "schemeYlOrRd"
 	];
 
-	class Layout {
+	class LinearGradient {
+		
+		constructor(args) {
+			this._stops = [];
+	        this.type = ItemType.LinearGradient;
+	        this.id = this.type + ItemCounter[this.type]++;
+	        this.x1 = ("x1" in args) ? args.x1 : 0;
+	        this.x2 = ("x2" in args) ? args.x2 : 100;
+	        this.y1 = ("y1" in args) ? args.y1 : 0;
+	        this.y2 = ("y2" in args) ? args.y2 : 0;
+		}
+	    
+	    toJSON() {
+	        let json = {};
+	        json.type = this.type;
+	        json.id = this.id;
+	        json.x1 = this.x1;
+	        json.x2 = this.x2;
+	        json.y1 = this.y1;
+	        json.y2 = this.y2;
+	        json.stops = this._stops;
+	        return json;
+	    }
 
-	    constructor(args){
-	        this.group = undefined;
+	    addStop(offset, color, opacity) {
+	        this._stops.push({offset: offset, color: color, opacity: opacity});
 	    }
 
-	    run(){}
+	    get stops() {
+	        return this._stops;
+	    }
 
-	    clone(){}
 	}
 
-	class GridLayout extends Layout {
+	// Based on item.Item.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
+
+	class Mark {
 
 		constructor(args) {
-			super();
-			this.type = "grid";
-			this._numCols = args["numCols"];
-			this._numRows = args["numRows"];
-			this._dir = ("dir" in args) ? args["dir"] : [GridLayout.direction.Left2Right, GridLayout.direction.Top2Bottom];
-			// this._hDir = ("hDir" in args) ? args["hDir"] : GridLayout.direction.Left2Right;
-			// this._vDir = ("vDir" in args) ? args["vDir"] : GridLayout.direction.Top2Bottom;
-			this._rowGap = "rowGap" in args && args["rowGap"] !== undefined ? args["rowGap"] : 5;
-			this._colGap = "colGap" in args && args["colGap"] !== undefined ? args["colGap"] : 5;
-			this._cellHorzAlignment = "horzCellAlignment" in args && this._validateCellAlignment("h", args["horzCellAlignment"]) ? args["horzCellAlignment"] : Alignment.Left;
-			this._cellVertAlignment = "vertCellAlignment" in args && this._validateCellAlignment("v", args["vertCellAlignment"]) ? args["vertCellAlignment"] : Alignment.Bottom;
-			if (!this._numCols && !this._numRows)
-				this._numRows = 1;
+			this._dataScope = undefined;
+			this._id = undefined;
+
+			this.attrs = {};
+			this.styles = {};
+			this.staticProperties = {};
+
+			if (args !== undefined) {
+				for (let s in Style2SVG) {
+					if (s in args) {
+						this.styles[s] = args[s];
+					}
+				}
+			}
 		}
 
-		_validateCellAlignment(orientation, v) {
-			if (orientation === "h"  && [Alignment.Left, Alignment.Center, Alignment.Right].indexOf(v) >= 0){
-				return true;
-			} else if (orientation === "v" && [Alignment.Top, Alignment.Middle, Alignment.Bottom].indexOf(v) >= 0){
-				return true;
+		get id() {
+			return this._id;
+		}
+
+		set id(id) {
+			if (this.getScene()){
+				delete this.getScene()._itemMap[this._id];
+				this._id = id;
+				this.getScene()._itemMap[id] = this;
+			} else {
+				this._id = id;
 			}
-			console.warn("Invalid alignment:", v);
-			return false;
+		}
 
+		//TODO: implement winding contribution, see paper.js PathItem.Boolean.js
+		contains(px, py) {
+			if (!this._bounds)
+				return false;
+			if (!this._bounds.contains(px, py))
+				return false;
+			switch (this.type) {
+				case ItemType.Rect:
+				case ItemType.PointText:
+					return true;
+				case ItemType.Circle: {
+					let dist = Math.sqrt(Math.pow(px - this.x, 2) + Math.pow(py - this.y, 2));
+					return dist <= this.radius + this.strokeWidth;
+				}
+				case ItemType.Path: {
+					let ctx = CanvasProvider.getContext(),
+						p = new Path2D(this.getSVGPathData());
+					ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
+					ctx.stroke(p);
+					if (this.closed) {
+						return ctx.isPointInPath(p, px, py);
+					} else {
+						return ctx.isPointInStroke(p, px, py);
+					}
+				}
+				case ItemType.Line: {
+					let ctx = CanvasProvider.getContext(),
+						p = new Path2D(this.getSVGPathData());
+					ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
+					ctx.stroke(p);
+					return ctx.isPointInStroke(p, px, py);
+				}
+				default: {
+					let ctx = CanvasProvider.getContext(),
+						p = new Path2D(this.getSVGPathData());
+					return ctx.isPointInPath(p, px, py);
+				}
+			}
 		}
 
 		toJSON() {
-			let json = {args: {}};
+			let json = {};
 			json.type = this.type;
-			json.args.numCols = this._numCols;
-			json.args.numRows = this._numRows;
-			json.args.colGap = this._colGap;
-			json.args.rowGap = this._rowGap;
-			json.args.horzCellAlignment = this._cellHorzAlignment;
-			json.args.vertCellAlignment = this._cellVertAlignment;
-			json.left = this._left;
-			json.top = this._top;
-			json.args.dir = this._dir;
+			json.id = this.id;
+			if (this.classId)
+				json.classId = this.classId;
+			if (this._dataScope)
+				json.dataScope = this._dataScope.toJSON();
+			json.args = {};
+			for (let s in this.attrs) {
+				json.args[s] = this.attrs[s];
+			}
+
+			for (let s in this.styles) {
+				if (s.indexOf("Color") > 0 && this.styles[s] instanceof LinearGradient) {
+					json.args[s] = this.styles[s].toJSON();
+				} else {
+					json.args[s] = this.styles[s];
+				}
+			}
 			return json;
 		}
 
-		clone() {
-			return new GridLayout({
-				numCols: this._numCols,
-				numRows: this._numRows,
-				// hDir: this._hDir,
-				// vDir: this._vDir,
-				dir: this._dir,
-				colGap: this._colGap,
-				rowGap: this._rowGap
-			});
+		getScene() {
+			let p = this;
+			while (p) {
+				if (p.type == ItemType.Scene)
+					return p;
+				else
+					p = p.parent;
+			}
 		}
 
-		get cellBounds() {
-			let numCols, numRows, group = this.group, colGap = this._colGap, rowGap = this._rowGap;
-			if (this._numRows) {
-				numRows = this._numRows;
-				numCols = Math.ceil(this.group.children.length/this._numRows);
-			} else if (this._numCols) {
-				numCols = this._numCols;
-				numRows = Math.ceil(this.group.children.length/this._numCols);
-			}
+		set dataScope(ds) {
+			this._dataScope = ds;
+		}
 
-			let bounds = group.children.map(d => d.bounds);
-			if (this._left === undefined) {
-				let lefts = bounds.map(d => d.left),
-					tops = bounds.map(d => d.top);
-				this._left = Math.min(...lefts);
-				this._top = Math.min(...tops);
+		get dataScope() {
+			return this._dataScope;
+		}
+
+		duplicate() {
+			let scene = this.getScene();
+			let m = scene.mark(this.type);
+			this.copyPropertiesTo(m);
+			m.classId = this.classId;
+			if (this._dataScope) {
+				m._dataScope = this._dataScope.clone();
 			}
+			return m;
+		}
 
-			let wds = bounds.map(d => d.width),
-				hts = bounds.map(d => d.height),
-				cellWidth = Math.max(...wds), 
-				cellHeight = Math.max(...hts);
-			
-			//TODO: cell size should be determined by the scale range extent if bound to data
-			//analyze the group's children to see if 
-			
-			let xEncs = group.getInternalEncodings("x"),
-				yEncs = group.getInternalEncodings("y"),
-				wdEncs = group.getInternalEncodings("width"),
-				htEncs = group.getInternalEncodings("height");
+		// eslint-disable-next-line no-unused-vars
+		_doTranslate(dx, dy){
+			//child classes have their own implementations
+		}
 
-			let leftOffset = 0; //, topOffset = 0;
-			if (xEncs.length > 0) {
-				let xEnc = xEncs[xEncs.length -1];
-				cellWidth = xEnc.scale.rangeExtent;
-				leftOffset = xEnc.scale.range[0];
-				if (xEnc.scale.type === "point") {
-					//TODO: need to handle variable sizes
-					cellWidth += xEnc.anyItem.bounds.width;
-				}
-			} else if (wdEncs.length > 0 && wdEncs[wdEncs.length -1]._rectNegativeValues) { //width encoding with negative values
-				cellWidth = wdEncs[wdEncs.length -1].scale.rangeExtent;
-				leftOffset = wdEncs[wdEncs.length -1].scale.range[0];
-			}
-			if (yEncs.length > 0) {
-				let yEnc = yEncs[yEncs.length -1];
-				cellHeight = yEnc.scale.rangeExtent;
-				if (yEnc.scale.type === "point") {
-					//TODO: need to handle variable sizes
-					cellHeight += yEnc.anyItem.bounds.height;
-				}
-			} else if (htEncs.length > 0 &&  htEncs[htEncs.length -1]._rectNegativeValues) { //width encoding with negative values
-				cellHeight = htEncs[htEncs.length -1].scale.rangeExtent;
-			}
+		set visibility(v) {
+			this.styles["visibility"] = v;
+		}
 
-			let cb = [], cellCount = numRows * numCols;
+		get visibility() {
+			if (!this.styles["visibility"])
+				return "visible";
+			return this.styles["visibility"];
+		}
 
-			switch (this._dir[0]) {
-				case GridLayout.direction.Left2Right:
-					switch (this._dir[1]) {
-						case GridLayout.direction.Top2Bottom:
-							for (let i = 0; i < cellCount; i++) {
-								cb.push(new Rectangle(this._left + (cellWidth + colGap) * (i%numCols) + leftOffset, 
-									this._top + (cellHeight + rowGap) * Math.floor(i/numCols), cellWidth, cellHeight));
-							}
-							break;
-							// return group.children.map((d, i) => new Rectangle(this._left + (cellWidth + colGap) * (i%numCols) + leftOffset, 
-							// 		this._top + (cellHeight + rowGap) * Math.floor(i/numCols), cellWidth, cellHeight));
-						case GridLayout.direction.Bottom2Top: 
-							for (let i = 0; i < cellCount; i++) {
-								cb.push(new Rectangle(this._left + (cellWidth + colGap) * (i%numCols) + leftOffset, 
-									this._top + (this.numRows - 1 - Math.floor(i/numCols)) * (cellHeight + rowGap), cellWidth, cellHeight));
-							}
-							break;
-							// return group.children.map((d, i) => new Rectangle(this._left + (cellWidth + colGap) * (i%numCols) + leftOffset, 
-							// 		this._top + (this.numRows - 1 - Math.floor(i/numCols)) * (cellHeight + rowGap), cellWidth, cellHeight));
-					}
-					break;	
-				case GridLayout.direction.Right2Left:
-					switch (this._dir[1]) {
-						case GridLayout.direction.Top2Bottom:
-							for (let i = 0; i < cellCount; i++) {
-								cb.push(new Rectangle(leftOffset + this._left + (numCols - 1) * (cellWidth + colGap) - (cellWidth + colGap) * (i%numCols),
-									this._top + (cellHeight + rowGap) * Math.floor(i/numCols), cellWidth, cellHeight));
-							}
-							break;
-							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (numCols - 1) * (cellWidth + colGap) - (cellWidth + colGap) * (i%numCols),
-							// 	this._top + (cellHeight + rowGap) * Math.floor(i/numCols), cellWidth, cellHeight));
-						case GridLayout.direction.Bottom2Top: {
-							for (let i = 0; i < cellCount; i++) {
-								cb.push(new Rectangle(leftOffset + this._left + (numCols - 1 - i%numCols) * (cellWidth + colGap),
-									this._top + (this.numRows - 1 - Math.floor(i/numCols)) * (cellHeight + rowGap), cellWidth, cellHeight));
-							}
-							break;
-							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (numCols - 1 - i%numCols) * (cellWidth + colGap),
-							// 	this._top + (this.numRows - 1 - Math.floor(i/numCols)) * (cellHeight + rowGap), cellWidth, cellHeight));
-						}
-					}
-					break;
-				case GridLayout.direction.Top2Bottom:
-					switch (this._dir[1]) {
-						case GridLayout.direction.Left2Right:
-							for (let i = 0; i < cellCount; i++) {
-								cb.push(new Rectangle(leftOffset + this._left + (cellWidth + colGap) * Math.floor(i/this.numRows),
-									this._top + (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
-							}
-							break;
-							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (cellWidth + colGap) * Math.floor(i/this.numRows),
-							// 	this._top + (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
-						case GridLayout.direction.Right2Left:
-							for (let i = 0; i < cellCount; i++) {
-								cb.push(new Rectangle(leftOffset + this._left + (cellWidth + colGap) * (this.numCols - 1) - (cellWidth + colGap) * Math.floor(i/this.numRows),
-									this._top + (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
-							}
-							break;
-							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (cellWidth + colGap) * (this.numCols - 1) - (cellWidth + colGap) * Math.floor(i/this.numRows),
-							// 	this._top + (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
-					}
-					break;
-				case GridLayout.direction.Bottom2Top:
-					switch (this._dir[1]) {
-						case GridLayout.direction.Left2Right:
-							for (let i = 0; i < cellCount; i++) {
-								cb.push(new Rectangle(leftOffset + this._left + (cellWidth + colGap) * Math.floor(i/this.numRows),
-									this._top + (cellHeight + rowGap) * (this.numRows - 1) - (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
-							}
-							break;
-							// this._top + (cellHeight + rowGap) * (this.numRows - 1) - (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight)));
-							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (cellWidth + colGap) * Math.floor(i/this.numRows),
-							// 	this._top + (cellHeight + rowGap) * (this.numRows - 1) - (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
-						case GridLayout.direction.Right2Left:
-							for (let i = 0; i < cellCount; i++) {
-								cb.push(new Rectangle(leftOffset + this._left +  (cellWidth + colGap) * (this.numCols - 1) - (cellWidth + colGap) * Math.floor(i/this.numRows),
-									this._top + (cellHeight + rowGap) * (this.numRows - 1) - (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
-							}
-							break;
-							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left +  (cellWidth + colGap) * (this.numCols - 1) - (cellWidth + colGap) * Math.floor(i/this.numRows),
-							// 	this._top + (cellHeight + rowGap) * (this.numRows - 1) - (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
-					}
-					break;
-			}
-
-			return cb;
-
-			// if (this._vDir == GridLayout.direction.Top2Bottom) {
-			// 	if (this._hDir == GridLayout.direction.Left2Right) {
-			// 		return group.children.map((d, i) => new Rectangle(this._left + (cellWidth + colGap) * (i%numCols) + leftOffset, 
-			// 				this._top + (cellHeight + rowGap) * Math.floor(i/numCols), cellWidth, cellHeight));
-			// 	} else { //right to left
-			// 		return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (numCols - 1) * (cellWidth + colGap) - (cellWidth + colGap) * (i%numCols),
-			// 				this._top + (cellHeight + rowGap) * Math.floor(i/numCols), cellWidth, cellHeight));
-			// 	}
-			// } else {
-			// 	let nr = Math.ceil(this.group.children.length/this._numCols);
-			// 	if (this._hDir == GridLayout.direction.Left2Right) {
-			// 		return group.children.map((d, i) => new Rectangle(this._left + (cellWidth + colGap) * (i%numCols) + leftOffset, 
-			// 				this._top + (nr - 1 - Math.floor(i/numCols)) * (cellHeight + rowGap), cellWidth, cellHeight));
-			// 	} else {
-			// 		return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (numCols - 1 - i%numCols) * (cellWidth + colGap),
-			// 				this._top + (nr - 1 - Math.floor(i/numCols)) * (cellHeight + rowGap), cellWidth, cellHeight));
-			// 	}
-			// }
+		get opacity() {
+			if (!("opacity" in this.styles))
+				return 1;
+			return this.styles["opacity"];
 		}
 
-		run() {
-			if (this.group == undefined|| !this.group.children || this.group.children.length === 0)
-				return;
-
-			let cellBounds = this.cellBounds;
+		set opacity(c) {
+			this.styles["opacity"] = c;
+		}
+	}
 
-			let xEncs = this.group.getInternalEncodings("x"),
-				yEncs = this.group.getInternalEncodings("y"),
-				wdEncs = this.group.getInternalEncodings("width"),
-				htEncs = this.group.getInternalEncodings("height");
-			for (let i = 0; i < this.group.children.length; i++) {
-				let c = this.group.children[i]; 
-				let gridBound = cellBounds[i];
+	// Based on util.Numerical.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
+	// http://paperjs.org/
+	// Copyright (c) 2011 - 2019, Juerg Lehni & Jonathan Puckey
+	// http://scratchdisk.com/ & https://puckey.studio/
+	//
+	// Distributed under the MIT license. See LICENSE file for detail
+	//
+	// All rights reserved.
 
-				let dx = gridBound.x - c.bounds.x,
-					dy = gridBound.y - c.bounds.y;
-				c._doTranslate(dx, dy);
+	/**
+	* A very small absolute value used to check if a value is very close to
+	* zero. The value should be large enough to offset any floating point
+	* noise, but small enough to be meaningful in computation in a nominal
+	* range (see MACHINE_EPSILON).
+	*
+	* http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
+	* http://www.cs.berkeley.edu/~wkahan/Math128/Cubic.pdf
+	*/
+	const EPSILON = 1e-12;
 
-				//alignment in cell if c's position is not bound to data
-				let cdx = 0, cdy = 0;
-				if (xEncs.length == 0) {
-					switch(this._cellHorzAlignment) {
-						case Alignment.Left:
-							cdx = gridBound.left - c.bounds.left;
-							break;
-						case Alignment.Center:
-							cdx = gridBound.x - c.bounds.x;
-							break;
-						case Alignment.Right:
-							cdx = gridBound.right - c.bounds.right;
-							break;
-					} 
-				}
-				
-				if (yEncs.length == 0) {
-					switch(this._cellVertAlignment) {
-						case Alignment.Top:
-							cdy = gridBound.top - c.bounds.top;
-							break;
-						case Alignment.Middle:
-							cdy = gridBound.y - c.bounds.y;
-							break;
-						case Alignment.Bottom:
-							cdy = gridBound.bottom - c.bounds.bottom;
-							break;
-					}
-				}
-				
-				c._doTranslate(cdx, cdy);
-			}
+	/**
+	* The epsilon to be used when performing "trigonometric" checks, such
+	* as examining cross products to check for collinearity.
+	*/
+	const TRIGONOMETRIC_EPSILON = 1e-8;
 
-			if (xEncs.length > 0) {
-				//if childrens' position bound to data, compute position using the scale
-				for (let enc of xEncs)
-					enc._apply();
-			} else if (wdEncs.length > 0) {
-				let enc = wdEncs[wdEncs.length-1];
-				if (enc._rectNegativeValues){
-					enc._apply();
-				}
-			}
+	/**
+	* Checks if the value is 0, within a tolerance defined by
+	* Numerical.EPSILON.
+	*/
+	function isZero(val) {
+		return val >= -EPSILON && val <= EPSILON;
+	}
 
-			if (yEncs.length > 0) {
-				//yEncs[yEncs.length-1]._map();
-				// yEncs[yEncs.length-1]._apply();
-				for (let enc of yEncs)
-					enc._apply();
-			} else if (htEncs.length > 0) {
-				let enc = htEncs[htEncs.length-1];
-				if (enc._rectNegativeValues){
-					enc._apply();
-				}
-			}
+	// Based on basic.Point.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
 
-			this.group._updateBounds();
+	class Point {
+		
+		constructor(x, y) {
+			this.x = x;
+			this.y = y;
 		}
 
-		//TODO: add a corresponding scene level operation, automatically relayout
-		set rowGap(g) {
-			this._rowGap = g;
-			this.run();
-			this.group.getScene()._relayoutAncestors(this.group);
+		transform(matrix) {
+	        return matrix ? matrix._transformPoint(this) : this;
 		}
 
-		get rowGap() {
-			return this._rowGap;
-		}
+		negate() {
+	        return new Point(-this.x, -this.y);
+	    }
 
-		set colGap(g) {
-			this._colGap = g;
-			this.run();
-			this.group.getScene()._relayoutAncestors(this.group);
+		subtract(point) {
+			return new Point(this.x - point.x, this.y - point.y);
 		}
 
-		get colGap() {
-			return this._colGap;
-		}
+	    isZero() {
+	    	return isZero(this.x) && isZero(this.y)
+	    }
 
-		set numCols(c) {
-			if (c < 0 || c > this.group.children.length) {
-				console.warn("Cannot set", c, "columns for", this.group.children.length, "items in grid");
-				return;
-			}
-			this._numCols = c;
-			this._numRows = Math.ceil(this.group.children.length/c);
-			this.run();
-			this.group.getScene()._relayoutAncestors(this.group);
-		}
+		/**
+		* Checks if the vector represented by this point is collinear (parallel) to
+		* another vector.
+		*
+		* @param {Point} point the vector to check against
+		* @return {Boolean} {@true it is collinear}
+		*/
+	     isCollinear(point) {
+	     	let x1 = this.x,
+	     		y1 = this.y,
+	     		x2 = point.x,
+	     		y2 = point.y;
+	     	return Math.abs(x1 * y2 - y1 * x2) <= Math.sqrt((x1 * x1 + y1 * y1) * (x2 * x2 + y2 * y2)) 
+	     		* /*#=*/TRIGONOMETRIC_EPSILON;
+	    }
 
-		get numCols() {
-			if (this._numCols) {
-				return this._numCols;
-			} else if (this._numRows) {
-				return Math.ceil(this.group.children.length/this._numRows);
-			} else {
-				return 0;
-			}
-		}
+	}
 
-		set numRows(c) {
-			if (c < 0 || c > this.group.children.length) {
-				console.warn("Cannot set", c, "rows for", this.group.children.length, "items in grid");
-				return;
-			}
-			this._numRows = c;
-			this._numCols = Math.ceil(this.group.children.length/c);
-			this.run();
-			this.group.getScene()._relayoutAncestors(this.group);
-		}
+	// Based on path.Segment.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
 
+	class Vertex {
 
-		get numRows() {
-			if (this._numRows) {
-				return this._numRows;
-			} else if (this._numCols) {
-				return Math.ceil(this.group.children.length/this._numCols);
-			} else 
-				return 0;
+		//handles are relative to the point
+		constructor(point, parentMark, id) {
+			this.type = "vertex";
+			this._id = id;
+			this.x = point.x;
+			this.y = point.y;
+			this.dataScope = undefined;
+			this.parent = parentMark; 
+
+			this.shape = undefined;
+			this.width = 0;
+			this.height = 0;
+			this.radius = 0;
+			this.fillColor = "#555";
+			this.opacity = 1;
+			this.strokeWidth = 0;
+			this.strokeColor = "#aaa";
+			this._polarAngle = undefined;
 		}
 
-		set vertCellAlignment(v) {
-			if (v != Alignment.Top && v != Alignment.Bottom && v != Alignment.Middle) {
-				throw Errors.UNKOWN_ALIGNMENT;
+		get bounds() {
+			switch(this.shape) {
+				case "rect":
+					return new Rectangle(this.x - this.width/2, this.y - this.height/2, this.width, this.height);
+				case "circle":
+					return new Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
+				default:
+					return new Rectangle(this.x - 0.5, this.y - 0.5, 1, 1);
 			}
-			this._cellVertAlignment = v;
-			this.run();
 		}
 
-		get vertCellAlignment() {
-			return this._cellVertAlignment;
+		get id() {
+			return this.parent.id + "_v_" + this._id;
 		}
 
-		set horzCellAlignment(h) {
-			if (h != Alignment.Left && h != Alignment.Center && h != Alignment.Right) {
-				throw Errors.UNKOWN_ALIGNMENT;
-			}
-			this._cellHorzAlignment = h;
-			this.run();
+		toJSON() {
+			let json = {};
+			json.type = this.type;
+			json.id = this._id;
+			json.x = this.x;
+			json.y = this.y;
+			if (this.dataScope)
+				json.dataScope = this.dataScope.toJSON();
+			if (this._polarAngle !== undefined)
+				json.polarAngle = this._polarAngle;
+			json.shape = this.shape;
+			json.width = this.width;
+			json.height = this.height;
+			json.radius = this.radius;
+			json.fillColor = this.fillColor;
+			json.opacity = this.opacity;
+			json.strokeWidth = this.strokeWidth;
+			json.strokeColor = this.strokeColor;
+			return json;
 		}
 
-		get horzCellAlignment() {
-			return this._cellHorzAlignment;
+		static fromJSON(json, parent) {
+			let v = new Vertex(json, parent, json.id);
+			if (json.dataScope)
+				v.dataScope = json.dataScope;
+			if ("polarAngle" in json)
+				v.polarAngle = json.polarAngle;
+			v.shape = json.shape;
+			v.width = json.width;
+			v.height = json.height;
+			v.radius = json.radius;
+			v.fillColor = json.fillColor;
+			v.opacity = json.opacity;
+			v.strokeWidth = json.strokeWidth;
+			v.strokeColor = json.strokeColor;
+			return v;
 		}
 
-		//accepts two formats: a two-element array, or a string
-		set direction(d) {
-			if (Array.isArray(d) && d.length === 2) {
-				this._dir = d;
-			} else {
-				this._dir = d.split("_");
+		_doTranslate(dx, dy) {
+			this.x += dx;
+			this.y += dy;
+		}
+
+		_clone(parent) {
+			let v = new Vertex(new Point(this.x, this.y), parent, this._id);
+			if (this.dataScope) {
+				v.dataScope = this.dataScope.clone();
 			}
-			this.run();
+			v.shape = this.shape;
+			v.width = this.width;
+			v.height = this.height;
+			v.radius = this.radius;
+			v.fillColor = this.fillColor;
+			v.opacity = this.opacity;
+			v.strokeWidth = this.strokeWidth;
+			v.strokeColor = this.strokeColor;
+			return v;
 		}
 
-		get direction() {
-			return this._dir.join("_");
+		set polarAngle(a) {
+			this._polarAngle = a;
+		}
+
+		get polarAngle() {
+			return this._polarAngle;
 		}
 	}
 
-	GridLayout.direction = {
-		Left2Right: "l2r",
-		Right2Left: "r2l",
-		Top2Bottom: "t2b",
-		Bottom2Top: "b2t"
-	};
+	Vertex.styles = ["vxShape", "vxWidth", "vxHeight", "vxRadius", "vxFillColor", "vxStrokeColor", "vxStrokeWidth", "vxOpacity"];
 
-	class LinearGradient {
+	class Segment {
 		
-		constructor(args) {
-			this._stops = [];
-	        this.type = ItemType.LinearGradient;
-	        this.id = this.type + ItemCounter[this.type]++;
-	        this.x1 = ("x1" in args) ? args.x1 : 0;
-	        this.x2 = ("x2" in args) ? args.x2 : 100;
-	        this.y1 = ("y1" in args) ? args.y1 : 0;
-	        this.y2 = ("y2" in args) ? args.y2 : 0;
+		constructor(v1, v2, parentMark, id) {
+			this.type = "segment";
+			this._id = id;
+			this.vertex1 = v1;
+			this.vertex2 = v2;
+
+			this.dataScope = undefined;
+			this.parent = parentMark;
 		}
-	    
-	    toJSON() {
-	        let json = {};
-	        json.type = this.type;
-	        json.id = this.id;
-	        json.x1 = this.x1;
-	        json.x2 = this.x2;
-	        json.y1 = this.y1;
-	        json.y2 = this.y2;
-	        json.stops = this._stops;
-	        return json;
-	    }
 
-	    addStop(offset, color, opacity) {
-	        this._stops.push({offset: offset, color: color, opacity: opacity});
-	    }
+		get id() {
+			return this.parent.id + "_s_" + this._id;
+		}
 
-	    get stops() {
-	        return this._stops;
-	    }
+		_doTranslate(dx, dy) {
+			this.vertex1._doTranslate(dx, dy);
+			this.vertex2._doTranslate(dx, dy);
+		}
 
+		get x() {
+			return (this.vertex1.x + this.vertex2.x)/2;
+		}
+
+		get y() {
+			return (this.vertex1.y + this.vertex2.y)/2;
+		}
 	}
 
-	// Based on item.Item.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
+	class Path extends Mark {
+		
+		constructor(args) {
+			super(args);
+			this.type = "type" in args ? args.type : ItemType.Path;
 
-	class Mark {
+			if (!("strokeColor" in this.styles))
+				this.styles["strokeColor"] = "#ccc";
+			if (!("strokeWidth" in this.styles))
+				this.styles["strokeWidth"] = 1;
+			if (!("strokeDash" in this.styles))
+				this.styles["strokeDash"] = "none";
 
-		constructor(args) {
-			this._dataScope = undefined;
-			this._id = undefined;
+			this.vertices = [];
+			this.vertexCounter = 0; //for assigning vertex ids
+			this.segmentCounter = 0;
+			this.segments = [];
 
-			this.attrs = {};
-			this.styles = {};
-			this.staticProperties = {};
+			this.anchor = undefined;
+
+			this.closed = false;
+
+			this.curveMode = "linear";
+
+			//when a path encodes data using its width or height, its geometric bounds may not be the same as its orginal bounds without encoding applied
+			this.boundsOffsets = {top: 0, bottom: 0, left: 0, right: 0};
+
+			this._vxShape = undefined;
+			this._vxWidth = 0;
+			this._vxHeight = 0;
+			this._vxRadius = 0;
+			this._vxFillColor = "#555555";
+			this._vxStrokeColor = "#aaaaaa";
+			this._vxStrokeWidth = 0;
+			this._vxOpacity = 1;
 
 			if (args !== undefined) {
-				for (let s in Style2SVG) {
-					if (s in args) {
-						this.styles[s] = args[s];
-					}
+				for (let vs of Vertex.styles){
+					if (vs in args)
+						this["_" + vs] = args[vs];
 				}
-			}
-		}
 
-		get id() {
-			return this._id;
-		}
-
-		set id(id) {
-			if (this.getScene()){
-				delete this.getScene()._itemMap[this._id];
-				this._id = id;
-				this.getScene()._itemMap[id] = this;
-			} else {
-				this._id = id;
+				if ("vertices" in args) {
+					this._setVertices(args["vertices"]);
+				}
 			}
 		}
 
-		//TODO: implement winding contribution, see paper.js PathItem.Boolean.js
-		contains(px, py) {
-			if (!this._bounds)
-				return false;
-			if (!this._bounds.contains(px, py))
-				return false;
+		toJSON() {
+			let json = super.toJSON();
+			json.type = this.type;
+			json.id = this.id;
 			switch (this.type) {
 				case ItemType.Rect:
-				case ItemType.PointText:
-					return true;
-				case ItemType.Circle: {
-					let dist = Math.sqrt(Math.pow(px - this.x, 2) + Math.pow(py - this.y, 2));
-					return dist <= this.radius + this.strokeWidth;
-				}
-				case ItemType.Path: {
-					let ctx = CanvasProvider.getContext(),
-						p = new Path2D(this.getSVGPathData());
-					ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
-					ctx.stroke(p);
-					if (this.closed) {
-						return ctx.isPointInPath(p, px, py);
-					} else {
-						return ctx.isPointInStroke(p, px, py);
+					json.args.width = this.width;
+					json.args.height = this.height;
+					json.args.top = this.top;
+					json.args.left = this.left;
+					break;
+				case ItemType.Circle:
+					json.args.x = this.x;
+					json.args.y = this.y;
+					json.args.radius = this.radius;
+					break;
+				case ItemType.Arc:
+				case ItemType.Pie:
+					json.args.x = this._x;
+					json.args.y = this._y;
+					json.args.innerRadius = this._innerRadius;
+					json.args.outerRadius = this._outerRadius;
+					json.args.startAngle = this._startAngle;
+					json.args.endAngle = this._endAngle;
+					break;
+				default:
+					json.vertices = [];
+					for (let v of this.vertices)
+						json.vertices.push(v.toJSON());
+					if (this.type === ItemType.Polygon) {
+						json.args.x = this._x;
+						json.args.y = this._y;
+						json.args.radius = this._radius;
+					} else if (this.type === ItemType.Area) {
+						json.args.baseline = this._baseline;
+						json.args.orientation = this._orientation;
 					}
+					break;
+			}
+			// if (this.type === ItemType.Rect) {
+			// 	json.args.width = this.width;
+			// 	json.args.height = this.height;
+			// 	json.args.top = this.top;
+			// 	json.args.left = this.left;
+			// } else if (this.type === ItemType.Circle) {
+			// 	json.args.x = this.x;
+			// 	json.args.y = this.y;
+			// 	json.args.radius = this.radius;
+			// } else if (this.type === ItemType.Arc) {
+			// 	json.args.x = this._x;
+			// 	json.args.y = this._y;
+			// 	json.args.innerRadius = this._innerRadius;
+			// 	json.args.outerRadius = this._outerRadius;
+			// 	json.args.startAngle = this._startAngle;
+			// 	json.args.endAngle = this._endAngle;
+			// } else if (this.type === ItemType.Pie) {
+			// 	json.args.x = this._x;
+			// 	json.args.y = this._y;
+			// 	json.args.radius = this.radius;
+			// 	json.args.startAngle = this.startAngleDeg;
+			// 	json.args.endAngle = this.endAngleDeg;
+			// } else {
+			// 	json.vertices = [];
+			// 	for (let v of this.vertices)
+			// 		json.vertices.push(v.toJSON());
+			// 	if (this.type === ItemType.Polygon) {
+			// 		json.args.x = this._x;
+			// 		json.args.y = this._y;
+			// 		json.args.radius = this._radius;
+			// 	} else if (this.type === ItemType.Area) {
+			// 		json.args.baseline = this._baseline;
+			// 		json.args.orientation = this._orientation;
+			// 	}
+			// }
+			json.vertexCounter = this.vertexCounter;
+			json.segmentCounter = this.segmentCounter;
+			//do not save segments, anchor and closed for now
+			json.curveMode = this.curveMode;
+			if (this._bounds)
+				json.bounds = this._bounds.toJSON();
+			json.boundsOffsets = this.boundsOffsets;
+			for (let s of Vertex.styles) {
+				json.args[s] = this[s];
+			}
+			return json;
+		}
+
+		_setVertices(vertices) {
+			let vertex, point;
+			this.vertices = [];
+			this.segments = [];
+			for (let i = 0; i < vertices.length; i++) {
+
+				if (i == vertices.length - 1 && vertices[i][0] === vertices[0][0] && vertices[i][1] === vertices[0][1] && this.type === ItemType.Path) {
+					continue;
 				}
-				case ItemType.Line: {
-					let ctx = CanvasProvider.getContext(),
-						p = new Path2D(this.getSVGPathData());
-					ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
-					ctx.stroke(p);
-					return ctx.isPointInStroke(p, px, py);
-				}
-				default: {
-					let ctx = CanvasProvider.getContext(),
-						p = new Path2D(this.getSVGPathData());
-					return ctx.isPointInPath(p, px, py);
+
+				point = new Point(vertices[i][0], vertices[i][1]);
+
+				vertex = new Vertex(point, this, this.vertexCounter++);
+
+				for (let vs of Vertex.styles){
+					if (this[vs]){
+						let temp = vs.replace("vx", "");
+						vertex[temp[0].toLowerCase() + temp.slice(1)] = this[vs];
+					}
 				}
+
+				this.vertices.push(vertex);
+				if (i > 0)
+					this.segments.push(new Segment(this.vertices[i-1], this.vertices[i], this, this.segmentCounter++));
+			}
+			//if the first vertex has the same position as the last, this path is closed
+			let first = vertices[0], last = vertices[vertices.length - 1];
+			if ((first[0] === last[0] && first[1] === last[1]) || this.type === ItemType.Rect) {
+				this.closed = true;
+				if (!("fillColor" in this.styles))
+					this.styles["fillColor"] = "#fff";
+				this.segments.push(new Segment(this.vertices[this.vertices.length-1], this.vertices[0], this, this.segmentCounter++));
 			}
 		}
 
-		toJSON() {
-			let json = {};
-			json.type = this.type;
-			json.id = this.id;
-			if (this.classId)
-				json.classId = this.classId;
+		copyPropertiesTo(target) {
+			target.attrs = Object.assign({}, this.attrs);
+			target.styles = Object.assign({}, this.styles);
+			for (let vs of Vertex.styles){
+				if (this["_"+vs])
+					target["_"+vs] = this["_"+vs];
+			}
 			if (this._dataScope)
-				json.dataScope = this._dataScope.toJSON();
-			json.args = {};
-			for (let s in this.attrs) {
-				json.args[s] = this.attrs[s];
+				target._dataScope = this._dataScope.clone();
+			target.closed = this.closed;
+			target.curveMode = this.curveMode;
+			target.vertices = [];
+			target.segments = [];
+			for (let v of this.vertices) {
+				target.vertices.push(v._clone(target));
 			}
-
-			for (let s in this.styles) {
-				if (s.indexOf("Color") > 0 && this.styles[s] instanceof LinearGradient) {
-					json.args[s] = this.styles[s].toJSON();
-				} else {
-					json.args[s] = this.styles[s];
-				}
+			target.segmentCounter = 0;
+			for (let i = 1; i < target.vertices.length; i++) {
+				target.segments.push(new Segment(target.vertices[i-1], target.vertices[i], target, target.segmentCounter++));
 			}
-			return json;
+			if (target.closed)
+				target.segments.push(new Segment(target.vertices[target.vertices.length-1], target.vertices[0], target, target.segmentCounter++));
 		}
 
-		getScene() {
-			let p = this;
-			while (p) {
-				if (p.type == ItemType.Scene)
-					return p;
-				else
-					p = p.parent;
-			}
+		/*
+		* returns the bounds without incorporating transformations involving rotation
+		*/
+		get bounds() {
+			if (!this._bounds)
+				this._updateBounds();
+			return this._bounds;
 		}
 
-		set dataScope(ds) {
-			this._dataScope = ds;
+		/**
+		 * return the bounds as if the path does not encode data
+		 */
+		get refBounds() {
+			if (!this._bounds)
+				this._updateBounds();
+			let ht = (this._bounds.bottom + this.boundsOffsets.bottom) - (this._bounds.top - this.boundsOffsets.top),
+				wd = this._bounds.right + this.boundsOffsets.right - (this._bounds.left - this.boundsOffsets.left);
+			return new Rectangle(this._bounds.left - this.boundsOffsets.left, this._bounds.top - this.boundsOffsets.top,  wd, ht);
 		}
 
-		get dataScope() {
-			return this._dataScope;
+		get x() {
+			return this.bounds.x;
 		}
 
-		duplicate() {
-			let scene = this.getScene();
-			let m = scene.mark(this.type);
-			this.copyPropertiesTo(m);
-			m.classId = this.classId;
-			if (this._dataScope) {
-				m._dataScope = this._dataScope.clone();
-			}
-			return m;
+		get y() {
+			return this.bounds.y;
 		}
 
-		// eslint-disable-next-line no-unused-vars
-		_doTranslate(dx, dy){
-			//child classes have their own implementations
+		get strokeColor() {
+			return this.styles["strokeColor"];
 		}
 
-		set visibility(v) {
-			this.styles["visibility"] = v;
+		set strokeColor(c) {
+			this.styles["strokeColor"] = c;
 		}
 
-		get visibility() {
-			if (!this.styles["visibility"])
-				return "visible";
-			return this.styles["visibility"];
+		get strokeWidth() {
+			return this.styles["strokeWidth"];
 		}
 
-		get opacity() {
-			if (!("opacity" in this.styles))
-				return 1;
-			return this.styles["opacity"];
+		set strokeWidth(c) {
+			this.styles["strokeWidth"] = c;
 		}
 
-		set opacity(c) {
-			this.styles["opacity"] = c;
+		get fillColor() {
+			return this.styles["fillColor"];
 		}
-	}
 
-	// Based on util.Numerical.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
-	// http://paperjs.org/
-	// Copyright (c) 2011 - 2019, Juerg Lehni & Jonathan Puckey
-	// http://scratchdisk.com/ & https://puckey.studio/
-	//
-	// Distributed under the MIT license. See LICENSE file for detail
-	//
-	// All rights reserved.
+		set fillColor(c) {
+			this.styles["fillColor"] = c;
+		}
 
-	/**
-	* A very small absolute value used to check if a value is very close to
-	* zero. The value should be large enough to offset any floating point
-	* noise, but small enough to be meaningful in computation in a nominal
-	* range (see MACHINE_EPSILON).
-	*
-	* http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
-	* http://www.cs.berkeley.edu/~wkahan/Math128/Cubic.pdf
-	*/
-	const EPSILON = 1e-12;
+		get strokeDash() {
+			return this.styles["strokeDash"];
+		}
 
-	/**
-	* The epsilon to be used when performing "trigonometric" checks, such
-	* as examining cross products to check for collinearity.
-	*/
-	const TRIGONOMETRIC_EPSILON = 1e-8;
+		set strokeDash(c) {
+			this.styles["strokeDash"] = c;
+		}
 
-	/**
-	* Checks if the value is 0, within a tolerance defined by
-	* Numerical.EPSILON.
-	*/
-	function isZero(val) {
-		return val >= -EPSILON && val <= EPSILON;
-	}
+		_doTranslate(dx, dy) {
+			for (let v of this.vertices) {
+				v._doTranslate(dx, dy);
+			}
+			this._updateBounds();
+		}
 
-	// Based on basic.Point.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
+		//by default, with respect to the center of bounds
+		resize(wd, ht, xRef, yRef) {
+			let bounds = this.bounds, bWidth = bounds.width === 0 ? 1 : bounds.width, bHeight = bounds.height === 0 ? 1 : bounds.height;
+			if (xRef === "right") {
+				for (let v of this.vertices) {
+					v.x = bounds.right - (wd/bWidth) * (bounds.right - v.x);
+				}
+			} else {
+				for (let v of this.vertices) {
+					v.x = bounds.left + (wd/bWidth) * (v.x - bounds.left);
+				}
+			}
+			if (yRef === "top") {
+				for (let v of this.vertices) {
+					v.y = bounds.top + (ht/bHeight) * (v.y - bounds.top);
+				}
+			} else {
+				for (let v of this.vertices) {
+					v.y = bounds.bottom - (ht/bHeight) * (bounds.bottom - v.y);
+				}
+			}
+			this._updateBounds();
+		}
 
-	class Point {
-		
-		constructor(x, y) {
-			this.x = x;
-			this.y = y;
+		_updateBounds() {		
+			let vx = this.vertices.map(d => d.x),
+				vy = this.vertices.map(d => d.y);
+
+			let left = Math.min(...vx), top = Math.min(...vy), right = Math.max(...vx), btm = Math.max(...vy);
+			
+			this._bounds = new Rectangle(left, top, right - left, btm - top);
+			if (this.type === ItemType.Line || this.type === ItemType.Path) {
+				let sw = this.styles["strokeWidth"] ? this.styles["strokeWidth"] : 1;
+				if (left === right)
+					this._bounds = new Rectangle(left - sw/2, top, right - left + sw, btm - top);
+				else if (top === btm)
+					this._bounds = new Rectangle(left, top - sw/2, right - left, btm - top + sw);
+			}
 		}
 
-		transform(matrix) {
-	        return matrix ? matrix._transformPoint(this) : this;
+		addVertex(x, y, i) {
+			let vertex = new Vertex(new Point(x, y), this, this.vertexCounter++);
+			this.vertices.splice(i, 0, vertex);
+			//TODO: handle segments
 		}
 
-		negate() {
-	        return new Point(-this.x, -this.y);
-	    }
+		sortVertices(channel, descending) {
+			this.vertices.sort((a,b) => a[channel] - b[channel]);
+			if (descending)
+				this.vertices.reverse();
+			for (let i = 0; i < this.segments.length; i++) {
+				let segment = this.segments[i];
+				segment.vertex1 = this.vertices[i];
+				segment.vertex2 = this.vertices[(i+1)%this.vertices.length];
+			}
+		}
 
-		subtract(point) {
-			return new Point(this.x - point.x, this.y - point.y);
+		sortVerticesByData(field, descending, order) {
+			let f;
+			if (order)
+				f = (a, b) => order.indexOf(a.dataScope.getFieldValue(field)) - order.indexOf(b.dataScope.getFieldValue(field));
+			else
+				f = (a, b) =>  (a.dataScope.getFieldValue(field) < b.dataScope.getFieldValue(field) ? -1 : 1 );
+			this.vertices.sort(f);
+			if (descending)
+				this.vertices.reverse();
+			for (let i = 0; i < this.segments.length; i++) {
+				let segment = this.segments[i];
+				segment.vertex1 = this.vertices[i];
+				segment.vertex2 = this.vertices[(i+1)%this.vertices.length];
+			}
 		}
 
-	    isZero() {
-	    	return isZero(this.x) && isZero(this.y)
-	    }
+		getSVGPathData() {
+			let p = d3__namespace.path();
+			let curve = this._getD3CurveFunction(this.curveMode)(p);
+			curve.lineStart();
+			for (let vertex of this.vertices) {
+				curve.point(vertex.x, vertex.y);
+			}
+			if (this.closed)
+				curve.point(this.vertices[0].x, this.vertices[0].y);
+			curve.lineEnd();
 
-		/**
-		* Checks if the vector represented by this point is collinear (parallel) to
-		* another vector.
-		*
-		* @param {Point} point the vector to check against
-		* @return {Boolean} {@true it is collinear}
-		*/
-	     isCollinear(point) {
-	     	let x1 = this.x,
-	     		y1 = this.y,
-	     		x2 = point.x,
-	     		y2 = point.y;
-	     	return Math.abs(x1 * y2 - y1 * x2) <= Math.sqrt((x1 * x1 + y1 * y1) * (x2 * x2 + y2 * y2)) 
-	     		* /*#=*/TRIGONOMETRIC_EPSILON;
-	    }
+			return p._;
+		}
+	 
+		// toSVG() {
 
-	}
+		// }
 
-	// Based on path.Segment.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
+		// fromSVG() {
 
-	class Vertex {
+		// }
 
-		//handles are relative to the point
-		constructor(point, parentMark, id) {
-			this.type = "vertex";
-			this._id = id;
-			this.x = point.x;
-			this.y = point.y;
-			this.dataScope = undefined;
-			this.parent = parentMark; 
+		get firstVertex() {
+			return this.vertices[0];
+		}
 
-			this.shape = undefined;
-			this.width = 0;
-			this.height = 0;
-			this.radius = 0;
-			this.fillColor = "#555";
-			this.opacity = 1;
-			this.strokeWidth = 0;
-			this.strokeColor = "#aaa";
-			this._polarAngle = undefined;
+		get firstSegment() {
+			return this.segments[0];
 		}
 
-		get bounds() {
-			switch(this.shape) {
-				case "rect":
-					return new Rectangle(this.x - this.width/2, this.y - this.height/2, this.width, this.height);
-				case "circle":
-					return new Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
+		get lastVertex() {
+			return this.vertices[this.vertices.length - 1];
+		}
+
+		get lastSegment() {
+			return this.segments[this.segments.length - 1];
+		}
+
+		_getD3CurveFunction(v){
+			switch(v) {
+				case CurveMode.Natural:
+					return d3__namespace.curveNatural;
+				case CurveMode.Basis:
+					return d3__namespace.curveBasis;
+				case CurveMode.BumpX:
+					return d3__namespace.curveBumpX;
+				case CurveMode.BumpY:
+					return d3__namespace.curveBumpY;
+				case CurveMode.Linear:
+					return d3__namespace.curveLinear;
+				case CurveMode.Step:
+					return d3__namespace.curveStep;
+				case CurveMode.CatmullRom:
+					return d3__namespace.curveCatmullRom;
+				case CurveMode.Cardinal:
+					return d3__namespace.curveCardinal;
 				default:
-					return new Rectangle(this.x - 0.5, this.y - 0.5, 1, 1);
+					return d3__namespace.curveLinear;
 			}
 		}
 
-		get id() {
-			return this.parent.id + "_v_" + this._id;
+		get vxShape(){
+			return this._vxShape;
 		}
 
-		toJSON() {
-			let json = {};
-			json.type = this.type;
-			json.id = this._id;
-			json.x = this.x;
-			json.y = this.y;
-			if (this.dataScope)
-				json.dataScope = this.dataScope.toJSON();
-			if (this._polarAngle !== undefined)
-				json.polarAngle = this._polarAngle;
-			json.shape = this.shape;
-			json.width = this.width;
-			json.height = this.height;
-			json.radius = this.radius;
-			json.fillColor = this.fillColor;
-			json.opacity = this.opacity;
-			json.strokeWidth = this.strokeWidth;
-			json.strokeColor = this.strokeColor;
-			return json;
+		set vxShape(s){
+			this._vxShape = s;
+			for (let v of this.vertices)
+				v.shape = s;
 		}
 
-		static fromJSON(json, parent) {
-			let v = new Vertex(json, parent, json.id);
-			if (json.dataScope)
-				v.dataScope = json.dataScope;
-			if ("polarAngle" in json)
-				v.polarAngle = json.polarAngle;
-			v.shape = json.shape;
-			v.width = json.width;
-			v.height = json.height;
-			v.radius = json.radius;
-			v.fillColor = json.fillColor;
-			v.opacity = json.opacity;
-			v.strokeWidth = json.strokeWidth;
-			v.strokeColor = json.strokeColor;
-			return v;
+		get vxWidth(){
+			return this._vxWidth;
 		}
 
-		_doTranslate(dx, dy) {
-			this.x += dx;
-			this.y += dy;
+		set vxWidth(s){
+			this._vxWidth = s;
+			for (let v of this.vertices)
+				v.width = s;
 		}
 
-		_clone(parent) {
-			let v = new Vertex(new Point(this.x, this.y), parent, this._id);
-			if (this.dataScope) {
-				v.dataScope = this.dataScope.clone();
-			}
-			v.shape = this.shape;
-			v.width = this.width;
-			v.height = this.height;
-			v.radius = this.radius;
-			v.fillColor = this.fillColor;
-			v.opacity = this.opacity;
-			v.strokeWidth = this.strokeWidth;
-			v.strokeColor = this.strokeColor;
-			return v;
+		get vxHeight(){
+			return this._vxHeight;
 		}
 
-		set polarAngle(a) {
-			this._polarAngle = a;
+		set vxHeight(s){
+			this._vxHeight = s;
+			for (let v of this.vertices)
+				v.height = s;
 		}
 
-		get polarAngle() {
-			return this._polarAngle;
+		get vxRadius(){
+			return this._vxRadius;
 		}
-	}
 
-	Vertex.styles = ["vxShape", "vxWidth", "vxHeight", "vxRadius", "vxFillColor", "vxStrokeColor", "vxStrokeWidth", "vxOpacity"];
+		set vxRadius(s){
+			this._vxRadius = s;
+			for (let v of this.vertices)
+				v.radius = s;
+		}
 
-	class Segment {
-		
-		constructor(v1, v2, parentMark, id) {
-			this.type = "segment";
-			this._id = id;
-			this.vertex1 = v1;
-			this.vertex2 = v2;
+		get vxFillColor(){
+			return this._vxFillColor;
+		}
 
-			this.dataScope = undefined;
-			this.parent = parentMark;
+		set vxFillColor(s){
+			this._vxFillColor = s;
+			for (let v of this.vertices)
+				v.fillColor = s;
 		}
 
-		get id() {
-			return this.parent.id + "_s_" + this._id;
+		get vxStrokeColor(){
+			return this._vxStrokeColor;
 		}
 
-		_doTranslate(dx, dy) {
-			this.vertex1._doTranslate(dx, dy);
-			this.vertex2._doTranslate(dx, dy);
+		set vxStrokeColor(s){
+			this._vxStrokeColor = s;
+			for (let v of this.vertices)
+				v.strokeColor = s;
 		}
 
-		get x() {
-			return (this.vertex1.x + this.vertex2.x)/2;
+		get vxStrokeWidth(){
+			return this._vxStrokeWidth;
 		}
 
-		get y() {
-			return (this.vertex1.y + this.vertex2.y)/2;
+		set vxStrokeWidth(s){
+			this._vxStrokeWidth = s;
+			for (let v of this.vertices)
+				v.strokeWidth = s;
 		}
-	}
 
-	class Path extends Mark {
-		
-		constructor(args) {
-			super(args);
-			this.type = "type" in args ? args.type : ItemType.Path;
+		get vxOpacity(){
+			return this._vxOpacity;
+		}
 
-			if (!("strokeColor" in this.styles))
-				this.styles["strokeColor"] = "#ccc";
-			if (!("strokeWidth" in this.styles))
-				this.styles["strokeWidth"] = 1;
-			if (!("strokeDash" in this.styles))
-				this.styles["strokeDash"] = "none";
+		set vxOpacity(s){
+			this._vxOpacity = s;
+			for (let v of this.vertices)
+				v.opacity = s;
+		}
 
-			this.vertices = [];
-			this.vertexCounter = 0; //for assigning vertex ids
-			this.segmentCounter = 0;
-			this.segments = [];
+	}
 
-			this.anchor = undefined;
+	function evaluatePredicate(itm, p) {
+		if ("field" in p) {
+			if (!itm.dataScope) return false;
+			let f = p["field"];
+			if ("value" in p) {
+				return itm.dataScope.getFieldValue(f) === p["value"];
+			} else if ("interval" in p) {
+				let v = itm.dataScope.getFieldValue(f);
+				return v >= p["interval"][0] && v <= p["interval"][1];
+			} else if ("values" in p) {
+				return p["values"].indexOf(itm.dataScope.getFieldValue(f)) >= 0;
+			} else {
+				return itm.dataScope.hasField(f);
+			}
+		} else if ("channel" in p) {
+			let c = p["channel"];
+			if ("value" in p) {
+				return itm[c] === p["value"];
+			} else if ("interval" in p) {
+				return itm[c] >= p["interval"][0] && itm[c] <= p["interval"][1];
+			} else if ("values" in p) {
+				return p["values"].indexOf(itm[c]) >= 0;
+			}
+		} else if ("type" in p) {
+			return itm.type === p["type"];
+		} else if ("id" in p) {
+			return itm.id === p["id"];
+		} else if ("classId" in p) {
+			return itm.classId === p["classId"];
+		} else if ("fields" in p) {
+			if (!itm.dataScope) return false;
+			let f1 = p["fields"][0], f2 = p["fields"][1],
+				v1 = itm.dataScope.getFieldValue(f1), v2 = itm.dataScope.getFieldValue(f2);
+			switch (p["operator"]) {
+				case "==":
+					return v1 == v2;
+				case ">":
+					return v1 > v2;
+				case ">=":
+					return v1 >= v2;
+				case "<":
+					return v1 < v2;
+				case "<=":
+					return v1 <= v2;
+			}
+		}
+		return false;
+	}
 
-			this.closed = false;
+	function findItems(container, predicates) {
+		let result = [];
+		_findItemsRecursive(container, predicates, result);
+		return result;
+	}
 
-			this.curveMode = "linear";
+	function _findItemsRecursive(itm, predicates, result) {
+		if (!itm) return;
+		if (itm.type == "axis" || itm.type == "legend" || itm.type == "gridlines")	return;
+		if (_matchCriteria(itm, predicates)) {
+			result.push(itm);
+		}
+		
+		if (itm.vertices){
+			for (let i of itm.vertices.concat(itm.segments)) {
+				if (_matchCriteria(i, predicates))
+					result.push(i);
+			}
+		} else if (itm.children && itm.children.length > 0) {
+			for (let c of itm.children)
+				_findItemsRecursive(c, predicates, result);
+		}
+	}
 
-			//when a path encodes data using its width or height, its geometric bounds may not be the same as its orginal bounds without encoding applied
-			this.boundsOffsets = {top: 0, bottom: 0, left: 0, right: 0};
+	function _matchCriteria(cpnt, predicates) {
+		for (let p of predicates) {
+			if (!evaluatePredicate(cpnt, p))
+				return false;
+		}
+		return true;
+	}
 
-			this._vxShape = undefined;
-			this._vxWidth = 0;
-			this._vxHeight = 0;
-			this._vxRadius = 0;
-			this._vxFillColor = "#555555";
-			this._vxStrokeColor = "#aaaaaa";
-			this._vxStrokeWidth = 0;
-			this._vxOpacity = 1;
+	function getPeers(item, scene) {
+		if (item.type == "vertex") {
+			return _getPeerVertices(item, scene);
+		} else if (item.type == "segment") {
+			return _getPeerSegments(item, scene);
+		} else {
+			// return item.classId ? findItems(scene, d => d.classId == item.classId) : [];
+			return item.classId ? findItems(scene, [{"classId": item.classId}]) : [];
+		}
+	}
 
-			if (args !== undefined) {
-				for (let vs of Vertex.styles){
-					if (vs in args)
-						this["_" + vs] = args[vs];
-				}
+	//returns an array of peer arrays, peers within each array have the same parent
+	function getPeersGroupedByParent(item, scene) {
+		let result = {}, peers = getPeers(item, scene);
+		for (let p of peers) {
+			let parent = p.parent.id;
+			if (!(parent in result))
+				result[parent] = [];
+			result[parent].push(p);
+		}
+		return Object.keys(result).map(d => result[d]);
+	}
 
-				if ("vertices" in args) {
-					this._setVertices(args["vertices"]);
-				}
+	function _getPeerSegments(segment, container) {
+		if (segment.dataScope) {
+			let parent = segment.parent;
+			if (!parent)	throw new Error("segment has no parent mark");
+			let parentPeers = findItems(container, [{"classId": parent.classId}]);
+			let results = [];
+			for (let p of parentPeers) {
+				results = results.concat(p.segments);
+			}
+			return results;
+		} else {
+			let parent = segment.parent;
+			if (!parent)	throw new Error("segment has no parent mark");
+			let index = parent.segments.indexOf(segment);
+			let parentPeers = findItems(container, [{"classId": parent.classId}]);
+			let results = [];
+			for (let p of parentPeers) {
+				results.push(p.segments[index]);
 			}
+			return results;
 		}
+	}
 
-		toJSON() {
-			let json = super.toJSON();
-			json.type = this.type;
-			json.id = this.id;
-			switch (this.type) {
-				case ItemType.Rect:
-					json.args.width = this.width;
-					json.args.height = this.height;
-					json.args.top = this.top;
-					json.args.left = this.left;
-					break;
-				case ItemType.Circle:
-					json.args.x = this.x;
-					json.args.y = this.y;
-					json.args.radius = this.radius;
-					break;
-				case ItemType.Arc:
-				case ItemType.Pie:
-					json.args.x = this._x;
-					json.args.y = this._y;
-					json.args.innerRadius = this._innerRadius;
-					json.args.outerRadius = this._outerRadius;
-					json.args.startAngle = this._startAngle;
-					json.args.endAngle = this._endAngle;
-					break;
-				default:
-					json.vertices = [];
-					for (let v of this.vertices)
-						json.vertices.push(v.toJSON());
-					if (this.type === ItemType.Polygon) {
-						json.args.x = this._x;
-						json.args.y = this._y;
-						json.args.radius = this._radius;
-					} else if (this.type === ItemType.Area) {
-						json.args.baseline = this._baseline;
-						json.args.orientation = this._orientation;
-					}
-					break;
-			}
-			// if (this.type === ItemType.Rect) {
-			// 	json.args.width = this.width;
-			// 	json.args.height = this.height;
-			// 	json.args.top = this.top;
-			// 	json.args.left = this.left;
-			// } else if (this.type === ItemType.Circle) {
-			// 	json.args.x = this.x;
-			// 	json.args.y = this.y;
-			// 	json.args.radius = this.radius;
-			// } else if (this.type === ItemType.Arc) {
-			// 	json.args.x = this._x;
-			// 	json.args.y = this._y;
-			// 	json.args.innerRadius = this._innerRadius;
-			// 	json.args.outerRadius = this._outerRadius;
-			// 	json.args.startAngle = this._startAngle;
-			// 	json.args.endAngle = this._endAngle;
-			// } else if (this.type === ItemType.Pie) {
-			// 	json.args.x = this._x;
-			// 	json.args.y = this._y;
-			// 	json.args.radius = this.radius;
-			// 	json.args.startAngle = this.startAngleDeg;
-			// 	json.args.endAngle = this.endAngleDeg;
-			// } else {
-			// 	json.vertices = [];
-			// 	for (let v of this.vertices)
-			// 		json.vertices.push(v.toJSON());
-			// 	if (this.type === ItemType.Polygon) {
-			// 		json.args.x = this._x;
-			// 		json.args.y = this._y;
-			// 		json.args.radius = this._radius;
-			// 	} else if (this.type === ItemType.Area) {
-			// 		json.args.baseline = this._baseline;
-			// 		json.args.orientation = this._orientation;
-			// 	}
-			// }
-			json.vertexCounter = this.vertexCounter;
-			json.segmentCounter = this.segmentCounter;
-			//do not save segments, anchor and closed for now
-			json.curveMode = this.curveMode;
-			if (this._bounds)
-				json.bounds = this._bounds.toJSON();
-			json.boundsOffsets = this.boundsOffsets;
-			for (let s of Vertex.styles) {
-				json.args[s] = this[s];
-			}
-			return json;
-		}
-
-		_setVertices(vertices) {
-			let vertex, point;
-			this.vertices = [];
-			this.segments = [];
-			for (let i = 0; i < vertices.length; i++) {
-
-				if (i == vertices.length - 1 && vertices[i][0] === vertices[0][0] && vertices[i][1] === vertices[0][1] && this.type === ItemType.Path) {
-					continue;
+	function _getPeerVertices(vertex, container) {
+		if (vertex.classId) ; else if (vertex.dataScope) {
+			let parent = vertex.parent;
+			if (!parent)	throw new Error("vertex has no parent mark");
+			let parentPeers = findItems(container, [{"classId": parent.classId}]);
+			let results = [];
+			if (parent.type === ItemType.Area) {
+				let idx = parent.vertices.indexOf(vertex), firstHalf = idx < parent.vertices.length/2;
+				for (let p of parentPeers) {
+					let vertices = firstHalf ? p.vertices.slice(0, p.vertices.length/2) : p.vertices.slice(p.vertices.length/2);
+					results = results.concat(vertices.filter(d => d.dataScope));
 				}
-
-				point = new Point(vertices[i][0], vertices[i][1]);
-
-				vertex = new Vertex(point, this, this.vertexCounter++);
-
-				for (let vs of Vertex.styles){
-					if (this[vs]){
-						let temp = vs.replace("vx", "");
-						vertex[temp[0].toLowerCase() + temp.slice(1)] = this[vs];
-					}
+			} else {
+				for (let p of parentPeers) {
+					results = results.concat(p.vertices.filter(d => d.dataScope));
 				}
-
-				this.vertices.push(vertex);
-				if (i > 0)
-					this.segments.push(new Segment(this.vertices[i-1], this.vertices[i], this, this.segmentCounter++));
 			}
-			//if the first vertex has the same position as the last, this path is closed
-			let first = vertices[0], last = vertices[vertices.length - 1];
-			if ((first[0] === last[0] && first[1] === last[1]) || this.type === ItemType.Rect) {
-				this.closed = true;
-				if (!("fillColor" in this.styles))
-					this.styles["fillColor"] = "#fff";
-				this.segments.push(new Segment(this.vertices[this.vertices.length-1], this.vertices[0], this, this.segmentCounter++));
+			return results;
+		} else {
+			let parent = vertex.parent;
+			if (!parent)	throw new Error("vertex has no parent mark");
+			let index = parent.vertices.indexOf(vertex);
+			let parentPeers = findItems(container, [{"classId": parent.classId}]);
+			let results = [];
+			for (let p of parentPeers) {
+				results.push(p.vertices[index]);
 			}
+			return results;
 		}
+	}
 
-		copyPropertiesTo(target) {
-			target.attrs = Object.assign({}, this.attrs);
-			target.styles = Object.assign({}, this.styles);
-			for (let vs of Vertex.styles){
-				if (this["_"+vs])
-					target["_"+vs] = this["_"+vs];
-			}
-			if (this._dataScope)
-				target._dataScope = this._dataScope.clone();
-			target.closed = this.closed;
-			target.curveMode = this.curveMode;
-			target.vertices = [];
-			target.segments = [];
-			for (let v of this.vertices) {
-				target.vertices.push(v._clone(target));
-			}
-			target.segmentCounter = 0;
-			for (let i = 1; i < target.vertices.length; i++) {
-				target.segments.push(new Segment(target.vertices[i-1], target.vertices[i], target, target.segmentCounter++));
+	function getClosestLayout(item, type) {
+		let parent = item.parent;
+		while (parent && parent.type != ItemType.Scene) {
+			if (parent.layout) {
+				if ( (!type) || (type && parent.layout.type === type))
+					return parent.layout;
 			}
-			if (target.closed)
-				target.segments.push(new Segment(target.vertices[target.vertices.length-1], target.vertices[0], target, target.segmentCounter++));
+			parent = parent.parent;
 		}
+		return undefined;
+	}
 
-		/*
-		* returns the bounds without incorporating transformations involving rotation
-		*/
-		get bounds() {
-			if (!this._bounds)
-				this._updateBounds();
-			return this._bounds;
+	function getCellBoundsInLayout(item) {
+		let itm = item, parent = item.parent;
+		while (parent && parent.type != ItemType.Scene) {
+			if (parent.layout){
+				let idx = parent.children.findIndex(d => d == itm);
+				return parent.layout.cellBounds[idx];
+			}
+			itm = itm.parent;
+			parent = itm.parent;
 		}
+		return undefined;
+	}
 
-		/**
-		 * return the bounds as if the path does not encode data
-		 */
-		get refBounds() {
-			if (!this._bounds)
-				this._updateBounds();
-			let ht = (this._bounds.bottom + this.boundsOffsets.bottom) - (this._bounds.top - this.boundsOffsets.top),
-				wd = this._bounds.right + this.boundsOffsets.right - (this._bounds.left - this.boundsOffsets.left);
-			return new Rectangle(this._bounds.left - this.boundsOffsets.left, this._bounds.top - this.boundsOffsets.top,  wd, ht);
+	function getCellIndexInLayout(item) {
+		let itm = item, parent = item.parent;
+		while (parent && parent.type != ItemType.Scene) {
+			if (parent.layout){
+				return parent.children.findIndex(d => d == itm);
+			}
+			itm = itm.parent;
+			parent = itm.parent;
 		}
+		return undefined;
+	}
 
-		get x() {
-			return this.bounds.x;
+	function getCellBoundsInGridLayout(item) {
+		let itm = item, parent = item.parent;
+		while (parent && parent.type != ItemType.Scene) {
+			if (parent.layout && parent.layout.type == LayoutType.Grid){
+				let idx = parent.children.findIndex(d => d == itm);
+				return parent.layout.cellBounds[idx];
+			}
+			itm = itm.parent;
+			parent = itm.parent;
 		}
+		return undefined;
+	}
 
-		get y() {
-			return this.bounds.y;
+	function getTopLevelLayout(item, type) {
+		let parent = item.parent, layout = undefined;
+		while (parent && parent.type !== ItemType.Scene) {
+			if (parent.layout)
+				if ( (!type) || (type && parent.layout.type === type))
+					layout = parent.layout;
+			parent = parent.parent;
 		}
+		return layout;
+	}
 
-		get strokeColor() {
-			return this.styles["strokeColor"];
+	function getEncodingKey(item) {
+		if (item.classId) {
+			return item.classId;
+		} else if (item.type == "vertex" && item.dataScope) { //vertex created from densify
+			if (item.parent.type === ItemType.Area) {
+				let firstHalf = item.parent.vertices.indexOf(item) < item.parent.vertices.length/2;
+				return item.parent.classId + "_v_" + (firstHalf ? 0 : item.parent.vertices.length-1) ;
+			} 
+			else
+				return item.parent.classId + "_v";
+		} else if (item.type == "vertex") { //vertex with index
+			return item.parent.classId + "_v_" + item.parent.vertices.indexOf(item);
+		} else if (item.type == "segment" && item.dataScope) { //segment created from densify
+			return item.parent.classId + "_s";
+		} else if (item.type == "segment") { //segment with index
+			return item.parent.classId + "_s_" + item.parent.segments.indexOf(item);
+		} else {
+			return null;
 		}
+	}
 
-		set strokeColor(c) {
-			this.styles["strokeColor"] = c;
-		}
+	function sameClass(item1, item2) {
+		return getEncodingKey(item1).split("_")[0] === getEncodingKey(item2).split("_")[0];
+	}
 
-		get strokeWidth() {
-			return this.styles["strokeWidth"];
+	function getParents(items) {
+		let result = [];
+		for (let p of items) {
+			if (p.parent && result.indexOf(p.parent) < 0)
+				result.push(p.parent);
 		}
+		return result;
+	}
 
-		set strokeWidth(c) {
-			this.styles["strokeWidth"] = c;
+	function getAllChildren(cpnt) {
+		let result = [];
+		if (cpnt.children && cpnt.children.length > 0) {
+			for (let c of cpnt.children) {
+				result.push(c);
+				result = result.concat(getAllChildren(c));
+			}
 		}
+		return result;
+	}
 
-		get fillColor() {
-			return this.styles["fillColor"];
-		}
+	function getLeafMarks(cpnt) {
+		let result = [];
+		if (isMark(cpnt)) {
+			result.push(cpnt);
+		} else if (cpnt.children && cpnt.children.length > 0 && !isGuide(cpnt)) {
+			for (let c of cpnt.children) {
+				result = result.concat(getLeafMarks(c));
+			}
+		} 
+		return result;
+	}
 
-		set fillColor(c) {
-			this.styles["fillColor"] = c;
+	function getLeafItems(cpnt) {
+		let result = [];
+		if (cpnt.children && cpnt.children.length > 0) {
+			for (let c of cpnt.children) {
+				result = result.concat(getLeafItems(c));
+			}
+		} else {
+			result.push(cpnt);
 		}
+		return result;
+	}
 
-		get strokeDash() {
-			return this.styles["strokeDash"];
-		}
+	function isGuide(item) {
+		return item.type === ItemType.Axis || item.type === ItemType.Legend || item.type === ItemType.Gridlines;
+	}
 
-		set strokeDash(c) {
-			this.styles["strokeDash"] = c;
-		}
+	function isMark(cmpnt) {
+		return cmpnt instanceof Mark;
+	}
 
-		_doTranslate(dx, dy) {
-			for (let v of this.vertices) {
-				v._doTranslate(dx, dy);
+	function isPath(cmpnt) {
+		return cmpnt instanceof Path;
+	}
+
+	const ItemCounter = {
+		"area" : 0,
+		"rect" : 0,
+		"circle": 0,
+		"pie": 0,
+		"line": 0,
+		"path" : 0,
+		"ring" : 0,
+		"arc": 0,
+		"image": 0,
+		"pointText": 0,
+		"collection": 0,
+		"group": 0,
+		"scene": 0,
+		"axis": 0,
+		"glyph": 0,
+		"legend": 0,
+		"polygon": 0,
+		"gridlines": 0,
+		"LinearGradient": 0,
+		"link": 0,
+		"scale": 0,
+		"datatable": 0
+	};
+
+	function canAlign(items, direction, scene){
+		if (direction == Alignment.Top || direction == Alignment.Bottom || direction == Alignment.Middle) {
+			for (let item of items) {
+				if (!canMoveVertically(item, scene))
+					return false;
 			}
-			this._updateBounds();
+			return true;
 		}
 
-		//by default, with respect to the center of bounds
-		resize(wd, ht, xRef, yRef) {
-			let bounds = this.bounds, bWidth = bounds.width === 0 ? 1 : bounds.width, bHeight = bounds.height === 0 ? 1 : bounds.height;
-			if (xRef === "right") {
-				for (let v of this.vertices) {
-					v.x = bounds.right - (wd/bWidth) * (bounds.right - v.x);
-				}
-			} else {
-				for (let v of this.vertices) {
-					v.x = bounds.left + (wd/bWidth) * (v.x - bounds.left);
-				}
-			}
-			if (yRef === "top") {
-				for (let v of this.vertices) {
-					v.y = bounds.top + (ht/bHeight) * (v.y - bounds.top);
-				}
-			} else {
-				for (let v of this.vertices) {
-					v.y = bounds.bottom - (ht/bHeight) * (bounds.bottom - v.y);
-				}
+		if (direction == Alignment.Left || direction == Alignment.Right || direction == Alignment.Center) {
+			for (let item of items) {
+				if (!canMoveHorizontally(item, scene))
+					return false;
 			}
-			this._updateBounds();
+			return true;
 		}
+	}
 
-		_updateBounds() {		
-			let vx = this.vertices.map(d => d.x),
-				vy = this.vertices.map(d => d.y);
-
-			let left = Math.min(...vx), top = Math.min(...vy), right = Math.max(...vx), btm = Math.max(...vy);
-			
-			this._bounds = new Rectangle(left, top, right - left, btm - top);
-			if (this.type === ItemType.Line || this.type === ItemType.Path) {
-				let sw = this.styles["strokeWidth"] ? this.styles["strokeWidth"] : 1;
-				if (left === right)
-					this._bounds = new Rectangle(left - sw/2, top, right - left + sw, btm - top);
-				else if (top === btm)
-					this._bounds = new Rectangle(left, top - sw/2, right - left, btm - top + sw);
+	function canMoveHorizontally(item, scene) {
+		if (scene.getEncodingByItem(item, "x"))
+			return false;
+		if (item.parent && item.parent.layout) {
+			let layout = item.parent.layout;
+			if (layout.type == LayoutType.Grid && layout.numCols > 1) {
+				return false;
 			}
 		}
-
-		addVertex(x, y, i) {
-			let vertex = new Vertex(new Point(x, y), this, this.vertexCounter++);
-			this.vertices.splice(i, 0, vertex);
-			//TODO: handle segments
+		if (item.parent && item.parent.type != ItemType.Scene){
+			return canMoveHorizontally(item.parent, scene);
 		}
+		return true;
+	}
 
-		sortVertices(channel, descending) {
-			this.vertices.sort((a,b) => a[channel] - b[channel]);
-			if (descending)
-				this.vertices.reverse();
-			for (let i = 0; i < this.segments.length; i++) {
-				let segment = this.segments[i];
-				segment.vertex1 = this.vertices[i];
-				segment.vertex2 = this.vertices[(i+1)%this.vertices.length];
+	function canMoveVertically(item, scene) {
+		if (scene.getEncodingByItem(item, "y"))
+			return false;
+		if (item.parent && item.parent.layout) {
+			let layout = item.parent.layout;
+			if (layout.type == LayoutType.Grid && layout.numRows > 1) {
+				return false;
 			}
 		}
-
-		sortVerticesByData(field, descending, order) {
-			let f;
-			if (order)
-				f = (a, b) => order.indexOf(a.dataScope.getFieldValue(field)) - order.indexOf(b.dataScope.getFieldValue(field));
-			else
-				f = (a, b) =>  (a.dataScope.getFieldValue(field) < b.dataScope.getFieldValue(field) ? -1 : 1 );
-			this.vertices.sort(f);
-			if (descending)
-				this.vertices.reverse();
-			for (let i = 0; i < this.segments.length; i++) {
-				let segment = this.segments[i];
-				segment.vertex1 = this.vertices[i];
-				segment.vertex2 = this.vertices[(i+1)%this.vertices.length];
-			}
+		if (item.parent && item.parent.type != ItemType.Scene){
+			return canMoveVertically(item.parent, scene);
 		}
+		return true;
+	}
 
-		getSVGPathData() {
-			let p = d3__namespace.path();
-			let curve = this._getD3CurveFunction(this.curveMode)(p);
-			curve.lineStart();
-			for (let vertex of this.vertices) {
-				curve.point(vertex.x, vertex.y);
-			}
-			if (this.closed)
-				curve.point(this.vertices[0].x, this.vertices[0].y);
-			curve.lineEnd();
-
-			return p._;
-		}
-	 
-		// toSVG() {
+	var CanvasProvider = {
+		canvas : undefined,
 
-		// }
+		getCanvas: function() {
+			if (!window)
+	            return null;
+			if (this.canvas === undefined) {
+				this.canvas = document.createElement('canvas');
+			}
+			return this.canvas;
+		},
 
-		// fromSVG() {
+		getContext: function() {
+	        var canvas = this.getCanvas();
+	        return canvas ? canvas.getContext('2d') : null;
+	    },
+	};
 
-		// }
+	var SVGProvider = {
+		svg: undefined,
 
-		get firstVertex() {
-			return this.vertices[0];
+		getSVG: function() {
+			if (!window)
+	            return null;
+			if (this.svg === undefined) {
+				this.svg = document.createElement('svg');
+			}
+			return this.svg;
 		}
+	};
 
-		get firstSegment() {
-			return this.segments[0];
-		}
+	// export function getTextWidth(text, font) {
+	// 	let context = CanvasProvider.getContext();
+	// 	context.font = font;
+	// 	let metrics = context.measureText(text);
+	// 	return metrics.width;
+	// }
 
-		get lastVertex() {
-			return this.vertices[this.vertices.length - 1];
-		}
+	function getTextSize(text, font, fontSize) {
+		let context = CanvasProvider.getContext();
+		context.font = font;
+		let metrics = context.measureText(text);
+		if (metrics.fontBoundingBoxAscent)
+			return {width: metrics.width, height: metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent};
+		else if (metrics.actualBoundingBoxAscent)
+			return {width: metrics.width, height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent};
+		else
+			return {width: metrics.width, height: fontSize};
+	}
 
-		get lastSegment() {
-			return this.segments[this.segments.length - 1];
+	function getTopLevelGroup(item) {
+		let parent = item.parent;
+		if (parent.type == ItemType.Scene)
+			return item;
+		else
+			return getTopLevelGroup(parent);
+	}
+
+	function getTopLevelCollection(item) {
+		let parent = item.parent;
+		if (item.type == ItemType.Collection) {
+			if (parent.type == ItemType.Collection) {
+				return getTopLevelCollection(parent); 
+			} else
+				return item;
+		} else if (parent.type != ItemType.Scene) {
+			return getTopLevelCollection(parent); 
+		} else {
+			return undefined;
 		}
+	}
 
-		_getD3CurveFunction(v){
-			switch(v) {
-				case CurveMode.Natural:
-					return d3__namespace.curveNatural;
-				case CurveMode.Basis:
-					return d3__namespace.curveBasis;
-				case CurveMode.BumpX:
-					return d3__namespace.curveBumpX;
-				case CurveMode.BumpY:
-					return d3__namespace.curveBumpY;
-				case CurveMode.Linear:
-					return d3__namespace.curveLinear;
-				case CurveMode.Step:
-					return d3__namespace.curveStep;
-				case CurveMode.CatmullRom:
-					return d3__namespace.curveCatmullRom;
-				case CurveMode.Cardinal:
-					return d3__namespace.curveCardinal;
-				default:
-					return d3__namespace.curveLinear;
-			}
-		}
-
-		get vxShape(){
-			return this._vxShape;
-		}
-
-		set vxShape(s){
-			this._vxShape = s;
-			for (let v of this.vertices)
-				v.shape = s;
-		}
+	function polar2Cartesian(cx, cy, r, deg){
+		let x = r * Math.cos(degree2radian(deg)),
+			y = r * Math.sin(degree2radian(deg));
+		return [x + cx, cy - y];
+	}
 
-		get vxWidth(){
-			return this._vxWidth;
-		}
+	function cartesian2Polar(x, y, cx, cy){
+		let d = radian2degree(Math.atan2(cy - y, x - cx));
+	    d = Math.round( d * 10 + Number.EPSILON ) / 10;
+	    if (d < 0) d += 360;
+	    let r = Math.sqrt(Math.pow(x-cx, 2) + Math.pow(y-cy, 2));
+	    r = Math.round( r * 10 + Number.EPSILON ) / 10;
+	    return [d, r];
+	}
 
-		set vxWidth(s){
-			this._vxWidth = s;
-			for (let v of this.vertices)
-				v.width = s;
-		}
+	function degree2radian(d){
+		return d * Math.PI/180;
+	}
 
-		get vxHeight(){
-			return this._vxHeight;
-		}
+	function radian2degree(r){
+		return r * 180 / Math.PI;
+	}
 
-		set vxHeight(s){
-			this._vxHeight = s;
-			for (let v of this.vertices)
-				v.height = s;
+	function CheckAreaOrien(area){
+		let VNum = area.vertices.length;
+		for (let i = 0; i < area.vertices.length / 2; i++) {
+			let Vid1 = i, Vid2 = VNum - i - 1;
+			let peer1 = area.vertices[Vid1], peer2 = area.vertices[Vid2];
+			if (peer1.x == peer2.x && peer1.y == peer2.y) {
+				continue;
+			} else {
+				if (peer1.x == peer2.x) {
+					return "horizontal";
+				} else {
+					return "vertical";
+				}
+			}
 		}
+	}
 
-		get vxRadius(){
-			return this._vxRadius;
-		}
+	class Layout {
 
-		set vxRadius(s){
-			this._vxRadius = s;
-			for (let v of this.vertices)
-				v.radius = s;
-		}
+	    constructor(args){
+	        this.group = undefined;
+	    }
 
-		get vxFillColor(){
-			return this._vxFillColor;
-		}
+	    run(){}
 
-		set vxFillColor(s){
-			this._vxFillColor = s;
-			for (let v of this.vertices)
-				v.fillColor = s;
-		}
+	    clone(){}
+	}
 
-		get vxStrokeColor(){
-			return this._vxStrokeColor;
-		}
+	class GridLayout extends Layout {
 
-		set vxStrokeColor(s){
-			this._vxStrokeColor = s;
-			for (let v of this.vertices)
-				v.strokeColor = s;
+		constructor(args) {
+			super();
+			this.type = "grid";
+			this._numCols = args["numCols"];
+			this._numRows = args["numRows"];
+			this._dir = ("dir" in args) ? args["dir"] : [GridLayout.direction.Left2Right, GridLayout.direction.Top2Bottom];
+			// this._hDir = ("hDir" in args) ? args["hDir"] : GridLayout.direction.Left2Right;
+			// this._vDir = ("vDir" in args) ? args["vDir"] : GridLayout.direction.Top2Bottom;
+			this._rowGap = "rowGap" in args && args["rowGap"] !== undefined ? args["rowGap"] : 5;
+			this._colGap = "colGap" in args && args["colGap"] !== undefined ? args["colGap"] : 5;
+			this._cellHorzAlignment = "horzCellAlignment" in args && this._validateCellAlignment("h", args["horzCellAlignment"]) ? args["horzCellAlignment"] : Alignment.Left;
+			this._cellVertAlignment = "vertCellAlignment" in args && this._validateCellAlignment("v", args["vertCellAlignment"]) ? args["vertCellAlignment"] : Alignment.Bottom;
+			if (!this._numCols && !this._numRows)
+				this._numRows = 1;
 		}
 
-		get vxStrokeWidth(){
-			return this._vxStrokeWidth;
-		}
+		_validateCellAlignment(orientation, v) {
+			if (orientation === "h"  && [Alignment.Left, Alignment.Center, Alignment.Right].indexOf(v) >= 0){
+				return true;
+			} else if (orientation === "v" && [Alignment.Top, Alignment.Middle, Alignment.Bottom].indexOf(v) >= 0){
+				return true;
+			}
+			console.warn("Invalid alignment:", v);
+			return false;
 
-		set vxStrokeWidth(s){
-			this._vxStrokeWidth = s;
-			for (let v of this.vertices)
-				v.strokeWidth = s;
 		}
 
-		get vxOpacity(){
-			return this._vxOpacity;
+		toJSON() {
+			let json = {args: {}};
+			json.type = this.type;
+			json.args.numCols = this._numCols;
+			json.args.numRows = this._numRows;
+			json.args.colGap = this._colGap;
+			json.args.rowGap = this._rowGap;
+			json.args.horzCellAlignment = this._cellHorzAlignment;
+			json.args.vertCellAlignment = this._cellVertAlignment;
+			json.left = this._left;
+			json.top = this._top;
+			json.args.dir = this._dir;
+			return json;
 		}
 
-		set vxOpacity(s){
-			this._vxOpacity = s;
-			for (let v of this.vertices)
-				v.opacity = s;
+		clone() {
+			return new GridLayout({
+				numCols: this._numCols,
+				numRows: this._numRows,
+				// hDir: this._hDir,
+				// vDir: this._vDir,
+				dir: this._dir,
+				colGap: this._colGap,
+				rowGap: this._rowGap
+			});
 		}
 
-	}
-
-	function evaluatePredicate(itm, p) {
-		if ("field" in p) {
-			if (!itm.dataScope) return false;
-			let f = p["field"];
-			if ("value" in p) {
-				return itm.dataScope.getFieldValue(f) === p["value"];
-			} else if ("interval" in p) {
-				let v = itm.dataScope.getFieldValue(f);
-				return v >= p["interval"][0] && v <= p["interval"][1];
-			} else if ("values" in p) {
-				return p["values"].indexOf(itm.dataScope.getFieldValue(f)) >= 0;
-			} else {
-				return itm.dataScope.hasField(f);
-			}
-		} else if ("channel" in p) {
-			let c = p["channel"];
-			if ("value" in p) {
-				return itm[c] === p["value"];
-			} else if ("interval" in p) {
-				return itm[c] >= p["interval"][0] && itm[c] <= p["interval"][1];
-			} else if ("values" in p) {
-				return p["values"].indexOf(itm[c]) >= 0;
-			}
-		} else if ("type" in p) {
-			return itm.type === p["type"];
-		} else if ("id" in p) {
-			return itm.id === p["id"];
-		} else if ("classId" in p) {
-			return itm.classId === p["classId"];
-		} else if ("fields" in p) {
-			if (!itm.dataScope) return false;
-			let f1 = p["fields"][0], f2 = p["fields"][1],
-				v1 = itm.dataScope.getFieldValue(f1), v2 = itm.dataScope.getFieldValue(f2);
-			switch (p["operator"]) {
-				case "==":
-					return v1 == v2;
-				case ">":
-					return v1 > v2;
-				case ">=":
-					return v1 >= v2;
-				case "<":
-					return v1 < v2;
-				case "<=":
-					return v1 <= v2;
+		get cellBounds() {
+			let numCols, numRows, group = this.group, colGap = this._colGap, rowGap = this._rowGap;
+			if (this._numRows) {
+				numRows = this._numRows;
+				numCols = Math.ceil(this.group.children.length/this._numRows);
+			} else if (this._numCols) {
+				numCols = this._numCols;
+				numRows = Math.ceil(this.group.children.length/this._numCols);
 			}
-		}
-		return false;
-	}
-
-	function findItems(container, predicates) {
-		let result = [];
-		_findItemsRecursive(container, predicates, result);
-		return result;
-	}
 
-	function _findItemsRecursive(itm, predicates, result) {
-		if (!itm) return;
-		if (itm.type == "axis" || itm.type == "legend" || itm.type == "gridlines")	return;
-		if (_matchCriteria(itm, predicates)) {
-			result.push(itm);
-		}
-		
-		if (itm.vertices){
-			for (let i of itm.vertices.concat(itm.segments)) {
-				if (_matchCriteria(i, predicates))
-					result.push(i);
+			let bounds = group.children.map(d => d.bounds);
+			if (this._left === undefined) {
+				let lefts = bounds.map(d => d.left),
+					tops = bounds.map(d => d.top);
+				this._left = Math.min(...lefts);
+				this._top = Math.min(...tops);
 			}
-		} else if (itm.children && itm.children.length > 0) {
-			for (let c of itm.children)
-				_findItemsRecursive(c, predicates, result);
-		}
-	}
 
-	function _matchCriteria(cpnt, predicates) {
-		for (let p of predicates) {
-			if (!evaluatePredicate(cpnt, p))
-				return false;
-		}
-		return true;
-	}
-
-	function getPeers(item, scene) {
-		if (item.type == "vertex") {
-			return _getPeerVertices(item, scene);
-		} else if (item.type == "segment") {
-			return _getPeerSegments(item, scene);
-		} else {
-			// return item.classId ? findItems(scene, d => d.classId == item.classId) : [];
-			return item.classId ? findItems(scene, [{"classId": item.classId}]) : [];
-		}
-	}
-
-	//returns an array of peer arrays, peers within each array have the same parent
-	function getPeersGroupedByParent(item, scene) {
-		let result = {}, peers = getPeers(item, scene);
-		for (let p of peers) {
-			let parent = p.parent.id;
-			if (!(parent in result))
-				result[parent] = [];
-			result[parent].push(p);
-		}
-		return Object.keys(result).map(d => result[d]);
-	}
-
-	function _getPeerSegments(segment, container) {
-		if (segment.dataScope) {
-			let parent = segment.parent;
-			if (!parent)	throw new Error("segment has no parent mark");
-			let parentPeers = findItems(container, [{"classId": parent.classId}]);
-			let results = [];
-			for (let p of parentPeers) {
-				results = results.concat(p.segments);
-			}
-			return results;
-		} else {
-			let parent = segment.parent;
-			if (!parent)	throw new Error("segment has no parent mark");
-			let index = parent.segments.indexOf(segment);
-			let parentPeers = findItems(container, [{"classId": parent.classId}]);
-			let results = [];
-			for (let p of parentPeers) {
-				results.push(p.segments[index]);
-			}
-			return results;
-		}
-	}
-
-	function _getPeerVertices(vertex, container) {
-		if (vertex.classId) ; else if (vertex.dataScope) {
-			let parent = vertex.parent;
-			if (!parent)	throw new Error("vertex has no parent mark");
-			let parentPeers = findItems(container, [{"classId": parent.classId}]);
-			let results = [];
-			if (parent.type === ItemType.Area) {
-				let idx = parent.vertices.indexOf(vertex), firstHalf = idx < parent.vertices.length/2;
-				for (let p of parentPeers) {
-					let vertices = firstHalf ? p.vertices.slice(0, p.vertices.length/2) : p.vertices.slice(p.vertices.length/2);
-					results = results.concat(vertices.filter(d => d.dataScope));
-				}
-			} else {
-				for (let p of parentPeers) {
-					results = results.concat(p.vertices.filter(d => d.dataScope));
+			let wds = bounds.map(d => d.width),
+				hts = bounds.map(d => d.height),
+				cellWidth = Math.max(...wds), 
+				cellHeight = Math.max(...hts);
+			
+			//cell size should be determined by the scale range extent if bound to data
+			let leftOffset = 0; //, topOffset = 0;
+			
+			let xEncs = group.getInternalEncodings("x"),
+				yEncs = group.getInternalEncodings("y"),
+				wdEncs = group.getInternalEncodings("width"),
+				htEncs = group.getInternalEncodings("height");
+			if (xEncs.length > 0) {
+				let xEnc = xEncs[xEncs.length -1];
+				cellWidth = xEnc.scale.rangeExtent;
+				leftOffset = xEnc.scale.range[0];
+				if (xEnc.scale.type === "point") {
+					//TODO: need to handle variable sizes
+					cellWidth += xEnc.anyItem.bounds.width;
 				}
+			} else if (wdEncs.length > 0 && wdEncs[wdEncs.length -1]._rectNegativeValues) { //width encoding with negative values
+				cellWidth = wdEncs[wdEncs.length -1].scale.rangeExtent;
+				leftOffset = wdEncs[wdEncs.length -1].scale.range[0];
 			}
-			return results;
-		} else {
-			let parent = vertex.parent;
-			if (!parent)	throw new Error("vertex has no parent mark");
-			let index = parent.vertices.indexOf(vertex);
-			let parentPeers = findItems(container, [{"classId": parent.classId}]);
-			let results = [];
-			for (let p of parentPeers) {
-				results.push(p.vertices[index]);
-			}
-			return results;
-		}
-	}
-
-	function getClosestLayout(item, type) {
-		let parent = item.parent;
-		while (parent && parent.type != ItemType.Scene) {
-			if (parent.layout) {
-				if ( (!type) || (type && parent.layout.type === type))
-					return parent.layout;
-			}
-			parent = parent.parent;
-		}
-		return undefined;
-	}
-
-	function getCellBoundsInLayout(item) {
-		let itm = item, parent = item.parent;
-		while (parent && parent.type != ItemType.Scene) {
-			if (parent.layout){
-				let idx = parent.children.findIndex(d => d == itm);
-				return parent.layout.cellBounds[idx];
-			}
-			itm = itm.parent;
-			parent = itm.parent;
-		}
-		return undefined;
-	}
-
-	function getCellIndexInLayout(item) {
-		let itm = item, parent = item.parent;
-		while (parent && parent.type != ItemType.Scene) {
-			if (parent.layout){
-				return parent.children.findIndex(d => d == itm);
-			}
-			itm = itm.parent;
-			parent = itm.parent;
-		}
-		return undefined;
-	}
-
-	function getCellBoundsInGridLayout(item) {
-		let itm = item, parent = item.parent;
-		while (parent && parent.type != ItemType.Scene) {
-			if (parent.layout && parent.layout.type == LayoutType.Grid){
-				let idx = parent.children.findIndex(d => d == itm);
-				return parent.layout.cellBounds[idx];
+			if (yEncs.length > 0) {
+				let yEnc = yEncs[yEncs.length -1];
+				cellHeight = yEnc.scale.rangeExtent;
+				if (yEnc.scale.type === "point") {
+					//TODO: need to handle variable sizes
+					cellHeight += yEnc.anyItem.bounds.height;
+				}
+			} else if (htEncs.length > 0 &&  htEncs[htEncs.length -1]._rectNegativeValues) { //width encoding with negative values
+				cellHeight = htEncs[htEncs.length -1].scale.rangeExtent;
 			}
-			itm = itm.parent;
-			parent = itm.parent;
-		}
-		return undefined;
-	}
-
-	function getTopLevelLayout(item, type) {
-		let parent = item.parent, layout = undefined;
-		while (parent && parent.type !== ItemType.Scene) {
-			if (parent.layout)
-				if ( (!type) || (type && parent.layout.type === type))
-					layout = parent.layout;
-			parent = parent.parent;
-		}
-		return layout;
-	}
-
-	function getEncodingKey(item) {
-		if (item.classId) {
-			return item.classId;
-		} else if (item.type == "vertex" && item.dataScope) { //vertex created from densify
-			if (item.parent.type === ItemType.Area) {
-				let firstHalf = item.parent.vertices.indexOf(item) < item.parent.vertices.length/2;
-				return item.parent.classId + "_v_" + (firstHalf ? 0 : item.parent.vertices.length-1) ;
-			} 
-			else
-				return item.parent.classId + "_v";
-		} else if (item.type == "vertex") { //vertex with index
-			return item.parent.classId + "_v_" + item.parent.vertices.indexOf(item);
-		} else if (item.type == "segment" && item.dataScope) { //segment created from densify
-			return item.parent.classId + "_s";
-		} else if (item.type == "segment") { //segment with index
-			return item.parent.classId + "_s_" + item.parent.segments.indexOf(item);
-		} else {
-			return null;
-		}
-	}
-
-	function sameClass(item1, item2) {
-		return getEncodingKey(item1).split("_")[0] === getEncodingKey(item2).split("_")[0];
-	}
 
-	function getParents(items) {
-		let result = [];
-		for (let p of items) {
-			if (p.parent && result.indexOf(p.parent) < 0)
-				result.push(p.parent);
-		}
-		return result;
-	}
+			let cb = [], cellCount = numRows * numCols;
 
-	function getAllChildren(cpnt) {
-		let result = [];
-		if (cpnt.children && cpnt.children.length > 0) {
-			for (let c of cpnt.children) {
-				result.push(c);
-				result = result.concat(getAllChildren(c));
+			switch (this._dir[0]) {
+				case GridLayout.direction.Left2Right:
+					switch (this._dir[1]) {
+						case GridLayout.direction.Top2Bottom:
+							for (let i = 0; i < cellCount; i++) {
+								cb.push(new Rectangle(this._left + (cellWidth + colGap) * (i%numCols) + leftOffset, 
+									this._top + (cellHeight + rowGap) * Math.floor(i/numCols), cellWidth, cellHeight));
+							}
+							break;
+							// return group.children.map((d, i) => new Rectangle(this._left + (cellWidth + colGap) * (i%numCols) + leftOffset, 
+							// 		this._top + (cellHeight + rowGap) * Math.floor(i/numCols), cellWidth, cellHeight));
+						case GridLayout.direction.Bottom2Top: 
+							for (let i = 0; i < cellCount; i++) {
+								cb.push(new Rectangle(this._left + (cellWidth + colGap) * (i%numCols) + leftOffset, 
+									this._top + (this.numRows - 1 - Math.floor(i/numCols)) * (cellHeight + rowGap), cellWidth, cellHeight));
+							}
+							break;
+							// return group.children.map((d, i) => new Rectangle(this._left + (cellWidth + colGap) * (i%numCols) + leftOffset, 
+							// 		this._top + (this.numRows - 1 - Math.floor(i/numCols)) * (cellHeight + rowGap), cellWidth, cellHeight));
+					}
+					break;	
+				case GridLayout.direction.Right2Left:
+					switch (this._dir[1]) {
+						case GridLayout.direction.Top2Bottom:
+							for (let i = 0; i < cellCount; i++) {
+								cb.push(new Rectangle(leftOffset + this._left + (numCols - 1) * (cellWidth + colGap) - (cellWidth + colGap) * (i%numCols),
+									this._top + (cellHeight + rowGap) * Math.floor(i/numCols), cellWidth, cellHeight));
+							}
+							break;
+							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (numCols - 1) * (cellWidth + colGap) - (cellWidth + colGap) * (i%numCols),
+							// 	this._top + (cellHeight + rowGap) * Math.floor(i/numCols), cellWidth, cellHeight));
+						case GridLayout.direction.Bottom2Top: {
+							for (let i = 0; i < cellCount; i++) {
+								cb.push(new Rectangle(leftOffset + this._left + (numCols - 1 - i%numCols) * (cellWidth + colGap),
+									this._top + (this.numRows - 1 - Math.floor(i/numCols)) * (cellHeight + rowGap), cellWidth, cellHeight));
+							}
+							break;
+							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (numCols - 1 - i%numCols) * (cellWidth + colGap),
+							// 	this._top + (this.numRows - 1 - Math.floor(i/numCols)) * (cellHeight + rowGap), cellWidth, cellHeight));
+						}
+					}
+					break;
+				case GridLayout.direction.Top2Bottom:
+					switch (this._dir[1]) {
+						case GridLayout.direction.Left2Right:
+							for (let i = 0; i < cellCount; i++) {
+								cb.push(new Rectangle(leftOffset + this._left + (cellWidth + colGap) * Math.floor(i/this.numRows),
+									this._top + (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
+							}
+							break;
+							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (cellWidth + colGap) * Math.floor(i/this.numRows),
+							// 	this._top + (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
+						case GridLayout.direction.Right2Left:
+							for (let i = 0; i < cellCount; i++) {
+								cb.push(new Rectangle(leftOffset + this._left + (cellWidth + colGap) * (this.numCols - 1) - (cellWidth + colGap) * Math.floor(i/this.numRows),
+									this._top + (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
+							}
+							break;
+							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (cellWidth + colGap) * (this.numCols - 1) - (cellWidth + colGap) * Math.floor(i/this.numRows),
+							// 	this._top + (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
+					}
+					break;
+				case GridLayout.direction.Bottom2Top:
+					switch (this._dir[1]) {
+						case GridLayout.direction.Left2Right:
+							for (let i = 0; i < cellCount; i++) {
+								cb.push(new Rectangle(leftOffset + this._left + (cellWidth + colGap) * Math.floor(i/this.numRows),
+									this._top + (cellHeight + rowGap) * (this.numRows - 1) - (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
+							}
+							break;
+							// this._top + (cellHeight + rowGap) * (this.numRows - 1) - (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight)));
+							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left + (cellWidth + colGap) * Math.floor(i/this.numRows),
+							// 	this._top + (cellHeight + rowGap) * (this.numRows - 1) - (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
+						case GridLayout.direction.Right2Left:
+							for (let i = 0; i < cellCount; i++) {
+								cb.push(new Rectangle(leftOffset + this._left +  (cellWidth + colGap) * (this.numCols - 1) - (cellWidth + colGap) * Math.floor(i/this.numRows),
+									this._top + (cellHeight + rowGap) * (this.numRows - 1) - (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
+							}
+							break;
+							// return group.children.map((d, i) => new Rectangle(leftOffset + this._left +  (cellWidth + colGap) * (this.numCols - 1) - (cellWidth + colGap) * Math.floor(i/this.numRows),
+							// 	this._top + (cellHeight + rowGap) * (this.numRows - 1) - (cellHeight + rowGap) * (i%this.numRows), cellWidth, cellHeight));
+					}
+					break;
 			}
-		}
-		return result;
-	}
 
-	function getLeafMarks(cpnt) {
-		let result = [];
-		if (isMark(cpnt)) {
-			result.push(cpnt);
-		} else if (cpnt.children && cpnt.children.length > 0 && !isGuide(cpnt)) {
-			for (let c of cpnt.children) {
-				result = result.concat(getLeafMarks(c));
-			}
-		} 
-		return result;
-	}
+			return cb;
 
-	function getLeafItems(cpnt) {
-		let result = [];
-		if (cpnt.children && cpnt.children.length > 0) {
-			for (let c of cpnt.children) {
-				result = result.concat(getLeafItems(c));
-			}
-		} else {
-			result.push(cpnt);
+			// if (group.firstChild.type === ItemType.Glyph) {
+			// 	let items = group.firstChild.children, xRanges = [], yRanges = [], minLefts = [], minTops = [], scn = group.getScene();
+			// 	for (let itm of items) {
+			// 		let xEnc = scn.positionBound(itm, "x"), wdEnc = scn.sizeBound(itm, "width"),
+			// 			yEnc = scn.positionBound(itm, "y"), htEnc = scn.sizeBound(itm, "height"),
+			// 			peers = getPeers(itm, scn);
+			// 		xRanges.push(xEnc? xEnc.scale.rangeExtent : wdEnc && wdEnc._rectNegativeValues ? wdEnc.scale.rangeExtent : undefined);
+			// 		yRanges.push(yEnc? yEnc.scale.rangeExtent : htEnc && htEnc._rectNegativeValues ? htEnc.scale.rangeExtent : undefined);
+			// 		minLefts.push(Math.min(...peers.map(d => d.bounds.left)));
+			// 		minTops.push(Math.min(...peers.map(d => d.bounds.top)));
+			// 	}
+			// 	let wds = [], hts = [];
+			// 	for (let c of group.children) {
+			// 		let xCoords = [], yCoords = [];
+			// 		for (const [i, m] of c.children.entries()) {
+			// 			xCoords.push( m.refBounds.left, m.refBounds.left + (xRanges[i] ? xRanges[i] : m.bounds.width));
+			// 			yCoords.push( m.refBounds.top, m.refBounds.top + (yRanges[i] ? yRanges[i] : m.bounds.height));
+			// 		}
+			// 		wds.push(Math.max(...xCoords) - Math.min(...xCoords));
+			// 		hts.push(Math.max(...yCoords) - Math.min(...yCoords));
+			// 	}
+			// 	cellWidth = Math.max(...wds);
+			// 	cellHeight = Math.max(...hts);
+			// } else 
+			// if (group.firstChild.type === ItemType.Collection && group.firstChild.layout && group.firstChild.layout.type === LayoutType.Grid) {
+			// 	let cb = group.firstChild.layout.cellBounds[0];
+			// 	cellWidth = (cb.width + group.firstChild.layout.colGap) * Math.max(...group.children.map(d => d.layout.numCols)) - group.firstChild.layout.colGap;
+			// 	cellHeight = (cb.height + group.firstChild.layout.rowGap) * Math.max(...group.children.map(d => d.layout.numRows)) - group.firstChild.layout.rowGap;
+			// } else {
 		}
-		return result;
-	}
 
-	function isGuide(item) {
-		return item.type === ItemType.Axis || item.type === ItemType.Legend || item.type === ItemType.Gridlines;
-	}
+		run() {
+			if (this.group == undefined|| !this.group.children || this.group.children.length === 0)
+				return;
 
-	function isMark(cmpnt) {
-		return cmpnt instanceof Mark;
-	}
+			let cellBounds = this.cellBounds;
 
-	function isPath(cmpnt) {
-		return cmpnt instanceof Path;
-	}
+			let xEncs = this.group.getInternalEncodings("x"),
+				yEncs = this.group.getInternalEncodings("y"),
+				wdEncs = this.group.getInternalEncodings("width"),
+				htEncs = this.group.getInternalEncodings("height");
+			for (let i = 0; i < this.group.children.length; i++) {
+				let c = this.group.children[i]; 
+				let gridBound = cellBounds[i];
 
-	const ItemCounter = {
-		"area" : 0,
-		"rect" : 0,
-		"circle": 0,
-		"pie": 0,
-		"line": 0,
-		"path" : 0,
-		"ring" : 0,
-		"arc": 0,
-		"image": 0,
-		"pointText": 0,
-		"collection": 0,
-		"group": 0,
-		"scene": 0,
-		"axis": 0,
-		"glyph": 0,
-		"legend": 0,
-		"polygon": 0,
-		"gridlines": 0,
-		"LinearGradient": 0,
-		"link": 0,
-		"scale": 0,
-		"datatable": 0
-	};
+				let dx = gridBound.x - c.bounds.x,
+					dy = gridBound.y - c.bounds.y;
+				c._doTranslate(dx, dy);
 
-	function canAlign(items, direction, scene){
-		if (direction == Alignment.Top || direction == Alignment.Bottom || direction == Alignment.Middle) {
-			for (let item of items) {
-				if (!canMoveVertically(item, scene))
-					return false;
+				//alignment in cell if c's position is not bound to data
+				let cdx = 0, cdy = 0;
+				if (xEncs.length == 0) {
+					switch(this._cellHorzAlignment) {
+						case Alignment.Left:
+							cdx = gridBound.left - c.bounds.left;
+							break;
+						case Alignment.Center:
+							cdx = gridBound.x - c.bounds.x;
+							break;
+						case Alignment.Right:
+							cdx = gridBound.right - c.bounds.right;
+							break;
+					} 
+				}
+				
+				if (yEncs.length == 0) {
+					switch(this._cellVertAlignment) {
+						case Alignment.Top:
+							cdy = gridBound.top - c.bounds.top;
+							break;
+						case Alignment.Middle:
+							cdy = gridBound.y - c.bounds.y;
+							break;
+						case Alignment.Bottom:
+							cdy = gridBound.bottom - c.bounds.bottom;
+							break;
+					}
+				}
+				
+				c._doTranslate(cdx, cdy);
 			}
-			return true;
-		}
 
-		if (direction == Alignment.Left || direction == Alignment.Right || direction == Alignment.Center) {
-			for (let item of items) {
-				if (!canMoveHorizontally(item, scene))
-					return false;
+			if (xEncs.length > 0) {
+				//if childrens' position bound to data, compute position using the scale
+				for (let enc of xEncs)
+					enc._apply();
+			} else if (wdEncs.length > 0) {
+				let enc = wdEncs[wdEncs.length-1];
+				if (enc._rectNegativeValues){
+					enc._apply();
+				}
 			}
-			return true;
-		}
-	}
 
-	function canMoveHorizontally(item, scene) {
-		if (scene.getEncodingByItem(item, "x"))
-			return false;
-		if (item.parent && item.parent.layout) {
-			let layout = item.parent.layout;
-			if (layout.type == LayoutType.Grid && layout.numCols > 1) {
-				return false;
+			if (yEncs.length > 0) {
+				//yEncs[yEncs.length-1]._map();
+				// yEncs[yEncs.length-1]._apply();
+				for (let enc of yEncs)
+					enc._apply();
+			} else if (htEncs.length > 0) {
+				let enc = htEncs[htEncs.length-1];
+				if (enc._rectNegativeValues){
+					enc._apply();
+				}
 			}
+
+			this.group._updateBounds();
 		}
-		if (item.parent && item.parent.type != ItemType.Scene){
-			return canMoveHorizontally(item.parent, scene);
+
+		//TODO: add a corresponding scene level operation, automatically relayout
+		set rowGap(g) {
+			this._rowGap = g;
+			this.run();
+			this.group.getScene()._relayoutAncestors(this.group);
 		}
-		return true;
-	}
 
-	function canMoveVertically(item, scene) {
-		if (scene.getEncodingByItem(item, "y"))
-			return false;
-		if (item.parent && item.parent.layout) {
-			let layout = item.parent.layout;
-			if (layout.type == LayoutType.Grid && layout.numRows > 1) {
-				return false;
-			}
+		get rowGap() {
+			return this._rowGap;
 		}
-		if (item.parent && item.parent.type != ItemType.Scene){
-			return canMoveVertically(item.parent, scene);
+
+		set colGap(g) {
+			this._colGap = g;
+			this.run();
+			this.group.getScene()._relayoutAncestors(this.group);
 		}
-		return true;
-	}
 
-	var CanvasProvider = {
-		canvas : undefined,
+		get colGap() {
+			return this._colGap;
+		}
 
-		getCanvas: function() {
-			if (!window)
-	            return null;
-			if (this.canvas === undefined) {
-				this.canvas = document.createElement('canvas');
+		set numCols(c) {
+			if (c < 0 || c > this.group.children.length) {
+				console.warn("Cannot set", c, "columns for", this.group.children.length, "items in grid");
+				return;
 			}
-			return this.canvas;
-		},
-
-		getContext: function() {
-	        var canvas = this.getCanvas();
-	        return canvas ? canvas.getContext('2d') : null;
-	    },
-	};
-
-	var SVGProvider = {
-		svg: undefined,
+			this._numCols = c;
+			this._numRows = Math.ceil(this.group.children.length/c);
+			this.run();
+			this.group.getScene()._relayoutAncestors(this.group);
+		}
 
-		getSVG: function() {
-			if (!window)
-	            return null;
-			if (this.svg === undefined) {
-				this.svg = document.createElement('svg');
+		get numCols() {
+			if (this._numCols) {
+				return this._numCols;
+			} else if (this._numRows) {
+				return Math.ceil(this.group.children.length/this._numRows);
+			} else {
+				return 0;
 			}
-			return this.svg;
 		}
-	};
-
-	// export function getTextWidth(text, font) {
-	// 	let context = CanvasProvider.getContext();
-	// 	context.font = font;
-	// 	let metrics = context.measureText(text);
-	// 	return metrics.width;
-	// }
 
-	function getTextSize(text, font, fontSize) {
-		let context = CanvasProvider.getContext();
-		context.font = font;
-		let metrics = context.measureText(text);
-		if (metrics.fontBoundingBoxAscent)
-			return {width: metrics.width, height: metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent};
-		else if (metrics.actualBoundingBoxAscent)
-			return {width: metrics.width, height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent};
-		else
-			return {width: metrics.width, height: fontSize};
-	}
+		set numRows(c) {
+			if (c < 0 || c > this.group.children.length) {
+				console.warn("Cannot set", c, "rows for", this.group.children.length, "items in grid");
+				return;
+			}
+			this._numRows = c;
+			this._numCols = Math.ceil(this.group.children.length/c);
+			this.run();
+			this.group.getScene()._relayoutAncestors(this.group);
+		}
 
-	function getTopLevelGroup(item) {
-		let parent = item.parent;
-		if (parent.type == ItemType.Scene)
-			return item;
-		else
-			return getTopLevelGroup(parent);
-	}
 
-	function getTopLevelCollection(item) {
-		let parent = item.parent;
-		if (item.type == ItemType.Collection) {
-			if (parent.type == ItemType.Collection) {
-				return getTopLevelCollection(parent); 
-			} else
-				return item;
-		} else if (parent.type != ItemType.Scene) {
-			return getTopLevelCollection(parent); 
-		} else {
-			return undefined;
+		get numRows() {
+			if (this._numRows) {
+				return this._numRows;
+			} else if (this._numCols) {
+				return Math.ceil(this.group.children.length/this._numCols);
+			} else 
+				return 0;
 		}
-	}
 
-	function polar2Cartesian(cx, cy, r, deg){
-		let x = r * Math.cos(degree2radian(deg)),
-			y = r * Math.sin(degree2radian(deg));
-		return [x + cx, cy - y];
-	}
+		set vertCellAlignment(v) {
+			if (v != Alignment.Top && v != Alignment.Bottom && v != Alignment.Middle) {
+				throw Errors.UNKOWN_ALIGNMENT;
+			}
+			this._cellVertAlignment = v;
+			this.run();
+		}
 
-	function cartesian2Polar(x, y, cx, cy){
-		let d = radian2degree(Math.atan2(cy - y, x - cx));
-	    d = Math.round( d * 10 + Number.EPSILON ) / 10;
-	    if (d < 0) d += 360;
-	    let r = Math.sqrt(Math.pow(x-cx, 2) + Math.pow(y-cy, 2));
-	    r = Math.round( r * 10 + Number.EPSILON ) / 10;
-	    return [d, r];
-	}
+		get vertCellAlignment() {
+			return this._cellVertAlignment;
+		}
 
-	function degree2radian(d){
-		return d * Math.PI/180;
-	}
+		set horzCellAlignment(h) {
+			if (h != Alignment.Left && h != Alignment.Center && h != Alignment.Right) {
+				throw Errors.UNKOWN_ALIGNMENT;
+			}
+			this._cellHorzAlignment = h;
+			this.run();
+		}
 
-	function radian2degree(r){
-		return r * 180 / Math.PI;
-	}
+		get horzCellAlignment() {
+			return this._cellHorzAlignment;
+		}
 
-	function CheckAreaOrien(area){
-		let VNum = area.vertices.length;
-		for (let i = 0; i < area.vertices.length / 2; i++) {
-			let Vid1 = i, Vid2 = VNum - i - 1;
-			let peer1 = area.vertices[Vid1], peer2 = area.vertices[Vid2];
-			if (peer1.x == peer2.x && peer1.y == peer2.y) {
-				continue;
+		//accepts two formats: a two-element array, or a string
+		set direction(d) {
+			if (Array.isArray(d) && d.length === 2) {
+				this._dir = d;
 			} else {
-				if (peer1.x == peer2.x) {
-					return "horizontal";
-				} else {
-					return "vertical";
-				}
+				this._dir = d.split("_");
 			}
+			this.run();
+		}
+
+		get direction() {
+			return this._dir.join("_");
 		}
 	}
 
+	GridLayout.direction = {
+		Left2Right: "l2r",
+		Right2Left: "r2l",
+		Top2Bottom: "t2b",
+		Bottom2Top: "b2t"
+	};
+
 	/**
 	* Same as group in graphical design tools 
 	**/
@@ -4006,6 +4016,7 @@
 						this.scale = createScale("time");
 						this.scale.isFlipped = this._flipScale;
 						range = [0, extent];
+						this.scale._baseItem = this.anyItem;
 					}
 					break;
 
@@ -4026,6 +4037,7 @@
 						this.scale = createScale("point");
 						this.scale.isFlipped = this._flipScale;
 						range = [0, extent];
+						this.scale._baseItem = this.anyItem;
 					}
 					break;
 
@@ -6188,6 +6200,8 @@
 	    matches(item) {}
 
 	    reposition() {
+	        if (this instanceof EncodingAxis)
+	            this._determineAxisFlip();
 	        this._positionPath();
 	        this._positionTicks();
 	        this._positionLabels();
@@ -10747,12 +10761,18 @@
 					.attr("width", d => d.width).attr("height", rowGap)
 					.style("fill", "pink").style("opacity", 0.5)
 					;
-			let left = Math.min(...cellBounds.map(d => d.left)),
-				top = Math.min(...cellBounds.map(d => d.top));
-			this._decoMap[gridId].append("rect").attr("x", left).attr("y", top)
-				.attr("width", c.bounds.width).attr("height", c.bounds.height)
+			for (let cb of cellBounds) {
+				this._decoMap[gridId].append("rect").attr("x", cb.left).attr("y", cb.top)
+				.attr("width", cb.width).attr("height", cb.height)
 				.attr("stroke", "blue").attr("stroke-width", "1px")
 				.attr("stroke-dasharray", "5,5").attr("fill", "none");
+			}
+			// let left = Math.min(...cellBounds.map(d => d.left)),
+			// 	top = Math.min(...cellBounds.map(d => d.top))
+			// this._decoMap[gridId].append("rect").attr("x", left).attr("y", top)
+			// 	.attr("width", c.bounds.width).attr("height", c.bounds.height)
+			// 	.attr("stroke", "blue").attr("stroke-width", "1px")
+			// 	.attr("stroke-dasharray", "5,5").attr("fill", "none");
 
 		}
 
@@ -24324,6 +24344,14 @@
 		}
 	}
 
+	function canFormGlyph(args) {
+		for (let itm of args) {
+			if (!isMark(itm))
+				return false;
+		}
+		return true;
+	}
+
 	function canClassify(item) {
 		if (item.type !== ItemType.Collection) return false;
 		if (item.children.length < 2) return false;
@@ -24349,6 +24377,7 @@
 	exports.canClassify = canClassify;
 	exports.canDensify = canDensify;
 	exports.canDivide = canDivide;
+	exports.canFormGlyph = canFormGlyph;
 	exports.canRepeat = canRepeat;
 	exports.cartesianToPolar = cartesianToPolar;
 	exports.createScale = createScale;