mascot-vis 1.9.2 → 1.10.0

package/dist/mascot.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// version: 1.9.2
+// version: 1.10.0
 (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) :
@@ -2832,16 +2832,17 @@
 			let scopes = line2Scopes[p.id];
 			let x1 = p.vertices[0].x, y1 = p.vertices[0].y, x2 = p.vertices[1].x, y2 = p.vertices[1].y;
 
-			p.classId = compnt.id;
-			p.vertices[0].x = x1;
-			p.vertices[0].y = y1;
-			p.vertices[1].x = x1 + (x2 - x1)/max;
-			p.vertices[1].y = y1 + (y2 - y1)/max;
-			p.dataScope = scopes[0];
-			coll.addChild(p);
+			// p.classId = compnt.id;
+			// p.vertices[0].x = x1;
+			// p.vertices[0].y = y1;
+			// p.vertices[1].x = x1 + (x2 - x1)/max;
+			// p.vertices[1].y = y1 + (y2 - y1)/max;
+			// p.dataScope = scopes[0];
+			// coll.addChild(p);
 			
-			for (let i = 1; i < scopes.length; i++) {
+			for (let i = 0; i < scopes.length; i++) {
 				let c = p.duplicate();
+				c.classId = compnt.id;
 				c.vertices[0].x = x1 + (x2 - x1) * i /max;
 				c.vertices[0].y = y1 + (y2 - y1) * i /max;
 				c.vertices[1].x = x1 + (x2 - x1) * (i + 1)/max;
@@ -2850,6 +2851,8 @@
 				coll.addChild(c);
 			}
 
+			parent.removeChild(p);
+
 			if (p == compnt)
 				toReturn = coll;
 		}
@@ -2896,13 +2899,14 @@
 
 			let wd = orientation == Orientation.Horizontal ? bounds.width/max : bounds.width,
 				ht = orientation == Orientation.Horizontal ? bounds.height : bounds.height/max;
-			p.classId = compnt.id;
-			p.resize(wd, ht);
-			p.dataScope = scopes[0];
-			coll.addChild(p);
+			// p.classId = compnt.id;
+			//p.resize(wd, ht);
+			//p.dataScope = scopes[0];
+			//coll.addChild(p);
 			
-			for (let i = 1; i < scopes.length; i++) {
+			for (let i = 0; i < scopes.length; i++) {
 				let c = p.duplicate();
+				c.classId = compnt.id;
 				c.resize(wd, ht);
 				c.dataScope = scopes[i];
 				coll.addChild(c);
@@ -2910,21 +2914,14 @@
 
 			coll.layout = new StackLayout({orientation: orientation, left: left, top: top});
 
+			parent.removeChild(p);
+
 			if (p == compnt)
 				toReturn = coll;
 		}
 
 		scene._reapplySizeBindings(toReturn);
 
-		//update axis item argument
-		let axes = scene.getRelatedAxes(compnt);
-		for (let a of axes) {
-			if (a._item.classId === compnt.classId) {
-				a._item = toReturn;
-				a._items = getPeers(toReturn, scene);
-			}
-		}
-
 		return toReturn;
 	}
 
@@ -2956,17 +2953,19 @@
 
 			let wd = orientation == Orientation.Horizontal ? p.width/ds.length : p.width,
 			ht = orientation == Orientation.Horizontal ? p.height : p.height/ds.length;
-			
-			p.classId = compnt.id;
-			p.resizeArea(wd, ht);
-			coll.addChild(p);
+			// p.classId = compnt.id;
+			// p.resizeArea(wd, ht);
+			// coll.addChild(p);
 
-			for (let i = 1; i < ds.length; i++) {
+			for (let i = 0; i < ds.length; i++) {
 				let c = p.duplicate();
+				c.classId = compnt.id;
 				c.resizeArea(wd, ht);
 				coll.addChild(c);
 			}
 
+			parent.removeChild(p);
+
 			for (let i = 0; i < coll.children.length; i++) {
 				let child = coll.children[i];
 				if (child.dataScope) {
@@ -3156,7 +3155,7 @@
 					coll.addChild(pie);
 				}
 		
-				coll.layout = layout("stack", {direction: Direction.Clockwise});
+				coll.layout = layout("stack", {orientation: Orientation.Angular, direction: Direction.Clockwise});
 				// Replace original circle w/ coll of pies
 				parent.removeChild(p);
 				parent.addChild(coll);
@@ -3971,6 +3970,8 @@
 				} else {
 					if (this.scale.offset === undefined)
 						this.scale.offset = Math.min(...items.map(d => d[channel]));
+					if (this.items[0].type === ItemType.PointText)
+						this.items.forEach(d => d.horzAnchor = "center");
 					for (let i = 0; i < this.items.length; i++) {
 						let peer = this.items[i];
 						let dx = this.scale.offset + this.scale.map(this.data[i]) - peer[channel],
@@ -4015,6 +4016,8 @@
 				} else {
 					if (this.scale.offset === undefined)
 						this.scale.offset = Math.min(...items.map(d => d.bounds.y));
+					if (this.items[0].type === ItemType.PointText)
+						this.items.forEach(d => d.vertAnchor = "middle");
 					for (let i = 0; i < this.items.length; i++) {
 						let peer = this.items[i];
 						let dx = 0,
@@ -4759,13 +4762,26 @@
 						let layout = getTopLevelLayout(enc.anyItem, "stack");
 						if (layout) {
 							let c = layout.group, colls = getPeers(c, enc.scene);
-							r = Math.max(...colls.map(d => d.bounds[enc.channel])) ;
+							r = Math.max(...colls.map(d => d.refBounds[enc.channel]));
 							domain[1] = enc.scale.invert(r); // Math.ceil(enc.scale.invert(r)); do not ceil, it can amplify small difference in invert calculation due to imprecision/roundoff in bounding box calculation
 						}
 					} 
 					minPxInterval = enc.channel == "width" || enc.channel == "x" ? 45 : 30;
-					let n = Math.floor(r/minPxInterval); //, step = d3.tickStep(domain[0], domain[1], n);
-					let ticks = enc.scale.type === "log" ? enc.scale._scale.ticks(n) : d3__namespace.ticks(domain[0], domain[1], n);
+					let n = Math.max(2, Math.floor(r/minPxInterval));
+					let ticks;
+					if (enc.scale.type === "log") {
+						ticks = [];
+						let d3Ticks = enc.scale._scale.ticks();
+						//number of ticks is not configurable for d3 log scales,
+						//use the solution posted here: https://github.com/d3/d3/issues/72
+						for (let d of d3Ticks) {
+							let x = Math.log(d) / Math.log(10) + 1e-6;
+							if (Math.abs(x - Math.floor(x)) < n/d3Ticks.length)
+								ticks.push(d);
+						}
+					} else {
+						ticks = d3__namespace.ticks(domain[0], domain[1], n);
+					}
 					return ticks;
 				}
 				case "point": {
@@ -4927,9 +4943,10 @@
 					return [offset, offset + this.scale.rangeExtent];
 				}
 			} else if (this.channel == "height") {
-				let layout = getTopLevelLayout(item, "grid");
-				if (layout) {
-					let cellBounds = layout.cellBounds;
+				let c = getTopLevelCollection(item);
+				//let layout = getTopLevelLayout(item, "grid");
+				if (c && c.layout && ["grid", "stack"].indexOf(c.layout.type) >= 0){
+					let cellBounds = c.layout.cellBounds;
 					let parentPeers = item.parent.parent.children;
 					let idx = parentPeers.findIndex(d => item.parent === d || item.parent.parent === d );
 					//return [cellBounds[idx].bottom, cellBounds[idx].bottom - this.scale.rangeExtent];
@@ -4938,7 +4955,7 @@
 				} else {
 					let items = getPeers(item, this.scene);
 					//TODO: handle cases where items are aligned top
-					let offset = Math.max(...items.map(d => d.bounds.bottom));
+					let offset = Math.min(...items.map(d => d.refBounds.bottom));
 					return [offset, offset - this.scale.rangeExtent];
 				}
 			} else if (this.channel == "radialDistance") {
@@ -5171,6 +5188,7 @@
 				case "radius":
 				case "fillColor":
 				case "strokeColor":
+				case "text":
 					return this.numericFields.concat(this.nonNumericFields);
 				case "area":
 				case "strokeWidth":
@@ -5578,6 +5596,24 @@
 	        this._updateBounds();
 	    }
 
+	    get horzAnchor() {
+	        return this.attrs["anchor"][0];
+	    }
+
+	    get vertAnchor() {
+	        return this.attrs["anchor"][1];
+	    }
+
+	    set horzAnchor(a) {
+	        this.attrs["anchor"][0] = a;
+	        this._updateBounds();
+	    }
+
+	    set vertAnchor(a) {
+	        this.attrs["anchor"][1] = a;
+	        this._updateBounds();
+	    }
+
 	    //return integer
 	    get fontSize() {
 	        return parseFloat(this.styles["fontSize"]);
@@ -7095,6 +7131,7 @@
 		copyPropertiesTo(target) {
 			super.copyPropertiesTo(target);
 			target._baseline = this._baseline;
+			target._orientation = this._orientation;
 		}
 
 		resizeArea(wd, ht) {
@@ -7645,14 +7682,17 @@
 		}
 
 		contains(x, y) {
-			let svgData = this.getSVGPathData();
-			if (svgData !== "") {
-				let ctx = CanvasProvider.getContext(),
-						p = new Path2D(svgData);
-				ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
-				ctx.stroke(p);
-				return ctx.isPointInPath(p, x, y);
-			} 
+			let irregular2Ds = [ItemType.Arc, ItemType.Pie, ItemType.Polygon, ItemType.Area];
+			if (irregular2Ds.indexOf(this.firstChild.type) >= 0) {
+				let svgData = this.getSVGPathData();
+				if (svgData !== "") {
+					let ctx = CanvasProvider.getContext(),
+							p = new Path2D(svgData);
+					ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
+					ctx.stroke(p);
+					return ctx.isPointInPath(p, x, y);
+				} 
+			}
 			if (!this._bounds) {
 				this._updateBounds();
 			}
@@ -8247,7 +8287,17 @@
 	    },
 
 	    markDivided: function(path, collection) {
+	        //update axis item argument
 	        let scene = collection.getScene();
+	        let axes = scene.getRelatedAxes(path);
+	        for (let a of axes) {
+	            if (a._item.classId === path.classId) {
+	                a._item = collection;
+	                a._items = getPeers(collection, scene);
+	            }
+	        }
+
+	        //update encoding item
 	        let e = scene.encodings[getEncodingKey(path)];
 	        if (e) {
 	            scene.encodings[getEncodingKey(collection)] = {};
@@ -8260,7 +8310,7 @@
 	                scene.encodings[getEncodingKey(collection)][channel] = enc;
 	                delete scene.encodings[getEncodingKey(path)][channel];
 	            }
-	            if (Object.keys(e) === 0)
+	            if (Object.keys(e).length === 0)
 	                delete scene.encodings[getEncodingKey(path)];
 	        }
 	        //TODO: update constraints
@@ -8429,7 +8479,8 @@
 	    encoding._apply = function() {
 			//sort items by centroid
 			this.items.sort((a, b) => (a.innerRadius+a.outerRadius)/2 - (b.innerRadius+b.outerRadius)/2);
-			let tree = {item: new ArcPath({outerRadius: 0, startAngle: 0, endAngle: 360}), children: []};
+			let outer = Math.min(...this.items.map(d => d.innerRadius));
+			let tree = {item: new ArcPath({outerRadius: outer, startAngle: 0, endAngle: 360}), children: []};
 			for (let itm of this.items) {
 				addToTree(tree, itm);
 			}
@@ -9214,8 +9265,15 @@
 			let arr = Array.isArray(itm) ? itm : [itm];		
 			let encs = [], scale;
 			for (let item of arr) {
-				this._validateEncodeArgs(item, args);
 				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 = [];
@@ -9320,7 +9378,7 @@
 			return encoding;
 		}
 
-		encodeWithinCollection(item, args) {
+		_encodeWithinCollection(item, args) {
 			this._validateEncodeArgs(item, args);
 			let peersByGroup = getPeersGroupedByParent(item, this);
 			let encs = [];
@@ -9376,11 +9434,20 @@
 		//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 enc = this.getEncodingByField(field, channel), args = params ? params : {};
+			let args = params ? params : {}, enc = args.item ? this.getEncodingByItem(args.item, channel) : this.getEncodingByField(field, channel);
 			if (enc) {
 				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"];
@@ -9542,6 +9609,8 @@
 		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){
@@ -9568,6 +9637,7 @@
 
 		reCreateRelatedAxes(item) {
 			let axes = this.getRelatedAxes(item);
+			let layoutAxisClassIds = [];
 			axes.forEach(a => {
 				let args = a.toJSON().args;
 				if (args.item)
@@ -9575,7 +9645,15 @@
 				delete args["tickValues"];
 				delete args["labelValues"];
 				this.removeItem(a);
-				this.axis(a.channel, a.field, args);
+				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();
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mascot-vis",
-	"version": "1.9.2",
+	"version": "1.10.0",
 	"description": "Manipulable Semantic Components in Data Visualization",
 	"scripts": {
 		"build": "rollup --config",