alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(libs) add width, height and positionAbsolute props to NodeProps

Browse Source
This commit is contained in:
moklick
2023-11-23 13:50:28 +01:00
parent 38b5051179
commit 1dfff1bf5b
16 changed files with 63 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const sourceHandleStyleB: CSSProperties = {
left: 'auto',
};
const CustomNode: FC<NodeProps> = ({ data, xPos, yPos }) => {
const CustomNode: FC<NodeProps> = ({ data, positionAbsolute }) => {
return (
<>
<Handle type="target" position={Position.Top} />
@@ -18,7 +18,7 @@ const CustomNode: FC<NodeProps> = ({ data, xPos, yPos }) => {
<div>
Position:{' '}
<strong>
{xPos.toFixed(2)},{yPos.toFixed(2)}
{positionAbsolute.x.toFixed(2)},{positionAbsolute.y.toFixed(2)}
</strong>
</div>
</div>
examples/react/src/examples/Subflow/DebugNode.tsx
+2 -2
View File
@@ -11,13 +11,13 @@ const idStyle: CSSProperties = {
left: 2,
};
const DebugNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsolute, id }) => {
return (
<>
<Handle type="target" position={Position.Top} />
<div style={idStyle}>{id}</div>
<div style={infoStyle}>
x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
</div>
<Handle type="source" position={Position.Bottom} />
</>
examples/svelte/src/routes/examples/overview/CustomNode.svelte
+3 -4
View File
@@ -1,16 +1,15 @@
<script lang="ts">
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
type $$Props = NodeProps;
export let data: { label: string } = { label: 'Node' };
export let xPos: number = 0;
export let yPos: number = 0;
export let positionAbsolute: XYPosition = { x: 0, y: 0 };
</script>
<div class="custom">
<div>{data.label}</div>
<div>{~~xPos}, {~~yPos}</div>
<div>{~~positionAbsolute.x}, {~~positionAbsolute.y}</div>
<Handle type="target" position={Position.Top} />
examples/svelte/src/routes/examples/subflows/DebugNode.svelte
+3 -11
View File
@@ -1,24 +1,16 @@
<script lang="ts">
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
type $$Props = NodeProps;
export let id: string;
export let xPos: number = 0;
export let yPos: number = 0;
export let positionAbsolute: XYPosition = { x: 0, y: 0 };
export let zIndex: number = 0;
</script>
<Handle type="target" position={Position.Top} />
<div>{id}</div>
<div>
x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
</div>
<Handle type="source" position={Position.Bottom} />
<style>
.custom {
background: #ffcc00;
padding: 10px;
}
</style>