@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 +18 -4
- package/dist/index.d.ts +1 -0
- package/dist/lit-flow.d.ts +15 -0
- package/dist/lit-node.d.ts +2 -0
- package/dist/lit-sidebar.d.ts +10 -0
- package/dist/litflow.js +420 -253
- package/dist/litflow.js.map +1 -1
- package/dist/theme.js +4 -0
- package/dist/theme.js.map +1 -1
- package/package.json +3 -1
- package/src/index.ts +1 -0
- package/src/lit-controls.ts +12 -11
- package/src/lit-flow.ts +92 -1
- package/src/lit-minimap.ts +4 -4
- package/src/lit-node.ts +7 -1
- package/src/lit-sidebar.ts +90 -0
- package/src/theme.ts +4 -0
package/README.md
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
# LitFlow: xyflow + Lit WebComponents
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@ghchinoy/litflow)
|
|
4
|
+
[](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
|
-
|
|
134
|
-
|
|
135
|
-
|
|
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
package/dist/lit-flow.d.ts
CHANGED
|
@@ -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
|
}
|
package/dist/lit-node.d.ts
CHANGED
|
@@ -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
|
+
}
|