xmindltd · gsw945 · Jun 8, 2020 · May 6, 2021 · May 6, 2021 · May 6, 2021
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,21 @@
+{
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "chrome": "53",
+                    "ie": "11"
+                },
+                "useBuiltIns": "entry",
+                "corejs": 3
+            }
+        ]
+    ],
+    "ignore": [
+        "dist/**"
+    ],
+    "plugins": [
+        "@babel/plugin-transform-classes"
+    ]
+}
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# **DEPRECATED** - Never ever use it in a production environment!
+# ~~**DEPRECATED** - Never ever use it in a production environment!~~
 
 # XMind Viewer 
 
@@ -8,6 +8,37 @@ It's very useful for showing a mind map on any web pages. Like a blog post, a bo
 
 XMind Viewer is an official project, made by XMind team, and written in TypeScript.
 
+## Quick Start
+
+```bash
+git clone https://github.com/xmindltd/xmind-viewer.git
+cd xmind-viewer
+# install project dependencies
+npm install --registry=https://registry.npm.taobao.org
+# install parcel
+npm install --save-dev cssnano @babel/preset-env @babel/core --registry=https://registry.npm.taobao.org
+npm install -g parcel --registry=https://registry.npm.taobao.org
+npm install core-js@3 @babel/polyfill @babel/plugin-transform-classes --save --registry=https://registry.npm.taobao.org
+# run
+parcel --port 8989 --log-level 4 --target browser example\index.html
+# build
+# parcel build example\index.html
+# parcel build --log-level 4 --target browser --public-url . example\index.html
+# 参数解释
+# - --public-url .: 资源引用，使用相对路径
+```
+
+### load xmind from url
+```bash
+# eg: http://localhost:8989/?file=http://127.0.0.1:8001/hello.xmind
+
+# xmind file serving
+# install http static server
+npm install http-server -g
+# run in folder(where hello.xmind is)
+http-server -p 8001 --cors
+# refer: https://stackoverflow.com/questions/21956683/enable-access-control-on-simple-http-server/28632834#28632834
+```
 
 ## Usage and Getting Started
 

diff --git a/example/index.html b/example/index.html
@@ -1,8 +1,9 @@
+<!DOCTYPE html>
 <html>
 
 <head>
   <meta charset="UTF-8">
-  <link rel="stylesheet" type="text/css" href="/ui/css/body.css">
+  <link rel="stylesheet" type="text/css" href="./ui/css/body.css">
 
   <title>XMind Viewer v1.0.0</title>
   <style type="text/css">
@@ -31,14 +32,15 @@
 <body>
   <header>
     <div id="logo">
-      <img width="32px" height="32px" src="/ui/assets/icon.png">
+      <img width="32px" height="32px" src="./ui/assets/icon.png">
     </div>
-    <button type="button" id="open-file">Open File</button>
+    <button type="button" id="toggle-fullscreen">全屏切换</button>
+    <button type="button" id="open-file">打开本机XMind文件</button>
     <input id="input-dialog" type="file" style="display: none" />
   </header>
   <div id="page-content"></div>
 
-  <script src="./index.js"></script>
+  <script src="./index.ts"></script>
 </body>
 
 </html>
diff --git a/example/index.js b/example/index.js
diff --git a/example/index.ts b/example/index.ts
@@ -0,0 +1,157 @@
+import 'core-js/stable'
+
+import contentData from './content.json'
+import JSZip from 'jszip'
+import { SheetData } from 'model/sheet'
+import { loadFromXMind, SnowbrushRenderer } from '../src/index'
+
+// https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/append
+// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+
+/**
+ * 获取地址栏参数值
+ * @param param_key 地址栏参数键名
+ */
+function getUrlParam(param_key) {
+    var arr = window.location.search.replace(/^[\?]/, '').split('&');
+    for (var i = 0; i < arr.length; i++) {
+        var value = arr[i].replace(/^[^\=]+[\=]/, '');
+        if(arr[i].replace(value, '') == param_key + '=') {
+            return value;
+        }
+    }
+    return null;
+}
+
+/**
+ * 加载XMind数据
+ * @param {SheetData[]} data XMind数据
+ */
+function load(data: SheetData[]) {
+  const container = document.getElementById('page-content')
+  if (container.children.length > 0) {
+    container.innerHTML = ''
+  }
+
+  const renderer = new SnowbrushRenderer(data)
+  renderer.render()
+  const rendererBounds = renderer.bounds
+
+  const clientWidth = container.clientWidth
+  const clientHeight = container.clientHeight
+  const width = Math.max(clientWidth, rendererBounds.width)
+  const height = Math.max(clientHeight, rendererBounds.height)
+
+  const rendererContainer = document.createElement('div')
+  rendererContainer.setAttribute('style', `width: ${width * 2}; height: ${height * 2}; position: relative;`)
+  rendererContainer.className = 'sheet-container'
+  renderer.svg.addTo(rendererContainer)
+  rendererContainer.style.backgroundColor = renderer.svg.node.style.backgroundColor
+  container.append(rendererContainer)
+
+  renderer.transform(width + rendererBounds.x, height + rendererBounds.y)
+  container.scrollTo(width - clientWidth / 2, height - clientHeight / 2)
+}
+
+/**
+ * 全屏切换
+ */
+function toggleFullScreen() {
+   var doc = window.document;
+   var docEl = doc.documentElement;
+
+   var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
+   var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
+
+   if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
+       requestFullScreen.call(docEl);
+   }
+   else {
+       cancelFullScreen.call(doc);
+   }
+}
+
+let file = getUrlParam("file")
+if (file !== null && file.length > 0) {
+  var request = new XMLHttpRequest();
+  // request.open('GET', "/cors-anywhere?url=" + file, true); // 防止跨域
+  request.open('GET', file, true);
+  request.responseType = 'blob';
+  request.onload = function() {
+    var reader = new FileReader();
+    reader.onload =  function(e){
+      console.log('DataURL:', e.target.result);
+      const jszip = new JSZip()
+      return Promise.all([
+        Promise.resolve(file),
+        jszip.loadAsync(e.target.result).then(zip => {
+          loadFromXMind(zip).then((result: any) => {
+            load(result.sheets)
+          }).catch(function(err) {
+            console.error(err)
+            alert(err)
+          })
+        })
+      ])
+    };
+    reader.readAsArrayBuffer(request.response);
+  };
+  request.send();
+}
+else {
+  load(contentData)
+}
+
+document.getElementById('input-dialog').addEventListener('input', function() {
+  const inputEle = this as HTMLInputElement
+  if (inputEle.files.length === 0) { 
+    return 
+  }
+
+  const file = inputEle.files[0]
+  const fileName = inputEle.value
+  const reader = new FileReader()
+  reader.onload = e => {
+    const jszip = new JSZip()
+    return Promise.all([
+      Promise.resolve(fileName),
+      jszip.loadAsync(e.target.result).then(zip => {
+        loadFromXMind(zip).then((result: any) => {
+          load(result.sheets)
+        })
+      })
+    ])
+  }
+
+  reader.readAsArrayBuffer(file)
+})
+
+document.getElementById('open-file').addEventListener('click', function(){
+  const input = document.getElementById('input-dialog')
+  input.click()
+})
+
+document.getElementById('toggle-fullscreen').addEventListener('click', toggleFullScreen)
diff --git a/package.json b/package.json
@@ -14,14 +14,20 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "typescript": "^3.7.3"
+    "@babel/core": "^7.14.0",
+    "@babel/preset-env": "^7.14.1",
+    "cssnano": "^4.1.11",
+    "typescript": "^3.9.9"
   },
   "dependencies": {
+    "@babel/plugin-transform-classes": "^7.13.0",
+    "@babel/polyfill": "^7.12.1",
     "@svgdotjs/svg.js": "^3.0.16",
     "@types/jszip": "^3.1.6",
     "canvas": "^2.6.1",
+    "core-js": "^3.11.3",
     "jsdom": "^16.4.0",
-    "jszip": "^3.2.2",
+    "jszip": "^3.6.0",
     "svgdom": "^0.1.8"
   },
   "files": [

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2016",
+    "target": "es2015",
     "module": "commonjs",
     "resolveJsonModule": true,
     "esModuleInterop": true,