Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-22 16:49:57 -0700
committerCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-22 16:49:57 -0700
commit6ac0473a10cf56d361b21ce11824fa97357e7b52 (patch)
tree09355d0944c149b9943753247c74b5e4a8cbacf8
parentafadb8022dcaca2310e88e3e56079cea575e8c48 (diff)
Fill firing arcs to map edge
-rw-r--r--index.js69
1 files changed, 65 insertions, 4 deletions
diff --git a/index.js b/index.js
index 160e61e..d3ac605 100644
--- a/index.js
+++ b/index.js
@@ -175,15 +175,76 @@ rect.addEventListener('mousemove', e => {
[newX1, newY1] = edgePoint(x1px, y1px, newX1, newY1, maxXpx, maxYpx);
[newX2, newY2] = edgePoint(x1px, y1px, newX2, newY2, maxXpx, maxYpx);
- // var sameEdgeConditions = [
+ let oppositeEdgeConditions = [
+ newX1 == 0 && newX2 == maxXpx,
+ newX2 == 0 && newX1 == maxXpx,
+ newY1 == 0 && newY2 == maxYpx,
+ newY2 == 0 && newY1 == maxYpx
+ ]
+
+ let orthogonalEdgeConditions = [
+ (newX1 == 0 || newX1 == maxXpx) && (newY2 == 0 || newY2 == maxYpx),
+ (newX2 == 0 || newX2 == maxXpx) && (newY1 == 0 || newY1 == maxYpx),
+ ]
+
+ let points;
+
+ xDiff = x2px - x1px;
+ yDiff = y2px - y1px;
+
+ if (oppositeEdgeConditions.some(e => e)) {
+ let cornerPoints;
+
+ if (xDiff > 0 && yDiff > 0) {
+ if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+ cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
+ } else {
+ cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
+ }
+
+ points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
+ } else if (xDiff > 0 && yDiff < 0) {
+ if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+ cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
+ } else {
+ cornerPoints = [[0, 0], [maxXpx, 0]];
+ }
+
+ points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
+ } else if (xDiff < 0 && yDiff > 0) {
+ if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+ cornerPoints = [[0, maxYpx], [0, 0]];
+ } else {
+ cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
+ }
+
+ points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
+ } else {
+ if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+ cornerPoints = [[0, maxYpx], [0, 0]];
+ } else {
+ cornerPoints = [[0, 0], [maxXpx, 0]];
+ }
+
+ points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoints[0]} ${cornerPoints[1]}`;
+ }
+ } else if (orthogonalEdgeConditions.some(e => e)) {
+ let cornerPoint;
- // ]
+ if (newX1 == 0 || newX1 == maxXpx) {
+ cornerPoint = [newX1, newY2];
+ } else {
+ cornerPoint = [newX2, newY1];
+ }
- // if (sameEdgeConditions)
+ points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2} ${cornerPoint}`;
+ } else {
+ points = `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2}`;
+ }
// p.setAttributeNS(null, 'points', `${newX},${newY} ${x1px},${y1px} ${newX},${newY}`);
// p.setAttributeNS(null, 'points', `${x2px},${y2px} ${x1px},${y1px} ${x2px},${y2px}`);
- p.setAttributeNS(null, 'points', `${newX1},${newY1} ${x1px},${y1px} ${newX2},${newY2}`);
+ p.setAttributeNS(null, 'points', points);
let [newX, newY] = edgePoint(x1, y1, x2, y2, maxX, maxY);