--- a/integration/js/cutout.js Thu May 02 14:40:30 2013 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,281 +0,0 @@
-$(function() {
-
- var startPath = $(".fragment-path").val();
-
- var PATHCOLOR = "#ff00ff",
- SELECTEDCOLOR = "#ffff00",
- HANDLESIZE = 6;
-
- var jqs = $(".cutout-canvas"),
- offset = jqs.offset(),
- paper = new Raphael(jqs[0]),
- closed = false,
- rectangleMode = false,
- closeTimeout,
- points = [];
-
- paper.rect(0, 0, paper.width, paper.height)
- .attr({
- stroke: "none",
- fill: "#fff",
- "fill-opacity": .01
- })
- .click(clickAddPoint)
- .drag(
- function(dx, dy, mx, my) {
-
- if (dx*dx+dy*dy < 4) {
- return;
- }
-
- if (!pathDragging) {
- clearTimeout(closeTimeout);
- closed = true;
- resetPoints();
- for (var i = 0; i < 4; i++) {
- addPoint(mx - offset.left, my - offset.top)
- }
- redrawPath();
- pathDragging = true;
- rectangleMode = true;
- }
-
- var x = mx - offset.left,
- y = my - offset.top;
- points[1].x = points[2].x = x;
- points[2].y = points[3].y = y;
- redrawPath();
- },
- function(mx, my) {
- pathDragging = false;
- },
- function() {
- setTimeout(function() {
- pointDragging = false;
- },0);
- }
- );
-
- function resetPoints() {
- rectangleMode = false;
- points.forEach(function(p) {
- p.handle.remove();
- });
- points = [];
- }
-
- function addPoint(x, y) {
-
- var dragdeltax, dragdeltay, pointDragging,
- point = {
- x: Math.floor(x),
- y: Math.floor(y)
- }
-
- var pointsWithSameX = [], pointsWithSameY = [];
-
- var pointrect = paper.rect(0, 0, HANDLESIZE, HANDLESIZE)
- .attr({
- stroke: PATHCOLOR,
- fill: PATHCOLOR,
- "fill-opacity": .3
- })
- .hover(shapeMouseOver, shapeMouseOut)
- .drag(
- function(dx, dy) {
- pointDragging = true;
- point.x = dx + dragdeltax;
- point.y = dy + dragdeltay;
- if (rectangleMode) {
- pointsWithSameX.forEach(function(p) {
- p.x = point.x;
- });
- pointsWithSameY.forEach(function(p) {
- p.y = point.y;
- });
- }
- redrawPath();
- },
- function() {
- dragdeltax = point.x;
- dragdeltay = point.y;
- if (rectangleMode) {
- pointsWithSameX = points.filter(function(p) {
- return p !== point && p.x === point.x;
- });
- pointsWithSameY = points.filter(function(p) {
- return p !== point && p.y === point.y;
- });
- }
- },
- function() {
- setTimeout(function() {
- pointDragging = false;
- shapeMouseOut(pointrect);
- },0);
- }
- )
- .click(function() {
- if (pointDragging) {
- return;
- }
- this.remove();
- points = points.filter(function(p) {
- return p != point;
- });
- redrawPath();
- });
-
- point.handle = pointrect;
-
- points.push(point);
-
- }
-
- function clickAddPoint(e, mx, my) {
-
- if (pathDragging) {
- return;
- }
-
- if (rectangleMode) {
- resetPoints();
- }
-
- clearTimeout(closeTimeout);
- closed = false;
-
- addPoint(mx - offset.left, my - offset.top);
-
- redrawPath();
-
- closeTimeout = setTimeout(function() {
- closed = true;
- redrawPath();
- }, 1000)
-
- }
-
- function shapeMouseOver() {
- points.forEach(function(point) {
- if (point.handle !== this) {
- point.handle.attr({
- stroke: PATHCOLOR,
- fill: PATHCOLOR
- });
- }
- });
- if (this !== path) {
- path.attr({
- stroke: PATHCOLOR,
- fill: PATHCOLOR
- });
- }
- this.attr({
- stroke: SELECTEDCOLOR,
- fill: SELECTEDCOLOR
- });
- }
-
- function shapeMouseOut() {
- if (pathDragging || !this || !this.attr) {
- return;
- }
- this.attr({
- stroke: PATHCOLOR,
- fill: PATHCOLOR
- });
- }
-
- function redrawPath() {
- var d = "M"
- + points.map(function(p) { return p.x + " " + p.y }).join("L")
- + (closed ? "Z" : "");
- path.attr({
- path: d
- });
- points.forEach(function(point) {
- point.handle.attr({
- x: point.x - HANDLESIZE / 2,
- y: point.y - HANDLESIZE / 2
- });
- });
- var transd = "M"
- + points.map(function(p) { return (p.x / paper.width).toString().replace(/(\.\d{4})\d*/,"$1") + " " + (p.y / paper.height).toString().replace(/(\.\d{4})\d*/,"$1") }).join("L")
- + "Z";
- $(".fragment-path").val(transd).change();
- }
-
- var dragdeltax, dragdeltay, pathDragging;
-
- var path = paper.path()
- .attr({
- stroke: PATHCOLOR,
- fill: PATHCOLOR,
- "fill-opacity": .1
- })
- .click(clickAddPoint)
- .hover(shapeMouseOver, shapeMouseOut)
- .drag(
- function(dx, dy) {
- pathDragging = true;
- points.forEach(function(point) {
- point.x += dx - dragdeltax;
- point.y += dy - dragdeltay;
- });
- dragdeltax = dx;
- dragdeltay = dy;
- redrawPath();
- },
- function() {
- dragdeltax = 0;
- dragdeltay = 0;
- },
- function() {
- setTimeout(function() {
- pathDragging = false;
- shapeMouseOut(path);
- },0);
- }
- );
-
- $(".clear-fragment").click(function() {
- resetPoints();
- redrawPath();
- return false;
- });
-
- function revertPath() {
- startPath.split(/\s*[A-Z]\s*/).forEach(function(coords) {
- xy = coords.split(/[\s,]/);
- if (xy.length === 2) {
- addPoint(paper.width * parseFloat(xy[0]), paper.height * parseFloat(xy[1]));
- }
- });
-
- if (points.length) {
- closed = true;
- }
-
- if (
- points.length === 4
- && points[0].x === points[3].x
- && points[0].y === points[1].y
- && points[1].x === points[2].x
- && points[2].y === points[3].y
- ) {
- rectangleMode = true;
- }
-
- redrawPath();
- }
-
- revertPath();
-
- $(".reset-fragment").click(function() {
- resetPoints();
- revertPath();
- return false;
- })
-
-});