ABI-Software · alan-wu · Mar 9, 2020 · Feb 12, 2020 · Mar 9, 2020
diff --git a/README.md b/README.md
@@ -1,2 +1,5 @@
 # mapintegratedvuer
-Integrated Map Vuer
+
+This project aims to create a easy to use and visually pleasing
+way to navigate through anatomical/physiologically accurate 
+structure of various species.
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,63 @@
+{
+  "name": "@abi-software/mapintegratedvuer",
+  "version": "0.1.0",
+  "main": "./dist/mapintegratedvuer.common.js",
+  "files": [
+    "dist/*",
+    "src/*",
+    "public/*",
+    "*.json",
+    "*.js"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve --port 8081",
+    "build-bundle": "vue-cli-service build --target lib --name mapintegratedvuer ./src/components/index.js",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@abi-software/flatmapvuer": "^0.1.2",
+    "@abi-software/scaffoldvuer": "^0.1.13",
+    "@tehsurfer/plotvuer": "^0.1.4",
+    "core-js": "^3.3.2",
+    "element-ui": "^2.13.0",
+    "lodash": "^4.17.15",
+    "physiomeportal": "^0.4.13",
+    "splitpanes": "^2.2.1",
+    "vue": "^2.6.10",
+    "vue-draggable-resizable": "^2.1.0"
+  },
+  "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",
+    "raw-loader": "^0.5.1",
+    "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>Physiome Portal</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but Physiome Portal 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,32 @@
+<template>
+  <div id="app">
+    <MapIntegratedVuer />
+  </div>
+</template>
+
+<script>
+import MapIntegratedVuer from './components/MapIntegratedVuer.vue'
+
+export default {
+  name: 'app',
+  components: {
+    MapIntegratedVuer
+  }
+}
+</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/FloatingDialog.vue b/src/components/FloatingDialog.vue
@@ -0,0 +1,105 @@
+<template>
+    <vue-draggable-resizable :style="style" :w="500" :h="500" :resizable="true" @dragstop="onDragstop" @resizing="onResize" :parent="true" drag-handle=".dialog-header" class-name="resizeable-class">
+      <el-container style="height:100%;background:white;">
+        <el-header style="text-align: left; font-size: 12px" height="30px" class="dialog-header">
+          Place Holder
+        </el-header>
+        <el-main class="dialog-main">
+          <FlatmapVuer v-if="entry.type === 'Flatmap'" :entry="entry.resource" @resource-selected="resourceSelected(entry.type, $event)"  :name="entry.resource"  style="height:100%;width:100%;"/>
+          <ScaffoldVuer v-else-if="entry.type === 'Scaffold'" :url="entry.resource" @scaffold-selected="resourceSelected(entry.type, $event)" ref="scaffold" />
+          <PlotVuer v-else-if="entry.type === 'Plot'" :url="entry.resource"></PlotVuer>
+        </el-main>
+      </el-container>
+    </vue-draggable-resizable>
+</template>
+
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import VueDraggableResizable from 'vue-draggable-resizable';
+import '@abi-software/flatmapvuer';
+import '@abi-software/flatmapvuer/dist/flatmapvuer.css';
+import '@abi-software/scaffoldvuer';
+import '@abi-software/scaffoldvuer/dist/scaffoldvuer.css';
+import '@tehsurfer/plotvuer'
+import '@tehsurfer/plotvuer/dist/plotvuer.css'
+import {
+  Container,
+  Header,
+  Main
+} from "element-ui";
+Vue.component('vue-draggable-resizable', VueDraggableResizable);
+Vue.use(Container);
+Vue.use(Header);
+Vue.use(Main);
+import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
+
+export default {
+  name: "FloatingDialog",
+  props: {entry: Object, index: Number},
+  methods: {
+    onResize: function (x, y, width, height) {
+      this.x = x
+      this.y = y
+      this.width = width
+      this.height = height
+    },
+    onDragstop: function (x, y) {
+      if (this.entry.type === 'Scaffold') 
+        this.scaffoldCamera.onResize();
+      this.x = x
+      this.y = y
+    },
+    resourceSelected: function(type, resource) {
+        const result = {paneIndex: this.index, type: type, resource: resource};
+        this.$emit("resource-selected", result);
+    }
+  },
+  data: function() {
+    return {
+      isReady: false,
+      myElement: undefined,
+      scaffoldCamera: undefined,
+      style: {zIndex: this.entry.zIndex}
+    }
+  },
+  mounted: function() {
+    this.isReady = true;
+    if (this.entry.type === 'Scaffold') 
+      this.scaffoldCamera = this.$refs.scaffold.$module.scene.getZincCameraControls();
+  },
+  watch: {
+    "entry.zIndex": function() {
+      this.style.zIndex = this.entry.zIndex;
+
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.dialog-container {
+  height: 100%;
+  width: 100%;
+}
+
+.dialog-header {
+  background-color: #B3C0D1;
+  color: #333;
+  line-height: 20px;
+}
+
+.dialog-main {
+  padding:0px;
+}
+
+.resizeable-class {
+    border: 1px solid black;
+    -webkit-transition: background-color 200ms linear;
+    -ms-transition: background-color 200ms linear;
+    transition: background-color 200ms linear;
+}
+
+</style>