Merge pull request #281 from open-source-labs/dev

feat: added center prop to node to allow for initial placement in center of viewport

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelvet",
-	"version": "7.0.23",
+	"version": "7.0.24",
 	"description": "A lightweight Svelte component library for building dynamic, node-based user interfaces",
 	"keywords": [
 		"svelte",
@@ -22,7 +22,7 @@
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
+		"prepublishOnly": "yarn format && yarn lint && yarn test && npm run package",
 		"test": "playwright test",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -53,7 +53,6 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"husky": "^8.0.3",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"publint": "^0.1.9",

src/example-components/CustomEdge.svelte

@@ -5,7 +5,7 @@
 	let color: CSSColorString = 'yellow';
 </script>
 
-<Edge {color} let:destroy width={4} edgeClick={() => (color = 'blue')}>
+<Edge {color} let:destroy width={4} animate>
 	<button id="destroy-edge" on:click={destroy} slot="label">Custom Label</button>
 </Edge>
 

src/example-components/CustomNode.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import { Node, Anchor, Slider } from '$lib';
-	import { writable } from 'svelte/store';
+	import { get, writable } from 'svelte/store';
+	import { getContext, onMount } from 'svelte';
+	import type { Graph } from '$lib/types';
 
 	const parameter = writable(10);
+	const graph: Graph = getContext('graph');
 </script>
 
 <Node let:grabHandle let:selected>

src/example-components/test-components/CircleColor.svelte

@@ -3,6 +3,7 @@
 	import ColorAnchor from './ColorAnchor.svelte';
 	import { generateInput, generateOutput, Resizer, ColorPicker, Node, Anchor } from '$lib';
 	import type { CSSColorString } from '$lib';
+	import CustomEdge from '../CustomEdge.svelte';
 
 	type Inputs = {
 		color: CSSColorString;
@@ -33,9 +34,9 @@
 				let:connecting
 				outputStore={output}
 				output
-				edgeStyle="bezier"
 				edgeColor={output}
 				edgeLabel="Dynamic Edges"
+				edge={CustomEdge}
 				locked
 			>
 				<ColorAnchor color={output} {connecting} {linked} />

src/lib/components/Node/InternalNode.svelte

@@ -11,6 +11,7 @@
 
 	export let node: Node;
 	export let isDefault: boolean;
+	export let center: boolean;
 
 	const position = node.position;
 	const widthStore = node.dimensions.width;
@@ -57,18 +58,29 @@
 	$: activeGroup = graph.activeGroup;
 	$: cursor = graph.cursor;
 	$: initialNodePositions = graph.initialNodePositions;
+	$: centerPoint = graph.center;
 
 	onMount(() => {
 		// If the node dimensions got set in previous steps, we don't need to do anything
-		if ($widthStore && $heightStore) return;
-
-		// This only runs when a width and height were not provided via props
-		// Set the wrapper to fit-content and grab the width and height
-		[minWidth, minHeight] = calculateFitContentWidth(DOMnode);
+		if (!$widthStore && !$heightStore) {
+			// This only runs when a width and height were not provided via props
+			// Set the wrapper to fit-content and grab the width and height
+			[minWidth, minHeight] = calculateFitContentWidth(DOMnode);
+
+			// Update the node dimensions in the store
+			$widthStore = minWidth;
+			$heightStore = minHeight;
+		}
 
-		// Update the node dimensions in the store
-		$widthStore = minWidth;
-		$heightStore = minHeight;
+		if (center) {
+			const opticalCenter = {
+				x: $centerPoint.x - $widthStore / 2,
+				y: $centerPoint.y - $heightStore / 2
+			};
+			node.position.set(opticalCenter);
+			tracking.set(true);
+			tracking.set(false);
+		}
 		$mounted++;
 	});
 

src/lib/components/Node/Node.svelte

@@ -18,8 +18,6 @@
 	const graph = getContext<Graph>('graph');
 
 	//const storedNode = JSON.parse(localStorage.getItem('state'))?.nodes?[id]
-	const { nodes } = graph;
-
 	export let position = { x: 0, y: 0 };
 	export let dimensions: InitialDimensions | null = null;
 	export let id: string | number = 0;
@@ -44,6 +42,7 @@
 	export let edge: ComponentType | null = null;
 	export let connections: Connections = [];
 	export let useDefaults = false;
+	export let center = false;
 
 	let node: NodeType;
 	const group: GroupKey = getContext('group');
@@ -140,8 +139,7 @@
 		node.zIndex.set(zIndex);
 	}
 	// $: if (node) {
-	// 	node.position.x.set(position.x);
-	// 	node.position.y.set(position.y);
+	// 	node.position.set({ x: position.x, y: position.y });
 	// }
 	$: if (node) {
 		node.inputs.set(inputs);
@@ -151,8 +149,9 @@
 	}
 </script>
 
-{#if node && $nodes[node.id]}
+{#if node}
 	<InternalNode
+		{center}
 		isDefault={isDefault || useDefaults}
 		let:destroy
 		let:selected

src/lib/containers/Graph/Graph.svelte

@@ -146,6 +146,7 @@
 			width: DOMRect.width,
 			height: DOMRect.height
 		};
+
 		graph.dimensions.set(graphDimensions);
 	}
 

src/lib/index.js

@@ -12,7 +12,7 @@ import ThemeToggle from './components/ThemeToggle/ThemeToggle.svelte';
 import ColorPicker from './components/data/ColorPicker/ColorWheel.svelte';
 import Resizer from './components/Resizer/Resizer.svelte';
 import { generateInput, generateOutput } from './utils/creators';
-
+import { getViewportCenter } from './utils/getters/getViewportCenter';
 export {
 	Svelvet,
 	Controls,
@@ -28,7 +28,8 @@ export {
 	ThemeToggle,
 	ColorPicker,
 	generateInput,
-	generateOutput
+	generateOutput,
+	getViewportCenter
 };
 
 export * from './types';

src/lib/types/graph.ts

@@ -34,6 +34,7 @@ export interface Graph {
 			bottom: number;
 		}>;
 	};
+	center: Readable<XYPair>;
 	maxZIndex: Writable<number>;
 	dimensions: Writable<GraphDimensions>;
 	editable: boolean;

src/lib/utils/calculators/calculateViewPortCenter.ts

@@ -0,0 +1,23 @@
+import type { GraphDimensions } from '$lib/types';
+import { calculateRelativeCursor } from './calculateRelativeCursor';
+
+export function calculateViewportCenter(
+	dimensions: GraphDimensions,
+	translationX: number,
+	translationY: number,
+	scale: number
+) {
+	const { width, height, top, left } = dimensions;
+
+	const viewportCenter = { clientX: width / 2, clientY: height / 2 };
+	return calculateRelativeCursor(
+		viewportCenter,
+		top,
+		left,
+		width,
+		height,
+		scale,
+		translationX,
+		translationY
+	);
+}

src/lib/utils/creators/createGraph.ts

@@ -1,19 +1,12 @@
-import { writable } from 'svelte/store';
-import type {
-	Graph,
-	Node,
-	GroupBox,
-	EdgeKey,
-	GraphKey,
-	GroupKey,
-	GraphDimensions
-} from '$lib/types';
+import { derived, writable } from 'svelte/store';
+import type { Graph, Node, GroupBox, EdgeKey, GraphKey, GroupKey } from '$lib/types';
 import { createStore } from './createStore';
 import { cursorPositionRaw } from '$lib/stores/CursorStore';
 import type { WritableEdge, NodeKey } from '$lib/types';
 import { createDerivedCursorStore } from './createDerivedCursoreStore';
 import { createBoundsStore } from './createBoundsStore';
 import type { GraphConfig } from '$lib/types';
+import { calculateViewportCenter } from '../calculators/calculateViewPortCenter';
 
 export function createGraph(id: GraphKey, config: GraphConfig): Graph {
 	const {
@@ -30,13 +23,20 @@ export function createGraph(id: GraphKey, config: GraphConfig): Graph {
 		x: writable(initialTranslation?.x || 0),
 		y: writable(initialTranslation?.y || 0)
 	};
-	const dimensions = writable({} as GraphDimensions);
+
+	const dimensions = writable({ top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 });
 
 	const scale = writable(zoom);
 
 	const nodes = createStore<Node, NodeKey>();
 	const bounds = createBoundsStore(nodes, dimensions, scale, translation.x, translation.y);
 
+	const center = derived(
+		[dimensions, translation.x, translation.y, scale],
+		([$dimensions, $translationX, $translationY, $scale]) => {
+			return calculateViewportCenter($dimensions, $translationX, $translationY, $scale);
+		}
+	);
 	const graph: Graph = {
 		id,
 		nodes,
@@ -48,6 +48,7 @@ export function createGraph(id: GraphKey, config: GraphConfig): Graph {
 		maxZIndex: writable(2),
 		dimensions,
 		bounds,
+		center,
 		direction: direction || 'LR',
 		editable: editable || false,
 		linkingInput: writable(null),

src/lib/utils/getters/getViewportCenter.ts

@@ -0,0 +1,15 @@
+import { calculateViewportCenter } from '../calculators/calculateViewPortCenter';
+import { graphStore } from '$lib/stores';
+import { get } from 'svelte/store';
+
+export function getViewportCenter(graphId: string) {
+	const graph = graphStore.get(`G-${graphId}`);
+	if (!graph) throw new Error(`Graph with id ${graphId} not found`);
+
+	return calculateViewportCenter(
+		get(graph.dimensions),
+		get(graph.transforms.translation.x),
+		get(graph.transforms.translation.y),
+		get(graph.transforms.scale)
+	);
+}

src/routes/+page.svelte

@@ -8,7 +8,7 @@
 	<div class="wrapper">
 		<Svelvet controls edgeStyle="step" edge={CustomEdge} TD theme="dark" zoom={0.6} minimap>
 			<CustomNode />
-			<Node position={{ x: -200, y: 200 }} id="NODE" label="NODE" resizable />
+			<Node center position={{ x: -200, y: 200 }} id="NODE" label="NODE" resizable />
 		</Svelvet>
 	</div>
 </body>