mascot-vis 3.0.0 → 3.0.1

package/src-old/item/composite/Scene.js

@@ -1,1251 +0,0 @@
-import Group from "./Group";
-import { ItemType, Errors, LayoutType, ConstraintType, DataType, Warnings, Orientation } from "../../util/Constants";
-import { findItems, getParents, canAlign, getPeers, getEncodingKey, getClosestLayout, getPeersGroupedByParent, isPath, isGuide, isMark, ItemCounter, getAllChildren } from "../../util/ItemUtil";
-import { validateField } from "../../util/DataUtil";
-import { repeatItem, repeatNodeLink } from "../../action/Repeat";
-import { divideItem } from "../../action/Partition";
-import { densifyItem } from "../../action/Densify";
-import Mark from "../mark/Mark";
-import RectPath from "../mark/RectPath";
-import CirclePath from "../mark/CirclePath";
-import Path from "../mark/Path";
-import { bindToSize } from "../../bind/bindToSize";
-import { bindToPosition } from "../../bind/bindToPosition";
-import { bindToRadialDistance } from "../../bind/bindToRadialDistance";
-import { bindToColor } from "../../bind/bindToColor";
-import { bindToAngle } from "../../bind/bindToAngle"
-import { bindToAreaMark } from "../../bind/bindToAreaMark";
-import { bindToText } from "../../bind/bindToText";
-import Encoding from "../../core/Encoding";
-import DataTable from "../../data/DataTable";
-import EncodingAxis from "../refs/EncodingAxis";
-import LayoutAxis from "../refs/LayoutAxis";
-import Legend from "../refs/Legend";
-import Glyph from "./Glyph";
-import AreaPath from "../mark/AreaPath";
-import RingPath from "../mark/RingPath";
-import PolygonPath from "../mark/PolygonPath";
-import AlignConstraint from "../../constraint/AlignConstraint";
-import AffixConstraint from "../../constraint/AffixConstraint";
-import PointText from "../mark/PointText";
-import Gridlines from "../refs/Gridlines";
-import Collection from "./Collection";
-import DataScope from "../../data/DataScope";
-import ArcPath from "../mark/ArcPath";
-import Image from "../mark/Image";
-import LinkPath from "../mark/LinkPath";
-import { bindToLink } from "../../bind/bindToLink";
-import SceneValidator from "../../core/SceneValidator";
-import { repopulateItem } from "../../action/Repopulate";
-import { bindToThickness } from "../../bind/bindToThickness";
-import Tree from "../../data/Tree";
-import { stratifyItem } from "../../action/Stratify";
-import { classifiable, classifyCollectionChildren } from "../../action/Classify";
-
-
-export default class Scene extends Group {
-
-	constructor(args) {
-		super();
-		if (args && args.fillColor) {
-			this.fillColor = args.fillColor;
-		}
-		this.type = ItemType.Scene;
-		this._id = this.type + ItemCounter[this.type]++;
-		//this.cellAlign = {};
-		this._encodings = {};
-		this.constraints = {};
-		this._itemMap = {};
-		this._interactions = [];
-		this._interactionsObj = {};
-	}
-
-	clear() {
-		this.removeAll();
-		this._encodings = {};
-		this.constraints = {};
-		this._itemMap = {};
-	}
-
-	group(children) {
-		let g = new Group();
-		g.classId = g.id;
-		this.addChild(g);
-		if (children && children.length > 0)
-			for (let c of children)
-				g.addChild(c);
-		this._itemMap[g.id] = g;
-		return g;
-	}
-
-	mark(type, param) {
-		let args = param === undefined ? {} : param;
-		let m = null;
-		args.type = type;
-		switch (type) {
-			case ItemType.Rect: {
-				if (!("top" in args))
-					args.top = 0;
-				if (!("left" in args))
-					args.left = 0;
-				if (!("width" in args))
-					args.width = 100;
-				if (!("height" in args))
-					args.height = 100;
-				let top = args["top"], left = args["left"], width = args["width"], height = args["height"];
-				args.vertices = [[left, top], [left + width, top], [left + width, top + height], [left, top + height]];
-				delete args["top"];
-				delete args["left"];
-				delete args["width"];
-				delete args["height"];
-				if (!("fillColor" in args)) {
-					args.fillColor = "none";
-				}
-				m = new RectPath(args);
-				break;
-			}
-			case ItemType.Area:
-				if (args !== undefined && "x1" in args && "y1" in args && "x2" in args && "y2" in args) {
-					let x1 = args["x1"], y1 = args["y1"], x2 = args["x2"], y2 = args["y2"];
-					// args.vertices contains all the vertices on two boundary lines
-					args.vertices = [[x1, y1], [x2, y1], [x2, y2], [x1, y2]];
-					delete args["x1"];
-					delete args["y1"];
-					delete args["x2"];
-					delete args["y2"];
-				}
-				m = new AreaPath(args);
-				break;
-			case ItemType.Line: {
-				//it is possible to create a skeleton line without x1, y1, x2, y2 args, e.g. when duplicating
-				if (args !== undefined && "x1" in args && "y1" in args && "x2" in args && "y2" in args) {
-					let x1 = args["x1"], y1 = args["y1"], x2 = args["x2"], y2 = args["y2"];
-					args.vertices = [[x1, y1], [x2, y2]];
-					//remove x1, y1, x2, y2 and compute these values at rendering time 
-					//so that we don't have to keep track of them when the line is transformed
-					delete args["x1"];
-					delete args["y1"];
-					delete args["x2"];
-					delete args["y2"];
-				}
-				m = new Path(args);
-				m.type = ItemType.Line;
-				break;
-			}
-			case ItemType.Path:
-				m = new Path(args);
-				break;
-			case ItemType.Circle:
-				m = new CirclePath(args);
-				break;
-			case ItemType.Ring:
-				m = new RingPath(args);
-				break;
-			case ItemType.Arc:
-			case ItemType.Pie:
-				m = new ArcPath(args);
-				break;
-			case ItemType.Polygon:
-				m = new PolygonPath(args);
-				break;
-			// case ItemType.Pie:
-			// 	args.innerRadius = 0;
-			// 	if ("radius" in args) {
-			// 		args.outerRadius = args.radius;
-			// 	}
-			// 	m = new ArcPath(args);
-			// 	break;
-			case "text":
-			case ItemType.PointText:
-				if (!("anchor" in args))
-					args["anchor"] = ["center", "middle"];
-				m = new PointText(args);
-				break;
-			case ItemType.Image:
-				m = new Image(args);
-				break;
-			case ItemType.Link:
-				m = new LinkPath(args);
-				break;
-			default:
-				break;
-		}
-		if (m !== null) {
-			if ("id" in args)
-				m.id = args.id;
-			else
-				m.id = m.type + ItemCounter[m.type]++;
-			m.classId = m.id;
-			this.addChild(m);
-			this._itemMap[m.id] = m;
-		}
-		return m;
-	}
-
-	glyph(...args) {
-		let g = new Glyph(args);
-		g.classId = g.id;
-		this.addChild(g);
-		this._itemMap[g.id] = g;
-		return g;
-	}
-
-	collection() {
-		let c = new Collection();
-		this.addChild(c);
-		this._itemMap[c.id] = c;
-		return c;
-	}
-
-	attach(item, table) {
-		item.dataScope = new DataScope(table);
-	}
-
-	repeat(item, data, param) {
-		if (!item || data === undefined) {
-			throw Errors.INCOMPLETE_REPEAT_INFO;
-		}
-
-		if (data.nodeTable && data.linkTable) {
-			if (!Array.isArray(item) || item.length !== 2)
-				throw Errors.REPEAT_NODE_LINK;
-			return repeatNodeLink(this, item[0], item[1], data);
-		} else {
-			let args = param ? param : {},
-				field = args["field"] ? args["field"] : DataTable.RowID,
-				callback = args["callback"];
-
-			validateField(field, data);
-
-			let collection = repeatItem(this, item, field, data, callback);
-			if (args.layout)
-				collection.layout = args.layout;
-			return collection;
-		}
-	}
-
-	repopulate(item, table, param) {
-		if (!item || table === undefined) {
-			throw Errors.INCOMPLETE_REPEAT_INFO;
-		}
-
-		let args = param ? param : {},
-			field = args["field"] ? args["field"] : DataTable.RowID;
-
-		validateField(field, table);
-		repopulateItem(this, item, field, table);
-	}
-
-	densify(item, table, param) {
-		if (!item || table === undefined) {
-			throw Errors.INCOMPLETE_PARTITION_INFO;
-		}
-
-		let args = param ? param : {},
-			orientation = args["orientation"],
-			field = args["field"] ? args["field"] : DataTable.RowID,
-			//following two are for circle densification
-			startAngle = "startAngle" in args ? args["startAngle"] : 90,
-			direction = 'direction' in args ? args["direction"] : "clockwise",
-			callback = args["callback"];
-
-		validateField(field, table);
-
-		let newItem = densifyItem(this, item, orientation, field, table, callback, startAngle, direction);
-		SceneValidator.markDensified(item, newItem);
-		return newItem;
-	}
-
-	stratify(item, data, param) {
-		if (!(data instanceof Tree)) {
-			throw Errors.STRATIFY_WITHOUT_TREE;
-		}
-
-		if (item.type !== ItemType.Circle && item.type !== ItemType.Rect) {
-			throw Errors.STRATIFY_WRONG_ITEM;
-		}
-
-		let args = param ? param : {},
-			direction = args["direction"],
-			size = args["size"];
-
-		let collection = stratifyItem(this, item, direction, size, data);
-		//SceneValidator.markDivided(item, collection);
-		return collection;
-	}
-
-	divide(item, data, param) {
-		if (!item || data == undefined) {
-			throw Errors.INCOMPLETE_PARTITION_INFO;
-		}
-
-		let args = param ? param : {},
-			orientation = args["orientation"],
-			field = args["field"] ? args["field"] : DataTable.RowID,
-			callback = args["callback"];
-
-		validateField(field, data);
-
-		let collection = divideItem(this, item, orientation, field, data, callback);
-		if (args.layout)
-			collection.layout = args.layout;
-
-		SceneValidator.markDivided(item, collection);
-		return collection;
-	}
-
-	classify(item, param) {
-		if (!classifiable(item)) {
-			throw Errors.CANNOT_CLASSIFY + item.type;
-		}
-
-		let args = param ? param : {},
-			field = args["field"] ? args["field"] : DataTable.RowID,
-			dt = item.firstChild.dataScope.dataTable,
-			layout = args.layout;
-		validateField(field, dt);
-
-		classifyCollectionChildren(this, item, field, layout);
-
-		//SceneValidator.markDivided(item, collection);
-		return item;
-	}
-
-	_validateEncodeArgs(item, args) {
-		if (!item || !("channel" in args) || !("field" in args)) {
-			throw Errors.INCOMPLETE_BINDING_INFO;
-		}
-
-		let field = args["field"];
-
-		//check if can apply encoding
-		if (item.type == "vertex" || item.type == "segment") {
-			if (!item.parent.dataScope && !item.dataScope) {
-				throw Errors.BIND_WITHOUT_DATASCOPE;
-			}
-		} else if (!item.dataScope) {
-			throw Errors.BIND_WITHOUT_DATASCOPE;
-		}
-
-
-		let datatable = args.table ? args.table : item.dataScope ? item.dataScope._dt : item.parent.dataScope._dt;
-
-		let ft = datatable.getFieldType(field);
-		if (args.channel === "fillGradient" && [DataType.String, DataType.Boolean, DataType.Date].indexOf(ft) >= 0)
-			throw Errors.UNSUPPORTED_FIELDTYPE + args.channel + ": " + ft;
-
-		validateField(field, datatable);
-		//todo: validate channel
-	}
-
-	//supports encoding one single item or an array of items (which will use the same scale)
-	encode(itm, args) {
-		let arr = Array.isArray(itm) ? itm : [itm];
-		let encs = [], scale;
-		for (let item of arr) {
-			let items;
-			if ([ItemType.Pie, ItemType.Arc].indexOf(itm.type) >= 0 && args.channel === "angle") {
-				let parent = itm.parent;
-				if (parent.type === ItemType.Collection && parent.layout && parent.layout.orientation === Orientation.Angular) {
-					encs.push(this._encodeWithinCollection(item, args));
-					continue;
-				}
-			}
-			this._validateEncodeArgs(item, args);
-			if (item.type == "vertex" && item.parent.type == ItemType.Area) {
-				let areas = getPeers(item.parent, this);
-				items = [];
-				let firstHalf = item.parent.vertices.indexOf(item) < item.parent.vertices.length / 2;
-				for (let area of areas) {
-					items = firstHalf ? items.concat(area.vertices.slice(0, area.vertices.length / 2)) : items.concat(area.vertices.slice(area.vertices.length / 2));
-				}
-			} else {
-				items = getPeers(item, this);
-			}
-			if (items.length === 1 && items[0].type === ItemType.Area && (args.channel === "x" || args.channel === "y")) {
-				console.warn("Only 1 " + item.type + " found, cannot encode " + args.field);
-				return;
-			}
-			if (!args.scale && scale) {
-				args.scale = scale;
-			}
-			let enc = this._doEncode(items, args);
-			if (!scale)
-				scale = enc.scale;
-			encs.push(enc);
-		}
-
-		return encs.length > 1 ? encs : encs[0];
-	}
-
-	_doEncode(items, args) {
-		let item = items[0],
-			channel = args["channel"],
-			field = args["field"];
-
-		if (!("datatable" in args))
-			args.datatable = item.dataScope ? item.dataScope.dataTable : item.parent.dataScope.dataTable;
-		if (!("aggregator" in args))
-			args.aggregator = "mean";
-		if (!("flipScale" in args))
-			args.flipScale = false;
-		if (!("includeZero" in args))
-			args.includeZero = false;
-		if (!("scaleType" in args))
-			args.scaleType = "linear";
-
-		let encoding = new Encoding(items, this, channel, field, args);
-		switch (channel) {
-			case "width":
-			case "height":
-			case "radius":
-			case "outerRadius":
-			case "innerRadius":
-			case "area":
-			case "fontSize":
-				if (item.type == ItemType.Area)
-					bindToAreaMark(encoding);
-				else
-					bindToSize(encoding);
-				break;
-			case "strokeWidth":
-				if (item.type == ItemType.Link)
-					bindToLink(encoding);
-				else
-					bindToSize(encoding);
-				break;
-			case "x":
-			case "y":
-				bindToPosition(encoding);
-				// if (item.type == ItemType.Area)
-				// 	bindToAreaMark(encoding);
-				// else
-				// 	bindToPosition(encoding);
-				break;
-			case "fillColor":
-			case "strokeColor":
-				bindToColor(encoding);
-				break;
-			case "fillGradient":
-				if (item.type === ItemType.Area)
-					bindToAreaMark(encoding);
-				break;
-			case "angle":
-				bindToAngle(encoding);
-				break;
-			case "text":
-				bindToText(encoding);
-				break;
-			case "radialDistance":
-				// encoding.x = item.parent.x;
-				// encoding.y = item.parent.y;
-				// encoding.radius = item.parent.radius;
-				bindToRadialDistance(encoding);
-				break;
-			case "thickness":
-				bindToThickness(encoding);
-				break;
-			default:
-				break;
-		}
-
-		if (!("_remember" in args) || args._remember == true)
-			this._registerBinding(encoding);
-
-		if (channel.indexOf("Color") < 0)
-			this._updateAncestorBounds(item, encoding.items);
-
-		return encoding;
-	}
-
-	_encodeWithinCollection(item, args) {
-		this._validateEncodeArgs(item, args);
-		let peersByGroup = getPeersGroupedByParent(item, this);
-		let encs = [];
-		for (let g of peersByGroup) {
-			let enc = this._doEncode(g, args);
-			encs.push(enc);
-		}
-		return encs;
-	}
-
-	getPeers(item) {
-		return getPeers(item, this);
-	}
-
-	find(predicates) {
-		return findItems(this, predicates);
-	}
-
-	align(items, direction) {
-		//TODO: check the existing constraints and encodings and see if there's any conflict
-		//if so, do nothing and return false
-		if (!canAlign(items, direction, this)) return false;
-		let c = new AlignConstraint(items, direction);
-		if (c.id in this.constraints) {
-			console.warn('constraint has been added');
-			return false;
-		}
-		this.constraints[c.id] = c;
-		c.apply();
-		this._updateAncestorBounds(items[0]);
-	}
-
-	removeAllConstraints() {
-		this.constraints = {};
-	}
-
-	removeConstraint(c) {
-		delete this.constraints[c.id];
-	}
-
-	getRelatedConstraints(items) {
-		let cstrs = [];
-		for (let cid in this.constraints) {
-			let c = this.constraints[cid];
-			switch (c.type) {
-				case ConstraintType.Align:
-					if (c._itemIds === items.map(d => d.classId).sort().join("_"))
-						cstrs.push(c);
-					break;
-				case ConstraintType.Affix:
-					break;
-				default:
-					break;
-			}
-		}
-		return cstrs;
-	}
-
-	// alignInCell(item, direction) {
-	// 	//TODO replace grid.vertCellAlignment and grid.horzCellAlignment
-	// }
-
-	affix(item, baseItem, channel, param) {
-		let args = param ? param : {},
-			offset = "offset" in args ? args.offset : 0,
-			itemAnchor = "itemAnchor" in args ? args.itemAnchor : (channel == "x" || channel == "angle") ? "center" : "middle",
-			baseAnchor = "baseAnchor" in args ? args.baseAnchor : (channel == "x" || channel == "angle") ? "center" : "middle";
-		let c = new AffixConstraint(item, baseItem, this, channel, itemAnchor, baseAnchor, offset);
-		if (c.id in this.constraints) {
-			//TODO: throw warning the constraint has been added, return false;
-		}
-		this.constraints[c.id] = c;
-		c.apply();
-	}
-
-	//arguments include a channel (x, y, width, height for now)
-	//optional arguments include orientation, x-coordinate, y-coordinate, tickFormat, strokeColor, 
-	axis(channel, field, params) {
-		//need to figure out if item has the corresponding encoding, or if item position is determined by layout
-		let args = params ? params : {}, enc = args.item ? this.getEncodingByItem(args.item, channel) : this.getEncodingByField(field, channel);
-		if (enc && enc.field === field) {
-			if (enc.datatable.getFieldType(field) === DataType.Date && !("labelFormat" in args)) {
-				args.labelFormat = "%m/%d/%y";
-			}
-			if (enc.channel === "width") {
-				let existingChannels = this.children.filter(d => d.type === ItemType.Axis).map(d => d.channel);
-				if (!("orientation" in args))
-					args.orientation = existingChannels.indexOf("x") >= 0 ? "top" : "bottom";
-			} else if (enc.channel === "height") {
-				let existingChannels = this.children.filter(d => d.type === ItemType.Axis).map(d => d.channel);
-				if (!("orientation" in args))
-					args.orientation = existingChannels.indexOf("y") >= 0 ? "right" : "left";
-			}
-			let axis = new EncodingAxis(enc, args.item ? args.item : enc.anyItem, args);
-			if ("tickValues" in args) {
-				axis.tickValues = args["tickValues"];
-				axis.labelValues = args["tickValues"];
-			} else {
-				axis.tickValues = enc._inferTickValues();
-				axis.labelValues = enc._inferTickValues();
-			}
-			//TODO: need to remove axis when encoding changes or axis is removed
-			enc._axes.push(axis);
-
-			this.addChildAt(axis, 0);
-			this._itemMap[axis.id] = axis;
-			this._updateBounds();
-			return axis;
-		}
-
-		//TODO: find out item from the field
-		let item = args.item ? args.item : findItems(this, [{ "field": field }])[0];
-		if (item === undefined) {
-			console.warn(Warnings.INCORRECT_AXIS_INFO + field);
-			return;
-		}
-		let layout = getClosestLayout(item);
-		if (!layout || (layout.type !== LayoutType.Grid && layout.type !== LayoutType.Stack)) return;
-
-		if (layout && (channel == "x" || channel == "y")) {
-			let group = layout.group,
-				groups = getPeers(group, this);
-			let axis, classId;
-			//TODO: think about how to specify if mutliple axes need to be created properly
-			// if (args.item)
-			// 	groups = [args.item.parent];
-			for (let c of groups) {
-				let itm = findItems(c, [{ "field": field }])[0];
-				let items = getPeers(itm, c);
-				if (itm.dataScope.dataTable.getFieldType(field) === DataType.Date && !("labelFormat" in args)) {
-					args.labelFormat = "%m/%d/%y";
-				}
-				axis = new LayoutAxis(items, c.layout, channel, field, args);
-				if (classId == undefined)
-					classId = axis.id;
-				axis.classId = classId;
-				this.addChildAt(axis, 0);
-				this._itemMap[axis.id] = axis;
-				// break;
-			}
-			this._updateBounds();
-			return axis;
-		} else {
-			console.warn(Warnings.INCORRECT_AXIS_INFO + field);
-		}
-	}
-
-	getRelatedAxes(item) {
-		let axes = [];
-		if (isGuide(item))
-			return axes;
-		for (let c of this.children) {
-			if (c.type !== ItemType.Axis) continue;
-			if (c.matches(item)) {
-				axes.push(c);
-				continue;
-			}
-			//handle layout axis for small multiples
-			let p = c._item, found = false;
-			while (p.children && p.children.length > 0) {
-				for (let ic of p.children) {
-					if (ic.classId === getEncodingKey(item).split("_")[0]) {
-						found = true;
-						axes.push(c);
-						break;
-					}
-				}
-				if (found) break;
-				else p = p.children[0];
-			}
-
-			//handle axis if the updated item is a group/collection
-			let allChildren = getAllChildren(item);
-			let map = {};
-			for (let i of allChildren) {
-				if (i.classId in map) continue;
-				map[i.classId] = i;
-			}
-			let toCheck = Object.values(map);
-			for (let i of toCheck) {
-				if (c.matches(i)) {
-					axes.push(c);
-					break;
-				}
-			}
-			// while (p.children && p.children.length > 0) {
-			// 	for (let ic of p.children) {
-			// 		if (c.matches(ic)) {
-			// 			found = true;
-			// 			axes.push(c);
-			// 			break;
-			// 		}
-			// 	}
-			// 	if (found) break;
-			// 	else p = p.children[0];
-			// }
-		}
-		return axes;
-	}
-
-	removeItem(itm) {
-		if (!isGuide(itm)) {
-			let encodings = this.getRelatedEncodings(itm);
-			for (let enc of encodings) {
-				this.removeEncoding(enc);
-			}
-			//TODO: remove relevant graphical constraints
-			let axes = this.getRelatedAxes(itm);
-			for (let a of axes)
-				this.removeItem(a);
-			for (let g of this.getRelatedGridlines(itm))
-				this.removeItem(g);
-		}
-		delete this._itemMap[itm.id];
-		this.removeChild(itm);
-		this._updateBounds();
-	}
-
-	//this is used to handle item deletion, assuming that item's parent is scene
-	getRelatedEncodings(item) {
-		let encodingKeys = [];
-		let itm = item;
-		while (itm) {
-			encodingKeys.push(getEncodingKey(itm));
-			if (itm.type == ItemType.Collection) {
-				itm = itm.firstChild;
-			} else if (itm.type == ItemType.Glyph) {
-				for (let c of itm.children) {
-					encodingKeys.push(getEncodingKey(c));
-				}
-				itm = undefined;
-			} else {
-				itm = undefined;
-			}
-		}
-		let keys = Object.keys(this._encodings), encodings = [];
-		for (let k of keys) {
-			let itemKey = k.split("_")[0];
-			if (encodingKeys.indexOf(itemKey) >= 0) {
-				for (let channel in this._encodings[k])
-					encodings.push(this._encodings[k][channel]);
-			}
-		}
-		return encodings;
-	}
-
-	removeAllEncodings() {
-		this._encodings = {};
-		this.removeAllItemsByType(ItemType.Axis);
-		this.removeAllItemsByType(ItemType.Legend);
-		this.removeAllItemsByType(ItemType.Gridlines);
-	}
-
-	removeEncoding(enc) {
-		let key = getEncodingKey(enc.anyItem);
-		delete this._encodings[key][enc.channel];
-		if (Object.keys(this._encodings[key]).length === 0)
-			delete this._encodings[key];
-		let toRemove = [];
-		for (let c of this.children) {
-			if (isGuide(c) && c.encoding && c.encoding === enc) {
-				toRemove.push(c);
-			}
-		}
-		for (let a of toRemove) {
-			this.removeItem(a);
-		}
-		this._updateBounds();
-	}
-
-	removeAllItemsByType(type) {
-		let toRemove = [];
-		for (let a of this.children) {
-			if (a.type === type) {
-				toRemove.push(a);
-			}
-		}
-		for (let i of toRemove)
-			this.removeItem(i);
-		this._updateBounds();
-	}
-
-	reCreateRelatedAxes(item) {
-		let axes = this.getRelatedAxes(item);
-		let layoutAxisClassIds = [];
-		axes.forEach(a => {
-			let args = a.toJSON().args;
-			if (args.item)
-				args.item = this.getItem(args.item);
-			delete args["tickValues"];
-			delete args["labelValues"];
-			this.removeItem(a);
-			if (a instanceof LayoutAxis) {
-				if (layoutAxisClassIds.indexOf(a.classId) < 0) {
-					this.axis(a.channel, a.field, args);
-					layoutAxisClassIds.push(a.classId);
-				}
-			} else {
-				this.axis(a.channel, a.field, args);
-			}
-			//toCreate.push({channel: a.channel, field: a.field, args: a.args});
-		});
-		this._updateBounds();
-	}
-
-	reCreateRelatedLegends(item) {
-		let lgds = this.getRelatedLegends(item);
-		lgds.forEach(a => {
-			let args = a.toJSON().args;
-			if (args.item)
-				args.item = this.getItem(args.item);
-			this.removeItem(a);
-			this.legend(a.channel, a.field, args);
-		});
-		this._updateBounds();
-	}
-
-	legend(channel, field, param) {
-		let args = param ? param : {};
-		let enc = this.getEncodingByField(field, channel);
-		if (!enc)
-			throw Errors.INCORRECT_LEGEND_INFO + field;
-
-		if (!("x" in args))
-			args["x"] = 100;
-		if (!("y" in args))
-			args["y"] = 100;
-		let legend = new Legend(enc, args);
-		this.addChild(legend);
-		this._itemMap[legend.id] = legend;
-		this._updateBounds();
-		return legend;
-	}
-
-	gridlines(channel, field, params) {
-		let enc = this.getEncodingByField(field, channel), args = params ? params : {};
-		if (!enc) return false;
-		let gl = new Gridlines(enc, args.item ? args.item : enc.anyItem, args);
-
-		if ("values" in args) {
-			gl.values = args["values"];
-		} else {
-			gl.values = enc._inferTickValues();
-		}
-
-		this.addChildAt(gl, 0);
-		this._itemMap[gl.id] = gl;
-		this._updateBounds();
-		return gl;
-	}
-
-	getRelatedLegends(item) {
-		let lg = [];
-		if (isGuide(item)) return lg;
-		for (let c of this.children) {
-			if (c.type !== ItemType.Legend) continue;
-			if (c.matches(item)) {
-				lg.push(c);
-				continue;
-			}
-		}
-		return lg;
-	}
-
-	getRelatedGridlines(item) {
-		let gl = [];
-		if (isGuide(item))
-			return gl;
-		for (let c of this.children) {
-			if (c.type !== ItemType.Gridlines) continue;
-			if (c.matches(item)) {
-				gl.push(c);
-				continue;
-			}
-			//handle layout axis for small multiples
-			let p = c._item, found = false;
-			while (p.children && p.children.length > 0) {
-				for (let ic of p.children) {
-					if (ic.classId === item.classId) {
-						found = true;
-						gl.push(c);
-						break;
-					}
-				}
-				if (found) break;
-				else p = p.children[0];
-			}
-
-			//handle axis if the updated item is a group/collection
-			let allChildren = getAllChildren(item);
-			let map = {};
-			for (let i of allChildren) {
-				if (i.classId in map) continue;
-				map[i.classId] = i;
-			}
-			let toCheck = Object.values(map);
-			for (let i of toCheck) {
-				if (c.matches(i)) {
-					gl.push(c);
-					break;
-				}
-			}
-			// p = item, found = false;
-			// while (p.children && p.children.length > 0) {
-			// 	for (let ic of p.children) {
-			// 		if (c.matches(ic)) {
-			// 			found = true;
-			// 			gl.push(c);
-			// 			break;
-			// 		}
-			// 	}
-			// 	if (found) break;
-			// 	else p = p.children[0];
-			// }
-		}
-		return gl;
-	}
-
-	propagate(item, method, ...args) {
-		let peers = getPeers(item, this);
-		for (let p of peers)
-			p[method](...args);
-	}
-
-	getEncodingByItem(item, channel) {
-		let enc = this._encodings[getEncodingKey(item)];
-		if (enc && enc[channel]) {
-			return enc[channel];
-		} else
-			return null;
-	}
-
-	getEncodingByField(field, channel) {
-		for (let itmKey in this._encodings) {
-			let enc = this._encodings[itmKey];
-			if (enc[channel] && enc[channel].field == field)
-				return enc[channel];
-		}
-		return null;
-	}
-
-	//item can be a mark, a group, a vertex or a segment
-	positionBound(item, channel) {
-		let enc = this.getEncodingByItem(item, channel);
-		if (enc)
-			return enc;
-		else if (isPath(item)) {
-			for (let key in this._encodings) {
-				let classId = key.split("_")[0];
-				if (classId === item.classId && channel in this._encodings[key])
-					return this._encodings[key][channel];
-			}
-		}
-		else
-			return null;
-	}
-
-	sizeBound(mark, channel) {
-		let enc = this.getEncodingByItem(mark, channel);
-		if (enc)
-			return enc;
-		if (isPath(mark)) {
-			let dep = channel === "width" ? ["area"] : channel === "height" ? ["area"] : channel === "radius" ? ["area"] : ["width", "height"],
-				dep2 = channel === "width" ? ["x"] : channel === "height" ? ["y"] : ["x", "y"];
-			for (let key in this._encodings) {
-				let classId = key.split("_")[0];
-				if (key.indexOf("_") < 0) {
-					for (let c of dep) {
-						if (classId === mark.classId && c in this._encodings[key])
-							return this._encodings[key][c];
-					}
-				} else {
-					for (let c of dep2) {
-						if (classId === mark.classId && c in this._encodings[key])
-							return this._encodings[key][c];
-					}
-				}
-			}
-		}
-		return null;
-	}
-
-	setProperties(item, args) {
-		let result = {}, peers;
-		for (let p in args)
-			result[p] = true;
-
-		if (Object.values(LayoutType).indexOf(item.type) > -1 && item.group) {
-			peers = getPeers(item.group, this);
-			for (let coll of peers) {
-				for (let p in args) {
-					coll.layout[p] = args[p];
-				}
-			}
-		} else {
-			peers = getPeers(item, this);
-			if (item.type === "vertex") {
-				//TODO: validate the property names in args
-				for (let vertex of peers) {
-					for (let p in args) {
-						vertex[p] = args[p];
-					}
-				}
-			} else if (item instanceof Mark) {
-				for (let p in args) {
-					//TODO: validate p is a legit property, check if p is bound by data
-					if ((p === "x" || p === "y") && this.positionBound(item, p)) {
-						result[p] = false;
-						continue;
-					}
-					if ((p === "width" || p === "height" || p === "radius") && this.sizeBound(item, p)) {
-						//result[p] = false;
-						let enc = this.getEncodingByItem(item, p);
-						if (!enc && p == "radius") enc = this.getEncodingByItem(item, "area");
-						let re = enc.scale.rangeExtent * args[p] / item[p];
-						enc.scale.rangeExtent = re;
-						continue;
-					}
-					if ((item.type === ItemType.Rect || item.type === ItemType.Line) && (p === "width" || p === "height")) {
-						if (p === "width")
-							peers.forEach(d => d.resize(args[p], d.bounds.height, args["xRef"]));
-						else
-							peers.forEach(d => d.resize(d.bounds.width, args[p], undefined, args["yRef"]));
-					} else if (item.type == ItemType.Circle && p == "radius") {
-						peers.forEach(d => d.resize(args[p] * 2, args[p] * 2, args["xRef"], args["yRef"]));
-					} else {
-						peers.forEach(d => d[p] = args[p]);
-					}
-				}
-
-			} else if (item.type == "collection" || item.type == "group") {
-				for (let c of peers) {
-					for (let p in args) {
-						c[p] = (p === "layout" && args[p] !== undefined) ? args[p].clone() : args[p];
-					}
-					//c._updateBounds();
-				}
-			}
-		}
-
-		//invoke SceneValidator accordingly
-		let props = Object.keys(result).filter(d => result[d]);
-		let sizeProps = ["width", "height", "fontSize", "area", "radius"];
-		for (let s of sizeProps) {
-			if (props.indexOf(s) >= 0 && isMark(item)) {
-				SceneValidator.itemResized(item, peers);
-				break;
-			}
-		}
-
-		if (props.indexOf("baseline") >= 0 && item.type === ItemType.Area)
-			SceneValidator.areaRebased(item, peers);
-
-		let layoutProps = ["layout", "rowGap", "colGap", "numRows", "numCols", "orientation", "vertCellAlignment", "horzCellAlignment", "direction", "childrenOrder"];
-		let changed = props.filter(d => layoutProps.indexOf(d) >= 0);
-		if (changed.length > 0)
-			SceneValidator.layoutChanged(peers[0], peers, changed);
-
-		return result;
-		//TODO: relayout if needed (typically Layout or setProperty should happen before encoding)
-	}
-
-	_canTranslate(item) {
-		let r = { x: true, y: true };
-		if (item.type == ItemType.Axis) {
-			if (item.channel === "x" || item.channel === "width")
-				r.x = false;
-			else if (item.channel === "y" || item.channel === "height")
-				r.y = false;
-			return r;
-		}
-		if (item.parent.type === ItemType.Collection && item.parent.layout) {
-			r.x = false;
-			r.y = false;
-		}
-		if (this.positionBound(item, "x"))
-			r.x = false;
-		if (this.positionBound(item, "y"))
-			r.y = false;
-		//TODO: check constraints, handle vertices and
-		return r;
-	}
-
-	//always check canTranslate before calling this method
-	translate(item, dx, dy) {
-		let ct = this._canTranslate(item);
-		if (!ct.x && !ct.y) return ct;
-		const adx = ct.x ? dx : 0, ady = ct.y ? dy : 0;
-		item._doTranslate(adx, ady);
-		this._updateAncestorBounds(item);
-		SceneValidator.itemTranslated(item, adx, ady);
-		return ct;
-	}
-
-	_updateAncestorBounds(cpnt, cpntPeers) {
-		let peers = cpntPeers ? cpntPeers : getPeers(cpnt, this);
-		let parents = getParents(peers);
-
-		while (parents.length > 0) {
-			for (let p of parents) {
-				if (p.children && p.children.length > 0) {
-					p._updateBounds();
-				} else if (p.vertices) {
-					p._updateBounds();
-				}
-			}
-			parents = getParents(parents);
-		}
-	}
-
-	/**
-	** should only be used in Scene methods
-	**/
-
-	_reapplyConstraints(item) {
-		let itm = item, itms = [item];
-		while (itm.children) {
-			if (itm.type == ItemType.Collection) {
-				itms.push(itm.firstChild);
-			} else { //glyph or group
-				itms = itms.concat(itm.children);
-			}
-			itm = itm.firstChild;
-		}
-
-		itm = item.parent;
-		while (itm && itm.type !== ItemType.Scene) {
-			itms.push(itm);
-			itm = itm.parent;
-		}
-
-		const classIds = itms.map(d => d.classId);
-
-		for (let c in this.constraints) {
-			const cstr = this.constraints[c];
-			switch (cstr.type) {
-				case ConstraintType.Affix:
-					if (classIds.indexOf(cstr.item.classId) >= 0 || classIds.indexOf(cstr.baseItem.classId) >= 0)
-						cstr.apply();
-					break;
-				case ConstraintType.Align:
-					for (let itm of cstr.items) {
-						if (classIds.indexOf(itm.classId) >= 0) {
-							cstr.apply();
-							break;
-						}
-					}
-					break;
-				default:
-					break;
-			}
-		}
-	}
-
-	_relayoutAncestors(cpnt, cpntPeers) {
-		let peers = cpntPeers ? cpntPeers : getPeers(cpnt, this);
-		let parents = getParents(peers);
-		while (parents.length > 0) {
-			for (let p of parents) {
-				if (p.layout) {
-					p.layout.run();
-				}
-				if (p.children && p.children.length > 0) {
-					p._updateBounds();
-				}
-				if (p.vertices) {
-					p._updateBounds();
-				}
-			}
-			parents = getParents(parents);
-		}
-	}
-
-	_reapplySizeBindings(compnt) {
-		let sizeChannels = ["width", "height"];
-		for (let classId in this._encodings) {
-			if (compnt.classId != classId) continue;
-			let encodings = this._encodings[classId];
-			//TODO: re-use bindSpec and adjust scale accordingly
-			let peers = findItems(this, [{ "classId": classId }]);
-			for (let channel of sizeChannels) {
-				let encoding = encodings[channel];
-				if (!encoding) continue;
-				encoding.run();
-			}
-			this._relayoutAncestors(peers[0], peers);
-		}
-	}
-
-	_registerBinding(enc) {
-		let encodings = this._encodings;
-		let key = getEncodingKey(enc.anyItem);
-		if (!(key in encodings))
-			encodings[key] = {};
-		encodings[key][enc.channel] = enc;
-		return true;
-	}
-
-	toJSON() {
-		let json = super.toJSON();
-		if (this.fillColor)
-			json.fillColor = this.fillColor;
-		let scales = {};
-		json.encodings = [];
-		json.itemCounter = ItemCounter;
-		for (let classId in this._encodings) {
-			for (let channel in this._encodings[classId]) {
-				let e = this._encodings[classId][channel];
-				json.encodings.push(e.toJSON());
-				if (e.scale && !(e.scale.id in scales)) {
-					scales[e.scale.id] = e.scale.toJSON();
-				}
-			}
-		}
-		json.scales = scales;
-		json.constraints = {};
-		for (let c in this.constraints)
-			json.constraints[c] = this.constraints[c].toJSON();
-		json.tables = {};
-		let tables = this.getDataTables();
-		for (let t in tables) {
-			json.tables[t] = tables[t].toJSON();
-		}
-		return json;
-	}
-
-	//get data tables used in this scene's encodings
-	getDataTables() {
-		let tables = {};
-		for (let classId in this._encodings) {
-			for (let channel in this._encodings[classId]) {
-				let e = this._encodings[classId][channel];
-				if (!(e.datatable.id in tables)) {
-					tables[e.datatable.id] = e.datatable;
-				}
-			}
-		}
-		for (let c of this.children) {
-			if (isGuide(c)) continue;
-			if (c.dataScope) {
-				tables[c.dataScope.dataTable.id] = c.dataScope.dataTable;
-				break;
-			} else if (c.children && c.children.length > 0) {
-				let itm = c.firstChild;
-				while (itm) {
-					if (itm.dataScope) {
-						tables[itm.dataScope.dataTable.id] = itm.dataScope.dataTable;
-						break;
-					} else if (itm.children && itm.children.length > 0) {
-						itm = itm.firstChild
-					} else {
-						itm = undefined;
-					}
-				}
-			}
-		}
-		return tables;
-	}
-
-	//handles marks, groups, vertices and segments
-	getItem(id) {
-		let markId = id.split("_")[0];
-		if (id.indexOf("_v_") > 0) {
-			let idx = parseInt(id.split("_v_")[1]);
-			return this._itemMap[markId].vertices.find(d => d._id === idx);
-		} else if (id.indexOf("_s_") > 0) {
-			let idx = parseInt(id.split("_s_")[1]);
-			return this._itemMap[markId].segments.find(d => d._id === idx);
-		} else {
-			return this._itemMap[id];
-		}
-	}
-
-	addInteraction(obj) {
-		// let i = new Interaction(listener, eventType, selDef, targetDef);
-		this._interactions.push(obj);
-		this._interactionsObj[obj['event']] = obj;
-	}
-
-	get encodings() {
-		let r = [];
-		for (let itmKey in this._encodings) {
-			let enc = this._encodings[itmKey];
-			for (let channel in enc) {
-				r.push(enc[channel]);
-			}
-		}
-		return r;
-	}
-}