From 4a1d5be83155a5f9c86985c4aeed6f28483ee245 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 8 Jan 2024 15:37:34 +0100 Subject: [PATCH] extract all logic to system --- packages/react/package.json | 4 - .../NodeResizer/ResizeControl.tsx | 189 +++++----------- .../NodeResizer/types.ts | 15 +- packages/svelte/package.json | 6 +- .../plugins/NodeResizer/ResizeControl.svelte | 208 ++++++------------ packages/system/src/xyresizer/XYResizer.ts | 199 +++++++++++++++++ packages/system/src/xyresizer/index.ts | 2 +- packages/system/src/xyresizer/types.ts | 10 +- pnpm-lock.yaml | 147 +++++++++---- 9 files changed, 452 insertions(+), 328 deletions(-) create mode 100644 packages/system/src/xyresizer/XYResizer.ts diff --git a/packages/react/package.json b/packages/react/package.json index fbc80b3b..43f02466 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -49,12 +49,8 @@ }, "dependencies": { "@types/d3": "^7.4.0", - "@types/d3-drag": "^3.0.1", - "@types/d3-selection": "^3.0.3", "@xyflow/system": "workspace:*", "classcat": "^5.0.3", - "d3-drag": "^3.0.0", - "d3-selection": "^3.0.0", "zustand": "^4.4.0" }, "peerDependencies": { diff --git a/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx index 14520c23..f62db5dc 100644 --- a/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx +++ b/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx @@ -1,28 +1,11 @@ import { useRef, useEffect, memo } from 'react'; import cc from 'classcat'; -import { drag } from 'd3-drag'; -import { select } from 'd3-selection'; -import { - getPointerPosition, - getControlDirection, - getDimensionsAfterResize, - getPositionAfterResize, -} from '@xyflow/system'; - +import { XYResizerInstance, XYResizer, XYResizeChange } from '@xyflow/system'; +import { ResizeControlVariant } 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 } from './types'; -import { getResizeDirection, ResizeControlVariant } from '@xyflow/system'; - -const initPrevValues = { width: 0, height: 0, x: 0, y: 0 }; - -const initStartValues = { - ...initPrevValues, - pointerX: 0, - pointerY: 0, - aspectRatio: 1, -}; +import { type ResizeControlProps, type ResizeControlLineProps } from './types'; function ResizeControl({ nodeId, @@ -46,146 +29,93 @@ function ResizeControl({ const id = typeof nodeId === 'string' ? nodeId : contextNodeId; const store = useStoreApi(); const resizeControlRef = useRef(null); - const startValues = useRef(initStartValues); - const prevValues = useRef(initPrevValues); const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'; const controlPosition = position ?? defaultPosition; + const resizer = useRef(null); + useEffect(() => { if (!resizeControlRef.current || !id) { return; } - const selection = select(resizeControlRef.current); + if (!resizer.current) { + resizer.current = XYResizer({ + domNode: resizeControlRef.current, + nodeId: id, + getStoreItems: () => { + const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState(); + return { + nodeLookup, + transform, + snapGrid, + snapToGrid, + }; + }, + onChange: (change: XYResizeChange) => { + const { triggerNodeChanges } = store.getState(); - const controlDirection = getControlDirection(controlPosition); - - const dragHandler = drag() - .on('start', (event: ResizeDragEvent) => { - const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState(); - const node = nodeLookup.get(id); - const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid }); - - prevValues.current = { - width: node?.computed?.width ?? 0, - height: node?.computed?.height ?? 0, - x: node?.position.x ?? 0, - y: node?.position.y ?? 0, - }; - - startValues.current = { - ...prevValues.current, - pointerX: xSnapped, - pointerY: ySnapped, - aspectRatio: prevValues.current.width / prevValues.current.height, - }; - - onResizeStart?.(event, { ...prevValues.current }); - }) - .on('drag', (event: ResizeDragEvent) => { - const { nodeLookup, transform, snapGrid, snapToGrid, triggerNodeChanges } = store.getState(); - const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid }); - const node = nodeLookup.get(id); - - if (node) { const changes: NodeChange[] = []; - const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current; + if (change.isXPosChange || change.isYPosChange) { + const positionChange: NodePositionChange = { + id, + type: 'position', + position: { + x: change.x, + y: change.y, + }, + }; - const { width, height } = getDimensionsAfterResize( - startValues.current, - controlDirection, - pointerPosition, - { minWidth, minHeight, maxWidth, maxHeight }, - keepAspectRatio - ); - - const isWidthChange = width !== prevWidth; - const isHeightChange = height !== prevHeight; - - if (controlDirection.affectsX || controlDirection.affectsY) { - const { x, y } = getPositionAfterResize(startValues.current, controlDirection, width, height); - - // only transform the node if the width or height changes - const isXPosChange = x !== prevX && isWidthChange; - const isYPosChange = y !== prevY && isHeightChange; - - if (isXPosChange || isYPosChange) { - const positionChange: NodePositionChange = { - id: node.id, - type: 'position', - position: { - x: isXPosChange ? x : prevX, - y: isYPosChange ? y : prevY, - }, - }; - - changes.push(positionChange); - prevValues.current.x = positionChange.position!.x; - prevValues.current.y = positionChange.position!.y; - } + changes.push(positionChange); } - if (isWidthChange || isHeightChange) { + if (change.isWidthChange || change.isHeightChange) { const dimensionChange: NodeDimensionChange = { - id: id, + id, type: 'dimensions', updateStyle: true, resizing: true, dimensions: { - width: width, - height: height, + width: change.width, + height: change.height, }, }; changes.push(dimensionChange); - prevValues.current.width = width; - prevValues.current.height = height; } - - if (changes.length === 0) { - return; - } - - const direction = getResizeDirection({ - width: prevValues.current.width, - prevWidth, - height: prevValues.current.height, - prevHeight, - affectsX: controlDirection.affectsX, - affectsY: controlDirection.affectsY, - }); - - const nextValues = { ...prevValues.current, direction }; - - const callResize = shouldResize?.(event, nextValues); - - if (callResize === false) { - return; - } - - onResize?.(event, nextValues); triggerNodeChanges(changes); - } - }) - .on('end', (event: ResizeDragEvent) => { - const dimensionChange: NodeDimensionChange = { - id: id, - type: 'dimensions', - resizing: false, - }; - - onResizeEnd?.(event, { ...prevValues.current }); - store.getState().triggerNodeChanges([dimensionChange]); + }, + onEnd: () => { + const dimensionChange: NodeDimensionChange = { + id: id, + type: 'dimensions', + resizing: false, + }; + store.getState().triggerNodeChanges([dimensionChange]); + }, }); + } - selection.call(dragHandler); + resizer.current.update({ + controlPosition, + boundries: { + minWidth, + minHeight, + maxWidth, + maxHeight, + }, + keepAspectRatio, + onResizeStart, + onResize, + onResizeEnd, + shouldResize, + }); return () => { - selection.on('.drag', null); + resizer.current?.destroy(); }; }, [ - id, controlPosition, minWidth, minHeight, @@ -195,6 +125,7 @@ function ResizeControl({ onResizeStart, onResize, onResizeEnd, + shouldResize, ]); const positionClassNames = controlPosition.split('-'); diff --git a/packages/react/src/additional-components/NodeResizer/types.ts b/packages/react/src/additional-components/NodeResizer/types.ts index ce2a3b59..c0287e3f 100644 --- a/packages/react/src/additional-components/NodeResizer/types.ts +++ b/packages/react/src/additional-components/NodeResizer/types.ts @@ -1,21 +1,14 @@ import type { CSSProperties, ReactNode } from 'react'; -import type { D3DragEvent, SubjectPosition } from 'd3-drag'; import type { - XYResizeParams, - XYResizeParamsWithDirection, XYResizeControlPosition, XYResizeControlLinePosition, ResizeControlVariant, + ShouldResize, + OnResizeStart, + OnResize, + OnResizeEnd, } from '@xyflow/system'; -type OnResizeHandler = (event: ResizeDragEvent, params: Params) => Result; -export type ResizeDragEvent = D3DragEvent; - -export type ShouldResize = OnResizeHandler; -export type OnResizeStart = OnResizeHandler; -export type OnResize = OnResizeHandler; -export type OnResizeEnd = OnResizeHandler; - export type NodeResizerProps = { nodeId?: string; color?: string; diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 3fe26160..6ea20c87 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -42,12 +42,8 @@ }, "dependencies": { "@svelte-put/shortcut": "^3.1.0", - "@types/d3-drag": "^3.0.1", - "@types/d3-selection": "^3.0.3", "@xyflow/system": "workspace:*", - "classcat": "^5.0.4", - "d3-drag": "^3.0.0", - "d3-selection": "^3.0.0" + "classcat": "^5.0.4" }, "devDependencies": { "@sveltejs/adapter-auto": "^2.1.0", diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte index 621356e5..7b93d766 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte +++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte @@ -1,17 +1,14 @@
{ + nodeLookup: NodeLookup; + transform: Transform; + snapGrid?: [number, number]; + snapToGrid: boolean; + }; + onChange: (changes: XYResizeChange) => void; + onEnd?: () => void; +}; + +type XYResizerUpdateParams = { + controlPosition: XYResizeControlPosition; + boundries: { + minWidth: number; + minHeight: number; + maxWidth: number; + maxHeight: number; + }; + keepAspectRatio: boolean; + onResizeStart: OnResizeStart | undefined; + onResize: OnResize | undefined; + onResizeEnd: OnResizeEnd | undefined; + shouldResize: ShouldResize | undefined; +}; + +export type XYResizerInstance = { + update: (params: XYResizerUpdateParams) => void; + destroy: () => void; +}; + +export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResizerParams): XYResizerInstance { + const selection = select(domNode); + + function update({ + controlPosition, + boundries, + keepAspectRatio, + onResizeStart, + onResize, + onResizeEnd, + shouldResize, + }: XYResizerUpdateParams) { + console.log('updated'); + let prevValues = { ...initPrevValues }; + let startValues = { ...initStartValues }; + + const controlDirection = getControlDirection(controlPosition); + + const dragHandler = drag() + .on('start', (event: ResizeDragEvent) => { + const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems(); + const node = nodeLookup.get(nodeId); + const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid }); + + prevValues = { + width: node?.computed?.width ?? 0, + height: node?.computed?.height ?? 0, + x: node?.position.x ?? 0, + y: node?.position.y ?? 0, + }; + + startValues = { + ...prevValues, + pointerX: xSnapped, + pointerY: ySnapped, + aspectRatio: prevValues.width / prevValues.height, + }; + + onResizeStart?.(event, { ...prevValues }); + }) + .on('drag', (event: ResizeDragEvent) => { + const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems(); + const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid }); + const node = nodeLookup.get(nodeId); + + if (node) { + const change = { ...initChange }; + + const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues; + + const { width, height } = getDimensionsAfterResize( + startValues, + controlDirection, + pointerPosition, + boundries, + keepAspectRatio + ); + + const isWidthChange = width !== prevWidth; + const isHeightChange = height !== prevHeight; + + if (controlDirection.affectsX || controlDirection.affectsY) { + const { x, y } = getPositionAfterResize(startValues, controlDirection, width, height); + + // only transform the node if the width or height changes + const isXPosChange = x !== prevX && isWidthChange; + const isYPosChange = y !== prevY && isHeightChange; + + if (isXPosChange || isYPosChange) { + change.isXPosChange = isXPosChange; + change.isYPosChange = isYPosChange; + change.x = isXPosChange ? x : prevX; + change.y = isYPosChange ? y : prevY; + + prevValues.x = change.x; + prevValues.y = change.y; + } + } + + if (isWidthChange || isHeightChange) { + change.isWidthChange = isWidthChange; + change.isHeightChange = isHeightChange; + change.width = width; + change.height = height; + prevValues.width = width; + prevValues.height = height; + } + + if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) { + return; + } + + const direction = getResizeDirection({ + width: prevValues.width, + prevWidth, + height: prevValues.height, + prevHeight, + affectsX: controlDirection.affectsX, + affectsY: controlDirection.affectsY, + }); + + const nextValues = { ...prevValues, direction }; + + const callResize = shouldResize?.(event, nextValues); + + if (callResize === false) { + return; + } + + onResize?.(event, nextValues); + onChange(change); + } + }) + .on('end', (event: ResizeDragEvent) => { + onResizeEnd?.(event, { ...prevValues }); + }); + selection.call(dragHandler); + } + function destroy() { + selection.on('.drag', null); + } + + return { + update, + destroy, + }; +} diff --git a/packages/system/src/xyresizer/index.ts b/packages/system/src/xyresizer/index.ts index 6d5a6ef4..8d03f904 100644 --- a/packages/system/src/xyresizer/index.ts +++ b/packages/system/src/xyresizer/index.ts @@ -1,2 +1,2 @@ export * from './types'; -export * from './utils'; +export * from './XYResizer'; diff --git a/packages/system/src/xyresizer/types.ts b/packages/system/src/xyresizer/types.ts index bf1ca556..9a3272d8 100644 --- a/packages/system/src/xyresizer/types.ts +++ b/packages/system/src/xyresizer/types.ts @@ -1,4 +1,4 @@ -export type { D3DragEvent, SubjectPosition } from 'd3-drag'; +import type { D3DragEvent, SubjectPosition } from 'd3-drag'; export type XYResizeParams = { x: number; @@ -32,3 +32,11 @@ export const XY_RESIZER_HANDLE_CONTROLS: XYResizeControlPosition[] = [ 'bottom-right', ]; export const XY_RESIZER_LINE_CONTROLS: XYResizeControlLinePosition[] = ['top', 'right', 'bottom', 'left']; + +type OnResizeHandler = (event: ResizeDragEvent, params: Params) => Result; +export type ResizeDragEvent = D3DragEvent; + +export type ShouldResize = OnResizeHandler; +export type OnResizeStart = OnResizeHandler; +export type OnResize = OnResizeHandler; +export type OnResizeEnd = OnResizeHandler; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0ab9ea0c..888ca119 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -208,24 +208,12 @@ importers: '@types/d3': specifier: ^7.4.0 version: 7.4.0 - '@types/d3-drag': - specifier: ^3.0.1 - version: 3.0.1 - '@types/d3-selection': - specifier: ^3.0.3 - version: 3.0.3 '@xyflow/system': specifier: workspace:* version: link:../system classcat: specifier: ^5.0.3 version: 5.0.4 - d3-drag: - specifier: ^3.0.0 - version: 3.0.0 - d3-selection: - specifier: ^3.0.0 - version: 3.0.0 react-dom: specifier: '>=17' version: 18.2.0(react@18.2.0) @@ -287,31 +275,19 @@ importers: '@svelte-put/shortcut': specifier: ^3.1.0 version: 3.1.0 - '@types/d3-drag': - specifier: ^3.0.1 - version: 3.0.1 - '@types/d3-selection': - specifier: ^3.0.3 - version: 3.0.3 '@xyflow/system': specifier: workspace:* version: link:../system classcat: specifier: ^5.0.4 version: 5.0.4 - d3-drag: - specifier: ^3.0.0 - version: 3.0.0 - d3-selection: - specifier: ^3.0.0 - version: 3.0.0 devDependencies: '@sveltejs/adapter-auto': specifier: ^2.1.0 version: 2.1.0(@sveltejs/kit@1.22.6) '@sveltejs/kit': specifier: ^1.22.6 - version: 1.22.6(svelte@4.2.1)(vite@4.5.0) + version: 1.22.6(svelte@4.2.1)(vite@4.5.1) '@sveltejs/package': specifier: ^2.2.1 version: 2.2.1(svelte@4.2.1)(typescript@5.1.3) @@ -1656,7 +1632,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 espree: 9.6.1 globals: 13.23.0 ignore: 5.2.4 @@ -1714,7 +1690,7 @@ packages: engines: {node: '>=10.10.0'} dependencies: '@humanwhocodes/object-schema': 2.0.1 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -1980,7 +1956,7 @@ packages: peerDependencies: '@sveltejs/kit': ^1.0.0 dependencies: - '@sveltejs/kit': 1.22.6(svelte@4.2.1)(vite@4.5.0) + '@sveltejs/kit': 1.22.6(svelte@4.2.1)(vite@4.5.1) import-meta-resolve: 3.0.0 dev: true @@ -1993,7 +1969,7 @@ packages: import-meta-resolve: 4.0.0 dev: true - /@sveltejs/kit@1.22.6(svelte@4.2.1)(vite@4.5.0): + /@sveltejs/kit@1.22.6(svelte@4.2.1)(vite@4.5.1): resolution: {integrity: sha512-SDKxI/QpsReCwIn5czjT53fKlPBybbmMk67d317gUqfeORroBAFN1Z6s/x0E1JYi+04i7kKllS+Sz9wVfmUkAQ==} engines: {node: ^16.14 || >=18} hasBin: true @@ -2002,7 +1978,7 @@ packages: svelte: ^3.54.0 || ^4.0.0-next.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte': 2.4.6(svelte@4.2.1)(vite@4.5.0) + '@sveltejs/vite-plugin-svelte': 2.4.6(svelte@4.2.1)(vite@4.5.1) '@types/cookie': 0.5.3 cookie: 0.5.0 devalue: 4.3.2 @@ -2015,7 +1991,7 @@ packages: sirv: 2.0.3 svelte: 4.2.1 undici: 5.23.0 - vite: 4.5.0(@types/node@18.7.16) + vite: 4.5.1 transitivePeerDependencies: - supports-color dev: true @@ -2079,6 +2055,23 @@ packages: vite: 4.5.0(@types/node@18.7.16) transitivePeerDependencies: - supports-color + dev: false + + /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.4.6)(svelte@4.2.1)(vite@4.5.1): + resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==} + engines: {node: ^14.18.0 || >= 16} + peerDependencies: + '@sveltejs/vite-plugin-svelte': ^2.2.0 + svelte: ^3.54.0 || ^4.0.0 + vite: ^4.0.0 + dependencies: + '@sveltejs/vite-plugin-svelte': 2.4.6(svelte@4.2.1)(vite@4.5.1) + debug: 4.3.4 + svelte: 4.2.1 + vite: 4.5.1 + transitivePeerDependencies: + - supports-color + dev: true /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.4.6)(svelte@4.2.2)(vite@4.5.0): resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==} @@ -2114,6 +2107,27 @@ packages: vitefu: 0.2.5(vite@4.5.0) transitivePeerDependencies: - supports-color + dev: false + + /@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.1)(vite@4.5.1): + resolution: {integrity: sha512-zO79p0+DZnXPnF0ltIigWDx/ux7Ni+HRaFOw720Qeivc1azFUrJxTl0OryXVibYNx1hCboGia1NRV3x8RNv4cA==} + engines: {node: ^14.18.0 || >= 16} + peerDependencies: + svelte: ^3.54.0 || ^4.0.0 + vite: ^4.0.0 + dependencies: + '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.4.6)(svelte@4.2.1)(vite@4.5.1) + debug: 4.3.4 + deepmerge: 4.3.1 + kleur: 4.1.5 + magic-string: 0.30.5 + svelte: 4.2.1 + svelte-hmr: 0.15.3(svelte@4.2.1) + vite: 4.5.1 + vitefu: 0.2.5(vite@4.5.1) + transitivePeerDependencies: + - supports-color + dev: true /@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.2)(vite@4.5.0): resolution: {integrity: sha512-zO79p0+DZnXPnF0ltIigWDx/ux7Ni+HRaFOw720Qeivc1azFUrJxTl0OryXVibYNx1hCboGia1NRV3x8RNv4cA==} @@ -2691,7 +2705,7 @@ packages: '@typescript-eslint/scope-manager': 5.60.0 '@typescript-eslint/type-utils': 5.60.0(eslint@8.43.0)(typescript@5.1.3) '@typescript-eslint/utils': 5.60.0(eslint@8.43.0)(typescript@5.1.3) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.43.0 grapheme-splitter: 1.0.4 ignore: 5.2.4 @@ -2774,7 +2788,7 @@ packages: '@typescript-eslint/scope-manager': 5.60.0 '@typescript-eslint/types': 5.60.0 '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.1.3) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.43.0 typescript: 5.1.3 transitivePeerDependencies: @@ -2859,7 +2873,7 @@ packages: dependencies: '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.1.3) '@typescript-eslint/utils': 5.60.0(eslint@8.43.0)(typescript@5.1.3) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.43.0 tsutils: 3.21.0(typescript@5.1.3) typescript: 5.1.3 @@ -2933,7 +2947,7 @@ packages: dependencies: '@typescript-eslint/types': 5.60.0 '@typescript-eslint/visitor-keys': 5.60.0 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 semver: 7.5.4 @@ -4260,6 +4274,18 @@ packages: ms: 2.1.3 supports-color: 8.1.1 + /debug@4.3.4: + resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.1.2 + dev: true + /debug@4.3.4(supports-color@8.1.1): resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} @@ -4768,7 +4794,7 @@ packages: dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0) '@jridgewell/sourcemap-codec': 1.4.15 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.43.0 esutils: 2.0.3 known-css-properties: 0.27.0 @@ -4858,7 +4884,7 @@ packages: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 @@ -7872,7 +7898,6 @@ packages: nanoid: 3.3.7 picocolors: 1.0.0 source-map-js: 1.0.2 - dev: false /prebuild-install@7.1.1: resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==} @@ -9943,6 +9968,41 @@ packages: optionalDependencies: fsevents: 2.3.3 + /vite@4.5.1: + resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.18.20 + postcss: 8.4.32 + rollup: 3.29.4 + optionalDependencies: + fsevents: 2.3.3 + dev: true + /vite@4.5.1(@types/node@18.7.16): resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==} engines: {node: ^14.18.0 || >=16.0.0} @@ -9989,6 +10049,17 @@ packages: dependencies: vite: 4.5.0(@types/node@18.7.16) + /vitefu@0.2.5(vite@4.5.1): + resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==} + peerDependencies: + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + peerDependenciesMeta: + vite: + optional: true + dependencies: + vite: 4.5.1 + dev: true + /vscode-oniguruma@1.7.0: resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==} dev: false