brianwigfield/index.html

## 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>