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

chore(node-resizer): cleanup

Browse Source
This commit is contained in:
moklick
2024-01-09 12:30:29 +01:00
parent 0cbfcb5c7b
commit 616fb14c34
15 changed files with 62 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/svelte/src/components/Header/Header.svelte
View File

@@ -15,6 +15,7 @@
'interaction',
'intersections',
'node-toolbar',
'node-resizer',
'overview',
'stress',
'subflows',
@@ -22,8 +23,7 @@
'usenodesdata',
'usesvelteflow',
'useupdatenodeinternals',
'validation',
'node-resizer'
'validation'
];
const onChange = (event: Event) => {

3
packages/react/package.json
View File

@@ -48,7 +48,6 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@types/d3": "^7.4.0",
"@xyflow/system": "workspace:*",
"classcat": "^5.0.3",
"zustand": "^4.4.0"
@@ -78,8 +77,6 @@
"rollup": {
"globals": {
"classcat": "cc",
"d3-selection": "d3Selection",
"d3-drag": "d3Drag",
"zustand": "zustand",
"zustand/shallow": "zustandShallow"
},

15
packages/react/src/additional-components/NodeResizer/ResizeControl.tsx → packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
View File

@@ -1,15 +1,16 @@
import { useRef, useEffect, memo } from 'react';
import cc from 'classcat';
import { XYResizer, ResizerControlVariant, type XYResizerInstance, type XYResizerChange } from '@xyflow/system';
import { XYResizer, ResizeControlVariant, type XYResizerInstance, type XYResizerChange } from '@xyflow/system';
import { useStoreApi } from '../../hooks/useStore';
import { useNodeId } from '../../contexts/NodeIdContext';
import type { NodeChange, NodeDimensionChange, NodePositionChange } from '../../types';
import { type ResizeControlProps, type ResizeControlLineProps } from './types';
import type { ResizeControlProps, ResizeControlLineProps } from './types';
function ResizeControl({
nodeId,
position,
variant = ResizerControlVariant.Handle,
variant = ResizeControlVariant.Handle,
className,
style = {},
children,
@@ -28,7 +29,7 @@ function ResizeControl({
const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
const store = useStoreApi();
const resizeControlRef = useRef<HTMLDivElement>(null);
const defaultPosition = variant === ResizerControlVariant.Line ? 'right' : 'bottom-right';
const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
const controlPosition = position ?? defaultPosition;
const resizer = useRef<XYResizerInstance | null>(null);
@@ -128,7 +129,7 @@ function ResizeControl({
]);
const positionClassNames = controlPosition.split('-');
const colorStyleProp = variant === ResizerControlVariant.Line ? 'borderColor' : 'backgroundColor';
const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
const controlStyle = color ? { ...style, [colorStyleProp]: color } : style;
return (
@@ -143,7 +144,7 @@ function ResizeControl({
}
export function ResizeControlLine(props: ResizeControlLineProps) {
return <ResizeControl {...props} variant={ResizerControlVariant.Line} />;
return <ResizeControl {...props} variant={ResizeControlVariant.Line} />;
}
export default memo(ResizeControl);
export const NodeResizeControl = memo(ResizeControl);

15
packages/react/src/additional-components/NodeResizer/NodeResizer.tsx
View File

@@ -1,8 +1,9 @@
import ResizeControl from './ResizeControl';
import { NodeResizerProps } from './types';
import { ResizerControlVariant, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS } from '@xyflow/system';
import { ResizeControlVariant, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS } from '@xyflow/system';
export default function NodeResizer({
import { NodeResizeControl } from './NodeResizeControl';
import type { NodeResizerProps } from './types';
export function NodeResizer({
nodeId,
isVisible = true,
handleClassName,
@@ -27,13 +28,13 @@ export default function NodeResizer({
return (
<>
{XY_RESIZER_LINE_POSITIONS.map((position) => (
<ResizeControl
<NodeResizeControl
key={position}
className={lineClassName}
style={lineStyle}
nodeId={nodeId}
position={position}
variant={ResizerControlVariant.Line}
variant={ResizeControlVariant.Line}
color={color}
minWidth={minWidth}
minHeight={minHeight}
@@ -47,7 +48,7 @@ export default function NodeResizer({
/>
))}
{XY_RESIZER_HANDLE_POSITIONS.map((position) => (
<ResizeControl
<NodeResizeControl
key={position}
className={handleClassName}
style={handleStyle}

4
packages/react/src/additional-components/NodeResizer/index.tsx
View File

@@ -1,4 +1,4 @@
export { default as NodeResizer } from './NodeResizer';
export { default as NodeResizeControl } from './ResizeControl';
export { NodeResizer } from './NodeResizer';
export { NodeResizeControl } from './NodeResizeControl';
export * from './types';

8
packages/react/src/additional-components/NodeResizer/types.ts
View File

@@ -1,7 +1,7 @@
import type { CSSProperties, ReactNode } from 'react';
import type {
XYResizeControlPosition,
XYResizeControlLinePosition,
ControlPosition,
ControlLinePosition,
ResizeControlVariant,
ShouldResize,
OnResizeStart,
@@ -42,7 +42,7 @@ export type ResizeControlProps = Pick<
| 'onResize'
| 'onResizeEnd'
> & {
position?: XYResizeControlPosition;
position?: ControlPosition;
variant?: ResizeControlVariant;
className?: string;
style?: CSSProperties;
@@ -50,5 +50,5 @@ export type ResizeControlProps = Pick<
};
export type ResizeControlLineProps = ResizeControlProps & {
position?: XYResizeControlLinePosition;
position?: ControlLinePosition;
};

7
packages/react/src/index.ts
View File

@@ -81,6 +81,13 @@ export {
type ColorModeClass,
type HandleType,
type OnBeforeDelete,
type ShouldResize,
type OnResizeStart,
type OnResize,
type OnResizeEnd,
type ControlPosition,
type ControlLinePosition,
type ResizeControlVariant,
} from '@xyflow/system';
// system utils

9
packages/svelte/src/lib/index.ts
View File

@@ -90,7 +90,14 @@ export {
type Transform,
type CoordinateExtent,
type ColorMode,
type ColorModeClass
type ColorModeClass,
type ShouldResize,
type OnResizeStart,
type OnResize,
type OnResizeEnd,
type ControlPosition,
type ControlLinePosition,
type ResizeControlVariant
} from '@xyflow/system';
// system utils

4
packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte
View File

@@ -2,7 +2,7 @@
import ResizeControl from './ResizeControl.svelte';
import type { NodeResizerProps } from './types';
import {
ResizerControlVariant,
ResizeControlVariant,
XY_RESIZER_HANDLE_POSITIONS,
XY_RESIZER_LINE_POSITIONS
} from '@xyflow/system';
@@ -39,7 +39,7 @@
style={lineStyle}
{nodeId}
{position}
variant={ResizerControlVariant.Line}
variant={ResizeControlVariant.Line}
{color}
minWidth={_minWidth}
minHeight={_minHeight}

12
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
View File

@@ -4,8 +4,8 @@
import { useStore } from '$lib/store';
import {
XYResizer,
ResizerControlVariant,
type XYResizerControlPosition,
ResizeControlVariant,
type ControlPosition,
type XYResizerInstance,
type XYResizerChange
} from '@xyflow/system';
@@ -15,7 +15,7 @@
export let nodeId: $$Props['nodeId'] = undefined;
export let position: $$Props['position'] = undefined;
export let variant: $$Props['variant'] = ResizerControlVariant.Handle;
export let variant: $$Props['variant'] = ResizeControlVariant.Handle;
export let color: $$Props['color'] = undefined;
export let minWidth: $$Props['minWidth'] = 10;
$: _minWidth = minWidth ?? 10;
@@ -43,13 +43,13 @@
let resizer: XYResizerInstance | null = null;
$: defaultPosition = (
variant === ResizerControlVariant.Line ? 'right' : 'bottom-right'
) as XYResizerControlPosition;
variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'
) as ControlPosition;
$: controlPosition = position ?? defaultPosition;
$: positionClassNames = controlPosition.split('-');
$: colorStyleProp = variant === ResizerControlVariant.Line ? 'border-color' : 'background-color';
$: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
$: _style = style ?? '';
$: controlStyle = !!color ? `${_style} ${colorStyleProp}: ${color};` : _style;

22
packages/svelte/src/lib/plugins/NodeResizer/types.ts
View File

@@ -1,10 +1,10 @@
import type {
XYResizeParams,
XYResizeParamsWithDirection,
XYResizeControlPosition,
ControlPosition,
ResizeControlVariant,
D3DragEvent,
SubjectPosition
ShouldResize,
OnResizeStart,
OnResize,
OnResizeEnd
} from '@xyflow/system';
export type NodeResizerProps = {
@@ -40,18 +40,8 @@ export type ResizeControlProps = Pick<
| 'onResize'
| 'onResizeEnd'
> & {
position?: XYResizeControlPosition;
position?: ControlPosition;
variant?: ResizeControlVariant;
class?: string;
style?: string;
};
type OnResizeHandler<Params = XYResizeParams, Result = void> = (
event: ResizeDragEvent,
params: Params
) => Result;
export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
export type ShouldResize = OnResizeHandler<XYResizeParamsWithDirection, boolean>;
export type OnResizeStart = OnResizeHandler;
export type OnResize = OnResizeHandler<XYResizeParamsWithDirection>;
export type OnResizeEnd = OnResizeHandler;

2
packages/system/src/types/utils.ts
View File

@@ -1,5 +1,3 @@
import type { Optional } from '../utils/types';
export enum Position {
Left = 'left',
Top = 'top',

4
packages/system/src/xyresizer/XYResizer.ts
View File

@@ -2,7 +2,7 @@ import { drag } from 'd3-drag';
import { select } from 'd3-selection';
import { NodeLookup, Transform } from '../types';
import { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, XYResizerControlPosition } from './types';
import { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, ControlPosition } from './types';
import { getControlDirection, getDimensionsAfterResize, getPositionAfterResize, getResizeDirection } from './utils';
import { getPointerPosition } from '../utils';
@@ -51,7 +51,7 @@ type XYResizerParams = {
};
type XYResizerUpdateParams = {
controlPosition: XYResizerControlPosition;
controlPosition: ControlPosition;
boundries: {
minWidth: number;
minHeight: number;

20
packages/system/src/xyresizer/types.ts
View File

@@ -11,27 +11,17 @@ export type XYResizerParamsWithDirection = XYResizerParams & {
direction: number[];
};
export type XYResizerControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
export type XYResizerControlPosition =
| XYResizerControlLinePosition
| 'top-left'
| 'top-right'
| 'bottom-left'
| 'bottom-right';
export type ControlPosition = ControlLinePosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
export enum ResizerControlVariant {
export enum ResizeControlVariant {
Line = 'line',
Handle = 'handle',
}
export const XY_RESIZER_HANDLE_POSITIONS: XYResizerControlPosition[] = [
'top-left',
'top-right',
'bottom-left',
'bottom-right',
];
export const XY_RESIZER_LINE_POSITIONS: XYResizerControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
export const XY_RESIZER_HANDLE_POSITIONS: ControlPosition[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
export const XY_RESIZER_LINE_POSITIONS: ControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
type OnResizeHandler<Params = XYResizerParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;

4
packages/system/src/xyresizer/utils.ts
View File

@@ -1,5 +1,5 @@
import { clamp, getPointerPosition } from '../utils';
import { XYResizerControlPosition } from './types';
import { ControlPosition } from './types';
type GetResizeDirectionParams = {
width: number;
@@ -48,7 +48,7 @@ export function getResizeDirection({
* @param controlPosition - position of the control that is being dragged
* @returns isHorizontal, isVertical, affectsX, affectsY,
*/
export function getControlDirection(controlPosition: XYResizerControlPosition) {
export function getControlDirection(controlPosition: ControlPosition) {
const isHorizontal = controlPosition.includes('right') || controlPosition.includes('left');
const isVertical = controlPosition.includes('bottom') || controlPosition.includes('top');
const affectsX = controlPosition.includes('left');