pts
pts copied to clipboard
VueJS
Hello!
Anybody planning to make a vueJS implementation?
Thanks, amazing library!
Hi @hvitis ! Thanks for trying out Pts.
A Vue implementation would be awesome. I'm not aware of any Vue implementation yet. Would you like to start one? 😉
My Vue knowledge is rather dated. We have a React component for Pts if it's helpful as reference: https://github.com/williamngan/react-pts-canvas
I'm tinkering with Svelte but nothing concrete yet :)
Thank you! I will try for sure. I was just inquiring before in case there has been something done already.
Do you have any clues as per making it? Did you make the react one? Are there some requirements I have to follow?
Yes, I made the React version and @tibotiber made a lot of improvements. @tibotiber -- any advice or tips on this?
I think it's fairly straightforward and there might be Vue specific features that can make it better than the React one too.
Happy to send feedbacks and PRs to your repo. Thanks for initiating this Vue project!
Hi @hvitis and @williamngan, I like the idea of a Vue wrapper around pts. I wouldn't be able to help on the code itself as I'm not a Vue developer myself though. I guess it would look somewhat like the react wrapper. I had a quick look through the dependents of this repo and didn't spot anything Vue related so I think it's fair to consider it "up for grab" ;).
Thanks guys. How do I create a separate vuejs repo on PTS? Can I even do it without enough permissions?
Hey @hvitis - if you don't have any specific concerns, I would suggest starting a Vue repo from your own account.
Pts is under a permissive open-source Apache license so you don't really need my approval to start a new project with it 😉 I'll be happy to give you feedbacks if you need them. What do you think?
Perfect! I'll do that then. Thanks guys for all the answers
I'm tinkering with Svelte but nothing concrete yet :)
Svelte supports Vanilla JS natively, so like all JS libs, PTS works great in Svelte out of the box.
PT.svelte
<script>
import { CanvasSpace, Pt, Create, Rectangle, Color } from 'pts';
import { onMount } from 'svelte';
let canvas, pts, follower, space, form;
function PT() {
pts = [];
follower = new Pt();
space = new CanvasSpace(canvas);
form = space.getForm();
...stuff
}
onMount(() => PT())
</script>
<canvas bind:this={canvas} />
Anywhere.svelte
<script>
import PT from 'PT.svelte'
</script>
<PT />