Merelden/gonets
1
0
Fork 0
Code Issues Pull requests Projects Releases 4 Packages Wiki Activity Actions

front/dev
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Details

Browse source
This commit is contained in:
Галанский Сергей Александрович 2025-06-30 13:16:33 +05:00
parent 6f7b821c8b
commit 3a5b0bdcbc
162 changed files with 15801 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

38
FRONT/DEV/src/components/customeNodes/nodes/baseForm/circle/circleNode.tsx Normal file
View file

@ -0,0 +1,38 @@
import React from 'react';
import { Handle, Position } from '@xyflow/react';
import { Circle } from './style';
interface CustomNodeProps {
data: {
label: string;
style:{
width: any;
height: any;
borderType: any;
borderColor: any;
}
};
}
export const CircleNode = ({ data }: CustomNodeProps) => {
return (
<Circle 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> */}
</Circle>
);
};

20
FRONT/DEV/src/components/customeNodes/nodes/baseForm/circle/style.ts Normal file
View file

@ -0,0 +1,20 @@
import styled from "styled-components";
type Props={
width: string,
height: string,
bordertype: string,
bordercolor: string
}
export const Circle = styled.div<Props>`
background-color: white;
border-radius: 100%;
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;
`

37
FRONT/DEV/src/components/customeNodes/nodes/baseForm/default/defaultNode.tsx Normal file
View file

@ -0,0 +1,37 @@
import React from 'react';
import { Handle, Position } from '@xyflow/react';
import { Default } from './style';
interface CustomNodeProps {
data: {
label: string;
style:{
width: any;
height: any;
borderType: any;
borderColor: any;
}
};
}
export const DefaultNode = ({ data }: CustomNodeProps) => {
return (
<Default width={data.style.width} height={data.style.height} bordertype={data.style.borderType} bordercolor={data.style.borderColor}>
{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> */}
</Default>
);
};

20
FRONT/DEV/src/components/customeNodes/nodes/baseForm/default/style.ts Normal file
View file

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

45
FRONT/DEV/src/components/customeNodes/nodes/baseForm/diamond/diamondNode.tsx Normal file
View file

@ -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 >
);
};

32
FRONT/DEV/src/components/customeNodes/nodes/baseForm/diamond/style.ts Normal file
View file

@ -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;
`;

5
FRONT/DEV/src/components/customeNodes/nodes/baseForm/index.ts Normal file
View file

@ -0,0 +1,5 @@
export {DefaultNode} from './default/defaultNode'
export {PillNode} from './pill/pillNode'
export {ParalelorgamNode} from './paralelogram/paralelogramNode'
export {CircleNode} from './circle/circleNode'
export {DiamondNode} from './diamond/diamondNode'

35
FRONT/DEV/src/components/customeNodes/nodes/baseForm/paralelogram/paralelogramNode.tsx Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
import { Handle, Position } from '@xyflow/react';
import { Paralelorgam } from './style';
interface CustomNodeProps {
data: {
label: string;
style:{
width: any;
height: any;
borderType: any;
borderColor: any;
}
};
}
export const ParalelorgamNode = ({ data }: CustomNodeProps) => {
return (
<Paralelorgam width={data.style.width} height={data.style.height} bordertype={data.style.borderType} bordercolor={data.style.borderColor}>
{data.label}
{/* Узлы для подключения */}
<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"/>
</Paralelorgam>
);
};

43
FRONT/DEV/src/components/customeNodes/nodes/baseForm/paralelogram/style.ts Normal file
View file

@ -0,0 +1,43 @@
import styled from "styled-components";
type Props={
width: string,
height: string,
bordertype: string,
bordercolor: string
}
export const Paralelorgam = styled.div<Props>`
transform: skewX(-20deg);
background-color: white;
border-radius: 8px;
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;
.react-flow__handle-top{
transform: skewX(20deg);
top: -5px;
}
.react-flow__handle-bottom{
transform: skewX(20deg);
bottom: -5px;
}
.react-flow__handle-right{
transform: skewX(20deg);
right: -5px;
top: 25px;
}
.react-flow__handle-left{
transform: skewX(20deg);
left: -5px;
top: 25px;
}
`

40
FRONT/DEV/src/components/customeNodes/nodes/baseForm/pill/pillNode.tsx Normal file
View file

@ -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;

19
FRONT/DEV/src/components/customeNodes/nodes/baseForm/pill/style.ts Normal file
View file

@ -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;
`