brianwigfield · December 18, 2015 12:59
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Moving a Segment</title>
 <script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
 <script type="text/paperscript" canvas="canvas">
 var center = new Point(200, 200);
 var house = null;

 this.addRectangle = function() {
 	house = new Path.Rectangle(center.x, center.y, 250, 150);
 	house.style = {
 	    strokeColor: 'black',
 	    strokeWidth: 2   
 	}	
 }

 this.addSquare = function() {
 	house = new Path.Rectangle(center, 150);
 	house.style = {
 	    strokeColor: 'black',
 	    strokeWidth: 2   
 	}	
 }

 this.addLShape = function() {
 	house = new Path();
 	house.add(new Point(100, 100), new Point(100, 200), new Point(300, 200), new Point(300, 150), new Point(200, 150), new Point(200, 100), new Point(100,100));
 	house.closed = true;
 	house.style = {
 	    strokeColor: 'black',
 	    strokeWidth: 2   
 	}	
 }
  
 //    rectangle.selected = true;

 //rectangle.segments[2].point.selected = true;
 //rectangle.segments[2].point += new Point(200,200);
 // Select the second segment point of the path

 var hitOptions = {
    segments: true,
    stroke: true,
    fill: true,
    tolerance: 5
 };

 var segment, path;
 var movePath = false;
 function onMouseDown(event) {
    segment = path = null;
    var hitResult = project.hitTest(event.point, hitOptions);
    if (!hitResult)
        return;

    if (hitResult) {
        path = hitResult.item;
        if (hitResult.type == 'segment') {
            segment = hitResult.segment;
        } else if (hitResult.type == 'stroke') {
            //var location = hitResult.location;
            //segment = path.insert(location.index + 1, event.point);
 //            path.smooth();
        }
    }
 //    movePath = hitResult.type == 'fill';
 //    if (movePath)
 //        project.activeLayer.addChild(hitResult.item);
 }

 function onMouseMove(event) {
    project.activeLayer.selected = false;
    if (event.item)
        event.item.selected = true;
 }

 function onMouseDrag(event) {
    if (segment) {
        var originalX = segment.point.x;
        var originalY = segment.point.y;
        
        segment.point = event.point;

 //                    console.log(segment.next.point.y + '==' + originalPoint.y);
        if(segment.next.point.x == originalX) {
            segment.next.point.x = event.point.x;
        }
        if(segment.next.point.y == originalY) {
            segment.next.point.y = event.point.y;
            console.log('set to ' + event.point.y);
        }
        if(segment.previous.point.x == originalX) {
            segment.previous.point.x = event.point.x;
        }
        if(segment.previous.point.y == originalY) {
            segment.previous.point.y = event.point.y;
        }
        //path.smooth();
    }

 //    if (movePath)
 //        path.position += event.delta;
 }
 </script>
 </head>
 <body style="margin:0;overflow:hidden">
 	<div>
 		<button onclick="paper.addSquare()">Start With Square Property</button>
 		<button onclick="paper.addRectangle()">Start With Rectangle Property</button>
 		<button onclick="paper.addLShape()">Start With L-Shape Property</button>
 	</div>
 	<canvas id="canvas" resize></canvas>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Moving a Segment</title>
	<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
	var center = new Point(200, 200);
	var house = null;

	this.addRectangle = function() {
	house = new Path.Rectangle(center.x, center.y, 250, 150);
	house.style = {
	strokeColor: 'black',
	strokeWidth: 2
	}
	}

	this.addSquare = function() {
	house = new Path.Rectangle(center, 150);
	house.style = {
	strokeColor: 'black',
	strokeWidth: 2
	}
	}

	this.addLShape = function() {
	house = new Path();
	house.add(new Point(100, 100), new Point(100, 200), new Point(300, 200), new Point(300, 150), new Point(200, 150), new Point(200, 100), new Point(100,100));
	house.closed = true;
	house.style = {
	strokeColor: 'black',
	strokeWidth: 2
	}
	}

	// rectangle.selected = true;

	//rectangle.segments[2].point.selected = true;
	//rectangle.segments[2].point += new Point(200,200);
	// Select the second segment point of the path

	var hitOptions = {
	segments: true,
	stroke: true,
	fill: true,
	tolerance: 5
	};

	var segment, path;
	var movePath = false;
	function onMouseDown(event) {
	segment = path = null;
	var hitResult = project.hitTest(event.point, hitOptions);
	if (!hitResult)
	return;

	if (hitResult) {
	path = hitResult.item;
	if (hitResult.type == 'segment') {
	segment = hitResult.segment;
	} else if (hitResult.type == 'stroke') {
	//var location = hitResult.location;
	//segment = path.insert(location.index + 1, event.point);
	// path.smooth();
	}
	}
	// movePath = hitResult.type == 'fill';
	// if (movePath)
	// project.activeLayer.addChild(hitResult.item);
	}

	function onMouseMove(event) {
	project.activeLayer.selected = false;
	if (event.item)
	event.item.selected = true;
	}

	function onMouseDrag(event) {
	if (segment) {
	var originalX = segment.point.x;
	var originalY = segment.point.y;

	segment.point = event.point;

	// console.log(segment.next.point.y + '==' + originalPoint.y);
	if(segment.next.point.x == originalX) {
	segment.next.point.x = event.point.x;
	}
	if(segment.next.point.y == originalY) {
	segment.next.point.y = event.point.y;
	console.log('set to ' + event.point.y);
	}
	if(segment.previous.point.x == originalX) {
	segment.previous.point.x = event.point.x;
	}
	if(segment.previous.point.y == originalY) {
	segment.previous.point.y = event.point.y;
	}
	//path.smooth();
	}

	// if (movePath)
	// path.position += event.delta;
	}
	</script>
	</head>
	<body style="margin:0;overflow:hidden">
	<div>
	<button onclick="paper.addSquare()">Start With Square Property</button>
	<button onclick="paper.addRectangle()">Start With Rectangle Property</button>
	<button onclick="paper.addLShape()">Start With L-Shape Property</button>
	</div>
	<canvas id="canvas" resize></canvas>
	</body>
	</html>