mascot-vis 3.0.0 → 3.0.1

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

@@ -1,163 +0,0 @@
-// Based on item.Item.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 LinearGradient from "../../basic/Gradient";
-import {Style2SVG, ItemType} from "../../util/Constants";
-import { CanvasProvider } from "../../util/ItemUtil";
-
-export default class Mark {
-
-	constructor(args) {
-		this._dataScope = undefined;
-		this._id = undefined;
-
-		this.attrs = {};
-		this.styles = {};
-		this.staticProperties = {};
-
-		if (args !== undefined) {
-			for (let s in Style2SVG) {
-				if (s in args) {
-					this.styles[s] = args[s];
-				}
-			}
-		}
-	}
-
-	get id() {
-		return this._id;
-	}
-
-	set id(id) {
-		if (this.getScene()){
-			delete this.getScene()._itemMap[this._id];
-			this._id = id;
-			this.getScene()._itemMap[id] = this;
-		} else {
-			this._id = id;
-		}
-	}
-
-	//TODO: implement winding contribution, see paper.js PathItem.Boolean.js
-	contains(px, py) {
-		if (!this._bounds)
-			return false;
-		if (!this._bounds.contains(px, py))
-			return false;
-		switch (this.type) {
-			case ItemType.Rect:
-			case ItemType.PointText:
-				return true;
-			case ItemType.Circle: {
-				let dist = Math.sqrt(Math.pow(px - this.x, 2) + Math.pow(py - this.y, 2));
-				return dist <= this.radius + this.strokeWidth;
-			}
-			case ItemType.Path: {
-				let ctx = CanvasProvider.getContext(),
-					p = new Path2D(this.getSVGPathData());
-				ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
-				ctx.stroke(p);
-				if (this.closed) {
-					return ctx.isPointInPath(p, px, py);
-				} else {
-					return ctx.isPointInStroke(p, px, py);
-				}
-			}
-			case ItemType.Line: {
-				let ctx = CanvasProvider.getContext(),
-					p = new Path2D(this.getSVGPathData());
-				ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
-				ctx.stroke(p);
-				return ctx.isPointInStroke(p, px, py);
-			}
-			default: {
-				let ctx = CanvasProvider.getContext(),
-					p = new Path2D(this.getSVGPathData());
-				return ctx.isPointInPath(p, px, py);
-			}
-		}
-	}
-
-	toJSON() {
-		let json = {};
-		json.type = this.type;
-		json.id = this.id;
-		if (this.classId)
-			json.classId = this.classId;
-		if (this._dataScope)
-			json.dataScope = this._dataScope.toJSON();
-		json.args = {};
-		for (let s in this.attrs) {
-			json.args[s] = this.attrs[s];
-		}
-
-		for (let s in this.styles) {
-			if (s.indexOf("Color") > 0 && this.styles[s] instanceof LinearGradient) {
-				json.args[s] = this.styles[s].toJSON();
-			} else {
-				json.args[s] = this.styles[s];
-			}
-		}
-		return json;
-	}
-
-	getScene() {
-		let p = this;
-		while (p) {
-			if (p.type == ItemType.Scene)
-				return p;
-			else
-				p = p.parent;
-		}
-	}
-
-	set dataScope(ds) {
-		this._dataScope = ds;
-	}
-
-	get dataScope() {
-		return this._dataScope;
-	}
-
-	duplicate() {
-		let scene = this.getScene();
-		let m = scene.mark(this.type);
-		this.copyPropertiesTo(m);
-		m.classId = this.classId;
-		if (this._dataScope) {
-			m._dataScope = this._dataScope.clone();
-		}
-		return m;
-	}
-
-	// eslint-disable-next-line no-unused-vars
-	_doTranslate(dx, dy){
-		//child classes have their own implementations
-	}
-
-	set visibility(v) {
-		this.styles["visibility"] = v;
-	}
-
-	get visibility() {
-		if (!this.styles["visibility"])
-			return "visible";
-		return this.styles["visibility"];
-	}
-
-	get opacity() {
-		if (!("opacity" in this.styles))
-			return 1;
-		return this.styles["opacity"];
-	}
-
-	set opacity(c) {
-		this.styles["opacity"] = c;
-	}
-}

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

@@ -1,494 +0,0 @@
-import Mark from "./Mark";
-import Vertex from "../Vertex";
-import Segment from "../Segment";
-import Rectangle from "../../basic/Rectangle";
-import Point from "../../basic/Point";
-import {ItemType, CurveMode} from "../../util/Constants"
-import * as d3 from 'd3';
-
-export default class Path extends Mark {
-	
-	constructor(args) {
-		super(args);
-		this.type = "type" in args ? args.type : ItemType.Path;
-
-		if (!("strokeColor" in this.styles))
-			this.styles["strokeColor"] = "#ccc";
-		if (!("strokeWidth" in this.styles))
-			this.styles["strokeWidth"] = 1;
-		if (!("strokeDash" in this.styles))
-			this.styles["strokeDash"] = "none";
-
-		this.vertices = [];
-		this.vertexCounter = 0; //for assigning vertex ids
-		this.segmentCounter = 0;
-		this.segments = [];
-
-		this.anchor = undefined;
-
-		this.closed = false;
-
-		this.curveMode = "linear";
-
-		//when a path encodes data using its width or height, its geometric bounds may not be the same as its orginal bounds without encoding applied
-		this.boundsOffsets = {top: 0, bottom: 0, left: 0, right: 0};
-
-		this._vxShape = undefined;
-		this._vxWidth = 0;
-		this._vxHeight = 0;
-		this._vxRadius = 0;
-		this._vxFillColor = "#555555";
-		this._vxStrokeColor = "#aaaaaa";
-		this._vxStrokeWidth = 0;
-		this._vxOpacity = 1;
-
-		if (args !== undefined) {
-			for (let vs of Vertex.styles){
-				if (vs in args)
-					this["_" + vs] = args[vs];
-			}
-
-			if ("vertices" in args) {
-				this._setVertices(args["vertices"]);
-			}
-		}
-	}
-
-	toJSON() {
-		let json = super.toJSON();
-		json.type = this.type;
-		json.id = this.id;
-		switch (this.type) {
-			case ItemType.Rect:
-				json.args.width = this.width;
-				json.args.height = this.height;
-				json.args.top = this.top;
-				json.args.left = this.left;
-				break;
-			case ItemType.Circle:
-				json.args.x = this.x;
-				json.args.y = this.y;
-				json.args.radius = this.radius;
-				break;
-			case ItemType.Arc:
-			case ItemType.Pie:
-				json.args.x = this._x;
-				json.args.y = this._y;
-				json.args.innerRadius = this._innerRadius;
-				json.args.outerRadius = this._outerRadius;
-				json.args.startAngle = this._startAngle;
-				json.args.endAngle = this._endAngle;
-				break;
-			case ItemType.Link:
-				json.args.mode = this.mode;
-				json.args.directed = this.directed;
-				json.args.sourceAnchor = this.sourceAnchor;
-				json.args.targetAnchor = this.targetAnchor;
-				json.args.sourceOffset = this.sourceOffset;
-				json.args.targetOffset = this.targetOffset;
-				json.args.source = this.source.id;
-				json.args.target = this.target.id;
-				break;
-			default:
-				json.vertices = [];
-				for (let v of this.vertices)
-					json.vertices.push(v.toJSON());
-				if (this.type === ItemType.Polygon) {
-					json.args.x = this._x;
-					json.args.y = this._y;
-					json.args.radius = this._radius;
-				} else if (this.type === ItemType.Area) {
-					json.args.baseline = this._baseline;
-					json.args.orientation = this._orientation;
-				}
-				break;
-		}
-		// if (this.type === ItemType.Rect) {
-		// 	json.args.width = this.width;
-		// 	json.args.height = this.height;
-		// 	json.args.top = this.top;
-		// 	json.args.left = this.left;
-		// } else if (this.type === ItemType.Circle) {
-		// 	json.args.x = this.x;
-		// 	json.args.y = this.y;
-		// 	json.args.radius = this.radius;
-		// } else if (this.type === ItemType.Arc) {
-		// 	json.args.x = this._x;
-		// 	json.args.y = this._y;
-		// 	json.args.innerRadius = this._innerRadius;
-		// 	json.args.outerRadius = this._outerRadius;
-		// 	json.args.startAngle = this._startAngle;
-		// 	json.args.endAngle = this._endAngle;
-		// } else if (this.type === ItemType.Pie) {
-		// 	json.args.x = this._x;
-		// 	json.args.y = this._y;
-		// 	json.args.radius = this.radius;
-		// 	json.args.startAngle = this.startAngleDeg;
-		// 	json.args.endAngle = this.endAngleDeg;
-		// } else {
-		// 	json.vertices = [];
-		// 	for (let v of this.vertices)
-		// 		json.vertices.push(v.toJSON());
-		// 	if (this.type === ItemType.Polygon) {
-		// 		json.args.x = this._x;
-		// 		json.args.y = this._y;
-		// 		json.args.radius = this._radius;
-		// 	} else if (this.type === ItemType.Area) {
-		// 		json.args.baseline = this._baseline;
-		// 		json.args.orientation = this._orientation;
-		// 	}
-		// }
-		json.vertexCounter = this.vertexCounter;
-		json.segmentCounter = this.segmentCounter;
-		//do not save segments, anchor and closed for now
-		json.curveMode = this.curveMode;
-		if (this._bounds)
-			json.bounds = this._bounds.toJSON();
-		json.boundsOffsets = this.boundsOffsets;
-		for (let s of Vertex.styles) {
-			json.args[s] = this[s];
-		}
-		return json;
-	}
-
-	_setVertices(vertices) {
-		let vertex, point;
-		this.vertices = [];
-		this.segments = [];
-		for (let i = 0; i < vertices.length; i++) {
-
-			if (i == vertices.length - 1 && vertices[i][0] === vertices[0][0] && vertices[i][1] === vertices[0][1] && this.type === ItemType.Path) {
-				continue;
-			}
-
-			point = new Point(vertices[i][0], vertices[i][1]);
-
-			vertex = new Vertex(point, this, this.vertexCounter++);
-
-			for (let vs of Vertex.styles){
-				if (this[vs]){
-					let temp = vs.replace("vx", "");
-					vertex[temp[0].toLowerCase() + temp.slice(1)] = this[vs];
-				}
-			}
-
-			this.vertices.push(vertex);
-			if (i > 0)
-				this.segments.push(new Segment(this.vertices[i-1], this.vertices[i], this, this.segmentCounter++));
-		}
-		//if the first vertex has the same position as the last, this path is closed
-		let first = vertices[0], last = vertices[vertices.length - 1];
-		if ((first[0] === last[0] && first[1] === last[1]) || this.type === ItemType.Rect) {
-			this.closed = true;
-			if (!("fillColor" in this.styles))
-				this.styles["fillColor"] = "#fff";
-			this.segments.push(new Segment(this.vertices[this.vertices.length-1], this.vertices[0], this, this.segmentCounter++));
-		}
-	}
-
-	copyPropertiesTo(target) {
-		target.attrs = Object.assign({}, this.attrs);
-		target.styles = Object.assign({}, this.styles);
-		for (let vs of Vertex.styles){
-			if (this["_"+vs])
-				target["_"+vs] = this["_"+vs];
-		}
-		if (this._dataScope)
-			target._dataScope = this._dataScope.clone();
-		target.closed = this.closed;
-		target.curveMode = this.curveMode;
-		target.vertices = [];
-		target.segments = [];
-		for (let v of this.vertices) {
-			target.vertices.push(v._clone(target));
-		}
-		target.segmentCounter = 0;
-		for (let i = 1; i < target.vertices.length; i++) {
-			target.segments.push(new Segment(target.vertices[i-1], target.vertices[i], target, target.segmentCounter++));
-		}
-		if (target.closed)
-			target.segments.push(new Segment(target.vertices[target.vertices.length-1], target.vertices[0], target, target.segmentCounter++));
-	}
-
-	/*
-	* returns the bounds without incorporating transformations involving rotation
-	*/
-	get bounds() {
-		if (!this._bounds)
-			this._updateBounds();
-		return this._bounds;
-	}
-
-	/**
-	 * return the bounds as if the path does not encode data
-	 */
-	get refBounds() {
-		if (!this._bounds)
-			this._updateBounds();
-		let ht = (this._bounds.bottom + this.boundsOffsets.bottom) - (this._bounds.top - this.boundsOffsets.top),
-			wd = this._bounds.right + this.boundsOffsets.right - (this._bounds.left - this.boundsOffsets.left);
-		return new Rectangle(this._bounds.left - this.boundsOffsets.left, this._bounds.top - this.boundsOffsets.top,  wd, ht);
-	}
-
-	get x() {
-		return this.bounds.x;
-	}
-
-	get y() {
-		return this.bounds.y;
-	}
-
-	get strokeColor() {
-		return this.styles["strokeColor"];
-	}
-
-	set strokeColor(c) {
-		this.styles["strokeColor"] = c;
-	}
-
-	get strokeWidth() {
-		return this.styles["strokeWidth"];
-	}
-
-	set strokeWidth(c) {
-		this.styles["strokeWidth"] = c;
-	}
-
-	get fillColor() {
-		return this.styles["fillColor"];
-	}
-
-	set fillColor(c) {
-		this.styles["fillColor"] = c;
-	}
-
-	get strokeDash() {
-		return this.styles["strokeDash"];
-	}
-
-	set strokeDash(c) {
-		this.styles["strokeDash"] = c;
-	}
-
-	_doTranslate(dx, dy) {
-		for (let v of this.vertices) {
-			v._doTranslate(dx, dy);
-		}
-		this._updateBounds();
-	}
-
-	//by default, with respect to the center of bounds
-	resize(wd, ht, xRef, yRef) {
-		let bounds = this.bounds, bWidth = bounds.width === 0 ? 1 : bounds.width, bHeight = bounds.height === 0 ? 1 : bounds.height;
-		if (xRef === "right") {
-			for (let v of this.vertices) {
-				v.x = bounds.right - (wd/bWidth) * (bounds.right - v.x);
-			}
-		} else {
-			for (let v of this.vertices) {
-				v.x = bounds.left + (wd/bWidth) * (v.x - bounds.left);
-			}
-		}
-		if (yRef === "top") {
-			for (let v of this.vertices) {
-				v.y = bounds.top + (ht/bHeight) * (v.y - bounds.top);
-			}
-		} else {
-			for (let v of this.vertices) {
-				v.y = bounds.bottom - (ht/bHeight) * (bounds.bottom - v.y);
-			}
-		}
-		this._updateBounds();
-	}
-
-	_updateBounds() {		
-		let vx = this.vertices.map(d => d.x),
-			vy = this.vertices.map(d => d.y);
-
-		let left = Math.min(...vx), top = Math.min(...vy), right = Math.max(...vx), btm = Math.max(...vy);
-		
-		this._bounds = new Rectangle(left, top, right - left, btm - top);
-		if (this.type === ItemType.Line || this.type === ItemType.Path) {
-			let sw = this.styles["strokeWidth"] ? this.styles["strokeWidth"] : 1;
-			if (left === right)
-				this._bounds = new Rectangle(left - sw/2, top, right - left + sw, btm - top);
-			else if (top === btm)
-				this._bounds = new Rectangle(left, top - sw/2, right - left, btm - top + sw);
-		}
-	}
-
-	addVertex(x, y, i) {
-		let vertex = new Vertex(new Point(x, y), this, this.vertexCounter++);
-		this.vertices.splice(i, 0, vertex);
-		//TODO: handle segments
-	}
-
-	sortVertices(channel, descending) {
-		this.vertices.sort((a,b) => a[channel] - b[channel]);
-		if (descending)
-			this.vertices.reverse();
-		for (let i = 0; i < this.segments.length; i++) {
-			let segment = this.segments[i];
-			segment.vertex1 = this.vertices[i];
-			segment.vertex2 = this.vertices[(i+1)%this.vertices.length];
-		}
-	}
-
-	sortVerticesByData(field, descending, order) {
-		let f;
-		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 );
-		this.vertices.sort(f);
-		if (descending)
-			this.vertices.reverse();
-		for (let i = 0; i < this.segments.length; i++) {
-			let segment = this.segments[i];
-			segment.vertex1 = this.vertices[i];
-			segment.vertex2 = this.vertices[(i+1)%this.vertices.length];
-		}
-	}
-
-	getSVGPathData() {
-		let p = d3.path();
-		let curve = this._getD3CurveFunction(this.curveMode)(p);
-		curve.lineStart();
-		for (let vertex of this.vertices) {
-			curve.point(vertex.x, vertex.y);
-		}
-		if (this.closed)
-			curve.point(this.vertices[0].x, this.vertices[0].y);
-		curve.lineEnd();
-
-		return p._;
-	}
- 
-	// toSVG() {
-
-	// }
-
-	// fromSVG() {
-
-	// }
-
-	get firstVertex() {
-		return this.vertices[0];
-	}
-
-	get firstSegment() {
-		return this.segments[0];
-	}
-
-	get lastVertex() {
-		return this.vertices[this.vertices.length - 1];
-	}
-
-	get lastSegment() {
-		return this.segments[this.segments.length - 1];
-	}
-
-	_getD3CurveFunction(v){
-		switch(v) {
-			case CurveMode.Natural:
-				return d3.curveNatural;
-			case CurveMode.Basis:
-				return d3.curveBasis;
-			case CurveMode.BumpX:
-				return d3.curveBumpX;
-			case CurveMode.BumpY:
-				return d3.curveBumpY;
-			case CurveMode.Linear:
-				return d3.curveLinear;
-			case CurveMode.Step:
-				return d3.curveStep;
-			case CurveMode.CatmullRom:
-				return d3.curveCatmullRom;
-			case CurveMode.Cardinal:
-				return d3.curveCardinal;
-			default:
-				return d3.curveLinear;
-		}
-	}
-
-	get vxShape(){
-		return this._vxShape;
-	}
-
-	set vxShape(s){
-		this._vxShape = s;
-		for (let v of this.vertices)
-			v.shape = s;
-	}
-
-	get vxWidth(){
-		return this._vxWidth;
-	}
-
-	set vxWidth(s){
-		this._vxWidth = s;
-		for (let v of this.vertices)
-			v.width = s;
-	}
-
-	get vxHeight(){
-		return this._vxHeight;
-	}
-
-	set vxHeight(s){
-		this._vxHeight = s;
-		for (let v of this.vertices)
-			v.height = s;
-	}
-
-	get vxRadius(){
-		return this._vxRadius;
-	}
-
-	set vxRadius(s){
-		this._vxRadius = s;
-		for (let v of this.vertices)
-			v.radius = s;
-	}
-
-	get vxFillColor(){
-		return this._vxFillColor;
-	}
-
-	set vxFillColor(s){
-		this._vxFillColor = s;
-		for (let v of this.vertices)
-			v.fillColor = s;
-	}
-
-	get vxStrokeColor(){
-		return this._vxStrokeColor;
-	}
-
-	set vxStrokeColor(s){
-		this._vxStrokeColor = s;
-		for (let v of this.vertices)
-			v.strokeColor = s;
-	}
-
-	get vxStrokeWidth(){
-		return this._vxStrokeWidth;
-	}
-
-	set vxStrokeWidth(s){
-		this._vxStrokeWidth = s;
-		for (let v of this.vertices)
-			v.strokeWidth = s;
-	}
-
-	get vxOpacity(){
-		return this._vxOpacity;
-	}
-
-	set vxOpacity(s){
-		this._vxOpacity = s;
-		for (let v of this.vertices)
-			v.opacity = s;
-	}
-
-}