@lancom/shared 0.0.342 → 0.0.344

package/components/editor/editor_workspace/editor-workspace.scss

@@ -10,7 +10,7 @@
     background-color: white;
     display: flex;
     justify-content: center;
-    z-index: 1;
+    z-index: 1004;
   }
   &__sides {
     position: relative;
@@ -20,8 +20,8 @@
     &-container {
       position: relative;
       margin: 0 auto;
-      width: 290px;
-      height: 290px;
+      width: 350px;
+      height: 350px;
       max-width: 100%;
       @media (min-width: $bp-extra-small-min) {
         width: 400px;
@@ -101,7 +101,7 @@
     position: sticky;
     bottom: 0px;
     background: white;
-    width: 290px;
+    width: 350px;
     @media (min-width: $bp-extra-small-min) {
       width: 370px;
     }

package/components/editor/editor_workspace/editor-workspace.vue

@@ -48,7 +48,7 @@
         <div
           class="EditorWorkspace__sides-container"
           :class="{
-            'EditorWorkspace__sides-container--zoom-in': zoomPrintArea || isZoomIn
+            'EditorWorkspace__sides-container--zoom-in': isZoomIn
           }"
           :style="printAreaZoomInStyles">
           <div
@@ -69,7 +69,6 @@
                 :class="editableSide.id"
                 :zoom-size="sideZoomSize"
                 class="EditorWorkspace__side rotate-y-element"
-                @zoom-in="zoomIn()"
                 @workspace="onWorkspaceChange($event)">
               </editor-workspace-side>
             </transition>
@@ -77,7 +76,7 @@
           <div
             class="EditorWorkspace__sides-toggle"
             :class="{
-              'EditorWorkspace__sides-toggle--fixed': zoomPrintArea || isZoomIn
+              'EditorWorkspace__sides-toggle--fixed': isZoomIn
             }"
             @click="toggleSide()">
             <i class="icon-rotate-tee"></i>
@@ -92,9 +91,10 @@
       </client-only>
     </breakpoint>
     <div
+      v-if="!isZoomIn"
       class="EditorWorkspace__print-area-options"
       :class="{
-        'EditorWorkspace__print-area-options--bottom': zoomPrintArea || isZoomIn
+        'EditorWorkspace__print-area-options--bottom': isZoomIn
       }">
       <editor-print-area-options
         v-if="productDetailsLoaded"
@@ -136,7 +136,6 @@ export default {
       fabricHelper: null,
       preloading: true,
       isRotating: false,
-      zoomSize: null,
       productSides: [
         { label: 'Front', value: 'front' },
         { label: 'Back', value: 'back' }
@@ -155,6 +154,7 @@ export default {
   computed: {
     ...mapGetters([
       'product',
+      'selectedLayer',
       'productDetailsLoaded',
       'selectedPrintArea',
       'editablePrintArea',
@@ -164,13 +164,14 @@ export default {
       'editorSize'
     ]),
     sideZoomSize() {
-      return this.printAreaZoomSize?.width || this.zoomSize;
+      return this.printAreaZoomSize?.width;
     },
     isZoomIn() {
-      return !!this.zoomSize;
+      console.log('selectedLayer: ', this.selectedLayer);
+      return this.zoomPrintArea && !!this.selectedLayer;
     },
     printAreaZoomInStyles() {
-      if (this.fabricHelper && this.zoomPrintArea) {
+      if (this.fabricHelper && this.isZoomIn) {
         return {
           width: `${this.printAreaZoomSize.width}px`,
           height: `${this.printAreaZoomSize.height}px`,
@@ -182,14 +183,13 @@ export default {
       return {};
     },
     printAreaZoomSize() {
-      if (this.fabricHelper && this.zoomPrintArea) {
+      if (this.fabricHelper && this.isZoomIn) {
         const { printAreaRect } = this.fabricHelper;
         const printAreaWidth = printAreaRect.width;
         const printAreaHeight = printAreaRect.height;
 
 
         const targetWidth = this.editorSize.width * 0.6;
-        const targetHeight = this.editorSize.height * 0.6;
         const scaleX = targetWidth / printAreaWidth;
         const scale = scaleX;
 
@@ -215,8 +215,12 @@ export default {
     ...mapMutations([
       'setEditableSide',
       'setSelectedPrintArea',
-      'setEditablePrintArea'
+      'setEditablePrintArea',
+      'setSelectedLayer'
     ]),
+    zoomOut() {
+      this.setSelectedLayer(null);
+    },
     onWorkspaceChange({ size, fabricHelper }) {
       this.fabricHelper = fabricHelper;
       this.size = size;
@@ -271,11 +275,8 @@ export default {
         this.$refs.editor.toogleBoundBox(state, printAreaOption);
       }
     },
-    zoomIn() {
-      this.zoomSize = 720;
-    },
     zoomOut() {
-      this.zoomSize = null;
+      
     }
   }
 };

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -297,7 +297,7 @@ export default {
     },
     calcWorkspaceSize(skipZoom) {
       const sizes = {
-        mini: 290,
+        mini: 350,
         xs: 400,
         sm: 580,
         md: 430,

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.scss

@@ -11,9 +11,10 @@
   }
   &__menu {
     position: fixed;
-    // right: 0;
-    // top: calc(100vh - 78px);
     left: 0;
+    right: 0;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
     height: 78px;
     z-index: 999999;
     display: grid;

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="MobileEditorProductDetails__wrapper">
     <div
-      v-if="width"
+      v-if="top"
       class="MobileEditorProductDetails__menu"
       :style="{ width, top }">
       <editor-pricing
@@ -62,7 +62,7 @@
         @click="hide">
       </div>
       <div
-        v-show="isOpen"
+        v-if="isOpen"
         key="container"
         class="MobileEditorProductDetails__container"
         @close="hide">
@@ -91,6 +91,7 @@
 
 <script>
 import { createNamespacedHelpers } from 'vuex';
+import throttle from 'lodash.throttle';
 import { EventBus } from '@lancom/shared/assets/js/utils/event-bus';
 import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
 import EditorWorkspace from '../editor_workspace/editor-workspace';
@@ -112,7 +113,8 @@ export default {
       isOpen: false,
       currentTab: null,
       top: null,
-      width: null 
+      width: null,
+      updateMobileMenuPositionWithThrottle: throttle(this.updateMobileMenuPosition, 50, { trailing: false }),
     };
   },
   computed: {
@@ -120,12 +122,16 @@ export default {
   },
   mounted() {
     EventBus.$on('focus-on-default-product', this.focusOnDefaultProduct);
+    window.addEventListener('resize', this.updateMobileMenuPositionWithThrottle);
+    window.addEventListener('scroll', this.updateMobileMenuPositionWithThrottle);
+    window.addEventListener('orientationchange', this.updateMobileMenuPositionWithThrottle);
     this.updateMobileMenuPosition();
-    window.addEventListener('resize', this.updateMobileMenuPosition);
   },
   beforeDestroy() {
     EventBus.$off('focus-on-default-product', this.focusOnDefaultProduct);
-    window.removeEventListener('resize', this.updateMobileMenuPosition);
+    window.removeEventListener('resize', this.updateMobileMenuPositionWithThrottle);
+    window.addEventListener('scroll', this.updateMobileMenuPositionWithThrottle);
+    window.addEventListener('orientationchange', this.updateMobileMenuPositionWithThrottle);
   },
   methods: {
     ...mapMutations(['setEditModeSelectedLayer', 'removeTemplateLayer', 'setSelectedLayer']),
@@ -145,7 +151,8 @@ export default {
       }, 250);
     },
     updateMobileMenuPosition() {
-      this.top = `${window.outerHeight - 78}px`;
+      const safeAreaInsetBottom = window.innerHeight - 78;
+      this.top = `${safeAreaInsetBottom}px`;
       this.width = `${window.outerWidth}px`;
     },
     focusOnDefaultProduct() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.342",
+  "version": "0.0.344",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {