mascot-vis 1.9.3 → 1.10.1

package/dist/mascot.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// version: 1.9.3
+// version: 1.10.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) :
@@ -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);
@@ -3521,6 +3520,11 @@
 			this._updateBounds();
 		}
 
+		set area(a) {
+			this.attrs["radius"] = Math.sqrt(a);
+			this._updateBounds();
+		}
+
 		// set width(w) {
 		// 	this.attrs["radius"] = w/2;
 		// 	this._updateBounds();
@@ -3607,7 +3611,7 @@
 
 					//TODO: check if item width has already been encoded with a different field
 					//the code below assumes width hasn't been bound to data
-					scale._setRange([0, Math.max(...(items.map(d => d.width)))]);
+					scale._setRange([0, this.rangeExtent ? this.rangeExtent : Math.max(...(items.map(d => d.width)))]);
 				} else {
 					// let top = Math.min(...(items.map(d => d.bounds.top))),
 					// 	bottom = Math.max(...(items.map(d => d.bounds.bottom)));
@@ -3615,7 +3619,7 @@
 
 					//TODO: check if item height has already been encoded with a different field
 					//the code below assumes height hasn't been bound to data
-					scale._setRange([0, Math.max(...(items.map(d => d.height)))]);
+					scale._setRange([0, this.rangeExtent ? this.rangeExtent : Math.max(...(items.map(d => d.height)))]);
 				}
 			} else {
 				scale.domain = [0, Math.max(...data)];
@@ -3971,6 +3975,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 +4021,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,
@@ -4386,6 +4394,9 @@
 					extent = Math.max(...this.areas.map(d => d.bounds.height));
 				}
 			}
+			
+			if (this.rangeExtent)
+				extent = this.rangeExtent;
 
 			if (min < 0) {
 				scale._scale.domain([min, max]);
@@ -4759,12 +4770,12 @@
 						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 n = Math.max(2, Math.floor(r/minPxInterval));
 					let ticks;
 					if (enc.scale.type === "log") {
 						ticks = [];
@@ -4940,9 +4951,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];
@@ -4951,7 +4963,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.max(...items.map(d => d.refBounds.bottom));
 					return [offset, offset - this.scale.rangeExtent];
 				}
 			} else if (this.channel == "radialDistance") {
@@ -5184,6 +5196,7 @@
 				case "radius":
 				case "fillColor":
 				case "strokeColor":
+				case "text":
 					return this.numericFields.concat(this.nonNumericFields);
 				case "area":
 				case "strokeWidth":
@@ -5591,6 +5604,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"]);
@@ -7108,6 +7139,7 @@
 		copyPropertiesTo(target) {
 			super.copyPropertiesTo(target);
 			target._baseline = this._baseline;
+			target._orientation = this._orientation;
 		}
 
 		resizeArea(wd, ht) {
@@ -7658,14 +7690,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();
 			}
@@ -8204,8 +8239,8 @@
 	            let axes = enc.scene.getRelatedAxes(item);
 	            for (let a of axes) {
 	                if (a.encoding && a.encoding.scale === scale) {
-	                    a.tickValues = enc.scene._inferTickValues(enc);
-	                    a.labelValues = enc.scene._inferTickValues(enc);
+	                    a.tickValues = enc._inferTickValues(enc);
+	                    a.labelValues = enc._inferTickValues(enc);
 	                    a._positionPath();
 	                    if (a._showTitle)
 	                        a._positionTitle();
@@ -8260,7 +8295,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)] = {};
@@ -8273,7 +8318,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
@@ -8442,7 +8487,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);
 			}
@@ -9227,8 +9273,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 = [];
@@ -9333,7 +9386,7 @@
 			return encoding;
 		}
 
-		encodeWithinCollection(item, args) {
+		_encodeWithinCollection(item, args) {
 			this._validateEncodeArgs(item, args);
 			let peersByGroup = getPeersGroupedByParent(item, this);
 			let encs = [];
@@ -9389,11 +9442,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"];
@@ -9555,6 +9617,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){

package/package.json

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