First revision of the vue component of flatmap viwer.

ABI-Software · Jan 14, 2020 · 756dfd2 · 756dfd2
1 parent 0728174
commit 756dfd2
Show file tree

Hide file tree

Showing 11 changed files with 13,875 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+dist
+test_html
+node_modules
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      "component",
+      {
+        libraryName: "element-ui",
+        styleLibraryName: "theme-chalk"
+      }
+    ]
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "@abi-software/flatmapvuer",
+  "version": "0.1.0",
+  "main": "./dist/flatmapvuer.common.js",
+  "files": [
+    "dist/*",
+    "src/*",
+    "public/*",
+    "*.json",
+    "*.js"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve --port 8082",
+    "build": "vue-cli-service build --dest test_html",
+    "build-bundle": "vue-cli-service build --target lib --name flatmapvuer ./src/components/index.js",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@dbrnz/flatmap-viewer": "^0.8.10",
+    "broadcast-channel": "^3.0.3",
+    "core-js": "^3.3.2",
+    "element-ui": "^2.13.0",
+    "file-loader": "^5.0.2",
+    "lodash": "^4.17.15",
+    "vue": "^2.6.10"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.0.0",
+    "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-service": "^4.0.0",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-component": "^1.1.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>flatmapvuer</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but scaffoldvuer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,39 @@
+<template>
+  <div id="app">
+    <FlatmapVuer entry="NCBITaxon:10114" ref="flatmap" v-on:resource-selected="FlatmapSelected"/>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import FlatmapVuer from './components/FlatmapVuer.vue'
+
+export default {
+  name: 'app',
+  methods: {
+    FlatmapSelected: function(resources) {
+      console.log(resources);
+    }
+  },
+  components: {
+    FlatmapVuer
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  height:100%;
+  width: 100%;
+  position:absolute;
+}
+
+body {
+  margin: 0px;
+}
+</style>
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="flatmap-container">
+    <div style="height:100%;width:100%;position:relative">
+      <div id="flatmapDisplayArea" style="height:100%;width:100%;" ref="display"></div>
+      <div class="check-list">
+        <el-checkbox-group v-if="numberOfSelectableLayers > 1" v-model="checkbox" size="small">
+          <el-row v-for="item in layers" :key="item.id">
+            <div v-if="item.selectable" style= "display: flex;justify-content: space-between;">
+              <el-checkbox
+                style="margin-top:3px;"
+                :label="item.id"
+                @change="visibilityToggle(item.id, $event)"
+                :checked="item.selected"
+                border
+              >{{item.id}}</el-checkbox>
+            </div>
+          </el-row>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import {
+  Checkbox,
+  CheckboxGroup,
+  Row
+} from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+locale.use(lang);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
+Vue.use(Row);
+
+const flatmap = require("@dbrnz/flatmap-viewer");
+const { BroadcastChannel } = require('broadcast-channel');
+
+const processMessage = function(component) {
+  return function(message) {
+    switch(message.action) {
+      case "query-data":
+        if (message.data['local-sender'] == component.uniqueId) {
+          const data = { describes: message.data.describes, resource: message.resource};
+          component.$emit("resource-selected", data);
+        }
+        break;
+    default:
+      break;
+    }
+  };
+};
+
+export default {
+  name: "FlatmapVuer",
+  beforeCreate: function() {
+    this.mapManager = new flatmap.MapManager();
+    this.channel = new BroadcastChannel('sparc-mapcore-channel');
+		this.channel.onmessage = processMessage(this);
+    this.mapImp = undefined;
+    this.uniqueId = undefined;
+  },
+  methods: {
+    visibilityToggle: function(id, event) {
+      if (this.mapImp._userInteractions) {
+        if (event)
+          this.mapImp._userInteractions.activateLayer(this.mapImp.mapLayerId(id));
+        else
+          this.mapImp._userInteractions.deactivateLayer(this.mapImp.mapLayerId(id));
+      }
+    }
+  },
+  props: { entry: String },
+  data: function() {
+    return {
+      checkbox:[],
+      layers: {}
+    };
+  },
+  computed: {
+    numberOfSelectableLayers : function() {
+      let count = 0;
+      for (let i = 0; i < this.layers.length;i++) {
+        if (this.layers[i].selectable)
+          count++;
+      }
+      return count;
+    }
+  },
+  mounted: function() {
+    var promise1 = this.mapManager.loadMap(this.entry, this.$refs.display,
+      { fullscreenControl: false, annotatable: false });
+		promise1.then(returnedObject => {
+      this.mapImp = returnedObject;
+      this.uniqueId = this.mapImp.uniqueId;
+      this.$refs.display.querySelector(".mapboxgl-control-container").style.display = "none";
+      this.layers = this.mapImp.layers;
+		});
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.flatmap-container {
+  height: 100%;
+  width: 100%;
+}
+
+.check-list {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  height: calc(100% - 20px);
+  text-align: left;
+  overflow:auto;
+}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,16 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from "vue";
+import FlatmapVuer from "./FlatmapVuer.vue";
+
+
+const Components = {
+  FlatmapVuer
+};
+
+Object.keys(Components).forEach(name => {
+  Vue.component(name, Components[name]);
+});
+
+export default Components;
+
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,2 @@
+module.exports = {
+}