Как убрать расстояние между элементами при снимке экрана?

Question

[19depeche90]

В проекте есть таблицы, между ними связи в виде стрелок. Скачала библиотеку html2canvas, делает снимок экрана (метод takeScreenShot()), но на получаемом изображении почему-то между стрелками и таблицами по x видно расстояние примерно в 50-60 пикселей. На экране такого нет. Все стрелки "уезжают" на снимке вправо.

spoiler

import React, { useState } from "react";
    import styles from "./Diagram.module.css";
    import Xarrow, { Xwrapper, useXarrow } from "react-xarrows";
    import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
    import CameraAltIcon from '@mui/icons-material/CameraAlt';
    import html2canvas from 'html2canvas';
    
    export const Diagram = () => {
    const [diagram, setDiagram] = useState({});
    
    const updateXarrow = useXarrow();
    
    const onDrag = () => {
            setIsMoveable(true);
            updateXarrow();
        };
        const onStop = () => {
            setIsMoveable(false);
            updateXarrow();
        };
    
        const takeScreenShot = () => {        
            
            const linkElement = document.getElementById("my-diag-link");
            const originalLeft = linkElement.style.left; 
            console.log(linkElement);
            
            linkElement.style.left = parseInt(linkElement.style.left) - 60 + "px";
            const element = document.getElementById("my-diagram-area");
            var date = new Date();
            if (!element) {
                return;
            }
          
            html2canvas(element, {
               backgroundColor: "#FAFDFD",
               height: 1500,
               width: 2500,           
               foreignObjectRendering: true
            }).then((canvas) => {
                updateXarrow();
                let image = canvas.toDataURL("image/jpeg", 1.0);
                const a = document.createElement("a");
                a.href = image;
                a.download = `${diagram.name} ${date}.jpeg`;
                a.click();
                linkElement.style.left = originalLeft;
            }).catch((err) => {
                console.err("Нет изображения")
                //linkElement.style.left = originalLeft;
            })
        };
    
    const getTables = () => {
            let components = [];
    
            diagram.areas?.map((area) => {
                let color = findColorByAreaName(area.name);
                area.color = color ? color : area.color;
    
                area.tables?.map((table) => {
                    components.push(
                        <Table
                            key={table.name}
                            diagram={diagram}
                            table={table}
                            areaName={area.name}
                            color={area.color}
                            onDrag={onDrag}
                            onStop={onStop}
                        />
                    );
                });
            });
    
    const getArrows = () => {
            let arrows = [];
    
            diagram.areas?.map((area) => {
                area.foreignKeys?.map((link, key) => {
                    
                    diagram.areas?.map((area) => {
                        area.tables?.map((table) => {
                           
    arrows.push(
                        <Xarrow
                            start={link.sourceTableName}
                            end={link.targetTableName}
                            path={"straight"}                   
                        />
                    );
                });
            });
            return arrows;
        };
    return (
            <div className={styles.MainContainer}>
                <TransformWrapper
                    initialScale={scale}
                    disabled={isMoveable}
                    minScale={0.4}
                    maxScale={1.1}
                    limitToBounds={false}
                    onPanning={updateXarrow}
                    pinch={{ step: 5 }}
                    doubleClick={{ disabled: "true" }}
                    // initialPositionX={200}
                    // initialPositionY={200}
                    zoomIn={{ step: 50 }}
                    zoomOut={{ step: 50 }}
                    onZoomStop={(e) => {
                        setScale(e.state.scale);
                    }}
                    onZoom={(e) => {
                        setScale(e.state.scale);
                        updateXarrow();
                    }}
                >
                    {({ zoomIn, zoomOut }) => (
    <div data-html2canvas-ignore="true">
                                <CameraAltIcon
                                    onClick={takeScreenShot}
                                    sx={{ fontSize: "large" }}
                                />
                            </div>
                            <div
                                id="my-diagram-area"
                                className={styles.AreaContainer}
                            >
                               
                                <Xwrapper>
                                    <TransformComponent                                
                                        contentClass="main"
                                        wrapperStyle={{
                                            height: "200vh",
                                            width: "200vw"
                                        }}
                                    >
                                        <div id="my-diag-tables" className={styles.TableContainer}>
                                            {getTables()}
                                        </div>
                                    </TransformComponent>
                                    <div id="my-diag-link" className={styles.ArrowContainer}>
                                        {getArrows()}
                                    </div>
                                </Xwrapper>
                            </div>
                        </>
                    )}
                </TransformWrapper>
            </div>
        );
    };

Попыталась сделать стрелкам отдельный контейнер и сдвигать его при снимке экрана влево на 60px

spoiler

const linkElement = document.getElementById("my-diag-link");
                const originalLeft = linkElement.style.left; 
                console.log(linkElement);
                
                linkElement.style.left = parseInt(linkElement.style.left) - 60 + "px";

Но никакого результата это не дало.

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.6

[Алан Гибизов]

Может все-таки проблема в библиотеке, возможно она некорректно работает? Хотя библиотека популярна, но если зайти на GitHub, там последний релиз год назад, и сотни тонн issues типа «div некорректно обрабатывает», «css глючит» и т.п.

[Александр]

Эта библиотека эмулирует скриншот, а не делает его по-настоящему.

[19depeche90]

Александр, понятно, спасибо. А есть ли другие библиотеки, у которых возможности шире? Попробовала dom-to-image и modern-screenshot, та же проблема: расстояние между элементами

[19depeche90]

Алан Гибизов, спасибо! Видимо, не в библиотеке. Потому что две другие с тем же косяком возвращают изображение

[19depeche90]

Нашла решение: "position: relative" для контейнера, который должен отображаться на скрине

[Алан Гибизов]

19depeche90, поместите его в ответы