Suggestions on how to start or tackle this problem.
I want a UI that represents mapping and have the ability to do those mappings. With that in mind I am approaching the problem with SVGS. Some questions that comes to mind are, Can I mask my HTML codes with a SVG and have the HTML functions still executable when I click on the mask? Or should I create the entire environment in a SVG and have clickable rectangles.
Here's an example of what I am trying to execute. https://codepen.io/Mamboleoo/pen/NWrBoep
32 Replies
bump
this looks a lot more complicated than just some SVG stuff, which is probably why you're not really getting any replies. There's gsap in your code, and at least on firefox your example doesn't seem to do anything.
I think svgs should just bubble click events up like any other element, but I've never really messed with them like that
this seems more like a solution for
canvas than anything else thoughI would recommend playing around, I'd do the whole thing as an SVG though. Also Mamboleoo rocks they make such fun stuff.
But long as it's inline you can access it use it like most any other Dom node
Canvas might be an option too, I'm not familiar with it though.
(same)
thank you for the replies but yeah as i get more in-depth with this project i’m running into a ton of obstacles that i just cant find any resources for on the web
So far I’ve decided to useRef to indicate what lines starts where with a svg positioned absolute covering my entire div with a z-index of 1
You need to share what you have and issues you're running into then. We don't have any thing really to go on.
Yeah this post was just to get started on how to tackle the problem
Oh React.... I won't be any help 😂
yep also in react lol
I was trying to find a footing to start on or at least some sort of resource to take reference of because i couldn’t find any on my@own
Are you using gsap?
nope
not using any libraries or toolsets
Well again you have to give us something to actually help you on. Atm we have no idea what you want other than dragging SVG
kk
This is terrible
I'm just starting off real basic rn. I just wanna click on a Traffic light on the left side and draw a line connecting to the right side.
I have no idea how to do this either, but I figured I would give some advice on what I'd do in the situation.
I'd probably start by making a codepen and only doing it in html/css/and js. Nothing crazy, just a really simple prototype. I find trying to do things from scratch in React when you don't already know how to do them is a pain in the ass because there's different nuances in React that you wouldn't have if you just started off really simple in JS.
First thing I would do is make some click event on the first set of circles that connects a line to the circle and wherever your mouse goes.
Then I would focus on trying to make the line connect to the second circle after you click on it.
Then you can worry about the dragging functionality and getting the lines to connect when they're close to the second set of circles.
After all that is when I would rewrite it into my React app
I mean, if all you want to do is draw rectangles from one wire to another I see no reason not to use canvas in this case. It seems like the perfect tool for the job.
I don't have much knowledge about canvas but is it possible to incorporate logic around the lines?
In the future it gets a bit more complicated, because I'd want maybe tooltips and other features when hovering a line.
So I'll need functions at the start point, endpoint and on the line itself.
canvas is used when the basic html stuff doesn't suffice, including to make pretty arbitrary games
It is and I'd argue that canvas api was designed to work exactly for this type of cases where you need to work with pixel coordinates.
I see
Well I'm on the SVG track as of right now with a decent picture in mind.
If it goes to shit then I'll dive into canvas
If you get it to work with SVG I'd be curious to see the result if you don't mind sharing the code.
Yeah I actually got it to work so far
I can draw lines and what not, now i just need to place restrictions on them.
idk how to share my code effectively but here it is on codepen https://codepen.io/benjaminluan/pen/eYPwEXK
oh shit nvm i did it
Looks quite good, I never could've done this in React at all.. good job!
ty man its a small step but we're getting somewhere
Haven't really messed with svgs or canvas but i just know that with svgs I'll be able to maybeeee switch those lines out for something more fun?
Then maybe have funky pathings and curves etc... with the path svgs
Baby steps 🙂
Looking at this now, it's probably harder to do some parts with Canvas, for example the collapsable menus on the left would have their own challenges on their own. It would probably involve having three different set of canvas that you toggle on off... so ultimately just use what you are most comfortable with.
The good thing is you can always port it to canvas if you have to, and there you can also use svgs
Sweet, yeah I just wanted a solution that was versatile so i don't have to adhere to weird property / special rules