@ghchinoy/litflow 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # LitFlow: xyflow + Lit WebComponents
2
2
 
3
+ [![npm version](https://img.shields.io/npm/v/@ghchinoy/litflow.svg)](https://www.npmjs.com/package/@ghchinoy/litflow)
4
+ [![license](https://img.shields.io/npm/l/@ghchinoy/litflow.svg)](https://github.com/ghchinoy/litflow/blob/main/LICENSE)
5
+
3
6
  LitFlow is a demonstration and starter kit for using the [xyflow](https://xyflow.com/) core system with [Lit](https://lit.dev/) WebComponents. It provides a lightweight, framework-agnostic way to build node-based UIs.
4
7
 
5
8
  ## 🚀 Quick Start
@@ -130,9 +133,16 @@ LitFlow leverages `@xyflow/system`, the same headless core that powers React Flo
130
133
  - **Custom Node Support**: Easily build complex nodes with internal state and custom Lit templates.
131
134
 
132
135
  ## 📖 Documentation
133
- - [Lit vs React for xyflow](./LIT_VS_REACT.md): A comparison of using Lit WebComponents vs React for building flow-based UIs.
134
- - [Creating Custom Nodes](./CUSTOM_NODES.md): A primer on building complex, data-driven nodes in LitFlow.
135
- - [GEMINI.md](./GEMINI.md): Project conventions and technical insights for AI agents.
136
+
137
+ Explore our comprehensive documentation following the [Diataxis](https://diataxis.fr/) framework:
138
+
139
+ - **[Tutorials](./docs/src/tutorials/index.md)**: Step-by-step guides to get you started.
140
+ - **[Guides](./docs/src/guides/index.md)**: Practical instructions for common tasks.
141
+ - **[Explanation](./docs/src/explanation/index.md)**: Deep dives into the architecture and concepts.
142
+ - **[Reference](./docs/src/reference/index.md)**: Technical API documentation.
143
+ - **[Examples](./docs/src/examples/index.md)**: Live interactive showcases.
144
+
145
+ - [GEMINI.md](./GEMINI.md): 🤖 Project conventions and technical insights for AI agents.
136
146
 
137
147
  ## 🛠️ Development & Publishing
138
148
 
@@ -160,4 +170,8 @@ The package is published under the `@ghchinoy` scope. To publish a new version:
160
170
  ```
161
171
 
162
172
  ## 🤝 Contributing
163
- This project is an exploration of xyflow's headless capabilities. Feel free to open issues or submit PRs to improve the Lit integration!
173
+ This project is an exploration of xyflow's headless capabilities. Feel free to open issues or submit PRs to improve the Lit integration!
174
+
175
+ ## License
176
+
177
+ LitFlow is [MIT licensed](./LICENSE).
package/dist/index.d.ts CHANGED
@@ -4,5 +4,6 @@ export * from './lit-edge';
4
4
  export * from './lit-handle';
5
5
  export * from './lit-controls';
6
6
  export * from './lit-minimap';
7
+ export * from './lit-sidebar';
7
8
  export * from './store';
8
9
  export * from './theme';
@@ -21,10 +21,12 @@ export declare class LitFlow extends LitFlow_base {
21
21
  zoomOnScroll: boolean;
22
22
  zoomOnPinch: boolean;
23
23
  zoomOnDoubleClick: boolean;
24
+ promptOnDrop: boolean;
24
25
  private _width;
25
26
  private _height;
26
27
  set nodes(nodes: NodeBase[]);
27
28
  get nodes(): NodeBase[];
29
+ private _discoverNodes;
28
30
  set edges(edges: any[]);
29
31
  get edges(): any[];
30
32
  viewport: Viewport;
@@ -32,11 +34,24 @@ export declare class LitFlow extends LitFlow_base {
32
34
  disconnectedCallback(): void;
33
35
  private _updateNodeDimensions;
34
36
  private _selectNode;
37
+ /**
38
+ * Projects a screen position (relative to the flow container) to canvas coordinates.
39
+ * Useful for Drag & Drop and context menus.
40
+ */
41
+ project(position: {
42
+ x: number;
43
+ y: number;
44
+ }): {
45
+ x: number;
46
+ y: number;
47
+ };
35
48
  firstUpdated(): void;
36
49
  updated(changedProperties: Map<string, any>): void;
37
50
  private _setupDrags;
38
51
  private _renderEdge;
39
52
  private _onHandlePointerDown;
53
+ private _onDragOver;
54
+ private _onDrop;
40
55
  private _renderConnectionLine;
41
56
  render(): import("lit").TemplateResult;
42
57
  }
@@ -7,6 +7,8 @@ export declare class LitNode extends LitNode_base {
7
7
  data: any;
8
8
  selected: boolean;
9
9
  nodeId: string;
10
+ positionX: number;
11
+ positionY: number;
10
12
  render(): import("lit").TemplateResult<1>;
11
13
  }
12
14
  export {};
@@ -0,0 +1,10 @@
1
+ import { LitElement } from 'lit';
2
+ export declare class LitSidebar extends LitElement {
3
+ static styles: import("lit").CSSResult[];
4
+ nodeTypes: {
5
+ type: string;
6
+ label: string;
7
+ }[];
8
+ private _onDragStart;
9
+ render(): import("lit").TemplateResult<1>;
10
+ }