@abi-software/scaffoldvuer 0.2.3-alpha-2 → 0.3.1

package/src/components/PrimitiveControls.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    v-show="material || isTextureSlides"
+    class="primitive-controls"
+  >
+    <el-drawer
+      custom-class="my-drawer"
+      :class="{
+        'drawer-content': true,
+        'opacity': material !== undefined,
+        'texture-slides': isTextureSlides,
+      }"
+      :visible.sync="drawerOpen"
+      :append-to-body="false"
+      :modal-append-to-body="false"
+      size="300"
+      :with-header="false"
+      :wrapper-closable="false"
+      :modal="false"
+    >
+      <div
+        v-if="drawerOpen"
+        class="tab-button close"
+        @click="toggleDrawer"
+      >
+        <i class="el-icon-arrow-right" />
+      </div>
+      <opacity-controls
+        :material="material"
+        ref="opacityControls" />
+      <texture-slides-controls
+        v-show="isTextureSlides"
+        class="controls"
+        ref="tSlidesControls" />
+    </el-drawer>
+    <div
+      v-if="!drawerOpen"
+      class="tab-button open"
+      @click="toggleDrawer"
+    >
+      <i class="el-icon-arrow-left" />
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import OpacityControls from "./OpacityControls";
+import TextureSlidesControls from "./TextureSlidesControls";
+import { Drawer, Icon } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+locale.use(lang);
+Vue.use(Drawer);
+Vue.use(Icon);
+
+/**
+ * A component to control the opacity of the target object.
+ */
+export default {
+  name: "PrimitiveControls",
+  components: {
+    OpacityControls,
+    TextureSlidesControls,
+  },
+  data: function() {
+    return {
+      material: undefined,
+      isTextureSlides: false,
+      drawerOpen: true,
+    };
+  },
+  mounted: function() {
+    this._zincobject = undefined;
+  },
+  methods: {
+    formatTooltip: function(val) {
+      this.displayString = Math.floor(100 * val + 0.5) + "%";
+      return this.displayString;
+    },
+    toggleDrawer: function() {
+      this.drawerOpen = !this.drawerOpen;
+    },
+    setObject: function(object) {
+      this._zincobject = object;
+      if (object.isTextureSlides) {
+        this.isTextureSlides = true;
+        this.$refs.tSlidesControls.setObject(object);
+      } else {
+        this.isTextureSlides = false;
+      }
+      if (object && object.morph) this.material = object.morph.material;
+      else this.material = undefined;
+      this.$refs.opacityControls.setObject(object);
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/container";
+@import "~element-ui/packages/theme-chalk/src/drawer";
+@import "~element-ui/packages/theme-chalk/src/slider";
+
+.primitive-controls {
+  text-align: left;
+  width:350px;
+  pointer-events:none;
+}
+
+.display {
+  width: 44px;
+}
+
+.icon {
+  right: 17px;
+  position: absolute;
+  top: 10px;
+}
+
+.drawer-content {
+  position: relative;
+  &.opacity {
+    height: 93px;
+  }
+  &.texture-slides{
+    height: 250px;
+  }
+}
+
+::v-deep .my-drawer {
+  background: rgba(0, 0, 0, 0);
+  box-shadow: none;
+}
+
+.tab-button {
+  width: 20px;
+  height: 40px;
+  z-index: 8;
+  right: 0px;
+  
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  background-color: #FFFFFF;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  pointer-events: auto;
+  //transition: bottom 0.3s;
+
+  &.close {
+    float: left;
+    flex: 1;
+    border-right: 0;
+    bottom: 26px;
+  }
+
+  &.open {
+    position: absolute;
+    bottom:26px;
+  }
+
+  i {
+    margin-top: 12px;
+    color: $app-primary-color;
+    transform: scaleY(2.5);
+  }
+}
+
+</style>

package/src/components/ScaffoldTooltip.vue

@@ -1,142 +1,142 @@
-<template>
-  <div :style="position" class="region-tooltip">
-    <el-popover
-      ref="tooltip"
-      v-model="display"
-      placement="top"
-      :visibleArrow="false"
-      :append-to-body="false"
-      trigger="manual"
-      popper-class="tooltip-popper non-selectable"
-    >
-      <template v-popover:tooltip>
-        <div class="tooltip-text">{{ label }}</div>
-        <div class="tooltip-text" v-if="region">Region: {{ region }}</div>
-      </template>
-    </el-popover>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import { Popover } from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-
-locale.use(lang);
-Vue.use(Popover);
-
-/**
- * A component to control the opacity of the target object.
- */
-export default {
-  name: "ScaffoldTooltip",
-  props: {
-    label: {
-      type: String,
-      default: "",
-    },
-    region: {
-      type: String,
-      default: "",
-    },
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    x: {
-      type: Number,
-      default: 200,
-    },
-    y: {
-      type: Number,
-      default: 200,
-    },
-  },
-  data: function () {
-    return {
-      display: false,
-    };
-  },
-  computed: {
-    position: function () {
-      let yOffset = 40;
-      if (this.region) {
-        yOffset = 55;
-      }
-      const x = this.x - 40;
-      return { left: x + "px", top: this.y - yOffset + "px" };
-    },
-  },
-  watch: {
-    label: {
-      handler: function () {
-        if (this.visible && this.label && this.label !== "")
-          this.display = true;
-        else this.display = false;
-      },
-      immediate: true,
-    },
-    visible: {
-      handler: function () {
-        if (this.visible && this.label && this.label !== "")
-          this.display = true;
-        else this.display = false;
-      },
-      immediate: true,
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/popover";
-
-.region-tooltip {
-  position: absolute;
-  height: 50px;
-  z-index: 2;
-  ::v-deep .tooltip-popper {
-    padding: 2px 6px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    font-size: 16px;
-    color: $app-primary-color;
-    background-color: #fff;
-    border: 1px solid $app-primary-color;
-    border-radius: 4px;
-    white-space: nowrap;
-    min-width: unset;
-    pointer-events: none;
-    top: -15px !important;
-
-    &.el-popper[x-placement^="top"] {
-      .popper__arrow {
-        border-top-color: $app-primary-color !important;
-        &:after {
-          border-top-color: #fff !important;
-        }
-      }
-    }
-
-    &.el-popper[x-placement^="bottom"] {
-      .popper__arrow {
-        border-bottom-color: $app-primary-color !important;
-        &:after {
-          border-bottom-color: #fff !important;
-        }
-      }
-    }
-  }
-
-  .tooltip-text {
-    text-align: center;
-  }
-
-  ::v-deep .non-selectable {
-    user-select: none;
-    pointer-events: none;
-  }
-}
-</style>
+<template>
+  <div :style="position" class="region-tooltip">
+    <el-popover
+      ref="tooltip"
+      v-model="display"
+      placement="top"
+      :visibleArrow="false"
+      :append-to-body="false"
+      trigger="manual"
+      popper-class="tooltip-popper non-selectable"
+    >
+      <template v-popover:tooltip>
+        <div class="tooltip-text">{{ label }}</div>
+        <div class="tooltip-text" v-if="region">Region: {{ region }}</div>
+      </template>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { Popover } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+locale.use(lang);
+Vue.use(Popover);
+
+/**
+ * A component to control the opacity of the target object.
+ */
+export default {
+  name: "ScaffoldTooltip",
+  props: {
+    label: {
+      type: String,
+      default: "",
+    },
+    region: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    x: {
+      type: Number,
+      default: 200,
+    },
+    y: {
+      type: Number,
+      default: 200,
+    },
+  },
+  data: function () {
+    return {
+      display: false,
+    };
+  },
+  computed: {
+    position: function () {
+      let yOffset = 40;
+      if (this.region) {
+        yOffset = 55;
+      }
+      const x = this.x - 40;
+      return { left: x + "px", top: this.y - yOffset + "px" };
+    },
+  },
+  watch: {
+    label: {
+      handler: function () {
+        if (this.visible && this.label && this.label !== "")
+          this.display = true;
+        else this.display = false;
+      },
+      immediate: true,
+    },
+    visible: {
+      handler: function () {
+        if (this.visible && this.label && this.label !== "")
+          this.display = true;
+        else this.display = false;
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/popover";
+
+.region-tooltip {
+  position: absolute;
+  height: 50px;
+  z-index: 2;
+  ::v-deep .tooltip-popper {
+    padding: 2px 6px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    font-size: 16px;
+    color: $app-primary-color;
+    background-color: #fff;
+    border: 1px solid $app-primary-color;
+    border-radius: 4px;
+    white-space: nowrap;
+    min-width: unset;
+    pointer-events: none;
+    top: -15px !important;
+
+    &.el-popper[x-placement^="top"] {
+      .popper__arrow {
+        border-top-color: $app-primary-color !important;
+        &:after {
+          border-top-color: #fff !important;
+        }
+      }
+    }
+
+    &.el-popper[x-placement^="bottom"] {
+      .popper__arrow {
+        border-bottom-color: $app-primary-color !important;
+        &:after {
+          border-bottom-color: #fff !important;
+        }
+      }
+    }
+  }
+
+  .tooltip-text {
+    text-align: center;
+  }
+
+  ::v-deep .non-selectable {
+    user-select: none;
+    pointer-events: none;
+  }
+}
+</style>

package/src/components/ScaffoldVuer.md

@@ -1,44 +1,44 @@
-ScaffoldVuer demo:
-  ```vue
-  <template>
-    <div class="wrapper">
-      <ScaffoldVuer class="vuer"
-        :url="url"
-        :helpMode="helpMode"
-        :displayMarkers="displayMarkers"
-        :displayMinimap="displayMinimap"
-        :minimapSettings="minimapSettings" />
-    </div>
-  </template>
-
-    <script>
-      export default {
-        data: function() {
-          return {
-            url: "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json",
-            helpMode: false,
-            displayMarkers: true,
-            displayMinimap: false,
-            minimapSettings: {
-              x_offset: 16,
-              y_offset: 16,
-              width: 128,
-              height: 128,
-              align: "bottom-right"
-            },
-          };
-        }
-      }
-    </script>
-
-    <style scoped>
-      .wrapper {
-        height:600px;
-      }
-      .vuer {
-        width:100%;
-        height:600px;
-      }
-    </style>
-  ```
-
+ScaffoldVuer demo:
+  ```vue
+  <template>
+    <div class="wrapper">
+      <ScaffoldVuer class="vuer"
+        :url="url"
+        :helpMode="helpMode"
+        :displayMarkers="displayMarkers"
+        :displayMinimap="displayMinimap"
+        :minimapSettings="minimapSettings" />
+    </div>
+  </template>
+
+    <script>
+      export default {
+        data: function() {
+          return {
+            url: "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json",
+            helpMode: false,
+            displayMarkers: true,
+            displayMinimap: false,
+            minimapSettings: {
+              x_offset: 16,
+              y_offset: 16,
+              width: 128,
+              height: 128,
+              align: "bottom-right"
+            },
+          };
+        }
+      }
+    </script>
+
+    <style scoped>
+      .wrapper {
+        height:600px;
+      }
+      .vuer {
+        width:100%;
+        height:600px;
+      }
+    </style>
+  ```
+