mascot-vis 3.0.0 → 3.0.1

package/src-old/renderer/WebGLRenderer2.js

@@ -1,249 +0,0 @@
-import * as THREE from 'three';
-import { ItemType } from '../util/Constants';
-import * as d3 from "d3";
-import SVGRenderer from './SVGRenderer';
-import LineGeometry from './threejs/LineGeometry';
-import LineMaterial from './threejs/LineMaterial';
-import { Line2 } from './threejs/Line2';
-// import {SVGLoader} from "three/examples/jsm/loaders/SVGLoader";
-// import { schemeAccent } from 'd3';
-// import LineSegmentsGeometry from './threejs/LineSegmentsGeometry';
-// import { LineSegments } from 'three';
-// import WireframeGeometry2 from './threejs/WireframeGeometry2';
-// import Wireframe from './threejs/Wireframe';
-// import LineSegments2 from './threejs/LineSegments2';
-
-export default class WebGLRenderer2 {
-
-    constructor(canvasId) {
-        this._canvasId = canvasId;
-        this._canvas = document.getElementById(this._canvasId);
-        this._width = 1600;
-        this._height = 1200;
-        this._threeRenderer = new THREE.WebGLRenderer({
-            antialias: true,
-            alpha: true,
-            canvas: this._canvas,
-            preserveDrawingBuffer: true,
-            logarithmicDepthBuffer: true,
-        });
-        this._threeRenderer.setPixelRatio(window.devicePixelRatio);
-        this._threeRenderer.setSize(this._width, this._height);
-        this._threeCamera = new THREE.OrthographicCamera(
-            this._width / -2,
-            this._width / 2,
-            this._height / 2,
-            this._height / -2,
-            -1000,
-            1000
-        );
-        this._threeCamera.position.set(this._width / 2, this._height / -2, 10);
-        this._threeScene = new THREE.Scene();
-        this._threeScene.add(this._threeCamera);
-        this._textLayerId = this._canvasId + "_textLayer_atlas";
-        this._textLayer = d3.select("#"+this._textLayerId);
-        if (this._textLayer.empty()) {
-            this._textLayer = d3.select(this._canvas.parentNode).insert("svg", "#"+this._canvasId + "+*")
-                                .attr("id", this._textLayerId).attr("width", this._width).attr("height", this._height)
-                                .style("position", "absolute")
-                                .style("left", this._canvas.getBoundingClientRect().left+"px")
-                                .style("top", this._canvas.getBoundingClientRect().top);
-        }
-        this._svgRenderer = new SVGRenderer(this._textLayerId);
-    }
-
-    render(scene, params) {
-        this.clear();
-        this._renderItem(scene, params);
-        this._threeRenderer.render( this._threeScene, this._threeCamera );
-    }
-
-    _renderItem(item) {
-		switch (item.type) {
-			case ItemType.Circle:
-				return this._renderCircle(item);
-
-			case ItemType.Pie:
-				return this._renderArcPath(item);
-
-			case ItemType.Area:
-				return this._renderArea(item);
-
-			case ItemType.Polygon:
-				return this._renderPolygon(item);
-
-			case ItemType.Axis:
-            case ItemType.Legend: 
-                return this._svgRenderer._renderItem(item);
-
-			case ItemType.Collection:
-			case ItemType.Glyph:
-			case ItemType.Group:
-			case ItemType.Gridlines:
-			case ItemType.Scene:
-				return this._renderGroup(item);
-
-			case ItemType.Path:
-				return this._renderPath(item);
-				
-			case ItemType.Line:
-				return this._renderLinearPath(item);
-
-			case ItemType.Rect:
-				return this._renderRectangle(item);
-
-			case ItemType.PointText:
-				return this._svgRenderer._renderItem(item);
-
-			case ItemType.Arc:
-				return this._renderArc(item);
-
-			case ItemType.Image:
-				return this._renderImage(item);
-
-			case ItemType.Link:
-				return this._renderLink(item);
-
-			default:
-				throw new Error(`Expect: itemType, Actual: ${item}\nWait that's illegal`)
-        }
-    }
-
-    _renderGroup(group) {
-        if (group.type == ItemType.Scene) {
-            this._threeScene.background = group.fillColor ? new THREE.Color(group.fillColor) : new THREE.Color(0xffffff);
-        }
-        for (const item of group.children) {
-			this._renderItem(item);
-		}
-    }
-
-    _renderLinearPath(line) {
-        // let material = line.strokeDash != "none" ? new THREE.LineDashedMaterial({color: line.strokeColor}) : new THREE.LineBasicMaterial ({color: line.strokeColor});
-        // let geom = new THREE.BufferGeometry().setFromPoints(line.vertices.map(d => new THREE.Vector3(d.x, -d.y, 0)));
-        // let l = new THREE.Line(geom, material);
-        // l.visible = line.visibility != "hidden";
-        // this._threeScene.add(l);
-
-        let positions = [];
-        for (let v of line.vertices) {
-            positions.push(v.x, -v.y, 0);
-        }
-        let geom = new LineGeometry();
-        geom.setPositions(positions);
-
-        let m = new LineMaterial({linewidth: line.strokeWidth, color: line.strokeColor});
-        m.resolution.set(this._width, this._height);
-        let l = new Line2(geom, m);
-        this._threeScene.add(l);
-
-        for (let v of line.vertices) {
-			this._renderVertex(v);
-		}
-    }
-
-    _renderRectangle(rect) {
-        let geom = new THREE.BoxGeometry(rect.width, rect.height, 0),
-            material = new THREE.MeshBasicMaterial({color: rect.fillColor});
-        let mesh = new THREE.Mesh(geom, material);
-        mesh.position.set(rect.x, -rect.y);
-        this._threeScene.add(mesh);
-
-        if (rect.strokeWidth > 0) {
-            let edgeGeom = new THREE.EdgesGeometry(geom),
-                line = new THREE.LineSegments(edgeGeom, new THREE.LineBasicMaterial({color: rect.strokeColor}));
-            line.position.set(rect.x, -rect.y);
-            this._threeScene.add(line);
-            // let edgeGeom = new THREE.EdgesGeometry(geom);
-            // let m = new LineMaterial({color: rect.strokeColor, linewidth: 10});
-            // m.resolution.set(this._width, this._height);
-            // let geo = new LineSegmentsGeometry().fromEdgesGeometry(edgeGeom);
-            // let line = new Line2(geo, m);
-            // this._threeScene.add(line);
-        }
-    }
-
-    _renderVertex(v) {
-        if (v.shape == undefined)   return;
-        switch (v.shape) {
-            case "rect":
-                this._renderRectangle(v);
-                break;
-            case "circle":
-                break;
-        }
-    }
-
-    _renderCircle(c) {
-        let geom = new THREE.CircleGeometry(c.radius, 32)
-        if (c.fillColor != "none") {
-            let material = new THREE.MeshBasicMaterial({color: c.fillColor});
-            let circle = new THREE.Mesh(geom, material);
-            circle.position.set(c.x, -c.y, 0);
-            this._threeScene.add(circle);
-        }
-        if (c.strokeWidth > 0) {
-            let edge = new THREE.EdgesGeometry(geom);
-            let line = new THREE.LineSegments(edge, new THREE.LineBasicMaterial({color: c.strokeColor}));
-            line.position.set(c.x, -c.y, 0);
-            this._threeScene.add(line);
-        }
-        
-    }
-
-    _renderArc() {
-        
-    }
-
-    _renderImage() {
-
-    }
-
-    _renderLink() {
-
-    }
-
-    _renderPath(path) {
-        //Convert path.vertices to an array of vectors to use in SplineCurve()
-        var vectorarr = [];
-        for (let v of path.vertices) {
-            var vector = new THREE.Vector2(v.x, -v.y);
-            vectorarr.push(vector);
-        }
-        const curve = new THREE.SplineCurve(vectorarr);
-        var points = curve.getPoints( 1000 );
-        
-        //Converts vector2 array into [ x1, y1, z1,  x2, y2, z2, ... ] format
-        var convertedpoints = [];
-        for (let v of points) {
-            convertedpoints.push(v.x);
-            convertedpoints.push(v.y);
-            convertedpoints.push(0);
-        }
-        const geometry = new LineGeometry();
-        geometry.setPositions(convertedpoints);
-
-        const linematerial = new LineMaterial({
-            color: path.strokeColor,
-            linewidth: path.strokeWidth, // px
-            resolution: new THREE.Vector2(640, 480) // resolution of the viewport
-        });
-        const myLine = new Line2(geometry, linematerial);
-        this._threeScene.add(myLine);    
-    }
-
-    _renderPolygon() {
-
-    }
-
-    _renderText() {
-
-    }
-
-    clear() {
-        while(this._threeScene.children.length > 0){ 
-            this._threeScene.remove(this._threeScene.children[0]); 
-        }
-        this._svgRenderer.clear();
-    }
-}

package/src-old/renderer/threejs/Line2.js

@@ -1,18 +0,0 @@
-import * as THREE from 'three';
-import LineSegments2 from './LineSegments2';
-
-export class Line2 extends LineSegments2 {
-
-	constructor( geometry = new THREE.LineGeometry(), material = new THREE.LineMaterial( {
-		color: Math.random() * 0xffffff
-	} ) ) {
-
-		super( geometry, material );
-		this.type = 'Line2';
-
-	}
-
-}
-
-Line2.prototype.isLine2 = true;
-

package/src-old/renderer/threejs/LineGeometry.js

@@ -1,77 +0,0 @@
-import LineSegmentsGeometry from './LineSegmentsGeometry';
-
-export default class LineGeometry extends LineSegmentsGeometry {
-
-	constructor() {
-
-		super();
-		this.type = 'LineGeometry';
-
-	}
-
-	setPositions( array ) {
-
-		// converts [ x1, y1, z1,  x2, y2, z2, ... ] to pairs format
-		var length = array.length - 3;
-		var points = new Float32Array( 2 * length );
-
-		for ( var i = 0; i < length; i += 3 ) {
-
-			points[ 2 * i ] = array[ i ];
-			points[ 2 * i + 1 ] = array[ i + 1 ];
-			points[ 2 * i + 2 ] = array[ i + 2 ];
-			points[ 2 * i + 3 ] = array[ i + 3 ];
-			points[ 2 * i + 4 ] = array[ i + 4 ];
-			points[ 2 * i + 5 ] = array[ i + 5 ];
-		}
-
-		super.setPositions( points );
-		return this;
-
-	}
-
-	setColors( array ) {
-
-		// converts [ r1, g1, b1,  r2, g2, b2, ... ] to pairs format
-		var length = array.length - 3;
-		var colors = new Float32Array( 2 * length );
-
-		for ( var i = 0; i < length; i += 3 ) {
-
-			colors[ 2 * i ] = array[ i ];
-			colors[ 2 * i + 1 ] = array[ i + 1 ];
-			colors[ 2 * i + 2 ] = array[ i + 2 ];
-			colors[ 2 * i + 3 ] = array[ i + 3 ];
-			colors[ 2 * i + 4 ] = array[ i + 4 ];
-			colors[ 2 * i + 5 ] = array[ i + 5 ];
-
-		}
-
-		super.setColors( colors );
-		return this;
-
-	}
-
-	fromLine( line ) {
-
-		var geometry = line.geometry;
-
-		if ( geometry.isGeometry ) {
-
-			console.error( 'THREE.LineGeometry no longer supports Geometry. Use THREE.BufferGeometry instead.' );
-			return;
-
-		} else if ( geometry.isBufferGeometry ) {
-
-			this.setPositions( geometry.attributes.position.array ); // assumes non-indexed
-
-		} // set colors, maybe
-
-
-		return this;
-
-	}
-
-}
-
-LineGeometry.prototype.isLineGeometry = true;