Merge branch 'feat/dynamic-drag'

src/modules/blockchains/Buy/Capture.tsx

@@ -10,13 +10,15 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import Loading from '@components/Loading';
 import BaseModal from '@components/BaseModal';
 import { signal, useSignalEffect } from '@preact/signals-react';
+import useFocusNode from '@/modules/blockchains/Buy/hooks/useFocusNode';
 
 
 const isExportImage = signal(false);
 const isSharing = signal(false);
 
 const Capture = () => {
   // const { setIsCapture } = useCaptureStore();
+  const { handleFocusNode } = useFocusNode()
   const timerRef = useRef<any>();
   const [isCapturing, setIsCapturing] = useState<boolean>(false);
   const [seconds, setSeconds] = useState(10);
@@ -221,6 +223,9 @@ https://bvm.network/studio/${url}`;
 
   return (
     <div className={s.wrapper_btn_top}>
+      <div className={`${s.reset2}`} onClick={() => handleFocusNode('gaming_apps')}>
+        <p>Focus node</p>
+      </div>
       <div className={`${s.reset2} ${isCapturing && s.isCapturing}`} onClick={downloadImage}>
         <p>{isExportImage.value ? `EXPORTING...${seconds}` : 'EXPORT'}</p>
         <div>

src/modules/blockchains/Buy/component4/DappRenderer/BridgeRenderer.tsx

@@ -32,6 +32,7 @@ const BridgeRenderer = () => {
       style={{
         width: '100% !important',
         height: '100%',
+        padding: '20px 25px',
       }}
     >
       {draggedFields.map((key, index) => {

src/modules/blockchains/Buy/component4/DappRenderer/GamingAppsRenderer.tsx

@@ -31,6 +31,7 @@ const GamingAppsRenderer = () => {
       style={{
         width: '100% !important',
         height: '100%',
+        padding: '20px 25px',
       }}
     >
       {draggedFields.map((key, index) => {

src/modules/blockchains/Buy/component4/Node/Node.tsx

@@ -1,24 +1,28 @@
 import { Handle, Position } from '@xyflow/react';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { NodeProps } from '@/types/node';
 import NodeNotification from '../YourNodes/NodeNotification';
 import NodeContent from './NodeContent';
 import NodeHeading from './NodeHeading';
 import NodeOverlay from './NodeOverlay';
 import styles from './styles.module.scss';
+import { idNodeSignal } from '@/modules/blockchains/Buy/hooks/useFocusNode';
+import { useSignalEffect } from '@preact/signals-react';
 
 const Node = ({
+  dapp,
   overlay,
   content,
   heading,
   notification,
   borderColor = '#FFC700',
   targetHandles,
   sourceHandles,
+  mainContentStyles,
 }: NodeProps) => {
   const nodeRef = React.useRef<HTMLDivElement>(null);
-
+  const [focus, setFocus] = useState(false);
   React.useEffect(() => {
     if (!nodeRef.current) return;
 
@@ -35,9 +39,13 @@ const Node = ({
     };
   }, []);
 
+  useSignalEffect(() => {
+    setFocus(idNodeSignal.value === dapp?.id);
+  });
+
   return (
     <div
-      className={styles.node}
+      className={`${styles.node} ${focus && styles.isFocused}`}
       style={{
         borderColor,
       }}
@@ -60,7 +68,9 @@ const Node = ({
 
         {notification && <NodeNotification {...notification} />}
 
-        <div className={styles.node__mainContent}>{content.children}</div>
+        <div className={styles.node__mainContent} style={mainContentStyles}>
+          {content.children}
+        </div>
       </NodeContent>
 
       <div className={`${styles.handles} ${styles.sources}`}>

src/modules/blockchains/Buy/component4/Node/NodeContent.tsx

@@ -4,8 +4,12 @@ import { NodeContentProps } from '@/types/node';
 
 import styles from './styles.module.scss';
 
-const NodeContent = ({ children }: NodeContentProps) => {
-  return <div className={styles.nodeContent}>{children}</div>;
+const NodeContent = ({ children, contentStyles }: NodeContentProps) => {
+  return (
+    <div className={styles.nodeContent} style={contentStyles}>
+      {children}
+    </div>
+  );
 };
 
 export default React.memo(NodeContent);

src/modules/blockchains/Buy/component4/Node/NodeHeading.tsx

@@ -12,6 +12,7 @@ const NodeHeading = ({
   backgroundColor = '#FFF6D8',
   borderColor,
   textColor = '#555555',
+  headingStyles,
 }: NodeHeadingProps) => {
   const haveAction = React.useMemo(() => !!status?.onClick, [status]);
 
@@ -22,6 +23,7 @@ const NodeHeading = ({
         backgroundColor,
         borderColor,
         color: textColor,
+        ...headingStyles,
       }}
     >
       <div className={styles.nodeHeading__title}>{title}</div>

src/modules/blockchains/Buy/component4/Node/styles.module.scss

@@ -113,3 +113,13 @@
     }
   }
 }
+
+.isFocused {
+  //border-color:  #0c0d13 !important;
+  transition: 2s;
+  box-shadow: 1px 0px 28px 3px rgba(86, 86, 86, 0.7);
+}
+
+@keyframes blurShadow {
+  50% {box-shadow: 0 0 5px 5px #0c0d13 !important;}
+}

src/modules/blockchains/Buy/component4/YourNodes/BridgeNode.tsx

@@ -32,6 +32,7 @@ const BridgeNode = ({ data }: NodeProps<ChainNodeAsDappNode>) => {
       content={{
         children: <BridgeRenderer />,
       }}
+      mainContentStyles={{ padding: 0 }}
     />
   );
 };

src/modules/blockchains/Buy/component4/YourNodes/GamingAppsNode.tsx

@@ -32,6 +32,7 @@ const GamingAppsNode = ({ data }: NodeProps<ChainNodeAsDappNode>) => {
       content={{
         children: <GamingAppsRenderer />,
       }}
+      mainContentStyles={{ padding: 0 }}
     />
   );
 };

src/modules/blockchains/Buy/hooks/useFocusNode.ts

@@ -0,0 +1,35 @@
+import { useReactFlow, useStoreApi } from '@xyflow/react';
+import { signal } from '@preact/signals-react';
+
+export const idNodeSignal = signal('');
+
+function useFocusNode() {
+  const store = useStoreApi();
+  const { setCenter } = useReactFlow();
+
+
+  const handleFocusNode = (idNode: string) => {
+    const { nodeLookup } = store.getState();
+    const nodes = Array.from(nodeLookup).map(([, node]) => node);
+
+    if (nodes.length > 0) {
+      const node = nodes.find(node => node.id === idNode);
+      if (node && node.measured.width !== undefined && node.measured.height !== undefined) {
+        idNodeSignal.value = node.id
+        const x = node.position.x + node.measured.width / 2;
+        const y = node.position.y + node.measured.height / 2;
+        const zoom = 1.3;
+        setCenter(x, y, { zoom, duration: 600 });
+        setTimeout(() => {
+          idNodeSignal.value = ''
+        }, 2000)
+      }
+    }
+  };
+
+
+  return { handleFocusNode };
+}
+
+
+export default useFocusNode;

src/types/node.d.ts

@@ -1,7 +1,7 @@
 import { nodeOverlayType } from '@/modules/blockchains/Buy/component4/YourNodes/node.constants';
 import { Field } from '@/modules/blockchains/Buy/signals/useDragSignal';
 import { Node } from '@xyflow/react';
-import { DappModel } from './customize-model';
+import { DappModel, IModelOption } from './customize-model';
 
 type NodeHeadingProps = {
   title: string;
@@ -14,10 +14,12 @@ type NodeHeadingProps = {
   textColor?: string;
   borderColor?: string;
   backgroundColor?: string;
+  headingStyles?: React.CSSProperties;
 };
 
 type NodeContentProps = {
   children?: React.ReactNode;
+  contentStyles?: React.CSSProperties;
 };
 
 type NodeNotificationProps = {
@@ -47,10 +49,12 @@ type NodeViewAndAction = {
 type NodeOverlayProps = NodeOnlyViewProps | NodeViewAndAction;
 
 type NodeProps = {
+  dapp?: DappModel;
   heading: NodeHeadingProps;
   content: NodeContentProps;
   notification?: NodeNotificationProps;
   overlay?: NodeOverlayProps;
+  mainContentStyles?: React.CSSProperties;
   borderColor?: string;
   sourceHandles: string[];
   targetHandles: string[];