"arrow-end" throw an Error: <path> attribute d: Expected number, “….68028259277344CNaN,NaN,NaN,NaN,…”

Library: “raphael”: “^2.2.8”

Summary: all work as expected apart from the console error

Description: I want to render a line with an arrow end, but when adding “arrow-end” attribute, it throw an Error: "attribute d: Expected number, “….68028259277344CNaN,NaN,NaN,NaN,…”. weirdly when adding “arrow-start” attribute there is no error

I tried already to change the stroke-width, it didn’t help

This is the code: http://jsfiddle.net/fzjc81ym/ (don’t see an error in console through the js fiddle, only in my repository)

this.canvas = Raphael('grid', '100%', '100%');

drawLine(this.canvas, path1, duration, arrowAtrr, color, strokeDasharray, strokeWidth, arrowend).then(() => this.resolve(item, callback))

const drawLine = (canvas, pathStr, duration = 1000, attr = arrowAtrr, color = Color.GREEN, strokeDasharray = '-', strokeWidth = 4, arrowend = "block-wide-long") => {
    return new Promise((resolve) => {
        attr.stroke = color;
        attr['stroke-dasharray'] = strokeDasharray;
        attr['stroke-width'] = strokeWidth;
        attr['arrow-end'] = arrowend
        var guidePath = canvas.path(pathStr).attr({ stroke: 'none', fill: 'none' });
        var path = canvas.path(pathStr).attr({ stroke: 'none', fill: 'none' });
        var totalLength = guidePath.getTotalLength(guidePath);
        var startTime = new Date().getTime();
        var intervalLength = 25;

        var intervalId = setInterval(function () {
            var elapsedTime = new Date().getTime() - startTime;
            var thisLength = elapsedTime / duration * totalLength;
            var subPathStr = guidePath.getSubpath(0, thisLength);
            attr.path = subPathStr;
            path.attr(attr)
            path.animate(attr, intervalLength);

            if (elapsedTime >= duration) {
                clearInterval(intervalId);
                resolve();
            }

        }, intervalLength);

    });
}

Any idea how to solve that error?

[ibrierley]

Tbh I can’t think of a very non-hacky way of getting around it (eg having a separate arrow end that’s transformed or something). At this point, I’d consider moving to Snap (it’s pretty compatibly with Raph), although it doesn’t include arrow ends as default (there are examples out there, eg below), it’s a lot more flexible (you can call functions every frame to build an animation).

Example http://jsfiddle.net/4cvaM/9/

[ibrierley]

Interesting, looks a bit more fiddly than I thought. Seems to happen with a combo of ‘arrow-end’ and ‘stroke-width’, I’m guessing Raph adds those behind the scenes and tries to animate them even if not included in the exact animate call, causing the issue. Will have a ponder.

On Sun, Jan 24, 2021 at 10:41 AM Hadas Maimon [e-mail] wrote:

yes, exactly. thanks for the answer!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/DmitryBaranovskiy/raphael/issues/1128#issuecomment-766326066, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA5YN5ODMA5BIKHTVI4TMJDS3P2MBANCNFSM4WKYKV6Q .