]> git.sesse.net Git - remoteglot/commitdiff
Position arrows without forcing a style recalc.
authorSteinar H. Gunderson <sgunderson@bigfoot.com>
Tue, 27 Dec 2022 11:59:56 +0000 (12:59 +0100)
committerSteinar H. Gunderson <sgunderson@bigfoot.com>
Tue, 27 Dec 2022 12:01:48 +0000 (13:01 +0100)
www/js/remoteglot.js

index c3de366309a6c6cd60289b551e4576515e531a7d..ee2432494a50ddc09af28940442579add471bac6 100644 (file)
@@ -380,9 +380,7 @@ let sync_server_clock = function(server_date_string) {
 let clear_arrows = function() {
        for (let i = 0; i < arrows.length; ++i) {
                if (arrows[i].svg) {
-                       if (arrows[i].svg.parentElement) {
-                               arrows[i].svg.parentElement.removeChild(arrows[i].svg);
-                       }
+                       arrows[i].svg.remove();
                        delete arrows[i].svg;
                }
        }
@@ -506,11 +504,12 @@ let position_arrow = function(arrow) {
                return;
        }
 
-       let zoom_factor = document.getElementById("board").getBoundingClientRect().width / 400.0;
+       let board_width = parseInt(document.querySelector(".board-b72b1").style.width, 10);
+       let zoom_factor = board_width / 400.0;
        let line_width = arrow.line_width * zoom_factor;
        let arrow_size = arrow.arrow_size * zoom_factor;
 
-       let square_width = document.querySelector(".square-a8").getBoundingClientRect().width;
+       let square_width = board_width / 8;
        let from_y, to_y, from_x, to_x;
        if (board.orientation() === 'black') {
                from_y = (arrow.from_row + 0.5)*square_width;
@@ -527,8 +526,8 @@ let position_arrow = function(arrow) {
        let SVG_NS = "http://www.w3.org/2000/svg";
        let XHTML_NS = "http://www.w3.org/1999/xhtml";
        let svg = document.createElementNS(SVG_NS, "svg");
-       svg.setAttribute("width", /** @type{number} */ (document.getElementById("board").getBoundingClientRect().width));
-       svg.setAttribute("height", /** @type{number} */ (document.getElementById("board").getBoundingClientRect().height));
+       svg.setAttribute("width", board_width);
+       svg.setAttribute("height", board_width);
        svg.setAttribute("style", "position: absolute");
        svg.setAttribute("position", "absolute");
        svg.setAttribute("version", "1.1");