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.
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:
(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.
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)
Amazing !
I just adapted it to make a native colorPicker component. 
nativeColorPickerJsInject.zip (13.1 KB)
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...??'
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 
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
Can someone let me in on what the js injector does without me loading up a project?
I mean, what is in JS that I can utilize?
I avoid downloading as much as possible.
I don't know what it does that can help me draw and save zones on images.
Edited again: I had posted a link of where I was learning how to draw on images with javascript, but I think it was not so trustworthy of a website.
However, I see now though kind of how people are drawing on images with Javascript, which could work to help me.
Thanks
I think I need to get to work on how I will store the information, and check out the View Canvas mouseDown and mouseUp events first. I don't think I am ready to learn JS.
I saw this thread come up yesterday and decided to clean up a color picker I had previously made. It's in review to be put on the exchange now. But thought I'd share here too. It only works with mouse right now and not touch screen. It also has a major limitation on having to pass in the x-y dimensions of the view canvas and can't be truly dynamically sized.
ColorPicker_2022-10-27_1537.zip (120.5 KB)
P.S. the JS injection for a color picker is super cool @victordcq and @e.sagnelonge
I knew it was possible for simple things, but finding the client context was kinda surprising 
Drawing things in js with htmlcanvas would be possible...
But that would be quite the undertaking, even if you know js.
Hi Victor
Did you find the trick to read and write to the view custom props?
@kgamble can you help me understand distinguishing between:
onInstanceMouseDown vs onMouseDown?
I saw your idea post for that.
I didn't know what is meant to be different in the case of instance.
Is it like, if the user does a mouse down on their session, that the event should happen only on their session?
A regular mouseDown will impact all sessions?
I was not sure, but if so, I thought maybe some custom component properties could be set when a page initializes, and used during the session with the available events.
onMouseDown is a "blanket" event which fires whenever a user depresses the mouse button within the boundaries of the component in question.
onInstanceMouseDown is an event that fires when a user depresses the mouse button within the boundaries of an instanced view within the View Canvas or Flex Repeater (and maybe Carousel).
If a user clicks within an instance, both events will fire because you are both within the boundaries of the Embedding component and an instance.
Gotcha 
const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value;
you can than do things like view.custom.read('yourprop'), view.custom.write('yourprop', thevalue), view.props.write('yourprop', thevalue), view.params.read('key')
you could dig into the children/root too, but you should probably just use bindings to the custom props unless you know what you are doing