twreporter-react
Version:
React-Redux site for The Reporter Foundation in Taiwan
465 lines (458 loc) • 20.3 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
svg {
cursor: url(a.svg) 4 4, auto;
}
svg.plus {
cursor: url(a+.svg) 4 4, auto;
}
svg.minus {
cursor: url(a-.svg) 4 4, auto;
}
.layer-fill {
fill: #578af8;
}
.layer-stroke {
stroke: #578af8;
fill: none;
}
.layer-box {
stroke: #578af8;
fill: #fff;
}
</style>
<script src="dist/snap.svg.js"></script>
</head>
<body>
<script>
var s = Snap(800, 800),
mode = "",
selectorstart = {},
bg = s.rect(0, 0, "100%", "100%").attr({opacity: 0}).click(hide).drag(function (dx, dy, x, y) {
x -= s.node.offsetLeft;
y -= s.node.offsetTop;
var minx = Math.min(selectorstart.x, x),
maxx = Math.max(selectorstart.x, x),
miny = Math.min(selectorstart.y, y),
maxy = Math.max(selectorstart.y, y),
attr = {
x: minx - .5,
y: miny - .5,
width: maxx - minx,
height: maxy - miny
};
selector.attr(attr);
selector2.attr(attr);
}, function (x, y) {
x -= s.node.offsetLeft;
y -= s.node.offsetTop;
selectorstart = {
x: x,
y: y
};
}, function () {
var attr = {
x: -5,
y: -5,
width: 0,
height: 0
};
selector.attr(attr);
selector2.attr(attr);
}),
surface = s.g(),
selector = s.rect(-5, -5, 0, 0).attr({
fill: "none",
stroke: "#fff"
}),
selector2 = s.rect(-5, -5, 0, 0).attr({
fill: "none",
stroke: "#000",
strokeDasharray: "2 2"
});
function addHandles(g, o) {
var cx = o.cx,
cy = o.cy,
x1 = o.x1,
x2 = o.x2,
y1 = o.y1,
y2 = o.y2,
onmove = o.onmove || function () {},
onchange = o.onchange || function () {};
g = g.g();
g.attr({
strokeWidth: .5
});
var dot = [],
udots = [],
l = [];
function drag(i) {
udots[i] = g.use(dot[i]).attr({
strokeWidth: 5,
stroke: "#000",
strokeOpacity: 0
}).drag(function (dx, dy, ddx, ddy, event) {
var alt = event.altKey,
x = +X[i] + dx,
y = +Y[i] + dy,
x2, y2,
j = +!i;
dot[i].attr({
cx: x,
cy: y
});
l[i].attr({
x1: x,
y1: y
});
if (mirror != alt && !isNaN(X[j])) {
x2 = cx - (x - cx);
y2 = cy - (y - cy);
} else {
x2 = X[j];
y2 = Y[j];
}
dot[j] && dot[j].attr({
cx: x2,
cy: y2
});
l[j] && l[j].attr({
x1: x2,
y1: y2
});
onmove.call({
cx: cx + tx,
cy: cy + ty,
x1: (i ? x2 : x) + tx,
y1: (i ? y2 : y) + ty,
x2: (i ? x : x2) + tx,
y2: (i ? y : y2) + ty
});
}, function () {
X[i] = +dot[i].attr("cx");
Y[i] = +dot[i].attr("cy");
var j = +!i;
if (dot[j]) {
X[j] = +dot[j].attr("cx");
Y[j] = +dot[j].attr("cy");
}
mirror = X[1] == cx - (X[0] - cx) && Y[1] == cy - (Y[0] - cy);
}, function () {
X[i] = +dot[i].attr("cx");
Y[i] = +dot[i].attr("cy");
var j = +!i;
if (dot[j]) {
X[j] = +dot[j].attr("cx");
Y[j] = +dot[j].attr("cy");
}
mirror = X[1] == cx - (X[0] - cx) && Y[1] == cy - (Y[0] - cy);
onchange();
});
}
if (!isNaN(x1)) {
dot[0] = (s.circle(x1, y1, 2).toDefs()).attr({
"class": "layer-fill"
});
l[0] = (g.line(x1, y1, cx, cy).attr({
"class": "layer-stroke"
}));
drag(0);
}
if (!isNaN(x2)) {
dot[1] = (s.circle(x2, y2, 2).toDefs()).attr({
"class": "layer-fill"
});
l[1] = (g.line(x2, y2, cx, cy).attr({
"class": "layer-stroke"
}));
drag(1);
}
var X = [x1, x2],
Y = [y1, y2],
tx = 0,
ty = 0,
mirror = false;
if (!o.headless) {
var r = g.rect(cx - 3, cy - 3, 6, 6).attr({
"class": "layer-fill"
});
r.drag(function (dx, dy) {
var x = +tx + dx,
y = +ty + dy;
g.transform("t" + [x, y]);
onmove.call({
cx: cx + x,
cy: cy + y,
x1: X[0] + x,
y1: Y[0] + y,
x2: X[1] + x,
y2: Y[1] + y
});
}, function () {
var m = g.transform().localMatrix;
tx = m.e;
ty = m.f;
}, function () {
var m = g.transform().localMatrix;
tx = m.e;
ty = m.f;
onchange();
});
eve("snap.handlers.id", null, r.id);
}
return function () {
udots[0] && udots[0].undrag();
udots[1] && udots[1].undrag();
r && r.undrag();
g.remove();
};
}
var p = surface.path("M423.2 88.24 C 423.2 88.24 388.85 88.24 388.85 88.24 387.29 88.24 385.73 89.8 384.17 89.8 373.24 72.63 360.75 57.02 352.95 49.22 321.73 18 134.4 18 103.18 49.22 93.81 58.58 82.88 72.63 71.95 89.8 70.39 88.24 68.83 88.24 67.27 88.24 67.27 88.24 29.8 88.24 29.8 88.24 25.12 88.24 22 91.36 22 96.04 22 96.04 22 111.65 22 111.65 22 116.33 25.12 119.46 29.8 121.02 29.8 121.02 51.66 125.7 51.66 125.7 32.93 166.28 22 216.23 39.17 267.74 39.17 267.74 39.17 297.39 39.17 297.39 39.17 306.76 40.73 313 43.85 313 43.85 313 84.44 313 84.44 313 87.56 313 89.13 306.76 89.13 297.39 89.13 297.39 89.13 272.42 89.13 272.42 125.03 275.54 176.55 280.22 226.5 280.22 276.45 280.22 327.97 277.1 363.87 272.42 363.87 272.42 363.87 297.39 363.87 297.39 363.87 306.76 365.44 313 368.56 313 368.56 313 409.15 313 409.15 313 412.27 313 413.83 306.76 413.83 297.39 413.83 297.39 413.83 267.74 413.83 267.74 431 216.23 420.07 166.28 401.34 125.7 401.34 125.7 423.2 121.02 423.2 121.02 427.88 119.46 431 116.33 431 111.65 431 111.65 431 96.04 431 96.04 431 91.36 427.88 88.24 423.2 88.24 Z M87.56 214.67 C 71.95 214.67 59.47 202.18 59.47 186.57 59.47 170.96 71.95 158.48 87.56 158.48 103.18 158.48 115.66 170.96 115.66 186.57 115.66 202.18 103.18 214.67 87.56 214.67 Z M64.15 133.5 C 79.76 99.16 100.05 72.63 112.54 60.14 121.91 50.78 164.06 41.41 226.5 41.41 288.94 41.41 331.09 50.78 340.46 60.14 352.95 72.63 373.24 99.16 388.85 133.5 356.07 136.62 290.5 128.82 226.5 128.82 162.5 128.82 96.93 138.19 64.15 133.5 Z M365.44 214.67 C 349.83 214.67 337.34 202.18 337.34 186.57 337.34 170.96 349.83 158.48 365.44 158.48 381.05 158.48 393.54 170.96 393.54 186.57 393.54 202.18 381.05 214.67 365.44 214.67 Z").attr({
fill: "#333",
strokeWidth: 10,
strokeLinejoin: "round",
strokeLinecap: "round"
}).click(show);
function addAnchors(g, p) {
var s = g;
g = g.g();
var pth = Snap.path.toCubic(p.attr("d")),
x, y, killer = (function () {
var fs = [];
return function () {
if (arguments.length) {
fs = Array.prototype.slice.call(arguments, 0);
} else {
for (var i = 0, ii = fs.length; i < ii; i++) {
fs[i]();
}
}
};
})(),
lastm = 0,
wire = g.path(p.attr("d")).attr({
"class": "layer-stroke"
});
for (var i = 0, ii = pth.length; i < ii; i++) {
var jj = pth[i].length;
if (x == pth[i][jj - 2] && y == pth[i][jj - 1]) {
pth.splice(i, 1);
i--;
ii--;
continue;
}
if (pth[i][0] == "M") {
lastm = i;
continue;
}
x = pth[i][jj - 2];
y = pth[i][jj - 1];
(function (x, y, i, lastm) {
var id;
g.rect(Math.round(x) - 1.5, Math.round(y) - 1.5, 3, 3).attr({
"class": "layer-box"
}).drag(function () {}, function (X, Y, e) {
x = pth[i][pth[i].length - 2];
y = pth[i][pth[i].length - 1];
var pi = i + 1,
overlap;
if (!pth[pi] || pth[pi][0] != "C") {
if (pth[lastm][1] == x && pth[lastm][2] == y) {
pi = lastm + 1;
overlap = true;
}
}
var px = pi < ii ? pth[pi][1] : NaN,
py = pi < ii ? pth[pi][2] : NaN,
nx = pth[i][0] == "C" ? pth[i][3] : NaN,
ny = pth[i][0] == "C" ? pth[i][4] : NaN,
lx = pth[i][0] == "C" ? pth[i][1] : NaN,
ly = pth[i][0] == "C" ? pth[i][2] : NaN,
lcx = pth[i - 1][pth[i - 1].length - 2],
lcy = pth[i - 1][pth[i - 1].length - 1],
rcx = pth[pi][5],
rcy = pth[pi][6],
rx = pi < ii ? pth[pi][3] : NaN,
ry = pi < ii ? pth[pi][4] : NaN;
var r = this;
killer();
eve.once("snap.handlers.id", function (ID) {
id = ID;
});
killer(addHandles(g, {
cx: x,
cy: y,
x1: px,
y1: py,
x2: nx,
y2: ny,
onmove: function () {
r.attr({
x: this.cx - 3,
y: this.cy - 3
});
pth[i][pth[i].length - 2] = this.cx;
pth[i][pth[i].length - 1] = this.cy;
!isNaN(this.x1) && (pth[pi][1] = this.x1);
!isNaN(this.y1) && (pth[pi][2] = this.y1);
!isNaN(this.x2) && (pth[i][3] = this.x2);
!isNaN(this.y2) && (pth[i][4] = this.y2);
if (overlap) {
pth[lastm][1] = this.cx;
pth[lastm][2] = this.cy;
}
wire.attr({d: pth});
},
onchange: function () {
p.attr({d: pth});
}
}),
addHandles(g, {
cx: lcx,
cy: lcy,
headless: true,
x2: lx,
y2: ly,
onmove: function () {
!isNaN(this.x2) && (pth[i][1] = this.x2);
!isNaN(this.y2) && (pth[i][2] = this.y2);
wire.attr({d: pth});
},
onchange: function () {
p.attr({d: pth});
}
}),
addHandles(g, {
cx: rcx,
cy: rcy,
headless: true,
x2: rx,
y2: ry,
onmove: function () {
!isNaN(this.x2) && (pth[pi][3] = this.x2);
!isNaN(this.y2) && (pth[pi][4] = this.y2);
wire.attr({d: pth});
},
onchange: function () {
p.attr({d: pth});
}
}));
eve("snap.draginit." + id, 0, e, X, Y);
});
})(x, y, i, lastm);
}
return g;
}
function anchors(p) {
var pth = Snap.path.toCubic(p.attr("d")),
x, y, X = [], Y = [];
for (var i = 0, ii = pth.length; i < ii; i++) {
var jj = pth[i].length;
switch (pth[i][0]) {
case "Z":
break;
default:
X.push(pth[i][jj - 2]);
Y.push(pth[i][jj - 1]);
break;
}
}
return {
x: X,
y: Y
};
}
var XX = [], YY = [];
var XY = anchors(p);
XX = XX.concat(XY.x);
YY = YY.concat(XY.y);
// var fg = s.rect(0, 0, "100%", "100%").attr({
// opacity: 0
// }).mousemove(function (e, x, y) {
// var a = Snap.closest(x, y, XX, YY);
// if (a.len > 100) {
// a.x = a.y = -1e6;
// }
// dot.attr({
// x: a.x,
// y: a.y
// });
// });
// var dot = s.rect(-1e6, -1e6, 6, 6).insertBefore(fg).attr({
// transform: "t-3-3",
// "class": "layer-fill"
// });
var cr = surface.path("M-3-3,3,3M3-3-3,3").attr({
"class": "layer-stroke"
});
var dots = addAnchors(surface, p);
function hide() {
dots.animate({
opacity: 0
}, 200, function () {
dots.node.style.display = "none";
});
}
function show() {
dots.node.style.display = "";
dots.animate({
opacity: 1
}, 200);
}
window.onkeydown = function (e) {
if (e.shiftKey) {
eve("mode.+");
}
};
window.onkeyup = function (e) {
eve("mode.normal");
};
eve.on("mode.normal", function () {
mode = "";
s.node.setAttribute("class", "");
console.log(mode);
});
eve.on("mode.+", function () {
mode = "+";
s.node.setAttribute("class", "plus");
console.log(mode);
});
eve.on("mode.-", function () {
mode = "-";
s.node.setAttribute("class", "minus");
console.log(mode);
});
Snap.mousemove(function (e) {
var point = Snap.closestPoint(p, e.pageX - s.node.offsetLeft, e.pageY - s.node.offsetTop);
if (point.distance < 10) {
cr.attr({
transform: "t" + [point.x, point.y]
});
} else {
cr.attr({
transform: "t-10-10"
});
}
});
Snap.click(function (e) {
if (mode == "+") {
var point = Snap.closestPoint(p, e.pageX - s.node.offsetLeft, e.pageY - s.node.offsetTop);
if (point.distance < 10) {
var len = point.length,
b = Snap.path.getSubpath(p.attr("d"), 0, len),
a = Snap.path.getSubpath(p.attr("d"), len, Infinity);
dots.remove();
p.attr({
d: b + a.substring(a.indexOf("C"))
});
dots = addAnchors(surface, p);
}
}
});
</script>
</body>
</html>