BREAKING: renderDragSourceEffect/renderDropSourceEffect signature

fabricjs · May 5, 2024 · 6363ccf · 6363ccf
1 parent 20dcd66
commit 6363ccf
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 15 deletions.
diff --git a/src/EventTypeDefs.ts b/src/EventTypeDefs.ts
@@ -200,6 +200,14 @@ interface DnDEvents {
   'drop:after': DragEventData;
 }
 
+export type DragEventRenderingEffectData = {
+  e: DragEvent;
+  source?: FabricObject;
+  target?: FabricObject;
+  viewportPoint: Point;
+  scenePoint: Point;
+};
+
 interface CanvasDnDEvents extends DnDEvents {
   'drag:enter': DragEventData & InEvent;
   'drag:leave': DragEventData & OutEvent;

diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts
@@ -3,6 +3,7 @@ import { NONE } from '../constants';
 import type {
   CanvasEvents,
   DragEventData,
+  DragEventRenderingEffectData,
   ObjectEvents,
   TPointerEvent,
   TPointerEventNames,
@@ -311,11 +312,8 @@ 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 { source, target } = context;
     let dirty = false;
     // clear top context
     const dropTarget = this._dropTarget;
@@ -332,14 +330,14 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     if (source) {
       ctx.save();
       source.transform(ctx);
-      source.renderDragSourceEffect(e, ctx);
+      source.renderDragSourceEffect(ctx, context);
       ctx.restore();
       dirty = true;
     }
     if (target) {
       ctx.save();
       target.transform(ctx);
-      target.renderDropTargetEffect(e, ctx);
+      target.renderDropTargetEffect(ctx, context);
       ctx.restore();
       dirty = true;
     }
@@ -455,7 +453,12 @@ 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,
+      source: dragSource,
+      target: dropTarget,
+    });
     this._dropTarget = dropTarget;
   }
 
@@ -484,8 +487,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 +499,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
 
     //  fire dragleave on targets
     this._fireEnterLeaveEvents(undefined, options);
-    this._renderDragEffects(e, this._dragSource);
+    this._renderDragEffects({ ...points, e, source: this._dragSource });
     this._dropTarget = undefined;
     //  clear targets
     this.targets = [];

diff --git a/src/shapes/IText/IText.ts b/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);
   }

diff --git a/src/shapes/Object/InteractiveObject.ts b/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
   }
 }