mascot-vis 3.0.0 → 3.0.1

package/src-new-ts/element/mark/Segment.js

@@ -1,29 +0,0 @@
-export default class Segment {
-	
-	constructor(v1, v2, parentMark, id) {
-		this.type = "segment";
-		this._id = id;
-		this.vertex1 = v1;
-		this.vertex2 = v2;
-
-		this.dataScope = undefined;
-		this.parent = parentMark;
-	}
-
-	get id() {
-		return this.parent.id + "_s_" + this._id;
-	}
-
-	_doTranslate(dx, dy) {
-		this.vertex1._doTranslate(dx, dy);
-		this.vertex2._doTranslate(dx, dy);
-	}
-
-	get x() {
-		return (this.vertex1.x + this.vertex2.x)/2;
-	}
-
-	get y() {
-		return (this.vertex1.y + this.vertex2.y)/2;
-	}
-}

package/src-new-ts/element/mark/Vertex.js

@@ -1,118 +0,0 @@
-// Based on path.Segment.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
-// http://paperjs.org/
-// Copyright (c) 2011 - 2019, Juerg Lehni & Jonathan Puckey
-// http://scratchdisk.com/ & https://puckey.studio/
-//
-// Distributed under the MIT license. See LICENSE file for detail
-//
-// All rights reserved.
-
-import { Rectangle } from "../../depgraph/variable/BoundsVar";
-
-
-export default class Vertex {
-
-	//handles are relative to the point
-	constructor(x, y, parentMark, id) {
-		this.type = "vertex";
-		this._id = id;
-		this.x = x;
-		this.y = y;
-		this.dataScope = undefined;
-		this.parent = parentMark; 
-
-		this.shape = undefined;
-		this.width = 0;
-		this.height = 0;
-		this.radius = 0;
-		this.fillColor = "#555";
-		this.opacity = 1;
-		this.strokeWidth = 0;
-		this.strokeColor = "#aaa";
-		this._polarAngle = undefined;
-	}
-
-	get bounds() {
-		switch(this.shape) {
-			case "rect":
-				return new Rectangle(this.x - this.width/2, this.y - this.height/2, this.width, this.height);
-			case "circle":
-				return new Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
-			default:
-				return new Rectangle(this.x - 0.5, this.y - 0.5, 1, 1);
-		}
-	}
-
-	get id() {
-		return this.parent.id + "_v_" + this._id;
-	}
-
-	toJSON() {
-		let json = {};
-		json.type = this.type;
-		json.id = this._id;
-		json.x = this.x;
-		json.y = this.y;
-		if (this.dataScope)
-			json.dataScope = this.dataScope.toJSON();
-		if (this._polarAngle !== undefined)
-			json.polarAngle = this._polarAngle;
-		json.shape = this.shape;
-		json.width = this.width;
-		json.height = this.height;
-		json.radius = this.radius;
-		json.fillColor = this.fillColor;
-		json.opacity = this.opacity;
-		json.strokeWidth = this.strokeWidth;
-		json.strokeColor = this.strokeColor;
-		return json;
-	}
-
-	static fromJSON(json, parent) {
-		let v = new Vertex(json, parent, json.id);
-		if (json.dataScope)
-			v.dataScope = json.dataScope;
-		if ("polarAngle" in json)
-			v.polarAngle = json.polarAngle;
-		v.shape = json.shape;
-		v.width = json.width;
-		v.height = json.height;
-		v.radius = json.radius;
-		v.fillColor = json.fillColor;
-		v.opacity = json.opacity;
-		v.strokeWidth = json.strokeWidth;
-		v.strokeColor = json.strokeColor;
-		return v;
-	}
-
-	_doTranslate(dx, dy) {
-		this.x += dx;
-		this.y += dy;
-	}
-
-	_clone(parent) {
-		let v = new Vertex(this.x, this.y, parent, this._id);
-		if (this.dataScope) {
-			v.dataScope = this.dataScope.clone();
-		}
-		v.shape = this.shape;
-		v.width = this.width;
-		v.height = this.height;
-		v.radius = this.radius;
-		v.fillColor = this.fillColor;
-		v.opacity = this.opacity;
-		v.strokeWidth = this.strokeWidth;
-		v.strokeColor = this.strokeColor;
-		return v;
-	}
-
-	set polarAngle(a) {
-		this._polarAngle = a;
-	}
-
-	get polarAngle() {
-		return this._polarAngle;
-	}
-}
-
-Vertex.styles = ["vxShape", "vxWidth", "vxHeight", "vxRadius", "vxFillColor", "vxStrokeColor", "vxStrokeWidth", "vxOpacity"];

package/src-new-ts/encode/Scale.ts

@@ -1,115 +0,0 @@
-
-// Assuming args has this possible structure based on the provided usage
-interface ScaleArgs {
-    scheme?: string;
-    size?: string;
-}
-
-import { FieldType } from "../data/field"; // FieldType is an enum
-import { generateUniqueID } from "../util";
-import * as d3 from 'd3';
-
-
-/*
-
-// Example usage:
-// If your domain elements are strings:
-const scaleForStrings = new Scale<string>("point");
-// If your domain elements are dates (for example, with a time scale):
-// const scaleForDates = new Scale<Date>("time");
-*/
-
-export default class Scale<Domain extends { toString(): string } = string> {
-    private _id: string;
-    private _type: string;
-    // Adjusting the type of _scale to accommodate the generic type for ScalePoint
-    private _scale: d3.ScaleLinear<number, number> | d3.ScalePoint<Domain> | d3.ScaleOrdinal<Domain, any> | d3.ScalePower<number, number> | d3.ScaleLogarithmic<number, number> | d3.ScaleTime<any, any> | d3.ScaleSequential<number> | any;
-
-    constructor(type: string, args?: ScaleArgs) {
-        this._id = "scale_" + generateUniqueID();
-        this._type = type;
-        switch (type) {
-            case "linear":
-                this._scale = d3.scaleLinear();
-                break;
-            case "point":
-                // Specifying the type argument for ScalePoint as Domain
-                this._scale = d3.scalePoint<Domain>();
-                break;
-            case "ordinal":
-                this._scale = d3.scaleOrdinal<Domain, any>();
-                break;
-            // Additional cases...
-            default:
-                this._scale = d3.scaleLinear(); // Fallback to a linear scale
-                break;
-        }
-    }
-
-    get id(): string {
-        return this._id;
-    }
-
-    get domain(): [number, number] | string[] {
-        return this._scale.domain();
-    }
-
-    set domain(d: [number, number] | string[]) {
-        this._scale.domain(d);
-    }
-
-    get range(): [number, number] | string[] {
-        return this._scale.range();
-    }
-
-    set range(r: [number, number] | string[]) {
-        this._scale.range(r);
-    }
-
-    map(d: number | string): number | string {
-        return this._scale(d);
-    }
-}
-
-interface DataScope {
-    dataTable: {
-        getFieldType: (field: string) => FieldType;
-    };
-}
-
-export function createScale(field: string, channel: string, elem: { dataScope: DataScope }): Scale {
-    let fType = elem.dataScope.dataTable.getFieldType(field);
-    switch (fType) {
-        case FieldType.Boolean:
-            break;
-        case FieldType.Date:
-            return new Scale("time");
-        case FieldType.String:
-            return new Scale("point");
-        default: // integer or number
-            return new Scale("linear");
-    }
-    return new Scale("linear"); // Default return for Boolean case or any other unhandled FieldType
-}
-
-
-// export function computeDomain(field, table, elems) {
-//     let dataScopes = elems.map(d => d.dataScope);
-//     switch (table.getFieldType(field)) {
-//         case FieldType.Boolean:
-//             break;
-
-//         case FieldType.Date:
-//             return dataScopes.map(d => d.getFieldValue(field));
-
-//         case FieldType.String:
-//             try {
-//                 return dataScopes.map(d => d.getFieldValue(field));
-//             } catch (error) {
-//                 throw new Error("Cannot bind " + this.channel + " to " + field + " : " + error);
-//             }
-
-//         default: //integer or number
-//             return dataScopes.map(d => d.aggregateNumericalField(field, this.aggregator));
-//     }
-// }

package/src-new-ts/index.ts

@@ -1,19 +0,0 @@
-import { importCSV } from "./data/import.js";
-import Scene from "./element/group/Scene.js";
-import SVGRenderer from "./render/SVGRenderer.js";
-
-export function scene(args) {
-    return new Scene(args);
-}
-
-export async function csv(url) {
-    return importCSV(url);
-}
-
-export function renderer(type, id) {
-    switch (type) {
-        case "svg":
-        default:
-            return new SVGRenderer(id);
-    }
-}

package/src-new-ts/layout/Layout.ts

@@ -1,3 +0,0 @@
-export default class Layout {
-    
-}

package/src-new-ts/render/CanvasRenderer.ts

@@ -1,24 +0,0 @@
-interface CanvasProviderType {
-    canvas: HTMLCanvasElement | undefined;
-
-    getCanvas: () => HTMLCanvasElement | null;
-    getContext: () => CanvasRenderingContext2D | null;
-}
-
-export const CanvasProvider: CanvasProviderType = {
-    canvas: undefined,
-
-    getCanvas: function() {
-        if (typeof window === 'undefined')
-            return null;
-        if (this.canvas === undefined) {
-            this.canvas = document.createElement('canvas');
-        }
-        return this.canvas;
-    },
-
-    getContext: function() {
-        const canvas = this.getCanvas();
-        return canvas ? canvas.getContext('2d') : null;
-    }
-};

package/src-new-ts/render/SVGRenderer.js

@@ -1,316 +0,0 @@
-import * as d3 from 'd3';
-import { ElementType } from "../action/createElement.js";
-
-export default class SVGRenderer {
-
-    constructor(svgId) {
-        this._svgId = svgId;
-        this._compMap = {};
-        this._decoMap = {};
-        //this._interactionHandler = new SVGInteractionHandler(this);
-    }
-
-    render(scene, params) {
-        let args = params ? params : {};
-        for (let k in this._decoMap) {
-            this._decoMap[k].remove();
-            delete this._decoMap[k];
-        }
-        this._removed = {};
-        for (let k in this._compMap) {
-            this._removed[k] = 1;
-        }
-        this._renderItem(scene, args);
-        for (let k in this._removed) {
-            this._compMap[k].remove();
-            delete this._compMap[k];
-        }
-        // if (!("visualOnly" in args)) {
-        //     for (let i of scene._interactions)
-        //         this._interactionHandler.processInteraction(i, scene);
-        // }
-    }
-
-    clear() {
-        let svg = document.getElementById(this._svgId);
-        while (svg.firstChild) {
-            svg.firstChild.remove();
-        }
-        this._compMap = {};
-        this._decoMap = {};
-    }
-
-    _renderItem(c, args) {
-        let cid = c.id,
-            parent = c.parent;
-
-        let svgParent;
-        if (parent && parent.id && parent.id in this._compMap) {
-            svgParent = d3.select("#" + this._svgId).select("#" + parent.id);
-        } else {
-            svgParent = d3.select("#" + this._svgId);
-        }
-
-        if (!(cid in this._compMap)) {
-            //TODO: what if the parent is not rendered? What if the hierarchy has changed?
-            this._compMap[cid] = svgParent.append(this._getSVGElementType(c));
-        } else {
-            delete this._removed[cid];
-        }
-
-        if (c.type == ElementType.Gridlines) {
-            this._compMap[cid].lower();
-        }
-
-        let el = this._compMap[cid];
-
-        el.attr("id", cid);
-        if (c.classId)
-            el.attr("class", c.classId);
-
-        if (c.type == ElementType.Scene) {
-            d3.select("#" + this._svgId).style("background", c.fillColor ? c.fillColor : "#fff");
-        }
-
-        if (c.type == "vertex") {
-            //TODO: render vertices
-            return;
-        }
-
-        let pathTypes = [ElementType.Path, ElementType.Polygon, ElementType.Link, ElementType.Pie, ElementType.Line, ElementType.Area, ElementType.Ring, ElementType.Arc];
-        if (pathTypes.indexOf(c.type) >= 0) {
-            el.attr("d", c.getSVGPathData());
-            if (!c.closed)
-                el.style("fill", "none");
-            if (cid.indexOf("axis") == 0) {
-                el.style("shape-rendering", "crispEdges");
-            }
-        } else if (c.type == ElementType.Circle) {
-            el.attr("cx", c.x);
-            el.attr("cy", c.y);
-            el.attr("r", c.radius);
-        } else if (c.type == ElementType.Rect) {
-            //do not use c.left, c.top, c.width, c.height as the rectangle may be flipped
-            //use c.bounds
-            let b = c.bounds;
-            el.attr("x", b.left).attr("y", b.top).attr("width", b.width).attr("height", b.height);
-        } else if (c.type == ElementType.PointText) {
-            el.attr("text-anchor", this._getTextAnchor(c.anchor[0]))
-                .attr("alignment-baseline", this._getTextAnchor(c.anchor[1]))
-                .attr("dominant-baseline", this._getTextAnchor(c.anchor[1]))
-                .text(c.text)
-                .attr("x", c.x).attr("y", c.y);
-        } else if (c.type == ElementType.Image) {
-            el.attr("href", c.src).attr("x", c.x).attr("y", c.y).attr("width", c.width).attr("height", c.height);
-        }
-
-        for (let s in c.styles) {
-            if (c.styles[s] === undefined)
-                continue;
-            if (s.indexOf("Color") > 0 && c.styles[s].type == ElementType.LinearGradient) {
-                if (d3.select("#" + this._svgId).select("defs").empty())
-                    d3.select("#" + this._svgId).append("defs");
-                let defs = d3.select("defs"), gradient = c.styles[s];
-                if (defs.select("#" + gradient.id).empty()) {
-                    let grad = defs.append("linearGradient").attr("id", gradient.id);
-                    grad.attr("x1", gradient.x1 + "%").attr("x2", gradient.x2 + "%").attr("y1", gradient.y1 + "%").attr("y2", gradient.y2 + "%");
-                    for (let stop of gradient.stops)
-                        grad.append("stop").attr("offset", stop.offset + "%").style("stop-color", stop.color).style("stop-opacity", stop.opacity);
-                }
-                el.style(Style2SVG[s], "url(#" + gradient.id + ")");
-            } else {
-                el.style(Style2SVG[s], c.styles[s]);
-            }
-
-        }
-
-        if (c._rotate)
-            el.attr("transform", "rotate(" + c._rotate.join(" ") + ")");
-
-        // render vertices if shape is defined
-        if (c.vertices) {
-            // let shapes = c.vertices.map(d => d.shape).filter(d => d !== undefined);
-            // if (shapes.length > 0) 
-            this._renderVertices(c);
-        }
-
-        // render scene bound
-        if (c.type == ElementType.Collection && args && args["collectionBounds"]) {
-            let b = c.bounds;
-            if (c.layout && c.layout.type == "grid") {
-                this._renderLayout(c);
-            } else {
-                if (!(c.id in this._decoMap)) {
-                    this._decoMap[c.id] = d3.select("#" + this._svgId).append("rect").attr("class", "deco");
-                }
-                this._decoMap[c.id].attr("x", b.left).attr("y", b.top)
-                    .attr("width", b.width).attr("height", b.height).attr("fill", "none")
-                    .attr("stroke", "#1ecb40").attr("stroke-width", "2px")
-                    .attr("stroke-dasharray", "5,5");
-            }
-        }
-
-        //render text/axis bound
-        // if (c.type == ElementType.PointText || c.type == ElementType.Axis) {
-        // 	let id = c.id + "-box";
-        // 	let b = c.bounds;
-        // 	if (!(id in this._decoMap)) {
-        // 		this._decoMap[id] = d3.select("#"+this._svgId).append("rect");
-        // 	}
-        // 	this._decoMap[id].attr("x", b.left).attr("y", b.top)
-        // 		.attr("width", b.width).attr("height", b.height).attr("fill", "none")
-        // 		.attr("stroke", "#1ecb40").attr("stroke-width", "1px")
-        // 		.attr("stroke-dasharray", "5,5");
-        // }
-
-        if (c.children) {
-            for (let child of c.children) {
-                this._renderItem(child, args);
-            }
-        }
-
-    }
-
-    _renderVertices(c) {
-        let id = c.id + "-vertices";
-        if (!(id in this._compMap)) {
-            let parent = c.parent,
-                pid = parent ? parent.id : this._svgId;
-            this._compMap[id] = d3.select("#" + pid).append("g").attr("id", id);
-        } else {
-            delete this._removed[id];
-        }
-
-        let shapes = c.vertices.map(d => d.shape).filter(d => d !== undefined);
-        if (shapes.length === 0) {
-            this._compMap[id].style("visible", "hidden");
-            return;
-        } else {
-            this._compMap[id].style("visible", "visible");
-        }
-
-        let vertices = c.vertices.filter(d => d.shape !== undefined);
-        for (let v of vertices) {
-            let vid = id + "-" + v.id;
-            if (!(vid in this._compMap)) {
-                this._compMap[vid] = d3.select("#" + id).append(v.shape).attr("id", vid);
-            } else if (v.shape !== this._compMap[vid].node().tagName) {
-                this._compMap[vid].remove();
-                this._compMap[vid] = d3.select("#" + id).append(v.shape).attr("id", vid);
-                delete this._removed[vid];
-            } else {
-                delete this._removed[vid];
-            }
-            if (v.shape == "rect") {
-                d3.select("#" + vid).attr("x", v.x - v.width / 2).attr("y", v.y - v.height / 2)
-                    .attr("width", v.width).attr("height", v.height);
-            } else if (v.shape == "circle") {
-                d3.select("#" + vid).attr("cx", v.x).attr("cy", v.y).attr("r", v.radius);
-            }
-            d3.select("#" + vid).style("fill", v.fillColor).style("opacity", v.opacity)
-                .style("stroke-width", v.strokeWidth).style("stroke", v.strokeColor);
-        }
-    }
-
-    _renderLayout(c) {
-        let gridId = c.id + "-grid";
-        if (!(gridId in this._decoMap)) {
-            this._decoMap[gridId] = d3.select("#" + this._svgId).append("g")
-                .attr("id", gridId).attr("class", "deco");
-        }
-        let cellBounds = c.layout.cellBounds, rowGap = c.layout.rowGap;
-        this._decoMap[gridId].selectAll("rect").remove();
-        this._decoMap[gridId].selectAll("rect").data(cellBounds.slice(0, cellBounds.length - 1))
-            .enter().append("rect").attr("x", d => d.left).attr("y", d => d.bottom)
-            .attr("width", d => d.width).attr("height", rowGap)
-            .style("fill", "pink").style("opacity", 0.5)
-            ;
-        for (let cb of cellBounds) {
-            this._decoMap[gridId].append("rect").attr("x", cb.left).attr("y", cb.top)
-                .attr("width", cb.width).attr("height", cb.height)
-                .attr("stroke", "blue").attr("stroke-width", "1px")
-                .attr("stroke-dasharray", "5,5").attr("fill", "none");
-        }
-        // let left = Math.min(...cellBounds.map(d => d.left)),
-        // 	top = Math.min(...cellBounds.map(d => d.top))
-        // this._decoMap[gridId].append("rect").attr("x", left).attr("y", top)
-        // 	.attr("width", c.bounds.width).attr("height", c.bounds.height)
-        // 	.attr("stroke", "blue").attr("stroke-width", "1px")
-        // 	.attr("stroke-dasharray", "5,5").attr("fill", "none");
-
-    }
-
-    _getTextAnchor(anchor) {
-        switch (anchor) {
-            case "top":
-                return "text-before-edge";
-            //return "hanging";
-            case "bottom":
-                //return "text-after-edge";
-                return "auto";
-            case "left":
-                return "start";
-            case "right":
-                return "end";
-            case "center":
-                return "middle";
-            case "middle":
-                return "middle";
-            default:
-                return anchor;
-        }
-    }
-
-    _getSVGElementType(cpnt) {
-        switch (cpnt.type) {
-            case ElementType.Rect:
-                return "rect";
-            case ElementType.Collection:
-            case ElementType.Group:
-            case ElementType.Glyph:
-            case ElementType.Scene:
-            case ElementType.Axis:
-            case ElementType.Legend:
-            case ElementType.Gridlines:
-                return "g";
-            case ElementType.Area:
-            case ElementType.Path:
-            case ElementType.Polygon:
-            case ElementType.Ring:
-            case ElementType.Pie:
-            case ElementType.Arc:
-            case ElementType.Link:
-            case ElementType.Line:
-                return "path";
-            case ElementType.Circle:
-                return "circle";
-            //return "line";
-            case ElementType.PointText:
-                return "text";
-            case "vertex":
-                if (cpnt.shape == "circle")
-                    return "circle";
-                else if (cpnt.shape == "rect")
-                    return "rect";
-                else throw "argument exception";
-            case "image":
-                return "image";
-            default:
-                break;
-        }
-    }
-}
-
-export const Style2SVG = Object.freeze({
-    "fillColor": "fill",
-    "strokeColor": "stroke",
-    "strokeWidth": "stroke-width",
-    "fillOpacity": "fill-opacity",
-    "strokeOpacity": "stroke-opacity",
-    "strokeDash": "stroke-dasharray",
-    "opacity": "opacity",
-    "fontSize": "font-size",
-    "fontFamily": "font-family",
-    "fontWeight": "font-weight",
-    "visibility": "visibility"
-});

package/src-new-ts/util.ts

@@ -1,3 +0,0 @@
-export function generateUniqueID() {
-    return Date.now().toString(36) + "_" + Math.random().toString(36).slice(2);
-}

package/src-old/action/Classify.js

@@ -1,53 +0,0 @@
-import DataScope from "../data/DataScope";
-import { ItemType } from "../util/Constants";
-import { getPeers } from "../util/ItemUtil";
-
-export function classifiable(item) {
-	if (item.type !== ItemType.Collection) return false;
-	if (item.children.length < 2) return false;
-	// if (!Array.isArray(items)) return false;
-	// if (items.length < 1) return false;
-	// for (let i of items) {
-	// 	if (!i.dataScope)
-	// 		return false;
-	// }
-	// let tbls = uniqueStrings(items.map(d => d.dataScope.dataTable.name));
-	// if (tbls.length > 1) return false;
-	return true;
-}
-
-export function classifyCollectionChildren(scene, c, field, layout) {
-    let peers = getPeers(c, scene);
-    for (let p of peers) {
-        let collections = {}, cid, items = p.children;
-        for (let item of items) {
-            let v = item.dataScope.getFieldValue(field);
-            if (!(v in collections)) {
-                collections[v] = [];
-            }
-            collections[v].push(item);
-        }
-        let tbl = items[0].dataScope._dt; //results = []; //,
-        for (let v in collections) {
-            let coll = scene.collection();
-            p.addChild(coll);
-            if (cid === undefined)
-                cid = coll.id;
-            coll.classId = cid;
-            coll.dataScope = p.dataScope ? p.dataScope.cross(field, v) : new DataScope(tbl).cross(field, v);
-            for (let c of collections[v]) {
-                coll.addChild(c);
-            }
-            // if (layout)
-            //     coll.layout = layout;
-            //results.push(coll);
-        }
-        // if (oldParent.children.length === 0) {
-        //     oldParent.parent.removeChild(oldParent);
-        // }
-    }
-
-    if (layout)
-        scene.setProperties(c.firstChild, {layout: layout});
-    //return results;
-}