switch matrix order, cleanup FoldView, Origami

examples/new-origami/sketch.js

@@ -1,32 +1,56 @@
-var div = document.getElementsByClassName('row')[0];
-var paper = new RabbitEar.OrigamiView(div);
-var folded = new RabbitEar.OrigamiView(div);
 
-paper.cp = prepareFoldFile(RabbitEar.Origami.oneValleyFold);
-folded.cp = RabbitEar.Origami.oneValleyFold
-folded.zoom = 0.85;
-folded.creases.setAttribute("opacity", 0.0);
-folded.setViewBox();
+const oneValleyFold = {
+	"file_spec": 1.1,
+	"file_creator": "Rabbit Ear",
+	"file_author": "Robby Kraft",
+	"file_classes": ["singleModel"],
+	"frame_attributes": ["2D"],
+	"frame_title": "one valley crease",
+	"frame_classes": ["foldedState"],
+	"vertices_coords": [
+		[0.62607055447, 1.172217339808],
+		[1.182184366474, 0.341111192497],
+		[1, 1],
+		[0, 1],
+		[1, 0.21920709774914016],
+		[0, 0.7532979469531602]
+	],
+	"vertices_vertices": [[1,3], [4,0], [3,4], [0,2], [2,5,1], [0,4,3]],
+	"vertices_faces": [[0], [0], [1], [1], [1,0], [0,1]],
+	"edges_vertices": [[0,1], [1,4], [4,5], [5,0], [4,2], [2,3], [3,5]],
+	"edges_faces": [[0], [0], [1,0], [0], [1], [1], [1]],
+	"edges_assignment": ["B","B","V","B","B","B","B"],
+	"edges_foldAngle": [0, 0, 180, 0, 0, 0, 0],
+	"faces_vertices": [[0,1,4,5], [2,3,5,4]],
+	"faces_edges": [[0,1,2,3], [5,6,2,4]],
+	"faces_layer": [0,1],
+	"faces_matrix": [
+		[0.5561138120038558, -0.8311061473112445, -0.8311061473112445, -0.5561138120038558, 0.6260705544697115, 1.172217339807961],
+		[1, 0, 0, 1, 0, 0]
+	],
+	"file_frames": [{
+		"frame_classes": ["creasePattern"],
+		"parent": 0,
+		"inherit": true,
+		"vertices_coords": [[0,0], [1,0], [1,1], [0,1], [1,0.21920709774914016], [0,0.7532979469531602]],
+		"edges_foldAngle": [0, 0, 0, 0, 0, 0, 0],
+		"faces_layer": [0,1],
+		"faces_matrix": [[1,0,0,1,0,0], [1,0,0,1,0,0]],
+	}]
+};
+
+
+var div = document.getElementsByClassName('row')[0];
+var paper = new RabbitEar.OrigamiView(div, duplicate(oneValleyFold));
+var folded = new RabbitEar.OrigamiView(div, duplicate(oneValleyFold)).setPadding(0.1);
+paper.setFrame(0);
 paper.draw();
 folded.draw();
 folded.markLayer = folded.group();
 folded.svg.appendChild(folded.markLayer);
 
 let foldLine;
 
-function prepareFoldFile(foldFile){
-	let dontCopy = ["parent", "inherit"];
-	let fold = JSON.parse(JSON.stringify(foldFile));
-	if(fold.file_frames != undefined){
-		var thing = key => !dontCopy.includes(key);
-		let keys = Object.keys(fold.file_frames[0]).filter(key => !dontCopy.includes(key))
-		// console.log("copying over " + keys.join(' ') + " from frame[0] to main");
-		keys.forEach(key => fold[key] = fold.file_frames[0][key] )
-	}
-	fold.file_frames = null;
-	return fold;
-}
-
 function duplicate(foldFile){ return JSON.parse(JSON.stringify(foldFile)); }
 
 folded.onMouseDidBeginDrag = function(event){
@@ -37,19 +61,15 @@ folded.onMouseDidBeginDrag = function(event){
 folded.onMouseDown = function(event){
 	this.startPoint = event.point;
 	this.endPoint = event.point;
-	// while(paper.selectedLayer.lastChild){paper.selectedLayer.removeChild(paper.selectedLayer.lastChild);}
 }
 folded.onMouseMove = function(event){
 	if(this.mouse.isPressed){
 		this.endPoint = event.point;
 		foldLine = updateCreaseLine(this.startPoint, this.endPoint);
-		if(foldLine){
-			update();
-		}
 	}
 }
 folded.onMouseUp = function(event){
-	if(	isDrawingLine == false){  
+	if(isDrawingLine == false){
 		// we made a point
 		foldPoint = event.point;
 	}
@@ -62,19 +82,18 @@ folded.onMouseUp = function(event){
 function update(){
 	if(foldLine){
 		var foldedFoldFile = duplicate(folded.cp);
-		var result = RabbitEar.Origami.crease(foldedFoldFile, foldLine, foldPoint);
+		var result = RabbitEar.Origami.valleyFold(foldedFoldFile, foldLine, foldPoint);
 		if(result == undefined){ return;}
-		console.log(result);
-		// console.log(JSON.stringify(result));
 		folded.cp = result;
 		folded.draw();
-		paper.cp = prepareFoldFile(result)
+		paper.cp = duplicate(folded.cp);
+		paper.setFrame(0);
 		paper.draw();
 	}
 }
 
 function updateCreaseLine(point1, point2){
-	while(folded.markLayer.lastChild){ folded.markLayer.removeChild(folded.markLayer.lastChild); }
+	folded.removeChildren(folded.markLayer);
 	var vec = {x:point2.x - point1.x, y:point2.y - point1.y};
 	var d = Math.sqrt(Math.pow(vec.x,2) + Math.pow(vec.y,2));
 	if(d <= 0){ d = 0.000001; }

src/SimpleSVG.js

@@ -126,7 +126,7 @@ export function removeClass(xmlNode, newClass) {
     xmlNode.setAttributeNS(null, "class", classes.join(" "));
 }
 
-export function setID(xmlNode, newID) {
+export function setId(xmlNode, newID) {
     if (xmlNode === undefined) {
         return;
     }

srcf/FoldView.js

@@ -10,6 +10,7 @@
 "use strict";
 
 import SVG from "./SimpleSVG";
+import * as Origami from "./Origami"
 
 const CREASE_DIR = {
 	"B": "boundary",
@@ -19,28 +20,6 @@ const CREASE_DIR = {
 	"U": "mark"
 };
 
-const emptyFoldFile = {"file_spec":1.1,"file_creator":"Rabbit Ear","file_author":"","file_classes":["singleModel"],"frame_attributes":["2D"],"frame_classes":["foldedState"],"vertices_coords":[[0,0],[1,0],[1,1],[0,1]],"edges_vertices":[[0,1],[1,2],[2,3],[3,0]],"edges_assignment":["B","B","B","B"],"faces_vertices":[[0,1,2,3]],"faces_layer":[0],"faces_matrix":[[1,0,0,1,0,0]],"file_frames":[{"frame_classes":["creasePattern"],"parent":0,"inherit":true}]};
-
-
-function flatten_frame(fold_file, frame_num){
-	if(frame_num == undefined ||
-	   fold_file.file_frames == undefined ||
-	   fold_file.file_frames[frame_num] == undefined ||
-	   fold_file.file_frames[frame_num].vertices_coords == undefined){
-		throw "fold file has no frame number " + frame_num;
-		return;
-	}
-	const dontCopy = ["parent", "inherit"];
-	let fold = JSON.parse(JSON.stringify(fold_file));
-	let keys = Object.keys(fold.file_frames[frame_num]).filter(key =>
-		!dontCopy.includes(key)
-	)
-	keys.forEach(key => fold[key] = fold.file_frames[frame_num][key] )
-	fold.file_frames = null;
-	return fold;
-}
-
-
 export default class FoldView{
 
 	constructor() {
@@ -49,7 +28,7 @@ export default class FoldView{
 		this.cp = args.filter(arg =>
 			typeof arg == "object" && arg.vertices_coords != undefined
 		).shift();
-		if(this.cp == undefined){ this.cp = emptyFoldFile; }
+		if(this.cp == undefined){ this.cp = Origami.emptyFoldFile; }
 
 		// create a new SVG
 		this.svg = SVG.SVG();
@@ -163,7 +142,7 @@ export default class FoldView{
 		if(this.frame != undefined &&
 		   this.cp.file_frames[this.frame] != undefined &&
 		   this.cp.file_frames[this.frame].vertices_coords != undefined){
-			data = flatten_frame(this.cp, this.frame);
+			data = Origami.flattenFrame(this.cp, this.frame);
 		}
 		if(data.vertices_coords == undefined){ return; }
 		this.setViewBox();
@@ -182,30 +161,19 @@ export default class FoldView{
 		[this.boundary,
 		 this.faces,
 		 this.creases,
-		 this.vertices].forEach((layer) => {
-			while(layer.lastChild) {
-				layer.removeChild(layer.lastChild);
-			}
-		});
+		 this.vertices].forEach((layer) => SVG.removeChildren(layer));
 		// vertices
 		let vertexR = this.style.vertex.radius
-		verts.forEach((v,i) => {
-			let dot = SVG.circle(v[0], v[1], vertexR, "vertex");
-			this.vertices.appendChild(dot);
-		});
+		verts.forEach((v,i) => SVG.circle(v[0], v[1], vertexR, "vertex", this.vertices));
 		// edges
 		if(!this.isFolded()){
-			edges.forEach((e,i) => {
-				let creaseline = SVG.line(e[0][0], e[0][1], e[1][0], e[1][1], orientations[i]);
-				this.creases.appendChild(creaseline);
-			});
+			edges.forEach((e,i) =>
+				SVG.line(e[0][0], e[0][1], e[1][0], e[1][1], orientations[i], null, this.creases)
+			);
 		}
 		// faces
 		let faceClass = (this.isFolded() ? "face folded" : "face");
-		faces.forEach(f => {
-			let poly = SVG.polygon(f, faceClass);
-			this.faces.appendChild(poly);
-		});
+		faces.forEach(f => SVG.polygon(f, faceClass, "face", this.faces));
 	}
 
 	getFrames(){