[Bug]: Loading canvas object with path on Itext #8865

radykal · 2023-04-26T20:59:28Z

CheckList

I agree to follow this project's Code of Conduct
I have read and followed the Contributing Guide
I have read and followed the Issue Tracker Guide
I have searched and referenced existing issues and discussions
I am filing a BUG report.
I have managed to reproduce the bug after upgrading to the latest version
I have created an accurate and minimal reproduction

Version

5.3.0

In What environments are you experiencing the problem?

Firefox, Chrome, Safari

Node Version (if applicable)

None

Link To Reproduction

https://jsfiddle.net/aj5bueot/

Steps To Reproduce

There is a bug when you reload a canvas object that includes an Itext Object with a path parameter. It does work with fabric.Text.

Bug is inside _render method of fabric.Text:
path && !path.isNotVisible() && path._render(ctx);

Expected Behavior

No bug in console.

Actual Behavior

Throwing a TypeError.

Error Message & Stack Trace

bric.min.js:1 Uncaught TypeError: e.isNotVisible is not a function
    at i._render (fabric.min.js:1:255402)
    at i.h [as callSuper] (fabric.min.js:1:26128)
    at i._render (fabric.min.js:1:273532)
    at i._render (fabric.min.js:1:26779)
    at i.drawObject (fabric.min.js:1:147682)
    at i.renderCache (fabric.min.js:1:146405)
    at i.render (fabric.min.js:1:146007)
    at i.h [as callSuper] (fabric.min.js:1:26128)
    at i.render (fabric.min.js:1:266710)
    at i.render (fabric.min.js:1:26779)
_

The text was updated successfully, but these errors were encountered:

ShaMan123 · 2023-04-28T05:11:08Z

I am guessing the path doesn't get enlivened which is weird

ShaMan123 · 2023-04-29T04:41:50Z

fixed in v6
repro

asturur · 2023-05-04T19:44:33Z

yes this is fixed in v6 but the bug was on 5.3 indeed, this needs to be fixed

shashank-brightness · 2023-10-16T11:03:02Z

Can you please tell what changes we need to do here. I am trying to make undo redo on canvas but when I do something like first setting path and then trying to move object and then press undo, I am getting this error. I am also getting this with Text object also, and not just only with IText. I am using 5.3.0.

For time being, I was temporarily able to fix by adding isNotVisible function when creating path instance for text's path property. I added always not visible to true as i anyhow don;t want to make it visible.

const textPath = new fabric.Path(pathData, {
    strokeWidth: 1,
    visible: false,
    isNotVisible: function () {
        return true;
    },
});

activeObj?.set({
    path: textPath,
    pathSide: 'center',
    pathStartOffset: 0,
    selectable: true,
});

Jonnas123 · 2023-11-03T00:16:02Z

Same here, after moving the object and click undo, then the error comes. I try your solution shashank-brightness but the object disapears.

shashank-brightness · 2023-11-03T04:17:34Z

@Jonnas123 You can fix this by giving path object the protorype of the path when you need to again attach to the object. It disappears in above code as i am always returning true from isNotVisible

Object.setPrototypeOf(textPath, fabric.Path.prototype)

Jonnas123 · 2023-11-04T06:06:00Z

@shashank-brightness I've checked again. For my case it happens only with IText. No error if I use Text property. Here is a demonstration. The left one is IText, you can see it can be double clicked and placed the cursor inside (not normal behavour) while the right one is Text , which works without this error.

If you don't mind telling me how to put Object.setPrototypeOf(textPath, fabric.Path.prototype) into below

function CurveOne() {
	var CurveOneValue = document.getElementById('curveoneval').value;
	var path = new fabric.Path('M236.949,468.245a160.648,160.648,0,0,1,321.3,0');
       //Like this? but not working
        Object.setPrototypeOf(CurveOneValue, fabric.Path.prototype);
	path.set({
		fill: "transparent"
	});
	var CurveOneText = new fabric.IText(CurveOneValue, {
		fontSize: 30,
		fontWeight: "normal",
		textAlign: 'center',
		pathAlign: "center",
		objectCaching: false,
		path: path,
	});
	canvas.add(CurveOneText);
	canvas.centerObject(CurveOneText);
}

sauravkumar3838 · 2024-03-13T06:02:13Z

@asturur @radykal Can you please tell how to resolve this error in v5.3.0 ? I am implementing undo feature by saving the canvas state.

asturur · 2024-03-13T08:31:16Z

I think we said there was a bug in 5.x that doesn't allow to enlive that back.

asturur · 2024-03-13T08:31:34Z

Yes this should be fixed should be also easy to fix

Shivamc489 · 2024-04-27T05:07:42Z

hey @asturur still didn't got you.
How to fix this issues in 5.3, as I can't move to beta currently and I need help in fixing the issue in 5.3 itself.
For me it happens when I make a text on path and then import it.

This is how I am generating curved text
textObject.set({ path: path });

After that, I export the json.

This is the sample json when imported gives this error:-

{
    "version": "5.3.0",
    "objects": [
        {
            "type": "textbox",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": 344,
            "top": 153,
            "width": 142.01,
            "height": 40.68,
            "fill": "#ad3838",
            "stroke": null,
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "fontFamily": "Comic Sans MS",
            "fontWeight": "bold",
            "fontSize": 36,
            "text": "Heading",
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "center",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "textBackgroundColor": "",
            "charSpacing": 0,
            "styles": [],
            "direction": "ltr",
            "path": {
                "type": "Path",
                "version": "5.3.0",
                "originX": "left",
                "originY": "top",
                "left": -0.5,
                "top": -0.5,
                "width": 500,
                "height": 0,
                "fill": "",
                "stroke": "",
                "strokeWidth": 1,
                "strokeDashArray": null,
                "strokeLineCap": "butt",
                "strokeDashOffset": 0,
                "strokeLineJoin": "miter",
                "strokeUniform": false,
                "strokeMiterLimit": 4,
                "scaleX": 1,
                "scaleY": 1,
                "angle": 0,
                "flipX": false,
                "flipY": false,
                "opacity": 1,
                "shadow": null,
                "visible": true,
                "backgroundColor": "",
                "fillRule": "nonzero",
                "paintFirst": "fill",
                "globalCompositeOperation": "source-over",
                "skewX": 0,
                "skewY": 0,
                "path": [
                    [
                        "M",
                        0,
                        145.5
                    ],
                    [
                        "Q",
                        250,
                        -145.5,
                        500,
                        145.5
                    ]
                ]
            },
            "pathStartOffset": 0,
            "pathSide": "left",
            "pathAlign": "baseline",
            "minWidth": 20,
            "splitByGrapheme": false,
            "optional": {}
        },
        {
            "id": "textCurvePath",
            "type": "Path",
            "version": "5.3.0",
            "originX": "left",
            "originY": "top",
            "left": -0.5,
            "top": -0.5,
            "width": 500,
            "height": 0,
            "fill": "",
            "stroke": "",
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "path": [
                [
                    "M",
                    0,
                    145.5
                ],
                [
                    "Q",
                    250,
                    -145.5,
                    500,
                    145.5
                ]
            ]
        }
    ],
    "background": "#fff"
}

asturur · 2024-04-28T12:39:48Z

i ll try to get back to you monday i didn't have time to handle it

Shivamc489 · 2024-04-28T15:03:02Z

i ll try to get back to you monday i didn't have time to handle it

sure sure, no worries, take your time. Enjoy!!

asturur · 2024-04-29T07:34:24Z

So the reason why it doesn't load correctly is that we added the restore code to Text and not IText or Textbox and i think the reason is because interactivity at this point is still broken.
( i plan to fix that in 6.x anyway )
I can copy paste the restore code in the other 2 classes and push it out as 5.4.0 if it really helps you, i could have time tonight

Shivamc489 · 2024-04-29T11:12:41Z

Yeah, that would be so helpful.
As, there are some breaking changes in 6.x, it would be best if it comes in 5.4.0.
Thanks a lot 🙏

asturur · 2024-05-03T10:56:59Z

5.4.0 will be released just to punch in a bunch of broken things we noticed while working on v6 All next work will be v6 onward. Il giorno mer 1 mag 2024 alle ore 04:45 Shivam Chauhan < ***@***.***> ha scritto:

…

Also, @asturur <https://github.com/asturur> 1 question, will 5.4.0 be realeased as beta or LTS version. I am new to open source and don't know how this works or what rules you use in this community. If you can guide me to a ruleset (if we have one) would be helpful. Might encourage me to do some contributions also in future. — Reply to this email directly, view it on GitHub <#8865 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJDQQFKGFC4WOWD56FTDQ3ZABJMHAVCNFSM6AAAAAAXM64QVSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBXHA4TKMZSGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

thijsbouwes · 2024-05-20T10:16:00Z

@asturur on V6 (6.0.0-rc.1) I have the same issue when exporting/importing canvas that contains text on a path jsfiddle.

When do you expect 5.4 to be released?

asturur · 2024-07-03T06:53:22Z

Hey please check if this build fix this issue:
#9965
If i don't get feedback i won't publish it.

thijsbouwes · 2024-07-03T08:45:05Z

@asturur thanks for the fix, exporting/importing canvas that contains text on a path is working now 👍

Shivamc489 · 2024-07-05T04:22:48Z

Hey @asturur thanks, this works like a charm 🫡

asturur self-assigned this Apr 28, 2023

asturur added bug text labels Apr 28, 2023

ShaMan123 closed this as completed Apr 29, 2023

asturur reopened this May 4, 2023

asturur added the v5.x label May 3, 2024

asturur mentioned this issue Jul 3, 2024

fix(): Backports for broken features requests #9965

Merged

asturur closed this as completed Jul 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: Loading canvas object with path on Itext #8865

[Bug]: Loading canvas object with path on Itext #8865

radykal commented Apr 26, 2023

ShaMan123 commented Apr 28, 2023

ShaMan123 commented Apr 29, 2023

asturur commented May 4, 2023

shashank-brightness commented Oct 16, 2023 •

edited

Loading

Jonnas123 commented Nov 3, 2023 •

edited

Loading

shashank-brightness commented Nov 3, 2023

Jonnas123 commented Nov 4, 2023 •

edited

Loading

sauravkumar3838 commented Mar 13, 2024

asturur commented Mar 13, 2024

asturur commented Mar 13, 2024

Shivamc489 commented Apr 27, 2024 •

edited

Loading

asturur commented Apr 28, 2024

Shivamc489 commented Apr 28, 2024

asturur commented Apr 29, 2024

Shivamc489 commented Apr 29, 2024

asturur commented May 3, 2024 via email

thijsbouwes commented May 20, 2024 •

edited

Loading

asturur commented Jul 3, 2024

thijsbouwes commented Jul 3, 2024

Shivamc489 commented Jul 5, 2024

[Bug]: Loading canvas object with path on Itext #8865

[Bug]: Loading canvas object with path on Itext #8865

Comments

radykal commented Apr 26, 2023

CheckList

Version

In What environments are you experiencing the problem?

Node Version (if applicable)

Link To Reproduction

Steps To Reproduce

Expected Behavior

Actual Behavior

Error Message & Stack Trace

ShaMan123 commented Apr 28, 2023

ShaMan123 commented Apr 29, 2023

asturur commented May 4, 2023

shashank-brightness commented Oct 16, 2023 • edited Loading

Jonnas123 commented Nov 3, 2023 • edited Loading

shashank-brightness commented Nov 3, 2023

Jonnas123 commented Nov 4, 2023 • edited Loading

sauravkumar3838 commented Mar 13, 2024

asturur commented Mar 13, 2024

asturur commented Mar 13, 2024

Shivamc489 commented Apr 27, 2024 • edited Loading

asturur commented Apr 28, 2024

Shivamc489 commented Apr 28, 2024

asturur commented Apr 29, 2024

Shivamc489 commented Apr 29, 2024

asturur commented May 3, 2024 via email

thijsbouwes commented May 20, 2024 • edited Loading

asturur commented Jul 3, 2024

thijsbouwes commented Jul 3, 2024

Shivamc489 commented Jul 5, 2024

shashank-brightness commented Oct 16, 2023 •

edited

Loading

Jonnas123 commented Nov 3, 2023 •

edited

Loading

Jonnas123 commented Nov 4, 2023 •

edited

Loading

Shivamc489 commented Apr 27, 2024 •

edited

Loading

thijsbouwes commented May 20, 2024 •

edited

Loading