mascot-vis 3.0.0 → 3.0.1

package/src-old/layout/Force.js

@@ -1,52 +0,0 @@
-import { LayoutType } from "../util/Constants";
-import Layout from "./Layout";
-import * as d3 from "d3";
-
-export default class ForceLayout extends Layout {
-
-    constructor(args) {
-        super();
-        this.type = LayoutType.Force;
-        this._x = "x" in args ? args.x : 0;
-        this._y = "y" in args ? args.y : 0;
-        this._iterations = "iterations" in args ? args.iterations : 1;
-        this._repulsion = "repulsion" in args ? args.repulsion : 30;
-        this._attraction = "attraction" in args ? args.attraction : 1;
-        this._linkDistance = "linkDistance" in args ? args.linkDistance : 30;
-    }
-
-    toJSON() {
-        let json = {args: {}};
-		json.type = this.type;
-		json.args.x = this._x;
-		json.args.y = this._y;
-		json.args.iterations = this._iterations;
-		return json;
-    }
-
-    run() {
-        if (this.group == undefined)
-            return;
-        let graph = this.group.children[0].dataScope._dt.graph;
-        
-        if (graph) {
-            let links = graph.links.map(d => ({ source: graph.getNode(d.source), target: graph.getNode(d.target) }));
-            let simulation = d3.forceSimulation(graph.nodes)
-                                .force("charge", d3.forceManyBody().strength(-this._repulsion))
-                                .force("link", d3.forceLink(links).id(d => d.id).distance(this._linkDistance))
-                                .force("x", d3.forceX())
-                                .force("y", d3.forceY())
-                                .force("center", d3.forceCenter(this._x, this._y).strength(this._attraction))
-                                ;
-            simulation.stop();
-            simulation.tick(this._iterations);
-            
-            for (let i = 0; i < this.group.children.length; i++) {
-                this.group.children[i].x = graph.nodes[i].x;
-                this.group.children[i].y = graph.nodes[i].y;
-            }
-            this.group._updateBounds();
-            this.group.getScene()._updateAncestorBounds(this.group);
-        }
-    }
-}

package/src-old/layout/Grid.js

@@ -1,423 +0,0 @@
-import Rectangle from "../basic/Rectangle";
-import {Alignment, Errors, ItemType, LayoutType} from "../util/Constants";
-import { getPeers } from "../util/ItemUtil";
-import Layout from "./Layout";
-
-export default 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];
-			let cw = xEnc.scale.rangeExtent;
-			leftOffset = xEnc.scale.range[0];
-			// if (xEnc.scale.type === "point") {
-			// 	//TODO: need to handle variable sizes
-			// 	cw += xEnc.anyItem.bounds.width;
-			// }
-			cellWidth = Math.max(cw, cellWidth);
-		} 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];
-			let ch = yEnc.scale.rangeExtent;
-			// if (yEnc.scale.type === "point") {
-			// 	//TODO: need to handle variable sizes
-			// 	ch += yEnc.anyItem.bounds.height;
-			// }
-			cellHeight = Math.max(ch, cellHeight);
-		} 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;
-					default:
-						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;
-	}
-
-	set colGap(g) {
-		this._colGap = g;
-		this.run();
-		this.group.getScene()._relayoutAncestors(this.group);
-	}
-
-	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;
-		}
-		this._numCols = c;
-		this._numRows = Math.ceil(this.group.children.length/c);
-		this.run();
-		this.group.getScene()._relayoutAncestors(this.group);
-	}
-
-	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);
-	}
-
-
-	get numRows() {
-		if (this._numRows) {
-			return this._numRows;
-		} else if (this._numCols) {
-			return Math.ceil(this.group.children.length/this._numCols);
-		} else 
-			return 0;
-	}
-
-	set vertCellAlignment(v) {
-		if (v != Alignment.Top && v != Alignment.Bottom && v != Alignment.Middle) {
-			throw Errors.UNKOWN_ALIGNMENT;
-		}
-		this._cellVertAlignment = v;
-		this.run();
-	}
-
-	get vertCellAlignment() {
-		return this._cellVertAlignment;
-	}
-
-	set horzCellAlignment(h) {
-		if (h != Alignment.Left && h != Alignment.Center && h != Alignment.Right) {
-			throw Errors.UNKOWN_ALIGNMENT;
-		}
-		this._cellHorzAlignment = h;
-		this.run();
-	}
-
-	get horzCellAlignment() {
-		return this._cellHorzAlignment;
-	}
-
-	//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("_");
-		}
-		this.run();
-	}
-
-	get direction() {
-		return this._dir.join("_");
-	}
-}
-
-GridLayout.direction = {
-	Left2Right: "l2r",
-	Right2Left: "r2l",
-	Top2Bottom: "t2b",
-	Bottom2Top: "b2t"
-}

package/src-old/layout/Layout.js

@@ -1,13 +0,0 @@
-import { ItemCounter } from "../util/ItemUtil";
-
-export default class Layout {
-
-    constructor(){
-        this.group = undefined;
-        this.id = "layout" + ItemCounter["layout"]++;
-    }
-
-    run(){}
-
-    clone(){}
-}

package/src-old/layout/Packing.js

@@ -1,56 +0,0 @@
-import * as d3 from "d3";
-import Layout from "./Layout";
-
-export default class PackingLayout extends Layout {
-
-    constructor(args) {
-        super();
-		this.type = "packing";
-        this.x = "x" in args ?  args.x : 400;
-        this.y = "y" in args ? args.y : 400;
-        this.width = args.width;
-        this.height = args.height;
-	}
-
-    toJSON() {
-        let json = {args: {}};
-		json.type = this.type;
-		json.args.x = this.x;
-		json.args.y = this.y;
-		json.args.width = this.width;
-		json.args.height = this.height;
-		return json;
-    }
-
-    clone() {
-		return new PackingLayout({x: this.x, y: this.y, width: this.width, height: this.height});
-	}
-
-    run() {
-		if (this.group == undefined)
-			return;
-        let nodes = this.group.children.map(d => ({"name": d.id, "radius": d.radius, "itm": d}));
-
-        let area = nodes.reduce((total, current) => total + Math.pow(current.radius, 2), 0),
-            s = Math.sqrt(area);
-        
-        if (this.width === undefined) {
-            this.width = s;
-        }
-
-        if (this.height === undefined) {
-            this.height = s;
-        }
-
-        let data = d3.hierarchy({name: "root", children: nodes}).sum(d => d.radius ? d.radius : 0).sort((a, b) => b.value - a.value);
-        d3.pack().size([this.width, this.height]).radius(d => d.value)(data);
-
-        for (let c of data.children) {
-            let itm = c.data.itm;
-            let dx = this.x - data.x + c.x - itm.x, dy = this.y - data.y + c.y - itm.y;
-            itm._doTranslate(dx, dy);
-        }
-        this.group._updateBounds();
-    }
-
-}