only one svgspace possible #128

jaro-io · 2020-12-15T21:21:50Z

you can make a microwaved quick meal, or you can take the full on adventure time travel to dinosaur land. and this for me is pts. wow. what an amazing library! and i am just scratching the surface.. 🤯

because of performance issues with the canvas element and locomotive-scroll in safari, i had to switch to the svg renderer which works beautifully fine, even though its still marked as experimental.

there's just one major problem i am facing. i can only get one svg space working at the same time. as soon as i create more than one, it only renders the last one.

i created a pretty basic pen just to demonstrate. actually we should be able to see two lines here. but we only see one. is it me who's not understanding how to setup the library correctly, or is there something wrong on the other side?

https://codepen.io/jaro_io/pen/MWjpZxL

thank you so much for taking a quick look!
jaro
🐤

williamngan · 2020-12-15T22:07:46Z

Heyho @jaro-io 😃 Thanks for trying out Pts and sending the detailed bug report.

Looks like there's a bug here where the svg id won't get updated unless you passed an svg element.

I'll patch this soon in the next release. But a quick fix now would be to add an empty element inside the div. Eg:

<div class="wrapper">
  <div class="canvas"><svg id="one" /></div>
  <div class="canvas"><svg id="two" /></div>
</div>

Just curious what kind of performance issue did you encounter with Safari -- can you create a new issue when you get a chance?

Thanks again. Cheers!

jaro-io · 2020-12-15T22:27:45Z

wow, thank you for the super fast heads-up. 🤞🏻 i already had the same idea, but in my specific case, it didn't fix the problem. in fact, in the pen it does. so i'll investigate! trying to find out how i can reproduce my problem here. i will let you know soon!

jaro-io · 2020-12-16T09:15:39Z

hello again @williamngan!
i changed my pen to illustrate what i meant yesterday. even though now i have two empty svg elements with unique ids, the library is still only rendering one of the two lines. it does add all the setup attributes to the second svg element, but the svg itself stays empty.

https://codepen.io/jaro_io/pen/NWRjPpg

when this is still nothing on my end (please check my code, i only just started), it might be another bug or related to the one we found yesterday.

thank you so much for looking into this!
jaro
🍯

williamngan · 2020-12-17T02:36:34Z

Thanks @jaro-io -- I should have a patch coming later today or tomorrow. Hang on :)

jaro-io · 2020-12-17T06:56:34Z

@williamngan thank you so much for the immediate support! 🍡

williamngan · 2020-12-17T09:40:31Z

v0.9.6 should fix this issue hopefully. Give it a try.

jaro-io · 2020-12-17T14:36:19Z

thank you so much @williamngan. that was super fast. 😮 it did in fact fix something but not everything.

when using empty svg elements with unique ids it works fine, as long as i use an id string (like '#custom-id') to create the new svg space.

if i pass the svg element via javascript directly when creating the space, it still only renders the first of all animations.

if i add an empty div to my site and pass its unqiue id string to create the space, it does the same thing. so only rendering one animation.

we're getting there.
but please don't stress yourself. with the empty svg elements i now have a working solution!

again, thank you!
🌾

williamngan · 2020-12-17T19:29:30Z

The empty div with id approach should work. I tested with your CodePen example and it seems to work. Can you check if you're using v0.9.6?

Here's a simplified example:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pts/0.9.6/pts.min.js"></script>
  </head>
  <body>
    <div id="one" style="width: 200px; height: 200px; background: #ccc"></div>
    <div id="two" style="width: 200px; height: 200px; background: #ccc"></div>
    <div id="three" style="width: 200px; height: 200px; background: #ccc"></div>
    
    <script>
      (function() {

      Pts.namespace(this);

      function createLine(id) {

        let space = new SVGSpace(id).setup({ bgcolor: 'transparent', resize: true });
        let form  = space.getForm();

        space.add({

          animate: function() {
            form.scope(this);
            form.fill('#F00').point( [
              Math.random()*space.innerBound.width, 
              Math.random()*space.innerBound.height],
              30, 'circle');
          }
        });

        space.play();
      }

      createLine('#one');
      createLine('#two');
      createLine('#three');

      })();    
    </script>

  </body>
</html>

There might be another issue with "svg element" approach -- I'll take a look.

Thanks!

jaro-io · 2020-12-18T12:50:47Z

you're right. sorry, this has been a mistake on my end. so, passing ids as a string when creating a new SVGSpace works fine when targeting both svgs and divs.

only passing javascript elements, like you can do with CanvasSpaces, is not working yet.

🦾

williamngan · 2021-03-10T09:46:32Z

Hi @jaro-io , I'm revisiting this issue but cannot reproduce the "passing javascript element" problem you mentioned.

If I replace createLine("#three") in my minimal example above with createLine( document.querySelector("#three") ), it seems to work without issue. Can you provide more details on the error you encountered?

williamngan · 2022-03-09T10:04:04Z

Hi, closing this now. Please reopen if it continues to be an issue.

jaro-io changed the title ~~Only one SVGSpace possible~~ only one svgspace possible Dec 15, 2020

williamngan added a commit that referenced this issue Dec 17, 2020

Fix svg id overriding domspace id check - #128

041b5c2

williamngan closed this as completed Mar 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

only one svgspace possible #128

only one svgspace possible #128

jaro-io commented Dec 15, 2020

williamngan commented Dec 15, 2020

jaro-io commented Dec 15, 2020

jaro-io commented Dec 16, 2020

williamngan commented Dec 17, 2020

jaro-io commented Dec 17, 2020

williamngan commented Dec 17, 2020

jaro-io commented Dec 17, 2020

williamngan commented Dec 17, 2020 •

edited

jaro-io commented Dec 18, 2020

williamngan commented Mar 10, 2021

williamngan commented Mar 9, 2022

only one svgspace possible #128

only one svgspace possible #128

Comments

jaro-io commented Dec 15, 2020

williamngan commented Dec 15, 2020

jaro-io commented Dec 15, 2020

jaro-io commented Dec 16, 2020

williamngan commented Dec 17, 2020

jaro-io commented Dec 17, 2020

williamngan commented Dec 17, 2020

jaro-io commented Dec 17, 2020

williamngan commented Dec 17, 2020 • edited

jaro-io commented Dec 18, 2020

williamngan commented Mar 10, 2021

williamngan commented Mar 9, 2022

williamngan commented Dec 17, 2020 •

edited