[ANGULAR] Drag selection mode enabled/disable

[ff4_dev]

Hi,

I am using the eventDragSelect and eventDragCreate in a scheduler, but since they are not allowed to be used at the same time, I tried to turn on/off when the other is on/off, with the indicator of keypress of Control. If user clicks control before dragging mouse, then the event selection is turned on, as soon as ctrl key is released, the event create is reactivated. I was able to do it successfully by doing this code.

<bry-scheduler
      #scheduler
      [rowHeight]         = "schedulerConfig.rowHeight"
      [minHeight]         = "schedulerConfig.minHeight"
      [height]            = "schedulerConfig.height"
      [barMargin]         = "schedulerConfig.barMargin"
      [startDate]         = "startDate"
      [endDate]           = "getSchedulerExclusiveEndDate()"
      [columns]           = "schedulerConfig.columns"
      [eventColor]        = "schedulerConfig.eventColor"
      [eventStyle]        = "schedulerConfig.eventStyle"
      [resourceTimeRangesFeature] = "true"
      [treeFeature]       = "true"
      [eventDragFeature]  = "features.eventDragFeature"
      [eventDragCreateFeature]  = "features.eventDragCreateFeature"
      [eventDragSelectFeature]  = "features.eventDragSelectFeature"
      [panFeature]  = "fals
      [eventResizeFeature]= "false"
      [viewPreset]        = "schedulerConfig.viewPreset"
      [dependenciesFeature]="true"
      [timeRangesFeature] = "timeRanges"
      [stripeFeature]     = "true"
      [eventContextMenuFeature]="eventContextMenu"

  (onSchedulerEvents) = "onSchedulerEvents($event)"
></bry-scheduler>

// ts code

features = {
eventDragCreateFeature: true,
panFeature: false,
eventDragFeature: true,
eventDragSelectFeature: false
  };
  

  

  // this works
  @HostListener('document:keydown', ['$event']) onkeydown(event: KeyboardEvent): void {
    console.log('keydown', event);
    if (event.key === 'Control') {
      // this.isCtrlKeyPressed = true;

  // disable eventDragCreate
  if (typeof this.scheduler.schedulerEngine.features.eventDragCreate === 'object') {
    console.log('disable eventDragCreate');
    this.scheduler.schedulerEngine.features.eventDragCreate.disabled = true;
  }
  this.scheduler.schedulerEngine.features.eventDragCreate = false;
  // enable eventDragSelect
  // @ts-ignore
  this.scheduler.schedulerEngine.features.eventDragSelect = this.scheduler.schedulerEngine.createFeatureInitializer(
    this.scheduler.schedulerEngine.features, 'eventDragSelect', EventDragSelect).get();

}
  }


  @HostListener('document:keyup', ['$event']) onkeyup(event: KeyboardEvent): void {
    console.log('keyup', event);
    if (event.key === 'Control') {

  // this.isCtrlKeyPressed = false;
  // disable eventDragSelect
  if (typeof this.scheduler.schedulerEngine.features.eventDragSelect === 'object') {
    console.log('disable eventDragSelect');
    this.scheduler.schedulerEngine.features.eventDragSelect.disabled = true; // this doesn't work
  }
  this.scheduler.schedulerEngine.features.eventDragSelect = false; // this doesn't work
  // enable eventDragCreate
  // @ts-ignore
  this.scheduler.schedulerEngine.features.eventDragCreate = this.scheduler.schedulerEngine.createFeatureInitializer(
    this.scheduler.schedulerEngine.features, 'eventDragCreate', EventDragCreate, {showTooltip: false}).get(); //this works


}
  }
  

the only issue is when I tried to disable the eventdragselection in the keyup event, it won't disable. it still has the selection rectangle and still highlights the events in the scheduler that was selected. How to disable it please?

eventdrag.PNG (38.02 KiB) Viewed 1331 times

[mats]

What version of scheduler are you using? Disabling works fine, try it here: https://bryntum.com/examples/scheduler/dragselection/

In console:

scheduler.features.eventDragSelect.disabled = false

[Maxim Gorkovsky]

Hello.
I tried to reproduce this issue, but it works just fine locally. I've modified angular filtering demo like so:

// app.component.ts
import { DateField, DateHelper, DomClassList, EventDragCreate } from 'bryntum-scheduler/scheduler.umd.js';
...
    filterBarFeature = true;
    eventDragCreateFeature = false // switch features, dragcreate doesn't throw when instantiated after dragselect
    eventDragSelectFeature = true // don't forget to add these to <bry-scheduler>
...
@HostListener('document:keydown', ['$event'])
    onKeyDown(e) {
        const scheduler = this.scheduler.schedulerInstance;

        if (e.key === 'Control') {
            scheduler.features.eventDragCreate.disabled = false;
            scheduler.features.eventDragSelect.disabled = true;
        }
    }

    @HostListener('document:keyup', ['$event'])
    onKeyUp(e) {
        const scheduler = this.scheduler.schedulerInstance;

        if (e.key === 'Control') {
            scheduler.features.eventDragCreate.disabled = true;
            scheduler.features.eventDragSelect.disabled = false;
        }
    }

ngAfterViewInit() {
        // exposing scheduling engine to be easily accessible from console
        const scheduler = window.scheduler = this.scheduler.schedulerInstance;

        // @ts-ignore
        Object.defineProperty(scheduler.features, 'eventDragCreate', scheduler.createFeatureInitializer(scheduler.features, 'eventDragCreate', EventDragCreate, { disabled : true }));
...

Feature is initialized once upon construction, and later it is just switched with key events. I cannot see the problem you're describing.

Please try this snippet in your app and see if you can reproduce issue still.

[ff4_dev]

I'm using * Bryntum Scheduler 3.1.2

I have tried that link that you posted (hat was the first thing I tried), but it's not applicable on mine coz this code -->

 this.scheduler.features.eventDragSelect.disabled = true; 

says Property 'features' is private and only accessible within class 'SchedulerComponent'.
but I guess it is the same as the code

 this.scheduler.schedulerEngine.features.eventDragSelect.disabled = true;

which I used and is not working.
I have tried to disable all the things I could possibly disable, but still the selector rectangle appears on eventDragCreate.

Okay, I will try the snippet and see what will happen. thanks

[ff4_dev]

I tried the snippet, but issue still exists. My issue is not initializing the events, it is the DISABLING of the eventDragSelection after it is enabled. The code below and codes given in the documentation as well as replies here on how to disable it doesn't work.

this.scheduler.schedulerEngine.features.eventDragSelect.disabled = true; 
 this.scheduler.schedulerEngine.features.eventDragSelect = false;

as per my image posted above, it still has drag rectangle showing and still highlights the events in the scheduler even though the line to disable it was executed. The evencreatedrag turns on and off fine on control key events. eventDragSelect is the problematic one, it turns on but never turns off no matter what I do, so I ended up dragging in the scheduler with an event pop up as well as selection rectangle like the img in my prev post.

steps to replicate:

1. do not click control key, just drag a line in the scheduler - working ok, as this will create an event and a pop up will show.
2. click control + drag a line in the scheduler - working ok, as this will activate the selection mode and disable the eventDragCreate, hence, will not show an event pop up, but instead will highlight events within the rectangle produced upon dragging.
3. release control key and do step #1, this is where the issue is. It should only show create event pop up and should already disabled the eventDragSelect, but that is not what happens, instead they are both showing.

[Maxim Gorkovsky]

Please try snippet on our scheduler angular filtering demo. I have tried it there and didn't see any issues disabling drag selection. If you can reproduce your problem on filtering demo with snippet applied, please provide steps for us to reproduce locally.

You shouldn't do this

this.scheduler.schedulerEngine.features.eventDragSelect = false;

This is correct approach:

this.scheduler.schedulerEngine.features.eventDragSelect.disabled = true;

[ff4_dev]

But I did that. Okay, I will try again the demo (although I already tried it), but this time with nothing but it.

[ff4_dev]

Hi,

I am at my wit's end here, more than 2 days and still not able to solve this issue. I have done every possible ways to disable it to no avail. I have tried all the snippets given here with no luck, but I have found out that my other team mate was not able to replicate my issue, the eventDragSelection is disabled on her part using my code (which I also pasted here), the main difference is I am using windows while she is using MAC. My other team mate is using windows too and we both are able to replicate the issue -- that eventDragSelection is not disabling. Not sure if that is the case here. Can you please confirm that those who answered here that it is (or my code) is working fine is you are also using windows and not mac? thanks

[Maxim Gorkovsky]

I'm using windows too and I cannot see the problem. I'm attaching angular filtering demo which allows to switch features on Ctrl key and doesn't leave any extra elements behind. Please try it locally.
Also, are you using touch screen device?

[ff4_dev]

Hi, I opened your solution but this line gives me error

 const scheduler = this.scheduler.schedulerInstance;

saying Property 'schedulerInstance' does not exist on type 'SchedulerComponent'
I've attached here saying schedulerengine used to be now what is called schedulerInstance

so we use this.scheduler.schedulerEngine;

Does that matter? I am using lower version, can you please check version Bryntum Scheduler 3.1.2?

I've done the solution but still exists, it's actually not even showing the create drag event, always on selection mode, even if I don't press control.