front/dev

FRONT/DEV/src/components/customeNodes/nodes/baseForm/pill/pillNode.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { Pill } from './style';
+
+interface CustomNodeProps {
+  data: {
+    label: string;
+    style:{
+      width: any;
+    height: any;
+    borderType: any;
+    borderColor: any;
+    }
+  };
+}
+
+export const PillNode = ({ data }: CustomNodeProps) => {
+  return (
+    <Pill width={data.style.width} height={data.style.height} bordertype={data.style.borderType} bordercolor={data.style.borderColor}>{/*  */}
+      {/* <div style={{transform: 'rotate(-45deg)', width: '100%', height: '100%'}}> */}
+        {data.label}
+
+        {/* Узлы для подключения */}
+        <Handle type="source" position={Position.Top} id="source-top" style={{ top: 0, }} />
+        <Handle type="source" position={Position.Right} id="source-right" style={{ right: 0 }} />
+        <Handle type="source" position={Position.Bottom} id="source-bottom" style={{ bottom: 0 }} />
+        <Handle type="source" position={Position.Left} id="source-left" style={{ left: 0 }} />
+
+        {/* Для входящих подключений */}
+        <Handle type="target" position={Position.Top} id="target-top" style={{ top: 0 }} />
+        <Handle type="target" position={Position.Right} id="target-right" style={{ right: 0 }} />
+        <Handle type="target" position={Position.Bottom} id="target-bottom" style={{ bottom: 0 }} />
+        <Handle type="target" position={Position.Left} id="target-left" style={{ left: 0 }} />
+      {/* </div> */}
+
+    </Pill>
+  );
+};
+
+export default PillNode;

FRONT/DEV/src/components/customeNodes/nodes/baseForm/pill/style.ts

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+type Props={
+    width: string,
+    height: string,
+    bordertype: string,
+    bordercolor: string
+}
+
+export const Pill = styled.div<Props>`
+    background-color: white;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px ${(props) => props.bordertype} ${(props) => props.bordercolor};
+    width: ${(props) => props.width}px;
+    height: ${(props) => props.height}px;
+`