fix polyfill in sin proj

Polyline: add hpx code to remove drawing lines in between 2 different collinion zone
all sky with polygons HPX MOL - examples added
2025-12-25 12:25:52 -08:00 · 2023-09-22 16:59:51 +02:00 · 2023-09-21 17:05:19 +02:00 · 2023-09-21 09:54:18 +02:00 · 2023-09-21 09:50:51 +02:00
4 changed files with 23578 additions and 28 deletions
--- a/examples/al-all-sky-polygons-projection-HPX.html
+++ b/examples/al-all-sky-polygons-projection-HPX.html
--- a/examples/al-all-sky-polygons-projection-MOL.html
+++ b/examples/al-all-sky-polygons-projection-MOL.html
--- a/examples/al-fill-polygon.html
+++ b/examples/al-fill-polygon.html
@@ -0,0 +1,26 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {fov: 122, showContextMenu: true, fullScreen: true});
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+
+        aladin.addOverlay(overlay);
+        overlay.addFootprints([A.polygon(
+            [[264.375,-35.68533471265207], [258.75,-30.000000000000018], [264.375,-24.624318352164085], [270,-30.000000000000018]],
+            {color: '#808080', fillColor: '#808080', opacity: .4, lineWidth: 1, fill: true})]);
+
+        aladin.gotoRaDec(264.375,-24.624318352164085);
+    });
+</script>
+</body>
+</html>
--- a/src/js/Polyline.js
+++ b/src/js/Polyline.js
@@ -41,10 +41,47 @@ import { ProjectionEnum, projectionNames } from "./ProjectionEnum.js";


 export let Polyline= (function() {
+    function _calculateMag2ForNoSinProjections(line, view) {
+        // check if the line is too big (in the clip space) to be drawn
+        const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view);
+        const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view);
+
+        const mag2 = (x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2);
+        return mag2;
+    }
+
+    function _isAcrossCollignonZoneForHpxProjection(line, view) {
+        const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view);
+        const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view);
+
+        // x, y, between -1 and 1
+        let triIdxCollignionZone = function(x, y) {
+            let xZone = Math.floor((x * 0.5 + 0.5) * 4.0);
+            return xZone + 4 * (y > 0.0);
+        };
+
+        let isInCollignionZone = function(x, y) {
+            return Math.abs(y) > 0.5;
+        };
+
+        if (isInCollignionZone(x1, y1) && isInCollignionZone(x2, y2)) {
+            if (triIdxCollignionZone(x1, y1) === triIdxCollignionZone(x2, y2)) {
+                return false;
+            } else {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
    // constructor
    let Polyline = function(radecArray, options) {
        options = options || {};
        this.color     = options['color']     || undefined;
+        this.fill      = options['fill']      || false;
+        this.fillColor = options['fillColor'] || undefined;
+        this.opacity   = options['opacity']   || undefined;
        this.lineWidth = options["lineWidth"] || undefined;

        if (options["closed"]) {
@@ -208,6 +245,7 @@ export let Polyline= (function() {
        }

        let drawLine;
+        let fillPoly;

        if (view.projection === ProjectionEnum.SIN) {
            drawLine = (v0, v1) => {
@@ -217,52 +255,98 @@ export let Polyline= (function() {
                    line.draw(ctx);
                }
            };
-        } else {
+
+            if (this.closed && this.fill) {
+                fillPoly = (v0, v1, index) => {
+                    const line = new Line(v0.x, v0.y, v1.x, v1.y);
+                    if (index === 0) {
+                        ctx.beginPath();
+                        ctx.moveTo(line.x1, line.y1);
+                    } else {
+                        ctx.lineTo(line.x1, line.y1);
+                    }
+
+                    return true;
+                };
+            }
+        } else if (view.projection === ProjectionEnum.HPX) {
            drawLine = (v0, v1) => {
                const line = new Line(v0.x, v0.y, v1.x, v1.y);

-                if (line.isInsideView(view.width, view.height)) {
-                    // check if the line is too big (in the clip space) to be drawn
-                    const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view);
-                    const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view);
+                if (_isAcrossCollignonZoneForHpxProjection(line, view)) {
+                    return;
+                } 

-                    const mag2 = (x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2);
+                if (line.isInsideView(view.width, view.height)) {
+                    const mag2 = _calculateMag2ForNoSinProjections(line, view);

                    if (mag2 < 0.1) {
                        line.draw(ctx);
                    }
                }
            };
-        }

-        // 3. Check whether the polygon do not cross the view
-        let nSegment = this.closed ? len : len - 1;
-        /*
-        let v0 = this.closed ? len - 1 : 0;
-        let v1 = this.closed ? 0 : 1;
-        let v2 = this.closed ? 1 : 2;
+            if (this.closed && this.fill) {
+                fillPoly = (v0, v1, index) => {
+                    const line = new Line(v0.x, v0.y, v1.x, v1.y);

-        let drawPolygon = true;
-        for (var k = 0; k < nSegment; k++) {
-            let ccwTriOrder = ccwOrder(xyView[v0], xyView[v1], xyView[v2])
+                    if (_isAcrossCollignonZoneForHpxProjection(line, view)) {
+                        return;
+                    } 

-            if (ccwGoodOrder != ccwTriOrder) {
-                // if it cross the view, we end up here
-                drawPolygon = false;
+                    const mag2 = _calculateMag2ForNoSinProjections(line, view);

-                return;
+                    if (mag2 < 0.1) {
+                        if (index === 0) {
+                            ctx.beginPath();
+                            ctx.moveTo(line.x1, line.y1);
+                        } else {
+                            ctx.lineTo(line.x1, line.y1);
+                        }
+
+                        return true;
+                    } else {
+                        return false;
+                    }
+                };
            }
+        } else {
+            drawLine = (v0, v1) => {
+                const line = new Line(v0.x, v0.y, v1.x, v1.y);

-            v0 = v1;
-            v1 = v2;
-            v2 = (v2 + 1) % len;
+                if (line.isInsideView(view.width, view.height)) {
+                    const mag2 = _calculateMag2ForNoSinProjections(line, view);
+
+                    if (mag2 < 0.1) {
+                        line.draw(ctx);
+                    }
+                }
+            };
+            if (this.closed && this.fill) {
+                fillPoly = (v0, v1, index) => {
+                    const line = new Line(v0.x, v0.y, v1.x, v1.y);
+
+                    const mag2 = _calculateMag2ForNoSinProjections(line, view);
+
+                    if (mag2 < 0.1) {
+                        if (index === 0) {
+                            ctx.beginPath();
+                            ctx.moveTo(line.x1, line.y1);
+                        } else {
+                            ctx.lineTo(line.x1, line.y1);
+                        }
+
+                        return true;
+                    } else {
+                        return false;
+                    }
+                };
+            }
        }

-        if (!drawPolygon) {
-            return;
-        }*/
-
        // 4. Finally, draw all the polygon, segment by segment
+        let nSegment = this.closed ? len : len - 1;
+
        let v0 = this.closed ? len - 1 : 0;
        let v1 = this.closed ? 0 : 1;

@@ -270,7 +354,7 @@ export let Polyline= (function() {
        ctx.beginPath();

        for (var k = 0; k < nSegment; k++) {
-            drawLine(xyView[v0], xyView[v1])
+            drawLine(xyView[v0], xyView[v1]);

            v0 = v1;
            v1 = v1 + 1;
@@ -279,6 +363,28 @@ export let Polyline= (function() {
        if (!noStroke) {
            ctx.stroke();
        }
+
+        if (this.fill && this.closed) {
+            v0 = len - 1;
+            v1 = 0;
+
+            let index = 0;
+            for (var k = 0; k < nSegment; k++) {
+                if (fillPoly(xyView[v0], xyView[v1], index)) {
+                    index++;
+                }
+
+                v0 = v1;
+                v1 = v1 + 1;
+            }
+
+            ctx.globalAlpha = 1;
+            ctx.save();
+            ctx.fillStyle = this.fillColor;
+            ctx.globalAlpha = this.opacity;
+            ctx.fill();
+            ctx.restore();
+        }
    };

    Polyline.prototype.isInStroke = function(ctx, view, x, y) {
Author	SHA1	Message	Date
Matthieu Baumann	a54ef4510a	fix polyfill in sin proj	2023-09-22 16:59:51 +02:00
Matthieu Baumann	7947817694	Polyline: add hpx code to remove drawing lines in between 2 different collinion zone	2023-09-21 17:05:19 +02:00
szpetny	79ecda33ca	all sky with polygons HPX MOL - examples added	2023-09-21 09:54:18 +02:00
szpetny	e622207145	A proposal of a new feature - let the polygon to be filled in with a given color with given transparency	2023-09-21 09:50:51 +02:00