@abi-software/scaffoldvuer 0.4.0-vue3.3 → 0.4.0-vue3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.4.0-vue3.3",
+  "version": "0.4.0-vue3.6",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -9,9 +9,7 @@
   "scripts": {
     "serve": "vite --host --force",
     "build-bundle": "vite build",
-    "lint": "vue-cli-service lint --ext .js,.vue src",
-    "build:bundle": "vue-cli-service build --target lib --name scaffoldvuer ./src/components/index.js",
-    "build:wc": "vue-cli-service build --target lib --name scaffoldvuer-wc ./src/ScaffoldVuer-wc.js --mode wc --env bundle --no-clean",
+    "build-static": "vite build -c vite.static-build.js",
     "styleguide": "vue-cli-service styleguidist",
     "styleguide:build": "vue-cli-service styleguidist:build",
     "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",

package/src/App.vue

@@ -135,7 +135,7 @@
       </template>
     </el-popover>
     <el-autocomplete v-model="searchText" class="search-box" placeholder="Search" :fetch-suggestions="fetchSuggestions"
-      :teleported="false" popper-class="autocomplete-popper" @keyup.enter.native="search(searchText)"
+      :teleported="false" popper-class="autocomplete-popper" @keyup.enter="search(searchText)"
       @select="search(searchText)">
       <template #default="{ item }">
         <div class="value">

package/src/components/PrimitiveControls.vue

@@ -2,25 +2,9 @@
   <div
     v-show="material || isTextureSlides"
     class="primitive-controls"
+    :class="{ open: drawerOpen, close: !drawerOpen }"
   >
-    <el-drawer
-      :class="{
-        'my-drawer': true,
-      }"
-      v-model="drawerOpen"
-      :append-to-body="false"
-      size="300"
-      :with-header="false"
-      :wrapper-closable="false"
-      :modal="false"
-    >
-      <div
-        v-if="drawerOpen"
-        class="tab-button close"
-        @click="toggleDrawer"
-      >
-      <el-icon><el-icon-arrow-right/></el-icon>
-      </div>
+    <div class="my-drawer" :class="{ open: drawerOpen, close: !drawerOpen }">
       <opacity-controls
         :material="material"
         :zincObject="zincObject"
@@ -29,13 +13,13 @@
         v-show="isTextureSlides"
         class="controls"
         ref="tSlidesControls" />
-    </el-drawer>
+    </div>
     <div
-      v-if="!drawerOpen"
-      class="tab-button open"
+      class="drawer-button"
+      :class="{ open: drawerOpen, close: !drawerOpen }"
       @click="toggleDrawer"
     >
-    <el-icon><el-icon-arrow-left class="el-icon-arrow-left"/></el-icon>
+      <el-icon><el-icon-arrow-right /></el-icon>
     </div>
   </div>
 </template>
@@ -45,11 +29,9 @@
 import { ref, shallowRef } from 'vue';
 import {
   ArrowRight as ElIconArrowRight,
-  ArrowLeft as ElIconArrowLeft,
 } from '@element-plus/icons-vue'
 import OpacityControls from "./OpacityControls.vue";
 import TextureSlidesControls from "./TextureSlidesControls.vue";
-import { ElDrawer as Drawer } from "element-plus";
 
 /**
  * A component to control the opacity of the target object.
@@ -57,7 +39,6 @@ import { ElDrawer as Drawer } from "element-plus";
 export default {
   name: "PrimitiveControls",
   components: {
-    Drawer,
     OpacityControls,
     TextureSlidesControls,
   },
@@ -95,62 +76,63 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 .primitive-controls {
-  text-align: left;
-  width:350px;
+  position: absolute;
+  bottom: 30%;
   pointer-events:none;
-}
-
-.display {
-  width: 44px;
-}
+  transition: all 1s ease;
 
-.icon {
-  right: 17px;
-  position: absolute;
-  top: 10px;
-}
-:deep(.my-drawer) {
-  background: rgba(0, 0, 0, 0);
-  box-shadow: none;
-  right: 0px;
-  top: 60%;
-  position: absolute;
-  width:unset!important;
-  .el-drawer__body {
-    padding: 0px;
+  &.open {
+    right: 0px;
+    .my-drawer {
+      opacity: 1;
+    }
+  }
+  &.close {
+    right: -220px;
+    .my-drawer {
+      pointer-events: none;
+      opacity: 0;
+    }
   }
 }
+.my-drawer {
+  transition: all 1s ease;
+  float: right;
+  max-height: 150px;
+  text-align: left;
+  border: 1px solid rgb(220, 223, 230);
+  background: #ffffff;
+  width:220px;
+}
 
-.tab-button {
+.drawer-button {
+  float: right;
   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;
+  border: solid 1px $app-primary-color;
+  background-color: #f9f2fc;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   pointer-events: auto;
-  //transition: bottom 0.3s;
-
-  &.close {
-    float: left;
-    flex: 1;
-    border-right: 0;
-  }
-
-  &.open {
-    position: absolute;
-    top:60%;
-  }
+  margin-top: 25px;
 
   i {
+    font-weight: 600;
     margin-top: 12px;
     color: $app-primary-color;
-    transform: scaleY(2.5);
+    transition-delay: 0.9s;
+  }
+  &.open {
+    i {
+      transform: rotate(0deg) scaleY(2.5);
+    }
+  }
+  &.close {
+    i {
+      transform: rotate(180deg) scaleY(2.5);
+    }
   }
 }
 

package/src/components/ScaffoldTooltip.vue

@@ -154,6 +154,7 @@ export default {
 
   .tooltip-text {
     text-align: center;
+    color: $app-primary-color;
   }
 
   :deep(.non-selectable) {

package/src/components/ScaffoldVuer.vue

@@ -111,13 +111,13 @@
                     v-if="isPlaying"
                     icon="pause"
                     class="icon-button video-button"
-                    @click.native="play(false)"
+                    @click="play(false)"
                   />
                   <map-svg-icon
                     v-else
                     icon="play"
                     class="video-button icon-button"
-                    @click.native="play(true)"
+                    @click="play(true)"
                   />
                   <el-slider
                     :min="0"
@@ -183,9 +183,9 @@
             <map-svg-icon
               icon="zoomIn"
               class="icon-button zoomIn"
-              @click.native="zoomIn()"
-              @mouseover.native="showHelpText(0)"
-              @mouseout.native="hideHelpText(0)"
+              @click="zoomIn()"
+              @mouseover="showHelpText(0)"
+              @mouseout="hideHelpText(0)"
             />
           </template>
         </el-popover>
@@ -201,9 +201,9 @@
             <map-svg-icon
               icon="zoomOut"
               class="icon-button zoomOut"
-              @click.native="zoomOut()"
-              @mouseover.native="showHelpText(1)"
-              @mouseout.native="hideHelpText(1)"
+              @click="zoomOut()"
+              @mouseover="showHelpText(1)"
+              @mouseout="hideHelpText(1)"
             />
           </template>
         </el-popover>
@@ -223,9 +223,9 @@
             <map-svg-icon
               icon="fitWindow"
               class="icon-button fitWindow"
-              @click.native="fitWindow()"
-              @mouseover.native="showHelpText(2)"
-              @mouseout.native="hideHelpText(2)"
+              @click="fitWindow()"
+              @mouseover="showHelpText(2)"
+              @mouseout="hideHelpText(2)"
             />
           </template>
         </el-popover>
@@ -313,8 +313,8 @@
                 ref="openMapRef"
                 icon="openMap"
                 class="icon-button open-map-button"
-                @mouseover.native="showHelpText(8)"
-                @mouseout.native="hideHelpText(8)"
+                @mouseover="showHelpText(8)"
+                @mouseout="hideHelpText(8)"
               />
             </template>
           </el-popover>
@@ -333,8 +333,8 @@
                 ref="backgroundIconRef"
                 icon="changeBckgd"
                 class="icon-button"
-                @mouseover.native="showHelpText(3)"
-                @mouseout.native="hideHelpText(3)"
+                @mouseover="showHelpText(3)"
+                @mouseout="hideHelpText(3)"
               />
             </template>
           </el-popover>
@@ -1822,7 +1822,6 @@ export default {
   border: 1px solid $app-primary-color;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
   min-width: 188px;
-
   .el-row ~ .el-row {
     margin-top: 8px;
   }
@@ -2019,34 +2018,7 @@ export default {
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
-  width:60px;
-  :deep(.el-select__wrapper) {
-    padding: 0px;
-    min-height: 26px;
-    color: rgb(48, 49, 51);
-  }
-  &.viewing-mode {
-    :deep(.el-select__wrapper) {
-      line-height:30px
-    }
-  }
-
-  :deep()
-    .el-select__selected-item {
-    color: $app-primary-color;
-    height: 22px;
-    border: none;
-    font-family: "Asap", sans-serif;
-    line-height: 22px;
-    &is-focus, &:focus {
-      border: 1px solid $app-primary-color;
-    }
-  }
-
-  :deep(.el-input),
-  :deep(.el-input__icon) {
-    line-height: 22px;
-  }
+  width: 150px!important;
 }
 
 :deep(.scaffold_viewer_dropdown) {

package/src/components/TextureSlidesControls.vue

@@ -51,7 +51,7 @@
         </el-col>
       </el-row>
     </el-main>
-    <el-footer height="30px" class="add-slides-text" @click.native="addNewSlide">
+    <el-footer height="30px" class="add-slides-text" @click="addNewSlide">
       <el-row>
         <el-col :span="2">
           <i class="el-icon-plus" />

package/src/components.d.ts

@@ -11,7 +11,6 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']

package/src/scripts/Utilities.js

@@ -58,7 +58,7 @@ const findObjectWithUUID = (objects, uuid, remove) => {
   if (index > -1) {
     object = objects[index];
     if (remove) {
-      objects.splice(i, 1);
+      objects.splice(index, 1);
     }
   }
   return object;

package/vite.config.js

@@ -40,10 +40,12 @@ export default defineConfig(({ command, mode }) => {
         fileName: 'scaffoldvuer',
       },
       rollupOptions: {
-        external: ["vue"],
+        external: ["vue", "@abi-software/flatmapvuer", "@abi-software/svg-sprite"],
         output: {
           globals: {
             vue: "Vue",
+            "@abi-software/flatmapvuer": "@abi-software/flatmapvuer",
+            "@abi-software/svg-sprite": "@abi-software/svg-sprite"
           },
         },
       },

package/vite.static-build.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import rootConfig from './vite.config.js'
+
+// defineWorkspace provides a nice type hinting DX
+export default defineConfig((configEnv) => {
+  const config = rootConfig(configEnv);
+  config.build = {
+    outDir: "test-html"
+  };
+
+  return config;
+})

package/vue.config.js

@@ -1,41 +0,0 @@
-
-const nodeExternals = require('webpack-node-externals');
-
-module.exports = {
-  configureWebpack: config => {
-    if(process.env.NODE_ENV === 'production') {
-      config.externals =  [ nodeExternals({allowlist: [/^element-ui/]}) ];
-    }
-  },
-  chainWebpack: config => {
-    // GraphQL Loader
-    config.module
-      .rule('shader')
-      .test(/\.(vs|fs)$/i)
-      .use('raw-loader')
-        .loader('raw-loader')
-        .end()
-    const fontsRule = config.module.rule('fonts')
-    fontsRule.uses.clear()
-    config.module
-      .rule('fonts')
-      .test(/\.(ttf|otf|eot|woff|woff2)$/)
-      .use('base64-inline-loader')
-      .loader('base64-inline-loader')
-      .tap(options => {
-        // modify the options...    
-        return options
-      })
-      .end()
-  },
-  css: {
-    sourceMap: process.env.NODE_ENV === 'wc',
-    extract: process.env.NODE_ENV !== 'wc',
-    //Import variables into all stylesheets.
-    loaderOptions: {
-      sass: {
-        prependData: `@import '@/assets/styles';`
-      }
-    }
-  }
-}