Timespan highlights stops working after project model change

[chuckn0rris]

Forum post

Code to repro below Press "Clear" btn, see timespan cleared. Press "Change ProjetModel" and press "Clear" btn again. See timespan is not cleared.

import '../_shared/shared.js'; // not required, our example styling etc.
import DateHelper from '../../lib/Core/helper/DateHelper.js';
import AsyncHelper from '../../lib/Core/helper/AsyncHelper.js';
import DataGenerator from '../../lib/Core/helper/util/DataGenerator.js';
import Mask from '../../lib/Core/widget/Mask.js';
import '../../lib/Grid/column/RowNumberColumn.js';
import SchedulerPro from '../../lib/SchedulerPro/view/SchedulerPro.js';
import ProjectModel from '../../lib/SchedulerPro/model/ProjectModel.js';
import '../../lib/Scheduler/feature/Dependencies.js';
import '../../lib/SchedulerPro/feature/TimeSpanHighlight.js';
import '../../lib/Scheduler/feature/ResourceTimeRanges.js';
import '../../lib/SchedulerPro/feature/ResourceNonWorkingTime.js';

const TARGET_YEAR = 2024;
const TARGET_MONTH = 0;
const RESOURCE_RECORD_INDEX = 3;

const resources = [
  { id: 1, name: "Arcady", role: "Core developer", eventColor: "purple" },
  { id: 2, name: "Dave", role: "Tech Sales", eventColor: "indigo" },
  { id: 3, name: "Henrik", role: "Sales", eventColor: "blue" },
  { id: 4, name: "Linda", role: "Core developer", eventColor: "cyan" },
  { id: 5, name: "Maxim", role: "Developer & UX", eventColor: "green" },
  { id: 6, name: "Mike", role: "CEO", eventColor: "lime" },
  { id: 7, name: "Lee", role: "CTO", eventColor: "orange" },
];
const altResources = [
  { id: 1, name: "Sophie", role: "Project Manager", eventColor: "pink" },
  { id: 2, name: "Jonathan", role: "Full Stack Developer", eventColor: "red" },
  { id: 3, name: "Ella", role: "Designer", eventColor: "yellow" },
  { id: 4, name: "James", role: "Backend Developer", eventColor: "blue" },
  { id: 5, name: "Emily", role: "QA Engineer", eventColor: "green" },
  { id: 6, name: "Lucas", role: "Tech Lead", eventColor: "purple" },
  { id: 7, name: "Grace", role: "DevOps Engineer", eventColor: "orange" },
];
const events = [
  {
    id: 1,
    resourceId: 1,
    name: "First Task",
    startDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 10),
    endDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 12),
  },
  {
    id: 2,
    resourceId: 2,
    name: "Second Task",
    startDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 12),
    endDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 13),
  },
  {
    id: 3,
    resourceId: 3,
    name: "Third Task",
    startDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 14),
    endDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 16),
  },
  {
    id: 4,
    resourceId: 4,
    name: "Fourth Task",
    startDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 8),
    endDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 11),
  },
  {
    id: 5,
    resourceId: 5,
    name: "Fifth Task",
    startDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 15),
    endDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 17),
  },
  {
    id: 6,
    resourceId: 6,
    name: "Sixth Task",
    startDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 16),
    endDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 18),
  },
];

const theDefaultProject= {
  events,
  resources,
};

const theAltProject = {
  resources: altResources,
  events,
};

const theDefaultColumn = {
  id: "default",
  text: "Name",
  field: "name",
  width: 200,
  showEventCount: false,
};

const dayHeaderRow = {
  increment: 1,
  unit: "day",
  dateFormat: "ddd DD/MM/YYYY",
  align: "start",
};
const hourHeaderRow = {
  increment: 1,
  unit: "hour",
  dateFormat: "HH:mm",
  align: "start",
};

const switchAction = async () => {
  if (mode === "tick") {
    schedulerPro.suspendRefresh();
    schedulerPro.highlightTimeSpans(tockHighlights);
    schedulerPro.project = new ProjectModel(theAltProject);
    mode = "tock";
    await schedulerPro.resumeRefresh();
    return;
  }

  if (mode === "tock") {
    schedulerPro.suspendRefresh();
    schedulerPro.highlightTimeSpans(tickHighlights);
    schedulerPro.project = new ProjectModel(theDefaultProject);
    mode = "tick";
    await schedulerPro.resumeRefresh();
  }
};

// Initial setup
const schedulerPro = new SchedulerPro({
    appendTo         : 'container',
      startDate: new Date(TARGET_YEAR, TARGET_MONTH, 1),
  columns: [theDefaultColumn],
  project: theDefaultProject,
  viewPreset: {
    base: "hourAndDay",
    // When no end date is present, scheduler will use the defaultSpan to calculate the end date
    defaultSpan: 24,
    tickWidth: 100,
    headers: [dayHeaderRow, hourHeaderRow],
  },
  features: {
    timeSpanHighlight: {
      disabled: false,
    },
  },
  tbar: [
    {
      text: "Clear timespan highlights",
      // Alternate Async version
      // async onAction() {
      //   await schedulerPro.unhighlightTimeSpans();
      // },
      onAction({ source }) {
        debugger
        // Use the source to access the owner Scheduler
        const sourceScheduler = source.owner.owner;
        sourceScheduler.unhighlightTimeSpans();
        // Alternately, uncomment and access the original scheduler instance.
        // schedulerPro.highlightTimeSpans([]);
      },
    },
    {
      text: "Switch Project Model",
      onAction() {
        switchAction().then(() => console.log("Project models switched", mode));
      },
    },
  ],
});

// Set initial highlights
const tickHighlights = [
  {
    name: "TICK",
    startDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 3),
    endDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 5),
  },
  {
    resourceRecord: schedulerPro.resourceStore.getAt(RESOURCE_RECORD_INDEX),
    startDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 2),
    endDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 10),
    cls: "resource-highlight",
  },
];
schedulerPro.highlightTimeSpans(tickHighlights);

const tockHighlights = [
  {
    name: "TOCK",
    startDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 6),
    endDate: new Date(TARGET_YEAR, TARGET_MONTH, 1, 8),
  },
];

// Mutate after initial render
let mode = "tick";

[matsbryntse]

test pushed to 10086-highlight