mascot-vis 3.0.0 → 3.0.1

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

@@ -1,233 +0,0 @@
-import { CanvasProvider } from "../../render/CanvasRenderer";
-import { Style2SVG } from "../../render/SVGRenderer";
-import { generateUniqueID } from "../../util";
-import { ElementType } from "../../action/createElement";
-import LinearGradient from "../gradient/LinearGradient";
-import CircleMark from "./CircleMark";
-
-
-
-interface MarkJSON {
-    type: keyof typeof ElementType;
-    id: string;
-    classId?: string;
-    dataScope?: any; // Consider replacing 'any' with a more specific type if possible
-    args: {
-        [key: string]: any; // You might want to replace 'any' with more specific types based on your Style2SVG definition
-    };
-}
-
-
-interface Bounds {
-    contains: (px: number, py: number) => boolean;
-}
-
-export interface MarkArgs {
-    type?: keyof typeof ElementType;
-    id?: string;
-    [key: string]: any; // Accommodate for other dynamic properties based on `Style2SVG`
-}
-
-export default class Mark {
-    private _dataScope: any; // Define according to actual data scope object
-    private _type: keyof typeof ElementType;
-    private _id: string;
-    private _classId?: string;
-    private _bounds?: Bounds;
-    private _styles: { [key: string]: any }; // Style definitions can vary
-    private _strokeWidth: number; // Assuming strokeWidth is a number
-
-    constructor(args: MarkArgs) {
-        this._dataScope = undefined;
-        this._type = "type" in args ? args.type! : ElementType.Mark; // Ensure ElementType.Mark is valid or use a valid default
-        this._id = args.id ? args.id : this._type + generateUniqueID();
-        this._classId = undefined;
-        this._bounds = undefined;
-        this._strokeWidth = 0; // Default value
-        this._styles = {};
-
-        // Initialize _styles based on args and Style2SVG mapping
-        if (args !== undefined) {
-            for (let s in Style2SVG) {
-                if (s in args) {
-                    this._styles[s] = args[s];
-                }
-            }
-        }
-    }
-
-    get strokeWidth(): number {
-        return this._strokeWidth;
-    }
-
-    set strokeWidth(value: number) {
-        this._strokeWidth = value;
-    }
-
-    get id(): string {
-        return this._id;
-    }
-
-    set id(id: string) {
-        // Assuming getScene is a method returning a scene object with _itemMap property
-        // This part might need adjustment based on actual implementation of getScene
-        const scene = this.getScene();
-        if (scene) {
-            delete scene._itemMap[this._id];
-            this._id = id;
-            scene._itemMap[id] = this;
-        } else {
-            this._id = id;
-        }
-    }
-
-    get classId(): string | undefined {
-        return this._classId;
-    }
-
-    set classId(cid: string | undefined) {
-        this._classId = cid;
-    }
-
-    get bounds(): Bounds | undefined {
-        return this._bounds;
-    }
-
-    set bounds(b: Bounds | undefined) {
-        this._bounds = b;
-    }
-
-    get type(): keyof typeof ElementType {
-        return this._type;
-    }
-
-    //TODO: implement winding contribution, see paper.js PathItem.Boolean.js
-
-    initialContainsChecks(px: number, py: number): CanvasRenderingContext2D | undefined {
-        if (!this._bounds) return undefined;
-        if (!this._bounds.contains(px, py)) return undefined;
-        const ctx = CanvasProvider.getContext();
-        if (!ctx) return undefined; // Check if ctx is not null
-        return ctx;
-    }
-    contains(px: number, py: number): boolean {
-        const ctx = this.initialContainsChecks(px, py);
-        if (typeof ctx === "undefined" || ctx === undefined) return false;
-
-        switch (this.type) {
-            case ElementType.Rect:
-            case ElementType.PointText:
-                return true;
-            case ElementType.Circle: {
-                throw new Error("Method not implemented.");
-                
-            }
-            case ElementType.Path: {
-                throw new Error("Method not implemented.");
-            }
-            case ElementType.Line: {
-                let p = new Path2D(this.getSVGPathData());
-                ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
-                ctx.stroke(p);
-                return ctx.isPointInStroke(p, px, py);
-            }
-            default: {
-                let p = new Path2D(this.getSVGPathData());
-                return ctx.isPointInPath(p, px, py);
-            }
-        }
-    }
-    
-    getSVGPathData(): string {
-        throw new Error("Method not implemented.");
-    }
-
-
-    toJSON(): MarkJSON {
-        const json: MarkJSON = {
-            type: this._type,
-            id: this._id,
-            args: {}
-        };
-
-        if (this._classId) json.classId = this._classId;
-        if (this._dataScope) json.dataScope = this._dataScope.toJSON(); // Assuming a toJSON method exists
-
-        for (let s in this._styles) {
-            const value = this._styles[s];
-            json.args[s] = (value instanceof LinearGradient && value.toJSON) ? value.toJSON() : value;
-        }
-
-        // Optionally add other attributes to json.args as needed
-
-        return json;
-    }
-
-    private getScene(): any {
-        // Placeholder for actual getScene implementation
-    }
-
-
-    set dataScope(ds) {
-        this._dataScope = ds;
-    }
-
-    get dataScope() {
-        return this._dataScope;
-    }
-
-    // duplicate() {
-    //     //let scene = this.getScene();
-    //     let m = createMark({type: 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: number, dy: number): void {
-        //child classes have their own implementations
-        throw new Error("Method not implemented.");
-    }
-
-    get styles() {
-        return this._styles;
-    }
-
-    set styles(value) {
-        this._styles = value;
-    }
-
-    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;
-    }
-
-    copyPropertiesTo(target: Mark): void {
-        target.styles = Object.assign({}, this.styles);
-        if (this._dataScope)
-            target._dataScope = this._dataScope.clone();
-    }
-}
-
-export function isMark(ele: any): ele is Mark {
-    return ele instanceof Mark;
-}

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

@@ -1,483 +0,0 @@
-import Vertex from "./Vertex";
-import { ElementType } from "../../action/createElement";
-import Mark from "./Mark";
-import Segment from "./Segment";
-import { Rectangle } from "../../depgraph/variable/BoundsVar";
-import * as d3 from 'd3';
-
-
-export default class PathMark extends Mark {
-	
-	constructor(args) {
-		super(args);
-		this.type = "type" in args ? args.type : ElementType.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 ElementType.Rect:
-				json.args.width = this.width;
-				json.args.height = this.height;
-				json.args.top = this.top;
-				json.args.left = this.left;
-				break;
-			case ElementType.Circle:
-				json.args.x = this.x;
-				json.args.y = this.y;
-				json.args.radius = this.radius;
-				break;
-			case ElementType.Arc:
-			case ElementType.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 ElementType.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 === ElementType.Polygon) {
-					json.args.x = this._x;
-					json.args.y = this._y;
-					json.args.radius = this._radius;
-				} else if (this.type === ElementType.Area) {
-					json.args.baseline = this._baseline;
-					json.args.orientation = this._orientation;
-				}
-				break;
-		}
-		
-		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;
-	}
-
-    contains(px: number, py: number): boolean {
-		const ctx = this.initialContainsChecks(px, py);
-        if (typeof ctx === "undefined" || ctx === undefined) return false;
-
-		let p = new Path2D(this.getSVGPathData());
-		ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
-		ctx.stroke(p);
-		if (pathMark.closed) {
-			return ctx.isPointInPath(p, px, py);
-		} else {
-			return ctx.isPointInStroke(p, px, py);
-		}
-	}
-
-	_setVertices(vertices) {
-		let vertex;
-		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 === ElementType.Path) {
-				continue;
-			}
-
-			vertex = new Vertex(vertices[i][0], vertices[i][1], 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 === ElementType.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 === ElementType.Line || this.type === ElementType.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(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;
-	}
-
-}
-
-export const CurveMode = {
-	Natural: "natural",
-	Basis: "basis",
-	BumpX: "bumpX",
-	BumpY: "bumpY",
-	Linear: "linear",
-	Step: "step",
-	CatmullRom: "CatmullRom",
-	Cardinal: "cardinal"
-}