mascot-vis 3.0.0 → 3.0.2

package/src-old/item/refs/LayoutAxis.js

@@ -1,316 +0,0 @@
-import { DataType, ItemType, LayoutType } from "../../util/Constants";
-import Path from "../mark/Path";
-import PointText from "../mark/PointText";
-import Group from "../composite/Group";
-import * as d3 from 'd3'; 
-import Axis from "./Axis";
-import { sameClass } from "../../util/ItemUtil";
-
-
-export default class LayoutAxis extends Axis {
-    
-    constructor(items, layout, channel, field, args) {
-        super(args);
-        this._channel = channel;
-        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;
-        this._mlayout = layout;
-        this._field = field;
-        this._titleText = "title" in args ? args["title"] : this._field;
-        this._showTitle = "showTitle" in args ? args.showTitle : false;
-        
-        // if ("labelRotation" in args)
-        //     this._labelRotation = args.labelRotation;
-
-        this._ticks = new Group();
-        this._ticks.id = this.id + "ticks";
-        this.addChild(this._ticks);
-
-        this._labels = new Group();
-        this._labels.id = this.id + "labels";
-        this.addChild(this._labels);
-
-        //there can be multiple rules if the layout has multiple rows or columns
-        this._rules = new Group();
-        this._rules.id = this.id + "paths";
-        this.addChild(this._rules);
-
-        this._generatePath();
-        this._generateTicks();
-        this._generateLabels();
-        if (this._showTitle) {
-            this._generateTitle();
-        }
-        this._positionPath();
-        this._positionTicks();
-        this._positionLabels();
-        if (this._showTitle) {
-            this._positionTitle();
-        }
-
-    }
-
-    toJSON() {
-        let json = super.toJSON();
-        json.args.item = this._item.id;
-        if (this._channel == "x" || this._channel == "width")
-            json.args.pathY = this._posArg;
-        else
-            json.args.pathX = this._posArg;
-        if (this.classId)
-            json.classId = this.classId;
-        return json;
-    }
-
-    set strokeColor(c) {
-        this._strokeColor = c;
-        for (let t of this._ticks.children)
-            t.strokeColor = c;
-        for (let t of this._rules.children)
-            t.strokeColor = c;
-    }
-
-    get strokeColor() {
-        return this._strokeColor;
-    }
-
-    set textColor(c) {
-        this._textColor = c;
-        for (let l of this._labels.children)
-            l.fillColor = c;
-        if (this._title)
-            this._title.fillColor = c;
-    }
-
-    get textColor() {
-        return this._textColor;
-    }
-
-    get layout() {
-        return this._mlayout;
-    }
-
-    _updateBounds() {
-        this._bounds = this._rules.bounds.clone();
-        this._bounds = this._bounds.union(this._ticks.bounds);
-        this._bounds = this._bounds.union(this._labels.bounds);
-        if (this._showTitle)
-            this._bounds = this._bounds.union(this._title.bounds);
-    }
-
-    _generatePath(){
-        this._rules.removeAll();
-        if (this._mlayout.type == LayoutType.Grid) {
-            let num = this._channel == "x" ? this._mlayout.numRows : this._mlayout.numCols;
-            for (let i = 0; i < num; i++) {
-                let t = new Path({"strokeColor": this._strokeColor});
-                if (!this._pathVisible)
-                    t.visibility = "hidden";
-                t.type = ItemType.Line;
-                t.id = this.id + "rule" + i;
-                this._rules.addChild(t);
-            }
-        } else if (this._mlayout.type === LayoutType.Stack) {
-            let t = new Path({"strokeColor": this._strokeColor});
-            if (!this._pathVisible)
-                t.visibility = "hidden";
-            t.type = ItemType.Line;
-            t.id = this.id + "rule";
-            this._rules.addChild(t);
-        }
-    }
-
-    _generateTicks() {
-        this._ticks.removeAll();
-        for (let i = 0; i < this._mlayout.group.children.length; i++) {
-            let t = new Path({"strokeColor": this._strokeColor});
-            if (!this._tickVisible)
-                t.visibility = "hidden";
-            t.type = ItemType.Line;
-            t.id = this.id + "tick" + i;
-            this._ticks.addChild(t);
-        }
-    }
-
-    //TODO: improve efficiency by reusing components
-    _generateLabels() {
-        this._labels.removeAll();
-        let formatter, fieldType = this._item.dataScope.getFieldType(this._field);
-
-        switch (fieldType) {
-            case DataType.Date:
-                formatter = d3.timeFormat(this._labelFormat);
-                break;
-            case DataType.String:
-                formatter = function(d) {return d;};
-                break;
-            default:
-                formatter = d3.format(this._labelFormat);
-                break;
-        }
-  
-        let cb = this._mlayout.cellBounds;
-        for (let i = 0; i < cb.length; i++) {
-            if (i >= this._mlayout.group.children.length) break;
-            let itm = this._mlayout.group.children[i];
-            let t = new PointText({fillColor: this._textColor, fontSize: this._fontSize, "text": formatter(itm.dataScope.getFieldValue(this._field))});
-            //let t = new PointText({fillColor: this._textColor, fontSize: this._fontSize, "text": formatter(this._items[i].dataScope.getFieldValue(this._field))});
-            t.id = this.id + "label" + i;
-            this._labels.addChild(t);
-        }
-    }
-
-    _positionPath(){
-        if (this._mlayout.type == LayoutType.Grid) {
-            let cb = this._mlayout.cellBounds;
-            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] + 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] - 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)]
-                    ]);
-                }
-            }
-        } else if (this._mlayout.type === LayoutType.Stack) {
-            let b = this._mlayout.group.bounds;
-            if (this._channel == "x") {
-                this._rules.children[0]._setVertices([
-                    [b.left, this._posArg ? this._posArg : b[this._orientation] ],
-                    [b.right, this._posArg ? this._posArg : b[this._orientation]]
-                ]);              
-            } else {
-                this._rules.children[0]._setVertices([
-                    [this._posArg ? this._posArg : b[this._orientation], b.top ],
-                    [this._posArg ? this._posArg : b[this._orientation], b.bottom ]
-                ]);
-            }
-        }
-        this._rules.children.forEach(r => r._updateBounds());
-        this._rules._updateBounds();
-        this._updateBounds();
-    }
-
-    _positionTicks(){
-        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 + padding;
-                t._setVertices([
-                    [cb[i].x, pos],
-                    [cb[i].x, pos + dir * this._tickSize]
-                ]);
-                t._updateBounds();
-            }
-        } 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 - padding,
-                    yPos = this._tickAnchor == "middle" ? cb[i].y : cb[i][this._tickAnchor];
-                t._setVertices([
-                    [xPos, yPos],
-                    [xPos + dir * this._tickSize, yPos]
-                ]);
-                t._updateBounds();
-            }
-        }
-        this._ticks._updateBounds();
-        this._updateBounds();
-    }
-
-    _positionLabels(){
-        let cb = this._mlayout.cellBounds;
-        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 + padding;
-                l.anchor = anchor;
-                if (this._labelRotation){
-                    l._rotate = [this._labelRotation, l.x, l.y];
-                    l.anchor = ["right", anchor[1]];
-                }
-                    
-            }
-        } 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 - padding;
-                l.y = this._tickAnchor == "middle" ? cb[i].y : cb[i][this._tickAnchor];
-                l.anchor = anchor;
-                if (this._labelRotation) {
-                    l._rotate = [this._labelRotation, l.x, l.y];
-                }
-            }
-        }
-        this._labels._updateBounds();
-        this._updateBounds();
-    }
-
-    _positionTitle(){
-        let pb = this._rules.bounds;
-        this._title.achor = this._titleAnchor;
-        if (!this._titlePosition) {
-            if (this._channel == "x") {
-                this._title.x = pb.x;
-                this._titleOffset = this._labels.bounds.height + this._labelOffset + 15;
-                this._title.y = this._orientation == "top" ? pb.top - this._titleOffset : pb.bottom + this._titleOffset;
-            } else {
-                this._titleOffset = this._labels.bounds.width + this._labelOffset + 15;
-                this._title.x = this._orientation == "left" ? pb.left - this._titleOffset : pb.right + this._titleOffset;
-                this._title.y = pb.y;
-                if (this._rotateYTitle)
-                    this._title._rotate = this._orientation == "left" ?  [-90, this._title.bounds.x, this._title.bounds.y] : [90, this._title.bounds.x, this._title.bounds.y];
-            }
-        } else {
-            this._title.x = this._titlePosition[0];
-            this._title.y = this._titlePosition[1];
-            if (this._channel == "y" || this._channel == "height") {
-                if (this._rotateYTitle)
-                    this._title._rotate = this._orientation == "left" ?  [-90, this._title.bounds.x, this._title.bounds.y] : [90, this._title.bounds.x, this._title.bounds.y];
-            }
-        }   
-        this._title._updateBounds();
-        this._updateBounds();
-    }
-
-    matches(item) {
-        return sameClass(this._item, item);
-        //return getEncodingKey(this._item).split("_")[0] === getEncodingKey(item).split("_")[0];
-    }
-}

package/src-old/item/refs/Legend.js

@@ -1,273 +0,0 @@
-import Group from "../composite/Group";
-import { DataType, ItemType, Orientation } from "../../util/Constants";
-import PointText from "../mark/PointText";
-import { ItemCounter, getLeafItems, isPath, getEncodingKey } from "../../util/ItemUtil";
-import LinearGradient from "../../basic/Gradient";
-import DataTable from "../../data/DataTable";
-import { uniqueNumbers } from "../../util/DataUtil";
-import GridLayout from "../../layout/Grid";
-
-
-export default class Legend extends Group {
-
-    constructor(encoding, args) {
-        super();
-        this.type = ItemType.Legend;
-        this.id = this.type + ItemCounter[this.type]++;
-        this.encoding = encoding;
-        this._textColor = ("textColor" in args) ? args["textColor"] : "#555";
-        this._strokeColor = ("strokeColor" in args) ? args["strokeColor"] : "#555";
-        this._fontSize = "fontSize" in args? args.fontSize: "12px";
-        this._x = ("x" in args) ? args["x"] : 0;
-        this._y = ("y" in args) ? args["y"] : 0;
-        this._showTitle = ("showTitle" in args) ? args["showTitle"] : true;
-        this._orientation = ("orientation" in args) ? args["orientation"] : Orientation.Vertical;
-        
-        //for categorical legend
-        if (!("numCols" in args) && !("numRows" in args)) {
-            if (this._orientation === Orientation.Vertical)
-                this._numCols = 1;
-            else
-                this._numRows = 1;
-        }
-        else {
-            this._numCols = args["numCols"];
-            this._numRows = args["numRows"];
-        }
-        this._initialize();
-    }
-
-    toJSON(){
-        let json = super.toJSON();
-        if (!("args" in json))
-            json.args = {};
-        json.args.textColor = this._textColor;
-        json.channel = this.encoding.channel;
-        json.field = this.encoding.field;
-        json.args.strokeColor = this._strokeColor;
-        json.args.x = this._x;
-        json.args.y = this._y;
-        json.args.orientation = this._orientation;
-        return json;
-    }
-
-    get field() {
-        return this.encoding.field;
-    }    
-
-    get channel() {
-        return this.encoding.channel;
-    }
-
-    get fieldType() {
-        return this.encoding.datatable.getFieldType(this.field);
-    }
-
-    _initialize() {
-        let scene = this.encoding.scene, f = this.encoding.field;
-        switch (this.encoding.datatable.getFieldType(f)) {
-            case DataType.String:
-                this._createCategoricalColorLegend(scene, f);
-                break;
-            case DataType.Date:
-            case DataType.Number:
-            case DataType.Integer:
-                this._createNumericalColorLegend(scene, f);
-                break;
-        }
-        this._updateBounds();
-    }
-
-    _createNumericalColorLegend(scene, f) {
-        let wd, ht;
-        if (this._orientation == Orientation.Vertical) {
-            wd = 15;
-            ht = 300;
-        } else {
-            wd = 300;
-            ht = 15;
-        }
-        let titleSize;
-        if (this._showTitle){
-            let title = scene.mark("text", {fillColor: this._textColor, "text": f, x: this._x + wd/2, y: this._y, "anchor": ["center", "middle"]});
-            this.addChild(title);
-            titleSize = 20;
-        } else {
-            titleSize = 0;
-        }
-        
-        let rect = scene.mark("rect", {"top": this._y + titleSize, "left": this._x, "width": wd, "height": ht, "strokeWidth": 0, opacity: this.encoding.anyItem.opacity});
-        let domain = [Math.min(...this.encoding.data), Math.max(...this.encoding.data)], mapping = this.encoding.scale.mapping;
-        let gradient;
-        let texts = [], ticks = [], offset = 5, tickSize = 5;
-        if (mapping) {
-            let values = Object.keys(mapping).map(d => parseFloat(d)).sort((a,b) => a - b);
-            if (this._orientation == Orientation.Vertical) {
-                gradient = new LinearGradient({x1: 0, y1: 100, x2: 0, y2: 0});
-                values.forEach(d => {
-                    let p = (d - domain[0])/(domain[1] - domain[0]);
-                    gradient.addStop(p*100, mapping[d], 1.0);
-                    let tk = scene.mark("line", {"x1": this._x + wd, "x2": this._x + wd + tickSize, "y1": this._y + ht - p * ht + titleSize, "y2": this._y + ht - p * ht+ titleSize, "strokeColor": this._strokeColor});
-                    ticks.push(tk);
-                    let t = scene.mark("text", {fillColor: this._textColor, "text": d.toFixed(0), x: this._x + wd + offset + tickSize, y: this._y + ht - p * ht + titleSize, "anchor": ["left", "middle"]});
-                    texts.push(t);
-                })
-            } else {
-                gradient = new LinearGradient({x1: 0, y1: 0, x2: 100, y2: 0});
-                values.forEach(d => {
-                    let p = (d - domain[0])/(domain[1] - domain[0]);
-                    gradient.addStop(p*100, mapping[d], 1.0);
-                    let tk = scene.mark("line", {"x1": this._x + p * wd, "x2": this._x + p * wd, "y1": this._y + 20 - tickSize + titleSize, "y2": this._y + ht + tickSize + titleSize, "strokeColor": this._strokeColor});
-                    ticks.push(tk);
-                    let t = scene.mark("text", {fillColor: this._textColor, "text": d.toFixed(0), x: this._x + p * wd, y: this._y + ht + offset + titleSize, "anchor": ["center", "top"]});
-                    texts.push(t);
-                })
-            }
-        } else {
-            let domain = this.encoding.scale.domain, dt = this.encoding.datatable, ft = dt.getFieldType(f);
-            let stops = [], uniqueVals = ft === DataType.Date? dt.getUniqueFieldValues(f) : uniqueNumbers(this.encoding.data);
-            if (uniqueVals.length <= 10){
-                stops = uniqueVals;
-                stops.sort((a, b) => a - b);
-            } else {
-                if (ft === DataType.Date) {
-                    uniqueVals.sort((a, b) => a - b);
-                    for (let i = 0; i < uniqueVals.length; i+= Math.ceil(uniqueVals.length/10))
-                        stops.push(uniqueVals[i]);
-                } else {
-                    let incr = (domain[1] - domain[0])/9;
-                    for (let i = 0; i < 10; i++)
-                        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 => {
-                    let p = (d - domain[0])/(domain[1] - domain[0]);
-                    gradient.addStop(p*100, this.encoding.scale.map(d), 1.0);
-                    let tk = scene.mark("line", {"x1": this._x + wd, "x2": this._x + wd + tickSize, "y1": this._y + ht - p * ht + titleSize, "y2": this._y + ht - p * ht + titleSize, "strokeColor": this._strokeColor});
-                    ticks.push(tk);
-                    let t = scene.mark("text", {fillColor: this._textColor, "text": ft === DataType.Date? dt.getRawValue(f, d) : d, x: this._x + wd + offset + tickSize, y: this._y + ht - p * ht + titleSize, "anchor": ["left", "middle"]});
-                    texts.push(t);
-                });
-            } else {
-                gradient = new LinearGradient({x1: 0, y1: 0, x2: 100, y2: 0});
-                stops.forEach(d => {
-                    let p = (d - domain[0])/(domain[1] - domain[0]);
-                    gradient.addStop(p*100, this.encoding.scale.map(d), 1.0);
-                    let tk = scene.mark("line", {"x1": this._x + p * wd, "x2": this._x + p * wd, "y1": this._y + ht + titleSize, "y2": this._y + ht + tickSize + titleSize, "strokeColor": this._strokeColor});
-                    ticks.push(tk);
-                    let t = scene.mark("text", {fillColor: this._textColor, "text": ft === DataType.Date? dt.getRawValue(f, d) : d, x: this._x + p * wd, y: this._y + ht + offset + titleSize, "anchor": ["center", "top"]});
-                    texts.push(t);
-                })
-            }
-        }
-        rect.styles.fillColor = gradient;
-
-        this.addChild(rect);
-        for (let t of texts)
-            this.addChild(t);
-        for (let tk of ticks)
-            this.addChild(tk);
-    }
-
-    get textColor() {
-        return this._textColor;
-    }
-
-    set textColor(c) {
-        this._textColor = c;
-        this.setTextColor(this);
-    }
-
-    get orientation() {
-        return this._orientation;
-    }
-
-    set orientation(o) {
-        this._orientation = o;
-        this.removeAll();
-        this._initialize();
-    }
-
-    setTextColor(itm) {
-        if (!itm.children || itm.children.length === 0) return;
-        for (let i of itm.children) {
-            if (i.type === ItemType.PointText)
-                i.fillColor = this._textColor;
-            else if (i.children && i.children.length > 0) {
-                this.setTextColor(i);
-            }
-        }
-    }
-
-    _createCategoricalColorLegend(scene, f) {
-        let scale = this.encoding.scale;
-        let dt = new DataTable(scale.domain.map(d => ({"category": d, "value": scale.map(d)})));
-        let longestText = dt.getUniqueFieldValues("category").sort((a,b) => b.length - a.length)[0];
-        let mark = this.encoding.anyItem;
-        let sw = isPath(mark) && mark.closed ? mark.strokeWidth : 0;
-        if (this._orientation === Orientation.Vertical) {
-            let titleSize = 0;
-            if (this._showTitle) {
-                this.addChild(new PointText({fillColor: this._textColor, "fontSize": this._fontSize, "text": f, x: this._x, y: this._y, "anchor": ["left", "top"]})); 
-                titleSize = parseFloat(this._fontSize) + 5;
-            }
-            let rect = scene.mark("rect", {"top": this._y + 2 + titleSize, "left": this._x, "width": 10, "height": 10, "strokeWidth": sw, "strokeColor": mark.strokeColor, "opacity": mark.opacity});
-            let text = scene.mark("text", {text: longestText, fillColor: this._textColor, "fontSize": this._fontSize, x: this._x + 20, y: this._y + titleSize + 12 + sw, "anchor": ["left", "bottom"]});
-            let glyph = scene.glyph(rect, text);
-            let coll = scene.repeat(glyph, dt);
-            scene.encode(text, {"channel": "text", "field": "category", "_remember": false});
-            scene.encode(rect, {"channel": "fillColor", "field": "category", "_remember": false, scale: scale});
-            coll.layout = new GridLayout({"numCols": this._numCols, "numRows": this._numRows});
-            this.addChild(coll);
-        } else {
-            //do not show title for now
-            let rect = scene.mark("rect", {"top": this._y, "left": this._x, "width": 10, "height": 10, "strokeWidth": sw, "strokeColor": mark.strokeColor, "opacity": this.encoding.anyItem.opacity});
-            let text = scene.mark("text", {text: longestText, fillColor: this._textColor, "fontSize": this._fontSize, x: this._x + 15, y: this._y, "anchor": ["left", "top"]});
-            let glyph = scene.glyph(rect, text);
-            let coll = scene.repeat(glyph, dt);
-            scene.encode(text, {"channel": "text", "field": "category", "_remember": false});
-            scene.encode(rect, {"channel": "fillColor", "field": "category", "_remember": false, scale: scale});
-            coll.layout = new GridLayout({"numCols": this._numCols, "numRows": this._numRows, "colGap": 15});
-            this.addChild(coll);
-        }
-        
-    }
-
-    pathHitTest(x, y) {
-        let items = getLeafItems(this);
-        for (let i = items.length - 1; i >= 0; i--) {
-            let c = items[i];
-            if (isPath(c) && c.contains(x, y))
-                return c;
-        }
-        return null;
-    }
-
-    //item is a group or a mark or a vertex or segment
-    matches(item) {
-        let k = getEncodingKey(item).split("_")[0],
-            encodings = this.encoding.scale.encodings;
-        for (let enc of encodings) {
-            let classId = getEncodingKey(enc.anyItem).split("_")[0];
-            if (classId === k)
-                return true;
-        }
-        return false;
-    }
-
-    _doTranslate(dx, dy) {
-        super._doTranslate(dx, dy);
-        this._x += dx;
-        this._y += dy;
-    }
-
-}

package/src-old/layout/Circular.js

@@ -1,95 +0,0 @@
-import {Direction, Alignment} from "../util/Constants";
-import Matrix from "../basic/Matrix";
-import Rectangle from "../basic/Rectangle";
-
-/**
-** Circular layout can not be applied to nested collections
-** Primary use case: people garden
-** For pie charts, use Partition
-** For polar line graphs, area charts, weather radial etc. use Polar Transformation on a scene
-**/
-
-class CircularLayout {
-
-	constructor(args) {
-		this.type = "circular";
-		this.center = args.hasOwnProperty("center") ? args["center"] : {x: 500, y:400};
-		this.radius = args.hasOwnProperty("radius") ? args["radius"] : 200;
-		this.startAngle = args.hasOwnProperty("startAngle") ? args["startAngle"] : 90;
-		this.endAngle = args.hasOwnProperty("endAngle") ? args["endAngle"] : 450;
-		this.direction = args.hasOwnProperty("direction") ? args["direction"] : Direction.Anticlockwise;
-	}
-
-	clone() {
-		return new CircularLayout({
-			center: {x: this.center.x, y: this.center.y},
-			radius: this.radius,
-			startAngle: this.startAngle,
-			endAngle: this.endAngle,
-			direction: this.direction
-		});
-	}
-
-	run() {
-		if (this.collection == undefined)
-			return;
-
-		let collection = this.collection;
-		let scene = this.collection.getScene();
-
-		let bounds = collection.children.map(d => d.unRotatedBounds);
-		let wds = bounds.map(d => d.width),
-			hts = bounds.map(d => d.height);
-		let cellWidth = Math.max(...wds),
-			cellHeight = Math.max(...hts);
-
-		for (let i = 0; i < collection.children.length; i++) {
-			let item = collection.children[i];
-			let cellBounds = this._getCellBounds(item, scene, cellWidth, cellHeight);
-			
-			let cellCenter = cellBounds.center;
-			
-			let dx = this.center.x - cellCenter.x, dy = this.center.y - this.radius - cellCenter.y;
-			let mx = new Matrix();
-			mx._doTranslate(dx, dy);
-
-			let angle = (this.endAngle - this.startAngle)/(collection.children.length+1);
-
-			let mx1 = new Matrix();
-			mx1.rotate(90 - (this.startAngle + angle * i), this.center);
-
-			mx.prepend(mx1);
-		  	item._matrix = mx;
-		}
-		this.collection._updateBounds();
-	}
-
-	//TODO: handle collections
-	_getCellBounds(item, scene, cellWidth, cellHeight) {
-		let left, top;
-		let bounds = item.unRotatedBounds;
-		switch (scene._cellAlign[item.classId].x) {
-			case Alignment.Left:
-				left = bounds.left;
-				break;
-			case Alignment.Center:
-				left = bounds.center.x - cellWidth/2;
-				break;
-			case Alignment.Right:
-				left = bounds.right - cellWidth;
-				break;
-		}
-		switch(scene._cellAlign[item.classId].y) {
-			case Alignment.Top:
-				top = bounds.top;
-				break;
-			case Alignment.Middle:
-				top = bounds.center.y - cellHeight/2;
-				break;
-			case Alignment.Bottom:
-				top = bounds.bottom - cellHeight;
-				break;
-		}
-		return new Rectangle(left, top, cellWidth, cellHeight);
-	}
-}