feat: Implement grid snapping and panning functionality in ObjectFlowDesigner

- Added grid snapping to object creation and dragging for better alignment.
- Introduced panning support with right-click and mouse wheel events for canvas navigation.
- Enhanced object properties for transformers and nodes, including detailed information display.
- Updated connection properties to include cable type, cross-section, and length.
- Implemented validation for overhead cable connections to ensure correct node types.
- Improved rendering logic to account for scrolling and grid display.
- Added CSS styles for warnings and specific node types for better UI feedback.

styles.css

@@ -321,6 +321,47 @@ body {
 	font-size: 0.85rem;
 }
 
+/* Warning styling for overhead cable validation */
+.warning {
+	color: #d69e2e;
+	background-color: #fef5e7;
+	border: 1px solid #f6e05e;
+	border-radius: 4px;
+	padding: 0.5rem;
+	margin: 0.5rem 0;
+	font-size: 0.85rem;
+}
+
+.warning strong {
+	color: #c05621;
+}
+
+.pole-node {
+	background: #4a5568 !important;
+	border-color: #2d3748 !important;
+}
+
+.cable-box-node {
+	background: #4299e1 !important;
+	border-color: #2c5282 !important;
+}
+
+/* Power system specific styling */
+.transformer-preview {
+	width: 0;
+	height: 0;
+	border-left: 15px solid transparent;
+	border-right: 15px solid transparent;
+	border-bottom: 25px solid #48bb78;
+}
+
+.node-preview {
+	width: 30px;
+	height: 30px;
+	background: linear-gradient(45deg, #4299e1 50%, #4a5568 50%);
+	border-radius: 4px;
+}
+
 /* Responsive design */
 @media (max-width: 1024px) {
 	.main-content {