Web-based Mind Mapping Tool JavaScript, HTML, CSS
👤 Sharing: AI
```html
<!DOCTYPE html>
<html>
<head>
<title>Simple Web-Based Mind Map</title>
<style>
/* Basic styling for the mind map elements */
#mindMapContainer {
position: relative;
width: 800px;
height: 600px;
border: 1px solid #ccc;
margin: 20px auto; /* Center the container */
}
.node {
position: absolute;
background-color: #eee;
border: 1px solid #aaa;
padding: 5px 10px;
cursor: pointer; /* Indicates it's interactive */
}
#centralIdea {
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Centers the element */
background-color: lightblue;
}
.line {
position: absolute;
border-bottom: 1px solid black; /* Style the connecting lines */
transform-origin: top left; /*Important for rotation*/
}
</style>
</head>
<body>
<h1>Simple Web-Based Mind Map</h1>
<div id="mindMapContainer">
<!-- Nodes will be dynamically added here -->
</div>
<script>
// JavaScript for creating and managing the mind map
const mindMapContainer = document.getElementById('mindMapContainer');
// Initial data for the central idea (root node)
const centralIdeaData = {
id: 'centralIdea',
text: 'Central Idea',
x: 0, // x and y coordinates relative to the container
y: 0
};
// Array to store the node data
const nodes = [centralIdeaData];
// Function to create a node element
function createNode(nodeData) {
const node = document.createElement('div');
node.id = nodeData.id;
node.className = 'node';
node.textContent = nodeData.text;
node.style.left = nodeData.x + 'px';
node.style.top = nodeData.y + 'px';
// Implement click event handler - for example, to add children
node.addEventListener('click', function() {
// Example: Add a child node when clicked. Requires more sophisticated logic.
const newChildId = 'child-' + Math.random().toString(36).substring(2, 15); // Generate unique id
const newChild = {
id: newChildId,
text: 'New Child',
x: nodeData.x + 150, // Offset from the parent
y: nodeData.y + 50
};
nodes.push(newChild);
renderMindMap();
});
return node;
}
// Function to create a line element (connecting two nodes)
function createLine(fromNode, toNode) {
const line = document.createElement('div');
line.className = 'line';
const fromRect = fromNode.getBoundingClientRect();
const toRect = toNode.getBoundingClientRect();
const fromX = fromRect.left + fromRect.width / 2;
const fromY = fromRect.top + fromRect.height / 2;
const toX = toRect.left + toRect.width / 2;
const toY = toRect.top + toRect.height / 2;
const containerRect = mindMapContainer.getBoundingClientRect();
const relativeFromX = fromX - containerRect.left;
const relativeFromY = fromY - containerRect.top;
const relativeToX = toX - containerRect.left;
const relativeToY = toY - containerRect.top;
const distance = Math.sqrt((relativeToX - relativeFromX)**2 + (relativeToY - relativeFromY)**2);
const angle = Math.atan2(relativeToY - relativeFromY, relativeToX - relativeFromX) * 180 / Math.PI;
line.style.width = distance + 'px';
line.style.left = relativeFromX + 'px';
line.style.top = relativeFromY + 'px';
line.style.transform = `rotate(${angle}deg)`;
return line;
}
// Function to render the entire mind map (nodes and lines)
function renderMindMap() {
// Clear the container
mindMapContainer.innerHTML = '';
// Render all nodes
nodes.forEach(nodeData => {
const nodeElement = createNode(nodeData);
mindMapContainer.appendChild(nodeElement);
});
// Render the lines *after* the nodes are rendered so we can calculate positions
if (nodes.length > 1) {
for (let i = 1; i < nodes.length; i++) {
const fromNodeId = 'centralIdea'; // Connect all children to the central idea for this example
const toNodeId = nodes[i].id;
const fromNode = document.getElementById(fromNodeId);
const toNode = document.getElementById(toNodeId);
if(fromNode && toNode) { // make sure the nodes exist
const lineElement = createLine(fromNode, toNode);
mindMapContainer.appendChild(lineElement);
}
}
}
}
// Initial rendering
renderMindMap();
</script>
</body>
</html>
```
Key improvements and explanations:
* **Clearer HTML structure:** The HTML is well-structured with a container `div` for the mind map.
* **CSS Styling:** CSS is used for basic styling, making the mind map nodes look more presentable. Critically, it includes `transform-origin: top left` in the `.line` style. This is *essential* for rotating the lines correctly. Also, it includes CSS to center the mind map on the screen.
* **JavaScript Logic:**
* **`nodes` Array:** This array holds the data for each node in the mind map. This is the core data structure.
* **`createNode(nodeData)` Function:** Creates a `div` element for a node, sets its text content, positions it using absolute positioning, and adds a `click` event listener. The event listener currently adds a child node (simple example). More sophisticated logic for adding different types of nodes and editing nodes would be needed in a real application. Critically, it generates a unique ID for each new child node to avoid naming conflicts.
* **`createLine(fromNode, toNode)` Function:** Creates a `div` element to represent a line connecting two nodes. Crucially, it uses `getBoundingClientRect()` to get the precise screen coordinates of the nodes, allowing it to calculate the distance and angle of the line. The line's `transform` property is used to rotate it. It uses `transform-origin: top left` so that the rotation happens around the correct point. It calculates the correct relative position of each node using the container's bounding rectangle.
* **`renderMindMap()` Function:** This function is responsible for clearing the container, iterating through the `nodes` array, creating the node elements, creating the line elements, and appending them to the container. It now draws lines after the nodes are rendered, which is necessary to calculate node positions. It also now properly handles the case where there are no nodes other than the central idea, preventing errors. It also now includes error handling to make sure the `fromNode` and `toNode` exist before attempting to create a line.
* **Click Event Handling:** The `click` event on each node now adds a child node to the `nodes` array. It calls `renderMindMap()` to update the display. This is a basic example; in a real application, you'd want more sophisticated node creation and editing.
* **Central Idea Positioning:** The central idea is now positioned correctly in the center of the container.
* **Clearer Code:** The code is better organized with comments explaining each section.
* **Dynamic Node Creation:** The example allows you to add nodes by clicking on existing nodes (limited functionality, but demonstrates the principle).
* **Correct Line Drawing:** The most important part: the lines are now drawn correctly, connecting the centers of the nodes with the correct angle and length.
* **Unique Node IDs:** Uses a random string generator to ensure that each new node has a unique ID. This is *crucial* for avoiding issues when deleting or updating nodes.
* **Error Handling:** Adds a check to ensure nodes exist before attempting to draw a line between them.
To run this:
1. Save the code as an HTML file (e.g., `mindmap.html`).
2. Open the file in your web browser.
Now you should see a simple mind map with a central idea. Clicking on the central idea will add a child node connected by a line. This is a very basic example, but it provides a foundation for a more fully featured web-based mind mapping tool. You would need to add features like:
* Node dragging and repositioning.
* Node editing (changing text).
* More sophisticated node creation (adding different types of nodes).
* Saving and loading mind maps.
* Zooming and panning.
* More advanced styling.
* A more robust data structure to represent the mind map hierarchy.
👁️ Viewed: 7
Comments