mindmapplain.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title id="document-title">Mind Map</title>
  <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.12.0/libs/jszip.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.12.0/dist/pptxgen.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
   <!-- PptxGenJS -->
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #mindmap-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      background-color: #f0f0f0;
    }

    .node {
      position: absolute;
      padding: 8px 12px;
      background-color: #FFFFFF;
      border-radius: 5px;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.3s, box-shadow 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
      border: 1px solid #999;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
      white-space: nowrap;
      min-width: 100px;
      min-height: 60px;
      box-sizing: border-box;
    }

    .node:hover {
      background-color: #FFA500;
      box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);
    }

    .node:focus {
      outline: none;
      box-shadow: 0 0 0 2px #0000FF, 2px 2px 10px rgba(0, 0, 0, 0.2);
    }

    .central-node {
      font-size: 24px; /* Increased font size for central node */
      background-color: #FFA500;
      color: #000000; /* Default text color */
    }

    .color-swatch {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin: 0 4px;
      cursor: pointer;
      display: inline-block;
      border: 1px solid #333;
    }

    svg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      pointer-events: none;
      width: 100%;
      height: 100%;
    }

    #button-container {
      position: absolute;
      top: 10px;
      left: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 10;
    }

    #main-buttons {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    #bottom-buttons {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* Common styling for all main buttons */
    .main-button {
      padding: 8px 16px;
      background-color: #2196F3;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s;
    }

    .main-button:hover {
      background-color: #1976D2;
    }

    /* Specific style for Delete Node button */
    .delete-button {
      background-color: #FF5722;
    }

    .delete-button:hover {
      background-color: #E64A19;
    }
    /* Styles for the upload button to make it red */
    #upload-json-btn {
      padding: 8px 16px;
      background-color: #FF5722; /* Red background color */
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s;
    }

    #upload-json-btn:hover {
      background-color: #E64A19; /* Darker red on hover */
    }
    #upload-json {
      display: none;
    }

    @media print {
      #button-container {
        display: none;
      }
    }
  </style>
</head>
<body>
<div id="mindmap-container">
  <svg id="svg-connections"></svg>
  <!-- Central Node with Placeholder -->
  <div id="central-node" class="node central-node" contenteditable="true" tabindex="0" data-placeholder="Central topic"></div>
  <div id="button-container">
    <!-- First Row: Main Buttons -->
    <div id="main-buttons">
      <a href="https://jamesabela.github.io/jsfun/mindmapplain.html" target="_blank">
        <button class="main-button">New Mindmap</button>
      </a>
      <button id="copy-text-btn" class="main-button">Copy Text</button>
      <button id="export-png-btn" class="main-button">Export PNG</button>
      <button id="export-pptx-btn" class="main-button">Export PPTX</button>
      <button id="download-json-btn" class="main-button">Download JSON</button>
      <button id="upload-json-btn" onclick="document.getElementById('upload-json').click()">Upload JSON</button>
      <input type="file" id="upload-json" style="display: none;" />
      <button id="delete-node-btn" class="main-button delete-button">Delete Node</button>
      <button id="undo-btn" class="main-button">Undo</button>
      <button id="redo-btn" class="main-button">Redo</button>
      <button id="add-node-btn" class="main-button">+Node (Enter)</button>
      <button id="add-child-btn" class="main-button">+ Child Node (Tab)</button>
    </div>
    <!-- Second Row: Color Palette and Emoji Buttons -->
    <div id="bottom-buttons">
      <div id="color-palette">
        <div class="color-swatch" style="background-color: #FFFFFF;" data-color="#FFFFFF"></div>
        <div class="color-swatch" style="background-color: #FFD700;" data-color="#FFD700"></div>
        <div class="color-swatch" style="background-color: #FF4500;" data-color="#FF4500"></div>
        <div class="color-swatch" style="background-color: #32CD32;" data-color="#32CD32"></div>
        <div class="color-swatch" style="background-color: #1E90FF;" data-color="#1E90FF"></div>
        <div class="color-swatch" style="background-color: #BA55D3;" data-color="#BA55D3"></div>
      </div>
      <!-- Emoji Buttons -->
      <div id="emoji-buttons">
        <button class="emoji-btn" data-emoji="💡">💡</button>
        <button class="emoji-btn" data-emoji="🧠">🧠</button>
        <button class="emoji-btn" data-emoji="📚">📚</button>
        <button class="emoji-btn" data-emoji="🎯">🎯</button>
        <button class="emoji-btn" data-emoji="✅">✅</button>
        <button class="emoji-btn" data-emoji="❌">❌</button>
        <button class="emoji-btn" data-emoji="🛠️">🛠️</button>
        <button class="emoji-btn" data-emoji="🚦">🚦</button>
        <button class="emoji-btn" data-emoji="🎬">🎬</button>
      </div>
      <p xmlns:cc="http://creativecommons.org/ns#" ><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>
    </div>
  </div>
</div>
<script>
  const container = document.getElementById('mindmap-container');
  const svg = document.getElementById('svg-connections');
  const centralNode = document.getElementById('central-node');
  const documentTitle = document.getElementById('document-title');
  const copyTextBtn = document.getElementById('copy-text-btn');
  const deleteNodeBtn = document.getElementById('delete-node-btn');
  const undoBtn = document.getElementById('undo-btn');
  const redoBtn = document.getElementById('redo-btn');
  const addNodeBtn = document.getElementById('add-node-btn');
  const addChildBtn = document.getElementById('add-child-btn');
  const exportPngBtn = document.getElementById('export-png-btn');
  const buttonContainer = document.getElementById('button-container');
  const colorPalette = document.getElementById('color-palette');
  const emojiButtons = document.querySelectorAll('.emoji-btn');

  const colors = ['#FFFFFF', '#FFD700', '#FF4500', '#32CD32', '#1E90FF', '#BA55D3'];

  let nodesData = [];
  let undoStack = [];
  let redoStack = [];
  let selectedNodeId = null;
  let siblingAngle = 0; // Angle to track placement for sibling nodes
  let childAngle = 300; // Initial angle for child nodes, set to 5 o'clock (300 degrees)

  function generateId() {
    return 'node-' + Math.random().toString(36).substr(2, 9);
  }

  // Initialize central node with fixed ID and empty text
  const centralNodeId = 'central-node';
  nodesData.push({
    id: centralNodeId,
    parentId: null,
    x: 0,
    y: 0,
    color: colors[0],
    text: '' // Empty text for central node to show placeholder
  });

  function updateDocumentTitle() {
    const centralNodeData = nodesData.find(n => n.id === centralNodeId);
    if (centralNodeData) {
      documentTitle.textContent = centralNodeData.text || 'Mind Map';
    }
  }

  function renderMindMap() {
    const existingNodes = container.querySelectorAll('.node');
    existingNodes.forEach(node => {
      if (node.id !== 'central-node') { // Preserve the central node
        container.removeChild(node);
      }
    });

    nodesData.forEach(node => {
      if (node.id === centralNodeId) {
        centralNode.style.left = `${node.x}px`;
        centralNode.style.top = `${node.y}px`;
        centralNode.style.backgroundColor = node.color;
        centralNode.innerText = node.text;

        // Attach event listeners if not already attached
        if (!centralNode.dataset.listenersAttached) {
          addEventListenersToNode(centralNode, node.id);
          centralNode.dataset.listenersAttached = 'true';
        }
        return;
      }

      const nodeDiv = document.createElement('div');
      nodeDiv.className = 'node';
      nodeDiv.id = node.id;
      nodeDiv.contentEditable = true;
      nodeDiv.tabIndex = 0;
      nodeDiv.style.left = `${node.x}px`;
      nodeDiv.style.top = `${node.y}px`;
      nodeDiv.style.backgroundColor = node.color;
      nodeDiv.innerText = node.text;

      addEventListenersToNode(nodeDiv, node.id);
      container.appendChild(nodeDiv);
    });

    drawConnections();
    highlightSelectedNode();
    updateDocumentTitle();
    updateURL();
  }

  function addEventListenersToNode(nodeDiv, nodeId) {
    nodeDiv.addEventListener('click', (e) => {
      e.stopPropagation(); // Prevent triggering container's click
      setSelectedNode(nodeId);
    });

    nodeDiv.addEventListener('keydown', (e) => handleKeyDown(e, nodeId));

    nodeDiv.addEventListener('mousedown', startDrag);

    nodeDiv.addEventListener('input', () => updateNodeText(nodeId));
  }

  function handleKeyDown(event, nodeId) {
    const isCentralNode = nodeId === centralNodeId;
    if (event.key === 'Enter') {
      event.preventDefault();
      if (isCentralNode) {
        addNode(nodeId);
      } else {
        addSiblingNode(nodeId);
      }
    } else if (event.key === 'Tab') {
      event.preventDefault();
      addNode(nodeId);
    }
  }

  function setSelectedNode(nodeId) {
    selectedNodeId = nodeId;
    highlightSelectedNode();
  }

  function highlightSelectedNode() {
    const nodes = container.querySelectorAll('.node');
    nodes.forEach(node => {
      if (node.id === selectedNodeId) {
        node.style.border = '2px solid #0000FF';
      } else {
        node.style.border = '1px solid #999';
      }
    });
  }

  function addNode(parentId) {
    if (!parentId) {
      alert('No parent node selected.');
      return;
    }
    const newId = generateId();
    const nodeDiv = document.getElementById(parentId);
    const radius = 150;
    const parentX = nodeDiv.offsetLeft;
    const parentY = nodeDiv.offsetTop;
    let newX = parentX + radius * Math.cos(childAngle * Math.PI / 180);
    let newY = parentY + radius * Math.sin(childAngle * Math.PI / 180);

    // Constrain the Y position of the new child node
    const containerRect = container.getBoundingClientRect();
    newY = Math.max(100, Math.min(newY, containerRect.height - 100));  // Prevent creation too high or too low

    const newNode = {
      id: newId,
      parentId: parentId,
      x: newX,
      y: newY,
      color: colors[0],
      text: ''
    };
    pushToUndo();
    nodesData.push(newNode);
    renderMindMap();
    focusNode(newId);
  }


  function addSiblingNode(currentNodeId) {
    const currentNode = nodesData.find(n => n.id === currentNodeId);
    if (!currentNode) return;

    const siblingRadius = 200;
    let siblingX = currentNode.x + siblingRadius * Math.cos(siblingAngle * Math.PI / 180);
    let siblingY = currentNode.y + siblingRadius * Math.sin(siblingAngle * Math.PI / 180);
    siblingAngle += 45;

    // Constrain the Y position of the new sibling node
    const containerRect = container.getBoundingClientRect();
    siblingY = Math.max(100, Math.min(siblingY, containerRect.height - 100));  // Prevent creation too high or too low

    const newId = generateId();
    const newNode = {
      id: newId,
      parentId: currentNode.parentId,
      x: siblingX,
      y: siblingY,
      color: colors[0],
      text: ''
    };
    pushToUndo();
    nodesData.push(newNode);
    renderMindMap();
    focusNode(newId);
  }


  function deleteSelectedNode() {
    if (!selectedNodeId) {
      alert('No node selected for deletion.');
      return;
    }

    if (selectedNodeId === centralNodeId) {
      alert('Cannot delete the central node.');
      return;
    }

    pushToUndo();
    function deleteRecursively(id) {
      const children = nodesData.filter(n => n.parentId === id);
      children.forEach(child => deleteRecursively(child.id));
      nodesData = nodesData.filter(n => n.id !== id);
    }
    deleteRecursively(selectedNodeId);
    selectedNodeId = null;
    renderMindMap();
  }

  function changeNodeColor(color) {
    if (!selectedNodeId) return;
    const node = nodesData.find(n => n.id === selectedNodeId);
    if (node) {
      pushToUndo();
      node.color = color;
      renderMindMap();
    }
  }

  function updateNodeText(nodeId) {
    const node = nodesData.find(n => n.id === nodeId);
    const nodeDiv = document.getElementById(nodeId);
    if (node && nodeDiv) {
      node.text = nodeDiv.innerText;
      updateDocumentTitle();
      updateURL();
    }
  }

  function pushToUndo() {
    undoStack.push(JSON.parse(JSON.stringify(nodesData)));
    redoStack = [];
  }

  function undo() {
    if (undoStack.length === 0) return;
    redoStack.push(JSON.parse(JSON.stringify(nodesData)));
    nodesData = undoStack.pop();
    renderMindMap();
  }

  function redo() {
    if (redoStack.length === 0) return;
    undoStack.push(JSON.parse(JSON.stringify(nodesData)));
    nodesData = redoStack.pop();
    renderMindMap();
  }

  let isDraggingFlag = false;
  let currentDraggedNodeId = null;
  let dragOffsetX = 0;
  let dragOffsetY = 0;

  function startDrag(event) {
    if (event.target.classList.contains('node')) {
      isDraggingFlag = true;
      currentDraggedNodeId = event.target.id;
      const nodeRect = event.target.getBoundingClientRect();
      const containerRect = container.getBoundingClientRect();
      dragOffsetX = event.clientX - nodeRect.left;
      dragOffsetY = event.clientY - nodeRect.top;
      document.addEventListener('mousemove', dragNode);
      document.addEventListener('mouseup', stopDrag);
    }
  }

  function dragNode(event) {
    if (!isDraggingFlag || !currentDraggedNodeId) return;
    const containerRect = container.getBoundingClientRect();
    let newX = event.clientX - containerRect.left - dragOffsetX;
    let newY = event.clientY - containerRect.top - dragOffsetY;

    // Constrain X and Y to the bounds of the container
    newX = Math.max(0, Math.min(newX, containerRect.width - 100));  // Ensure node stays within the width of the container
    newY = Math.max(100, Math.min(newY, containerRect.height - 100));  // Ensure node stays within the height of the container, but not too high (e.g., 50px from the top)

    const node = nodesData.find(n => n.id === currentDraggedNodeId);
    if (node) {
      node.x = newX;
      node.y = newY;
      renderMindMap();
    }
  }


  function stopDrag() {
    isDraggingFlag = false;
    currentDraggedNodeId = null;
    document.removeEventListener('mousemove', dragNode);
    document.removeEventListener('mouseup', stopDrag);
    updateURL();
  }

  function focusNode(nodeId) {
    const nodeDiv = document.getElementById(nodeId);
    if (nodeDiv) {
      nodeDiv.focus();
      setSelectedNode(nodeId);
    }
  }

  function drawConnections() {
    svg.innerHTML = '';

    nodesData.forEach(node => {
      if (node.parentId) {
        const parentNode = nodesData.find(n => n.id === node.parentId);
        if (parentNode) {
          drawLine(parentNode, node);
        }
      }
    });
  }

  function drawLine(parent, child) {
    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', parent.x + 50); // Adjust based on node width
    line.setAttribute('y1', parent.y + 30); // Adjust based on node height
    line.setAttribute('x2', child.x + 50); // Adjust based on node width
    line.setAttribute('y2', child.y + 30); // Adjust based on node height
    line.setAttribute('stroke', 'black');
    line.setAttribute('stroke-width', '2');
    svg.appendChild(line);
  }

  function updateURL() {
    const serializedData = JSON.stringify(nodesData);
    const encodedData = btoa(encodeURIComponent(serializedData));
    window.history.replaceState(null, null, '#' + encodedData);
  }

  function copyText() {
    const nodeTexts = nodesData.map(node => `${'\t'.repeat(getNodeDepth(node.id))}${node.text}`);
    const textToCopy = nodeTexts.join('\n');
    navigator.clipboard.writeText(textToCopy)
            .then(() => {
              alert('Mind map text copied to clipboard!');
            })
            .catch(err => {
              console.error('Failed to copy text: ', err);
            });
  }

  function getNodeDepth(nodeId, depth = 0) {
    const node = nodesData.find(n => n.id === nodeId);
    if (node && node.parentId) {
      return getNodeDepth(node.parentId, depth + 1);
    }
    return depth;
  }

  window.addEventListener('load', () => {
    loadFromURL();
    centralNode.focus();
    setSelectedNode(centralNodeId);
  });

  window.addEventListener('beforeunload', () => {
    updateURL();
  });

  window.addEventListener('resize', () => {
    renderMindMap();
  });

  // Event listeners for main buttons
  copyTextBtn.addEventListener('click', copyText);
  deleteNodeBtn.addEventListener('click', deleteSelectedNode);
  undoBtn.addEventListener('click', undo);
  redoBtn.addEventListener('click', redo);
  addNodeBtn.addEventListener('click', () => addSiblingNode(selectedNodeId));
  addChildBtn.addEventListener('click', () => addNode(selectedNodeId));
  document.getElementById('download-json-btn').addEventListener('click', downloadJSON);

  exportPngBtn.addEventListener('click', function () {
    buttonContainer.style.display = 'none';

    html2canvas(container, { scale: 2 }).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      // Name the PNG file based on the central node text
      const centralNodeText = nodesData.find(n => n.id === centralNodeId)?.text || 'MindMap';
      const fileName = `${centralNodeText.replace(/\s+/g, '_') || 'MindMap'}.png`;
      link.href = imgData;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }).finally(() => {
      buttonContainer.style.display = 'flex';
    });
  });

  // Download JSON with proper Unicode/emoji support
  function downloadJSON() {
    const centralNodeText = nodesData.find(n => n.id === centralNodeId)?.text || 'MindMap';
    const fileName = `${centralNodeText.replace(/\s+/g, '_') || 'MindMap'}.json`;

    // Encode the JSON data using TextEncoder for full Unicode/emoji support
    const serializedData = JSON.stringify(nodesData);
    const encoder = new TextEncoder();
    const encodedData = encoder.encode(serializedData);

    const blob = new Blob([encodedData], { type: "application/json" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }


  // Upload JSON with proper Unicode/emoji support
  document.getElementById('upload-json').addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function (e) {
      try {
        // Use readAsText() to handle the file as text
        const decodedData = e.target.result;  // No need for TextDecoder here

        const parsedData = JSON.parse(decodedData);
        nodesData = parsedData;

        // Re-render the mind map with the uploaded data
        renderMindMap();

      } catch (error) {
        console.error('Failed to load mind map:', error);
        alert('Invalid mind map file.');
      }
    };
    reader.readAsText(file);  // Read the file as text
  });


  // Event listener for color palette
  colorPalette.addEventListener('click', (event) => {
    if (event.target.classList.contains('color-swatch')) {
      const color = event.target.getAttribute('data-color');
      changeNodeColor(color);
    }
  });

  // Event listeners for emoji buttons
  emojiButtons.forEach(button => {
    button.addEventListener('click', () => {
      const emoji = button.getAttribute('data-emoji');
      addEmojiToSelectedNode(emoji);
    });
  });

  function addEmojiToSelectedNode(emoji) {
    if (!selectedNodeId) {
      alert('No node selected.');
      return;
    }
    const node = nodesData.find(n => n.id === selectedNodeId);
    if (node) {
      pushToUndo();
      const emojis = ['💡', '🧠', '📚', '🎯', '✅', '❌', '🛠️', '🚦', '🎬'];
      let currentText = node.text.trim();

      const existingEmoji = emojis.find(e => currentText.startsWith(e));

      if (existingEmoji) {
        node.text = currentText.replace(existingEmoji, emoji);
      } else {
        node.text = (currentText ? emoji + ' ' + currentText : emoji);
      }

      renderMindMap();
    }
  }

  function loadFromURL() {
    if (window.location.hash.length > 1) {
      try {
        const encodedData = window.location.hash.substring(1);
        const decodedData = decodeURIComponent(atob(encodedData));
        const parsedData = JSON.parse(decodedData);

        const central = parsedData.find(n => n.parentId === null);
        if (central) {
          central.id = centralNodeId;
          nodesData = parsedData.map(n => n.id === central.id ? central : n);
        } else {
          nodesData = [{
            id: centralNodeId,
            parentId: null,
            x: 0,
            y: 0,
            color: colors[0],
            text: ''
          }];
        }

        renderMindMap();
      } catch (error) {
        console.error('Failed to load mind map from URL:', error);
        centerNodePosition(centralNodeId);
        renderMindMap();
      }
    } else {
      centerNodePosition(centralNodeId);
      renderMindMap();
    }
  }

  function centerNodePosition(nodeId) {
    const node = nodesData.find(n => n.id === nodeId);
    if (node) {
      const containerRect = container.getBoundingClientRect();
      node.x = (containerRect.width / 2) - 50;
      node.y = (containerRect.height / 2) - 30;
    }
  }
// Export PPTX
  document.getElementById('export-pptx-btn').addEventListener('click', function() {
    const pptx = new PptxGenJS();

    // Slide 1: Title Slide with Central Node Name
    const centralNodeText = nodesData.find(n => n.id === centralNodeId)?.text || 'Mind Map';
    const titleSlide = pptx.addSlide({ masterName: 'TITLE_SLIDE' });

    // Expand the title text box for the first slide
    titleSlide.addText(centralNodeText, {
      x: 0.5,
      y: 2,
      w: 9,  // Expanding the width of the title text box
      h: 1,  // Expanding the height of the title text box
      fontSize: 36,
      bold: true,
      align: 'center'
    });

    // Slide 2: Mind Map Image
    const slide2 = pptx.addSlide();

    // Hide toolbar for the export
    buttonContainer.style.display = 'none';

    html2canvas(container, { scale: 2 }).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      slide2.addImage({ data: imgData, x: 0, y: 0, w: 10, h: 5.625 });

      // Slide 3: Single Text Box with Proper Bulleted List (Flat, no indentation)
      const slide3 = pptx.addSlide();

// Title for the slide
      slide3.addText(centralNodeText, {
        x: 0.5,
        y: 0.1,
        w: 9,  // Make the text box wide enough
        h: 1,  // Adjust the height as needed for the title
        fontSize: 24,
        bold: true
      });

// Create a string to hold all bullet points, flat list (no indentation)
      let bulletPointsText = '';

// Loop through each node and build the string for the flat bullets, without a final extra newline
      nodesData.forEach((node, index) => {
        if (node.id !== centralNodeId) {  // Skip the central node
          bulletPointsText += `${node.text || 'Node'}`;
          if (index !== nodesData.length - 1) {  // Add a newline unless it's the last item
            bulletPointsText += '\n';
          }
        }
      });

// Add the entire string as a single bulleted text box
      slide3.addText(bulletPointsText, {
        x: 0.5,  // X position for the text box
        y: 1,    // Y position for the bullets
        w: 9,    // Width of the text box
        h: 4.5,  // Height of the text box
        fontSize: 18,
        align: 'left',
        bullet: true  // Enable PowerPoint's bullet functionality
      });


      // Slide 4: Mind Map Link
      const slide4 = pptx.addSlide();
      const mindmapLink = window.location.href;

      // Add the title for the slide
      slide4.addText('Edit the Mind Map Here:', {
        x: 0.5,
        y: 0.2,
        w: 9,  // Expanding the width of the title text box
        h: 1,  // Expanding the height of the title text box
        fontSize: 24,
        bold: true
      });

// Display the mind map URL as plain text, size 8, without hyperlink
      slide4.addText(mindmapLink, {
        x: 0.5,
        y: 1,
        fontSize: 8,    // Set font size to 8
        w: 9,           // Expand width of the text box to fit the content
        h: 1,           // Adjust height as needed
        align: 'left'
      });

// Add the "Created with" message and CC BY-NC-SA link
      slide4.addText("Created with James Abela's Mindmapping tool", {
        x: 0.5,
        y: 5,  // Position it at the bottom of the slide
        fontSize: 12,
        w: 9,
        align: 'center'
      });
      slide4.addText("CC BY-NC-SA 4.0", {
        x: 0.5,
        y: 5.3,  // Slightly below the previous text
        fontSize: 12,
        hyperlink: { url: "https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" },
        w: 9,
        align: 'center'
      });

// Add the full link to the presenter notes
      slide4.addNotes(mindmapLink);

      // Restore toolbar after export
      buttonContainer.style.display = 'flex';

      // Name the file based on the central node's text
      const fileName = `${centralNodeText.replace(/\s+/g, '_') || 'MindMap'}.pptx`;

      // Save the PowerPoint
      pptx.writeFile(fileName);
    }).finally(() => {
      buttonContainer.style.display = 'flex';  // Ensure toolbar is restored even if export fails
    });
  });

</script>
<!-- 100% privacy-first analytics -->
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
</body>
</html>