diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/stores/NodeCollectionStore.ts | 3 | ||||
| -rw-r--r-- | src/util/DragManager.ts | 62 | ||||
| -rw-r--r-- | src/views/freeformcanvas/FreeFormCanvas.tsx | 2 | ||||
| -rw-r--r-- | src/views/nodes/DocumentView.tsx | 2 |
4 files changed, 58 insertions, 11 deletions
diff --git a/src/stores/NodeCollectionStore.ts b/src/stores/NodeCollectionStore.ts index ac4f515f1..7fac83d51 100644 --- a/src/stores/NodeCollectionStore.ts +++ b/src/stores/NodeCollectionStore.ts @@ -15,7 +15,8 @@ export class NodeCollectionStore extends NodeStore { @computed public get Transform(): string { - return "translate(" + this.X + "px," + this.Y + "px) scale(" + this.Scale + "," + this.Scale + ")"; + const halfWidth = window.innerWidth / 2, halfHeight = window.innerHeight / 2; + return `translate(${this.X + halfWidth}px, ${this.Y + halfHeight}px) scale(${this.Scale}) translate(${-halfWidth}px, ${-halfHeight}px)`; } @action diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts index 1da590072..3111d589f 100644 --- a/src/util/DragManager.ts +++ b/src/util/DragManager.ts @@ -14,7 +14,7 @@ export namespace DragManager { buttons: number; } - export interface DragDisposer { + export interface DragDropDisposer { (): void; } @@ -34,7 +34,19 @@ export namespace DragManager { dragComplete: (e: DragCompleteEvent) => void; } - export function MakeDraggable(element: HTMLElement, options: DragOptions): DragDisposer { + export interface DropOptions { + handlers: DropHandlers; + } + + export class DropEvent { + constructor(readonly x: number, readonly y: number) { } + } + + export interface DropHandlers { + drop: (e: DropEvent) => void; + } + + export function MakeDraggable(element: HTMLElement, options: DragOptions): DragDropDisposer { if ("draggable" in element.dataset) { throw new Error("Element is already draggable, can't make it draggable again"); } @@ -53,6 +65,7 @@ export namespace DragManager { dispose(); }; const downHandler = (e: PointerEvent) => { + e.stopPropagation(); document.addEventListener("pointermove", startDragHandler); document.addEventListener("pointerup", upHandler); }; @@ -60,10 +73,26 @@ export namespace DragManager { return () => { element.removeEventListener("pointerdown", downHandler); - element.dataset["draggable"] = undefined; + delete element.dataset["draggable"]; } } + export function MakeDropTarget(element: HTMLElement, options: DropOptions): DragDropDisposer { + if ("draggable" in element.dataset) { + throw new Error("Element is already droppable, can't make it droppable again"); + } + element.dataset["canDrop"] = "true"; + const handler = (e: Event) => { + const ce = e as CustomEvent<DropEvent>; + options.handlers.drop(ce.detail); + }; + element.addEventListener("dashOnDrop", handler); + return () => { + element.removeEventListener("dashOnDrop", handler); + delete element.dataset["canDrop"] + }; + } + function StartDrag(ele: HTMLElement, e: PointerEvent, options: DragOptions) { if (!dragDiv) { const root = document.getElementById(rootId); @@ -81,10 +110,16 @@ export namespace DragManager { if (event.cancelled) { return; } - let x = e.x, y = e.y; + const w = ele.offsetWidth, h = ele.offsetHeight; + const rect = ele.getBoundingClientRect(); + const scaleX = rect.width / w, scaleY = rect.height / h; + let x = rect.left, y = rect.top; + // const offsetX = e.x - rect.left, offsetY = e.y - rect.top; let dragElement = ele.cloneNode(true) as HTMLElement; + dragElement.style.opacity = "0.7"; dragElement.style.position = "absolute"; - dragElement.style.transform = `translate(${x}px, ${y}px)`; + dragElement.style.transformOrigin = "0 0"; + dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; dragDiv.appendChild(dragElement); const moveHandler = (e: PointerEvent) => { @@ -92,18 +127,29 @@ export namespace DragManager { e.preventDefault(); x += e.movementX; y += e.movementY; - dragElement.style.transform = `translate(${x}px, ${y}px)`; + dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; }; const upHandler = (e: PointerEvent) => { document.removeEventListener("pointermove", moveHandler, true); document.removeEventListener("pointerup", upHandler); - FinishDrag(dragElement, options); + FinishDrag(dragElement, e, options); }; document.addEventListener("pointermove", moveHandler, true); document.addEventListener("pointerup", upHandler); } - function FinishDrag(ele: HTMLElement, options: DragOptions) { + function FinishDrag(ele: HTMLElement, e: PointerEvent, options: DragOptions) { dragDiv.removeChild(ele); + const target = document.elementFromPoint(e.x, e.y); + if (!target) { + return; + } + target.dispatchEvent(new CustomEvent<DropEvent>("dashOnDrop", { + bubbles: true, + detail: { + x: e.x, + y: e.y, + } + })); } }
\ No newline at end of file diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx index e051fd97c..13e923736 100644 --- a/src/views/freeformcanvas/FreeFormCanvas.tsx +++ b/src/views/freeformcanvas/FreeFormCanvas.tsx @@ -77,7 +77,7 @@ export class FreeFormCanvas extends React.Component<IProps> { let store = this.props.store; return ( <div className="freeformcanvas-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel} onContextMenu={(e) => e.preventDefault()}> - <div className="freeformcanvas" style={{ transform: store.Transform, transformOrigin: '50% 50%' }}> + <div className="freeformcanvas" style={{ transform: store.Transform}}> <div className="node-container"> {this.props.store.Docs.map(doc => { return (<DocumentView key={doc.Id} dvm={doc} />); diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 648ea7f50..772c272bd 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -130,7 +130,6 @@ export class DocumentView extends React.Component<IProps> { private _isPointerDown = false; componentDidMount() { - return; // if(this._mainCont.current) { // DragManager.MakeDraggable(this._mainCont.current, { // buttons: 2, @@ -143,6 +142,7 @@ export class DocumentView extends React.Component<IProps> { } onPointerDown = (e: React.PointerEvent): void => { + // return; e.stopPropagation(); if (e.button === 2) { this._isPointerDown = true; |