progers / pathseg Goto Github PK

I am not 100% sure it is bug, however, my code is working fine on chrome#47, and after I switch to #48 with this polyfill, it doesn't work anymore.

The code before:

var pathDomSegments = pathDom.pathSegList; function getPathDomSegmentByGuid(guid) { var pathDomSegment = pathDomSegmentMetadata[guid]; for (var i = pathDomSegments.numberOfItems - 1; i >= 0; i--) { if (pathDomSegment === pathDomSegments[i]) return { index: i, pathDomSegment: pathDomSegment }; } }

Doesn't work anymore because === is not working with pathDomSegments[i], I assume it's reference validity issue,

As a workaround, I had to switch to getItem this in order for this to start working:
var pathDomSegments = pathDom.pathSegList; function getPathDomSegmentByGuid(guid) { var pathDomSegment = pathDomSegmentMetadata[guid]; for (var i = pathDomSegments.numberOfItems - 1; i >= 0; i--) { if (pathDomSegment === pathDomSegments.getItem(i)) return { index: i, pathDomSegment: pathDomSegment }; } }

Great work by the way!

See

All other attributes follow the pattern of defining window.ATTRIBUTE_NAME and then changing window.ATTRIBUTE_NAME.prototype, except (as far as I could see) SVGPathElement. This causes an error to be thrown, as we're in strict mode which disallows using variables before defining them.

v1.0.2 is not published to npm, v1.0.1 is still the latest but master appears to be v1.0.2

To support polyfilling GWT, we need to add a few extra lines as described by https://code.google.com/p/chromium/issues/detail?id=539385#c65

A couple minor changes have landed and I need to push an update for these.

Hey, npm is still on v1.0.2. Could you publish v1.1.0?

On SVGEdit init i have this kind of error in the JS console:

Error: Invalid value for attribute d="L 5 5 L 10 10"
SVGPathSegList._writeListToPath @ pathseg.js:386
SVGPathSegList.replaceItem @ pathseg.js:452

Error: Invalid value for attribute d="L 5 5 M 0 0 L 10 10"
SVGPathSegList._writeListToPath @ pathseg.js:386
SVGPathSegList.insertItemBefore @ pathseg.js:438

When trying to add a Shape on SVG Edit with the pathseg js, shapes doesn't work.

For example, try to select Smiley shape and add this in the page.

It will blink and the smiley will resize badly

Can you please publish version 1.2 on npm ?
Thank you

removeItem API is No effect
chrome 54.0.2840.71 m

{
"name": "pathseg",
"version": "1.0.2",
"description": "A polyfill for SVG's SVGPathSeg and SVGPathSegList",
"main": "pathseg.js",
"directories": {
"test": "tests"
},
"repository": {
"type": "git",
"url": "https://github.com/progers/pathseg.git"
},
"author": "Philip Rogers",
"license": "Chromium's License",
"bugs": {
"url": "https://github.com/progers/pathseg/issues"
},
"homepage": "https://github.com/progers/pathseg",
"keywords": [
"SVG",
"polyfill",
"pathseg",
"SVGPathSeg",
"SVGPathSegList"
]
}

I've been stressing out trying to convert a SVG path element to a vertex format compatible with matter-js which makes use of this polyfill.

After spending a few good hours, I managed to get it working, however I noticed the browser gets always freezed for a few seconds and I found out that getPathSegAtLength is causing this.

Calling getPathSegAtLength on a loop with more 1000 items is slow and freezes the browser. See the code of matter-js here

Any ideas on how to optimize the function or prevent it from freezing the browser?
I tried web workers but they don't work with DOM elements

I'm requesting that you add your project to http://bower.io/. This package manager is among the most popular for JavaScript and only requires a bower.json file in the project's root folder and version tagging in the git repo, after which the project can be registered on bower.io.

I'm submitting a companion PR to this issue containing a bower.json, which I hope you'll accept and use to register this package 😄

When creating variables like SVGPathSeg or SVGPathSegClosePath, the namespace window is correctly being used, so that the functions are created in the correct context.
However, on the same code, properties for these variables do not use the window namespace, which means that a global variable will be accessed instead. When running on the browser, this works fine, since window is the global context for the application. But in other contexts this throws an exception since variables like SVGPathSegClosePath do not exist in the global context.

My use case is running mocha unit tests on an application that depends on pathseg, and these tests can't run since the plugin can't be initialized

There is a discussion about removing getPathSegAtLength from blink:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/Gc1Aw282beo/NsfsKf8LBgAJ

Original spec:
https://www.w3.org/TR/SVG11/paths.html#__svg__SVGPathElement__getPathSegAtLength

This isn't super simple to implement because it requires the distance-along-a-path algorithm.

We'd like to reference a particular version of pathseg in brower.json for repeatable builds in our project.

/cc @jwforres

pathSegTypeAsLetter property of a SVGPathSegClosePath object should always be uppercase "Z" (not lowercase "z") like web browsers does.

this.pathSegTypeAsLetter = typeAsLetter=='z'?'Z':typeAsLetter;

Hey @progers,

My application is currently consuming a library which relies on the pathseg polyfill (thanks so much for this polyfill btw!)

We're a React app and have a requirement to enable server-side rendering on our end. Unfortunately, importing the pathseg polyfill results in an error being thrown for window being undefined in the server-side environment.

A quick one-liner can be added to make the polyfill compatible in a DOM-less SSR environment like react-dom/server's. This would be placed as the first line inside the IIFE:

(function() { "use strict";
    if (typeof window === 'undefined') return;

    // ... rest of code here ...
}());

I can create a quick PR if needed?

Thanks!
Greg

Hi @progers,

I’ve created a PR for adding the removed types in TypeScript 4.4 used in this library and it could be useful.

Can you have a look on that? #32

Now that the latest version of Firefox also did the dum-dumb and removed the path functionality, I tested your polyfill in my little pet svg project. I get this error:
TypeError: path.pathSegList[0] is undefined

When I try to alter the pathSegList to move a path like this:
path.pathSegList[0].x = point.x;

This used to work. Console.logging path.pathSegList looks like this:
Object { _pathElement: path#middlep, _list: […], _mutationObserverConfig: {…}, _pathElementMutationObserver: MutationObserver }

This is what it looks like when it works correctly:
SVGPathSegList [ SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegCurvetoCubicRel, SVGPathSegCurvetoCubicRel ]

In fact, it seems that on the second time I use something covered by the polyfill, this happens.

I don't feel like making a minimal example, but luckily this example by someone else also breaks in a similar manner: SGV rel to abs by kirkerafael. I get this error:

TypeError: segs.replaceItem is not a function[Learn More]	script.js:20:19
convertToAbsolute	https://run.plnkr.co/preview/cjevsn2os0007fillmjvzbyqv/script.js:20:19
convert		https://run.plnkr.co/preview/cjevsn2os0007fillmjvzbyqv/script.js:43:3
onclick		https://run.plnkr.co/preview/cjevsn2os0007fillmjvzbyqv/:1:1

I wonder if there's an easy fix that would make us Firefox users also benefit from your polyfill.

For example 2.163 in d="M 0 0 L 100 2.163" is parsed as 2.1630000000000003. I managed to work around this bug by changing three lines: jarek-foksa/path-data-polyfill@423ca79

Hi,

The license field present in package.json, i.e., "Chromium's License", is not a standard SPDX identifier, so it can cause license analysis tools to break. Can you update this?

Wikipedia's article links to https://web.archive.org/web/20081026150300/http://code.google.com/chromium/terms.html for the assorted licenses it is under so one could create a parenthesized "AND" expression like "(BSD-3-Clause AND MIT AND ...)". IANAL, but I wonder whether you really need to use that if you were merely adapting non-JavaScript source code for JavaScript.

Thanks!

I'm running into this issue while using react-particle-js. I traced it back to this library. What might be causing this issue? Is something wrong with the svg file that i'm using? Thanks

I've had this polyfill working great up until the release of Chrome 62 and above where it no longer works, giving the error message:

 Uncaught TypeError: path.getPathSegAtLength is not a function
 at Object.Svg.pathToVertices (matter-dev.js:7523)
 at SVGPathElement.<anonymous> (Examples.js:14922)

Here is my page showing the error: http://brm.io/matter-js/demo/#terrain
(note that it's only the Terrain and Concave SVG Paths demos that use pathseg).

I've tested older versions of Chrome, plus the latest Firefox and Safari and they work fine.

Thank you for your work!

Is not supported on Android 5.0 webview?

Firefox 59 (currently in beta) doesn't work with the polyfill. As of that Firefox version, all the API that can be used to mutate an SVGPathSegList (along with any API that can be used to create SVGPathSeg type objects) was removed:

https://hg.mozilla.org/releases/mozilla-beta/rev/a9062e1bafb7

There are reasons for this awkward partial-removal, but suffice it to say here that it means Firefox is annoyingly incompatible with this polyfill.

I should create a pull request so the polyfill will work in Firefox, but I'm not sure when I'll get to that. I'm filing this issue in case someone can get to it before me.

If anyone does work on this, please comment here first so we don't duplicate work (I'll do the same).