Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with paper.js in javascript strict mode #2049

Open
SixK opened this issue Oct 5, 2023 · 3 comments
Open

Problem with paper.js in javascript strict mode #2049

SixK opened this issue Oct 5, 2023 · 3 comments

Comments

@SixK
Copy link

SixK commented Oct 5, 2023

It seem's I have the following error related to "use strict" javascript command.

Uncaught TypeError: can't assign to property "_canvasStyle" on "red": not an object
set paper-full.js:12491
set paper-full.js:12546
set strokeColor keypoints.js:448
addKeypoint keypoints.js:64

related source code is:

            if ((key === 'selectedColor' || !applyToChildren)
                    && key in this._defaults) {
                var old = this._values[key];
                if (old !== value) {
                    if (isColor) {
                        // The old value may be a native string or other color
                        // description that wasn't coerced to a color object yet
                        if (old) {
                            Color._setOwner(old, null);
                            old._canvasStyle = null;  // seem's to be a problem with "use strict;" activated.
                        }
                    }

In my case "old" value is the string "red" defined by calling something like path.strokeColor = "red"
As it's a simple string, it doesn't have _canvasStyle property.
This is not a problem when "use strict" is not called, but seem's to be a problem when it's called.

I'm using vue3 with vite 4 as server in dev mode that probably activate strict mode by default. (I didn't had this problem with vue3-cli).

I'm not definitely sure the problem is caused by vite that is activating strict mode, but it"s seem's to be.

Is there any way to avoid the problem ? (vite configuration ? call path.strokeColor differently ?)
If it's really a problem, can you plan a code modification ?

Problem can be reproduced using the following code in firefox console:

(function() {
  'use strict';
  "red"._yolo = null;
})();

remove 'use strict'; line and there is no error.

@SixK SixK changed the title Problem with Problem with paper.js in javascript strict mode Oct 6, 2023
@SixK
Copy link
Author

SixK commented Oct 7, 2023

If I modify paper.js src/style/Style.js to check if old is a string, I have no more error when using vite:

            if ((key === 'selectedColor' || !applyToChildren)
                    && key in this._defaults) {
                var old = this._values[key];
                if (old !== value) {
                    if (isColor) {
                        // The old value may be a native string or other color
                        // description that wasn't coerced to a color object yet
                        if (old) {
                            Color._setOwner(old, null);
                            if (old && typeof old !== 'string') {  // modification added
                                old._canvasStyle = null;
                            }  // modification added
                        }

Can someone add this fix ?

@kflorence
Copy link

kflorence commented Jan 5, 2024

I'm seeing this too in Chrome:

Uncaught TypeError: Cannot create property '_canvasStyle' on string 'black'
    at o.<computed> [as strokeColor] (paper-full.js:12491:24)
    at initialize.set (paper-full.js:12570:15)
    at initialize.setStyle (paper-full.js:3319:19)
    at iz.onDeselected (tile.js:76:27)

The line in question is resetting the item style like so:

item.style = { fillColor: 'black' } // there are more properties as well

@kflorence
Copy link

As a workaround for now @SixK you can use the Color object. For example, instead of fillColor: 'black' you would use fillColor: new Color('black')

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants