Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@xyflow/svelte
Advanced tools
@xyflow/svelte - npm Package Compare versions
Comparing version 0.0.2 to 0.0.3
@@ -15,2 +15,3 @@ import { SvelteComponentTyped } from "svelte"; | ||
| connectable?: boolean | undefined; | ||
| dragHandle?: string | undefined; | ||
| width?: number | null | undefined; | ||
@@ -25,2 +26,3 @@ height?: number | null | undefined; | ||
| isParent?: boolean | undefined; | ||
| zIndex: number; | ||
| }; | ||
@@ -27,0 +29,0 @@ events: { |
| import type { XYPosition } from '@xyflow/system'; | ||
| import type { Node } from '../../types'; | ||
| export type NodeWrapperProps = Pick<Node, 'id' | 'class' | 'connectable' | 'data' | 'draggable' | 'dragging' | 'positionAbsolute' | 'selected' | 'selectable' | 'style' | 'type' | 'width' | 'height' | 'sourcePosition' | 'targetPosition'> & { | ||
| export type NodeWrapperProps = Pick<Node, 'id' | 'class' | 'connectable' | 'data' | 'draggable' | 'dragging' | 'positionAbsolute' | 'selected' | 'selectable' | 'style' | 'type' | 'width' | 'height' | 'sourcePosition' | 'targetPosition' | 'dragHandle'> & { | ||
| positionOrigin?: XYPosition; | ||
@@ -8,2 +8,3 @@ 'on:nodeclick'?: (event: MouseEvent) => void; | ||
| isParent?: boolean; | ||
| zIndex: number; | ||
| }; |
@@ -118,4 +118,4 @@ import { SvelteComponentTyped } from "svelte"; | ||
| edgeTypes?: import("../..").EdgeTypes | undefined; | ||
| selectionKey?: import("../..").KeyDefinition | undefined; | ||
| deleteKey?: import("../..").KeyDefinition | undefined; | ||
| selectionKey?: import("../../types").KeyDefinition | undefined; | ||
| deleteKey?: import("../../types").KeyDefinition | undefined; | ||
| fitView?: boolean | undefined; | ||
@@ -122,0 +122,0 @@ nodeOrigin?: import("@xyflow/system").NodeOrigin | undefined; |
@@ -52,6 +52,1 @@ import type { DOMAttributes } from 'svelte/elements'; | ||
| }; | ||
| export type SvelteFlowSlots = { | ||
| default: { | ||
| slotValue: string; | ||
| }; | ||
| }; |
@@ -1,3 +0,3 @@ | ||
| import { SvelteFlow } from './container/SvelteFlow'; | ||
| export * from './container/SvelteFlow'; | ||
| export { SvelteFlow } from './container/SvelteFlow'; | ||
| export * from './container/SvelteFlow/types'; | ||
| export * from './container/Panel'; | ||
@@ -11,6 +11,8 @@ export * from './components/SvelteFlowProvider'; | ||
| export * from './plugins/Minimap'; | ||
| export * from './types'; | ||
| export * from './utils'; | ||
| export * from './hooks/useSvelteFlow'; | ||
| export * from '@xyflow/system'; | ||
| export default SvelteFlow; | ||
| export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from './types/edges'; | ||
| export type { HandleComponentProps, FitViewOptions } from './types/general'; | ||
| export type { Node, NodeTypes, DefaultNodeOptions } from './types/nodes'; | ||
| export { type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, type ConnectionStatus, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type IsValidConnection, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeProps, type NodeOrigin, type OnNodeDrag, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent } from '@xyflow/system'; | ||
| export { type GetBezierPathParams, getBezierEdgeCenter, getBezierPath, getEdgeCenter, type GetSmoothStepPathParams, getSmoothStepPath, type GetStraightPathParams, getStraightPath, getTransformForBounds, getRectOfNodes } from '@xyflow/system'; |
@@ -1,3 +0,5 @@ | ||
| import { SvelteFlow } from './container/SvelteFlow'; | ||
| export * from './container/SvelteFlow'; | ||
| // main component | ||
| export { SvelteFlow } from './container/SvelteFlow'; | ||
| export * from './container/SvelteFlow/types'; | ||
| // components | ||
| export * from './container/Panel'; | ||
@@ -8,9 +10,12 @@ export * from './components/SvelteFlowProvider'; | ||
| export * from './components/Handle'; | ||
| // plugins | ||
| export * from './plugins/Controls'; | ||
| export * from './plugins/Background'; | ||
| export * from './plugins/Minimap'; | ||
| export * from './types'; | ||
| // utils | ||
| export * from './utils'; | ||
| export * from './hooks/useSvelteFlow'; | ||
| export * from '@xyflow/system'; | ||
| export default SvelteFlow; | ||
| // system types | ||
| export { ConnectionLineType, MarkerType, ConnectionMode, PanOnScrollMode, SelectionMode, Position } from '@xyflow/system'; | ||
| // system utils | ||
| export { getBezierEdgeCenter, getBezierPath, getEdgeCenter, getSmoothStepPath, getStraightPath, getTransformForBounds, getRectOfNodes } from '@xyflow/system'; |
280
package.json
| { | ||
| "name": "@xyflow/svelte", | ||
| "version": "0.0.2", | ||
| "version": "0.0.3", | ||
| "description": "A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.", | ||
@@ -17,4 +17,6 @@ "keywords": [ | ||
| "exports": { | ||
| "./package.json": "./package.json", | ||
| ".": "./dist/index.js" | ||
| ".": { | ||
| "types": "./dist/index.d.ts", | ||
| "svelte": "./dist/index.js" | ||
| } | ||
| }, | ||
@@ -52,271 +54,2 @@ "publishConfig": { | ||
| ], | ||
| "svelte": "./dist/index.js", | ||
| "typesVersions": { | ||
| ">4.0": { | ||
| "actions/drag": [ | ||
| "./dist/actions/drag/index.d.ts" | ||
| ], | ||
| "actions/drag/utils": [ | ||
| "./dist/actions/drag/utils.d.ts" | ||
| ], | ||
| "actions/portal": [ | ||
| "./dist/actions/portal/index.d.ts" | ||
| ], | ||
| "actions/zoom": [ | ||
| "./dist/actions/zoom/index.d.ts" | ||
| ], | ||
| "components/Attribution/Attribution.svelte": [ | ||
| "./dist/components/Attribution/Attribution.svelte.d.ts" | ||
| ], | ||
| "components/Attribution": [ | ||
| "./dist/components/Attribution/index.d.ts" | ||
| ], | ||
| "components/Attribution/types": [ | ||
| "./dist/components/Attribution/types.d.ts" | ||
| ], | ||
| "components/BaseEdge/BaseEdge.svelte": [ | ||
| "./dist/components/BaseEdge/BaseEdge.svelte.d.ts" | ||
| ], | ||
| "components/BaseEdge": [ | ||
| "./dist/components/BaseEdge/index.d.ts" | ||
| ], | ||
| "components/BaseEdge/types": [ | ||
| "./dist/components/BaseEdge/types.d.ts" | ||
| ], | ||
| "components/ConnectionLine/ConnectionLine.svelte": [ | ||
| "./dist/components/ConnectionLine/ConnectionLine.svelte.d.ts" | ||
| ], | ||
| "components/ConnectionLine": [ | ||
| "./dist/components/ConnectionLine/index.d.ts" | ||
| ], | ||
| "components/EdgeLabelRenderer/EdgeLabelRenderer.svelte": [ | ||
| "./dist/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte.d.ts" | ||
| ], | ||
| "components/EdgeLabelRenderer": [ | ||
| "./dist/components/EdgeLabelRenderer/index.d.ts" | ||
| ], | ||
| "components/EdgeWrapper/EdgeWrapper.svelte": [ | ||
| "./dist/components/EdgeWrapper/EdgeWrapper.svelte.d.ts" | ||
| ], | ||
| "components/EdgeWrapper": [ | ||
| "./dist/components/EdgeWrapper/index.d.ts" | ||
| ], | ||
| "components/Handle/Handle.svelte": [ | ||
| "./dist/components/Handle/Handle.svelte.d.ts" | ||
| ], | ||
| "components/Handle/handler": [ | ||
| "./dist/components/Handle/handler.d.ts" | ||
| ], | ||
| "components/Handle": [ | ||
| "./dist/components/Handle/index.d.ts" | ||
| ], | ||
| "components/Handle/utils": [ | ||
| "./dist/components/Handle/utils.d.ts" | ||
| ], | ||
| "components/KeyHandler/KeyHandler.svelte": [ | ||
| "./dist/components/KeyHandler/KeyHandler.svelte.d.ts" | ||
| ], | ||
| "components/KeyHandler": [ | ||
| "./dist/components/KeyHandler/index.d.ts" | ||
| ], | ||
| "components/KeyHandler/types": [ | ||
| "./dist/components/KeyHandler/types.d.ts" | ||
| ], | ||
| "components/NodeSelection/NodeSelection.svelte": [ | ||
| "./dist/components/NodeSelection/NodeSelection.svelte.d.ts" | ||
| ], | ||
| "components/NodeSelection": [ | ||
| "./dist/components/NodeSelection/index.d.ts" | ||
| ], | ||
| "components/NodeWrapper/NodeWrapper.svelte": [ | ||
| "./dist/components/NodeWrapper/NodeWrapper.svelte.d.ts" | ||
| ], | ||
| "components/NodeWrapper": [ | ||
| "./dist/components/NodeWrapper/index.d.ts" | ||
| ], | ||
| "components/NodeWrapper/types": [ | ||
| "./dist/components/NodeWrapper/types.d.ts" | ||
| ], | ||
| "components/Selection/Selection.svelte": [ | ||
| "./dist/components/Selection/Selection.svelte.d.ts" | ||
| ], | ||
| "components/Selection": [ | ||
| "./dist/components/Selection/index.d.ts" | ||
| ], | ||
| "components/SvelteFlowProvider/SvelteFlowProvider.svelte": [ | ||
| "./dist/components/SvelteFlowProvider/SvelteFlowProvider.svelte.d.ts" | ||
| ], | ||
| "components/SvelteFlowProvider": [ | ||
| "./dist/components/SvelteFlowProvider/index.d.ts" | ||
| ], | ||
| "components/SvelteFlowProvider/types": [ | ||
| "./dist/components/SvelteFlowProvider/types.d.ts" | ||
| ], | ||
| "components/UserSelection/UserSelection.svelte": [ | ||
| "./dist/components/UserSelection/UserSelection.svelte.d.ts" | ||
| ], | ||
| "components/UserSelection": [ | ||
| "./dist/components/UserSelection/index.d.ts" | ||
| ], | ||
| "components/edges/BezierEdge.svelte": [ | ||
| "./dist/components/edges/BezierEdge.svelte.d.ts" | ||
| ], | ||
| "components/edges/SmoothStepEdge.svelte": [ | ||
| "./dist/components/edges/SmoothStepEdge.svelte.d.ts" | ||
| ], | ||
| "components/edges/StraightEdge.svelte": [ | ||
| "./dist/components/edges/StraightEdge.svelte.d.ts" | ||
| ], | ||
| "components/nodes/DefaultNode.svelte": [ | ||
| "./dist/components/nodes/DefaultNode.svelte.d.ts" | ||
| ], | ||
| "components/nodes/InputNode.svelte": [ | ||
| "./dist/components/nodes/InputNode.svelte.d.ts" | ||
| ], | ||
| "components/nodes/OutputNode.svelte": [ | ||
| "./dist/components/nodes/OutputNode.svelte.d.ts" | ||
| ], | ||
| "container/EdgeRenderer/EdgeRenderer.svelte": [ | ||
| "./dist/container/EdgeRenderer/EdgeRenderer.svelte.d.ts" | ||
| ], | ||
| "container/EdgeRenderer": [ | ||
| "./dist/container/EdgeRenderer/index.d.ts" | ||
| ], | ||
| "container/EdgeRenderer/utils": [ | ||
| "./dist/container/EdgeRenderer/utils.d.ts" | ||
| ], | ||
| "container/NodeRenderer/NodeRenderer.svelte": [ | ||
| "./dist/container/NodeRenderer/NodeRenderer.svelte.d.ts" | ||
| ], | ||
| "container/NodeRenderer": [ | ||
| "./dist/container/NodeRenderer/index.d.ts" | ||
| ], | ||
| "container/Pane/Pane.svelte": [ | ||
| "./dist/container/Pane/Pane.svelte.d.ts" | ||
| ], | ||
| "container/Pane": [ | ||
| "./dist/container/Pane/index.d.ts" | ||
| ], | ||
| "container/Panel/Panel.svelte": [ | ||
| "./dist/container/Panel/Panel.svelte.d.ts" | ||
| ], | ||
| "container/Panel": [ | ||
| "./dist/container/Panel/index.d.ts" | ||
| ], | ||
| "container/Panel/types": [ | ||
| "./dist/container/Panel/types.d.ts" | ||
| ], | ||
| "container/SvelteFlow/SvelteFlow.svelte": [ | ||
| "./dist/container/SvelteFlow/SvelteFlow.svelte.d.ts" | ||
| ], | ||
| "container/SvelteFlow": [ | ||
| "./dist/container/SvelteFlow/index.d.ts" | ||
| ], | ||
| "container/SvelteFlow/types": [ | ||
| "./dist/container/SvelteFlow/types.d.ts" | ||
| ], | ||
| "container/Viewport/Viewport.svelte": [ | ||
| "./dist/container/Viewport/Viewport.svelte.d.ts" | ||
| ], | ||
| "container/Viewport": [ | ||
| "./dist/container/Viewport/index.d.ts" | ||
| ], | ||
| "container/Zoom/Zoom.svelte": [ | ||
| "./dist/container/Zoom/Zoom.svelte.d.ts" | ||
| ], | ||
| "container/Zoom": [ | ||
| "./dist/container/Zoom/index.d.ts" | ||
| ], | ||
| "hooks/useSvelteFlow": [ | ||
| "./dist/hooks/useSvelteFlow.d.ts" | ||
| ], | ||
| "index": [ | ||
| "./dist/index.d.ts" | ||
| ], | ||
| "plugins/Background/Background.svelte": [ | ||
| "./dist/plugins/Background/Background.svelte.d.ts" | ||
| ], | ||
| "plugins/Background/DotPattern.svelte": [ | ||
| "./dist/plugins/Background/DotPattern.svelte.d.ts" | ||
| ], | ||
| "plugins/Background/LinePattern.svelte": [ | ||
| "./dist/plugins/Background/LinePattern.svelte.d.ts" | ||
| ], | ||
| "plugins/Background": [ | ||
| "./dist/plugins/Background/index.d.ts" | ||
| ], | ||
| "plugins/Background/types": [ | ||
| "./dist/plugins/Background/types.d.ts" | ||
| ], | ||
| "plugins/Controls/ControlButton.svelte": [ | ||
| "./dist/plugins/Controls/ControlButton.svelte.d.ts" | ||
| ], | ||
| "plugins/Controls/Controls.svelte": [ | ||
| "./dist/plugins/Controls/Controls.svelte.d.ts" | ||
| ], | ||
| "plugins/Controls/Icons/Fit.svelte": [ | ||
| "./dist/plugins/Controls/Icons/Fit.svelte.d.ts" | ||
| ], | ||
| "plugins/Controls/Icons/Lock.svelte": [ | ||
| "./dist/plugins/Controls/Icons/Lock.svelte.d.ts" | ||
| ], | ||
| "plugins/Controls/Icons/Minus.svelte": [ | ||
| "./dist/plugins/Controls/Icons/Minus.svelte.d.ts" | ||
| ], | ||
| "plugins/Controls/Icons/Plus.svelte": [ | ||
| "./dist/plugins/Controls/Icons/Plus.svelte.d.ts" | ||
| ], | ||
| "plugins/Controls/Icons/Unlock.svelte": [ | ||
| "./dist/plugins/Controls/Icons/Unlock.svelte.d.ts" | ||
| ], | ||
| "plugins/Controls": [ | ||
| "./dist/plugins/Controls/index.d.ts" | ||
| ], | ||
| "plugins/Controls/types": [ | ||
| "./dist/plugins/Controls/types.d.ts" | ||
| ], | ||
| "plugins/Minimap/Minimap.svelte": [ | ||
| "./dist/plugins/Minimap/Minimap.svelte.d.ts" | ||
| ], | ||
| "plugins/Minimap/MinimapNode.svelte": [ | ||
| "./dist/plugins/Minimap/MinimapNode.svelte.d.ts" | ||
| ], | ||
| "plugins/Minimap": [ | ||
| "./dist/plugins/Minimap/index.d.ts" | ||
| ], | ||
| "plugins/Minimap/types": [ | ||
| "./dist/plugins/Minimap/types.d.ts" | ||
| ], | ||
| "store/connection-path": [ | ||
| "./dist/store/connection-path.d.ts" | ||
| ], | ||
| "store/edges-layouted": [ | ||
| "./dist/store/edges-layouted.d.ts" | ||
| ], | ||
| "store": [ | ||
| "./dist/store/index.d.ts" | ||
| ], | ||
| "store/initial-store": [ | ||
| "./dist/store/initial-store.d.ts" | ||
| ], | ||
| "store/types": [ | ||
| "./dist/store/types.d.ts" | ||
| ], | ||
| "types/edges": [ | ||
| "./dist/types/edges.d.ts" | ||
| ], | ||
| "types/general": [ | ||
| "./dist/types/general.d.ts" | ||
| ], | ||
| "types": [ | ||
| "./dist/types/index.d.ts" | ||
| ], | ||
| "types/nodes": [ | ||
| "./dist/types/nodes.d.ts" | ||
| ], | ||
| "utils": [ | ||
| "./dist/utils/index.d.ts" | ||
| ] | ||
| } | ||
| }, | ||
| "scripts": { | ||
@@ -328,4 +61,5 @@ "dev": "vite dev", | ||
| "lint": "prettier --plugin-search-dir . --check . && eslint .", | ||
| "format": "prettier --plugin-search-dir . --write ." | ||
| "format": "prettier --plugin-search-dir . --write .", | ||
| "typecheck": "pnpm check" | ||
| } | ||
| } |
@@ -18,2 +18,3 @@ # Svelte Flow (alpha) | ||
| We are working on a new website and everything so there are no docs for Svelte Flow yet. Everything is typed, so your IDE should help you a bit and you can also the [React Flow docs](https://reactflow.dev/docs) because the API is very similar. You can also check out the [Svelte Flow examples](/packages/svelte/src/routes) in this repo. | ||
| If you want to start right away you can check out the [Svelte Flow examples Stackblitz project](https://stackblitz.com/edit/svelte-flow-examples?file=src%2Froutes%2Foverview%2F%2Bpage.svelte). | ||
@@ -25,3 +26,4 @@ A basic flow looks like this: | ||
| import { writable } from 'svelte/store'; | ||
| import { SvelteFlow, | ||
| import { | ||
| SvelteFlow, | ||
| SvelteFlowProvider, | ||
@@ -80,2 +82,3 @@ Controls, | ||
| ``` | ||
| ## How to Contribute | ||
@@ -82,0 +85,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.26%
2735
- Number of lines in readme file
- increased by2.88%
107
Worsened metrics
- Total package byte prevSize
- decreased by-3.9%
176796
No dependency changes