fix sdk化修改

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

craco.config.js

@@ -0,0 +1,79 @@
+const path = require('path');
+const { name } = require('./package.json')
+
+module.exports = {
+  // 
+
+  // // 暴露的全局名字
+  // name: 'MySdk',
+  // // 输出的各种包文件
+  // fileName: (format) => `my-sdk.${format}.js`,
+  webpack: {
+    // 配置别名
+    alias: {
+      // 约定：使用 @ 表示 src 文件所在路径
+      "@": path.resolve(__dirname, "src")
+    },
+    configure: {
+      entry: path.resolve(__dirname, 'src/index.js'),
+      output: {
+        path: path.resolve(__dirname, 'build'),
+        filename: '3x.umd.js',
+        // publicPath: './sdk',
+        library: 'ThreeX',
+        libraryTarget: 'umd',
+        umdNamedDefine: true
+
+      }
+    }
+    // configure: (webpackConfig, { env, paths }) => {
+    //   // eslint-disable-next-line no-param-reassign
+    //   // webpackConfig.resolve.fallback = {
+    //   //   "path": false,
+    //   //   "util": false,
+    //   //   "url": false,
+    //   //   "http": false,
+    //   //   "https": false,
+    //   //   "stream": false,
+    //   //   "assert": false,
+    //   //   "querystring": false,
+    //   //   "zlib": false,
+    //   //   "timers": false,
+    //   //   "buffer": false,
+    //   // }
+    //   webpackConfig.entry = {
+    //     path.resolve(__dirname, 'src/index.js')
+    //     // main: {
+    //     //   import: 'src/index.js',
+    //     //   library:{
+    //     //     name: 'MySDK',
+    //     //     type: 'umd',
+    //     //     umdNamedDefine: true,
+    //     //   }
+    //     // },
+    //   }
+    //   webpackConfig.output = {
+    //     // ...webpackConfig.output,
+    //     path: path.resolve(__dirname, 'sdk'),
+    //     filename: '[name].js',
+    //     library: `MySDK`,
+    //     libraryTarget: 'umd',
+    //     globalObject: 'window',
+    //     publicPath: './public',
+    //     // library: {
+    //     //   name: 'MySDK',
+    //     //   type: 'root'
+    //     // }
+    //   }
+    //   return webpackConfig
+    // },
+  },
+  // babel: {
+  //   plugins: [
+  //     // babel插件
+  //   ],
+  //   loaderOptions: {
+  //     // babel-loader选项
+  //   }
+  // }
+};

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "indoor-editor",
+  "name": "indoor-monitor",
   "version": "0.0.15",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "indoor-editor",
+      "name": "indoor-monitor",
       "version": "0.0.15",
       "license": "ISC",
       "dependencies": {
@@ -67,6 +67,7 @@
         "xml2js": "^0.4.19"
       },
       "devDependencies": {
+        "@craco/craco": "^5.0.0",
         "assert": "^1.5.0",
         "documentation": "^9.3.1",
         "i18nline": "^2.0.1"
@@ -1578,6 +1579,26 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "node_modules/@craco/craco": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/@craco/craco/-/craco-5.0.0.tgz",
+      "integrity": "sha512-zD8F+3D5AJaUDCzj5G7k9eVcBGomlHjjvpmo2QuqhmVdIclfe1/vfSipazlCc/RhrEnW0J2UoSh1Uf0ga2Tnew==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "6.0.5",
+        "lodash.mergewith": "4.6.1",
+        "webpack-merge": "4.1.4"
+      },
+      "bin": {
+        "craco": "bin/craco.js"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "react-scripts": "*"
+      }
+    },
     "node_modules/@csstools/convert-colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
@@ -14817,6 +14838,12 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "node_modules/lodash.mergewith": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmmirror.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
+      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
+      "dev": true
+    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -24442,6 +24469,15 @@
         "webpack": "2 || 3 || 4"
       }
     },
+    "node_modules/webpack-merge": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/webpack-merge/-/webpack-merge-4.1.4.tgz",
+      "integrity": "sha512-TmSe1HZKeOPey3oy1Ov2iS3guIZjWvMT2BBJDzzT5jScHTjVC3mpjJofgueEzaEd6ibhxRDD6MIblDr8tzh8iQ==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.5"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
@@ -26216,6 +26252,17 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@craco/craco": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/@craco/craco/-/craco-5.0.0.tgz",
+      "integrity": "sha512-zD8F+3D5AJaUDCzj5G7k9eVcBGomlHjjvpmo2QuqhmVdIclfe1/vfSipazlCc/RhrEnW0J2UoSh1Uf0ga2Tnew==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "6.0.5",
+        "lodash.mergewith": "4.6.1",
+        "webpack-merge": "4.1.4"
+      }
+    },
     "@csstools/convert-colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
@@ -37110,6 +37157,12 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.mergewith": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmmirror.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
+      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
+      "dev": true
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -44743,6 +44796,15 @@
         "tapable": "^1.0.0"
       }
     },
+    "webpack-merge": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/webpack-merge/-/webpack-merge-4.1.4.tgz",
+      "integrity": "sha512-TmSe1HZKeOPey3oy1Ov2iS3guIZjWvMT2BBJDzzT5jScHTjVC3mpjJofgueEzaEd6ibhxRDD6MIblDr8tzh8iQ==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.5"
+      }
+    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "indoor-editor",
-  "version": "0.0.15",
-  "description": "Web tool for editing building indoors data",
+  "name": "indoor-monitor",
+  "version": "0.1.0",
+  "description": "Web Monitor for showing indoors data",
   "main": "index.js",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "doc": "npm run doc:js:check && npm run doc:js",
     "doc:js": "documentation build ./src/*.js ./src/ctrl ./src/model ./src/view -f html -o doc/ --shallow",
     "doc:js:check": "documentation lint ./src/*.js ./src/ctrl ./src/model ./src/view --shallow",
@@ -90,6 +90,7 @@
     "xml2js": "^0.4.19"
   },
   "devDependencies": {
+    "@craco/craco": "^5.0.0",
     "assert": "^1.5.0",
     "documentation": "^9.3.1",
     "i18nline": "^2.0.1"

public/config.json

@@ -1,7 +0,0 @@
-{
-	"editor_name": "地图显示",
-	"hash": "GIT_HASH",
-	"data_min_zoom": 18,
-	"map_initial_zoom": 18,
-	"map_initial_latlng": [39.8729, 116.5141]
-}

src/index.js

@@ -10,26 +10,66 @@
  *
  */
 
-import LocationCard from './view/common/LocationCard';
+// import request from 'request-promise-native';
+// import LocationCard from './view/common/LocationCard';
 import App from './view/App'
+import updateMarkerPos from './view/utils/moveMarker'
 
 
-let datas = [
-	new LocationCard(39.96327, 116.36849, 1010, (new Date(Date.now())).toUTCString(), "c1", "1010"),
-	new LocationCard(39.96337, 116.36859, 1010, (new Date(Date.now())).toUTCString(), "c2", "1010")
-];
+/*
+ * Global variables definition
+ */
+window.EDITOR_URL = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + "/";
+window.UNUSABLE_ICONS = new Set();
 
-// Create app
 
-let app = new App("swa3s5ex");
+/*
+ * Global variables definition
+ */
+
+window.EDITOR_URL = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + "/";
+console.log("EDITOR_URL", window.EDITOR_URL)
+window.UNUSABLE_ICONS = new Set();
+
+// Dynamically load config file
+// request(window.EDITOR_URL + "/config.json")
+// 	.then(configTxt => {
+// 		console.log(configTxt)
+// 		window.CONFIG = JSON.parse(configTxt);
+// 		window.EDITOR_NAME = window.CONFIG.editor_name;
+
+// 		// Create app
+// 		new App();
+// 	})
+// 	.catch(e => {
+// 		console.error(e);
+// 		alert("Can't load configuration file, please report this issue.");
+// 	});
+
+window.CONFIG = JSON.parse(`{
+	"editor_name": "编辑器",
+	"hash": "GIT_HASH",
+	"data_min_zoom": 18,
+	"map_initial_zoom": 18,
+	"map_initial_latlng": [39.8729, 116.5141],
+	"providers": {
+		"bing": "AhsSQakuHuX3ozMBXC60w-hPk0KD_smZZbHLjb7mBFfeIwDKJnJn2_qK3qQfYfPZ"
+	},
+	"osm_api_url": "https://master.apis.dev.openstreetmap.org",
+	"oauth_consumer_key": "sJF3Cp7VSQ-SVgy8UoNdMcVDl85-HW1IOZU6-Ec-ZiE",
+	"oauth_secret": "hiapy7lMj09J7BHs4xjEmHG-JEOUMxpmx_C3QN-nCYQ",
+	"always_authenticated": false
+}`);
+
+console.log(window.CONFIG)
+window.EDITOR_NAME = window.CONFIG.editor_name;
+
+// Create app
+// new App({ el: 'root', id: '123' }).init();
 
-setInterval(() => {
-	datas.forEach(item => {
-		item.lng+=0.00001;
-		item.lat+=0.00001;
-	});
-}, 1000);
 
-setInterval(() => {
-	app.updateMarkerPosition(datas);
-}, 1000);
+const ThreeXMAP = {
+	MAP: App,
+	moveMarker: updateMarkerPos,
+}
+export { ThreeXMAP }

src/view/App.js

@@ -8,15 +8,7 @@ import AccountAuth from '../model/AccountAuth';
 import PresetsManager from '../ctrl/PresetsManager';
 import PubSub from 'pubsub-js';
 import VectorDataManager from '../ctrl/VectorDataManager';
-import request from 'request-promise-native';
-
-
-/*
- * Global variables definition
- */
-window.EDITOR_URL = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + "/";
-window.UNUSABLE_ICONS = new Set();
-
+// import request from 'request-promise-native';
 
 
 /**
@@ -24,23 +16,15 @@ window.UNUSABLE_ICONS = new Set();
  * It creates mostly everything.
  */
 export default class App {
-	constructor(uuid) {
-        this.uuid = uuid;
+	constructor(params) {
+		this.el = params.el
+		this.id = params.id
+	}
+
+	init() {
 		this._initI18n();
-		this._initCtrl();        
-
-        // Dynamically load config file
-        request(window.EDITOR_URL + "/config.json")
-        .then(configTxt => {
-            window.CONFIG = JSON.parse(configTxt);
-            window.EDITOR_NAME = window.CONFIG.editor_name;
-            this._initView();
-        })
-        .catch(e => {
-            console.error(e);
-            alert("Can't load configuration file, please report this issue.");
-        });
-        
+		this._initCtrl();
+		this._initView();
 		this._initAuth();
 	}
 
@@ -50,9 +34,9 @@ export default class App {
 	 */
 	_initI18n() {
 		let locale = null;
-		if(window.navigator.languages) {
-			for(const l of window.navigator.languages) {
-				if(I18n.supportedLocales.includes(l)) {
+		if (window.navigator.languages) {
+			for (const l of window.navigator.languages) {
+				if (I18n.supportedLocales.includes(l)) {
 					locale = l;
 					break;
 				}
@@ -81,8 +65,8 @@ export default class App {
 	 * @private
 	 */
 	_initView() {
-		ReactDOM.render(<Body uuid={this.uuid}/>, document.getElementById('root'));
-		document.title=window.EDITOR_NAME;
+		ReactDOM.render(<Body uuid={this.uuid} />, document.getElementById(this.el));
+		document.title = window.EDITOR_NAME;
 
 		// Disabling context menu
 		document.oncontextmenu = () => {
@@ -90,10 +74,6 @@ export default class App {
 		};
 	}
 
-	updateMarkerPosition(datas){
-		PubSub.publish('body.data.update', datas);
-	}
-
 	/**
 	 * Launches authentication process
 	 * @private
@@ -151,10 +131,10 @@ export default class App {
 			// 	});
 			// }
 			console.log("index ", data);
-			if(!window.editor_user_auth.authenticated()) {
+			if (!window.editor_user_auth.authenticated()) {
 				window.editor_user_auth.authenticate(data, (err, res) => {
 					console.log('index ok');
-					if(err) {
+					if (err) {
 						console.error(err);
 						alert("哎呀！尝试登录时出错。");
 						PubSub.publish("app.user.logout");
@@ -174,7 +154,7 @@ export default class App {
 		 * @memberof App
 		 */
 		PubSub.subscribe("app.user.logout", (msg, data) => {
-			if(window.editor_user_auth && window.editor_user_auth.authenticated()) {
+			if (window.editor_user_auth && window.editor_user_auth.authenticated()) {
 				window.editor_user_auth.logout();
 			}
 
@@ -222,8 +202,8 @@ export default class App {
 	 * @private
 	 */
 	_checkAuth(res) {
-		if(window.editor_user_auth.authenticated()) {
-			if(this.authWait) {
+		if (window.editor_user_auth.authenticated()) {
+			if (this.authWait) {
 				clearInterval(this.authWait);
 			}
 
@@ -253,7 +233,7 @@ export default class App {
 
 				localStorage.setItem("editor_token", res.user_token);
 			}
-			catch(e) {
+			catch (e) {
 				console.error(e);
 				PubSub.publish("app.user.logout");
 			}
@@ -299,12 +279,12 @@ export default class App {
 	_readURLParams(str) {
 		const u = str.split('?');
 
-		if(u.length > 1) {
+		if (u.length > 1) {
 			const p = u[1].split('#')[0];
 
 			return p.split('&').filter(function (pair) {
 				return pair !== '';
-			}).reduce(function(obj, pair){
+			}).reduce(function (obj, pair) {
 				var parts = pair.split('=');
 				obj[decodeURIComponent(parts[0])] = (null === parts[1]) ?
 					'' : decodeURIComponent(parts[1]);

src/view/utils/moveMarker.js

@@ -0,0 +1,11 @@
+import PubSub from 'pubsub-js';
+
+
+/** * 更新标记位置 * * 
+ * @param {Object} data - 根据data.type类型，将不同的标记按照data.data移动 * 
+*/
+export default function updateMarkerPos(data) {
+  if (data.type === "card") {
+    PubSub.publish('body.data.update', data.data);
+  }
+}