mascot-vis 1.11.2 → 1.12.1

package/dist/mascot.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// version: 1.11.2
+// 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,1255 +273,846 @@
 		"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;
-
-	/**
-	* The epsilon to be used when performing "trigonometric" checks, such
-	* as examining cross products to check for collinearity.
-	*/
-	const TRIGONOMETRIC_EPSILON = 1e-8;
-
-	/**
-	* Checks if the value is 0, within a tolerance defined by
-	* Numerical.EPSILON.
-	*/
-	function isZero(val) {
-		return val >= -EPSILON && val <= EPSILON;
-	}
-
-	// Based on basic.Point.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
-
-	class Point {
-		
-		constructor(x, y) {
-			this.x = x;
-			this.y = y;
-		}
-
-		transform(matrix) {
-	        return matrix ? matrix._transformPoint(this) : this;
+		get strokeDash() {
+			return this.styles["strokeDash"];
 		}
 
-		negate() {
-	        return new Point(-this.x, -this.y);
-	    }
-
-		subtract(point) {
-			return new Point(this.x - point.x, this.y - point.y);
+		set strokeDash(c) {
+			this.styles["strokeDash"] = c;
 		}
 
-	    isZero() {
-	    	return isZero(this.x) && isZero(this.y)
-	    }
-
-		/**
-		* 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;
-	    }
-
-	}
-
-	// Based on path.Segment.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
-
-	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; 
-
-			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;
+		_doTranslate(dx, dy) {
+			for (let v of this.vertices) {
+				v._doTranslate(dx, dy);
+			}
+			this._updateBounds();
 		}
 
-		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);
+		//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();
 		}
 
-		get id() {
-			return this.parent.id + "_v_" + this._id;
-		}
+		_updateBounds() {		
+			let vx = this.vertices.map(d => d.x),
+				vy = this.vertices.map(d => d.y);
 
-		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;
+			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);
+			}
 		}
 
-		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;
+		addVertex(x, y, i) {
+			let vertex = new Vertex(new Point(x, y), this, this.vertexCounter++);
+			this.vertices.splice(i, 0, vertex);
+			//TODO: handle segments
 		}
 
-		_doTranslate(dx, dy) {
-			this.x += dx;
-			this.y += dy;
+		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];
+			}
 		}
 
-		_clone(parent) {
-			let v = new Vertex(new Point(this.x, this.y), parent, this._id);
-			if (this.dataScope) {
-				v.dataScope = this.dataScope.clone();
+		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];
 			}
-			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;
 		}
 
-		set polarAngle(a) {
-			this._polarAngle = a;
-		}
+		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();
 
-		get polarAngle() {
-			return this._polarAngle;
+			return p._;
 		}
-	}
+	 
+		// toSVG() {
 
-	Vertex.styles = ["vxShape", "vxWidth", "vxHeight", "vxRadius", "vxFillColor", "vxStrokeColor", "vxStrokeWidth", "vxOpacity"];
+		// }
 
-	class Segment {
-		
-		constructor(v1, v2, parentMark, id) {
-			this.type = "segment";
-			this._id = id;
-			this.vertex1 = v1;
-			this.vertex2 = v2;
+		// fromSVG() {
 
-			this.dataScope = undefined;
-			this.parent = parentMark;
-		}
+		// }
 
-		get id() {
-			return this.parent.id + "_s_" + this._id;
+		get firstVertex() {
+			return this.vertices[0];
 		}
 
-		_doTranslate(dx, dy) {
-			this.vertex1._doTranslate(dx, dy);
-			this.vertex2._doTranslate(dx, dy);
+		get firstSegment() {
+			return this.segments[0];
 		}
 
-		get x() {
-			return (this.vertex1.x + this.vertex2.x)/2;
+		get lastVertex() {
+			return this.vertices[this.vertices.length - 1];
 		}
 
-		get y() {
-			return (this.vertex1.y + this.vertex2.y)/2;
+		get lastSegment() {
+			return this.segments[this.segments.length - 1];
 		}
-	}
 
-	class Path extends Mark {
-		
-		constructor(args) {
-			super(args);
-			this.type = "type" in args ? args.type : ItemType.Path;
-
-			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";
-
-			this.vertices = [];
-			this.vertexCounter = 0; //for assigning vertex ids
-			this.segmentCounter = 0;
-			this.segments = [];
-
-			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 vs of Vertex.styles){
-					if (vs in args)
-						this["_" + vs] = args[vs];
-				}
-
-				if ("vertices" in args) {
-					this._setVertices(args["vertices"]);
-				}
-			}
-		}
-
-		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;
+		_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:
-					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 d3__namespace.curveLinear;
 			}
-			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;
-				}
-
-				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];
-					}
-				}
+		get vxShape(){
+			return this._vxShape;
+		}
 
-				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++));
-			}
+		set vxShape(s){
+			this._vxShape = s;
+			for (let v of this.vertices)
+				v.shape = s;
 		}
 
-		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++));
-			}
-			if (target.closed)
-				target.segments.push(new Segment(target.vertices[target.vertices.length-1], target.vertices[0], target, target.segmentCounter++));
+		get vxWidth(){
+			return this._vxWidth;
 		}
 
-		/*
-		* returns the bounds without incorporating transformations involving rotation
-		*/
-		get bounds() {
-			if (!this._bounds)
-				this._updateBounds();
-			return this._bounds;
+		set vxWidth(s){
+			this._vxWidth = s;
+			for (let v of this.vertices)
+				v.width = s;
 		}
 
-		/**
-		 * 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 vxHeight(){
+			return this._vxHeight;
 		}
 
-		get x() {
-			return this.bounds.x;
+		set vxHeight(s){
+			this._vxHeight = s;
+			for (let v of this.vertices)
+				v.height = s;
 		}
 
-		get y() {
-			return this.bounds.y;
+		get vxRadius(){
+			return this._vxRadius;
 		}
 
-		get strokeColor() {
-			return this.styles["strokeColor"];
+		set vxRadius(s){
+			this._vxRadius = s;
+			for (let v of this.vertices)
+				v.radius = s;
 		}
 
-		set strokeColor(c) {
-			this.styles["strokeColor"] = c;
-		}
-
-		get strokeWidth() {
-			return this.styles["strokeWidth"];
-		}
-
-		set strokeWidth(c) {
-			this.styles["strokeWidth"] = c;
-		}
-
-		get fillColor() {
-			return this.styles["fillColor"];
-		}
-
-		set fillColor(c) {
-			this.styles["fillColor"] = c;
-		}
-
-		get strokeDash() {
-			return this.styles["strokeDash"];
-		}
-
-		set strokeDash(c) {
-			this.styles["strokeDash"] = c;
-		}
-
-		_doTranslate(dx, dy) {
-			for (let v of this.vertices) {
-				v._doTranslate(dx, dy);
-			}
-			this._updateBounds();
-		}
-
-		//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();
-		}
-
-		_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);
-		}
-
-		addVertex(x, y, i) {
-			let vertex = new Vertex(new Point(x, y), this, this.vertexCounter++);
-			this.vertices.splice(i, 0, vertex);
-			//TODO: handle segments
-		}
-
-		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];
-			}
-		}
-
-		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];
-			}
-		}
-
-		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() {
-
-		// }
-
-		// fromSVG() {
-
-		// }
-
-		get firstVertex() {
-			return this.vertices[0];
-		}
-
-		get firstSegment() {
-			return this.segments[0];
-		}
-
-		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 d3__namespace.curveLinear;
-			}
-		}
-
-		get vxShape(){
-			return this._vxShape;
-		}
-
-		set vxShape(s){
-			this._vxShape = s;
-			for (let v of this.vertices)
-				v.shape = s;
-		}
-
-		get vxWidth(){
-			return this._vxWidth;
-		}
-
-		set vxWidth(s){
-			this._vxWidth = s;
-			for (let v of this.vertices)
-				v.width = s;
-		}
-
-		get vxHeight(){
-			return this._vxHeight;
-		}
-
-		set vxHeight(s){
-			this._vxHeight = s;
-			for (let v of this.vertices)
-				v.height = s;
-		}
-
-		get vxRadius(){
-			return this._vxRadius;
-		}
-
-		set vxRadius(s){
-			this._vxRadius = s;
-			for (let v of this.vertices)
-				v.radius = s;
-		}
-
-		get vxFillColor(){
-			return this._vxFillColor;
+		get vxFillColor(){
+			return this._vxFillColor;
 		}
 
 		set vxFillColor(s){
@@ -1744,6 +1336,18 @@
 		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) {
@@ -1789,6 +1393,10 @@
 		}
 	}
 
+	function sameClass(item1, item2) {
+		return getEncodingKey(item1).split("_")[0] === getEncodingKey(item2).split("_")[0];
+	}
+
 	function getParents(items) {
 		let result = [];
 		for (let p of items) {
@@ -1930,106 +1538,532 @@
 			return this.canvas;
 		},
 
-		getContext: function() {
-	        var canvas = this.getCanvas();
-	        return canvas ? canvas.getContext('2d') : null;
-	    },
-	};
+		getContext: function() {
+	        var canvas = this.getCanvas();
+	        return canvas ? canvas.getContext('2d') : null;
+	    },
+	};
+
+	var SVGProvider = {
+		svg: undefined,
+
+		getSVG: function() {
+			if (!window)
+	            return null;
+			if (this.svg === undefined) {
+				this.svg = document.createElement('svg');
+			}
+			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};
+	}
+
+	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;
+		}
+	}
+
+	function polar2Cartesian(cx, cy, r, deg){
+		let x = r * Math.cos(degree2radian(deg)),
+			y = r * Math.sin(degree2radian(deg));
+		return [x + cx, cy - y];
+	}
+
+	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];
+	}
+
+	function degree2radian(d){
+		return d * Math.PI/180;
+	}
+
+	function radian2degree(r){
+		return r * 180 / Math.PI;
+	}
+
+	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";
+				}
+			}
+		}
+	}
+
+	class Layout {
+
+	    constructor(args){
+	        this.group = undefined;
+	    }
+
+	    run(){}
+
+	    clone(){}
+	}
+
+	class GridLayout extends Layout {
+
+		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;
+		}
+
+		_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;
+
+		}
+
+		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;
+		}
+
+		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
+			});
+		}
+
+		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);
+			}
+
+			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);
+			}
+
+			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];
+			}
+			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;
+			}
+
+			let cb = [], cellCount = numRows * numCols;
+
+			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 (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 {
+		}
+
+		run() {
+			if (this.group == undefined|| !this.group.children || this.group.children.length === 0)
+				return;
+
+			let cellBounds = this.cellBounds;
+
+			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];
+
+				let dx = gridBound.x - c.bounds.x,
+					dy = gridBound.y - c.bounds.y;
+				c._doTranslate(dx, dy);
+
+				//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);
+			}
+
+			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();
+				}
+			}
+
+			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();
+		}
+
+		//TODO: add a corresponding scene level operation, automatically relayout
+		set rowGap(g) {
+			this._rowGap = g;
+			this.run();
+			this.group.getScene()._relayoutAncestors(this.group);
+		}
+
+		get rowGap() {
+			return this._rowGap;
+		}
 
-	var SVGProvider = {
-		svg: undefined,
+		set colGap(g) {
+			this._colGap = g;
+			this.run();
+			this.group.getScene()._relayoutAncestors(this.group);
+		}
 
-		getSVG: function() {
-			if (!window)
-	            return null;
-			if (this.svg === undefined) {
-				this.svg = document.createElement('svg');
+		get colGap() {
+			return this._colGap;
+		}
+
+		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.svg;
+			this._numCols = c;
+			this._numRows = Math.ceil(this.group.children.length/c);
+			this.run();
+			this.group.getScene()._relayoutAncestors(this.group);
 		}
-	};
 
-	// export function getTextWidth(text, font) {
-	// 	let context = CanvasProvider.getContext();
-	// 	context.font = font;
-	// 	let metrics = context.measureText(text);
-	// 	return metrics.width;
-	// }
+		get numCols() {
+			if (this._numCols) {
+				return this._numCols;
+			} else if (this._numRows) {
+				return Math.ceil(this.group.children.length/this._numRows);
+			} else {
+				return 0;
+			}
+		}
 
-	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 
 	**/
@@ -2470,6 +2504,10 @@
 		_updateTuples(field, value) {
 			this._tuples = this._tuples.filter(d => d[field] == value);
 		}
+
+		get tuples() {
+			return this._tuples;
+		}
 	}
 
 	function repeatItem(scene, compnt, field, datatable, callback) {
@@ -2756,13 +2794,22 @@
 		run() {
 			if (this.group == undefined || !this.group.children || this.group.children.length === 0)
 				return;
-			if (this.group.children[0].type == "area") {
-				this._stackAreas();
-			} else if (this.group.children[0].type == ItemType.Arc || this.group.children[0].type == ItemType.Pie) {
-				this._stackArcs();	
-			} else {
-				this._stackRects();	
-			} 
+			let leafMark = getLeafMarks(this.group)[0];
+			switch (leafMark.type) {
+				case ItemType.Area:
+					this._stackAreas();
+					break;
+				case ItemType.Arc:
+				case ItemType.Pie:
+					if (leafMark.parent === this.group)
+						this._stackArcs();
+					break;
+				case ItemType.Rect:
+				case ItemType.Image:
+				case ItemType.Circle:
+					this._stackRects();
+					break;
+			}
 		}
 
 		set vertCellAlignment(v) {
@@ -2818,6 +2865,8 @@
 		switch (compnt.type) {
 			case ItemType.Line:
 				return _doLineDivide(scene, compnt, f, datatable);
+			case ItemType.Path:
+				return _doPathDivide(scene, compnt, f, datatable);
 			case ItemType.Circle:
 				return _doCircleDivide(scene, compnt, orientation, f, datatable);
 			case ItemType.Rect:
@@ -2892,6 +2941,57 @@
 		return toReturn;
 	}
 
+	function _doPathDivide(scene, compnt, field, datatable) {
+		let peers = getPeers(compnt, scene);
+		let toReturn;
+		let ds = datatable.getFieldSummary(field).unique.map(d => new DataScope(datatable).cross(field, d));
+
+		let line2Scopes = {}, max = 0;
+		for (let p of peers) {
+			let scopes = ds;
+			if (p.dataScope) {
+				scopes = ds.map(d => d.merge(p.dataScope));
+				scopes = scopes.filter(d => !d.isEmpty());
+			}
+			if (scopes.length > max)
+				max = scopes.length;
+			line2Scopes[p.id] = scopes;
+		}
+		let collClassId;
+		for (let p of peers) {
+			let coll = scene.collection();
+			if (collClassId == undefined)
+				collClassId = coll.id;
+			coll.classId = collClassId;
+			coll.dataScope = p.dataScope;
+
+			let parent = p.parent;
+			//let index = parent.children.indexOf(p) - 1;
+			parent.addChild(coll);
+
+			let scopes = line2Scopes[p.id];
+			let x1 = p.bounds.left, y1 = p.bounds.top, x2 = p.bounds.right, y2 = p.bounds.bottom;
+
+			for (let i = 0; i < scopes.length; i++) {
+				let c = scene.mark("line", {x1: x1 + (x2 - x1) * i /max, x2: x1 + (x2 - x1) * (i + 1)/max, y1: y1 + (y2 - y1) * i /max, y2: y1 + (y2 - y1) * (i + 1)/max});
+				c.classId = compnt.id;
+				c.dataScope = scopes[i];
+				coll.addChild(c);
+			}
+
+			parent.removeChild(p);
+
+			if (p == compnt)
+				toReturn = coll;
+		}
+
+		let f = compnt.firstVertex.dataScope.fields[0];	
+		scene.densify(toReturn.firstChild, datatable, {field: f});
+		
+
+		return toReturn;
+	}
+
 
 
 	function _doRectDivide(scene, compnt, o, field, datatable) {
@@ -3916,6 +4016,7 @@
 						this.scale = createScale("time");
 						this.scale.isFlipped = this._flipScale;
 						range = [0, extent];
+						this.scale._baseItem = this.anyItem;
 					}
 					break;
 
@@ -3936,6 +4037,7 @@
 						this.scale = createScale("point");
 						this.scale.isFlipped = this._flipScale;
 						range = [0, extent];
+						this.scale._baseItem = this.anyItem;
 					}
 					break;
 
@@ -3958,8 +4060,11 @@
 						this.scale = createScale(this.scaleType);
 						this.scale.isFlipped = this._flipScale;
 						this.scale.includeZero = this._includeZero;
-						//domain = this._includeZero ? [0, max] : [min, max];
 						range = [0, extent];
+						//remember the item that was used to first create this scale,
+						//so that when the scale is reused later, we can refer to the base item
+						//to get absoluate positions
+						this.scale._baseItem = this.anyItem;
 					}
 					if (domain[0] == domain[1])
 						domain[1] = domain[0] * 1.1;
@@ -3980,9 +4085,26 @@
 			for (let enc of this.scale.encodings)
 				items = items.concat(enc.items);
 			if (channel == "x") {
-				let layout = getClosestLayout(this.anyItem, "grid");
+				//let layout = getClosestLayout(this.anyItem, "grid");
 				//let layout = getTopLevelCollection(this.anyItem) ? getTopLevelCollection(this.anyItem).layout : getClosestLayout(this.anyItem);
-				if (layout && layout.type == LayoutType.Grid){
+				let layout = getClosestLayout(this.anyItem, "grid"), baseLayout = this.scale._baseItem ? getClosestLayout(this.scale._baseItem, "grid"): undefined;
+				if (this.scale._baseItem && !sameClass(this.anyItem, this.scale._baseItem) && layout && baseLayout && layout.numRows === baseLayout.numRows && layout.numCols === baseLayout.numCols) {
+					let tx = baseLayout.group.bounds.left - layout.group.bounds.left,
+						ty = 0;
+					layout.group.getScene().translate(layout.group, tx, ty);
+					layout._colGap = baseLayout.colGap;
+					let cellIndices = this.items.map(d => getCellIndexInLayout(d)),
+						baseCellBounds = baseLayout.cellBounds;
+					for (let i = 0; i < this.items.length; i++) {
+						let itm = this.items[i];
+						let dx = baseCellBounds[cellIndices[i]].left + this.scale.map(this.data[i]) - itm[channel],
+							dy = 0;
+						itm._doTranslate(dx, dy);
+						if (itm.type == "vertex" || itm.type == "segment")
+							itm.parent._updateBounds();
+					}
+					this.anyItem.parent.getScene()._updateAncestorBounds(this.anyItem, this.items);
+				} else if (layout && layout.type == LayoutType.Grid){
 					//do not use scale.offset, use cell bounds
 					for (let i = 0; i < this.items.length; i++) {
 						let itm = this.items[i], itmCb = getCellBoundsInLayout(itm);
@@ -4031,9 +4153,27 @@
 				}
 				
 			} else {//channel y
-				let layout = getClosestLayout(this.anyItem, "grid");
 				//let layout = getTopLevelCollection(this.anyItem) ? getTopLevelCollection(this.anyItem).layout : getClosestLayout(this.anyItem);
-				if (layout && layout.type == LayoutType.Grid){
+				let layout = getClosestLayout(this.anyItem, "grid"), baseLayout = this.scale._baseItem ? getClosestLayout(this.scale._baseItem, "grid"): undefined;
+				if (this.scale._baseItem && !sameClass(this.anyItem, this.scale._baseItem) && layout && baseLayout && layout.numRows === baseLayout.numRows && layout.numCols === baseLayout.numCols) {
+				//if (this.scale._baseItem && !sameClass(this.anyItem, this.scale._baseItem) && baseLayout && baseLayout.numRows === 1) {
+					//let peers = getPeers(this.scale._baseItem, this.scale._baseItem.parent.getScene());
+					let tx = 0,
+						ty = baseLayout.group.bounds.top - layout.group.bounds.top;
+					layout.group.getScene().translate(layout.group, tx, ty);
+					layout._rowGap = baseLayout.rowGap;
+					let cellIndices = this.items.map(d => getCellIndexInLayout(d)),
+						baseCellBounds = baseLayout.cellBounds;
+					for (let i = 0; i < this.items.length; i++) {
+						let itm = this.items[i];
+						let dx = 0,
+							dy = baseCellBounds[cellIndices[i]].bottom - this.scale.map(this.data[i]) - itm[channel];
+						itm._doTranslate(dx, dy);
+						if (itm.type == "vertex" || itm.type == "segment")
+							itm.parent._updateBounds();
+					}
+					this.anyItem.parent.getScene()._updateAncestorBounds(this.anyItem, this.items);
+				} else if (layout && layout.type == LayoutType.Grid){
 					let cellBounds = this.items.map(d => getCellBoundsInLayout(d));
 					for (let i = 0; i < this.items.length; i++) {
 						let itm = this.items[i];
@@ -6060,6 +6200,8 @@
 	    matches(item) {}
 
 	    reposition() {
+	        if (this instanceof EncodingAxis)
+	            this._determineAxisFlip();
 	        this._positionPath();
 	        this._positionTicks();
 	        this._positionLabels();
@@ -6587,6 +6729,7 @@
 	        this._orientation = "orientation" in args ? args["orientation"] : 
 	                                this._channel === "x" || this._channel == "width" ? "bottom" : "left";
 	        this._posArg = this._channel == "x" || this._channel == "width"? args["pathY"] : args["pathX"]; 
+	        this._padding = [ItemType.Line, ItemType.Path].indexOf(items[0].type) >= 0 ? 10 : 0;
 
 	        this._item = items[0];
 	        this._items = items;
@@ -6738,22 +6881,24 @@
 	            let num = this._channel == "x" ? this._mlayout.numRows : this._mlayout.numCols;
 	            if (this._channel == "x") {
 	                let left = cb[0].left, numCols = this._mlayout.numCols;
+	                let padding = this._orientation === "bottom" ? this._padding : - this._padding;
 	                for (let r = 0; r < num; r++){
 	                    this._rules.children[r]._setVertices([
-	                        [left, this._posArg ? cb[r * numCols][this._orientation] + this._posArg - cb[0][this._orientation] : cb[r * numCols][this._orientation] ],
-	                        [left + cb[0].width * numCols + this._mlayout.colGap * (numCols - 1), this._posArg ? cb[r * numCols][this._orientation] + this._posArg - cb[0][this._orientation] : cb[r * numCols][this._orientation]]
+	                        [left, this._posArg ? cb[r * numCols][this._orientation] + this._posArg - cb[0][this._orientation] : cb[r * numCols][this._orientation] + padding],
+	                        [left + cb[0].width * numCols + this._mlayout.colGap * (numCols - 1), this._posArg ? cb[r * numCols][this._orientation] + this._posArg - cb[0][this._orientation] : cb[r * numCols][this._orientation] + padding]
 	                    ]);
 	                }
 	            } else {
 	                let top = cb[0].top, numRows = this._mlayout.numRows;
+	                let padding = this._orientation === "left" ? this._padding : - this._padding;
 	                for (let c = 0; c < num; c++){
 	                    // this._rules.children[c]._setVertices([
 	                    //     [this._posArg ? cb[c * numRows][this._orientation] + this._posArg - cb[0][this._orientation] : cb[c * numRows][this._orientation], top ],
 	                    //     [this._posArg ? cb[c * numRows][this._orientation] + this._posArg - cb[0][this._orientation] : cb[c * numRows][this._orientation], top + cb[0].height * numRows + this._mlayout.rowGap * (numRows - 1), ]
 	                    // ]);
 	                    this._rules.children[c]._setVertices([
-	                        [this._posArg ? cb[c * numRows][this._orientation] + this._posArg - cb[0][this._orientation] : this._mlayout.group.bounds[this._orientation], top ],
-	                        [this._posArg ? cb[c * numRows][this._orientation] + this._posArg - cb[0][this._orientation] : this._mlayout.group.bounds[this._orientation], top + cb[0].height * numRows + this._mlayout.rowGap * (numRows - 1)]
+	                        [this._posArg ? cb[c * numRows][this._orientation] + this._posArg - cb[0][this._orientation] : this._mlayout.group.bounds[this._orientation] - padding, top ],
+	                        [this._posArg ? cb[c * numRows][this._orientation] + this._posArg - cb[0][this._orientation] : this._mlayout.group.bounds[this._orientation] - padding, top + cb[0].height * numRows + this._mlayout.rowGap * (numRows - 1)]
 	                    ]);
 	                }
 	            }
@@ -6780,9 +6925,10 @@
 	        let cb = this._mlayout.cellBounds;
 	        if (this._channel == "x") {
 	            let dir = this._orientation == "bottom" ? 1 : -1;
+	            let padding = this._orientation === "bottom" ? this._padding : - this._padding;
 	            for (let [i, t] of this._ticks.children.entries()) {
 	                let pos = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + this._tickOffset * dir : 
-	                            cb[i][this._orientation] + this._tickOffset * dir;
+	                            cb[i][this._orientation] + this._tickOffset * dir + padding;
 	                t._setVertices([
 	                    [cb[i].x, pos],
 	                    [cb[i].x, pos + dir * this._tickSize]
@@ -6791,11 +6937,12 @@
 	            }
 	        } else if (this._channel == "y"){
 	            let dir = this._orientation == "left" ? -1 : 1;
+	            let padding = this._orientation === "left" ? this._padding : - this._padding;
 	            for (let [i, t] of this._ticks.children.entries()) {
 	                // let xPos = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + this._tickOffset * dir : 
 	                //                 cb[i][this._orientation] + this._tickOffset * dir,
 	                let xPos = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + this._tickOffset * dir : 
-	                                    this._mlayout.group.bounds[this._orientation] + this._tickOffset * dir,
+	                                    this._mlayout.group.bounds[this._orientation] + this._tickOffset * dir - padding,
 	                    yPos = this._tickAnchor == "middle" ? cb[i].y : cb[i][this._tickAnchor];
 	                t._setVertices([
 	                    [xPos, yPos],
@@ -6813,10 +6960,11 @@
 	        if (this._channel == "x") {
 	            let anchor = this._orientation == "bottom" ? ["center", "top"] : ["center", "bottom"],
 	                offset = this._orientation == "bottom" ? this._labelOffset : -this._labelOffset;
+	            let padding = this._orientation === "bottom" ? this._padding : - this._padding;
 	            for (let [i, l] of this._labels.children.entries()) {
 	                l.x = cb[i].x;
 	                l.y = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + offset : 
-	                                cb[i][this._orientation] + offset;
+	                                cb[i][this._orientation] + offset + padding;
 	                l.anchor = anchor;
 	                if (this._labelRotation){
 	                    l._rotate = [this._labelRotation, l.x, l.y];
@@ -6827,11 +6975,12 @@
 	        } else if (this._channel == "y"){
 	            let anchor = this._orientation == "left" ? ["right", "middle"] : ["left", "middle"],
 	                offset = this._orientation == "left" ? - this._labelOffset : this._labelOffset;
+	            let padding = this._orientation === "left" ? this._padding : - this._padding;
 	            for (let [i, l] of this._labels.children.entries()) {
 	                // l.x = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + offset 
 	                //             : cb[i][this._orientation] + offset;
 	                l.x = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + offset 
-	                            : this._mlayout.group.bounds[this._orientation] + offset;
+	                            : this._mlayout.group.bounds[this._orientation] + offset - padding;
 	                l.y = this._tickAnchor == "middle" ? cb[i].y : cb[i][this._tickAnchor];
 	                l.anchor = anchor;
 	                if (this._labelRotation) {
@@ -6871,7 +7020,8 @@
 	    }
 
 	    matches(item) {
-	        return getEncodingKey(this._item).split("_")[0] === getEncodingKey(item).split("_")[0];
+	        return sameClass(this._item, item);
+	        //return getEncodingKey(this._item).split("_")[0] === getEncodingKey(item).split("_")[0];
 	    }
 	}
 
@@ -6998,17 +7148,18 @@
 	                    for (let i = 0; i < uniqueVals.length; i+= Math.ceil(uniqueVals.length/10))
 	                        stops.push(uniqueVals[i]);
 	                } else {
-	                    let interval = (domain[1] - domain[0])/9;
+	                    let incr = (domain[1] - domain[0])/9;
 	                    for (let i = 0; i < 10; i++)
-	                        stops.push(domain[0] + i * interval);
-	                    let decimalPlaces = 0;
-	                    while (interval < 1) {
-	                        interval *= 10;
-	                        decimalPlaces++;
-	                    }
-	                    stops = stops.map(d => d.toFixed(decimalPlaces));
+	                        stops.push(domain[0] + i * incr);
 	                }
 	            }
+	            //determine decimal places
+	            let decimalPlaces = 0, interval = (stops[stops.length - 1] - stops[0])/stops.length;
+	            while (interval < 1) {
+	                interval *= 10;
+	                decimalPlaces++;
+	            }
+	            stops = stops.map(d => d.toFixed(decimalPlaces));
 	            if (this._orientation == Orientation.Vertical) {
 	                gradient = new LinearGradient({x1: 0, y1: 100, x2: 0, y2: 0});
 	                stops.forEach(d => {
@@ -9122,7 +9273,7 @@
 	    }
 
 	    if (layout)
-	            scene.setProperties(c.firstChild, {layout: layout});
+	        scene.setProperties(c.firstChild, {layout: layout});
 	    //return results;
 	}
 
@@ -10610,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");
 
 		}
 
@@ -10813,6 +10970,8 @@
 			
 			if (this._mapping)
 				json.mapping = this._mapping;
+			if (this._baseItem)
+				json.baseItem = this._baseItem.id;
 			return json;
 		}
 
@@ -11824,7 +11983,7 @@
 	        return scn;
 	    }
 
-	    _loadScale(s) {
+	    _loadScale(s, scn) {
 	        let scale;
 	        // if (s.type === "sequentialColor" && s.scheme) {
 	        if (s.type.indexOf("Color") > 0 && s.scheme) {
@@ -11842,6 +12001,8 @@
 	        scale._mapping = s.mapping;
 	        if ("includeZero" in s)
 	            scale.includeZero = s.includeZero;
+	        if ("baseItem" in s)
+	            scale._baseItem = scn.getItem(s.baseItem);
 	        this.scales[scale.id] = scale;
 	        //console.log(scale.domain, scale.range);
 	    }
@@ -24148,9 +24309,13 @@
 	}
 
 	function canDivide(compnt) {
-		if ([ItemType.Line, ItemType.Circle, ItemType.Rect, ItemType.Area, ItemType.Ring, ItemType.Pie].indexOf(compnt.type) < 0) {
+		if ([ItemType.Line, ItemType.Circle, ItemType.Rect, ItemType.Area, ItemType.Ring, ItemType.Pie, ItemType.Path].indexOf(compnt.type) < 0) {
 			return false;
 		} 
+
+		if (compnt.type === ItemType.Path && (compnt.closed || !compnt.firstVertex.dataScope))
+			return false;
+
 		if (!compnt.dataScope) {
 			return true;
 		} else {
@@ -24169,8 +24334,7 @@
 		} 
 		if (!compnt.dataScope) {
 			return true;
-		}
-		else {
+		} else {
 			let peers = getPeers(compnt, compnt.getScene());
 			for (let p of peers) {
 				if (p.dataScope.numTuples > 1)
@@ -24180,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;
@@ -24205,6 +24377,7 @@
 	exports.canClassify = canClassify;
 	exports.canDensify = canDensify;
 	exports.canDivide = canDivide;
+	exports.canFormGlyph = canFormGlyph;
 	exports.canRepeat = canRepeat;
 	exports.cartesianToPolar = cartesianToPolar;
 	exports.createScale = createScale;