BREAKING: renderDragSourceEffect/renderDropSourceEffect signature

Author: ShaMan123

src/EventTypeDefs.ts

@@ -165,6 +165,15 @@ interface OutEvent {
   nextTarget?: FabricObject;
 }
 
+export type DragEventRenderingEffectData = {
+  e: DragEvent;
+  dragSource: FabricObject | undefined;
+  dropTarget: FabricObject | undefined;
+  prevDropTarget: FabricObject | undefined;
+  viewportPoint: Point;
+  scenePoint: Point;
+};
+
 export interface DragEventData extends TEvent<DragEvent> {
   target?: FabricObject;
   subTargets?: FabricObject[];

src/canvas/Canvas.ts

@@ -3,6 +3,7 @@ import { NONE } from '../constants';
 import type {
   CanvasEvents,
   DragEventData,
+  DragEventRenderingEffectData,
   ObjectEvents,
   TPointerEvent,
   TPointerEventNames,
@@ -311,35 +312,35 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
    * Doing so will render the correct effect for all cases including an overlap between `source` and `target`.
    * @private
    */
-  private _renderDragEffects(
-    e: DragEvent,
-    source?: FabricObject,
-    target?: FabricObject
-  ) {
+  private _renderDragEffects(context: DragEventRenderingEffectData) {
+    const { dragSource, dropTarget, prevDropTarget } = context;
     let dirty = false;
     // clear top context
-    const dropTarget = this._dropTarget;
-    if (dropTarget && dropTarget !== source && dropTarget !== target) {
-      dropTarget.clearContextTop();
+    if (
+      prevDropTarget &&
+      prevDropTarget !== dragSource &&
+      prevDropTarget !== dropTarget
+    ) {
+      prevDropTarget.clearContextTop();
       dirty = true;
     }
-    source?.clearContextTop();
-    target !== source && target?.clearContextTop();
+    dragSource?.clearContextTop();
+    dropTarget !== dragSource && dropTarget?.clearContextTop();
     // render effects
     const ctx = this.contextTop;
     ctx.save();
     ctx.transform(...this.viewportTransform);
-    if (source) {
+    if (dragSource) {
       ctx.save();
-      source.transform(ctx);
-      source.renderDragSourceEffect(e, ctx);
+      dragSource.transform(ctx);
+      dragSource.renderDragSourceEffect(ctx, context);
       ctx.restore();
       dirty = true;
     }
-    if (target) {
+    if (dropTarget) {
       ctx.save();
-      target.transform(ctx);
-      target.renderDropTargetEffect(e, ctx);
+      dropTarget.transform(ctx);
+      dropTarget.renderDropTargetEffect(ctx, context);
       ctx.restore();
       dirty = true;
     }
@@ -455,7 +456,13 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       subTarget.fire(eventType, options);
     }
     //  render drag effects now that relations between source and target is clear
-    this._renderDragEffects(e, dragSource, dropTarget);
+    this._renderDragEffects({
+      ...points,
+      e,
+      dragSource,
+      dropTarget,
+      prevDropTarget: this._dropTarget,
+    });
     this._dropTarget = dropTarget;
   }
 
@@ -484,8 +491,9 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
    * @param {Event} [e] Event object fired on Event.js shake
    */
   private _onDragLeave(e: DragEvent) {
+    const points = getEventPoints(this, e);
     const options: DragEventData = {
-      ...getEventPoints(this, e),
+      ...points,
       e,
       target: this._draggedoverTarget,
       subTargets: this.targets,
@@ -495,7 +503,13 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
 
     //  fire dragleave on targets
     this._fireEnterLeaveEvents(undefined, options);
-    this._renderDragEffects(e, this._dragSource);
+    this._renderDragEffects({
+      ...points,
+      e,
+      dragSource: this._dragSource,
+      dropTarget: undefined,
+      prevDropTarget: this._dropTarget,
+    });
     this._dropTarget = undefined;
     //  clear targets
     this.targets = [];

src/shapes/IText/IText.ts

@@ -18,6 +18,7 @@ import {
 } from '../Text/constants';
 import { CENTER, LEFT, RIGHT } from '../../constants';
 import type { ObjectToCanvasElementOptions } from '../Object/Object';
+import type { DragEventRenderingEffectData } from '../../EventTypeDefs';
 
 type CursorBoundaries = {
   left: number;
@@ -551,7 +552,7 @@ export class IText<
   /**
    * @override Render drag start text selection
    */
-  renderDragSourceEffect(e: DragEvent, ctx: CanvasRenderingContext2D) {
+  renderDragSourceEffect(ctx: CanvasRenderingContext2D) {
     const dragStartSelection =
       this.draggableTextDelegate.getDragStartSelection()!;
     this._renderSelection(
@@ -561,7 +562,10 @@ export class IText<
     );
   }
 
-  renderDropTargetEffect(e: DragEvent, ctx: CanvasRenderingContext2D) {
+  renderDropTargetEffect(
+    ctx: CanvasRenderingContext2D,
+    { e }: DragEventRenderingEffectData
+  ) {
     const dragSelection = this.getSelectionStartFromPointer(e);
     this.renderCursorAt(ctx, dragSelection);
   }

src/shapes/Object/InteractiveObject.ts

@@ -12,7 +12,11 @@ import {
 } from '../../util/misc/matrix';
 import type { Control } from '../../controls/Control';
 import { sizeAfterTransform } from '../../util/misc/objectTransforms';
-import type { ObjectEvents, TPointerEvent } from '../../EventTypeDefs';
+import type {
+  DragEventRenderingEffectData,
+  ObjectEvents,
+  TPointerEvent,
+} from '../../EventTypeDefs';
 import type { Canvas } from '../../canvas/Canvas';
 import type { ControlRenderingStyleOverride } from '../../controls/controlRendering';
 import type { FabricObjectProps } from './types/FabricObjectProps';
@@ -684,7 +688,10 @@ export class InteractiveFabricObject<
    * @param {DragEvent} e
    * @param {CanvasRenderingContext2D} ctx transformed into object plane
    */
-  renderDragSourceEffect(e: DragEvent, ctx: CanvasRenderingContext2D) {
+  renderDragSourceEffect(
+    ctx: CanvasRenderingContext2D,
+    context: DragEventRenderingEffectData
+  ) {
     // for subclasses
   }
 
@@ -697,7 +704,10 @@ export class InteractiveFabricObject<
    * @param {DragEvent} e
    * @param {CanvasRenderingContext2D} ctx transformed into object plane
    */
-  renderDropTargetEffect(e: DragEvent, ctx: CanvasRenderingContext2D) {
+  renderDropTargetEffect(
+    ctx: CanvasRenderingContext2D,
+    context: DragEventRenderingEffectData
+  ) {
     // for subclasses
   }
 }