mascot-vis 3.0.0 → 3.0.1

package/src-old/renderer/SVGInteractionHandler.js

@@ -1,241 +0,0 @@
-import * as d3 from 'd3';
-import { atlas_rowId, ItemType } from '../util/Constants';
-import { getPeers } from "../util/ItemUtil";
-import Brush from '../interaction/brush';
-
-export default class SVGInteractionHandler {
-
-    constructor(svgRenderer) {
-        this._renderer = svgRenderer;
-        this._globalPredicates = {};
-    }
-    created = 0;
-
-    processInteraction(i, scene) {
-        if (!i.target || !i.targetEval || !i.targetEval['false']) return
-        if (i.listener.type == ItemType.Scene) {
-            const originalProperties = [];
-            getPeers(i.target, scene).forEach(path => {
-                const obj = {};
-                Object.keys(i.targetEval['false']).forEach(prop => {
-                    obj[prop] = (path[prop]);
-                });
-                originalProperties.push(obj);
-            });
-            // if (i.event == 'click') {
-            //     this._processClick(i, scene, originalProperties);
-            // }
-            if (i.event == 'brush' || i.event == 'click') {
-                if (this.created == 0) {
-                    // new Brush(this._renderer._svgId, '#9c3131', null).brush()
-                    this.created = new Brush(this._renderer._svgId, '#9c3131', i.hitObject._bounds).brush();
-                    document.addEventListener('brush', (e) => {
-                        this._processBrush1(i, scene, originalProperties, e.detail.selection ? { selection: e.detail.selection } : null);
-                        if (e.detail.selection == undefined) {
-                            this._processClick(i, scene, originalProperties, e.detail.e);
-                        }
-                    });
-                }
-            }
-        }
-    }
-
-
-
-    _processBrush1(i, scene, originalProperties, e) {
-        let brushPredicateEvaluators = {};
-        if (i.event == 'brush') {
-            if (i.predicate.length <= 0) return;
-            i.predicate.forEach(ele => {
-                if (ele.type == 'range') {
-                    let rangeData = []
-                    if (i.hitObject.type == 'axis') {
-                        i.hitObject._labels.children.forEach(_ => {
-                            rangeData.push({
-                                axisCoordinate: _[ele.channel], actualValue: _.text
-                            })
-                        });
-                    } else if (i.hitObject.type == 'collection') {
-                        i.hitObject.children.forEach(_ => {
-                            rangeData.push({
-                                axisCoordinate: _[ele.channel], actualValue: _.dataScope.getFieldValue(ele.field)
-                            })
-                        });
-                    }
-                    rangeData.sort((a, b) => a.axisCoordinate - b.axisCoordinate)
-                    brushPredicateEvaluators[ele.channel] = {
-                        _actualLabels: rangeData.map(e => e.actualValue),
-                        _axisCoordinates: rangeData.map(e => e.axisCoordinate)
-                    }
-                    rangeData = null;
-                } else {
-                    // Brush should not have other predicates
-                    // Confirm with Leo
-                    throw new Error(`Event Type Brush should not have ${i.predicate.type} as Predicate Type`)
-                }
-            });
-        }
-        if (e && e.selection) {
-            let _r = {
-                'x': [e.selection[0][0], e.selection[1][0]],
-                'y': [e.selection[0][1], e.selection[1][1]]
-            }
-            let _range = { 'x': null, 'y': null };
-
-            Object.entries(brushPredicateEvaluators).forEach(entry => {
-                const [key, value] = entry;
-                let val1 = value._actualLabels[d3.bisect(value._axisCoordinates, _r[key][0])]
-                let val2 = value._actualLabels[d3.bisect(value._axisCoordinates, _r[key][1]) - 1]
-                _range[key] = {
-                    _high: val1 >= val2 ? val1 : val2,
-                    _low: val1 < val2 ? val1 : val2
-                }
-            });
-            let _x = i.predicate.filter(e => _range['x'] && e.channel == 'x')[0]
-            let _y = i.predicate.filter(e => _range['y'] && e.channel == 'y')[0];
-            let _1, _2 = false;
-            getPeers(i.target, scene).forEach((path, _i) => {
-                if (_x) {
-                    _1 = _range['x']['_high'] >= path.dataScope.getFieldValue(_x['field']) &&
-                        _range['x']['_low'] <= path.dataScope.getFieldValue(_x['field'])
-                }
-                if (_y) {
-                    _2 = _range['y']['_high'] >= path.dataScope.getFieldValue(_y['field']) &&
-                        _range['y']['_low'] <= path.dataScope.getFieldValue(_y['field'])
-                }
-                if ((_x == undefined && _2) || (_y == undefined && _1) || (_1 && _2)) {
-                    this.setTargetProperties(originalProperties[_i], path);
-                } else {
-                    this.setTargetProperties(i.targetEval['false'], path);
-                }
-            });
-        } else {
-            getPeers(i.target, scene).forEach((path, _i) => {
-                this.setTargetProperties(originalProperties[_i], path);
-            });
-        }
-        this._renderer.render(scene, { visualOnly: true });
-    }
-
-    _processClick(i, scene, originalProperties, $e) {
-        i = scene._interactionsObj['click']
-        let multiSelectSet = new Set();
-        if (i.predicate[0].type == 'point') {
-            //continent done
-            //country - can leverage multi select done
-            if ($e.target.id.includes(i.target.type)) {
-                const _ = getPeers(i.target, scene).filter(e => e.id == $e.target.id);
-                if (_.length > 0) {
-                    getPeers(i.target, scene).forEach((path, _i) => {
-                        if (path.dataScope.getFieldValue(i.predicate[0].field) == _[0].dataScope.getFieldValue(i.predicate[0].field)) {
-                            this.setTargetProperties(originalProperties[_i], path);
-                        } else {
-                            this.setTargetProperties(i.targetEval['false'], path);
-                        }
-                    });
-                }
-            } else if (i.hitObject.type == 'legend' && i.hitObject.encoding.datatable._fieldSummaries[i.predicate[0].field].unique.includes($e.target.innerHTML)) {
-                getPeers(i.target, scene).forEach((path, _i) => {
-                    if (path.dataScope.getFieldValue(i.predicate[0].field) == $e.target.innerHTML) {
-                        this.setTargetProperties(originalProperties[_i], path);
-                    } else {
-                        this.setTargetProperties(i.targetEval['false'], path);
-                    }
-                });
-            } else {
-                getPeers(i.target, scene).forEach((path, _i) => {
-                    this.setTargetProperties(originalProperties[_i], path);
-                });
-            }
-        } else if (i.predicate[0].type == 'list') {
-            // countries done
-            // continents
-            if (i.predicate[0].multiByField) {
-                // select Multiple fields  by continents for instance
-                if ($e.target.id.includes(i.target.type)) {
-                    const _ = getPeers(i.target, scene).filter(e => e.id == $e.target.id);
-                    if (_.length > 0) {
-                        multiSelectSet.add(_[0].dataScope.getFieldValue(i.predicate[0].field));
-                        getPeers(i.target, scene).forEach((path, _i) => {
-                            if (multiSelectSet.has(path.dataScope.getFieldValue(i.predicate[0].field))) {
-                                this.setTargetProperties(originalProperties[_i], path);
-                            } else {
-                                this.setTargetProperties(i.targetEval['false'], path);
-                            }
-                        });
-                    }
-                } else {
-                    multiSelectSet.clear();
-                    getPeers(i.target, scene).forEach((path, _i) => {
-                        this.setTargetProperties(originalProperties[_i], path);
-                    });
-                }
-            } else {
-                if ($e.target.id.includes(i.target.type)) {
-                    if (multiSelectSet.has($e.target.id)) {
-                        multiSelectSet.delete($e.target.id); // deselect
-                    } else {
-                        multiSelectSet.add($e.target.id);
-                    }
-                    getPeers(i.target, scene).forEach((path, _i) => {
-                        if (multiSelectSet.has(path.id)) {
-                            this.setTargetProperties(originalProperties[_i], path);
-                        } else {
-                            this.setTargetProperties(i.targetEval['false'], path);
-                        }
-                    });
-                } else {
-                    multiSelectSet.clear();
-                    getPeers(i.target, scene).forEach((path, _i) => {
-                        this.setTargetProperties(originalProperties[_i], path);
-                    });
-                }
-            }
-        }
-        this._renderer.render(scene, { visualOnly: true });
-    }
-
-    evaluatePredicate(i, path, _range) {
-        if (i.predicate.type == 'range') {
-            return path.dataScope.getFieldValue(i.predicate.field) <= _[0] && path.dataScope.getFieldValue(i.predicate.field) >= _[1]
-        }
-    }
-
-    setTargetProperties(obj, path) {
-        Object.keys(obj).forEach(prop => {
-            try {
-                path[prop] = obj[prop];
-            } catch (error) {
-                console.log('Property not found');
-            }
-        });
-    }
-
-    _getSelection(e, selDef, listener, item) {
-        let selection = {};
-        if (item) {
-            selection.item = item;
-        } else if (selDef.item) {
-            //TODO
-        }
-
-        let field = selDef.field ? selDef.field : atlas_rowId;
-        if (selection.item) {
-            selection.predicate = { "field": field, "value": selection.item.dataScope.getFieldValue(field) };
-        } else {
-            //from axis
-        }
-        return selection;
-    }
-
-    addGlobalPredicate(scene, p) {
-        if (!(scene.id in this._globalPredicates)) {
-            this._globalPredicates[scene.id] = {};
-        }
-        this._globalPredicates[scene.id][p.field] = p;
-    }
-
-    getGlobalPredicates(scene) {
-        return (scene.id in this._globalPredicates) ? Object.values(this._globalPredicates[scene.id]) : [];
-    }
-}

package/src-old/renderer/SVGRenderer.js

@@ -1,325 +0,0 @@
-import {ItemType, Style2SVG} from "../util/Constants";
-import * as d3 from 'd3';
-import SVGInteractionHandler from "./SVGInteractionHandler";
-
-export default class SVGRenderer {
-
-	constructor(svgId) {
-		this._svgId = svgId;
-		this._compMap = {};
-		this._decoMap = {}; 
-		this._interactionHandler = new SVGInteractionHandler(this);
-	}
-
-	/**
-	 * 
-	 * @param {*} scene 
-	 * @param {*} supported keys for params: 
-	 * flatten (do not organize elements in scene graph hierarchy)
-	 * collectionBounds (draw collection borders)  
-	 */
-	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 && !args.flatten) {
-			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 == ItemType.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 == ItemType.Scene) {
-			d3.select("#"+this._svgId).style("background", c.fillColor ? c.fillColor : "#fff");
-		}
-
-		// if (c.type == "vertex") {
-		// 	//TODO: render vertices
-		// 	return;
-		// }
-
-		let pathTypes = [ItemType.Path, ItemType.Polygon, ItemType.Link, ItemType.Pie, ItemType.Line, ItemType.Area, ItemType.Ring, ItemType.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 == ItemType.Line) {
-		// 	el.attr("x1", c.vertices[0].x);
-		// 	el.attr("y1", c.vertices[0].y);
-		// 	el.attr("x2", c.vertices[1].x);
-		// 	el.attr("y2", c.vertices[1].y);
-		// 	if (cid.indexOf("axis") == 0) {
-		// 		el.style("shape-rendering", "crispEdges");
-		// 	}
-		} else if (c.type == ItemType.Circle) {
-			el.attr("cx", c.x);
-			el.attr("cy", c.y);
-			el.attr("r", c.radius);
-		} else if (c.type == ItemType.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 == ItemType.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 == ItemType.Image) {
-			el.attr("href", c.src).attr("x", c.x).attr("y", c.y).attr("width", c.width).attr("height", c.height);
-		}
-
-		// for (let a in c.attrs) {
-		// 	el.attr(Attr2SVG[a], c.attrs[a]);
-		// }
-
-		for (let s in c.styles) {
-			if (c.styles[s] === undefined)
-				continue;
-			if (s.indexOf("Color") > 0 && c.styles[s].type == ItemType.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, args);
-		}
-
-		// render scene bound
-		if (c.type == ItemType.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 == ItemType.PointText || c.type == ItemType.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, args) {
-		let id = c.id+"-vertices";
-		if (!(id in this._compMap) && !args.flatten) {
-			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];
-		}
-
-		if (!args.flatten) {
-			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),
-			svgParent = args.flatten ? d3.select("#"+this._svgId) : d3.select("#"+id);
-		for (let v of vertices) {
-			let vid = id+"-"+v.id;
-			if (!(vid in this._compMap)) {
-				this._compMap[vid] = svgParent.append(v.shape).attr("id", vid);
-			} else if (v.shape !== this._compMap[vid].node().tagName) {
-				this._compMap[vid].remove();
-				this._compMap[vid] = svgParent.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 ItemType.Rect:
-				return "rect";
-			case ItemType.Collection:
-			case ItemType.Group:
-			case ItemType.Glyph:
-			case ItemType.Scene:
-			case ItemType.Axis:
-			case ItemType.Legend:
-			case ItemType.Gridlines:
-				return "g";
-			case ItemType.Area:
-			case ItemType.Path:
-			case ItemType.Polygon:
-			case ItemType.Ring:
-			case ItemType.Pie:
-			case ItemType.Arc:
-			case ItemType.Link:
-			case ItemType.Line:
-				return "path";
-			case ItemType.Circle:
-				return "circle";
-				//return "line";
-			case ItemType.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;
-		}
-	}
-}