mascot-vis 3.0.0 → 3.0.1

package/src-new-ts/depgraph/variable/Variable.js

@@ -1,39 +0,0 @@
-import { generateUniqueID } from "../../util.js";
-
-export default class Variable {
-    constructor(type) {
-        this._id = "v_" + generateUniqueID();
-        this._type = type;
-        this._incomings = [];
-        this._outgoings = [];
-        this._undirected = [];
-    }
-
-    get id() {
-        return this._id;
-    }
-
-    get incomingEdges() {
-        return this._incomings;
-    }
-
-    get outgoingEdges() {
-        return this._outgoings;
-    }
-
-    get undirectedEdges() {
-        return this._undirected;
-    }
-
-    get type() {
-        return this._type;
-    }
-}
-
-export const VarType = Object.freeze({
-    CHANNEL: 'channel',
-    DATASCOPE: 'datascope',
-    DOMAIN: 'domain',
-    BOUNDS: 'bounds',
-    FIELD: 'field'
-});

package/src-new-ts/element/gradient/LinearGradient.js

@@ -1,37 +0,0 @@
-import { generateUniqueID } from "../../util.js";
-import { ElementType } from "../../action/createElement.js";
-
-export default class LinearGradient {
-
-    constructor(params) {
-        let args = params ? params : {};
-        this._stops = [];
-        this.type = ElementType.LinearGradient;
-        this.id = this.type + generateUniqueID();
-        this.x1 = ("x1" in args) ? args.x1 : 0;
-        this.x2 = ("x2" in args) ? args.x2 : 100;
-        this.y1 = ("y1" in args) ? args.y1 : 0;
-        this.y2 = ("y2" in args) ? args.y2 : 0;
-    }
-
-    toJSON() {
-        let json = {};
-        json.type = this.type;
-        json.id = this.id;
-        json.x1 = this.x1;
-        json.x2 = this.x2;
-        json.y1 = this.y1;
-        json.y2 = this.y2;
-        json.stops = this._stops;
-        return json;
-    }
-
-    addStop(offset, color, opacity) {
-        this._stops.push({ offset: offset, color: color, opacity: opacity });
-    }
-
-    get stops() {
-        return this._stops;
-    }
-
-}

package/src-new-ts/element/group/Collection.js

@@ -1,109 +0,0 @@
-import { ElementType } from "../../action/createElement.js";
-import { MSCRowID } from "../../data/Table.js";
-import { FieldType } from "../../data/field.js";
-import { CanvasProvider } from "../../render/CanvasRenderer.js";
-import { generateUniqueID } from "../../util.js";
-import Group from "./Group.js";
-
-export default class Collection extends Group {
-
-    constructor() {
-        super();
-        this._type = ElementType.Collection;
-        this._id = this.type + generateUniqueID();
-        this._classId = this.id;
-        this._childrenOrder = undefined;
-    }
-
-    get childrenOrder() {
-        if (!this._childrenOrder)
-            return { "field": MSCRowID, "direction": "asc" };
-        else
-            return this._childrenOrder;
-    }
-
-    set childrenOrder(o) {
-        if (!("field" in o) && !("direction" in o)) return;
-        let field = o.field;
-        if (!this.dataScope.dataTable.hasField(field)) {
-            console.warn("Cannot order collection children by an non-existent field", o.field);
-            return;
-        }
-        this._childrenOrder = o;
-        let f;
-        if (field === MSCRowID) {
-            f = (a, b) => parseInt(a.dataScope.getFieldValue(field).substring(1)) - parseInt(b.dataScope.getFieldValue(field).substring(1));
-        } else {
-            let type = this.children[0].dataScope.getFieldType(field);
-            switch (type) {
-                case FieldType.Date:
-                    break;
-                case FieldType.Number:
-                case FieldType.Integer:
-                    f = (a, b) => a.dataScope.aggregateNumericalField(field) - b.dataScope.aggregateNumericalField(field);
-                    break;
-                case FieldType.String:
-                    if (o.ranking)
-                        f = (a, b) => o.ranking.indexOf(a.dataScope.getFieldValue(field)) - o.ranking.indexOf(b.dataScope.getFieldValue(field));
-                    else
-                        f = (a, b) => (a.dataScope.getFieldValue(field) < b.dataScope.getFieldValue(field) ? -1 : 1);
-                    break;
-            }
-        }
-        this.children.sort(f);
-
-        if (o.direction == "desc")
-            this.children.reverse();
-        if (this.layout)
-            this.layout.run();
-    }
-
-    duplicate() {
-        let coll = this.getScene().collection();
-        for (let i = 0; i < this.children.length; i++) {
-            let c = this.children[i];
-            coll.addChild(c.duplicate());
-        }
-        coll.classId = this.classId;
-        this.parent.addChild(coll);
-        if (this._layout) {
-            let layout = this._layout.clone();
-            coll.layout = layout;
-        }
-        return coll;
-    }
-
-    contains(x, y) {
-        let irregular2Ds = [ElementType.Arc, ElementType.Pie, ElementType.Polygon, ElementType.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();
-        }
-        return this._bounds.contains(x, y);
-    }
-
-    getSVGPathData() {
-        let d = "";
-        for (let i of this.children) {
-            if (i.getSVGPathData)
-                d += i.getSVGPathData();
-            else if (i.bounds) {
-                let b = i.bounds;
-                d += ["M", b.left, b.top].join(" ");
-                d += ["L", b.right, b.top].join(" ");
-                d += ["L", b.right, b.bottom].join(" ");
-                d += ["L", b.left, b.bottom, "Z"].join(" ");
-            }
-        }
-        return d;
-    }
-}

package/src-new-ts/element/group/Group.js

@@ -1,307 +0,0 @@
-/**
-* Same as group in graphical design tools 
-**/
-
-import { generateUniqueID } from "../../util.js";
-import { ElementType } from "../../action/createElement.js";
-
-export default class Group {
-	
-	constructor() {
-		this._children = [];
-		this._dataScope = undefined;
-		this._layout = undefined;
-		this._type = ElementType.Group;
-		this._id = this.type + generateUniqueID();
-	}
-
-	get id() {
-		return this._id;
-	}
-
-    get type() {
-        return this._type;
-    }
-
-	// set id(id) {
-	// 	if (this.type === ElementType.Scene || !this.getScene())
-	// 		this._id = id;
-	// 	else {
-	// 		delete this.getScene()._itemMap[this._id];
-	// 		this._id = id;
-	// 		this.getScene()._itemMap[id] = this;
-	// 	}
-	// }
-
-	contains(x, y) {
-		if (!this._bounds) {
-			this._updateBounds();
-		}
-		return this._bounds.contains(x, y);
-	}
-
-	toJSON() {
-		let json = {};
-		json.type = this.type;
-		json.id = this.id;
-		if (this._dataScope)
-			json.dataScope = this._dataScope.toJSON();
-		if (this.classId)
-			json.classId = this.classId;
-		if (this._layout)
-			json.layout = this._layout.toJSON();
-		if (this._bounds)
-			json.bounds = this._bounds.toJSON();
-		json.children = [];
-		if (this.children.length > 0) { //&& this.type != ItemType.Axis
-			for (let c of this.children) {
-				json.children.push(c.toJSON());
-			}
-		}
-		if (this.childrenOrder) {
-			json.childrenOrder = this.childrenOrder;
-		}
-		return json;
-	}
-
-    get children() {
-        return this._children;
-    }
-
-	addChild(c) {
-		if (this.children.indexOf(c) >= 0) return;
-		if (c.parent)
-			c.parent.removeChild(c);
-		this.children.push(c);
-		c.parent = this;
-	}
-
-	addChildAt(c,index){
-		if (c.parent)
-			c.parent.removeChild(c);
-		this.children.splice(index, 0, c);
-		c.parent = this;
-	}
-
-	removeChild(c) {
-		let idx = this.children.indexOf(c);
-		if (idx >= 0) {
-			this.children.splice(idx, 1);
-			c.parent = null;
-		}
-	}
-
-	removeChildAt(i) {
-		this.children[i].parent = null;
-		this.children.splice(i, 1);
-	}
-
-	removeAll() {
-		for (let c of this.children)
-			c.parent = null;
-		this.children = [];
-	}
-
-	get dataScope() {
-		return this._dataScope;
-	}
-
-	set dataScope(ds) {
-		this._dataScope = ds;
-		if (ds === undefined) {
-			for (let c of this.children) {
-				c.dataScope = ds;
-			}
-		} else {
-			for (let c of this.children) {
-				if (c.dataScope)
-					c.dataScope = c.dataScope.merge(ds);
-				else
-					c.dataScope = ds;
-			}
-		}
-	}
-
-	// _doTranslate(dx, dy) {
-	// 	for (let child of this.children) {
-	// 		child._doTranslate(dx, dy);
-	// 	}
-	// 	this._updateBounds();
-	// 	if (this._layout) {
-	// 		if (this._layout._left !== undefined)
-	// 			this._layout._left += dx;
-	// 		if (this._layout._top !== undefined)
-	// 			this._layout._top += dy;
-	// 		if (this._layout.x !== undefined)
-	// 			this._layout.x += dx;
-	// 		if (this._layout.y !== undefined)
-	// 			this._layout.y += dy;
-	// 		//this._layout.run();
-	// 	}
-	// 	this._updateBounds();
-	// }
-
-	getInternalEncodings(channel) {
-		if (this.children.length == 0)
-			return [];
-		let item = this.children[0], scene = this.getScene();
-		let encodingKeys = Object.keys(scene.encodings);
-		let classIds = [];
-		while(item) {
-			if (item.classId && classIds.indexOf(item.classId) < 0)
-				classIds.push(item.classId);
-			if (item.type === ElementType.Glyph) {
-				item.children.forEach(d => classIds.push(d.classId));
-				break;
-			} else if (item.children) {
-				item = item.children[0];
-			} else
-				break;
-		}
-		let result = [];
-		for (let k of encodingKeys) {
-			let tokens = k.split("_");
-			for (let classId of classIds) {
-				if (tokens[0] == classId) {
-					if (scene.encodings[k][channel])
-						result.push(scene.encodings[k][channel]);
-				}
-			}
-		}
-		return result;
-	}
-
-	get firstChild() {
-		return this.children[0];
-	}
-
-	get lastChild() {
-		return this.children[this.children.length - 1];
-	}
-
-	set layout(l) {
-		this._layout = l;
-		if (l) {
-			l.group = this;
-			this._layout.run();
-		} else {
-			//check if there are position encodings and reapply them
-			let xEncs = this.getInternalEncodings("x"),
-				yEncs = this.getInternalEncodings("y");
-			for (let e of xEncs) {
-				e._map();
-				e._apply();
-			}
-			for (let e of yEncs) {
-				e._map();
-				e._apply();
-			}	
-		}
-	}
-
-	get layout() {
-		return this._layout;
-	}
-
-	// get bounds() {
-	// 	if (!this._bounds) {
-	// 		this._updateBounds();
-	// 	}
-	// 	return this._bounds;
-	// }
-
-	// get refBounds() {
-	// 	let cRefBounds = this.children.map (d => d.refBounds);
-	// 	let left = Math.min(...cRefBounds.map(d => d.left)), top = Math.min(...cRefBounds.map(d => d.top)),
-	// 		right = Math.max(...cRefBounds.map(d => d.right)), bottom = Math.max(...cRefBounds.map(d => d.bottom));
-	// 	return new Rectangle(left, top, right - left, bottom - top);
-	// }
-
-	get x() {
-		return this.bounds.x;
-	}
-
-	get y() {
-		return this.bounds.y;
-	}
-
-	// _updateBounds() {
-	// 	if (this.children.length > 0){
-	// 		this._bounds = this.children[0].bounds.clone();
-	// 		for (let i = 1; i < this.children.length; i++) {
-	// 			if (this.children[i].visibility == "hidden")
-	// 				continue;
-	// 			this._bounds = this._bounds.union(this.children[i].bounds);
-	// 		}
-	// 		if (this._layout && this._layout.type == "grid") {
-	// 			let cellBounds = this._layout.cellBounds;
-	// 			for (let i = 0; i < cellBounds.length; i++) {
-	// 				this._bounds = this._bounds.union(cellBounds[i]);
-	// 			}
-	// 		}
-	// 	} else {
-	// 		this._bounds = new Rectangle(0, 0, 0, 0);
-	// 	}
-	// }
-
-	// sortChildrenByData(field, reverse, order) {
-	// 	let type = this.children[0].dataScope.getFieldType(field);
-	// 	let f; 
-	// 	switch (type) {
-	// 		case DataType.Date:
-	// 			break;
-	// 		case DataType.Number:
-	// 		case DataType.Integer:
-	// 			f = (a, b) =>  a.dataScope.aggregateNumericalField(field) - b.dataScope.aggregateNumericalField(field);
-	// 			break;
-	// 		case DataType.String:
-	// 			if (order)
-	// 				f = (a, b) => order.indexOf(a.dataScope.getFieldValue(field)) - order.indexOf(b.dataScope.getFieldValue(field));
-	// 			else
-	// 				f = (a, b) =>  (a.dataScope.getFieldValue(field) < b.dataScope.getFieldValue(field) ? -1 : 1 );
-	// 			break;
-	// 	}
-	// 	this.children.sort(f);
-	// 	if (reverse)
-	// 		this.children.reverse();
-	// 	if (this.layout)
-	// 		this.layout.run();
-	// 	this._childrenOrder = {field: field, direction: reverse ? "desc" : "asc", ranking: order};
-	// }
-
-	// sortChildren(channel, reverse){
-	// 	let f;
-	// 	switch (channel){
-	// 		case "x":
-	// 		case "y":
-	// 		case "width":
-	// 		case "height":
-	// 			f = (a, b) => a.bounds[channel] - b.bounds[channel];
-	// 			break;
-	// 		default:
-	// 			f = (a, b) => a[channel] - b[channel];
-	// 			break;
-	// 	}
-	// 	this.children.sort(f);
-	// 	if (reverse)
-	// 		this.children.reverse();
-	// 	if (this.layout)
-	// 		this.layout.run();
-	// 	this.childrenOrder = {channel: channel, reverse: reverse};
-	// }
-
-	set visibility(v) {
-		if (v == "hidden")
-			this._visibility = v;
-		else
-			this._visibility = "visible";
-		for (let c of this.children)
-			c.visibility = v;
-	}
-
-	get visibility() {
-		if (!this._visibility)
-			return "visible";
-		return this._visibility;
-	}
-}

package/src-new-ts/element/group/Scene.js

@@ -1,98 +0,0 @@
-import { ElementType, PrimitiveMark } from "../../action/createElement.js";
-import Group from "./Group.js";
-import { generateUniqueID } from "../../util.js";
-import DependencyGraph from "../../depgraph/DepGraph.js";
-import { encodingSpecified, newMarkCreated } from "../../depgraph/updateDepGraph.js";
-import { VarType } from "../../depgraph/variable/Variable.js";
-import DataTable, { MSCRowID } from "../../data/Table.js";
-import { repeatElement, validateRepeatArguments } from "../../action/repeat.js";
-import Tree from "../../data/Tree.js";
-import Network from "../../data/Network.js";
-import { createMark } from "../../action/createElement.js";
-import { getPeers } from "../../action/traverseScene.js";
-import { validateEncodeArguments } from "../../action/encode.js";
-import { createScale } from "../../encode/Scale.js";
-
-export default class Scene extends Group {
-
-    constructor(args) {
-        super();
-        this._itemMap = {};
-        this._type = ElementType.Scene;
-        this._id = this._type + generateUniqueID();
-        if (args && args.fillColor) {
-            this.fillColor = args.fillColor;
-        }
-        this._encodings = {};
-        this._depGraph = new DependencyGraph();
-    }
-
-    get depGraph() {
-        return this._depGraph;
-    }
-
-    mark(type, param) {
-        if (Object.values(PrimitiveMark).indexOf(type) < 0)
-            throw new Error("Mascot does not allow directly creating a " + type);
-        let args = param === undefined ? {} : param;
-        args.type = type;
-        let m = createMark(args);
-        if (m !== null) {
-            m._classId = m.id;
-            this.addChild(m);
-            this._itemMap[m.id] = m;
-            newMarkCreated(m, this._depGraph);
-        }
-        return m;
-    }
-
-    repeat(elem, data, param) {
-        param["field"] = param["field"] || MSCRowID;
-        validateRepeatArguments(elem, data, param);
-
-        if (data instanceof Tree || data instanceof Network) {
-            throw "Not implemented";
-            // return repeatNodeLink(this, elem[0], elem[1], data);
-        } else if (data instanceof DataTable) {
-            let collection = repeatElement(this, elem, param["field"], data);
-            // console.log(this._depGraph);
-            if (param.layout)
-                collection.layout = param.layout;
-            return collection;
-        }
-    }
-
-    //example usage in the scatterplot demo: scn.encode(circle, { field: "GDP per capita", channel: "x" });
-    encode(elem, param) {
-        //TODO: complete the validateEncodeArguments function in action/encode.js to validate the arguments
-        validateEncodeArguments(elem, param);
-        let scale = param.scale ? param.scale : createScale(param.field, param.channel, elem),
-            aggregator = param.aggregator ? param.aggregator : "sum";
-        encodingSpecified(param.field, param.channel, elem, scale, aggregator, this._depGraph);
-    }
-
-
-    /**
-     * 
-     * @param {*} varType: type of variable: channel, field, bounds, datascope, scale, ... 
-     * @param {*} newVal: variable value: "x", "y", "radius", etc. for channel, ... 
-     * @param {*} compnt: the component that the variable belongs to, e.g., channel/bounds/datascope: element, field: dataset
-     */
-    onChange(varType, ...params) {
-        if (Object.values(VarType).indexOf(varType) < 0)
-            throw new Error('Unknown Variable Type: ' + varType);
-        this._depGraph.processChange(varType, ...params);
-    }
-
-    setChannels(root, params) {
-        this.setProperties(params, root);
-        getPeers(root).map(elem => this.setProperties(params, elem));
-        this.onChange('channel', ...Object.keys(params), root);
-    }
-
-    setProperties(params, c) {
-        for (const [key, value] of Object.entries(params)) {
-            if ('_' + key in c) c['_' + key] = value;
-        }
-    }
-}

package/src-new-ts/element/mark/CircleMark.ts

@@ -1,85 +0,0 @@
-import Mark from "./Mark";
-
-// Define an interface for constructor arguments
-interface CircleMarkArgs {
-    x?: number;
-    y?: number;
-    radius?: number;
-    [key: string]: any; // This allows for additional properties not explicitly defined here
-}
-
-export default class CircleMark extends Mark {
-    private _x: number;
-    private _y: number;
-    private _radius: number;
-
-    constructor(args: CircleMarkArgs) {
-        super(args);
-        this._x = args.x ?? 0; // Use nullish coalescing operator
-        this._y = args.y ?? 0;
-        this._radius = args.radius ?? 100;
-    }
-
-    // Define setters and getters with types
-    set strokeColor(c: string) {
-        
-    }
-
-    set radius(r: number) {
-        this._radius = r;
-    }
-
-    get strokeColor(): string {
-        return this.styles.strokeColor;
-    }
-
-    get strokeDash(): string {
-        return this.styles.strokeDash;
-    }
-
-    get fillColor(): string {
-        return this.styles.fillColor;
-    }
-
-    get strokeWidth(): number {
-        return this.styles.strokeWidth;
-    }
-
-    get x(): number {
-        return this._x;
-    }
-
-    get y(): number {
-        return this._y;
-    }
-
-    get radius(): number {
-        return this._radius;
-    }
-
-    get area(): number {
-        return Math.PI * Math.pow(this._radius, 2);
-    }
-
-    copyPropertiesTo(target: CircleMark): void {
-        super.copyPropertiesTo(target);
-        target._x = this._x;
-        target._y = this._y;
-        target._radius = this._radius;
-    }
-
-    getSVGPathData(): string {
-        return [
-            "M", this._x, this._y,
-            "m", -this._radius, "0",
-            "a", this._radius, this._radius, "0 1,0", this._radius * 2, "0",
-            "a", this._radius, this._radius, "0 1,0", -(this._radius * 2), "0"
-        ].join(" ");
-    }
-
-    contains(px: number, py: number): boolean {
-        
-        const dist = Math.sqrt(Math.pow(px - this.x, 2) + Math.pow(py - this.y, 2));
-        return dist <= this.radius + this.strokeWidth;
-    }
-}