front/dev

FRONT/DEV/src/components/customeNodes/nodes/baseForm/diamond/diamondNode.tsx

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

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

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+interface StyledDefaultProps {
+    width: any;
+    height: any;
+}
+
+export const Diamond = styled.div<StyledDefaultProps>`
+    position: relative;
+    width: ${(props) => props.width}px;
+    height: ${(props) => props.height}px;
+`;
+
+export const InnerDiamond = styled.div<StyledDefaultProps>`
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+    width: ${(props) => props.width - 6}px;
+    height: ${(props) => props.height - 4}px;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+
+export const Border = styled.div<{ width: number; height: number, bordercolor: any }>`
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+    width: ${(props) => props.width}px;
+    height: ${(props) => props.height}px;
+    background-color: ${(props) => props.bordercolor};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;