75 | {/if}
76 |
--------------------------------------------------------------------------------
/karta_svelte/src/lib/karta/ColorPickerStore.ts:
--------------------------------------------------------------------------------
1 | import { writable, get } from 'svelte/store';
2 | import { settings, updateSettings } from '$lib/karta/SettingsStore';
3 | import type { ColorTheme } from '$lib/types/types';
4 |
5 | type ColorPickerState = {
6 | isOpen: boolean;
7 | initialColor: string;
8 | currentColor: string;
9 | position: { x: number; y: number };
10 | onUpdate: (color: string) => void;
11 | onClose?: (finalColor: string) => void;
12 | };
13 |
14 | const initialState: ColorPickerState = {
15 | isOpen: false,
16 | initialColor: '#ffffff',
17 | currentColor: '#ffffff',
18 | position: { x: 0, y: 0 },
19 | onUpdate: () => {},
20 | onClose: undefined
21 | };
22 |
23 | const { subscribe, update } = writable(initialState);
24 |
25 | function open(initialColor: string, event: MouseEvent, onUpdate: (color: string) => void, onClose?: (finalColor: string) => void) {
26 | const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
27 |
28 | // Calculate position with viewport bounds
29 | const viewportWidth = window.innerWidth;
30 | const viewportHeight = window.innerHeight;
31 | const pickerWidth = 280; // Approximate width of color picker
32 | const pickerHeight = 350; // Approximate height of color picker
33 |
34 | let x = rect.left;
35 | let y = rect.bottom + 5;
36 |
37 | // Keep within right boundary
38 | if (x + pickerWidth > viewportWidth) {
39 | x = viewportWidth - pickerWidth - 10;
40 | }
41 |
42 | // Keep within left boundary
43 | if (x < 10) {
44 | x = 10;
45 | }
46 |
47 | // Check if picker would go below viewport
48 | if (y + pickerHeight > viewportHeight) {
49 | // Position above the button instead
50 | y = rect.top - pickerHeight - 5;
51 |
52 | // If still outside viewport, position at top
53 | if (y < 10) {
54 | y = 10;
55 | }
56 | }
57 |
58 | update((state) => ({
59 | ...state,
60 | isOpen: true,
61 | initialColor,
62 | currentColor: initialColor,
63 | position: { x, y },
64 | onUpdate,
65 | onClose
66 | }));
67 | }
68 |
69 | let currentState: ColorPickerState = initialState;
70 | // Track state for internal use
71 | const storeInstance = { subscribe, update };
72 | storeInstance.subscribe(state => {
73 | currentState = state;
74 | });
75 |
76 | function updateColor(color: string) {
77 | update((state) => ({
78 | ...state,
79 | currentColor: color
80 | }));
81 |
82 | // Call the immediate update callback for visual feedback
83 | if (currentState.onUpdate) {
84 | currentState.onUpdate(color);
85 | }
86 | }
87 |
88 | function close() {
89 | if (currentState.onClose) {
90 | currentState.onClose(currentState.currentColor);
91 | }
92 | update((state) => ({ ...state, isOpen: false, onClose: undefined }));
93 | }
94 |
95 | export const colorPickerStore = {
96 | subscribe,
97 | open,
98 | close,
99 | updateColor
100 | };
--------------------------------------------------------------------------------
/karta_server/src/server/write_endpoints_tests/test_helpers.rs:
--------------------------------------------------------------------------------
1 | use super::*;
2 | use crate::server::write_endpoints::{save_context, create_node, delete_nodes, update_node, rename_node, move_nodes};
3 | use crate::{
4 | context::context::Context,
5 | elements::{node::DataNode, view_node::ViewNode},
6 | graph_traits::graph_node::GraphNodes,
7 | server::{karta_service::KartaService, AppState},
8 | utils::utils::KartaServiceTestContext,
9 | };
10 | use axum::{
11 | body::Body,
12 | http::{self, Request, StatusCode},
13 | Router,
14 | };
15 | use tower::ServiceExt;
16 |
17 | // This setup is proven to work from context_endpoints.rs
18 | pub fn setup_test_environment(test_name: &str) -> (Router, KartaServiceTestContext) {
19 | let test_ctx = KartaServiceTestContext::new(test_name);
20 | let app_state = AppState {
21 | service: test_ctx.service_arc.clone(),
22 | tx: tokio::sync::broadcast::channel(1).0,
23 | };
24 | let router = Router::new()
25 | .route(
26 | "/ctx/{*id}",
27 | axum::routing::get(crate::server::context_endpoints::open_context_from_fs_path),
28 | )
29 | .route("/api/ctx/{id}", axum::routing::put(save_context))
30 | .route("/api/nodes", axum::routing::post(create_node).delete(delete_nodes))
31 | .route("/api/nodes/{id}", axum::routing::put(update_node))
32 | .route("/api/nodes/rename", axum::routing::post(rename_node))
33 | .route("/api/nodes/move", axum::routing::post(move_nodes))
34 | .with_state(app_state);
35 | (router, test_ctx)
36 | }
37 |
38 | // Helper for POST requests
39 | pub async fn execute_post_request(router: Router, uri: &str, body: String) -> http::Response {
40 | router
41 | .oneshot(
42 | Request::builder()
43 | .method(http::Method::POST)
44 | .uri(uri)
45 | .header(http::header::CONTENT_TYPE, "application/json")
46 | .body(Body::from(body))
47 | .unwrap(),
48 | )
49 | .await
50 | .unwrap()
51 | }
52 |
53 | // Helper for PUT requests
54 | pub async fn execute_put_request(router: Router, uri: &str, body: String) -> http::Response {
55 | router
56 | .oneshot(
57 | Request::builder()
58 | .method(http::Method::PUT)
59 | .uri(uri)
60 | .header(http::header::CONTENT_TYPE, "application/json")
61 | .body(Body::from(body))
62 | .unwrap(),
63 | )
64 | .await
65 | .unwrap()
66 | }
67 |
68 | // Helper for DELETE requests
69 | pub async fn execute_delete_request(router: Router, uri: &str, body: String) -> http::Response {
70 | router
71 | .oneshot(
72 | Request::builder()
73 | .method(http::Method::DELETE)
74 | .uri(uri)
75 | .header(http::header::CONTENT_TYPE, "application/json")
76 | .body(Body::from(body))
77 | .unwrap(),
78 | )
79 | .await
80 | .unwrap()
81 | }
82 |
--------------------------------------------------------------------------------
/karta_server/src/elements/nodetype.rs:
--------------------------------------------------------------------------------
1 | use agdb::{DbError, DbValue};
2 |
3 | use crate::elements::node;
4 |
5 | // Some of the structs and enums in this file are currently not used.
6 | // Determining a sound architecture for node types is difficult and
7 | // not urgent quite yet.
8 |
9 | pub const KARTA_VERSION: &str = "0.1.0";
10 |
11 |
12 | // pub const ARCHETYPES: [&str; 5] = ["", "vault", "attributes", "nodetypes", "settings"];
13 | pub const ARCHETYPES: [&str; 2] = ["", "vault"];
14 |
15 | #[derive(Debug, Clone, Hash, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
16 | pub struct NodeTypeId {
17 | type_path: String,
18 | version: String,
19 | }
20 |
21 | impl NodeTypeId {
22 | pub fn to_string(&self) -> String {
23 | format!("{}@{}", self.type_path, self.version)
24 | }
25 |
26 | pub fn new(type_path: &str) -> Self {
27 | Self {
28 | type_path: type_path.to_string(),
29 | version: KARTA_VERSION.to_string(),
30 | }
31 | }
32 |
33 | pub fn root_type() -> Self {
34 | Self {
35 | type_path: "core/root".to_string(),
36 | version: KARTA_VERSION.to_string(),
37 | }
38 | }
39 |
40 | pub fn archetype_type() -> Self {
41 | Self {
42 | type_path: "core/archetype".to_string(),
43 | version: KARTA_VERSION.to_string(),
44 | }
45 | }
46 |
47 | pub fn dir_type() -> Self {
48 | Self {
49 | type_path: "core/fs/dir".to_string(),
50 | version: KARTA_VERSION.to_string(),
51 | }
52 | }
53 |
54 | /// Generic file type.
55 | pub fn file_type() -> Self {
56 | Self {
57 | type_path: "core/fs/file".to_string(),
58 | version: KARTA_VERSION.to_string(),
59 | }
60 | }
61 |
62 | pub fn image_type() -> Self {
63 | Self {
64 | type_path: "core/image".to_string(),
65 | version: KARTA_VERSION.to_string(),
66 | }
67 | }
68 |
69 | pub fn virtual_generic() -> Self {
70 | Self {
71 | type_path: "core/virtual_generic".to_string(),
72 | version: KARTA_VERSION.to_string(),
73 | }
74 | }
75 |
76 | /// Check if this is the root node specifically
77 | pub fn is_root_node(&self) -> bool {
78 | self.type_path == "core/root"
79 | }
80 |
81 | }
82 |
83 | impl TryFrom for NodeTypeId {
84 | type Error = DbError;
85 |
86 | fn try_from(value: DbValue) -> Result {
87 | let type_str = value.string()?;
88 | let parts: Vec<&str> = type_str.split('@').collect();
89 | if parts.len() != 2 {
90 | return Err(DbError::from("Invalid NodeTypeId format"));
91 | }
92 |
93 | Ok(NodeTypeId {
94 | type_path: parts[0].to_string(),
95 | version: parts[1].to_string(),
96 | })
97 | }
98 | }
99 |
100 | impl From for DbValue {
101 | fn from(type_id: NodeTypeId) -> Self {
102 | type_id.to_string().into()
103 | }
104 | }
--------------------------------------------------------------------------------
/karta_svelte/static/tutorial-sections.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "title": "Welcome to Karta",
4 | "content": "Welcome to Karta! This is your personal graph-based workspace for organizing files, ideas, projects, and creative work.\n\n**Everything stays on your computer** - Karta runs locally with its own server, so your data is private and secure.\n\nUse the mouse wheel or pinch to **zoom**, and drag with the middle mouse button or two fingers on touchpad to **pan** around the canvas."
5 | },
6 | {
7 | "title": "The Overview",
8 | "content": "Karta can be thought of as a canvas file browser. It has access to the folders and files inside any vault you create, and turns them into **Nodes**.\n\nYou can move, scale, and connect Nodes together as you see fit. Connected Nodes will always appear together, so you can navigate your files by the associations you define, and not just their location in your file system.\n\nIn addition to files and folders, you can create **Virtual Nodes**. For now this is mostly for text notes, which you can create anywhere to further organise thoughts and ideas."
9 | },
10 | {
11 | "title": "Understanding Contexts",
12 | "content": "In Karta, you're always viewing the graph from the perspective some node - this is called a **Context**, and that node is called that Context's **Focal Node**. You'll recognise it by its thick bright outline.\n\nEvery node has a Context, which contains all the nodes that are connected to it. The same Nodes can have different arrangements in different Contexts. You can think of it like having the same files in multiple places, but with no duplication.\n\nYou can **Enter** a node's context by right-clicking and selecting \"Enter Context\", which makes that node the new focal point and shows its related nodes."
13 | },
14 | {
15 | "title": "Creating Your First Nodes",
16 | "content": "Start building your graph by creating Nodes in your current Context:\n\n**Right-click** on empty space to open the context menu and create:\n- **Text Nodes** for notes, ideas, and written content\n- **Generic Nodes** for simple labeled items\n- **Directory Nodes** which create actual folders in that location\n- **File Nodes** create empty files in that location\n\nEach Node's content is unique, but you can display the same Node in multiple Contexts with different visual styles. You can use the search to bring in any Node into the current Context."
17 | },
18 | {
19 | "title": "Connecting Ideas with Edges",
20 | "content": "**Edges** (the lines between nodes) explicitly connect related ideas.\n\n**Create edges** by:\n1. Selecting one or more Nodes\n2. Dragging from the handle at the bottom\n\nEdges exist in the content layer, so they're visible across all Contexts. Use them to say \"these ideas belong together\"."
21 | },
22 | {
23 | "title": "Next Steps",
24 | "content": "Those are the basics! Karta is still extremely barebones, but what's there should convey the concept and be somewhat useful. It has been in prototyping and concepting stages for a long time (too long), and now it's time to hear what you think about it!\n\nQuestions, feedback, and feature ideas can all be directed to karta@teodosin.com. All thoughts are greatly appreciated!"
25 | }
26 | ]
27 |
28 |
--------------------------------------------------------------------------------
/karta_svelte/static/tutorial-sections.md:
--------------------------------------------------------------------------------
1 | # Tutorial Sections
2 |
3 | ## Section 1: Welcome to Karta
4 |
5 | Welcome to Karta! This is your personal graph-based workspace for organizing files, ideas, projects, and creative work.
6 |
7 | **Everything stays on your computer** - Karta runs locally with its own server, so your data is private and secure.
8 |
9 | Use the mouse wheel or pinch to **zoom**, and drag with the middle mouse button or two fingers on touchpad to **pan** around the canvas.
10 |
11 | ---
12 |
13 | ## Section 2: The Overview
14 |
15 | Karta can be thought of as a canvas file browser. It has access to the folders and files inside any vault you create, and turns them into **Nodes**.
16 |
17 | You can move, scale, and connect Nodes together as you see fit. Connected Nodes will always appear together, so you can navigate your files by the associations you define, and not just their location in your file system.
18 |
19 | In addition to files and folders, you can create **Virtual Nodes**. For now this is mostly for text notes, which you can create anywhere to further organise thoughts and ideas.
20 |
21 | ---
22 |
23 | ## Section 3: Understanding Contexts
24 |
25 | In Karta, you're always viewing the graph from the perspective some node - this is called a **Context**, and that node is called that Context's **Focal Node**. You'll recognise it by its thick bright outline.
26 |
27 | Every node has a Context, which contains all the nodes that are connected to it. The same Nodes can have different arrangements in different Contexts. You can think of it like having the same files in multiple places, but with no duplication.
28 |
29 | You can **Enter** a node's context by right-clicking and selecting "Enter Context", which makes that node the new focal point and shows its related nodes.
30 |
31 | ---
32 |
33 | ## Section 4: Creating Your First Nodes
34 |
35 | Start building your graph by creating Nodes in your current Context:
36 |
37 | **Right-click** on empty space to open the context menu and create:
38 | - **Text Nodes** for notes, ideas, and written content
39 | - **Generic Nodes** for simple labeled items
40 | - **Directory Nodes** which create actual folders in that location
41 | - **File Nodes** create empty files in that location
42 |
43 | Each Node's content is unique, but you can display the same Node in multiple Contexts with different visual styles. You can use the search to bring in any Node into the current Context.
44 |
45 | ---
46 |
47 | ## Section 5: Connecting Ideas with Edges
48 |
49 | **Edges** (the lines between nodes) explicitly connect related ideas.
50 |
51 | **Create edges** by:
52 | 1. Selecting one or more Nodes
53 | 2. Dragging from the handle at the bottom
54 |
55 | Edges exist in the content layer, so they're visible across all Contexts. Use them to say "these ideas belong together".
56 |
57 | ---
58 |
59 | ## Section 6: Next Steps
60 |
61 | Those are the basics! Karta is still extremely barebones, but what's there should convey the concept and be somewhat useful. It has been in prototyping and concepting stages for a long time (too long), and now it's time to hear what you think about it!
62 |
63 | Questions, feedback, and feature ideas can all be directed to karta@teodosin.com. All thoughts are greatly appreciated!
64 |
65 |
66 |
--------------------------------------------------------------------------------
/karta_svelte/src/lib/node_types/FileNode.svelte:
--------------------------------------------------------------------------------
1 |
7 |
35 |
36 |
65 |
66 |
73 |
74 |
75 | {fileExtension}
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/karta_server/README.md:
--------------------------------------------------------------------------------
1 | # Karta Server
2 |
3 | The Rust backend for Karta, handling graph database operations and file system integration.
4 |
5 | ## What it does
6 |
7 | This server provides a REST API for managing the graph database that powers Karta. It handles:
8 |
9 | - **Graph operations** - Creating, updating, and querying nodes and edges
10 | - **File system integration** - Syncing filesystem changes with graph data
11 | - **Asset management** - Handling image and file assets
12 | - **Context management** - Managing different views/contexts of the same data
13 |
14 | The server uses [AGDB](https://github.com/agnesoft/agdb) as the graph database backend, which provides efficient graph storage and querying.
15 |
16 | ## Architecture
17 |
18 | **Core components:**
19 | - `src/server/` - REST API endpoints and routing
20 | - `src/graph_agdb/` - Database layer and AGDB integration
21 | - `src/fs_reader/` - File system integration and watching
22 | - `src/context/` - Context management (RON file handling)
23 | - `src/elements/` - Core data structures and graph elements
24 |
25 | **Key concepts:**
26 | - **DataNodes** - Represent files/folders in the filesystem or virtual nodes
27 | - **Edges** - Connections between nodes with typed relationships
28 | - **Contexts** - Different spatial arrangements of the same nodes
29 | - **ViewNodes** - Position and visual state of nodes within contexts
30 |
31 | ## API Overview
32 |
33 | **Core endpoints:**
34 | - `GET /` - Vault information
35 | - `GET /api/asset/{path}` - File assets
36 | - `GET /api/paths` - File system paths
37 | - `GET /api/search` - Search nodes
38 | - `GET /api/contexts` - Available contexts
39 |
40 | **Node operations:**
41 | - `POST /api/nodes` - Create new node
42 | - `DELETE /api/nodes` - Delete nodes
43 | - `PUT /api/nodes/{id}` - Update node
44 | - `GET /api/nodes/{id}` - Get node by ID
45 | - `GET /api/nodes/by-path/{path}` - Get node by file path
46 |
47 | **Edge operations:**
48 | - `POST /api/edges` - Create edges
49 | - `DELETE /api/edges` - Delete edges
50 | - `PATCH /api/edges` - Reconnect edge
51 |
52 | **Context operations:**
53 | - `PUT /api/ctx/{id}` - Save context
54 | - `GET /ctx/{id}` - Open context from filesystem path
55 |
56 | ## Development
57 |
58 | **Prerequisites:**
59 | - Rust (latest stable)
60 |
61 | **Running:**
62 | ```bash
63 | cargo run
64 | ```
65 |
66 | The server starts on `http://localhost:7370` by default. It will prompt you to type in a path for your vault. You can use tab to autocomplete, double click to show all available folders. Once you've created some vaults, you can quickly initialise them without typing in the whole path each time.
67 |
68 | **Configuration:**
69 | Currently uses hardcoded paths and settings. Configuration system is planned but not implemented yet.
70 |
71 | ## Current limitations
72 |
73 | - No authentication/authorization
74 | - Hardcoded database location
75 | - Limited error handling in some areas
76 | - File watching could be more robust
77 | - No configuration system yet
78 |
79 | This is development-focused right now - it assumes a single local user and doesn't handle multi-user scenarios or security concerns.
80 |
81 | ## Integration
82 |
83 | The server is designed to work with the Karta Svelte client, but could potentially be used by other applications that need graph-based file organization.
84 |
85 | Eventually this will be automatically initialised as a separate process by the Tauri app instead of having to be run individually.
86 |
--------------------------------------------------------------------------------
/karta_svelte/src/lib/node_types/RootNode.svelte:
--------------------------------------------------------------------------------
1 |
7 |
39 |
40 |
62 |
63 |
71 |
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/karta_server/src/server/edge_endpoints.rs:
--------------------------------------------------------------------------------
1 | use axum::{extract::State, http::StatusCode, response::Json};
2 | use serde::{Deserialize, Serialize};
3 | use std::{collections::HashMap, str::FromStr};
4 | use uuid::Uuid;
5 |
6 | use crate::{prelude::Edge, server::{karta_service::KartaService, AppState}};
7 |
8 | #[derive(Serialize, Deserialize, Debug, Clone)]
9 | pub struct CreateEdgePayload {
10 | pub id: String,
11 | pub source: String,
12 | pub target: String,
13 | pub attributes: HashMap,
14 | pub source_path: String,
15 | pub target_path: String,
16 | }
17 |
18 | #[axum::debug_handler]
19 | pub async fn create_edges(
20 | State(state): State,
21 | Json(payload): Json>,
22 | ) -> Result>, StatusCode> {
23 |
24 | dbg!(&payload);
25 | let mut service = state.service.write().unwrap();
26 |
27 | match service.create_edges(payload) {
28 | Ok(created_edges) => Ok(Json(created_edges)),
29 | Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
30 | }
31 | }
32 |
33 | #[derive(Serialize, Deserialize, Debug)]
34 | pub struct ReconnectEdgePayload {
35 | pub old_from: Uuid,
36 | pub old_to: Uuid,
37 | pub new_from: Uuid,
38 | pub new_to: Uuid,
39 | pub new_from_path: String,
40 | pub new_to_path: String,
41 | }
42 |
43 | #[axum::debug_handler]
44 | pub async fn reconnect_edge(
45 | State(state): State,
46 | Json(payload): Json,
47 | ) -> Result, StatusCode> {
48 | let mut service = state.service.write().unwrap();
49 |
50 | println!("[RECONNECT_EDGE] Attempting edge reconnection:");
51 | println!("[RECONNECT_EDGE] Old: {} -> {}", payload.old_from, payload.old_to);
52 | println!("[RECONNECT_EDGE] New: {} -> {}", payload.new_from, payload.new_to);
53 | println!("[RECONNECT_EDGE] Paths: {} -> {}", payload.new_from_path, payload.new_to_path);
54 |
55 | match service.reconnect_edge(&payload.old_from, &payload.old_to, &payload.new_from, &payload.new_to, &payload.new_from_path, &payload.new_to_path) {
56 | Ok(edge) => {
57 | println!("[RECONNECT_EDGE] Success: {:?}", edge);
58 | Ok(Json(edge))
59 | },
60 | Err(e) => {
61 | println!("[RECONNECT_EDGE] Error: {}", e);
62 | if e.to_string()
63 | .contains("Reconnection of 'contains' edges is not allowed")
64 | {
65 | println!("[RECONNECT_EDGE] Returning 400 - Contains edge reconnection not allowed");
66 | Err(StatusCode::BAD_REQUEST)
67 | } else {
68 | println!("[RECONNECT_EDGE] Returning 500 - Internal server error");
69 | Err(StatusCode::INTERNAL_SERVER_ERROR)
70 | }
71 | }
72 | }
73 | }
74 |
75 | #[derive(Serialize, Deserialize, Debug)]
76 | pub struct DeleteEdgePayload {
77 | pub source: Uuid,
78 | pub target: Uuid,
79 | }
80 |
81 | #[axum::debug_handler]
82 | pub async fn delete_edges(
83 | State(state): State,
84 | Json(payload): Json>,
85 | ) -> Result {
86 | let mut service = state.service.write().unwrap();
87 |
88 | match service.delete_edges(payload) {
89 | Ok(_) => Ok(StatusCode::NO_CONTENT),
90 | Err(e) => {
91 | if e.to_string().contains("Deletion of 'contains' edges is not allowed.") {
92 | Err(StatusCode::BAD_REQUEST)
93 | } else {
94 | Err(StatusCode::INTERNAL_SERVER_ERROR)
95 | }
96 | }
97 | }
98 | }
--------------------------------------------------------------------------------
/karta_svelte/README.md:
--------------------------------------------------------------------------------
1 | # Karta Client
2 |
3 | The desktop application frontend for Karta, built with SvelteKit and Tauri.
4 |
5 | ## What it does
6 |
7 | This is the user interface for Karta - the part you actually interact with. It provides:
8 |
9 | - **Graph visualization** - Interactive canvas for viewing and manipulating nodes
10 | - **Context switching** - Navigate between different views of your data
11 | - **File integration** - Drag and drop files, create nodes from filesystem
12 | - **Node editing** - Create, edit, and connect different types of nodes
13 | - **Server communication** - Syncs with the Rust backend
14 |
15 | ## Architecture
16 |
17 | **Key directories:**
18 | - `src/lib/components/` - Reusable UI components
19 | - `src/lib/karta/` - Core stores and state management
20 | - `src/lib/node_types/` - Different node type implementations
21 | - `src/lib/interaction/` - Mouse/keyboard interaction handling
22 | - `src/lib/util/` - Utilities and adapters
23 | - `src-tauri/` - Tauri desktop app configuration
24 |
25 | **State management:**
26 | - Uses Svelte stores for reactive state
27 | - Separate stores for nodes, edges, contexts, viewport, etc.
28 | - Persistence layer that connects to the Rust backend server
29 |
30 | ## Key concepts
31 |
32 | **Nodes:** Represent files, folders, or virtual content
33 | **Edges:** Connections between nodes with different relationship types
34 | **Contexts:** Different spatial arrangements of the same nodes
35 | **Viewport:** Pan/zoom state and visual transforms
36 |
37 | The UI is built around the idea of contextual navigation - you're always viewing the graph from some focal point, and nodes are positioned relative to that context.
38 |
39 | ## Development
40 |
41 | **Prerequisites:**
42 | - Node.js 18+
43 | - Rust (for Tauri)
44 |
45 | **Running in development:**
46 | ```bash
47 | # Install dependencies
48 | npm install
49 |
50 | # Start development server (web mode)
51 | npm run dev
52 |
53 | # Start Tauri development (desktop mode)
54 | # Note: Tauri npm scripts not set up yet, use cargo directly:
55 | cd src-tauri
56 | cargo tauri dev
57 | ```
58 |
59 | **Building:**
60 | ```bash
61 | # Build web version
62 | npm run build
63 |
64 | # Build Tauri desktop app
65 | cd src-tauri
66 | cargo tauri build
67 | ```
68 |
69 | ## Current state
70 |
71 | **What works well:**
72 | - Basic graph visualization and interaction
73 | - Context switching with smooth transitions
74 | - File node creation and editing
75 | - Server integration with graph database
76 |
77 | **Known issues:**
78 | - Performance with large numbers of nodes/images
79 | - Some UI elements need polish
80 | - Error handling could be more robust
81 | - Mobile/touch interaction is limited
82 |
83 | ## Configuration
84 |
85 | The app connects to the Rust backend server running on localhost:7370. There's legacy IndexedDB adapter code that will be removed in a future version.
86 |
87 | **Current setup:**
88 | - Uses ServerAdapter to connect to the backend
89 | - Requires the karta_server to be running separately
90 | - Configuration options are minimal and mostly hardcoded
91 |
92 | ## Tauri integration
93 |
94 | This is designed as a desktop application using Tauri. The web version works for development, but the intended experience is as a native desktop app that will eventually bundle the server component.
95 |
96 | Current Tauri features:
97 | - Native file system access
98 | - Desktop notifications
99 | - Window management
100 |
101 | Planned Tauri features:
102 | - Bundled server process
103 | - Better file watching
104 | - System tray integration
105 |
--------------------------------------------------------------------------------
/karta_svelte/src/lib/components/ContextMenu.svelte:
--------------------------------------------------------------------------------
1 |
67 |
68 | {#if position}
69 |
98 | {#each availableTypes as typeDef (typeDef.ntype)}
99 |
100 |
111 |
112 | {/each}
113 |
114 |
115 | {/if}
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Karta
2 |
3 | 
4 |
5 | A node-based file organization tool for creative projects.
6 |
7 | > [!IMPORTANT]
8 | > This project is in active development and not ready for production use. It's functional but still rough around the edges. The current focus is getting the core features stable before expanding functionality.
9 |
10 | ## What is this?
11 |
12 | Karta turns your file system into a spatial graph. Instead of just folders and files, you get nodes and connections. You can arrange your project files on a canvas, create arbitrary links between them, and view your work from different "contexts" - basically different perspectives that show the same files arranged differently.
13 |
14 | It's designed for complex creative projects where you need to see relationships between many different files and ideas. Think game development, world-building, writing projects with lots of interconnected parts.
15 |
16 | ## Current state
17 |
18 | **What works:**
19 | - Basic node-based file visualization
20 | - Creating connections between files
21 | - Context switching (viewing the same network from different focal points)
22 | - Server integration with graph database
23 | - File system integration
24 |
25 | **What doesn't work yet:**
26 | - Packaged desktop app (currently requires running server and client separately)
27 | - Export/sharing functionality
28 | - Custom node types
29 | - Smooth performance with large vaults and images
30 |
31 | ## Licensing (work in progress)
32 |
33 | The licensing situation is being sorted out to enable both open source development and commercial use of created content. Currently everything is private while we figure this out, but the plan is:
34 |
35 | - **Editor**: GPL - keeps the editing tools open source
36 | - **Runtime**: MIT - allows commercial use of exported networks
37 |
38 | Both will be part of this repository but serve different purposes. If you're interested in contributing or using this, please reach out so we can discuss the licensing before you invest time.
39 |
40 | ## Architecture
41 |
42 | This is a monorepo with two main parts:
43 |
44 | **`karta_server/`** - Rust backend
45 | - Uses [agdb](https://github.com/agnesoft/agdb) graph database for storage
46 | - Handles the core graph operations and file system integration
47 | - See [karta_server/README.md](./karta_server/README.md)
48 |
49 | **`karta_svelte/`** - Desktop application (Tauri + SvelteKit)
50 | - SvelteKit frontend with Tauri wrapper for desktop functionality
51 | - Currently works with the separate server, but the plan is to bundle the server into the Tauri app
52 | - For now you need to run both server and client separately during development
53 | - See [karta_svelte/README.md](./karta_svelte/README.md)
54 |
55 | The long-term plan includes splitting functionality into editor and runtime components to enable embedding Karta networks in other applications, while keeping both in this repository.
56 |
57 | ## Development setup
58 |
59 | Prerequisites: Rust, Node.js 18+, and your package manager of choice.
60 |
61 | ```bash
62 | # Server (in one terminal)
63 | cd karta_server
64 | cargo run
65 |
66 | # Client (in another terminal)
67 | cd karta_svelte
68 | npm install
69 | npm run dev
70 | ```
71 |
72 | See the individual READMEs for more detailed setup instructions.
73 |
74 | ## Contributing
75 |
76 | It's too early to ask for contributions, but feedback and discussion are very welcome. The project is still finding its direction and having conversations about what this should become is valuable.
77 |
78 | If you want to try it out, expect rough edges and incomplete features. But if something clicks for you or you see potential, I'd love to hear about it. You can send your questions, feedback and feature ideas directly to karta@teodosin.com.
79 |
80 | ## Background
81 |
82 | The motivation is pretty simple: creative projects are interconnected webs of ideas and files, but our tools treat them as isolated pieces in folder hierarchies. This makes it hard to see the relationships and patterns that actually matter for the work.
83 |
84 | Karta tries to make those connections visible and interactive. Whether that's actually useful remains to be seen, but it's worth exploring.
85 |
86 | ---
87 |
88 | *Built for creative work that doesn't fit neatly into folders.*
89 |
90 |
91 |
--------------------------------------------------------------------------------
/karta_server/src/server/settings.rs:
--------------------------------------------------------------------------------
1 | use axum::{extract::State, http::StatusCode, response::{IntoResponse, Json}};
2 | use serde::{Deserialize, Serialize};
3 | use std::fs;
4 | use std::path::PathBuf;
5 |
6 | use crate::prelude::NodePath;
7 |
8 | use super::AppState;
9 |
10 | #[derive(Serialize, Deserialize, Debug, Clone)]
11 | #[serde(rename_all = "camelCase")]
12 | pub struct ColorTheme {
13 | pub viewport_bg: String,
14 | pub panel_bg: String,
15 | pub focal_hl: String,
16 | pub panel_hl: String,
17 | pub text_color: String,
18 | pub contrast_color: String,
19 | pub connection_color: String,
20 | }
21 |
22 | impl Default for ColorTheme {
23 | fn default() -> Self {
24 | ColorTheme {
25 | viewport_bg: "#000000".to_string(),
26 | panel_bg: "#431d1f".to_string(),
27 | focal_hl: "#f4902dff".to_string(),
28 | panel_hl: "#741f2fff".to_string(),
29 | text_color: "#f0f0f0".to_string(),
30 | contrast_color: "#60a5fa".to_string(),
31 | connection_color: "#505050".to_string(),
32 | }
33 | }
34 | }
35 |
36 | #[derive(Serialize, Deserialize, Debug, Clone)]
37 | #[serde(rename_all = "camelCase")]
38 | pub struct EdgeFilterSettings {
39 | pub contains_edges: String,
40 | pub normal_edges: String,
41 | }
42 |
43 | impl Default for EdgeFilterSettings {
44 | fn default() -> Self {
45 | EdgeFilterSettings {
46 | contains_edges: "always".to_string(),
47 | normal_edges: "always".to_string(),
48 | }
49 | }
50 | }
51 |
52 | #[derive(Serialize, Deserialize, Debug, Clone)]
53 | #[serde(rename_all = "camelCase")]
54 | pub struct KartaSettings {
55 | pub version: f32,
56 | pub save_last_viewed_context: bool,
57 | pub last_viewed_context_path: Option,
58 | pub vault_path: Option,
59 | pub color_theme: ColorTheme,
60 | pub edge_filters: EdgeFilterSettings,
61 | }
62 |
63 | impl Default for KartaSettings {
64 | fn default() -> Self {
65 | KartaSettings {
66 | version: 0.1,
67 | save_last_viewed_context: true,
68 | last_viewed_context_path: None,
69 | vault_path: None,
70 | color_theme: ColorTheme::default(),
71 | edge_filters: EdgeFilterSettings::default(),
72 | }
73 | }
74 | }
75 |
76 | fn get_settings_path(vault_path: &str) -> PathBuf {
77 | let mut path = PathBuf::from(vault_path);
78 | path.push(".karta");
79 | path.push("settings.json");
80 | path
81 | }
82 |
83 | pub fn load_settings(vault_path: &str) -> KartaSettings {
84 | let settings_path = get_settings_path(vault_path);
85 | if settings_path.exists() {
86 | let content = fs::read_to_string(settings_path).unwrap_or_default();
87 | serde_json::from_str(&content).unwrap_or_else(|_| KartaSettings::default())
88 | } else {
89 | KartaSettings::default()
90 | }
91 | }
92 |
93 | pub fn save_settings(vault_path: &str, settings: &KartaSettings) -> Result<(), std::io::Error> {
94 | let settings_path = get_settings_path(vault_path);
95 | let parent_dir = settings_path.parent().unwrap();
96 | fs::create_dir_all(parent_dir)?;
97 | let content = serde_json::to_string_pretty(settings).unwrap();
98 | fs::write(settings_path, content)
99 | }
100 |
101 | pub async fn get_settings_handler(
102 | State(state): State,
103 | ) -> Json {
104 | let service = state.service.read().unwrap();
105 | let vault_path = service.vault_fs_path().to_str().unwrap();
106 | Json(load_settings(vault_path))
107 | }
108 |
109 | pub async fn update_settings_handler(
110 | State(state): State,
111 | Json(payload): Json,
112 | ) -> impl IntoResponse {
113 | let service = state.service.read().unwrap();
114 | let vault_path = service.vault_fs_path().to_str().unwrap();
115 | match save_settings(vault_path, &payload) {
116 | Ok(_) => (StatusCode::OK, Json(payload)).into_response(),
117 | Err(e) => (
118 | StatusCode::INTERNAL_SERVER_ERROR,
119 | format!("Failed to save settings: {}", e),
120 | )
121 | .into_response(),
122 | }
123 | }
--------------------------------------------------------------------------------
/karta_server/src/graph_agdb/graph_core.rs:
--------------------------------------------------------------------------------
1 | use std::{
2 | error::Error,
3 | path::{self, PathBuf},
4 | };
5 |
6 | use agdb::QueryBuilder;
7 |
8 | use crate::{
9 | elements::{node::ROOT_UUID, nodetype::ARCHETYPES},
10 | graph_traits::{self, graph_core::GraphCore, graph_node::GraphNodes},
11 | prelude::{DataNode, GraphEdge, NodePath, NodeTypeId, StoragePath},
12 | };
13 |
14 | use super::GraphAgdb;
15 |
16 | /// Implementation block for the Graph struct itself.
17 | /// Includes constructors and utility functions.
18 | impl GraphCore for GraphAgdb {
19 | fn storage_path(&self) -> PathBuf {
20 | self.storage_path.clone()
21 | }
22 |
23 | fn vault_dirpath(&self) -> PathBuf {
24 | let path = self.vault_fs_path.clone();
25 | // println!("root_path: {:?}", path);
26 | path
27 | }
28 |
29 | fn root_nodepath(&self) -> NodePath {
30 | NodePath::root()
31 | }
32 |
33 | /// Gets the name of the root directory without the full path
34 | fn root_name(&self) -> String {
35 | self.vault_fs_path
36 | .file_name()
37 | .unwrap()
38 | .to_str()
39 | .unwrap()
40 | .to_string()
41 | }
42 |
43 | /// Constructor. Panics if the db cannot be created.
44 | ///
45 | /// Takes the desired root directory of the graph as a parameter and the name for the db.
46 | /// The name of the root directory will become the vault of the graph,
47 | /// as first child of the root node.
48 | ///
49 | /// Creates the db at the storage_path, or initialises the db if it already exists there.
50 | ///
51 | /// TODO: Add error handling.
52 | fn new(name: &str, vault_fs_path: PathBuf, storage_dir: PathBuf) -> Self {
53 | if !storage_dir.exists() {
54 | std::fs::create_dir_all(&storage_dir).expect("Failed to create storage path");
55 | }
56 | let db_path = storage_dir.join(format!("{}.agdb", name));
57 |
58 | // Check if the database already exists
59 | let open_existing = db_path.exists();
60 |
61 | let db = agdb::Db::new(db_path.to_str().unwrap()).expect("Failed to create new db");
62 |
63 | let mut giraphe = GraphAgdb {
64 | name: name.to_string(),
65 | db,
66 | vault_fs_path: vault_fs_path.into(),
67 | storage_path: storage_dir,
68 | };
69 |
70 | // Indexes for faster lookup based on attributes
71 | giraphe.db.exec_mut(QueryBuilder::insert().index("uuid").query());
72 | giraphe.db.exec_mut(QueryBuilder::insert().index("ntype").query());
73 | giraphe.db.exec_mut(QueryBuilder::insert().index("path").query());
74 |
75 | if !open_existing {
76 | let archetypes = ARCHETYPES;
77 |
78 | archetypes.iter().for_each(|atype| {
79 | let atype_path = NodePath::atype(*atype);
80 | let ntype = if atype_path == NodePath::root() {
81 | NodeTypeId::root_type()
82 | } else if atype_path == NodePath::vault() {
83 | NodeTypeId::dir_type()
84 | } else {
85 | NodeTypeId::archetype_type()
86 | };
87 |
88 | let node = DataNode::new(&atype_path, ntype);
89 | let node_uuid = node.uuid();
90 |
91 | giraphe.insert_nodes(vec![node]);
92 |
93 |
94 | if atype_path != NodePath::root() {
95 | let root_to_atype_edge =
96 | crate::prelude::Edge::new_cont(ROOT_UUID, node_uuid);
97 |
98 | giraphe.insert_edges(vec![root_to_atype_edge]);
99 | }
100 | });
101 | }
102 |
103 | return giraphe;
104 | }
105 |
106 | fn get_all_aliases(&self) -> Vec {
107 | let all = self.db().exec(&QueryBuilder::select().aliases().query());
108 | match all {
109 | Ok(aliases) => {
110 | let all: Vec = aliases
111 | .elements
112 | .iter()
113 | .map(|alias| alias.values[0].value.to_string())
114 | .collect();
115 |
116 | all
117 | }
118 | Err(err) => {
119 | // println!("Error: {}", err);
120 | vec![]
121 | }
122 | }
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/karta_server/src/fs_reader/mod.rs:
--------------------------------------------------------------------------------
1 | use std::{error::Error, ops::Index, path::{Path, PathBuf}};
2 |
3 | use crate::prelude::{DataNode, NodePath, NodeTypeId};
4 |
5 | fn get_node_type_from_path(path: &Path) -> NodeTypeId {
6 | if path.is_dir() {
7 | return NodeTypeId::dir_type();
8 | }
9 |
10 | if path.is_file() {
11 | return match path.extension().and_then(|s| s.to_str()) {
12 | Some("png") | Some("jpg") | Some("jpeg") | Some("gif") => NodeTypeId::image_type(),
13 | _ => NodeTypeId::file_type(),
14 | };
15 | }
16 |
17 | // Default fallback, though in practice the calling logic should prevent this.
18 | NodeTypeId::file_type()
19 | }
20 |
21 | pub fn destructure_single_path(
22 | vault_root_path: &PathBuf,
23 | path_to_destructure: &NodePath,
24 | ) -> Result> {
25 | let path_to_destructure = path_to_destructure.full(vault_root_path);
26 | if !path_to_destructure.exists() {
27 | return Err(format!("Path does not exist: {:?}", path_to_destructure).into());
28 | }
29 |
30 | let node_path = NodePath::from_dir_path(vault_root_path, &path_to_destructure);
31 | let ntype = get_node_type_from_path(&path_to_destructure);
32 | let node = DataNode::new(&node_path, ntype);
33 | Ok(node)
34 | }
35 |
36 | pub fn destructure_file_path(
37 | vault_root_path: &PathBuf, // New parameter: the root of the Karta vault
38 | path_to_destructure: &PathBuf, // This is the absolute path of the item to destructure
39 | include_self: bool,
40 | ) -> Result, Box> {
41 | if !path_to_destructure.exists() {
42 | return Err(format!("Path to destructure does not exist: {:?}", path_to_destructure).into());
43 | }
44 | let mut nodes: Vec = Vec::new();
45 |
46 | if path_to_destructure.is_file() && include_self {
47 | // Create NodePath relative to vault_root_path
48 | let node_path = NodePath::from_dir_path(vault_root_path, path_to_destructure);
49 | let ntype = get_node_type_from_path(path_to_destructure);
50 | let node = DataNode::new(&node_path, ntype);
51 | nodes.push(node);
52 | }
53 |
54 | if path_to_destructure.is_dir() {
55 | // If include_self is true for a directory, we might want to add the directory itself.
56 | // However, the current KartaService logic creates the focal directory node separately.
57 | // This function, as per its usage in KartaService, primarily returns children for a dir.
58 | // If include_self for a dir meant to include the dir itself, that logic would be here.
59 | // For now, it only lists children.
60 |
61 | let dir_entries = std::fs::read_dir(path_to_destructure)?;
62 |
63 | for entry in dir_entries {
64 | let entry = entry?;
65 | let absolute_entry_path = entry.path(); // This is an absolute path
66 |
67 | // Ignore .karta directory or files
68 | if absolute_entry_path.file_name().map_or(false, |name| name == ".karta") {
69 | continue;
70 | }
71 |
72 | // Create NodePath relative to vault_root_path
73 | let node_path = NodePath::from_dir_path(vault_root_path, &absolute_entry_path);
74 | let ntype: NodeTypeId;
75 |
76 | if absolute_entry_path.is_dir() {
77 | ntype = NodeTypeId::dir_type();
78 | } else if absolute_entry_path.is_file() {
79 | ntype = get_node_type_from_path(&absolute_entry_path);
80 | } else { continue; }
81 |
82 | let node = DataNode::new(&node_path, ntype);
83 | nodes.push(node);
84 | }
85 | }
86 | Ok(nodes)
87 | }
88 |
89 | pub fn get_all_paths(vault_root_path: &PathBuf) -> Result, Box> {
90 | let mut paths = Vec::new();
91 | let mut walker = walkdir::WalkDir::new(vault_root_path).into_iter();
92 |
93 | while let Some(entry) = walker.next() {
94 | let entry = entry?;
95 | let path = entry.path();
96 |
97 | if path.file_name().map_or(false, |name| name == ".karta") {
98 | walker.skip_current_dir();
99 | continue;
100 | }
101 |
102 | if path.is_dir() || path.is_file() {
103 | let node_path = NodePath::from_dir_path(vault_root_path, &path.to_path_buf());
104 | paths.push(node_path.alias().to_string());
105 | }
106 | }
107 |
108 | Ok(paths)
109 | }
110 |
--------------------------------------------------------------------------------
/website/architecture.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Karta Architecture History"
3 | date: 2025-08-03
4 | status: draft
5 | description: "Historical architecture document from Karta's early development - preserved for context"
6 | tags: ["architecture", "history", "development"]
7 | ---
8 |
9 |
18 |
19 | # Karta Architecture (Historical)
20 |
21 | This document outlines some of the architectural decisions made during Karta's early development as well as open questions that were being considered at the time. It is not exhaustive and much of it is now outdated.
22 |
23 | ### Background
24 |
25 | #### Previous prototype
26 | The first prototype of Karta was made with the Godot engine and its scripting language GDscript. Godot has a lot of features that made it simple to get started and get something working quickly. It worked well, but with its shaky foundation, the prototype quickly became unwieldy and started breaking at odd places, and I didn't have the knowledge or the tools to debug it. Spaghetti. But the experience was encouraging, so I started to look at my options for continuing the experiment.
27 |
28 | #### Rust
29 | I landed on Rust after weighing it against C++ and deciding that I didn't want to have to deal with manual memory management and runtime errors. I want clear feedback up front on whether my code will work or not. Godot's deep inheritance trees also left a sour impression on me, so I was further lulled in to Rust by its composition features.
30 |
31 | #### Bevy
32 | From Godot I was left with an optimistic view of using game engines for native applications. I tried Bevy, using it to load a folder of files as circles in a 2D space. The ECS system clicked, and I imagined it would be a very intuitive and ergonomic way to manage nodes and edges in Karta. The ECS has the downside of handwaving away some of Rusts safety guarantees, but so far the tradeoff has been completely worth it. Bevy's community has also proven highly helpful and knowledgeable. Karta will be able to leverage future improvements to Bevy.
33 |
34 | ------------------------------------------
35 |
36 | ## Overview
37 |
38 | As of writing this, Karta is undergoing a refactoring to better prepare it for new features and use cases. It is being split into a few different crates and repositories for maintainability and extendability reasons. Easier to upgrade or swap out parts in case the project pivots.
39 |
40 | ### Crate structure
41 |
42 | #### Indexing - karta_server
43 |
44 | The core of Karta and its concept relies on an efficient and effective indexing of files into a graph structure. The library for this should be decoupled from the main Karta application so that it could eventually be accessed and modified by other applications as well. The separation also allows for the db to be run on a local or cloud server in addition to the local database file.
45 |
46 | Preferably, the solution would fulfill these requirements:
47 | * Scalable, O(1) lookup times always
48 | * Local first
49 | * Support for virtual nodes (nodes that don't reference a file or directory)
50 | * Support for arbitrary attributes on nodes and edges
51 |
52 | The crate developed for this purpose is [karta_server](https://github.com/teodosin/karta_server), which is essentially Karta's wrapper around [Agnesoft Graph Database](https://github.com/agnesoft/agdb).
53 |
54 | #### Bevy Plugin - bevy_karta_client
55 |
56 | Since the main Karta application is developed using Bevy, there needs to be a connective layer between the user interface and graphical elements being coded in Bevy and the database backend. [bevy_karta_client](https://github.com/teodosin/bevy_karta_client) is essentially the high-level backend of Karta, responsible for communication with the database.
57 |
58 | bevy_karta_client loads in nodes and edges from the database and turns them into Entities in Bevy's ECS.
59 |
60 | #### User Interface - bevy_karta_ui
61 |
62 | [bevy_karta_ui](https://github.com/teodosin/bevy_karta_ui).
63 |
64 | ### Open questions
65 | Some things I'm not currently dealing with but am imagining will be important in the future. Refer to VISION.md for the features that will want these technical challenges addressed.
66 |
67 | * How to tackle the serialization of non-unicode paths, to support moving of a vault from different operating systems?
68 | * How will the evaluation of the node graph for real-time composition work, and how will it be made performant?
69 | * How would the exporting of specific networks work? How to minimize the size of the exports and runtimes?
70 | * How to export a runtime to the web?
71 | * How should plugin and custom node support be implemented?
72 |
73 |
--------------------------------------------------------------------------------
/karta_svelte/src/lib/tools/ConnectTool.ts:
--------------------------------------------------------------------------------
1 | import type { Tool, NodeId } from '$lib/types/types';
2 | import { get } from 'svelte/store';
3 | import {
4 | startConnectionProcess,
5 | updateTempLinePosition,
6 | finishConnectionProcess,
7 | cancelConnectionProcess,
8 | isConnecting
9 | } from '$lib/karta/ToolStore';
10 | import { screenToCanvasCoordinates } from '$lib/karta/ViewportStore';
11 |
12 |
13 |
14 |
15 |
16 | export class ConnectTool implements Tool {
17 | readonly name = 'connect';
18 |
19 | // Bound methods for event listeners - Use PointerEvent
20 | private boundHandlePointerMove: (event: PointerEvent) => void;
21 | private boundHandlePointerUp: (event: PointerEvent) => void;
22 |
23 | constructor() {
24 | this.boundHandlePointerMove = this.handlePointerMove.bind(this);
25 | this.boundHandlePointerUp = this.handlePointerUp.bind(this);
26 | }
27 |
28 | activate() {
29 | document.body.style.cursor = 'crosshair'; // Set cursor on activate
30 | }
31 |
32 | deactivate() {
33 | if (get(isConnecting)) {
34 | cancelConnectionProcess(); // Cancel if connection was in progress
35 | }
36 | this.removeWindowListeners();
37 | document.body.style.cursor = 'default'; // Reset cursor on deactivate
38 | }
39 |
40 | // Replaces onNodeMouseDown
41 | onPointerDown(event: PointerEvent, targetElement: EventTarget | null): void {
42 | if (event.button !== 0 || !(targetElement instanceof HTMLElement)) return;
43 |
44 | // Check if the target is a node element
45 | const nodeEl = targetElement.closest('.node-wrapper') as HTMLElement | null; // Use the new wrapper class
46 | if (!nodeEl || !nodeEl.dataset.id) return; // Exit if not a node
47 |
48 | const nodeId = nodeEl.dataset.id;
49 | startConnectionProcess([nodeId]); // KartaStore handles the state
50 | this.addWindowListeners(); // Add listeners to track pointer movement and release
51 | }
52 |
53 | // Replaces handleWindowMouseMove - Use PointerEvent
54 | private handlePointerMove(event: PointerEvent): void {
55 | if (!get(isConnecting)) return;
56 |
57 | // Need container rect for coordinate conversion
58 | const containerEl = document.querySelector('.w-full.h-screen.overflow-hidden') as HTMLElement; // Adjust selector if needed
59 | if (!containerEl) {
60 | console.error("Viewport container not found for coordinate conversion.");
61 | return;
62 | }
63 | const containerRect = containerEl.getBoundingClientRect();
64 | const { x: mouseCanvasX, y: mouseCanvasY } = screenToCanvasCoordinates(event.clientX, event.clientY, containerRect);
65 | updateTempLinePosition(mouseCanvasX, mouseCanvasY);
66 | }
67 |
68 | // Replaces handleWindowMouseUp - Use PointerEvent
69 | private handlePointerUp(event: PointerEvent): void {
70 | if (!get(isConnecting) || event.button !== 0) return;
71 |
72 | let targetNodeId: NodeId | null = null;
73 | // Use event.target for pointerup, as it reflects the element where the pointer was released
74 | let currentElement: HTMLElement | null = event.target as HTMLElement;
75 |
76 | // Traverse up DOM to find a node element with data-id
77 | while (currentElement) {
78 | if (currentElement.dataset?.id && currentElement.classList.contains('node-wrapper')) { // Use the new wrapper class
79 | targetNodeId = currentElement.dataset.id;
80 | break; // Found it
81 | }
82 | // Stop if we hit the canvas container or body
83 | const viewportContainer = document.querySelector('.w-full.h-screen.overflow-hidden');
84 | if (currentElement === document.body || currentElement === viewportContainer) {
85 | break;
86 | }
87 | currentElement = currentElement.parentElement;
88 | }
89 |
90 | finishConnectionProcess(targetNodeId); // KartaStore handles state reset and edge creation
91 | this.removeWindowListeners();
92 | }
93 |
94 | // --- Removed Obsolete Methods ---
95 | // onCanvasClick, onCanvasMouseDown, getNodeCursorStyle, getCanvasCursorStyle
96 | // onWindowMouseMove, onWindowMouseUp
97 |
98 | // Optional: Implement updateCursor if needed
99 | updateCursor(): void {
100 | document.body.style.cursor = 'crosshair'; // Ensure cursor stays correct
101 | }
102 |
103 | // --- Helper methods for listeners - Use Pointer Events ---
104 | private addWindowListeners() {
105 | window.addEventListener('pointermove', this.boundHandlePointerMove);
106 | window.addEventListener('pointerup', this.boundHandlePointerUp, { once: true });
107 | }
108 |
109 | private removeWindowListeners() {
110 | window.removeEventListener('pointermove', this.boundHandlePointerMove);
111 | window.removeEventListener('pointerup', this.boundHandlePointerUp);
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/karta_svelte/src/lib/components/TutorialModal.svelte:
--------------------------------------------------------------------------------
1 |
64 |
65 |
66 |
67 | {#if $isTutorialOpen}
68 |