typescript - newDragSource() در golden-layout 2.6.0 کار نمیکند

ما در حال (بهطور کند و فوقالعاده دردناک) مهاجرت از golden-layout نسخه 1.5.9 به golden-layout نسخه 2.6.0 در یک اپلیکیشن بزرگ تولیدی Angular 16 هستیم.

در داخل برنامه ما، یک منوی کشویی وجود دارد که شامل نام تمام ویجتهای موجود است که میتوانند به صفحه اضافه شوند. در طول مقداردهی اولیه، تمام عناصر HTML موجود در منو به عنوان منابع قابل کشیدن با استفاده از متد newDragSource شی GoldenLayout اضافه میشوند.

در نسخه 1.5.9 از golden-layout این بهطور کامل کار میکرد و آیتمها از منو میتوانستند روی صفحه کشیده شوند و بهعنوان اجزای golden-layout با تمام عملکردهای مورد انتظار اضافه میشدند. علاوه بر این، انتخاب یک آیتم در این منو با یک کلیک نیز کامپوننت را به صفحه اضافه میکرد.

در نسخه ۲.۶.۰ این اصلاً کار نمیکند. آیتمهای منو حتی قابل کشیدن هم نیستند. کلیک کردن روی یک آیتم در منو هنوز هم کار میکند و مؤلفه انتخابشده را به طرح اضافه میکند و تمام عملکردهای مورد انتظار را دارد.

کدی که من برای ایجاد منابع کشیدن استفاده میکنم به صورت زیر است:

public createNewWidgetDragSource(element: HTMLElement, widgetModel: Widget): void {
  const gl = this.getGoldenLayoutInstance();
  const config = () => {
    const item: DragSource.ComponentItemConfig = {
      state: null,
      title: widgetModel.name,
      type: 'widget-golden-instance',
    };
    return item;
  };

  gl.newDragSource(element, config);
}

توجه داشته باشید که این تقریباً همان کدی است که در برنامه مرجع golden-layout-ng-app استفاده شده است. در برنامه مرجع، کد همانطور که انتظار میرود کار میکند. برنامه مرجع از golden-layout نسخه ۲.۵.۰ استفاده میکند.

توجه داشته باشید که نوع کامپوننت widget-golden-instance یک کامپوننت کانتینر عمومی در golden-layout است که به عنوان میزبان تعدادی از ویجتهای خودمان عمل میکند.

اگر شیء gl را در کد بالا بررسی کنم، میتوانم ببینم که آرایه _dragSources داخل شیء با عناصر LI از منو پر شده است.

در ویرایشگر یا مرورگر خطایی وجود ندارد (فقط یک هشدار منسوخ شدن برای ComponentItemConfig در زیر فضای نام DragSource وجود دارد - من بدون این آن را امتحان کردم و رفتار همان بود).

این اصلاً کار نمیکند.

آیا چیزی را از دست دادم؟ آیا این یک خطاست؟

ویرایش

احساس میکنم این به این واقعیت مربوط است که آیتمهای فهرستی که میخواهم به عنوان منابع کشیدن ایجاد کنم، در یک منو هستند. اگر فقط یک عنصر را به صورت کد ثابت به صفحه اضافه کنم و سپس همان عنصر را قابل کشیدن کنم (با همان تابع createNewWidgetDragSource)، آنگاه طبق انتظار کار میکند.

با این حال، من آزمایش کردهام که عناصر منو را به عنوان dragSources تا زمانی که منو واقعاً باز نشده و آیتمهای فهرست قابل مشاهده نیستند، مقداردهی اولیه نکنم، و همچنان کار نمیکند.

اگر متد createNewWidgetDragSource را صدا بزنم و یک عنصر HTML به آن ندادم، سپس خطایی از منبع golden-layout میبینم و تأیید کردهام که این متد عناصر آیتمهای لیست از منو را دریافت میکند.

من سعی کردم برنامه مرجع را بهروزرسانی کنم تا از golden-layout 2.6.0 به جای 2.5.0 استفاده کند، و کشیدن هنوز هم در آنجا کار میکند.

همه چیز درست به نظر میرسد، من المانهای درست را در زمان درست دارم، هیچ خطایی وجود ندارد. فقط حاضر نیست کار کند.

پاسخ شماره ۱

سرانجام این را فهمیدم.

حتی با اینکه من موارد فهرست را در منو به عنوان آیتمهای dragSource میساختم، هندلر رویداد mouseDown (که توسط golden-layout هنگام ایجاد هر dragSource اضافه میشد) روی یک عنصر label داخل آیتم فهرست فعال میشد نه روی خود آیتم فهرست، و منطق خاصی در داخل golden-layout وجود دارد که بررسی میکند هدف رویداد mouseDown همان عنصر dragSource است یا خیر. بدیهی است که این یکی نبود، بنابراین آن منطق شکست خورد.

قرار دادن برچسبها داخل آیتمهای لیست بهعنوان منابع کشیدن مشکل را برطرف کرد