flekschas / regl-scatterplot

Scalable WebGL-based scatter plot library build with Regl
https://flekschas.github.io/regl-scatterplot/
MIT License
194 stars 24 forks source link

lassoInitiator not works #167

Closed masalinas closed 5 months ago

masalinas commented 9 months ago

I would like to active the lassoInitiator functionality to avoid to use the extra shift button to init the lasso functionality. I activated it one time from this piece of code. This code is executed inside the ngAfterViewInit() function (Angular):

    this.scatterplot = createScatterplot({
      canvas,
      width,
      height
    });

    // Activate reticle and set reticle color to red and lasso initialization functionality
    this.scatterplot.set({ lassoInitiator: true, showReticle: true, reticleColor: [0, 0, 0, 0.66] });

As you can see I have activated this param but I need to click the shift button to initialize the lasso functinality. The showReticle works ok, but the lassoInitiator not. I don't know if is an issue or exist a problem from my side.

flekschas commented 7 months ago

Apologies! I totally missed this ticket. This is a bug. Fortunately it's easy to work around it. Simply set lassoInitiator: true insight the createScatterplot as follows:

this.scatterplot = createScatterplot({
  canvas,
  width,
  height,
  lassoInitiator: true
});
masalinas commented 7 months ago

I tried to configure the scatter as you say like this a

 this.scatterplot = createScatterplot({
      canvas,
      width,
      height,
      lassoInitiator: true,
      showReticle: true, 
      reticleColor: [0, 0, 0, 0.66]
    });
 <div class="flex flex-row"> 
    <canvas class="canvas-points" #canvasPlot [hidden]="!hiddenSpinner"></canvas>
    ...

 </div>   

Also as you see the reticle not apper in the canvas, only the height and width attributes works the other ones not.

Version: "regl-scatterplot": "^1.8.5",

But the functionality not works. Any suggestion?

flekschas commented 7 months ago

How exactly do you know that the functionality is not working? I just tried it today and it works as expected for me. A short screen recording would help a lot to pin point the issue.

flekschas commented 7 months ago

Actually I can't reproduce the issue. One idea I have why it might not work for you is that the lasso initiator is added to the wrong parent element. What have you set lassoInitiatorParentElement to? By default it's document.body but I suspect that you want to set it to <div class="flex flex-row">

flekschas commented 7 months ago

Also as an aside, you can also lasso elements via long press if you create the scatter plot instance as follows:

this.scatterplot = createScatterplot({
  canvas,
  width,
  height,
  lassoOnLongPress: true,
});

I personally like the long press option more as I find it less fiddly. Here's how it looks like:

lasso long press

masalinas commented 7 months ago

Great!! you were right, the atrribute to use is lassoOnLongPress: true now works ok as your video. Thanks a lot.

And taking advantage to finalize this ticket, do you now what is the configuration to show a reticle in the canvas?

regards

flekschas commented 7 months ago

what is the configuration to show a reticle in the canvas?

this.scatterplot = createScatterplot({
  canvas,
  width,
  height,
  lassoOnLongPress: true,
  showReticle: true,
});
flekschas commented 5 months ago

I'm closing this issue as the problem appears to be addressed.