So I think I have most of this working, however the onInstanceClicked script does not run until AFTER the onMouseUp event, and so the index does not get set in time to reference it in the instance.position change script.
Any ideas?
I’ll need to think about that for a bit.
Ah, yah, what that component really needs is onInstanceMouseDown for an Event, along with an accompanying onInstanceMouseUp. It looks like for now there is not a way to get the mouseDown or click location within the View.
1 Like
So, I managed to accomplish this with a mouseOver event on the embedded view, that changes an output parameter called mouseOver and then I call a messageHandler to check for any instances where mouseOver = True. That allows me to get my index value before I start moving, and it works great when moving from 0,0!
However, whenever I click the item again, the delta goes to 0, 0 and the instance moves to 0,0 with it (because of the script on the instances.position custom property), any idea what could be causing this?
I feel like maybe I am missing something when changing my instance position, as if maybe it should be the delta from its starting position and not just its current position?
Here is an export of my view if that helps
ClickAndDragTest.zip (4.6 KB)
Also this would be fantastic, Here is the ideas post!
Ah, there needs to be a sort of go-between variable which registers the initial original.instanceLeft and original.instanceTop. These values should not change during the drag, but they should be used to define the new position. So custom.instance.position.left should be expression bound to
{custom.original.instanceLeft} + {custom.delta.x}
1 Like
I think we have a winner! It is not perfect, I think because of having to use the messagehandlers and timing, and with an onInstanceMouseDown and onInstanceMouseUp would really smooth that out. That would also eliminate the need to have the messageHandlers and output parameter too, making it a much smoother design.
However, here is a working version incase anyone needs it!
PerspectiveClickAndDragComponents.zip (5.0 KB)
9 Likes
Hi
Does this work smooth over slow internet connection? All mouse position should be send to server and back to client.
Do you get response movement?
Unfortunately I havent tested it over a slow internet connection so I am not sure
Everything should be there to spin up a project in your own environment and test it out though
1 Like
If you want to test how something performs on a slow connection but your internet speed is just too good, you can throttle your internet speed in the browser to test it. Click F12 >Network, No throttling > Slow 3G. Just change it back when you are done.
4 Likes
Don’t bother it is not worth testing. even in the local network, it doesn’t perform like a native js.
It has been over a year for this thread, so I wondered if there is something developed or being developed for Perspective drag and drop?
I want to highlight zones on a very detailed image.
(1000-2000 locations for just one image of 60)
Initially I tried to get information on which areas to highlight in a spreadsheet with dropdowns for each of some 1000 or more zones. A few people split this up and got me the spreadsheet pretty quickly for 1/60.
Then I was told that I needed to get more isolated zones highlighted. So this went on the backburner till I could figure out a good way.
Now this looks like maybe there is a way to get them in a couple weeks
Maybe I can:
- Make a page with the image in the background
- Place a label of which zone to highlight from my query.
- Place some objects to overlay the image that can be duplicated, dragged, and resized
- Place a button to both save and index to the next zone request
(I think I need at least 24,000 zones, and they need to be adjustable in the future.)
Is there a better option for drag, duplicate, and resize of shapes for setting the zones?
Or is building from KGamble's PerspectiveClickAndDragComponents going to be best to get started?
I am struggling to envision this request, but my brain is thinking something with SVGs and hover styling.
Are you able to provide an image or a rough mockup of what you're looking for?
I looked for an image fast online, but didn't find one.
I guess, for now, imagine a picture of an assembly line with maybe two red dots overlaid to highlight where the fault is happening for a jam detection.
Then scale that out to like 1000 different highlighted locations (or sets of locations) for that assembly lines different faults.
Receive one number, show the relevant locations highlighted.
The concept is kind of simple, but my implementation is a battle.
For an old example:
In the past, some machines would have a plastic board with red lights and a decal on it.
Then workers could look at it to which red lights were on.
In theory...
If this assembly line was displayed as a View Canvas, you could setup Events to track the mouseDown and mouseUp coordinates, then identify which instances of the view canvas are at least partially within the bounds of those coordinates and supply those instances with some sort of param which triggered an internal style change -- like overlaying an opacity.
1 Like
Soooo.... i was playing around a bit and i found something to inject js in perspective.
I know i know 
Its kinda terrible and requires some knowlegde about the perspective react props...
But this seems like it would fit here.
A little demo, not to complex for drag and drop.
Im writing it to a sessionprop, seems to be easier than trying to find the view props.
dndjsinject.zip (7.5 KB)
15 Likes
Amazing !
I just adapted it to make a native colorPicker component. 
nativeColorPickerJsInject.zip (13.1 KB)
8 Likes
What? That is magic 
God damn, I might have to start learning yet another language 
Itll be funny when people start seeing markdown components everywhere thinking 'what on earth...??'
4 Likes
Nah, you're just (abusing) the markdown component; I don't think it's really surprising that you can do this. If you really want to manage a bunch of scripts and HTML tags as raw strings attached to components...more power to you 
4 Likes
You could potentially add a simple module to add an RSyntaxTextArea that formats JS, and a scripting function to retrieve it for the binding.
A bit of work, but would make it 10x easier to add simple JS in that’s still clean
But at that point, you could just make a component to do this? Hahaha
2 Likes