igniteui-webcomponents 7.3.1 → 7.4.0

package/internals/directives/drag.d.ts

@@ -1,7 +1,6 @@
-import { AsyncDirective, type DirectiveParameters, type ElementPart, type PartInfo } from 'lit/async-directive.js';
-export type DragMode = 'immediate' | 'deferred';
+import { type PartInfo } from 'lit/async-directive.js';
+import { PointerOperationDirective, type PointerOperationOptions, type PointerOperationState } from './pointer-operation.js';
 export type DragPointerDirection = 'start' | 'end' | 'top' | 'bottom';
-export type DragGhostFactory = (initial: DOMRect) => HTMLElement;
 export type DragCallback = (params: DragCallbackParams) => unknown;
 export type DragCancelCallback = (state: DragState) => unknown;
 type Point = {
@@ -9,15 +8,16 @@ type Point = {
     y: number;
 };
 export type DragState = {
-    /** The bounding rectangle of the drag target at the start of the operation. */
+    /** The bounding rectangle of the target at the start of the operation. */
     initial: DOMRect;
-    /** The current bounding rectangle of the drag target. */
     current: DOMRect;
-    /** The current position of the dragged element relative to its containing layer. */
+    /**
+     * The position of the moved element: relative to the layer in deferred
+     * mode, and to the initial rectangle of the target in immediate mode.
+     */
     position: Point;
-    /** Offset between the drag target origin and the pointer position at the start of the operation. */
+    /** The distance from the target origin to the pointer at the start. */
     offset: Point;
-    /** Pointer positions and movement direction for the current operation. */
     pointerState: {
         previous: Point;
         current: Point;
@@ -25,93 +25,71 @@ export type DragState = {
     };
     /** The ghost element when in deferred mode. */
     ghost: HTMLElement | null;
-    /** The current element matched through the `matchTarget` callback, if any. */
+    /** The element that the `matchTarget` callback matches, or `null`. */
     element: Element | null;
 };
 export type DragCallbackParams = {
     event: PointerEvent;
     state: DragState;
 };
-/** Options for the draggable directive. */
-export interface DraggableOptions {
-    /** Whether the directive will listen for and initiate drag operations. Defaults to `true`. */
-    enabled?: boolean;
-    /**
-     * The mode of the drag operation.
-     *
-     * In `immediate` mode the target element is moved in place as the pointer moves.
-     * In `deferred` mode a ghost element is created and moved instead, keeping the
-     * target element at its place until the operation completes.
-     *
-     * Defaults to `deferred`.
-     */
-    mode?: DragMode;
-    /** Whether the dragged element's top left corner snaps to the cursor position at the start of the operation. */
+/**
+ * Options for the draggable directive. See {@link PointerOperationOptions}
+ * for the shared ones. The mode defaults to `deferred`, which moves a ghost
+ * element and leaves the target in place.
+ */
+export interface DraggableOptions extends PointerOperationOptions {
+    /** Whether the dragged element snaps its top left corner to the pointer. */
     snapToCursor?: boolean;
-    /**
-     * The element being dragged. It captures the pointer events for the operation.
-     * Defaults to the element the directive is applied to.
-     *
-     * Accepts either an element or a function returning one, resolved when
-     * the directive options are applied.
-     */
-    target?: HTMLElement | (() => HTMLElement | null | undefined);
-    /**
-     * When provided, a drag operation only starts if the returned element is in the
-     * composed path of the initiating pointer event.
-     */
+    /** Returns the element whose presence in the event path starts a drag. */
     trigger?: () => HTMLElement | null | undefined;
-    /** Guard invoked on the initiating pointer event. Returning `true` skips the drag operation. */
+    /** Runs with the initiating pointer event. A `true` return skips the drag. */
     skip?: (event: PointerEvent) => boolean;
     /**
-     * Predicate invoked with the elements under the pointer while dragging.
-     * The first matching element is exposed as `state.element` and drives the
-     * `enter`, `leave` and `over` callbacks.
+     * A predicate for the elements under the pointer. The first match becomes
+     * `state.element`, and drives `enter`, `leave` and `over`.
      */
     matchTarget?: (element: Element) => boolean;
-    /** Factory function for the ghost element in deferred mode. */
-    ghostFactory?: DragGhostFactory;
-    /** The container in which the deferred ghost element is rendered. Defaults to the document body. */
-    layer?: () => HTMLElement;
-    /** Called when a drag operation starts. Return `false` to abort the operation. */
+    /** Runs when a drag starts. A `false` return aborts the operation. */
     start?: DragCallback;
-    /** Called on each pointer move during a drag operation. */
+    /** Runs on each pointer move of a drag operation. */
     move?: DragCallback;
-    /** Called when the pointer enters an element matched through `matchTarget`. */
+    /** Runs when the pointer enters a matched element. */
     enter?: DragCallback;
-    /** Called when the pointer leaves the currently matched element. */
+    /** Runs when the pointer leaves the matched element. */
     leave?: DragCallback;
-    /** Called while the pointer moves over the currently matched element. */
+    /** Runs while the pointer moves over the matched element. */
     over?: DragCallback;
-    /** Called when a drag operation completes. */
+    /** Runs when a drag operation completes. */
     end?: DragCallback;
-    /** Called when a drag operation is cancelled with the Escape key. */
+    /** Runs when the Escape key cancels a drag operation. */
     cancel?: DragCancelCallback;
 }
-declare class DraggableDirective extends AsyncDirective {
-    private readonly _triggerAbort;
-    private readonly _dragAbort;
-    private _options;
-    private _host?;
+type DragOperation = PointerOperationState & {
+    target: HTMLElement;
+    initial: DOMRect;
+    current: DOMRect;
+    position: Point;
+    offset: Point;
+    pointerState: DragState['pointerState'];
+    matchedElement: Element | null;
+    /** The inline transform of the target, restored on an immediate cancel. */
+    targetTransform: string;
+};
+declare class DraggableDirective extends PointerOperationDirective<DraggableOptions, DragOperation> {
     private _target;
-    private _operation;
     constructor(partInfo: PartInfo);
-    private get _enabled();
-    private get _isDeferred();
-    /** The element being moved around - the ghost in deferred mode, otherwise the drag target. */
+    protected _cancelOperation(): void;
+    /** Restores the styles that the operation changed, then disposes. */
+    protected _dispose(): void;
+    protected disconnected(): void;
+    /** The ghost element in deferred mode, the drag target in immediate mode. */
     private get _dragItem();
     private readonly _handlePointerDown;
     private readonly _handlePointerMove;
     private readonly _handlePointerEnd;
-    private readonly _handleKeydown;
-    /** Prevents native drag and touch interactions from interfering with an enabled directive. */
-    private readonly _preventNativeBehavior;
-    private _attachTriggerListeners;
+    protected _attachTriggerListeners(): void;
     private _startOperation;
-    private _resolveTarget;
-    private _resolveLayer;
     private _shouldSkip;
-    private _createGhost;
     private _createState;
     private _createParams;
     private _updatePosition;
@@ -119,26 +97,18 @@ declare class DraggableDirective extends AsyncDirective {
     private _updateMatcher;
     private _assignPosition;
     /**
-     * Toggles touch action, user and text selection for the duration of a drag operation.
+     * Toggles the touch action and the text selection for a drag operation.
      *
      * @remarks
-     * Disabling `user-select` only on the dragged element is not enough, since browsers
-     * (notably Safari) will still create a text selection in whatever elements sit under
-     * the pointer while dragging. Applying it to the owner document's body prevents that
-     * across the page for the active drag and is reverted once the operation completes.
+     * The `user-select` style on the dragged element is not enough. Browsers,
+     * Safari in particular, still select text in the elements under the
+     * pointer, so the style also goes on the body of the owner document.
      */
     private _setDragStyles;
-    /** Stops the current drag operation, cleaning up the ghost element and event listeners. */
-    private _dispose;
-    protected reconnected(): void;
-    protected disconnected(): void;
-    update(part: ElementPart, [options]: DirectiveParameters<this>): symbol;
-    render(_options?: DraggableOptions): symbol;
 }
 /**
- * A directive that makes an element draggable, either in place or through
- * a deferred ghost element, with optional hit-testing against other elements
- * while dragging.
+ * A directive that makes an element draggable, in place or through a
+ * deferred ghost element, with an optional hit test of other elements.
  */
 export declare const draggable: (_options?: DraggableOptions | undefined) => import("lit-html/directive.js").DirectiveResult<typeof DraggableDirective>;
 export {};

package/internals/directives/drag.js

@@ -1,9 +1,7 @@
-import { noChange } from 'lit';
-import { AsyncDirective, directive, PartType, } from 'lit/async-directive.js';
-import { createAbortHandle } from '../abort-handler.js';
-import { escapeKey, isKey } from '../controllers/key-bindings.js';
-import { getDefaultLayer, getRoot, isLTR, roundByDPR, setStyles, } from '../utils/dom.js';
-import { getElementFromPath, preventDefault } from '../utils/events.js';
+import { directive } from 'lit/async-directive.js';
+import { getRoot, isLTR, roundByDPR, setStyles } from '../utils/dom.js';
+import { getElementFromPath } from '../utils/events.js';
+import { PointerOperationDirective, } from './pointer-operation.js';
 function createDefaultGhost({ width, height }) {
     const element = document.createElement('div');
     setStyles(element, {
@@ -17,14 +15,15 @@ function createDefaultGhost({ width, height }) {
     });
     return element;
 }
-class DraggableDirective extends AsyncDirective {
+class DraggableDirective extends PointerOperationDirective {
     constructor(partInfo) {
-        super(partInfo);
-        this._triggerAbort = createAbortHandle();
-        this._dragAbort = createAbortHandle();
-        this._options = {};
+        super(partInfo, {
+            name: 'draggable',
+            ghostAttribute: 'data-drag-ghost',
+            defaultMode: 'deferred',
+            defaultGhost: createDefaultGhost,
+        });
         this._target = null;
-        this._operation = null;
         this._handlePointerDown = (event) => {
             if (!this._enabled ||
                 event.button !== 0 ||
@@ -39,7 +38,7 @@ class DraggableDirective extends AsyncDirective {
                 pointerId,
                 target,
                 initial,
-                current: structuredClone(initial),
+                current: DOMRect.fromRect(initial),
                 position: { x: initial.x, y: initial.y },
                 offset: { x: initial.x - clientX, y: initial.y - clientY },
                 pointerState: {
@@ -76,30 +75,23 @@ class DraggableDirective extends AsyncDirective {
             this._options.end?.(this._createParams(event));
             this._dispose();
         };
-        this._handleKeydown = (event) => {
-            if (!this._operation || !isKey(event, escapeKey)) {
-                return;
-            }
-            this._options.cancel?.(this._createState());
-            if (!this._isDeferred) {
-                this._operation.target.style.transform = this._operation.targetTransform;
-            }
-            this._dispose();
-        };
-        this._preventNativeBehavior = (event) => {
-            if (this._enabled) {
-                event.preventDefault();
-            }
-        };
-        if (partInfo.type !== PartType.ELEMENT) {
-            throw new Error('The `draggable` directive can only be used on elements.');
+    }
+    _cancelOperation() {
+        this._options.cancel?.(this._createState());
+        if (!this._isDeferred) {
+            this._operation.target.style.transform =
+                this._operation.targetTransform;
         }
     }
-    get _enabled() {
-        return this._options.enabled ?? true;
+    _dispose() {
+        if (this._operation) {
+            this._setDragStyles(false);
+        }
+        super._dispose();
     }
-    get _isDeferred() {
-        return (this._options.mode ?? 'deferred') === 'deferred';
+    disconnected() {
+        super.disconnected();
+        this._target = null;
     }
     get _dragItem() {
         return this._isDeferred ? this._operation.ghost : this._operation.target;
@@ -126,25 +118,8 @@ class DraggableDirective extends AsyncDirective {
         });
     }
     _startOperation({ pointerId }) {
-        const { target } = this._operation;
-        const { signal } = this._dragAbort;
         this._setDragStyles(true);
-        target.setPointerCapture(pointerId);
-        target.addEventListener('pointermove', this._handlePointerMove, {
-            signal,
-        });
-        target.addEventListener('lostpointercapture', this._handlePointerEnd, {
-            signal,
-        });
-        target.addEventListener('contextmenu', preventDefault, { signal });
-        globalThis.addEventListener('keydown', this._handleKeydown, { signal });
-    }
-    _resolveTarget() {
-        const { target } = this._options;
-        return ((typeof target === 'function' ? target() : target) ?? this._host ?? null);
-    }
-    _resolveLayer() {
-        return this._options.layer?.() ?? getDefaultLayer();
+        this._startOperationListeners(this._operation.target, pointerId, this._handlePointerMove, this._handlePointerEnd);
     }
     _shouldSkip(event) {
         if (this._options.skip?.(event)) {
@@ -153,12 +128,6 @@ class DraggableDirective extends AsyncDirective {
         const trigger = this._options.trigger?.();
         return trigger ? !getElementFromPath((e) => e === trigger, event) : false;
     }
-    _createGhost(initial) {
-        const ghost = this._options.ghostFactory?.(initial) ?? createDefaultGhost(initial);
-        ghost.setAttribute('data-drag-ghost', '');
-        this._resolveLayer().append(ghost);
-        return ghost;
-    }
     _createState() {
         const { initial, current, position, offset, pointerState, ghost, matchedElement, } = this._operation;
         return {
@@ -242,37 +211,6 @@ class DraggableDirective extends AsyncDirective {
             doc.getSelection()?.removeAllRanges();
         }
     }
-    _dispose() {
-        this._dragAbort.abort();
-        if (this._operation) {
-            const { pointerId, target, ghost } = this._operation;
-            this._setDragStyles(false);
-            if (target.hasPointerCapture(pointerId)) {
-                target.releasePointerCapture(pointerId);
-            }
-            ghost?.remove();
-            this._operation = null;
-        }
-    }
-    reconnected() {
-        this._attachTriggerListeners();
-    }
-    disconnected() {
-        this._dispose();
-        this._triggerAbort.abort();
-        this._target = null;
-    }
-    update(part, [options]) {
-        if (this.isConnected) {
-            this._host = part.element;
-            this._options = options ?? {};
-            this._attachTriggerListeners();
-        }
-        return noChange;
-    }
-    render(_options) {
-        return noChange;
-    }
 }
 export const draggable = directive(DraggableDirective);
 //# sourceMappingURL=drag.js.map

package/internals/directives/drag.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag.js","sourceRoot":"","sources":["../../../src/internals/directives/drag.ts"],"names":[],"mappings":"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","sourcesContent":["import { noChange } from 'lit';\nimport {\n  AsyncDirective,\n  directive,\n  type DirectiveParameters,\n  type ElementPart,\n  type PartInfo,\n  PartType,\n} from 'lit/async-directive.js';\nimport { createAbortHandle } from '../abort-handler.js';\nimport { escapeKey, isKey } from '../controllers/key-bindings.js';\nimport {\n  getDefaultLayer,\n  getRoot,\n  isLTR,\n  roundByDPR,\n  setStyles,\n} from '../utils/dom.js';\nimport { getElementFromPath, preventDefault } from '../utils/events.js';\n\nexport type DragMode = 'immediate' | 'deferred';\nexport type DragPointerDirection = 'start' | 'end' | 'top' | 'bottom';\nexport type DragGhostFactory = (initial: DOMRect) => HTMLElement;\nexport type DragCallback = (params: DragCallbackParams) => unknown;\nexport type DragCancelCallback = (state: DragState) => unknown;\n\ntype Point = { x: number; y: number };\n\nexport type DragState = {\n  /** The bounding rectangle of the drag target at the start of the operation. */\n  initial: DOMRect;\n  /** The current bounding rectangle of the drag target. */\n  current: DOMRect;\n  /** The current position of the dragged element relative to its containing layer. */\n  position: Point;\n  /** Offset between the drag target origin and the pointer position at the start of the operation. */\n  offset: Point;\n  /** Pointer positions and movement direction for the current operation. */\n  pointerState: {\n    previous: Point;\n    current: Point;\n    direction: DragPointerDirection;\n  };\n  /** The ghost element when in deferred mode. */\n  ghost: HTMLElement | null;\n  /** The current element matched through the `matchTarget` callback, if any. */\n  element: Element | null;\n};\n\nexport type DragCallbackParams = {\n  event: PointerEvent;\n  state: DragState;\n};\n\n/** Options for the draggable directive. */\nexport interface DraggableOptions {\n  /** Whether the directive will listen for and initiate drag operations. Defaults to `true`. */\n  enabled?: boolean;\n  /**\n   * The mode of the drag operation.\n   *\n   * In `immediate` mode the target element is moved in place as the pointer moves.\n   * In `deferred` mode a ghost element is created and moved instead, keeping the\n   * target element at its place until the operation completes.\n   *\n   * Defaults to `deferred`.\n   */\n  mode?: DragMode;\n  /** Whether the dragged element's top left corner snaps to the cursor position at the start of the operation. */\n  snapToCursor?: boolean;\n  /**\n   * The element being dragged. It captures the pointer events for the operation.\n   * Defaults to the element the directive is applied to.\n   *\n   * Accepts either an element or a function returning one, resolved when\n   * the directive options are applied.\n   */\n  target?: HTMLElement | (() => HTMLElement | null | undefined);\n  /**\n   * When provided, a drag operation only starts if the returned element is in the\n   * composed path of the initiating pointer event.\n   */\n  trigger?: () => HTMLElement | null | undefined;\n  /** Guard invoked on the initiating pointer event. Returning `true` skips the drag operation. */\n  skip?: (event: PointerEvent) => boolean;\n  /**\n   * Predicate invoked with the elements under the pointer while dragging.\n   * The first matching element is exposed as `state.element` and drives the\n   * `enter`, `leave` and `over` callbacks.\n   */\n  matchTarget?: (element: Element) => boolean;\n  /** Factory function for the ghost element in deferred mode. */\n  ghostFactory?: DragGhostFactory;\n  /** The container in which the deferred ghost element is rendered. Defaults to the document body. */\n  layer?: () => HTMLElement;\n  /** Called when a drag operation starts. Return `false` to abort the operation. */\n  start?: DragCallback;\n  /** Called on each pointer move during a drag operation. */\n  move?: DragCallback;\n  /** Called when the pointer enters an element matched through `matchTarget`. */\n  enter?: DragCallback;\n  /** Called when the pointer leaves the currently matched element. */\n  leave?: DragCallback;\n  /** Called while the pointer moves over the currently matched element. */\n  over?: DragCallback;\n  /** Called when a drag operation completes. */\n  end?: DragCallback;\n  /** Called when a drag operation is cancelled with the Escape key. */\n  cancel?: DragCancelCallback;\n}\n\ntype DragOperation = {\n  pointerId: number;\n  target: HTMLElement;\n  initial: DOMRect;\n  current: DOMRect;\n  position: Point;\n  offset: Point;\n  pointerState: DragState['pointerState'];\n  ghost: HTMLElement | null;\n  matchedElement: Element | null;\n  /** Inline transform of the target before the operation, restored on cancel. */\n  targetTransform: string;\n};\n\nfunction createDefaultGhost({ width, height }: DOMRect): HTMLElement {\n  const element = document.createElement('div');\n\n  // Anchored at the layer origin; the directive positions it via `translate3d`.\n  setStyles(element, {\n    position: 'absolute',\n    left: '0',\n    top: '0',\n    width: `${width}px`,\n    height: `${height}px`,\n    zIndex: '1000',\n    background: 'gold',\n  });\n\n  return element;\n}\n\nclass DraggableDirective extends AsyncDirective {\n  private readonly _triggerAbort = createAbortHandle();\n  private readonly _dragAbort = createAbortHandle();\n\n  private _options: DraggableOptions = {};\n  private _host?: HTMLElement;\n  private _target: HTMLElement | null = null;\n  private _operation: DragOperation | null = null;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error(\n        'The `draggable` directive can only be used on elements.'\n      );\n    }\n  }\n\n  private get _enabled(): boolean {\n    return this._options.enabled ?? true;\n  }\n\n  private get _isDeferred(): boolean {\n    return (this._options.mode ?? 'deferred') === 'deferred';\n  }\n\n  /** The element being moved around - the ghost in deferred mode, otherwise the drag target. */\n  private get _dragItem(): HTMLElement {\n    return this._isDeferred ? this._operation!.ghost! : this._operation!.target;\n  }\n\n  // #region Event handlers\n\n  private readonly _handlePointerDown = (event: PointerEvent): void => {\n    if (\n      !this._enabled ||\n      event.button !== 0 ||\n      this._operation ||\n      this._shouldSkip(event)\n    ) {\n      return;\n    }\n\n    const target = this._target!;\n    const initial = target.getBoundingClientRect();\n    const { pointerId, clientX, clientY } = event;\n\n    this._operation = {\n      pointerId,\n      target,\n      initial,\n      current: structuredClone(initial),\n      position: { x: initial.x, y: initial.y },\n      offset: { x: initial.x - clientX, y: initial.y - clientY },\n      pointerState: {\n        previous: { x: clientX, y: clientY },\n        current: { x: clientX, y: clientY },\n        direction: 'end',\n      },\n      ghost: this._isDeferred ? this._createGhost(initial) : null,\n      matchedElement: null,\n      targetTransform: target.style.transform,\n    };\n\n    this._updatePosition(event);\n\n    if (this._options.start?.(this._createParams(event)) === false) {\n      this._dispose();\n      return;\n    }\n\n    this._assignPosition(this._dragItem);\n    this._startOperation(event);\n  };\n\n  private readonly _handlePointerMove = (event: PointerEvent): void => {\n    if (!this._operation) {\n      return;\n    }\n\n    this._updatePosition(event);\n    this._updatePointerState(event);\n    this._updateMatcher(event);\n\n    this._options.move?.(this._createParams(event));\n\n    this._assignPosition(this._dragItem);\n  };\n\n  private readonly _handlePointerEnd = (event: PointerEvent): void => {\n    if (!this._operation) {\n      return;\n    }\n\n    this._options.end?.(this._createParams(event));\n    this._dispose();\n  };\n\n  private readonly _handleKeydown = (event: KeyboardEvent): void => {\n    if (!this._operation || !isKey(event, escapeKey)) {\n      return;\n    }\n\n    this._options.cancel?.(this._createState());\n\n    if (!this._isDeferred) {\n      this._operation.target.style.transform = this._operation.targetTransform;\n    }\n\n    this._dispose();\n  };\n\n  /** Prevents native drag and touch interactions from interfering with an enabled directive. */\n  private readonly _preventNativeBehavior = (event: Event): void => {\n    if (this._enabled) {\n      event.preventDefault();\n    }\n  };\n\n  // #endregion\n\n  // #region Internal API\n\n  private _attachTriggerListeners(): void {\n    const target = this._resolveTarget();\n    if (!target) {\n      return;\n    }\n\n    if (target !== this._target) {\n      this._triggerAbort.abort();\n      this._target = target;\n    }\n\n    const { signal } = this._triggerAbort;\n\n    target.addEventListener('pointerdown', this._handlePointerDown, {\n      signal,\n    });\n    target.addEventListener('dragstart', this._preventNativeBehavior, {\n      signal,\n    });\n    target.addEventListener('touchstart', this._preventNativeBehavior, {\n      passive: false,\n      signal,\n    });\n  }\n\n  private _startOperation({ pointerId }: PointerEvent): void {\n    const { target } = this._operation!;\n    const { signal } = this._dragAbort;\n\n    this._setDragStyles(true);\n\n    target.setPointerCapture(pointerId);\n    target.addEventListener('pointermove', this._handlePointerMove, {\n      signal,\n    });\n    target.addEventListener('lostpointercapture', this._handlePointerEnd, {\n      signal,\n    });\n    target.addEventListener('contextmenu', preventDefault, { signal });\n    globalThis.addEventListener('keydown', this._handleKeydown, { signal });\n  }\n\n  private _resolveTarget(): HTMLElement | null {\n    const { target } = this._options;\n    return (\n      (typeof target === 'function' ? target() : target) ?? this._host ?? null\n    );\n  }\n\n  private _resolveLayer(): HTMLElement {\n    return this._options.layer?.() ?? getDefaultLayer();\n  }\n\n  private _shouldSkip(event: PointerEvent): boolean {\n    if (this._options.skip?.(event)) {\n      return true;\n    }\n\n    const trigger = this._options.trigger?.();\n    return trigger ? !getElementFromPath((e) => e === trigger, event) : false;\n  }\n\n  private _createGhost(initial: DOMRect): HTMLElement {\n    const ghost =\n      this._options.ghostFactory?.(initial) ?? createDefaultGhost(initial);\n\n    ghost.setAttribute('data-drag-ghost', '');\n    this._resolveLayer().append(ghost);\n    return ghost;\n  }\n\n  private _createState(): DragState {\n    const {\n      initial,\n      current,\n      position,\n      offset,\n      pointerState,\n      ghost,\n      matchedElement,\n    } = this._operation!;\n\n    return {\n      initial,\n      current,\n      position,\n      offset,\n      pointerState,\n      ghost,\n      element: matchedElement,\n    };\n  }\n\n  private _createParams(event: PointerEvent): DragCallbackParams {\n    return { event, state: this._createState() };\n  }\n\n  private _updatePosition({ clientX, clientY }: PointerEvent): void {\n    const operation = this._operation!;\n    const { x: layerX, y: layerY } = this._isDeferred\n      ? this._resolveLayer().getBoundingClientRect()\n      : operation.initial;\n    const { x, y } = this._options.snapToCursor\n      ? { x: 0, y: 0 }\n      : operation.offset;\n\n    operation.position = {\n      x: clientX - layerX + x,\n      y: clientY - layerY + y,\n    };\n  }\n\n  private _updatePointerState({ clientX, clientY }: PointerEvent): void {\n    const state = this._operation!.pointerState;\n\n    state.previous = { ...state.current };\n    state.current = { x: clientX, y: clientY };\n\n    const dx = state.current.x - state.previous.x;\n    const dy = state.current.y - state.previous.y;\n\n    if (Math.abs(dx) >= Math.abs(dy)) {\n      const swapHorizontal = isLTR(this._operation!.target) ? dx >= 0 : dx <= 0;\n      state.direction = swapHorizontal ? 'end' : 'start';\n    } else {\n      state.direction = dy >= 0 ? 'bottom' : 'top';\n    }\n  }\n\n  private _updateMatcher(event: PointerEvent): void {\n    const { matchTarget } = this._options;\n    if (!matchTarget) {\n      return;\n    }\n\n    const operation = this._operation!;\n    const match = getRoot(operation.target)\n      .elementsFromPoint(event.clientX, event.clientY)\n      .find((element) => matchTarget(element));\n\n    if (match && !operation.matchedElement) {\n      operation.matchedElement = match;\n      this._options.enter?.(this._createParams(event));\n      return;\n    }\n\n    if (!match && operation.matchedElement) {\n      this._options.leave?.(this._createParams(event));\n      operation.matchedElement = null;\n      return;\n    }\n\n    if (match && match === operation.matchedElement) {\n      this._options.over?.(this._createParams(event));\n    }\n  }\n\n  private _assignPosition(element: HTMLElement): void {\n    const { x, y } = this._operation!.position;\n    element.style.transform = `translate3d(${roundByDPR(x)}px,${roundByDPR(y)}px,0)`;\n  }\n\n  /**\n   * Toggles touch action, user and text selection for the duration of a drag operation.\n   *\n   * @remarks\n   * Disabling `user-select` only on the dragged element is not enough, since browsers\n   * (notably Safari) will still create a text selection in whatever elements sit under\n   * the pointer while dragging. Applying it to the owner document's body prevents that\n   * across the page for the active drag and is reverted once the operation completes.\n   */\n  private _setDragStyles(active: boolean): void {\n    const value = active ? 'none' : '';\n    const { target } = this._operation!;\n    const doc = target.ownerDocument;\n\n    setStyles(target, {\n      touchAction: value,\n      userSelect: value,\n      webkitUserSelect: value,\n    });\n    setStyles(doc.body, { userSelect: value, webkitUserSelect: value });\n\n    if (active) {\n      doc.getSelection()?.removeAllRanges();\n    }\n  }\n\n  /** Stops the current drag operation, cleaning up the ghost element and event listeners. */\n  private _dispose(): void {\n    this._dragAbort.abort();\n\n    if (this._operation) {\n      const { pointerId, target, ghost } = this._operation;\n\n      this._setDragStyles(false);\n\n      if (target.hasPointerCapture(pointerId)) {\n        target.releasePointerCapture(pointerId);\n      }\n\n      ghost?.remove();\n      this._operation = null;\n    }\n  }\n\n  // #endregion\n\n  protected override reconnected(): void {\n    this._attachTriggerListeners();\n  }\n\n  protected override disconnected(): void {\n    this._dispose();\n    this._triggerAbort.abort();\n    this._target = null;\n  }\n\n  public override update(\n    part: ElementPart,\n    [options]: DirectiveParameters<this>\n  ) {\n    if (this.isConnected) {\n      this._host = part.element as HTMLElement;\n      this._options = options ?? {};\n      this._attachTriggerListeners();\n    }\n    return noChange;\n  }\n\n  public render(_options?: DraggableOptions) {\n    return noChange;\n  }\n}\n\n/**\n * A directive that makes an element draggable, either in place or through\n * a deferred ghost element, with optional hit-testing against other elements\n * while dragging.\n */\nexport const draggable = directive(DraggableDirective);\n"]}
+{"version":3,"file":"drag.js","sourceRoot":"","sources":["../../../src/internals/directives/drag.ts"],"names":[],"mappings":"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","sourcesContent":["import { directive, type PartInfo } from 'lit/async-directive.js';\nimport { getRoot, isLTR, roundByDPR, setStyles } from '../utils/dom.js';\nimport { getElementFromPath } from '../utils/events.js';\nimport {\n  PointerOperationDirective,\n  type PointerOperationOptions,\n  type PointerOperationState,\n} from './pointer-operation.js';\n\nexport type DragPointerDirection = 'start' | 'end' | 'top' | 'bottom';\nexport type DragCallback = (params: DragCallbackParams) => unknown;\nexport type DragCancelCallback = (state: DragState) => unknown;\n\ntype Point = { x: number; y: number };\n\nexport type DragState = {\n  /** The bounding rectangle of the target at the start of the operation. */\n  initial: DOMRect;\n  current: DOMRect;\n  /**\n   * The position of the moved element: relative to the layer in deferred\n   * mode, and to the initial rectangle of the target in immediate mode.\n   */\n  position: Point;\n  /** The distance from the target origin to the pointer at the start. */\n  offset: Point;\n  pointerState: {\n    previous: Point;\n    current: Point;\n    direction: DragPointerDirection;\n  };\n  /** The ghost element when in deferred mode. */\n  ghost: HTMLElement | null;\n  /** The element that the `matchTarget` callback matches, or `null`. */\n  element: Element | null;\n};\n\nexport type DragCallbackParams = {\n  event: PointerEvent;\n  state: DragState;\n};\n\n/**\n * Options for the draggable directive. See {@link PointerOperationOptions}\n * for the shared ones. The mode defaults to `deferred`, which moves a ghost\n * element and leaves the target in place.\n */\nexport interface DraggableOptions extends PointerOperationOptions {\n  /** Whether the dragged element snaps its top left corner to the pointer. */\n  snapToCursor?: boolean;\n  /** Returns the element whose presence in the event path starts a drag. */\n  trigger?: () => HTMLElement | null | undefined;\n  /** Runs with the initiating pointer event. A `true` return skips the drag. */\n  skip?: (event: PointerEvent) => boolean;\n  /**\n   * A predicate for the elements under the pointer. The first match becomes\n   * `state.element`, and drives `enter`, `leave` and `over`.\n   */\n  matchTarget?: (element: Element) => boolean;\n  /** Runs when a drag starts. A `false` return aborts the operation. */\n  start?: DragCallback;\n  /** Runs on each pointer move of a drag operation. */\n  move?: DragCallback;\n  /** Runs when the pointer enters a matched element. */\n  enter?: DragCallback;\n  /** Runs when the pointer leaves the matched element. */\n  leave?: DragCallback;\n  /** Runs while the pointer moves over the matched element. */\n  over?: DragCallback;\n  /** Runs when a drag operation completes. */\n  end?: DragCallback;\n  /** Runs when the Escape key cancels a drag operation. */\n  cancel?: DragCancelCallback;\n}\n\ntype DragOperation = PointerOperationState & {\n  target: HTMLElement;\n  initial: DOMRect;\n  current: DOMRect;\n  position: Point;\n  offset: Point;\n  pointerState: DragState['pointerState'];\n  matchedElement: Element | null;\n  /** The inline transform of the target, restored on an immediate cancel. */\n  targetTransform: string;\n};\n\nfunction createDefaultGhost({ width, height }: DOMRect): HTMLElement {\n  const element = document.createElement('div');\n\n  // The element sits at the layer origin and moves with `translate3d`.\n  setStyles(element, {\n    position: 'absolute',\n    left: '0',\n    top: '0',\n    width: `${width}px`,\n    height: `${height}px`,\n    zIndex: '1000',\n    background: 'gold',\n  });\n\n  return element;\n}\n\nclass DraggableDirective extends PointerOperationDirective<\n  DraggableOptions,\n  DragOperation\n> {\n  private _target: HTMLElement | null = null;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo, {\n      name: 'draggable',\n      ghostAttribute: 'data-drag-ghost',\n      defaultMode: 'deferred',\n      defaultGhost: createDefaultGhost,\n    });\n  }\n\n  protected override _cancelOperation(): void {\n    this._options.cancel?.(this._createState());\n\n    if (!this._isDeferred) {\n      this._operation!.target.style.transform =\n        this._operation!.targetTransform;\n    }\n  }\n\n  /** Restores the styles that the operation changed, then disposes. */\n  protected override _dispose(): void {\n    if (this._operation) {\n      this._setDragStyles(false);\n    }\n\n    super._dispose();\n  }\n\n  protected override disconnected(): void {\n    super.disconnected();\n    this._target = null;\n  }\n\n  /** The ghost element in deferred mode, the drag target in immediate mode. */\n  private get _dragItem(): HTMLElement {\n    return this._isDeferred ? this._operation!.ghost! : this._operation!.target;\n  }\n\n  // #region Event handlers\n\n  private readonly _handlePointerDown = (event: PointerEvent): void => {\n    if (\n      !this._enabled ||\n      event.button !== 0 ||\n      this._operation ||\n      this._shouldSkip(event)\n    ) {\n      return;\n    }\n\n    const target = this._target!;\n    const initial = target.getBoundingClientRect();\n    const { pointerId, clientX, clientY } = event;\n\n    this._operation = {\n      pointerId,\n      target,\n      initial,\n      current: DOMRect.fromRect(initial),\n      position: { x: initial.x, y: initial.y },\n      offset: { x: initial.x - clientX, y: initial.y - clientY },\n      pointerState: {\n        previous: { x: clientX, y: clientY },\n        current: { x: clientX, y: clientY },\n        direction: 'end',\n      },\n      ghost: this._isDeferred ? this._createGhost(initial) : null,\n      matchedElement: null,\n      targetTransform: target.style.transform,\n    };\n\n    this._updatePosition(event);\n\n    if (this._options.start?.(this._createParams(event)) === false) {\n      this._dispose();\n      return;\n    }\n\n    this._assignPosition(this._dragItem);\n    this._startOperation(event);\n  };\n\n  private readonly _handlePointerMove = (event: PointerEvent): void => {\n    if (!this._operation) {\n      return;\n    }\n\n    this._updatePosition(event);\n    this._updatePointerState(event);\n    this._updateMatcher(event);\n\n    this._options.move?.(this._createParams(event));\n\n    this._assignPosition(this._dragItem);\n  };\n\n  private readonly _handlePointerEnd = (event: PointerEvent): void => {\n    if (!this._operation) {\n      return;\n    }\n\n    this._options.end?.(this._createParams(event));\n    this._dispose();\n  };\n\n  // #endregion\n\n  // #region Internal API\n\n  protected override _attachTriggerListeners(): void {\n    const target = this._resolveTarget();\n    if (!target) {\n      return;\n    }\n\n    if (target !== this._target) {\n      this._triggerAbort.abort();\n      this._target = target;\n    }\n\n    const { signal } = this._triggerAbort;\n\n    target.addEventListener('pointerdown', this._handlePointerDown, {\n      signal,\n    });\n    target.addEventListener('dragstart', this._preventNativeBehavior, {\n      signal,\n    });\n    target.addEventListener('touchstart', this._preventNativeBehavior, {\n      passive: false,\n      signal,\n    });\n  }\n\n  private _startOperation({ pointerId }: PointerEvent): void {\n    this._setDragStyles(true);\n\n    this._startOperationListeners(\n      this._operation!.target,\n      pointerId,\n      this._handlePointerMove,\n      this._handlePointerEnd\n    );\n  }\n\n  private _shouldSkip(event: PointerEvent): boolean {\n    if (this._options.skip?.(event)) {\n      return true;\n    }\n\n    const trigger = this._options.trigger?.();\n    return trigger ? !getElementFromPath((e) => e === trigger, event) : false;\n  }\n\n  private _createState(): DragState {\n    const {\n      initial,\n      current,\n      position,\n      offset,\n      pointerState,\n      ghost,\n      matchedElement,\n    } = this._operation!;\n\n    return {\n      initial,\n      current,\n      position,\n      offset,\n      pointerState,\n      ghost,\n      element: matchedElement,\n    };\n  }\n\n  private _createParams(event: PointerEvent): DragCallbackParams {\n    return { event, state: this._createState() };\n  }\n\n  private _updatePosition({ clientX, clientY }: PointerEvent): void {\n    const operation = this._operation!;\n    const { x: layerX, y: layerY } = this._isDeferred\n      ? this._resolveLayer().getBoundingClientRect()\n      : operation.initial;\n    const { x, y } = this._options.snapToCursor\n      ? { x: 0, y: 0 }\n      : operation.offset;\n\n    operation.position = {\n      x: clientX - layerX + x,\n      y: clientY - layerY + y,\n    };\n  }\n\n  private _updatePointerState({ clientX, clientY }: PointerEvent): void {\n    const state = this._operation!.pointerState;\n\n    state.previous = { ...state.current };\n    state.current = { x: clientX, y: clientY };\n\n    const dx = state.current.x - state.previous.x;\n    const dy = state.current.y - state.previous.y;\n\n    if (Math.abs(dx) >= Math.abs(dy)) {\n      const swapHorizontal = isLTR(this._operation!.target) ? dx >= 0 : dx <= 0;\n      state.direction = swapHorizontal ? 'end' : 'start';\n    } else {\n      state.direction = dy >= 0 ? 'bottom' : 'top';\n    }\n  }\n\n  private _updateMatcher(event: PointerEvent): void {\n    const { matchTarget } = this._options;\n    if (!matchTarget) {\n      return;\n    }\n\n    const operation = this._operation!;\n    const match = getRoot(operation.target)\n      .elementsFromPoint(event.clientX, event.clientY)\n      .find((element) => matchTarget(element));\n\n    if (match && !operation.matchedElement) {\n      operation.matchedElement = match;\n      this._options.enter?.(this._createParams(event));\n      return;\n    }\n\n    if (!match && operation.matchedElement) {\n      this._options.leave?.(this._createParams(event));\n      operation.matchedElement = null;\n      return;\n    }\n\n    if (match && match === operation.matchedElement) {\n      this._options.over?.(this._createParams(event));\n    }\n  }\n\n  private _assignPosition(element: HTMLElement): void {\n    const { x, y } = this._operation!.position;\n    element.style.transform = `translate3d(${roundByDPR(x)}px,${roundByDPR(y)}px,0)`;\n  }\n\n  /**\n   * Toggles the touch action and the text selection for a drag operation.\n   *\n   * @remarks\n   * The `user-select` style on the dragged element is not enough. Browsers,\n   * Safari in particular, still select text in the elements under the\n   * pointer, so the style also goes on the body of the owner document.\n   */\n  private _setDragStyles(active: boolean): void {\n    const value = active ? 'none' : '';\n    const { target } = this._operation!;\n    const doc = target.ownerDocument;\n\n    setStyles(target, {\n      touchAction: value,\n      userSelect: value,\n      webkitUserSelect: value,\n    });\n    setStyles(doc.body, { userSelect: value, webkitUserSelect: value });\n\n    if (active) {\n      doc.getSelection()?.removeAllRanges();\n    }\n  }\n\n  // #endregion\n}\n\n/**\n * A directive that makes an element draggable, in place or through a\n * deferred ghost element, with an optional hit test of other elements.\n */\nexport const draggable = directive(DraggableDirective);\n"]}

package/internals/directives/pointer-operation.d.ts

@@ -0,0 +1,75 @@
+import { AsyncDirective, type DirectiveParameters, type ElementPart, type PartInfo } from 'lit/async-directive.js';
+/**
+ * How an operation applies its result. `immediate` changes the target while
+ * the pointer moves. `deferred` changes a ghost, and the target keeps its
+ * state until the operation ends.
+ */
+export type PointerOperationMode = 'immediate' | 'deferred';
+/** Builds the ghost element from the initial rectangle. */
+export type GhostFactory = (initial: DOMRect) => HTMLElement;
+/** The options that the pointer directives have in common. */
+export interface PointerOperationOptions {
+    /** Whether the directive starts operations. Defaults to `true`. */
+    enabled?: boolean;
+    /** The mode of the operation. Each directive has its own default. */
+    mode?: PointerOperationMode;
+    /** The operation target. Defaults to the element with the directive. */
+    target?: HTMLElement | (() => HTMLElement | null | undefined);
+    ghostFactory?: GhostFactory;
+    /** The ghost container. Defaults to the document body. */
+    layer?: () => HTMLElement;
+}
+/** The traits that a directive fixes, and that its options cannot change. */
+export type PointerOperationConfig = {
+    /** The name of the directive, used in the wrong-part-type error. */
+    name: string;
+    ghostAttribute: string;
+    defaultMode: PointerOperationMode;
+    /** The ghost that the directive builds without a factory. */
+    defaultGhost: GhostFactory;
+};
+/** The state that each operation keeps, whatever the directive. */
+export type PointerOperationState = {
+    pointerId: number;
+    /** The ghost element in deferred mode. */
+    ghost: HTMLElement | null;
+};
+/**
+ * The parts that the drag and the resize directives share.
+ *
+ * @remarks
+ * The base class keeps the abort handles, the ghost, the pointer capture and
+ * the life-cycle. A subclass adds its own geometry and start events.
+ */
+export declare abstract class PointerOperationDirective<TOptions extends PointerOperationOptions, TState extends PointerOperationState> extends AsyncDirective {
+    /** Aborts the listeners that wait for an operation to start. */
+    protected readonly _triggerAbort: import("../abort-handler.js").AbortHandle;
+    /** Aborts the listeners that run for the duration of an operation. */
+    protected readonly _operationAbort: import("../abort-handler.js").AbortHandle;
+    protected readonly _config: PointerOperationConfig;
+    protected _options: TOptions;
+    protected _host?: HTMLElement;
+    protected _operation: TState | null;
+    /** The element that holds the pointer capture of the running operation. */
+    private _captureElement?;
+    constructor(partInfo: PartInfo, config: PointerOperationConfig);
+    protected get _enabled(): boolean;
+    protected get _isDeferred(): boolean;
+    protected abstract _attachTriggerListeners(): void;
+    /** Reports the cancellation and restores the target element. */
+    protected abstract _cancelOperation(): void;
+    /** Prevents the native interactions that would compete with the directive. */
+    protected readonly _preventNativeBehavior: (event: Event) => void;
+    protected readonly _handleKeydown: (event: KeyboardEvent) => void;
+    protected _resolveTarget(): HTMLElement | null;
+    protected _resolveLayer(): HTMLElement;
+    protected _createGhost(initial: DOMRect): HTMLElement;
+    /** Captures the pointer on `element` and adds the operation listeners. */
+    protected _startOperationListeners(element: HTMLElement, pointerId: number, onMove: (event: PointerEvent) => void, onEnd: (event: PointerEvent) => void): void;
+    /** Stops the operation and removes the ghost and the listeners. */
+    protected _dispose(): void;
+    protected reconnected(): void;
+    protected disconnected(): void;
+    update(part: ElementPart, [options]: DirectiveParameters<this>): symbol;
+    render(_options?: TOptions): symbol;
+}

package/internals/directives/pointer-operation.js

@@ -0,0 +1,92 @@
+import { noChange } from 'lit';
+import { AsyncDirective, PartType, } from 'lit/async-directive.js';
+import { createAbortHandle } from '../abort-handler.js';
+import { escapeKey, isKey } from '../controllers/keys.js';
+import { getDefaultLayer } from '../utils/dom.js';
+import { preventDefault } from '../utils/events.js';
+import { resolveValue } from '../utils/types.js';
+export class PointerOperationDirective extends AsyncDirective {
+    constructor(partInfo, config) {
+        super(partInfo);
+        this._triggerAbort = createAbortHandle();
+        this._operationAbort = createAbortHandle();
+        this._options = {};
+        this._operation = null;
+        this._preventNativeBehavior = (event) => {
+            if (this._enabled) {
+                event.preventDefault();
+            }
+        };
+        this._handleKeydown = (event) => {
+            if (!this._operation || !isKey(event, escapeKey)) {
+                return;
+            }
+            this._cancelOperation();
+            this._dispose();
+        };
+        if (partInfo.type !== PartType.ELEMENT) {
+            throw new Error(`The \`${config.name}\` directive can only be used on elements.`);
+        }
+        this._config = config;
+    }
+    get _enabled() {
+        return this._options.enabled ?? true;
+    }
+    get _isDeferred() {
+        return (this._options.mode ?? this._config.defaultMode) === 'deferred';
+    }
+    _resolveTarget() {
+        return resolveValue(this._options.target) ?? this._host ?? null;
+    }
+    _resolveLayer() {
+        return this._options.layer?.() ?? getDefaultLayer();
+    }
+    _createGhost(initial) {
+        const ghost = (this._options.ghostFactory ?? this._config.defaultGhost)(initial);
+        ghost.setAttribute(this._config.ghostAttribute, '');
+        this._resolveLayer().append(ghost);
+        return ghost;
+    }
+    _startOperationListeners(element, pointerId, onMove, onEnd) {
+        const { signal } = this._operationAbort;
+        this._captureElement = element;
+        element.setPointerCapture(pointerId);
+        element.addEventListener('pointermove', onMove, { signal });
+        element.addEventListener('lostpointercapture', onEnd, { signal });
+        element.addEventListener('contextmenu', preventDefault, { signal });
+        globalThis.addEventListener('keydown', this._handleKeydown, { signal });
+    }
+    _dispose() {
+        this._operationAbort.abort();
+        if (!this._operation) {
+            return;
+        }
+        const { pointerId, ghost } = this._operation;
+        const element = this._captureElement;
+        if (element?.hasPointerCapture(pointerId)) {
+            element.releasePointerCapture(pointerId);
+        }
+        ghost?.remove();
+        this._captureElement = undefined;
+        this._operation = null;
+    }
+    reconnected() {
+        this._attachTriggerListeners();
+    }
+    disconnected() {
+        this._dispose();
+        this._triggerAbort.abort();
+    }
+    update(part, [options]) {
+        if (this.isConnected) {
+            this._host = part.element;
+            this._options = (options ?? {});
+            this._attachTriggerListeners();
+        }
+        return noChange;
+    }
+    render(_options) {
+        return noChange;
+    }
+}
+//# sourceMappingURL=pointer-operation.js.map