elf
/
fridgemagnets
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

This is gonna need some cleanup, but it now correctly positions, repositions, reports, and maintains the position of the target *and* the pointer.

This commit is contained in:
Elf M. Sternberg 2024-11-17 10:20:54 -08:00
parent 9c97349ba7
commit 93fb8f1c2e
1 changed files with 11 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/lit-draggable.ts
View File

@ -1,4 +1,5 @@
import { ReactiveControllerHost, ReactiveController } from "lit"; import { ReactiveControllerHost, ReactiveController } from "lit";
import { LitDragStart, LitDragging, LitDragEnd } from "./lit-events.js";
export type DragBoundaries = { export type DragBoundaries = {
top: number; top: number;
@ -15,37 +16,6 @@ export type DragAxes = "x" | "y" | "both" | "none";
export type DragBounds = HTMLElement | Partial<DragBoundaries> | "parent" | "body" | (string & Record<never, never>); export type DragBounds = HTMLElement | Partial<DragBoundaries> | "parent" | "body" | (string & Record<never, never>);
export interface LitDragEvent extends Event {
offsetX: number;
offsetY: number;
node: HTMLElement;
}
function makeLitDragEvent(name: string): LitDragEvent {
class _LitDragEvent extends Event implements LitDragEvent {
static readonly eventName = name;
offsetX: number = 0;
offsetY: number = 0;
node: HTMLElement;
// container: HTMLElement;
constructor(source: LitDraggable) {
super(_LitDragEvent.eventName, { bubbles: true, composed: true });
this.offsetX = source.translateX;
this.offsetY = source.translateY;
this.node = source.host;
// this.container = source.container;
}
}
return _LitDragEvent as unknown as LitDragEvent;
}
export const LitDragStart = makeLitDragEvent("lit-drag-start");
export const LitDragging = makeLitDragEvent("lit-dragging");
export const LitDragEnd: LitDragEvent = makeLitDragEvent("lit-drag-end");
const defaultOptions: DragOptions = { const defaultOptions: DragOptions = {
preventSelect: true, preventSelect: true,
}; };
@ -61,6 +31,9 @@ export class LitDraggable implements ReactiveController {
initialX = 0; initialX = 0;
initialY = 0; initialY = 0;
handleOffsetX = 0;
handleOffsetY = 0;
dragging = false; dragging = false;
currentSelect?: string; currentSelect?: string;
@ -107,8 +80,12 @@ export class LitDraggable implements ReactiveController {
document.body.style.userSelect = "none"; document.body.style.userSelect = "none";
} }
const hostRect = this.host.getBoundingClientRect();
this.initialX = ev.clientX; this.initialX = ev.clientX;
this.initialY = ev.clientY; this.initialY = ev.clientY;
this.handleOffsetX = this.initialX - hostRect.left;
this.handleOffsetY = this.initialY - hostRect.top;
this.host.dataset.litDrag = "true"; this.host.dataset.litDrag = "true";
this.host.dispatchEvent(new LitDragStart(this)); this.host.dispatchEvent(new LitDragStart(this));
} }
@ -142,8 +119,9 @@ export class LitDraggable implements ReactiveController {
document.body.style.userSelect = this.currentSelect; document.body.style.userSelect = this.currentSelect;
this.currentSelect = undefined; this.currentSelect = undefined;
} }
this.initialX = this.translateX;
this.initialY = this.translateY; this.initialX = ev.clientX - this.handleOffsetX;
this.initialY = ev.clientY - this.handleOffsetY;
this.host.dispatchEvent(new LitDragEnd(this)); this.host.dispatchEvent(new LitDragEnd(this));
this.host.style.removeProperty("transform"); this.host.style.removeProperty("transform");
} }