@pixerate/editor-svelte 0.6.1 → 0.7.1

package/src/canvas/createCanvasDocking.svelte.ts

@@ -1,11 +1,179 @@
 import type { XYPosition } from '@xyflow/svelte';
-import type { CanvasNode, CanvasDockingCallbacks } from './types.js';
+import type { CanvasNode, CanvasDockingCallbacks, DockStrategy } from './types.js';
+
+export type { DockStrategy };
 
 export interface CreateCanvasDockingOptions<TNode extends CanvasNode = CanvasNode>
 	extends CanvasDockingCallbacks<TNode> {
 	isDockTarget?: (target: TNode) => boolean;
 	restorePositionOnDock?: boolean;
 	onSave?: () => void;
+	/**
+	 * Disambiguation strategy when multiple candidate dock targets intersect the dragged node.
+	 * - 'center-point': (Default) Resolves the target enclosing or closest to the dragged node's center.
+	 * - 'max-overlap': Resolves the target with the greatest overlapping area.
+	 * - 'pointer': Resolves the target enclosing or closest to the mouse/touch cursor.
+	 * - 'first': Resolves the first intersecting target (legacy behavior).
+	 */
+	dockStrategy?: DockStrategy;
+	/**
+	 * Custom primary dock target resolution callback. If provided and returns a node, takes precedence.
+	 */
+	resolvePrimaryDockTarget?: (
+		targets: TNode[],
+		draggedNode: TNode,
+		event?: MouseEvent | TouchEvent
+	) => TNode | null;
+	/**
+	 * When true (default), ensures only a single primary dock target is considered hovered at any time.
+	 * Transitioning across adjacent dock targets automatically fires onDockLeave on the previous target
+	 * and onDockHover on the new target. Set to false to allow concurrent multi-target hover.
+	 */
+	exclusiveHover?: boolean;
+}
+
+interface NodeRect {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+function getNodeRect(node: CanvasNode): NodeRect {
+	const x = node.position?.x ?? 0;
+	const y = node.position?.y ?? 0;
+	const width =
+		(node as any).measured?.width ??
+		(node as any).width ??
+		(node as any).initialWidth ??
+		0;
+	const height =
+		(node as any).measured?.height ??
+		(node as any).height ??
+		(node as any).initialHeight ??
+		0;
+	return { x, y, width, height };
+}
+
+function getNodeCenter(node: CanvasNode): { x: number; y: number } {
+	const rect = getNodeRect(node);
+	return {
+		x: rect.x + rect.width / 2,
+		y: rect.y + rect.height / 2
+	};
+}
+
+function getDistanceSq(p1: { x: number; y: number }, p2: { x: number; y: number }): number {
+	const dx = p1.x - p2.x;
+	const dy = p1.y - p2.y;
+	return dx * dx + dy * dy;
+}
+
+function getOverlapArea(rectA: NodeRect, rectB: NodeRect): number {
+	const xOverlap = Math.max(
+		0,
+		Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x)
+	);
+	const yOverlap = Math.max(
+		0,
+		Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y)
+	);
+	return xOverlap * yOverlap;
+}
+
+function resolvePrimaryTarget<TNode extends CanvasNode>(
+	targets: TNode[],
+	draggedNode: TNode,
+	strategy: DockStrategy,
+	customResolver?: (
+		targets: TNode[],
+		draggedNode: TNode,
+		event?: MouseEvent | TouchEvent
+	) => TNode | null,
+	event?: MouseEvent | TouchEvent
+): TNode | null {
+	if (targets.length === 0) return null;
+	if (targets.length === 1) return targets[0];
+
+	if (customResolver) {
+		const resolved = customResolver(targets, draggedNode, event);
+		if (resolved !== undefined) return resolved;
+	}
+
+	if (strategy === 'first') {
+		return targets[0];
+	}
+
+	if (strategy === 'pointer' && event) {
+		const clientX = 'clientX' in event ? event.clientX : event.touches?.[0]?.clientX;
+		const clientY = 'clientY' in event ? event.clientY : event.touches?.[0]?.clientY;
+		if (typeof clientX === 'number' && typeof clientY === 'number') {
+			const pointerInside = targets.filter((target) => {
+				const r = getNodeRect(target);
+				return (
+					r.width > 0 &&
+					r.height > 0 &&
+					clientX >= r.x &&
+					clientX <= r.x + r.width &&
+					clientY >= r.y &&
+					clientY <= r.y + r.height
+				);
+			});
+			if (pointerInside.length === 1) return pointerInside[0];
+			if (pointerInside.length > 1) {
+				return pointerInside.reduce((best, cur) => {
+					const bestDist = getDistanceSq(getNodeCenter(best), { x: clientX, y: clientY });
+					const curDist = getDistanceSq(getNodeCenter(cur), { x: clientX, y: clientY });
+					return curDist < bestDist ? cur : best;
+				});
+			}
+		}
+	}
+
+	if (strategy === 'max-overlap') {
+		const draggedRect = getNodeRect(draggedNode);
+		let maxArea = -1;
+		let bestTarget = targets[0];
+		for (const target of targets) {
+			const targetRect = getNodeRect(target);
+			const area = getOverlapArea(draggedRect, targetRect);
+			if (area > maxArea) {
+				maxArea = area;
+				bestTarget = target;
+			}
+		}
+		return bestTarget;
+	}
+
+	// Strategy: 'center-point' (default)
+	const draggedCenter = getNodeCenter(draggedNode);
+	const containing = targets.filter((target) => {
+		const r = getNodeRect(target);
+		if (r.width > 0 && r.height > 0) {
+			return (
+				draggedCenter.x >= r.x &&
+				draggedCenter.x <= r.x + r.width &&
+				draggedCenter.y >= r.y &&
+				draggedCenter.y <= r.y + r.height
+			);
+		}
+		return false;
+	});
+
+	if (containing.length === 1) return containing[0];
+	if (containing.length > 1) {
+		return containing.reduce((best, cur) => {
+			const bestDist = getDistanceSq(getNodeCenter(best), draggedCenter);
+			const curDist = getDistanceSq(getNodeCenter(cur), draggedCenter);
+			return curDist < bestDist ? cur : best;
+		});
+	}
+
+	return targets.reduce((best, cur) => {
+		const bestDist = getDistanceSq(getNodeCenter(best), draggedCenter);
+		const curDist = getDistanceSq(getNodeCenter(cur), draggedCenter);
+		return curDist < bestDist ? cur : best;
+	});
 }
 
 /**
@@ -21,6 +189,8 @@ export function createCanvasDocking<TNode extends CanvasNode = CanvasNode>(
 	let currentHoverTargets = $state.raw<Set<string>>(new Set());
 
 	const isDockTarget = options.isDockTarget ?? ((target: TNode) => (target as any).type === 'boardNode');
+	const dockStrategy = options.dockStrategy ?? 'center-point';
+	const exclusiveHover = options.exclusiveHover ?? true;
 
 	function handleNodeDragStart(params: {
 		targetNode: TNode | null;
@@ -43,24 +213,54 @@ export function createCanvasDocking<TNode extends CanvasNode = CanvasNode>(
 
 		const intersecting = getIntersectingNodes(draggedNode);
 		const currentDockTargets = intersecting.filter(isDockTarget);
-		const newHoverSet = new Set(currentDockTargets.map((t) => t.id));
 
-		// Check for left targets
-		currentHoverTargets.forEach((targetId) => {
-			if (!newHoverSet.has(targetId)) {
-				const leftNode = intersecting.find((n) => n.id === targetId) ?? ({ id: targetId } as TNode);
-				options.onDockLeave?.(leftNode, draggedNode!);
-			}
-		});
+		if (exclusiveHover) {
+			const primaryTarget =
+				currentDockTargets.length > 0
+					? resolvePrimaryTarget(
+							currentDockTargets,
+							draggedNode,
+							dockStrategy,
+							options.resolvePrimaryDockTarget,
+							params.event
+						)
+					: null;
+			const primaryTargetId = primaryTarget ? primaryTarget.id : null;
+
+			// Fire onDockLeave for previous targets no longer considered primary
+			currentHoverTargets.forEach((targetId) => {
+				if (targetId !== primaryTargetId) {
+					const leftNode = intersecting.find((n) => n.id === targetId) ?? ({ id: targetId } as TNode);
+					options.onDockLeave?.(leftNode, draggedNode!);
+				}
+			});
 
-		// Check for newly entered targets
-		currentDockTargets.forEach((target) => {
-			if (!currentHoverTargets.has(target.id)) {
-				options.onDockHover?.(target, draggedNode!);
+			// Fire onDockHover if entering a new primary target
+			if (primaryTarget && !currentHoverTargets.has(primaryTarget.id)) {
+				options.onDockHover?.(primaryTarget, draggedNode);
 			}
-		});
 
-		currentHoverTargets = newHoverSet;
+			currentHoverTargets = primaryTargetId ? new Set([primaryTargetId]) : new Set();
+		} else {
+			const newHoverSet = new Set(currentDockTargets.map((t) => t.id));
+
+			// Check for left targets
+			currentHoverTargets.forEach((targetId) => {
+				if (!newHoverSet.has(targetId)) {
+					const leftNode = intersecting.find((n) => n.id === targetId) ?? ({ id: targetId } as TNode);
+					options.onDockLeave?.(leftNode, draggedNode!);
+				}
+			});
+
+			// Check for newly entered targets
+			currentDockTargets.forEach((target) => {
+				if (!currentHoverTargets.has(target.id)) {
+					options.onDockHover?.(target, draggedNode!);
+				}
+			});
+
+			currentHoverTargets = newHoverSet;
+		}
 	}
 
 	function handleNodeDragStop(
@@ -75,7 +275,17 @@ export function createCanvasDocking<TNode extends CanvasNode = CanvasNode>(
 
 		if (draggedNode) {
 			const intersecting = getIntersectingNodes(draggedNode);
-			const dockTarget = intersecting.find(isDockTarget);
+			const dockTargets = intersecting.filter(isDockTarget);
+			const dockTarget =
+				dockTargets.length > 0
+					? resolvePrimaryTarget(
+							dockTargets,
+							draggedNode,
+							dockStrategy,
+							options.resolvePrimaryDockTarget,
+							params.event
+						)
+					: null;
 
 			if (dockTarget) {
 				options.onDockDrop?.(dockTarget, draggedNode);

package/src/canvas/index.ts

@@ -28,7 +28,8 @@ export {
 // Docking & drag interactions rune
 export {
 	createCanvasDocking,
-	type CreateCanvasDockingOptions
+	type CreateCanvasDockingOptions,
+	type DockStrategy
 } from './createCanvasDocking.svelte.js';
 
 // Shortcuts manager

package/src/canvas/types.ts

@@ -72,6 +72,15 @@ export interface CanvasShortcutsOptions<TNode extends CanvasNode = CanvasNode> {
 	getSelectedNodes?: () => TNode[];
 }
 
+/**
+ * Strategy used to resolve the primary dock target when multiple targets intersect a dragged node.
+ * - 'center-point': Chooses the target enclosing or closest to the center coordinate of the dragged node.
+ * - 'max-overlap': Chooses the target with the largest bounding box intersection area.
+ * - 'pointer': Chooses the target enclosing or closest to the mouse/touch cursor coordinates (falls back to 'center-point').
+ * - 'first': Chooses the first intersecting target (legacy behavior).
+ */
+export type DockStrategy = 'center-point' | 'max-overlap' | 'pointer' | 'first';
+
 /**
  * Docking and intersection callbacks.
  */

package/src/editor.svelte.ts

@@ -24,7 +24,7 @@ export const initiateEditor = (
       ...defaultPreset,
       ...(extensions ?? []),
     ],
-    autofocus: true,
+    autofocus: false,
     ...editorOptions,
   });
 

package/src/index.ts

@@ -1,6 +1,6 @@
 import type { Component } from "svelte";
-import type { Editor, Content, Extensions } from "@tiptap/core";
-import type { Template, ColorGradient } from "@pixerate/editor";
+import type { Editor, Content, Extensions, FocusPosition } from "@tiptap/core";
+import type { Template, ColorGradient, RichTextPresetOptions, MarkdownOptions } from "@pixerate/editor";
 
 import EditableTextNodeEditorComponent from "./EditableTextNodeEditor.svelte";
 import BubbleMenuComponent from "./BubbleMenu.svelte";
@@ -21,6 +21,9 @@ export interface EditableTextNodeEditorProps {
   onBlur?: () => void;
   onCreate?: () => void;
   placeholder?: string;
+  markdown?: boolean | MarkdownOptions;
+  richTextOptions?: RichTextPresetOptions;
+  autofocus?: FocusPosition | boolean;
 }
 
 export interface BubbleMenuProps {