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

Naive copy&paste implementation of node resizer in svelte, some stuff pulled out to system

Browse Source
This commit is contained in:
peterkogo
2024-01-04 21:43:04 +01:00
parent a899f9b6ca
commit 296cc15fc1
22 changed files with 6256 additions and 9006 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/additional-components/NodeResizer/NodeResizer.tsx
+4 -6
View File
@@ -1,8 +1,6 @@
import ResizeControl from './ResizeControl';
import { ControlPosition, NodeResizerProps, ResizeControlVariant, ControlLinePosition } from './types';
const handleControls: ControlPosition[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
const lineControls: ControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
import { NodeResizerProps } from './types';
import { XY_RESIZER_HANDLE_CONTROLS, XY_RESIZER_LINE_CONTROLS, ResizeControlVariant } from '@xyflow/system';
export default function NodeResizer({
nodeId,
@@ -28,7 +26,7 @@ export default function NodeResizer({
return (
<>
{lineControls.map((c) => (
{XY_RESIZER_LINE_CONTROLS.map((c) => (
<ResizeControl
key={c}
className={lineClassName}
@@ -48,7 +46,7 @@ export default function NodeResizer({
onResizeEnd={onResizeEnd}
/>
))}
{handleControls.map((c) => (
{XY_RESIZER_HANDLE_CONTROLS.map((c) => (
<ResizeControl
key={c}
className={handleClassName}
packages/react/src/additional-components/NodeResizer/ResizeControl.tsx
+3 -8
View File
@@ -7,13 +7,8 @@ import { getPointerPosition, clamp } from '@xyflow/system';
import { useStoreApi } from '../../hooks/useStore';
import { useNodeId } from '../../contexts/NodeIdContext';
import type { NodeChange, NodeDimensionChange, NodePositionChange } from '../../types';
import {
type ResizeDragEvent,
type ResizeControlProps,
type ResizeControlLineProps,
ResizeControlVariant,
} from './types';
import { getDirection } from './utils';
import { type ResizeDragEvent, type ResizeControlProps, type ResizeControlLineProps } from './types';
import { getResizeDirection, ResizeControlVariant } from '@xyflow/system';
const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
@@ -184,7 +179,7 @@ function ResizeControl({
return;
}
const direction = getDirection({
const direction = getResizeDirection({
width: prevValues.current.width,
prevWidth,
height: prevValues.current.height,
packages/react/src/additional-components/NodeResizer/types.ts
+13 -27
View File
@@ -1,22 +1,19 @@
import type { CSSProperties, ReactNode } from 'react';
import type { D3DragEvent, SubjectPosition } from 'd3-drag';
import type {
XYResizeParams,
XYResizeParamsWithDirection,
XYResizeControlPosition,
XYResizeControlLinePosition,
ResizeControlVariant,
} from '@xyflow/system';
export type ResizeParams = {
x: number;
y: number;
width: number;
height: number;
};
type OnResizeHandler<Params = XYResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
export type ResizeParamsWithDirection = ResizeParams & {
direction: number[];
};
type OnResizeHandler<Params = ResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
export type ShouldResize = OnResizeHandler<ResizeParamsWithDirection, boolean>;
export type ShouldResize = OnResizeHandler<XYResizeParamsWithDirection, boolean>;
export type OnResizeStart = OnResizeHandler;
export type OnResize = OnResizeHandler<ResizeParamsWithDirection>;
export type OnResize = OnResizeHandler<XYResizeParamsWithDirection>;
export type OnResizeEnd = OnResizeHandler;
export type NodeResizerProps = {
@@ -38,15 +35,6 @@ export type NodeResizerProps = {
onResizeEnd?: OnResizeEnd;
};
export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
export type ControlPosition = ControlLinePosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
export enum ResizeControlVariant {
Line = 'line',
Handle = 'handle',
}
export type ResizeControlProps = Pick<
NodeResizerProps,
| 'nodeId'
@@ -61,7 +49,7 @@ export type ResizeControlProps = Pick<
| 'onResize'
| 'onResizeEnd'
> & {
position?: ControlPosition;
position?: XYResizeControlPosition;
variant?: ResizeControlVariant;
className?: string;
style?: CSSProperties;
@@ -69,7 +57,5 @@ export type ResizeControlProps = Pick<
};
export type ResizeControlLineProps = ResizeControlProps & {
position?: ControlLinePosition;
position?: XYResizeControlLinePosition;
};
export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
packages/react/src/additional-components/NodeResizer/utils.ts
-26
View File
@@ -1,26 +0,0 @@
type GetDirectionParams = {
width: number;
prevWidth: number;
height: number;
prevHeight: number;
invertX: boolean;
invertY: boolean;
};
// returns an array of two numbers (0, 1 or -1) representing the direction of the resize
// 0 = no change, 1 = increase, -1 = decrease
export function getDirection({ width, prevWidth, height, prevHeight, invertX, invertY }: GetDirectionParams) {
const deltaWidth = width - prevWidth;
const deltaHeight = height - prevHeight;
const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
if (deltaWidth && invertX) {
direction[0] = direction[0] * -1;
}
if (deltaHeight && invertY) {
direction[1] = direction[1] * -1;
}
return direction;
}