refactor(svelte): cleanup store usage

packages/svelte/src/lib/actions/drag/index.ts

@@ -25,13 +25,13 @@ type UseDragParams = {
 	handleSelector?: string;
 	nodeId?: string;
 	updateNodePositions: (dragItems: NodeDragItem[], d: boolean, p: boolean) => void;
-	nodesStore: Writable<Node[]>;
-	transformStore: Writable<Transform>;
+	nodes: Writable<Node[]>;
+	transform: Writable<Transform>;
 };
 
 export default function drag(
 	nodeRef: Element,
-	{ handleSelector, nodeId, updateNodePositions, nodesStore, transformStore }: UseDragParams
+	{ handleSelector, nodeId, updateNodePositions, nodes, transform: transformStore }: UseDragParams
 ) {
 	let dragging = false;
 	let dragItems: NodeDragItem[] = [];
@@ -62,7 +62,7 @@ export default function drag(
 
 		dragItems = dragItems.map((n) => {
 			const nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
-			const updatedPos = calcNextPosition(n, nextPosition, get(nodesStore) as RFNode[]);
+			const updatedPos = calcNextPosition(n, nextPosition, get(nodes) as RFNode[]);
 
 			// we want to make sure that we only fire a change event when there is a changes
 			hasChange =
@@ -89,7 +89,7 @@ export default function drag(
 			const pointerPos = getPointerPosition(event);
 			console.log(pointerPos);
 			lastPos = pointerPos;
-			dragItems = getDragItems(get(nodesStore) as RFNode[], pointerPos, nodeId);
+			dragItems = getDragItems(get(nodes) as RFNode[], pointerPos, nodeId);
 		})
 		.on('drag', (event: UseDragEvent) => {
 			const pointerPos = getPointerPosition(event);

packages/svelte/src/lib/actions/zoom/index.ts

@@ -78,13 +78,13 @@ function filter(event: any, params: ZoomParams): boolean {
 }
 
 type ZoomParams = {
-	transformStore: Writable<Transform>;
+	transform: Writable<Transform>;
 	selecting: boolean;
-	d3Store: Writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>;
+	d3: Writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>;
 };
 
 export default function zoom(domNode: Element, params: ZoomParams) {
-	const { transformStore, d3Store } = params;
+	const { transform, d3 } = params;
 	const d3ZoomInstance = d3Zoom();
 	const selection = select(domNode).call(d3ZoomInstance);
 	const d3ZoomHandler = selection.on('wheel.zoom');
@@ -100,13 +100,13 @@ export default function zoom(domNode: Element, params: ZoomParams) {
 		d3ZoomHandler!.call(this, event, d);
 	});
 
-	d3Store.set({
+	d3.set({
 		zoom: d3ZoomInstance,
 		selection
 	});
 
 	d3ZoomInstance.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-		transformStore.set([event.transform.x, event.transform.y, event.transform.k]);
+		transform.set([event.transform.x, event.transform.y, event.transform.k]);
 	});
 
 	d3ZoomInstance.filter((event: any) => filter(event, params));