wanglin2/mind-map

Not working, only blank page loaded

Closed this issue · 1 comments

tifDev commented

Here are the logs:

Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
http://127.0.0.1:8081
http://192.168.1.66:8081
http://192.168.1.75:8081
Hit CTRL-C to stop the server

[2024-11-01T14:38:16.497Z] "GET /" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0"
(node:118190) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
[2024-11-01T14:38:16.574Z] "GET /style.css" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0"
[2024-11-01T14:38:16.578Z] "GET /node_modules/simple-mind-map/dist/simple-mind-map.min.js" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0"
[2024-11-01T14:38:16.580Z] "GET /script.js" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0"
[2024-11-01T14:38:16.583Z] "GET /node_modules/simple-mind-map/dist/simple-mind-map.min.js" Error (404): "Not found"
[2024-11-01T14:38:16.674Z] "GET /favicon.ico" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0"
[2024-11-01T14:38:16.675Z] "GET /favicon.ico" Error (404): "Not found"
[2024-11-01T14:38:48.680Z] "GET /style.css" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0"

Installed via:

npm i simple-mind-map
npm install -g http-server

Directory:

.
├── node_modules
├── index.html
├── package.json
├── package-lock.json
├── script.js
└── style.css

1 directory, 5 files


$ cat index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.esm.css">
    <title>Simple Mind Map</title>
</head>
<body>
    <div id="mindMapContainer" style="width: 100%; height: 500px;"></div>
    <script src="node_modules/simple-mind-map/dist/simple-mind-map.min.js"></script>
    <script src="https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.umd.min.js"></script>
</body>
</html>


$ cat style.css 
#mindMapContainer * {
    margin: 0;
    padding: 0;
}


$ cat script.js 
import MindMap from "simple-mind-map";

// Create a new instance of MindMap
const mindMap = new MindMap({
  el: document.getElementById("mindMapContainer"),
  data: {
    data: {
      text: "根节点",  // This is the main node text
    },
    children: [], // You can add children nodes here
  },
});

// Example of adding child nodes
mindMap.setData({
  data: {
    text: "根节点",
  },
  children: [
    {
      data: {
        text: "子节点 1",
      },
      children: [],
    },
    {
      data: {
        text: "子节点 2",
      },
      children: [
        {
          data: {
            text: "子节点 2.1",
          },
          children: [],
        },
      ],
    },
  ],
});

Note: Used CDN but also dind't worked with local files.

wanglin2 commented

If you use simpleMindMap.umd.min.js file, you cannot use 'import' to import, Just use global variables directly: new window.simpleMindMap.default({})

You can refer to this document: https://wanglin2.github.io/mind-map-docs/en/start/start.html#usage

image