@abi-software/flatmapvuer 0.5.9 → 0.6.0-vue3-0

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.9",
+  "version": "0.6.0-vue3-0",
   "license": "Apache-2.0",
-  "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",
     "src/*",
@@ -16,9 +15,9 @@
   },
   "scripts": {
     "start": "vue-cli-service serve",
-    "serve": "vue-cli-service serve --port 8082",
+    "serve": "vite --host",
     "build": "vue-cli-service build --dest test_html --mode staging",
-    "build-bundle": "vue-cli-service build --target lib --name flatmapvuer ./src/components/index.js",
+    "build-bundle": "vite build",
     "lint": "vue-cli-service lint",
     "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
     "release:minor": "npm version minor; npm publish",
@@ -26,31 +25,45 @@
     "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
     "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md"
   },
+  "type": "module",
+  "main": "./dist/flatmapvuer.umd.cjs",
+  "module": "./dist/flatmapvuer.js",
+  "exports": {
+    ".": {
+      "import": "./dist/flatmapvuer.js",
+      "require": "./dist/flatmapvuer.umd.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
   "dependencies": {
     "@abi-software/flatmap-viewer": "^2.4.3",
     "@abi-software/sparc-annotation": "0.0.5",
     "@abi-software/svg-sprite": "^0.3.0",
-    "core-js": "^3.3.2",
+    "@element-plus/icons-vue": "^2.3.1",
+    "@vue/compat": "^3.3.13",
+    "core-js": "^3.6.5",
     "css-element-queries": "^1.2.2",
     "current-script-polyfill": "^1.0.0",
-    "element-ui": "^2.13.0",
+    "element-plus": "^2.4.4",
     "file-loader": "^5.0.2",
     "lodash": "^4.17.21",
-    "vue": "^2.6.10"
+    "mitt": "^3.0.1",
+    "unocss": "^0.58.0",
+    "unplugin-vue-components": "^0.26.0",
+    "vue": "^3.3.13",
+    "vue3-component-svg-sprite": "^0.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.0.0",
-    "@vue/cli-plugin-eslint": "^4.0.0",
-    "@vue/cli-service": "^4.5.13",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "@vue/compiler-sfc": "^3.3.13",
     "auto-changelog": "^2.4.0",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
     "base64-inline-loader": "^2.0.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.14.1",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.10",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.19.2",
+    "sass": "^1.69.5",
+    "vite": "^5.0.10",
     "webpack-node-externals": "^2.5.2"
   },
   "eslintConfig": {
@@ -67,11 +80,6 @@
       "parser": "babel-eslint"
     }
   },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions"

package/src/App.vue

@@ -3,161 +3,233 @@
     <el-popover
       placement="bottom"
       trigger="click"
-      width=500
+      width="500"
       class="popover"
-      :appendToBody=false
-      >
+      :teleported="false"
+    >
       <div class="options-container">
         <el-row :gutter="20">
-          <el-button @click="helpMode = !helpMode" size="mini">Help Mode</el-button>
-          <el-button @click="saveSettings()" size="mini">Save Settings</el-button>
-          <el-button :disabled="mapSettings.length === 0" @click="restoreSettings()" size="mini">Restore Settings</el-button>
-          <el-autocomplete class="search-box" placeholder="Search"
+          <el-button @click="helpMode = !helpMode" size="small"
+            >Help Mode</el-button
+          >
+          <el-button @click="saveSettings()" size="small"
+            >Save Settings</el-button
+          >
+          <el-button
+            :disabled="mapSettings.length === 0"
+            @click="restoreSettings()"
+            size="small"
+            >Restore Settings</el-button
+          >
+          <el-autocomplete
+            class="search-box"
+            placeholder="Search"
             v-model="searchText"
             :fetch-suggestions="fetchSuggestions"
             @keyup.enter.native="search"
             @select="search"
-            popper-class="autocomplete-popper">
+            popper-class="autocomplete-popper"
+            :teleported="false"
+          >
           </el-autocomplete>
         </el-row>
       </div>
-      <el-button class="options-button" icon="el-icon-setting" slot="reference">Options</el-button>
+      <template #reference>
+        <el-button class="options-button" :icon="ElIconSetting"
+          >Options</el-button>
+      </template>
     </el-popover>
-  
-    <MultiFlatmapVuer ref="multi" :availableSpecies="availableSpecies" 
-      @resource-selected="FlatmapSelected" :minZoom="minZoom"
-      @pan-zoom-callback="panZoomcallback" @open-map="openMap"
-      @ready="FlatmapReady" :featureInfo="featureInfo" :searchable="searchable"
+
+    <MultiFlatmapVuer
+      ref="multi"
+      :availableSpecies="availableSpecies"
+      @resource-selected="FlatmapSelected"
+      :minZoom="minZoom"
+      @pan-zoom-callback="panZoomcallback"
+      @open-map="openMap"
+      @ready="FlatmapReady"
+      :featureInfo="featureInfo"
+      :searchable="searchable"
       :layerControl="layerControl"
-      :initial="initial" :pathControls="pathControls" :helpMode="helpMode"
-      :displayMinimap="true" :enableOpenMapUI="true" :flatmapAPI="flatmapAPI"/>
+      :initial="initial"
+      :pathControls="pathControls"
+      :helpMode="helpMode"
+      :displayMinimap="true"
+      :enableOpenMapUI="true"
+      :flatmapAPI="flatmapAPI"
+    />
   </div>
 </template>
 
 <script>
+import { shallowRef } from 'vue';
+import { Setting as ElIconSetting } from '@element-plus/icons-vue'
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
 import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue'
 import {
-  Autocomplete,
-  Button,
-  Col,
-  Popover,
-  Row,
-} from 'element-ui';
-import "./icons/mapicon-species-style.css";
-Vue.use(Autocomplete);
-Vue.use(Button);
-Vue.use(Col);
-Vue.use(Popover);
-Vue.use(Row);
+  ElAutocomplete as Autocomplete,
+  ElButton as Button,
+  ElCol as Col,
+  ElPopover as Popover,
+  ElRow as Row,
+} from 'element-plus'
+import './icons/mapicon-species-style.css'
 
 export default {
   name: 'app',
+  components: {
+    Autocomplete,
+    Button,
+    Col,
+    ElIconSetting,
+    Popover,
+    Row,
+  },
   methods: {
-    saveSettings: function() {
-      this.mapSettings.push(this.$refs.multi.getState());
+    saveSettings: function () {
+      this.mapSettings.push(this.$refs.multi.getState())
     },
-    restoreSettings: function() {
+    restoreSettings: function () {
       if (this.mapSettings.length > 0)
-        this.$refs.multi.setState(this.mapSettings.pop());
+        this.$refs.multi.setState(this.mapSettings.pop())
     },
-    FlatmapSelected: function(resource) {
-      if (resource.eventType === "click") {
-        console.log('resource', resource);
+    FlatmapSelected: function (resource) {
+      if (resource.eventType === 'click') {
+        console.log('resource', resource)
       }
     },
-    FlatmapReady: function(component) {
-      console.log(component);
-      let taxon = component.mapImp.describes;
-      let id = component.mapImp.addMarker("UBERON:0000948");
-      window.flatmapImp =  component.mapImp;
-      component.enablePanZoomEvents(true);
+    FlatmapReady: function (component) {
+      console.log(component)
+      let taxon = component.mapImp.describes
+      let id = component.mapImp.addMarker('UBERON:0000948')
+      window.flatmapImp = component.mapImp
+      component.enablePanZoomEvents(true)
       //component.showPathwaysDrawer(false);
-      console.log(taxon, id);
+      console.log(taxon, id)
       //component.searchAndShowResult("heart");
     },
-    panZoomcallback: function(payload) {
+    panZoomcallback: function (payload) {
       this.payload = payload
     },
     openMap: function (map) {
       console.log(map)
     },
-    fetchSuggestions: function(term, cb) {
-      if (term === "") {
-        cb([]);
+    fetchSuggestions: function (term, cb) {
+      if (term === '') {
+        cb([])
       } else {
-        const suggestions = [];
-        const results = this.$refs.multi.getCurrentFlatmap().searchSuggestions(term);
-        results.__featureIds.forEach(id => {
-          const annotation = this.$refs.multi.getCurrentFlatmap().mapImp.annotation(id);
-          if (annotation && annotation.label)
-            suggestions.push(annotation.label);
-        });
-        const unique = new Set(suggestions);
-        suggestions.length = 0;
+        const suggestions = []
+        const results = this.$refs.multi
+          .getCurrentFlatmap()
+          .searchSuggestions(term)
+        results.__featureIds.forEach((id) => {
+          const annotation = this.$refs.multi
+            .getCurrentFlatmap()
+            .mapImp.annotation(id)
+          if (annotation && annotation.label) suggestions.push(annotation.label)
+        })
+        const unique = new Set(suggestions)
+        suggestions.length = 0
         for (const item of unique) {
-          suggestions.push({"value": "\"" + item +"\""});
+          suggestions.push({ value: '"' + item + '"' })
         }
-        cb(suggestions);
+        cb(suggestions)
       }
     },
-    search: function() {
+    search: function () {
       console.log(this.searchText)
-      this.$refs.multi.getCurrentFlatmap().searchAndShowResult(this.searchText, true);
-    }
+      this.$refs.multi
+        .getCurrentFlatmap()
+        .searchAndShowResult(this.searchText, true)
+    },
   },
-  data: function(){
+  data: function () {
     return {
-      searchText: "",
+      searchText: '',
       featureInfo: true,
       searchable: true,
       pathControls: true,
       layerControl: true,
       minZoom: 4,
-      availableSpecies : {
-        "Human Female":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass:"mapicon-icon_human", displayWarning:true},
-        "Human Male":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass:"mapicon-icon_human", displayWarning:true},
-        "Rat":{taxo: "NCBITaxon:10114", iconClass:"mapicon-icon_rat", displayWarning:true, displayLatestChanges:true},
-        "Rat (NPO)":{taxo: "NCBITaxon:10116", iconClass:"mapicon-icon_rat", displayWarning:true, displayLatestChanges:true},
-        "Mouse":{taxo: "NCBITaxon:10090", iconClass:"mapicon-icon_mouse", displayWarning:true},
-        "Kember":{taxo: "ABI:1000001", displayWarning:true},
-        "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning:true}, 
-        "Cat":{taxo: "NCBITaxon:9685", iconClass:"mapicon-icon_cat", displayWarning:true},
-        "Sample":{taxo: "NCBITaxon:1",  displayWarning:true},
-        "Functional Connectivity": {taxo: "FunctionalConnectivity", displayWarning:true},
+      availableSpecies: {
+        'Human Female': {
+          taxo: 'NCBITaxon:9606',
+          biologicalSex: 'PATO:0000383',
+          iconClass: 'mapicon-icon_human',
+          displayWarning: true,
+        },
+        'Human Male': {
+          taxo: 'NCBITaxon:9606',
+          biologicalSex: 'PATO:0000384',
+          iconClass: 'mapicon-icon_human',
+          displayWarning: true,
+        },
+        Rat: {
+          taxo: 'NCBITaxon:10114',
+          iconClass: 'mapicon-icon_rat',
+          displayWarning: true,
+          displayLatestChanges: true,
+        },
+        'Rat (NPO)': {
+          taxo: 'NCBITaxon:10116',
+          iconClass: 'mapicon-icon_rat',
+          displayWarning: true,
+          displayLatestChanges: true,
+        },
+        Mouse: {
+          taxo: 'NCBITaxon:10090',
+          iconClass: 'mapicon-icon_mouse',
+          displayWarning: true,
+        },
+        Kember: { taxo: 'ABI:1000001', displayWarning: true },
+        Pig: {
+          taxo: 'NCBITaxon:9823',
+          iconClass: 'mapicon-icon_pig',
+          displayWarning: true,
+        },
+        Cat: {
+          taxo: 'NCBITaxon:9685',
+          iconClass: 'mapicon-icon_cat',
+          displayWarning: true,
+        },
+        Sample: { taxo: 'NCBITaxon:1', displayWarning: true },
+        'Functional Connectivity': {
+          taxo: 'FunctionalConnectivity',
+          displayWarning: true,
+        },
       },
       tooltipContent: undefined,
       tStyle: {
-        top: "200px",
-        left: "200px",
-        position: "absolute"
+        top: '200px',
+        left: '200px',
+        position: 'absolute',
       },
       displayCloseButton: false,
-      initial: "Rat (NPO)",
+      initial: 'Rat (NPO)',
       helpMode: false,
       mapSettings: [],
       //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
       //flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
       //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/"
-      flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v4/"
+      flatmapAPI: 'https://mapcore-demo.org/devel/flatmap/v4/',
       //flatmapAPI: "https://mapcore-demo.org/fccb/flatmap/"
       //flatmapAPI: "https://mapcore-demo.org/staging/flatmap/v1/"
-      // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/"
+      // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/",
+      ElIconSetting: shallowRef(ElIconSetting)
     }
   },
   components: {
     MultiFlatmapVuer,
-  }
+  },
 }
 </script>
 
 <style lang="scss">
-@import "~element-ui/packages/theme-chalk/src/autocomplete";
-@import "~element-ui/packages/theme-chalk/src/button";
-@import "~element-ui/packages/theme-chalk/src/col";
-@import "~element-ui/packages/theme-chalk/src/popover";
-@import "~element-ui/packages/theme-chalk/src/row";
+@use 'element-plus/theme-chalk/src/autocomplete';
+@use 'element-plus/theme-chalk/src/button';
+@use 'element-plus/theme-chalk/src/col';
+@use 'element-plus/theme-chalk/src/popover';
+@use 'element-plus/theme-chalk/src/row';
 
 #app {
   font-family: 'Asap', 'Avenir', Helvetica, Arial, sans-serif;
@@ -165,22 +237,22 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  height:100%;
+  height: 100%;
   width: 100%;
-  position:absolute;
+  position: absolute;
 }
 
 .maplibregl-ctrl-top-left .maplibregl-ctrl {
-  margin-top:120px;
+  margin-top: 120px;
 }
 
 .search-box {
   margin-top: 2px;
-  height:28px;
-  ::v-deep .el-input__inner {
+  height: 28px;
+  :deep(.el-input__inner) {
     background-color: $background;
-    height:28px;
-    line-height:28px;
+    height: 28px;
+    line-height: 28px;
     border: 1px solid rgb(144, 147, 153);
     border-radius: 4px;
     &:focus {
@@ -189,9 +261,9 @@ export default {
   }
 }
 
-::v-deep .autocomplete-popper {
-  min-width:137px!important;
-  width: auto!important;
+:deep(.autocomplete-popper) {
+  min-width: 137px !important;
+  width: auto !important;
 }
 
 body {
@@ -199,14 +271,14 @@ body {
 }
 
 .maplibregl-ctrl-top-left .maplibregl-ctrl {
-  margin-top:120px;
+  margin-top: 120px;
 }
 
-.popover{
-  top:5px;
-  right:calc( 50% - 20px);
-  position:absolute;
-  z-index:1000;
+.popover {
+  top: 5px;
+  right: calc(50% - 20px);
+  position: absolute;
+  z-index: 1000;
 }
 
 .el-row {
@@ -216,13 +288,16 @@ body {
   }
 }
 
-.options-container{
+.options-button {
+  z-index:100;
+  position: absolute;
+}
 
+.options-container {
   text-align: center;
 }
 
 .el-tabs__content {
-  height:100%;
+  height: 100%;
 }
-
 </style>

package/src/assets/styles.scss

@@ -1,7 +1,6 @@
-@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
 
 @import '_variables';
 
-/* icon font path, required */
+@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
+
 $--color-primary: $app-primary-color !default;
-$--font-path: '~element-ui/lib/theme-chalk/fonts';