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

cleaned up some things

Browse Source
This commit is contained in:
peterkogo
2024-01-08 16:41:00 +01:00
parent 4a1d5be831
commit ec98b724b1
7 changed files with 83 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/additional-components/NodeResizer/NodeResizer.tsx
+8 -8
View File
@@ -1,6 +1,6 @@
import ResizeControl from './ResizeControl';
import { NodeResizerProps } from './types';
import { XY_RESIZER_HANDLE_CONTROLS, XY_RESIZER_LINE_CONTROLS, ResizeControlVariant } from '@xyflow/system';
import { ResizerControlVariant, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS } from '@xyflow/system';
export default function NodeResizer({
nodeId,
@@ -26,14 +26,14 @@ export default function NodeResizer({
return (
<>
{XY_RESIZER_LINE_CONTROLS.map((c) => (
{XY_RESIZER_LINE_POSITIONS.map((position) => (
<ResizeControl
key={c}
key={position}
className={lineClassName}
style={lineStyle}
nodeId={nodeId}
position={c}
variant={ResizeControlVariant.Line}
position={position}
variant={ResizerControlVariant.Line}
color={color}
minWidth={minWidth}
minHeight={minHeight}
@@ -46,13 +46,13 @@ export default function NodeResizer({
onResizeEnd={onResizeEnd}
/>
))}
{XY_RESIZER_HANDLE_CONTROLS.map((c) => (
{XY_RESIZER_HANDLE_POSITIONS.map((position) => (
<ResizeControl
key={c}
key={position}
className={handleClassName}
style={handleStyle}
nodeId={nodeId}
position={c}
position={position}
color={color}
minWidth={minWidth}
minHeight={minHeight}
packages/react/src/additional-components/NodeResizer/ResizeControl.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
import { useRef, useEffect, memo } from 'react';
import cc from 'classcat';
import { XYResizerInstance, XYResizer, XYResizeChange } from '@xyflow/system';
import { ResizeControlVariant } from '@xyflow/system';
import { ResizerControlVariant } from '@xyflow/system';
import { useStoreApi } from '../../hooks/useStore';
import { useNodeId } from '../../contexts/NodeIdContext';
import type { NodeChange, NodeDimensionChange, NodePositionChange } from '../../types';
@@ -10,7 +10,7 @@ import { type ResizeControlProps, type ResizeControlLineProps } from './types';
function ResizeControl({
nodeId,
position,
variant = ResizeControlVariant.Handle,
variant = ResizerControlVariant.Handle,
className,
style = {},
children,
@@ -29,7 +29,7 @@ function ResizeControl({
const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
const store = useStoreApi();
const resizeControlRef = useRef<HTMLDivElement>(null);
const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
const defaultPosition = variant === ResizerControlVariant.Line ? 'right' : 'bottom-right';
const controlPosition = position ?? defaultPosition;
const resizer = useRef<XYResizerInstance | null>(null);
@@ -129,7 +129,7 @@ function ResizeControl({
]);
const positionClassNames = controlPosition.split('-');
const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
const colorStyleProp = variant === ResizerControlVariant.Line ? 'borderColor' : 'backgroundColor';
const controlStyle = color ? { ...style, [colorStyleProp]: color } : style;
return (
@@ -144,7 +144,7 @@ function ResizeControl({
}
export function ResizeControlLine(props: ResizeControlLineProps) {
return <ResizeControl {...props} variant={ResizeControlVariant.Line} />;
return <ResizeControl {...props} variant={ResizerControlVariant.Line} />;
}
export default memo(ResizeControl);
packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte
+8 -8
View File
@@ -2,9 +2,9 @@
import ResizeControl from './ResizeControl.svelte';
import type { NodeResizerProps } from './types';
import {
XY_RESIZER_HANDLE_CONTROLS,
XY_RESIZER_LINE_CONTROLS,
ResizeControlVariant
ResizerControlVariant,
XY_RESIZER_HANDLE_POSITIONS,
XY_RESIZER_LINE_POSITIONS
} from '@xyflow/system';
type $$Props = NodeResizerProps;
@@ -33,13 +33,13 @@
</script>
{#if isVisible}
{#each XY_RESIZER_LINE_CONTROLS as c (c)}
{#each XY_RESIZER_LINE_POSITIONS as position (position)}
<ResizeControl
class={lineClass}
style={lineStyle}
{nodeId}
position={c}
variant={ResizeControlVariant.Line}
{position}
variant={ResizerControlVariant.Line}
{color}
minWidth={_minWidth}
minHeight={_minHeight}
@@ -52,12 +52,12 @@
{onResizeEnd}
/>
{/each}
{#each XY_RESIZER_HANDLE_CONTROLS as c (c)}
{#each XY_RESIZER_HANDLE_POSITIONS as position (position)}
<ResizeControl
class={handleClass}
style={handleStyle}
{nodeId}
position={c}
{position}
{color}
minWidth={_minWidth}
minHeight={_minHeight}
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+47 -63
View File
@@ -1,11 +1,10 @@
<script lang="ts">
import { getContext, onMount } from 'svelte';
import { get } from 'svelte/store';
import cc from 'classcat';
import type { ResizeControlProps } from './types';
import {
ResizeControlVariant,
type XYResizeControlPosition,
ResizerControlVariant,
type XYResizerControlPosition,
type XYResizerInstance,
XYResizer,
type XYResizeChange
@@ -16,7 +15,7 @@
export let nodeId: $$Props['nodeId'] = undefined;
export let position: $$Props['position'] = undefined;
export let variant: $$Props['variant'] = ResizeControlVariant.Handle;
export let variant: $$Props['variant'] = ResizerControlVariant.Handle;
export let color: $$Props['color'] = undefined;
export let minWidth: $$Props['minWidth'] = 10;
$: _minWidth = minWidth ?? 10;
@@ -44,79 +43,64 @@
let resizer: XYResizerInstance | null = null;
$: defaultPosition = (
variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'
) as XYResizeControlPosition;
variant === ResizerControlVariant.Line ? 'right' : 'bottom-right'
) as XYResizerControlPosition;
$: controlPosition = position ?? defaultPosition;
$: positionClassNames = controlPosition.split('-');
$: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
$: colorStyleProp = variant === ResizerControlVariant.Line ? 'border-color' : 'background-color';
$: _style = style ?? '';
$: controlStyle = !!color ? `${_style} ${colorStyleProp}: ${color};` : _style;
function updateNodes() {
$nodes = $nodes;
}
onMount(() => {
if (resizeControlRef) {
resizer = XYResizer({
domNode: resizeControlRef,
nodeId: id,
getStoreItems: () => {
return {
nodeLookup: $nodeLookup,
transform: [$viewport.x, $viewport.y, $viewport.zoom],
snapGrid: $snapGrid ?? undefined,
snapToGrid: !!$snapGrid
};
},
onChange: (change: XYResizeChange) => {
const node = $nodeLookup.get(id);
if (node) {
node.height = change.isHeightChange ? change.height : node.height;
node.width = change.isWidthChange ? change.width : node.width;
node.position =
change.isXPosChange || change.isYPosChange
? { x: change.x, y: change.y }
: node.position;
$nodes = $nodes;
}
}
});
}
return () => {
resizer?.destroy();
};
});
$: {
if (resizeControlRef) {
if (!resizer) {
const _snapGrid = get(snapGrid);
const _viewport = get(viewport);
resizer = XYResizer({
domNode: resizeControlRef,
nodeId: id,
getStoreItems: () => {
return {
nodeLookup: get(nodeLookup),
transform: [_viewport.x, _viewport.y, _viewport.zoom],
snapGrid: _snapGrid ?? undefined,
snapToGrid: !!_snapGrid
};
},
onChange: (change: XYResizeChange) => {
const _nodeLookup = get(nodeLookup);
const node = _nodeLookup.get(id);
if (node) {
if (change.isHeightChange) {
node.height = change.height;
}
if (change.isWidthChange) {
node.width = change.width;
}
if (change.isXPosChange || change.isYPosChange) {
node.position = { x: change.x, y: change.y };
}
// This needs to be a function to prevent unnecessary updates
updateNodes();
}
}
});
}
resizer.update({
controlPosition,
boundries: {
minWidth: _minWidth,
minHeight: _minHeight,
maxWidth: _maxWidth,
maxHeight: _maxHeight
},
keepAspectRatio: !!keepAspectRatio,
onResizeStart,
onResize,
onResizeEnd,
shouldResize
});
}
resizer?.update({
controlPosition,
boundries: {
minWidth: _minWidth,
minHeight: _minHeight,
maxWidth: _maxWidth,
maxHeight: _maxHeight
},
keepAspectRatio: !!keepAspectRatio,
onResizeStart,
onResize,
onResizeEnd,
shouldResize
});
}
</script>
packages/system/src/xyresizer/XYResizer.ts
+2 -2
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, XYResizeControlPosition } from './types';
import { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, XYResizerControlPosition } from './types';
import { getControlDirection, getDimensionsAfterResize, getPositionAfterResize, getResizeDirection } from './utils';
import { getPointerPosition } from '../utils';
@@ -51,7 +51,7 @@ type XYResizerParams = {
};
type XYResizerUpdateParams = {
controlPosition: XYResizeControlPosition;
controlPosition: XYResizerControlPosition;
boundries: {
minWidth: number;
minHeight: number;
packages/system/src/xyresizer/types.ts
+11 -11
View File
@@ -1,42 +1,42 @@
import type { D3DragEvent, SubjectPosition } from 'd3-drag';
export type XYResizeParams = {
export type XYResizerParams = {
x: number;
y: number;
width: number;
height: number;
};
export type XYResizeParamsWithDirection = XYResizeParams & {
export type XYResizerParamsWithDirection = XYResizerParams & {
direction: number[];
};
export type XYResizeControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
export type XYResizerControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
export type XYResizeControlPosition =
| XYResizeControlLinePosition
export type XYResizerControlPosition =
| XYResizerControlLinePosition
| 'top-left'
| 'top-right'
| 'bottom-left'
| 'bottom-right';
export enum ResizeControlVariant {
export enum ResizerControlVariant {
Line = 'line',
Handle = 'handle',
}
export const XY_RESIZER_HANDLE_CONTROLS: XYResizeControlPosition[] = [
export const XY_RESIZER_HANDLE_POSITIONS: XYResizerControlPosition[] = [
'top-left',
'top-right',
'bottom-left',
'bottom-right',
];
export const XY_RESIZER_LINE_CONTROLS: XYResizeControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
export const XY_RESIZER_LINE_POSITIONS: XYResizerControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
type OnResizeHandler<Params = XYResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
type OnResizeHandler<Params = XYResizerParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
export type ShouldResize = OnResizeHandler<XYResizeParamsWithDirection, boolean>;
export type ShouldResize = OnResizeHandler<XYResizerParamsWithDirection, boolean>;
export type OnResizeStart = OnResizeHandler;
export type OnResize = OnResizeHandler<XYResizeParamsWithDirection>;
export type OnResize = OnResizeHandler<XYResizerParamsWithDirection>;
export type OnResizeEnd = OnResizeHandler;
packages/system/src/xyresizer/utils.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { clamp, getPointerPosition } from '../utils';
import { XYResizeControlPosition } from './types';
import { XYResizerControlPosition } 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: XYResizeControlPosition) {
export function getControlDirection(controlPosition: XYResizerControlPosition) {
const isHorizontal = controlPosition.includes('right') || controlPosition.includes('left');
const isVertical = controlPosition.includes('bottom') || controlPosition.includes('top');
const affectsX = controlPosition.includes('left');