search

bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
54 stars 6 forks source link

Multi-assignment event dragging leaves a copy of the dragged event when `LockRows` feature enabled #9692

Closed taauntik closed 2 months ago

taauntik commented 3 months ago

Forum Post

Hello,

When using Multi Assignment, having LockRows feature enabled and a resource set to fixed: true, if you drag one of the multi assignment events the event becomes visually duplicated and stuck.

If you have one of the resources with fixed: false, the original event is re-drawn and animates back to its original position.

If you have the resources with fixed: false and have a lot of resources, the event gets stuck and visually duplicated when dragging to a much lower resource.

Here is modified code for the Multi-Assignment demo with a fixed row, which causes the drag problem. Here you can see Celia is set to fixed for lockRow and if you drag on of the other Multi Assignment events it becomes duplicated:

import { Scheduler } from '../../build/scheduler.module.js?478334';
import shared from '../_shared/shared.module.js?478334';

//region Data

const
    resources = [
    { id: 'r1', name: 'Celia', city: 'Barcelona', fixed: true },
    { id: 'r2', name: 'Lee', city: 'London' },
    { id: 'r3', name: 'Macy', city: 'New York' },
    { id: 'r4', name: 'Madison', city: 'Barcelona' },
    { id: 'r5', name: 'Rob', city: 'Rome' },
    { id: 'r6', name: 'Dave', city: 'Barcelona' },
    { id: 'r7', name: 'Dan', city: 'London' },
    { id: 'r8', name: 'George', city: 'New York' },
    { id: 'r9', name: 'Gloria', city: 'Rome' },
    { id: 'r10', name: 'Henrik', city: 'London' },
    { id: 'r11', name: 'Alice', city: 'Paris' },
    { id: 'r12', name: 'Bob', city: 'Berlin' },
    { id: 'r13', name: 'Charlie', city: 'Madrid' },
    { id: 'r14', name: 'David', city: 'Tokyo' },
    { id: 'r15', name: 'Eve', city: 'Sydney' },
    { id: 'r16', name: 'Frank', city: 'Toronto' },
    { id: 'r17', name: 'Grace', city: 'Chicago' },
    { id: 'r18', name: 'Hank', city: 'San Francisco' },
    { id: 'r19', name: 'Ivy', city: 'Dublin' },
    { id: 'r20', name: 'Jack', city: 'Moscow' },
    { id: 'r21', name: 'Alice', city: 'Paris' },
    { id: 'r22', name: 'Bob', city: 'Berlin' },
    { id: 'r23', name: 'Charlie', city: 'Madrid' },
    { id: 'r24', name: 'David', city: 'Tokyo' },
    { id: 'r25', name: 'Eve', city: 'Sydney' },
    { id: 'r26', name: 'Frank', city: 'Toronto' },
    { id: 'r27', name: 'Grace', city: 'Chicago' },
    { id: 'r28', name: 'Hank', city: 'San Francisco' },
    { id: 'r29', name: 'Ivy', city: 'Dublin' },
    { id: 'r30', name: 'Jack', city: 'Moscow' },
    { id: 'r31', name: 'Alice', city: 'Paris' },
    { id: 'r32', name: 'Bob', city: 'Berlin' },
    { id: 'r33', name: 'Charlie', city: 'Madrid' },
    { id: 'r34', name: 'David', city: 'Tokyo' },
    { id: 'r35', name: 'Eve', city: 'Sydney' },
    { id: 'r36', name: 'Frank', city: 'Toronto' },
    { id: 'r37', name: 'Grace', city: 'Chicago' },
    { id: 'r38', name: 'Hank', city: 'San Francisco' },
    { id: 'r39', name: 'Ivy', city: 'Dublin' },
    { id: 'r40', name: 'Jack', city: 'Moscow' },
    { id: 'r41', name: 'Alice', city: 'Paris' },
    { id: 'r42', name: 'Bob', city: 'Berlin' },
    { id: 'r43', name: 'Charlie', city: 'Madrid' },
    { id: 'r44', name: 'David', city: 'Tokyo' },
    { id: 'r45', name: 'Eve', city: 'Sydney' },
    { id: 'r46', name: 'Frank', city: 'Toronto' },
    { id: 'r47', name: 'Grace', city: 'Chicago' },
    { id: 'r48', name: 'Hank', city: 'San Francisco' },
    { id: 'r49', name: 'Ivy', city: 'Dublin' },
    { id: 'r50', name: 'Jack', city: 'Moscow' },
    { id: 'r51', name: 'Alice', city: 'Paris' },
    { id: 'r52', name: 'Bob', city: 'Berlin' },
    { id: 'r53', name: 'Charlie', city: 'Madrid' },
    { id: 'r54', name: 'David', city: 'Tokyo' },
    { id: 'r55', name: 'Eve', city: 'Sydney' },
    { id: 'r56', name: 'Frank', city: 'Toronto' },
    { id: 'r57', name: 'Grace', city: 'Chicago' },
    { id: 'r58', name: 'Hank', city: 'San Francisco' },
    { id: 'r59', name: 'Ivy', city: 'Dublin' },
    { id: 'r60', name: 'Jack', city: 'Moscow' },
    { id: 'r61', name: 'Alice', city: 'Paris' },
    { id: 'r62', name: 'Bob', city: 'Berlin' },
    { id: 'r63', name: 'Charlie', city: 'Madrid' },
    { id: 'r64', name: 'David', city: 'Tokyo' },
    { id: 'r65', name: 'Eve', city: 'Sydney' },
    { id: 'r66', name: 'Frank', city: 'Toronto' },
    { id: 'r67', name: 'Grace', city: 'Chicago' },
    { id: 'r68', name: 'Hank', city: 'San Francisco' },
    { id: 'r69', name: 'Ivy', city: 'Dublin' },
    { id: 'r70', name: 'Jack', city: 'Moscow' },
    { id: 'r71', name: 'Alice', city: 'Paris' },
    { id: 'r72', name: 'Bob', city: 'Berlin' },
    { id: 'r73', name: 'Charlie', city: 'Madrid' },
    { id: 'r74', name: 'David', city: 'Tokyo' },
    { id: 'r75', name: 'Eve', city: 'Sydney' },
    { id: 'r76', name: 'Frank', city: 'Toronto' },
    { id: 'r77', name: 'Grace', city: 'Chicago' },
    { id: 'r78', name: 'Hank', city: 'San Francisco' },
    { id: 'r79', name: 'Ivy', city: 'Dublin' },
    { id: 'r80', name: 'Jack', city: 'Moscow' },
    { id: 'r81', name: 'Alice', city: 'Paris' },
    { id: 'r82', name: 'Bob', city: 'Berlin' },
    { id: 'r83', name: 'Charlie', city: 'Madrid' },
    { id: 'r84', name: 'David', city: 'Tokyo' },
    { id: 'r85', name: 'Eve', city: 'Sydney' },
    { id: 'r86', name: 'Frank', city: 'Toronto' },
    { id: 'r87', name: 'Grace', city: 'Chicago' },
    { id: 'r88', name: 'Hank', city: 'San Francisco' },
    { id: 'r89', name: 'Ivy', city: 'Dublin' },
    { id: 'r90', name: 'Jack', city: 'Moscow' },
    { id: 'r91', name: 'Alice', city: 'Paris' },
    { id: 'r92', name: 'Bob', city: 'Berlin' },
    { id: 'r93', name: 'Charlie', city: 'Madrid' },
    { id: 'r94', name: 'David', city: 'Tokyo' },
    { id: 'r95', name: 'Eve', city: 'Sydney' },
    { id: 'r96', name: 'Frank', city: 'Toronto' },
    { id: 'r97', name: 'Grace', city: 'Chicago' },
    { id: 'r98', name: 'Hank', city: 'San Francisco' },
    { id: 'r99', name: 'Ivy', city: 'Dublin' },
    { id: 'r100', name: 'Jack', city: 'Moscow' },
    { id: 'r101', name: 'Alice', city: 'Paris' },
    { id: 'r102', name: 'Bob', city: 'Berlin' },
    { id: 'r103', name: 'Charlie', city: 'Madrid' },
    { id: 'r104', name: 'David', city: 'Tokyo' },
    { id: 'r105', name: 'Eve', city: 'Sydney' },
    { id: 'r106', name: 'Frank', city: 'Toronto' },
    { id: 'r107', name: 'Grace', city: 'Chicago' },
    { id: 'r108', name: 'Hank', city: 'San Francisco' },
    { id: 'r109', name: 'Ivy', city: 'Dublin' },
    { id: 'r110', name: 'Jack', city: 'Moscow' }
],
    events      = [
        {
            id        : 1,
            startDate : new Date(2017, 0, 1, 10),
            endDate   : new Date(2017, 0, 1, 12),
            name      : 'Multi assigned',
            iconCls   : 'b-fa b-fa-users'
        },
        {
            id         : 2,
            startDate  : new Date(2017, 0, 1, 13),
            endDate    : new Date(2017, 0, 1, 15),
            name       : 'Single assigned',
            iconCls    : 'b-fa b-fa-user',
            eventColor : 'indigo'
        },
        {
            id         : 3,
            startDate  : new Date(2017, 0, 1, 8),
            endDate    : new Date(2017, 0, 1, 11),
            name       : 'Single assigned',
            iconCls    : 'b-fa b-fa-user',
            eventColor : 'cyan'
        },
        {
            id         : 4,
            startDate  : new Date(2017, 0, 1, 10),
            endDate    : new Date(2017, 0, 1, 13),
            name       : 'Single assigned',
            iconCls    : 'b-fa b-fa-user',
            eventColor : 'blue'
        },
        {
            id         : 5,
            startDate  : new Date(2017, 0, 1, 13),
            endDate    : new Date(2017, 0, 1, 15),
            name       : 'Single assigned',
            iconCls    : 'b-fa b-fa-user',
            eventColor : 'violet'
        }
    ],
    assignments = [
        { id : 1, resourceId : 'r1', eventId : 1 },
        { id : 2, resourceId : 'r2', eventId : 1 },
        { id : 3, resourceId : 'r8', eventId : 1 },
        { id : 4, resourceId : 'r3', eventId : 2 },
        { id : 5, resourceId : 'r4', eventId : 3 },
        { id : 6, resourceId : 'r5', eventId : 4 },
        { id : 7, resourceId : 'r6', eventId : 5 }
    ];

//endregion

const scheduler = new Scheduler({
    appendTo : 'container',

startDate         : new Date(2017, 0, 1, 6),
endDate           : new Date(2017, 0, 1, 20),
viewPreset        : 'hourAndDay',
eventStyle        : 'border',
resourceImagePath : '../_shared/images/users/',
multiEventSelect  : true,

columns : [
    { type : 'resourceInfo', text : 'Name', field : 'name', width : 130 },
    { text : 'City', field : 'city', width : 90 }
],

features : {
    eventDragSelect : true, 
        lockRows : {
        // Defines a data field to determine if a record is locked or not
        fieldName : 'fixed'
    },
},

resources,
events,
assignments
});

GN7Dq63

https://github.com/user-attachments/assets/2031e882-c5f0-4b5b-a1a9-a817ca51e0f8