@abi-software/scaffoldvuer 0.3.0 → 0.3.1

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -18091,9 +18091,9 @@
       }
     },
     "zincjs": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.2.0.tgz",
-      "integrity": "sha512-1VzHgOgd7LxowMSx5DuwsWis2K7gPdxyKt2FF8oPGnq3mSVBvn36nE28q6hx7AvcR2ZQHiojql9lb4baIfonug==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.3.0.tgz",
+      "integrity": "sha512-zS7Fg/zhdIKUhyF56ZzzfiboHcOkgPE9D3mRdspmR2Iv6FpUPUrUDsk8VAikliJx9rvY4PNkCLjsor3Vx/eXeQ==",
       "requires": {
         "css-element-queries": "^1.2.2",
         "lodash": "^4.17.19",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
     "vue-custom-element": "^3.3.0",
     "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.5.1",
-    "zincjs": "^1.2.0"
+    "zincjs": "^1.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",

package/src/components/OpacityControls.vue

@@ -1,72 +1,38 @@
 <template>
-  <div
-    v-if="material!=undefined"
-    ref="control"
-    class="opacity-control"
-  >
-    <el-drawer
-      custom-class="my-drawer"
-      class="drawer-content"
-      :visible.sync="drawerOpen"
-      :append-to-body="false"
-      :modal-append-to-body="false"
-      size="300"
-      :with-header="false"
-      :wrapper-closable="false"
-      :modal="false"
+  <el-container v-if="material" class="opacity-container">
+    <el-header
+      height="37px"
+      class="header"
     >
-      <div
-        v-if="drawerOpen"
-        class="tab-button close"
-        @click="toggleDrawer"
-      >
-        <i class="el-icon-arrow-right" />
+      <div>Opacity</div>
+    </el-header>
+    <el-main class="main">
+      <div class="block">
+        <span class="display">{{ displayString }}</span>
+        <el-slider
+          v-model="material.opacity"
+          class="my-slider"
+          :step="0.01"
+          :min="0"
+          :max="1"
+          :format-tooltip="formatTooltip"
+          :show-tooltip="false"
+        />
       </div>
-      <el-container class="opacity-container">
-        <el-header
-          height="37px"
-          class="header"
-        >
-          <div>Opacity</div>
-        </el-header>
-        <el-main class="main">
-          <div class="block">
-            <span class="display">{{ displayString }}</span>
-            <el-slider
-              v-model="material.opacity"
-              class="my-slider"
-              :step="0.01"
-              :min="0"
-              :max="1"
-              :format-tooltip="formatTooltip"
-              :show-tooltip="false"
-            />
-          </div>
-        </el-main>
-      </el-container>
-    </el-drawer>
-    <div
-      v-if="!drawerOpen"
-      class="tab-button open"
-      @click="toggleDrawer"
-    >
-      <i class="el-icon-arrow-left" />
-    </div>
-  </div>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
-import { Container, Drawer, Header, Icon, Main, Slider } from "element-ui";
+import { Container, Header, Main, Slider } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 
 locale.use(lang);
 Vue.use(Container);
-Vue.use(Drawer);
 Vue.use(Header);
-Vue.use(Icon);
 Vue.use(Main);
 Vue.use(Slider);
 
@@ -75,51 +41,41 @@ Vue.use(Slider);
  */
 export default {
   name: "OpacityControls",
+  props: {
+    material: undefined,
+  },
   data: function() {
     return {
       displayString: "100%",
-      material: undefined,
-      drawerOpen: true
     };
   },
   watch: {
     "material.opacity": function() {
-      if (this.material) {
-        this._zincobject.setAlpha(this.material.opacity);
+      if (this.material && this._zincObject) {
+        this._zincObject.setAlpha(this.material.opacity);
       }
     }
   },
   mounted: function() {
-    this._zincobject = undefined;
+    this._zincObject = undefined;
   },
   methods: {
     formatTooltip(val) {
       this.displayString = Math.floor(100 * val + 0.5) + "%";
       return this.displayString;
     },
-    toggleDrawer: function() {
-      this.drawerOpen = !this.drawerOpen;
-    },
     setObject(object) {
-      if (object) this.material = object.morph.material;
-      else this.material = undefined;
-      this._zincobject = object;
+      this._zincObject = 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";
 
-.opacity-control {
-  text-align: left;
-  width:300px;
-}
-
 .header {
   color: #606266;
   line-height: 1;
@@ -132,12 +88,6 @@ export default {
   width: 44px;
 }
 
-.icon {
-  right: 17px;
-  position: absolute;
-  top: 10px;
-}
-
 .main {
   font-size: 13px;
   padding: 20px 17px 0 15px;
@@ -170,53 +120,4 @@ export default {
   background-color: $app-primary-color;
 }
 
-.drawer-content {
-  position: relative;
-  height: 93px;
-  pointer-events: none;
-}
-
-::v-deep .my-drawer {
-  background: rgba(0, 0, 0, 0);
-  box-shadow: none;
-}
-
-::v-deep .my-drawer .el-drawer__body {
-  height: 93px;
-}
-
-.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;
-    margin-top: 26px;
-  }
-
-  &.open {
-    position: absolute;
-    bottom:26px;
-  }
-
-  i {
-    margin-top: 12px;
-    color: $app-primary-color;
-    transform: scaleY(2.5);
-  }
-}
-
 </style>

package/src/components/PrimitiveControls.vue

@@ -1,11 +1,15 @@
 <template>
   <div
-    v-show="material!=undefined"
+    v-show="material || isTextureSlides"
     class="primitive-controls"
   >
     <el-drawer
       custom-class="my-drawer"
-      class="drawer-content"
+      :class="{
+        'drawer-content': true,
+        'opacity': material !== undefined,
+        'texture-slides': isTextureSlides,
+      }"
       :visible.sync="drawerOpen"
       :append-to-body="false"
       :modal-append-to-body="false"
@@ -24,6 +28,10 @@
       <opacity-controls
         :material="material"
         ref="opacityControls" />
+      <texture-slides-controls
+        v-show="isTextureSlides"
+        class="controls"
+        ref="tSlidesControls" />
     </el-drawer>
     <div
       v-if="!drawerOpen"
@@ -39,6 +47,7 @@
 /* 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";
@@ -54,29 +63,34 @@ export default {
   name: "PrimitiveControls",
   components: {
     OpacityControls,
+    TextureSlidesControls,
   },
   data: function() {
     return {
       material: undefined,
-      drawerOpen: true
+      isTextureSlides: false,
+      drawerOpen: true,
     };
-  },
-  watch: {
-
   },
   mounted: function() {
     this._zincobject = undefined;
   },
   methods: {
-    formatTooltip(val) {
+    formatTooltip: function(val) {
       this.displayString = Math.floor(100 * val + 0.5) + "%";
       return this.displayString;
     },
     toggleDrawer: function() {
       this.drawerOpen = !this.drawerOpen;
     },
-    setObject(object) {
-      console.log(object, this.$refs)
+    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);
@@ -93,7 +107,8 @@ export default {
 
 .primitive-controls {
   text-align: left;
-  width:300px;
+  width:350px;
+  pointer-events:none;
 }
 
 .display {
@@ -108,8 +123,12 @@ export default {
 
 .drawer-content {
   position: relative;
-  height: 93px;
-  pointer-events: none;
+  &.opacity {
+    height: 93px;
+  }
+  &.texture-slides{
+    height: 250px;
+  }
 }
 
 ::v-deep .my-drawer {
@@ -117,10 +136,6 @@ export default {
   box-shadow: none;
 }
 
-::v-deep .my-drawer .el-drawer__body {
-  height: 93px;
-}
-
 .tab-button {
   width: 20px;
   height: 40px;
@@ -140,7 +155,7 @@ export default {
     float: left;
     flex: 1;
     border-right: 0;
-    margin-top: 26px;
+    bottom: 26px;
   }
 
   &.open {

package/src/components/ScaffoldVuer.vue

@@ -80,8 +80,8 @@
         @object-hovered="objectHovered"
         @drawer-toggled="drawerToggled"
       />
-      <div class="opacity-box">
-        <opacity-controls ref="opacityControl" />
+      <div class="primitive-controls-box">
+        <primitive-controls ref="primitiveControls" />
       </div>
       <el-popover
         v-if="sceneData.timeVarying"
@@ -311,7 +311,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
-import OpacityControls from "./OpacityControls";
+import PrimitiveControls from "./PrimitiveControls";
 import ScaffoldTooltip from "./ScaffoldTooltip";
 import TreeControls from "./TreeControls";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
@@ -350,7 +350,7 @@ const EventNotifier = require("../scripts/eventNotifier").EventNotifier;
 /**
  * A vue component of the scaffold viewer.
  *
- * @requires ./OpacityControls.vue
+ * @requires ./PrimitveControls.vue
  * @requires ./TreeControls.vue
  */
 export default {
@@ -358,7 +358,7 @@ export default {
   components: {
     MapSvgIcon,
     MapSvgSpriteColor,
-    OpacityControls,
+    PrimitiveControls,
     ScaffoldTooltip,
     TreeControls,
   },
@@ -1029,8 +1029,9 @@ export default {
      */
     objectSelected: function (objects, propagate) {
       this.selectedObjects = objects;
-      if (this.selectedObjects && this.selectedObjects.length > 0)
-        this.$refs.opacityControl.setObject(this.selectedObjects[0]);
+      if (this.selectedObjects && this.selectedObjects.length > 0) {
+        this.$refs.primitiveControls.setObject(this.selectedObjects[0]);
+      }
       this.$module.setSelectedByZincObjects(objects, undefined, propagate);
     },
     /**
@@ -1998,7 +1999,7 @@ export default {
   font-family: "Asap", sans-serif;
 }
 
-.opacity-box {
+.primitive-controls-box {
   right: 0px;
   bottom: 200px;
   position: absolute;

package/src/components/TextureSlidesControls.vue

@@ -0,0 +1,272 @@
+<template>
+  <el-container v-show="settings.length > 0" class="t-slides-container">
+    <el-header height="30px" class="header">
+      <div>Texture Slides Settings</div>
+    </el-header>
+    <el-main class="block">
+      <el-row v-for="(slide, index) in settings" :key="slide.id">
+        <el-col :offset="0" :span="2">
+          <el-select
+            :popper-append-to-body="false"
+            :value="slide.direction"
+            placeholder="Select"
+            class="input-box"
+            popper-class="viewer_dropdown"
+            @change="modifyDirection($event, slide)"
+          >
+            <el-option
+              v-for="item in directions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-col>
+        <el-col :offset="0" :span="14">
+          <el-slider
+            v-model="slide.value"
+            class="my-slider"
+            :step="0.01"
+            :min="0"
+            :max="1"
+            :show-tooltip="false"
+            @input="modifySlide(slide)"
+          />
+        </el-col>
+        <el-col :offset="0" :span="3">
+          <el-input-number
+            v-model="slide.value"
+            :step="0.01"
+            :min="0"
+            :max="1"
+            :controls="false"
+            class="input-box number-input"
+          />
+        </el-col>
+        <el-col :offset="2" :span="2">
+          <i
+            class="el-icon-close close-icon"
+            @click="removeSlide(index, slide)"
+          />
+        </el-col>
+      </el-row>
+    </el-main>
+    <el-footer height="30px" class="add-slides-text" @click.native="addNewSlide">
+      <el-row>
+        <el-col :span="2">
+          <i class="el-icon-plus" />
+        </el-col>
+        <el-col :span="10"> Add a new slide </el-col>
+      </el-row>
+    </el-footer>
+  </el-container>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import {
+  Col,
+  Container,
+  Footer,
+  Header,
+  Icon,
+  InputNumber,
+  Main,
+  Row,
+  Slider,
+} from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+locale.use(lang);
+Vue.use(Col);
+Vue.use(Container);
+Vue.use(Footer);
+Vue.use(Header);
+Vue.use(Icon);
+Vue.use(InputNumber);
+Vue.use(Main);
+Vue.use(Slider);
+Vue.use(Row);
+
+/**
+ * A component to control the opacity of the target object.
+ */
+export default {
+  name: "TextureSlidesControls",
+  data: function () {
+    return {
+      settings: [],
+      directions: [
+        {
+          value: "x",
+          label: "x",
+        },
+        {
+          value: "y",
+          label: "y",
+        },
+        {
+          value: "z",
+          label: "z",
+        },
+      ],
+    };
+  },
+  watch: {
+    settings: function () {
+      if (this.material && this._zincObject) {
+        this._zincObject.setAlpha(this.material.opacity);
+      }
+    },
+  },
+  mounted: function () {
+    this._zincObject = undefined;
+  },
+  methods: {
+    setObject: function (object) {
+      if (object.isTextureSlides) {
+        this._zincObject = object;
+        this.settings = this._zincObject.getTextureSettings();
+      } else {
+        this._zincObject = undefined;
+        this.settings = [];
+      }
+    },
+    addNewSlide: function () {
+      const newSettings = { direction: "x", value: 0 };
+      const returnSettings = this._zincObject.createSlide(newSettings);
+      this.settings.push(returnSettings);
+    },
+    modifyDirection: function(direction, slide) {
+      if (slide) {
+        slide.direction = direction;
+        this._zincObject.modifySlideSettings(slide);
+      }
+    },
+    modifySlide: function (slide) {
+      if (slide) {
+        this._zincObject.modifySlideSettings(slide);
+      }
+    },
+    removeSlide: function (index, slide) {
+      this._zincObject.removeSlideWithId(slide.id);
+      this.settings.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/col";
+@import "~element-ui/packages/theme-chalk/src/container";
+@import "~element-ui/packages/theme-chalk/src/input-number";
+@import "~element-ui/packages/theme-chalk/src/slider";
+@import "~element-ui/packages/theme-chalk/src/row";
+
+.header {
+  color: #606266;
+  line-height: 1;
+  padding: 8px 17px 1px 15px;
+  border-bottom: 1px solid #ebeef5;
+  font-size: 14px;
+}
+
+.add-slides-text {
+  color: $app-primary-color;
+  line-height: 1;
+  padding: 9px 17px 9px 15px;
+  border-top: 1px solid #ebeef5;
+  font-size: 12px;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.display {
+  width: 44px;
+}
+
+.block {
+  pointer-events: auto;
+  &.el-main {
+    padding: 5px;
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px #c0c4cc;
+    }
+  }
+}
+
+.my-slider {
+  width: 109px;
+  top: -6px;
+  left: 50px;
+  position: relative;
+}
+
+.t-slides-container {
+  width: 300px;
+  height: 250px;
+  border-radius: 4px;
+  border: solid 1px #d8dce6;
+  background-color: #fff;
+  overflow-y: none;
+}
+
+::v-deep .el-slider__bar {
+  background-color: $app-primary-color;
+}
+
+.input-box {
+  width: 42px;
+  border-radius: 4px;
+  border: 1px solid rgb(144, 147, 153);
+  background-color: var(--white);
+  font-weight: 500;
+  color: rgb(48, 49, 51);
+  margin-left: 8px;
+
+  &.number-input {
+    width: 42px;
+    ::v-deep .el-input__inner {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+  }
+
+  ::v-deep .el-input__inner {
+    color: $app-primary-color;
+    height: 22px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border: none;
+    font-family: "Asap", sans-serif;
+    line-height: 22px;
+  }
+
+  ::v-deep .el-input,
+  ::v-deep .el-input__icon {
+    line-height: 22px;
+  }
+
+  .viewer_dropdown .el-select-dropdown__item {
+    white-space: nowrap;
+    color: $app-primary-color;
+    text-align: left;
+    font-family: "Asap", sans-serif;
+  }
+}
+
+.close-icon {
+  color: $app-primary-color;
+  top: 2px;
+  position: relative;
+  cursor: pointer;
+}
+</style>