mascot-vis 3.0.0 → 3.0.1

package/src-old/item/mark/ArcPath.js

@@ -1,181 +0,0 @@
-import Path from "./Path";
-import {ItemType} from "../../util/Constants";
-import Rectangle from "../../basic/Rectangle";
-import Point from "../../basic/Point";
-import { degree2radian } from "../../util/ItemUtil";
-
-export default class ArcPath extends Path {
-	
-	constructor(args) {
-		super(args);
-		
-		this._type = ItemType.Arc;
-		this.closed = true;
-		this._x = "x" in args ? args.x : 0;
-		this._y = "y" in args ? args.y : 0;
-		this._innerRadius = "innerRadius" in args ? args.innerRadius : 100;
-        this._outerRadius = "outerRadius" in args ? args.outerRadius : 200;
-        this._startAngle = "startAngle" in args ? args.startAngle : 0;
-        this._endAngle = "endAngle" in args ? args.endAngle : 90;
-        this._sr = degree2radian(this._startAngle);
-        this._er = degree2radian(this._endAngle);
-
-        let isx = this._x + this._innerRadius * Math.cos(this._sr), isy = this._y - this._innerRadius * Math.sin(this._sr),
-            iex = this._x + this._innerRadius * Math.cos(this._er), iey = this._y - this._innerRadius * Math.sin(this._er),
-            osx = this._x + this._outerRadius * Math.cos(this._sr), osy = this._y - this._outerRadius * Math.sin(this._sr),
-            oex = this._x + this._outerRadius * Math.cos(this._er), oey = this._y - this._outerRadius * Math.sin(this._er);
-        this._setVertices([[isx, isy], [osx, osy], [oex, oey], [iex, iey]]);
-	}
-
-    get type() {
-        return this._innerRadius === 0 ? ItemType.Pie : ItemType.Arc;
-    }
-
-    set type(t) {
-        this._type = t;
-    }
-
-	get innerRadius() {
-		return this._innerRadius;
-	}
-
-    set innerRadius(r) {
-		this._innerRadius = r;
-        this.vertices[0].x = this._x + this._innerRadius * Math.cos(this._sr);
-        this.vertices[0].y = this._y - this._innerRadius * Math.sin(this._sr);
-        this.vertices[3].x = this._x + this._innerRadius * Math.cos(this._er);
-        this.vertices[3].y = this._y - this._innerRadius * Math.sin(this._er);
-        this._updateBounds();
-	}
-
-    get outerRadius() {
-		return this._outerRadius;
-	}
-
-    get thickness() {
-        return this._outerRadius - this._innerRadius;
-    }
-
-    set outerRadius(r) {
-		this._outerRadius = r;
-        this.vertices[1].x = this._x + this._outerRadius * Math.cos(this._sr);
-        this.vertices[1].y = this._y - this._outerRadius * Math.sin(this._sr);
-        this.vertices[2].x = this._x + this._outerRadius * Math.cos(this._er);
-        this.vertices[2].y = this._y - this._outerRadius * Math.sin(this._er);
-		this._updateBounds();
-	}
-
-	get x() {
-		return this._x;
-	}
-
-	get y() {
-		return this._y;
-	}
-
-	get center() {
-		return new Point(this._x, this._y);
-	}
-
-	set x(v) {
-		this._x = v;
-        this.vertices[0].x = this._x + this._innerRadius * Math.cos(this._sr);
-        this.vertices[1].x = this._x + this._outerRadius * Math.cos(this._sr);
-        this.vertices[2].x = this._x + this._outerRadius * Math.cos(this._er);
-        this.vertices[3].x = this._x + this._innerRadius * Math.cos(this._er);
-		this._updateBounds();
-	}
-
-	set y(v) {
-		this._y = v;
-        this.vertices[0].y = this._y - this._innerRadius * Math.sin(this._sr);
-        this.vertices[1].y = this._y - this._outerRadius * Math.sin(this._sr);
-        this.vertices[2].y = this._y - this._outerRadius * Math.sin(this._er);
-        this.vertices[3].y = this._y - this._innerRadius * Math.sin(this._er);
-		this._updateBounds();
-	}
-
-	get startAngle() {
-        return this._startAngle;
-    }
-
-    get endAngle() {
-        return this._endAngle;
-    }
-
-    get angle() {
-        if (this._endAngle < this._startAngle) {
-            return this._endAngle + 360 - this._startAngle;
-        } else {
-            return this._endAngle - this._startAngle;
-        }
-    }
-
-    //if the sweep angle of this arc contains the arc argument
-    sweepOver(arc) {
-        let as = this.startAngle, ae = this.endAngle;
-        if (ae < as)    ae += 360;
-        let bs = arc.startAngle, be = arc.endAngle;
-        if (be < bs)    be += 360;
-        return bs >= as && bs <= ae && be >= as && be <= ae;
-    }
-
-	_doTranslate(dx, dy) {
-		this._x += dx;
-		this._y += dy;
-        this.vertices[0].x = this._x + this._innerRadius * Math.cos(this._sr);
-        this.vertices[0].y = this._y - this._innerRadius * Math.sin(this._sr);
-        this.vertices[1].x = this._x + this._outerRadius * Math.cos(this._sr);
-        this.vertices[1].y = this._y - this._outerRadius * Math.sin(this._sr);
-        this.vertices[2].x = this._x + this._outerRadius * Math.cos(this._er);
-        this.vertices[2].y = this._y - this._outerRadius * Math.sin(this._er);
-        this.vertices[3].x = this._x + this._innerRadius * Math.cos(this._er);
-        this.vertices[3].y = this._y - this._innerRadius * Math.sin(this._er);
-		this._updateBounds();
-	}
-
-	_updateBounds() {		
-		this._bounds = new Rectangle(this._x - this._outerRadius, this._y - this._outerRadius, this._outerRadius * 2, this._outerRadius * 2);
-	}
-
-	copyPropertiesTo(target) {
-		super.copyPropertiesTo(target);
-		target._x = this._x;
-		target._y = this._y;
-		target._innerRadius = this._innerRadius;
-        target._outerRadius = this._outerRadius;
-        target._startAngle = this._startAngle;
-        target._endAngle = this._endAngle;
-        target._sr = this._sr;
-        target._er = this._er;
-	}
-
-    getSVGPathData() {
-        let angle = this._endAngle < this._startAngle? this._endAngle + 360 - this._startAngle : this._endAngle - this._startAngle, 
-            largeArc = angle > 180 ? 1 : 0;
-        let cmds = [
-            "M " + this.vertices[0].x + ", " + this.vertices[0].y,
-            "L " + this.vertices[1].x + ", " + this.vertices[1].y,
-            "A " + [this._outerRadius, this._outerRadius, angle, largeArc, 0, this.vertices[2].x, this.vertices[2].y].join(" "),
-            "L " + this.vertices[3].x + ", " + this.vertices[3].y,
-            "A " + [this._innerRadius, this._innerRadius, angle, largeArc, 1, this.vertices[0].x, this.vertices[0].y].join(" ")
-        ];
-        return cmds.join(" ");
-    }
-
-    adjustAngle(startAngle, endAngle) {
-        this._startAngle = startAngle;
-        this._endAngle = endAngle;
-        this._sr = degree2radian(this._startAngle);
-        this._er = degree2radian(this._endAngle);
-
-        this.vertices[0].x = this._x + this._innerRadius * Math.cos(this._sr);
-        this.vertices[0].y = this._y - this._innerRadius * Math.sin(this._sr);
-        this.vertices[1].x = this._x + this._outerRadius * Math.cos(this._sr);
-        this.vertices[1].y = this._y - this._outerRadius * Math.sin(this._sr);
-        this.vertices[2].x = this._x + this._outerRadius * Math.cos(this._er);
-        this.vertices[2].y = this._y - this._outerRadius * Math.sin(this._er);
-        this.vertices[3].x = this._x + this._innerRadius * Math.cos(this._er);
-        this.vertices[3].y = this._y - this._innerRadius * Math.sin(this._er);
-    }
-}

package/src-old/item/mark/AreaPath.js

@@ -1,78 +0,0 @@
-import Path from "./Path";
-import Segment from "../Segment";
-import {ItemType} from "../../util/Constants"
-
-export default class AreaPath extends Path {
-	
-	constructor(args) {
-		super(args);
-		
-		this.type = ItemType.Area;
-		this.closed = true;
-		this._orientation = ("orientation" in args) ? args.orientation : undefined;
-		this._baseline = ("baseline" in args) ? args.baseline : undefined;
-
-		//add last segment to close the path
-		if (args && "vertices" in args)
-			this.segments.push(new Segment(this.vertices[this.vertices.length-1], this.vertices[0], this, this.segmentCounter++));
-	}
-
-	get baseline() {
-		return this._baseline;
-	}
-
-	set baseline(b) {
-		this._baseline = b;
-	}
-
-	//this._orientation is set during densification
-	get orientation() {
-		return this._orientation;
-	}
-
-	set orientation(o) {
-		this._orientation = o;
-	}
-
-	get firstVertexPair() {
-		return [this.vertices[0], this.vertices[this.vertices.length-1]];
-	}
-
-	get width() {
-		return this.vertices[this.vertices.length/2].x - this.vertices[0].x;
-	}
-
-	get height() {
-		return this.vertices[this.vertices.length/2].y - this.vertices[0].y;
-	}
-
-	get left() {
-		return this.vertices[0].x;
-	}
-
-	get top() {
-		return this.vertices[0].y;
-	}
-
-	copyPropertiesTo(target) {
-		super.copyPropertiesTo(target);
-		target._baseline = this._baseline;
-		target._orientation = this._orientation;
-	}
-
-	resizeArea(wd, ht) {
-		let x1 = this.vertices[this.vertices.length/2].x,
-			y1 = this.vertices[this.vertices.length/2].y,
-			width = this.width,
-			height = this.height;
-		for (let v of this.vertices) {
-			v.x = x1 + (wd/width) * (v.x - x1);
-			v.y = y1 + (ht/height) * (v.y - y1);
-		}
-		this._updateBounds();
-	}
-
-	getSVGPathData() {
-		return super.getSVGPathData() + " " + 'z';
-	}
-}

package/src-old/item/mark/CirclePath.js

@@ -1,102 +0,0 @@
-import Path from "./Path";
-import Rectangle from "../../basic/Rectangle";
-
-export default class CirclePath extends Path {
-	
-	constructor(args) {
-		super(args);
-		
-		// this.type = ItemType.Circle;
-		// this.closed = true;
-		this.attrs["x"] = "x" in args ? args.x : 0;
-		this.attrs["y"] = "y" in args ? args.y : 0;
-		this.attrs["radius"] = "radius" in args ? args.radius : 100;
-		// this.attrs["x"] = args.hasOwnProperty("x") ? args.x : 0;
-		// this.attrs["y"] = args.hasOwnProperty("y") ? args.y : 0;
-		// this.attrs["radius"] = args.hasOwnProperty("radius") ? args.radius : 100;
-	}
-
-	get radius() {
-		return this.attrs["radius"];
-	}
-
-	get x() {
-		return this.attrs["x"];
-	}
-
-	get y() {
-		return this.attrs["y"]; //this.attrs["y"];
-	}
-
-	get area() {
-		return Math.PI * Math.pow(this.radius, 2);
-	}
-
-	set x(v) {
-		this.attrs["x"] = v;
-		this._updateBounds();
-	}
-
-	set y(v) {
-		this.attrs["y"] = v;
-		this._updateBounds();
-	}
-
-	set radius(r) {
-		this.attrs["radius"] = r;
-		this._updateBounds();
-	}
-
-	set area(a) {
-		this.attrs["radius"] = Math.sqrt(a);
-		this._updateBounds();
-	}
-
-	// set width(w) {
-	// 	this.attrs["radius"] = w/2;
-	// 	this._updateBounds();
-	// }
-
-	// set height(h) {
-	// 	this.attrs["radius"] = h/2;
-	// 	this._updateBounds();
-	// }
-
-	resize(w, h, xRef, yRef) {
-		let r = Math.min(w, h)/2, diff = r - this.attrs["radius"];
-		this.attrs["radius"] = r;
-		if (xRef == "right") {
-			this.attrs["x"] -= diff;
-		} else {
-			this.attrs["x"] += diff;
-		}
-		if (yRef == "top") {
-			this.attrs["y"] += diff;
-		} else {
-			this.attrs["y"] -= diff;
-		}
-		this._updateBounds();
-	}
-
-	_doTranslate(dx, dy) {
-		this.attrs["x"] += dx;
-		this.attrs["y"] += dy;
-		this._updateBounds();
-	}
-
-	_updateBounds() {		
-		this._bounds = new Rectangle(this.attrs["x"] - this.attrs["radius"], this.attrs["y"] - this.attrs["radius"], this.attrs["radius"] * 2, this.attrs["radius"] * 2);
-	}
-
-	copyPropertiesTo(target) {
-		super.copyPropertiesTo(target);
-		target.attrs["x"] = this.attrs["x"];
-		target.attrs["y"] = this.attrs["y"];
-		target.attrs["radius"] = this.attrs["radius"];
-	}
-
-	getSVGPathData() {
-		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(" ");
-	}
-
-}

package/src-old/item/mark/EllipsePath.js

@@ -1,5 +0,0 @@
-import Path from "./Path";
-
-export default class EllipsePath extends Path{
-
-}

package/src-old/item/mark/Image.js

@@ -1,101 +0,0 @@
-import Rectangle from "../../basic/Rectangle";
-import { ItemType } from "../../util/Constants";
-import Mark from "./Mark";
-
-export default class Image extends Mark {
-
-    constructor(args) {
-		super(args);
-		this.type = ItemType.Image;
-        this._src = args.src;
-        this._x = "x" in args ? args.x : 0;
-        this._y = "y" in args ? args.y : 0;
-        this._width = "width" in args ? args.width : 100;
-        this._height = "height" in args ? args.height: 100;
-    }
-
-    toJSON() {
-        let json = super.toJSON();
-        json.src = this._src;
-        json.x = this._x;
-        json.y = this._y;
-        json.width = this._width;
-        json.height = this._height;
-        return json;
-    }
-
-
-    get src() {
-        return this._src;
-    }
-
-    set src(s) {
-        this._src = s;
-    }
-
-    get width() {
-        return this._width;
-    }
-
-    set width(w) {
-        this._width = w;
-        this._updateBounds();
-    }
-
-    get height() {
-        return this._height;
-    }
-
-    set height(h) {
-        this._height = h;
-        this._updateBounds();
-    }
-
-    get x() {
-        return this._x;
-    }
-
-    set x(v) {
-        this._x = v;
-        this._updateBounds();
-    }
-
-    get y() {
-        return this._y;
-    }
-
-    set y(v) {
-        this._y = v;
-        this._updateBounds();
-    }
-
-    get bounds() {
-		if (!this._bounds)
-			this._updateBounds();
-		return this._bounds;
-	}
-
-    _updateBounds() {		
-		this._bounds = new Rectangle(this._x, this._y, this._width, this._height);
-	}
-
-    copyPropertiesTo(target) {
-		target.attrs = Object.assign({}, this.attrs);
-		target.styles = Object.assign({}, this.styles);
-		
-		if (this._dataScope)
-			target._dataScope = this._dataScope.clone();
-		
-        target.x = this._x;
-        target.y = this._y;
-        target.width = this._width;
-        target.height = this._height;
-        target.src = this._src;
-	}
-
-    _doTranslate(dx, dy) {
-        this._x += dx;
-        this._y += dy;
-        this._updateBounds();
-    }
-}

package/src-old/item/mark/LinkPath.js

@@ -1,118 +0,0 @@
-import Rectangle from "../../basic/Rectangle";
-import { ItemType } from "../../util/Constants";
-import { SVGProvider } from "../../util/ItemUtil";
-import Path from "./Path";
-
-export default class LinkPath extends Path {
-
-    constructor(args) {
-        super(args);
-
-        this.type = ItemType.Link;
-        this.linkMode = "linkMode" in args ? args.linkMode : "linear";
-
-        this.source = undefined;
-        this.target = undefined;
-        this.directed = "directed" in args ? args.directed : false;
-
-        this.sourceAnchor = "sourceAnchor" in args ? args.sourceAnchor : ["center", "middle"];
-        this.targetAnchor = "targetAnchor" in args ? args.targetAnchor : ["center", "middle"];
-        this.sourceOffset = "sourceOffset" in args ? args.sourceOffset : [0, 0];
-        this.targetOffset = "targetOffset" in args ? args.targetOffset : [0, 0];
-    }
-
-
-    //Implemented according to bezier curve implementation in d3
-    // https://github.com/d3/d3-shape/blob/main/src/link/index.js
-    radialvalue(x, y) {
-        let xBar = x- Math.PI / 2;
-        x = y * Math.cos(xBar);
-        y = y * Math.sin(x);
-        return [x, y];
-    }
-
-    bezierCurveHorizontal(x1, y1, x2, y2) {
-        return `M ${x1} ${y1} C ${(x1+x2)/2} ${y1} ${x1} ${y2} ${x2} ${y2}`
-    }
-
-    bezierCurveVertical(x1, y1, x2, y2) {
-        return `M ${x1} ${y1} C ${x1} ${(y1+y2)/2} ${x2} ${y1} ${x2} ${y2}`
-    }
-
-    bezierCurveRadial(x1, y1, x2, y2) {
-        let r0 = this.radialvalue(x1, y1),
-            r1 = this.radialvalue(x1, (y1 + y2) / 2),
-            r2 = this.radialvalue(x2, y1),
-            r3 = this.radialvalue(x2, y2);
-
-        return `M ${r0[0]} ${r0[1]} C ${r1[0]} ${r1[1]} ${r2[0]} ${r2[1]} ${r3[0]} ${r3[1]}`
-    }
-
-    arc(x1, y1, x2, y2, clockwise) {
-        let sx = x1, ex = x2, sy = y1, ey = y2;
-        if (!this.directed && x1 > x2) {
-            sx = x2;
-            ex = x1;
-            sy = y2;
-            ey = y1;
-        }
-        let rx = Math.abs(sx-ex)/2,
-            ry = Math.abs(sy-ey)/2,
-            r = Math.max(rx, ry),
-            sweep_flag = clockwise ? 1 : 0;
-        return `M ${sx} ${sy} A ${r} ${r} 0 0 ${sweep_flag} ${ex} ${ey}`
-    }
-
-    _updateBounds() {
-        if (this.source != undefined && this.target != undefined){
-            let x1 = this.source.bounds[this.sourceAnchor[0]] + this.sourceOffset[0],
-                y1 = this.source.bounds[this.sourceAnchor[1]] + this.sourceOffset[1],
-                x2 = this.target.bounds[this.targetAnchor[0]] + this.targetOffset[0],
-                y2 = this.target.bounds[this.targetAnchor[1]] + this.targetOffset[1];
-            this._bounds = new Rectangle(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x1 - x2), Math.abs(y1 - y2));
-        } else {
-            this._bounds = new Rectangle(0,0,0,0);
-        }
-    }
-
-
-    getSVGPathData() {
-        if (this.source === undefined || this.target === undefined)
-            return "";
-        let x1 = this.source.bounds[this.sourceAnchor[0]] + this.sourceOffset[0],
-            y1 = this.source.bounds[this.sourceAnchor[1]] + this.sourceOffset[1],
-            x2 = this.target.bounds[this.targetAnchor[0]] + this.targetOffset[0],
-            y2 = this.target.bounds[this.targetAnchor[1]] + this.targetOffset[1];
-        switch (this.linkMode) {
-            case "curveHorizontal":
-                return this.bezierCurveHorizontal(x1, y1, x2, y2);
-            case "curveVertical":
-                return this.bezierCurveVertical(x1, y1, x2, y2);
-            case "arcClockwise":
-                return this.arc(x1, y1, x2, y2, true);
-            case "arcAntiClockwise":
-                return this.arc(x1, y1, x2, y2, false);
-            case "linear":
-            default:
-                return `M ${x1} ${y1} L ${x2} ${y2}`;
-        }
-    }
-
-    copyPropertiesTo(target) {
-        super.copyPropertiesTo(target);
-        target.sourceAnchor = this.sourceAnchor.slice();
-        target.targetAnchor = this.targetAnchor.slice();
-        target.sourceOffset = this.sourceOffset.slice();
-        target.targetOffset = this.targetOffset.slice();
-        target.linkMode = this.linkMode;
-    }
-
-    getPointAt(frac) {
-        const svg = SVGProvider.getSVG();
-        let path = document.createElementNS("http://www.w3.org/2000/svg", 'path');
-        path.setAttribute("d", this.getSVGPathData());
-        svg.appendChild(path);
-        let len = path.getTotalLength();
-        return path.getPointAtLength(len * frac);
-    }
-}