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
2026-01-04 09:07:59 -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)) {
+                if (_isAcrossCollignonZoneForHpxProjection(line, view)) {
-                    // check if the line is too big (in the clip space) to be drawn
+                    return;
-                    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);
+                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
+            if (this.closed && this.fill) {
-        let nSegment = this.closed ? len : len - 1;
+                fillPoly = (v0, v1, index) => {
-        /*
+                    const line = new Line(v0.x, v0.y, v1.x, v1.y);
        let v0 = this.closed ? len - 1 : 0;
        let v1 = this.closed ? 0 : 1;
        let v2 = this.closed ? 1 : 2;
-        let drawPolygon = true;
+                    if (_isAcrossCollignonZoneForHpxProjection(line, view)) {
-        for (var k = 0; k < nSegment; k++) {
+                        return;
-            let ccwTriOrder = ccwOrder(xyView[v0], xyView[v1], xyView[v2])
+                    } 
-            if (ccwGoodOrder != ccwTriOrder) {
+                    const mag2 = _calculateMag2ForNoSinProjections(line, view);
                // if it cross the view, we end up here
                drawPolygon = false;
-                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;
+                if (line.isInsideView(view.width, view.height)) {
-            v1 = v2;
+                    const mag2 = _calculateMag2ForNoSinProjections(line, view);
-            v2 = (v2 + 1) % len;
+
                    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