mascot-vis 2.1.0 → 3.0.0

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

@@ -0,0 +1,163 @@
+// 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

@@ -0,0 +1,494 @@
+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;
+	}
+
+}