@lancom/shared 0.0.461 → 0.0.463

package/assets/js/api/admin.js

@@ -329,6 +329,9 @@ export default {
   importProductImagesJson(productId, images) {
     return _post(`admin/products/${productId}/import-images-json`, { images });
   },
+  importProductDocumentsJson(productId, documents) {
+    return _post(`admin/products/${productId}/import-documents-json`, { documents });
+  },
   fetchProductsKits(params) {
     return _get('admin/products-kit', params);
   },

package/assets/js/api/index.js

@@ -178,6 +178,16 @@ const api = {
     }
     return _post(requestUrl, formData, config);
   },
+  uploadFile(file, progressCallback = Function.prototype, requestUrl = 'file/upload') {
+    const config = {
+      onUploadProgress: ({ loaded, total }) => {
+        progressCallback(Math.round((loaded * 100) / total));
+      }
+    };
+    const formData = new FormData();
+    formData.set('file', file);
+    return _post(requestUrl, formData, config);
+  },
   sendFailedConversionFile(data, shop) {
     return _post(`shop/${shop}/image/send-failed-conversion`, data);
   },

package/assets/js/models/product-layers.js

@@ -66,7 +66,7 @@ export class TextLayer extends Layer {
 export class ArtLayer extends Layer {
   url = null;
   fileName = '';
-  editableDetails = true;
+  editableDetails = false;
   scaleX = 1;
   scaleY = 1;
   width = null;

package/assets/js/utils/breakpoints.js

@@ -8,7 +8,8 @@ class Breakpoints {
     sm: 768,
     md: 1024,
     lg: 1280,
-    xl: 1600
+    xl: 1600,
+    xxl: 1800
   };
 
   constructor() {
@@ -42,6 +43,8 @@ class Breakpoints {
       return 'lg';
     } else if (this.isXl(w)) {
       return 'xl';
+    } else if (this.isXXl(w)) {
+      return 'xxl';
     } else {
       return 'all';
     }
@@ -69,7 +72,11 @@ class Breakpoints {
   }
 
   isXl(val) {
-    return val >= this.screens.xl;
+    return val >= this.screens.xl && val < this.screens.xxl;
+  }
+
+  isXXl(val) {
+    return val >= this.screens.xxl;
   }
 }
 

package/assets/js/utils/fabric/selection-style.js

@@ -21,6 +21,30 @@ export function loadCenterImage(cb = Function.prototype) {
   };
 }
 
+export function autoFitObjectToPrintArea(target, fabricHelper) {
+  if (fabricHelper && fabricHelper.printAreaRect) {
+    const printArea = fabricHelper.printAreaRect;
+    const scaleX = printArea.width / target.width;
+    const scaleY = printArea.height / target.height;
+    const scale = Math.min(scaleX, scaleY) * 0.8;
+
+    target.set({
+      scaleX: scale,
+      scaleY: scale,
+      left: printArea.left + printArea.width / 2,
+      top: printArea.top + printArea.height / 2
+    });
+
+    target.setCoords();
+    fabricHelper.editor.renderAll();
+    fabricHelper.dispatch('setField', { field: 'scaleX', value: scale });
+    fabricHelper.dispatch('setField', { field: 'scaleY', value: scale });
+    fabricHelper.dispatch('setField', { field: 'left', value: target.left });
+    fabricHelper.dispatch('setField', { field: 'top', value: target.top });
+    fabricHelper.dispatch('setField', { field: 'boundingRect', value: target.getBoundingRect() });
+  }
+}
+
 function renderIcon(ctx, left, top, styleOverride, fabricObject, icon) {
   const size = 20;
   ctx.save();
@@ -111,27 +135,7 @@ export function setupCustomControls(fabricHelper) {
       const target = transform.target;
       const helper = fabricHelper;
 
-      if (helper && helper.printAreaRect) {
-        const printArea = helper.printAreaRect;
-        const scaleX = printArea.width / target.width;
-        const scaleY = printArea.height / target.height;
-        const scale = Math.min(scaleX, scaleY) * 0.8;
-
-        target.set({
-          scaleX: scale,
-          scaleY: scale,
-          left: printArea.left + printArea.width / 2,
-          top: printArea.top + printArea.height / 2
-        });
-
-        target.setCoords();
-        helper.editor.renderAll();
-        helper.dispatch('setField', { field: 'scaleX', value: scale });
-        helper.dispatch('setField', { field: 'scaleY', value: scale });
-        helper.dispatch('setField', { field: 'left', value: target.left });
-        helper.dispatch('setField', { field: 'top', value: target.top });
-        helper.dispatch('setField', { field: 'boundingRect', value: target.getBoundingRect() });
-      }
+      autoFitObjectToPrintArea(target, helper);
 
       return true;
     },

package/assets/js/utils/fabric-helper.js

@@ -1,7 +1,7 @@
 
 import { fabric } from 'fabric';
 import { getPrintAreaByName } from '../models/print-area';
-import { loadRotateImage, loadCenterImage, setupCustomControls } from './fabric/selection-style';
+import { loadRotateImage, loadCenterImage, setupCustomControls, autoFitObjectToPrintArea } from './fabric/selection-style';
 import EventDispatcher from './event-dispatcher';
 import { createText, createArt } from './fabric/object-factory';
 import { buildWireframe } from './fabric/wireframe';
@@ -169,6 +169,13 @@ export default class FabricHelper {
     });
   }
 
+  autoFitActiveObject() {
+    const activeObject = this.editor.getActiveObject();
+    if (activeObject) {
+      autoFitObjectToPrintArea(activeObject, this);
+    }
+  }
+
   getEditorDPI() {
     const { widthInInches, width } = this.printAreaRect;
     return width / widthInInches;
@@ -203,7 +210,7 @@ export default class FabricHelper {
       };
       this[methods[layer.type]]({ layer, initial }).then(obj => {
         // obj.clipPath = this.boundingBox;
-        console.log('obj: ', obj.top, obj.left);
+        // console.log('obj: ', obj.top, obj.left);
         this.handleListeners(obj, layer.type);
         this.editor.add(obj);
         if (active) {
@@ -287,9 +294,11 @@ export default class FabricHelper {
     });
 
     object.on('modified', () => {
+      const boundingRect = object.getBoundingRect();
       this.dispatch('setField', { field: 'top', value: Math.round(object.top) });
       this.dispatch('setField', { field: 'left', value: Math.round(object.left) });
-      this.dispatch('setField', { field: 'boundingRect', value: object.getBoundingRect() });
+      this.dispatch('setField', { field: 'boundingRect', value: boundingRect });
+      this.dispatch('checkPrintAreaChange', { top: object.top, left: object.left, boundingRect });
     });
     /*
     ** TEXT OBJECT EVENTS

package/components/common/breakpoint.vue

@@ -1,7 +1,7 @@
 <script>
 import Breakpoints from '@lancom/shared/assets/js/utils/breakpoints';
 
-const nameOptions = ['xs', 'sm', 'md', 'lg', 'xl'];
+const nameOptions = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 const modeOptions = ['up', 'down', 'only'];
 
 export default {

package/components/common/file_uploader.vue

@@ -54,6 +54,7 @@ export default {
     hasUploadLink: { type: Boolean, default: false },
     hasConversionErrorModal: { type: Boolean, default: true },
     showErrorMessage: { type: Boolean, default: true },
+    checkStaticUrl: { type: Boolean, default: true },
     url: { type: String },
     accept: { type: String, default: 'all' }
   },
@@ -116,7 +117,7 @@ export default {
       try {
         const image = await api.uploadImage(this.file, this.onProgress, this.url, this.convert);
         this.onProgress(0);
-        const url = image && staticLink(image.thumb || image.origin);
+        const url = this.checkStaticUrl ? (image && staticLink(image.thumb || image.origin)) : image?.url;
         this.$emit('onuploaded', { ...image, url });
       } catch (e) {
         console.dir(e);

package/components/editor/editor_layers/editor-layers.scss

@@ -35,6 +35,9 @@
       align-items: center;
       justify-content: center;
     }
+    &-item {
+      border-bottom: 2px solid $grey_3;
+    }
   }
   &__empty {
     width: 306px;

package/components/editor/editor_layers/editor-layers.vue

@@ -69,13 +69,15 @@
               :key="group.printArea._id"
               class="EditorLayersGroup__wrapper">
               <div
-                @click="toggleOpenedGroup(group.printArea)"
-                class="EditorLayersGroup__header">
+                class="EditorLayersGroup__header"
+                @click="toggleOpenedGroup(group.printArea)">
                 <div>
                   <h5 class="lc_h5">
                     {{ group | groupLabel }}
                   </h5>
-                  <div class="lc_caption">{{ group.printArea.side }}</div>
+                  <div class="lc_caption">
+                    {{ group.printArea.side }}
+                  </div>
                 </div>
                 <div
                   class="EditorLayersGroup__arrow"
@@ -84,8 +86,8 @@
                 </div>
               </div>
               <div
-                class="EditorLayers__list-content"
-                v-if="openedGroup === group.printArea._id">
+                v-if="openedGroup === group.printArea._id"
+                class="EditorLayers__list-content">
                 <editor-layers-layer
                   v-for="(layer, index) in group.layers"
                   :key="`${layer.createdAt}-${index}`"
@@ -93,12 +95,18 @@
                   :active="selectedLayer && selectedLayer.createdAt === layer.createdAt"
                   :visible-move-up="layer !== group.layers[0]"
                   :visible-move-down="layer !== group.layers[group.layers.length - 1]"
+                  :layers="editableLayers"
+                  :side="group.printArea.side"
+                  class="EditorLayers__list-item"
                   @select="setSelectedLayer(layer)"
                   @edit="editLayer(layer)"
                   @duplicate="duplicateLayer(layer)"
                   @remove="removeLayer(layer)"
                   @up="moveUp(layer)"
-                  @down="moveDown(layer)">
+                  @down="moveDown(layer)"
+                  @print-area-select="handleLayerPrintAreaSelect"
+                  @print-area-mouseover="toogleBoundBox(true, $event)"
+                  @print-area-mouseleave="toogleBoundBox(false, $event)"">
                 </editor-layers-layer>
               </div>
             </div>
@@ -219,7 +227,8 @@ export default {
       'setEditableSide',
       'setSelectedPrintArea',
       'setEditablePrintArea',
-      'setPreviewPrintArea'
+      'setPreviewPrintArea',
+      'triggerAutoFit'
     ]),
     ...mapActions(['increaseLayersUpdatesCount']),
     openSelectedLayerGroup(selected) {
@@ -248,8 +257,8 @@ export default {
       }
     },
     editLayer(layer) {
+      this.setSelectedLayer(layer);
       if (layer.editableDetails) {
-        this.setSelectedLayer(layer);
         this.setEditModeSelectedLayer(true);
       }
     },
@@ -287,6 +296,24 @@ export default {
       const printSize = printArea.printSize._id;
       this.setLayerField({ field: 'printSize', value: printSize });
 
+      this.triggerAutoFit();
+
+      this.toggleOpenedGroup(printArea, true);
+    },
+    handleLayerPrintAreaSelect({ layer, option }) {
+      // Set the layer as selected first
+      this.setSelectedLayer(layer);
+
+      // Update the layer's print area
+      const printArea = option.printArea;
+      this.setLayerField({ field: 'printArea', value: printArea.parentPrintArea || printArea._id });
+
+      const printSize = printArea.printSize._id;
+      this.setLayerField({ field: 'printSize', value: printSize });
+
+      this.triggerAutoFit();
+
+      // Open the group where this layer now belongs
       this.toggleOpenedGroup(printArea, true);
     },
     toogleBoundBox(state, option) {

package/components/editor/editor_layers/editor_layers_layer/editor-layers-layer.scss

@@ -3,13 +3,7 @@
 
 .EditorLayersLayer {
   &__wrapper {
-    padding: 30px 0px 20px 20px;
-    display: flex;
-    position: relative;
-    cursor: pointer;
-    user-select: none;
-    align-items: stretch;
-    border-bottom: 2px solid $grey_3;
+    padding: 20px 0px 20px 20px;
     position: relative;
     &:before {
       content: '';
@@ -31,6 +25,15 @@
       padding-left: 8px;
     }
   }
+  &__preview {
+    display: flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: stretch;
+  }
+  &__print-areas {
+    margin-top: 20px;
+  }
   &__thumb {
     flex-shrink: 0;
     width: 83px;
@@ -157,3 +160,12 @@
     }
   }
 }
+
+::v-deep {
+  .EditorPrintAreaOptions__wrapper {
+    padding: 0 !important;
+  }
+  .EditorPrintAreaOptions__option {
+    margin-bottom: 0 !important;
+  }
+}

package/components/editor/editor_layers/editor_layers_layer/editor-layers-layer.vue

@@ -1,99 +1,114 @@
 <template>
   <div
     class="EditorLayersLayer__wrapper"
-    :class="{ active }"
-    @click="$emit('select')">
-    <div class="EditorLayersLayer__controls">
-      <span v-if="visibleMoveUp">
+    :class="{ active }">
+    <div
+      class="EditorLayersLayer__preview"
+      @click="$emit('select')">
+      <div class="EditorLayersLayer__controls">
+        <span v-if="visibleMoveUp">
+          <i
+            class="icon-arrow-left EditorLayersLayer__up"
+            @click="$emit('up')"></i>
+        </span>
+        <span v-if="visibleMoveDown">
+          <i
+            class="icon-arrow-left EditorLayersLayer__down"
+            @click="$emit('down')"></i>
+        </span>
         <i
-          class="icon-arrow-left EditorLayersLayer__up"
-          @click="$emit('up')"></i>
-      </span>
-      <span v-if="visibleMoveDown">
+          class="icon-delete"
+          @click="$emit('remove')"></i>
+      </div>
+      <div class="EditorLayersLayer__thumb">
         <i
-          class="icon-arrow-left EditorLayersLayer__down"
-          @click="$emit('down')"></i>
-      </span>
-      <i
-        class="icon-delete"
-        @click="$emit('remove')"></i>
-    </div>
-    <div class="EditorLayersLayer__thumb">
-      <i
-        v-if="layerIcon"
-        :class="layerIcon"></i>
-      <div
-        v-else-if="layer.type === 'art' && layer.url"
-        :style="{ 'background-image': `url(${layer.url})` }"
-        class="EditorLayersLayer__thumb-inner">
+          v-if="layerIcon"
+          :class="layerIcon"></i>
+        <div
+          v-else-if="layer.type === 'art' && layer.url"
+          :style="{ 'background-image': `url(${layer.url})` }"
+          class="EditorLayersLayer__thumb-inner">
+        </div>
       </div>
-    </div>
-    <div class="EditorLayersLayer__content">
-      <!-- <div>
-        <div v-if="layerPrintArea">layerPrintArea: {{ layerPrintArea.name }}</div>
-        <div v-if="layerPrintType">layerPrintType: {{ layerPrintType.name }}</div>
-        <div v-if="layerPrintSize">layerPrintSize: {{ layerPrintSize.name }}</div>
-        <div v-if="side">side: {{ side }}</div>
-      </div> -->
-      <div class="EditorLayersLayer__info">
-        <div class="EditorLayersLayer__info-row">
-          <div class="EditorLayersLayer__badge">
-            {{ layer.type }}
+      <div class="EditorLayersLayer__content">
+        <div class="EditorLayersLayer__info">
+          <div class="EditorLayersLayer__info-row">
+            <div class="EditorLayersLayer__badge">
+              {{ layer.type }}
+            </div>
           </div>
-        </div>
-        <div class="EditorLayersLayer__info-row">
-          <div class="EditorLayersLayer__title">
-            {{ title }}
+          <div class="EditorLayersLayer__info-row">
+            <div class="EditorLayersLayer__title">
+              {{ title }}
+            </div>
+          </div>
+          <div
+            v-if="artQuality"
+            class="EditorLayersLayer__info-row">
+            <div class="EditorLayersLayer__quality-label">
+              Print quality:
+            </div>
+            <div
+              class="EditorLayersLayer__quality-value"
+              :class="artQuality.class">
+              {{ artQuality.value || artQuality.class }}
+            </div>
           </div>
         </div>
-        <div
-          v-if="artQuality"
-          class="EditorLayersLayer__info-row">
-          <div class="EditorLayersLayer__quality-label">
-            Print quality:
+        <div class="EditorLayersLayer__actions">
+          <div
+            v-if="layer.editableDetails"
+            class="lc_medium16 EditorLayersLayer__action"
+            @click.stop="$emit('edit')">
+            Edit
+          </div>
+          <div v-if="layer.editableDetails">
+            &nbsp;
+            &#124;
+            &nbsp;
           </div>
           <div
-            class="EditorLayersLayer__quality-value"
-            :class="artQuality.class">
-            {{ artQuality.value || artQuality.class }}
+            class="lc_medium16 EditorLayersLayer__action"
+            @click.stop="$emit('duplicate')">
+            Duplicate
+          </div>
+          &nbsp;
+          &#124;
+          &nbsp;
+          <div
+            class="lc_medium16 EditorLayersLayer__action"
+            @click.stop="$emit('remove')">
+            Remove
           </div>
-        </div>
-      </div>
-      <div class="EditorLayersLayer__actions">
-        <div
-          v-if="layer.editableDetails"
-          class="lc_medium16 EditorLayersLayer__action"
-          @click.stop="$emit('edit')">
-          Edit
-        </div>
-        &nbsp;
-        &#124;
-        &nbsp;
-        <div
-          class="lc_medium16 EditorLayersLayer__action"
-          @click.stop="$emit('duplicate')">
-          Duplicate
-        </div>
-        &nbsp;
-        &#124;
-        &nbsp;
-        <div
-          class="lc_medium16 EditorLayersLayer__action"
-          @click.stop="$emit('remove')">
-          Remove
         </div>
       </div>
     </div>
+    <div
+      v-if="product && active"
+      class="EditorLayersLayer__print-areas">
+      <editor-print-area-options
+        :selected="layer.printArea"
+        :side="side"
+        :product="product"
+        :layers="layers"
+        @select="handlePrintAreaSelect"
+        @option-mouseover="$emit('print-area-mouseover', $event)"
+        @option-mouseleave="$emit('print-area-mouseleave', $event)" />
+    </div>
   </div>
 </template>
 
 <script>
 import printLayerMixin from '@lancom/shared/mixins/print-layer';
 import { number } from '@lancom/shared/assets/js/utils/filters';
+import EditorPrintAreaOptions from '@lancom/shared/components/editor/editor_print_area_options/editor-print-area-options';
 
 export default {
   name: 'EditorLayersLayer',
   filters: { number },
+  components: {
+    EditorPrintAreaOptions
+  },
   mixins: [printLayerMixin],
   props: {
     active: {
@@ -105,6 +120,10 @@ export default {
     },
     visibleMoveDown: {
       type: Boolean
+    },
+    layers: {
+      type: Array,
+      default: () => ([])
     }
   },
   computed: {
@@ -132,16 +151,11 @@ export default {
         return null;
       }
       const isVector = /\.(ai|pdf|svg|eps)$/.test((this.layer.url || '').toLowerCase());
-      let quality;
       switch (true) {
         case this.layer.dpi < 75:
-          quality = 'too small';
-          break;
         case this.layer.dpi >= 75 && this.layer.dpi < 100:
-          quality = 'low quality';
           break;
         case this.layer.dpi >= 100 || isVector:
-          quality = 'good quality';
           break;
       }
       return {
@@ -152,6 +166,11 @@ export default {
   },
   mounted() {
     console.log('layer: ', this.layer);
+  },
+  methods: {
+    handlePrintAreaSelect(option) {
+      this.$emit('print-area-select', { layer: this.layer, option });
+    }
   }
 };
 </script>

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

@@ -36,8 +36,9 @@
                   :print-area-size="selectedPrintArea"
                   :visible-background-image="visibleBackgroundImage"
                   :class="side"
-                  class="EditorWorkspace__side rotate-y-element">
-                </editor-workspace-side>
+                  class="EditorWorkspace__side rotate-y-element"
+                  @workspace="onWorkspaceChange($event)"
+                  @print-area-changed="onPrintAreaChanged($event)" />
               </transition>
             </div>
           </div>
@@ -74,8 +75,8 @@
                 :zoom-size="sideZoomSize"
                 :visible-background-image="visibleBackgroundImage"
                 class="EditorWorkspace__side rotate-y-element"
-                @workspace="onWorkspaceChange($event)">
-              </editor-workspace-side>
+                @workspace="onWorkspaceChange($event)"
+                @print-area-changed="onPrintAreaChanged($event)" />
             </transition>
           </div>
           <div
@@ -214,7 +215,6 @@ export default {
         const printAreaWidth = printAreaRect.width;
         const printAreaHeight = printAreaRect.height;
 
-
         const targetWidth = this.editorSize.width * 0.6;
         const scaleX = targetWidth / printAreaWidth;
         const scale = scaleX;
@@ -304,6 +304,9 @@ export default {
       if (this.$refs.editor) {
         this.$refs.editor.toogleBoundBox(state, printAreaOption);
       }
+    },
+    onPrintAreaChanged({ printArea, size }) {
+      this.selectPrintArea({ printArea, size });
     }
   }
 };

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

@@ -136,12 +136,12 @@ import { fabric } from 'fabric';
 import { mapGetters, mapMutations, mapActions } from 'vuex';
 import throttle from 'lodash.throttle';
 import debounce from 'lodash.debounce';
-import { getLargeColorImage, getMediumColorImage } from '@lancom/shared/assets/js/utils/colors';
+import { getLargeColorImage, getMediumColorImage, getColorBackgroundStyle } from '@lancom/shared/assets/js/utils/colors';
 import { COLORS_IMAGES_TYPES } from '@lancom/shared/assets/js/constants/colors';
 import FabricHelper from '@lancom/shared/assets/js/utils/fabric-helper';
 import { findParentByPredicate } from '@lancom/shared/assets/js/utils/dom';
 import Breakpoints from '@lancom/shared/assets/js/utils/breakpoints';
-import { getColorBackgroundStyle } from '@lancom/shared/assets/js/utils/colors';
+import { getPrintAreaByName } from '@lancom/shared/assets/js/models/print-area';
 import FileUploader from '@lancom/shared/components/common/file_uploader';
 
 export default {
@@ -158,7 +158,8 @@ export default {
       type: Object
     },
     printAreaSize: {
-      type: String | Object
+      type: [String, Object],
+      default: null
     },
     zoomSize: {
       type: Number
@@ -178,6 +179,7 @@ export default {
       visibleWireframe: false,
       visibleOnpress: false,
       fabricHelper: null,
+      pendingAutoFit: false,
       redrawWithThrottle: throttle(this.redraw, 100, { trailing: false }),
       saveLayersAsImageWithDebounce: debounce(this.saveLayersAsImage, 400),
       onResize: debounce(this.handleWorkspaceSize, 1000),
@@ -204,7 +206,8 @@ export default {
       'offsetWarningVisible',
       'showRecommendationToUseLargerImage',
       'showErrorAboutSmallImage',
-      'previewPrintArea'
+      'previewPrintArea',
+      'autoFitTrigger'
     ]),
     editableLayersCount() {
       return this.editableLayers?.length;
@@ -293,6 +296,11 @@ export default {
       this.fabricHelper.setPrintArea(value, this.editorSize, this.product);
       this.redraw();
     },
+    autoFitTrigger() {
+      if (this.fabricHelper && this.selectedLayer) {
+        this.pendingAutoFit = true;
+      }
+    },
     zoomSize() {
       this.handleWorkspaceSize();
     }
@@ -317,15 +325,16 @@ export default {
       'setEditModeSelectedLayer',
       'setSelectedLayer',
       'removeTemplateLayer',
-      'setOffsetWarningVisible'
+      'setOffsetWarningVisible',
+      'setEditorSize'
     ]),
     ...mapMutations('layers', [
       'setLayersThumbnail'
     ]),
     editFirstLayer() {
       const layer = this.printAreaLayers.find(l => l.editableDetails);
+      this.setSelectedLayer(layer);
       if (layer?.editableDetails) {
-        this.setSelectedLayer(layer);
         this.$nextTick(() => this.setEditModeSelectedLayer(true));
       }
     },
@@ -350,8 +359,11 @@ export default {
       return (!skipZoom && this.zoomSize) || this.editorSizeBreakpoints[this.breakpoints.is] || 430;
     },
     handleWorkspaceSize() {
+      console.log('handleWorkspaceSize...');
       const size = this.calcWorkspaceSize();
       this.fabricHelper.scaleWorkspace({ width: size, height: size });
+      this.setEditorSize({ width: size, height: size });
+      console.log('workspace', { size: this.calcWorkspaceSize(true), fabricHelper: this.fabricHelper });
       this.$emit('workspace', { size: this.calcWorkspaceSize(true), fabricHelper: this.fabricHelper });
     },
     initEventsListeners() {
@@ -380,11 +392,11 @@ export default {
         this.setSelectedLayerField(data);
         this.saveLayersAsImageWithDebounce();
       });
-      this.fabricHelper.on('selectLayer', (layer) => {
+      this.fabricHelper.on('selectLayer', layer => {
         this.setSelectedLayer(layer);
-        this.$nextTick(() => this.setEditModeSelectedLayer(true));
+        // this.$nextTick(() => this.setEditModeSelectedLayer(true));
       });
-      this.fabricHelper.on('removeLayer', (layer) => {
+      this.fabricHelper.on('removeLayer', layer => {
         setTimeout(() => {
           this.removeTemplateLayer(layer);
           // if (!this.editModeSelectedLayer) {
@@ -395,6 +407,7 @@ export default {
         }, 100);
       });
       this.fabricHelper.on('outOfPrintArea', this.setOffsetWarningVisibility);
+      this.fabricHelper.on('checkPrintAreaChange', this.handlePrintAreaChange);
 
       this.updateBackgroundImage();
       this.redrawWithThrottle();
@@ -403,12 +416,19 @@ export default {
       if (this.drawingInProcess) {
         return;
       }
-      console.log('redraw...');
       this.drawingInProcess = true;
       this.fabricHelper.clear();
       this.fabricHelper.addBoundingArea();
       await this.addLayersToCanvas();
       this.drawingInProcess = false;
+
+      if (this.pendingAutoFit) {
+        this.pendingAutoFit = false;
+        this.$nextTick(() => {
+          this.fabricHelper.autoFitActiveObject();
+        });
+      }
+
       this.saveLayersAsImageWithDebounce();
     },
     async addLayersToCanvas() {
@@ -481,6 +501,57 @@ export default {
     setOffsetWarningVisibility(visible) {
       this.setOffsetWarningVisible(visible);
     },
+    handlePrintAreaChange({ top, left, boundingRect }) {
+      if (!this.selectedLayer) {
+        return;
+      }
+
+      const printAreas = this.product.printAreas?.filter(pa => pa.side === this.side) || [];
+
+      for (const printArea of printAreas) {
+        const printAreaRect = getPrintAreaByName({
+          printArea: printArea.parentPrintArea || printArea._id,
+          printSize: printArea.printSize,
+          printAreaOffsets: printArea.printAreaOffsets,
+          editorWidth: this.editorSize.width,
+          editorHeight: this.editorSize.height
+        }, this.product, true);
+
+        const overlaps = boundingRect ? this.checkBoundingBoxOverlap(boundingRect, printAreaRect) : this.isPointInPrintArea(top, left, printAreaRect);
+
+        if (overlaps) {
+          const currentPrintAreaId = this.selectedLayer.printArea;
+          const newPrintAreaId = printArea.parentPrintArea || printArea._id;
+
+          if (currentPrintAreaId !== newPrintAreaId) {
+            this.setSelectedLayerField({ field: 'printArea', value: newPrintAreaId });
+            this.setSelectedLayerField({ field: 'printSize', value: printArea.printSize?._id });
+            this.$emit('print-area-changed', { printArea, size: printArea.printSize });
+          }
+          break;
+        }
+      }
+    },
+    checkBoundingBoxOverlap(layerBoundingRect, printAreaRect) {
+      const layerRight = layerBoundingRect.left + layerBoundingRect.width;
+      const layerBottom = layerBoundingRect.top + layerBoundingRect.height;
+      const printAreaRight = printAreaRect.left + printAreaRect.width;
+      const printAreaBottom = printAreaRect.top + printAreaRect.height;
+
+      const overlapsHorizontally = layerBoundingRect.left < printAreaRight && layerRight > printAreaRect.left;
+      const overlapsVertically = layerBoundingRect.top < printAreaBottom && layerBottom > printAreaRect.top;
+
+      return overlapsHorizontally && overlapsVertically;
+    },
+    isPointInPrintArea(pointTop, pointLeft, printAreaRect) {
+      const { top, left, width, height } = printAreaRect;
+      return (
+        pointLeft >= left &&
+        pointLeft <= left + width &&
+        pointTop >= top &&
+        pointTop <= top + height
+      );
+    },
     toogleBoundBox(state, option) {
       if (!this.fabricHelper || ['mini', 'xs'].includes(this.breakpoints.is)) {
         return;

package/components/product/clearance_products/clearance-products.vue

@@ -1,5 +1,6 @@
 <template>
   <section
+    v-if="products.length > 0"
     class="ClearanceProducts__wrapper">
     <div class="ClearanceProducts__head">
       <h2 class="ClearanceProducts__title">

package/components/product/layouts/product_documents/product-documents.scss

@@ -0,0 +1,57 @@
+.ProductDocuments {
+  &__wrapper {
+    margin-bottom: 20px;
+  }
+
+  &__header {
+    margin-bottom: 16px;
+  }
+
+  &__content {
+    width: 100%;
+  }
+
+  &__table {
+    width: 100%;
+  }
+
+  &__icon-container {
+    width: 80px;
+    text-align: center;
+    padding: 16px;
+  }
+
+  &__icon {
+    width: 48px;
+    height: 48px;
+    object-fit: contain;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    margin-left: 20px;
+  }
+
+  &__link {
+    text-decoration: none;
+    color: inherit;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: #0066cc;
+      text-decoration: underline;
+    }
+  }
+
+  &__empty {
+    text-align: center;
+    padding: 24px;
+  }
+}

package/components/product/layouts/product_documents/product-documents.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="ProductDocuments__wrapper">
+    <div class="ProductDocuments__header">
+      <h5 class="lc_semibold20 lc_black">
+        Documents
+      </h5>
+    </div>
+    <div class="ProductDocuments__content">
+      <table class="lc_table bordered ProductDocuments__table">
+        <tbody class="centered">
+          <tr
+            v-for="(document, index) in product.documents"
+            :key="document._id">
+            <td>
+              <div class="ProductDocuments__item">
+                <a
+                  :href="document.url"
+                  target="_blank"
+                  class="lc_medium16 lc_black ProductDocuments__link">
+                  {{ document.name || `Document ${index + 1}` }}
+                </a>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ProductDocuments',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-documents';
+</style>

package/components/product/product_images/product-images.scss

@@ -0,0 +1,62 @@
+@import '@lancom/shared/assets/scss/variables';
+
+.ProductImages__wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  width: 100%;
+  margin: 24px 0;
+
+  @media (max-width: $bp-small-max) {
+    gap: 12px;
+    margin: 16px 0;
+  }
+
+  @media (max-width: $bp-extra-small-max) {
+    gap: 8px;
+    margin: 12px 0;
+  }
+}
+
+.ProductImages__item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  &--full {
+    grid-column: 1 / -1;
+    aspect-ratio: 1 / 1;
+  }
+
+  &--half {
+    grid-column: span 1;
+    aspect-ratio: 1 / 1;
+  }
+
+  @media (max-width: $bp-small-max) {
+    border-radius: 4px;
+
+    &:hover {
+      transform: none;
+      box-shadow: none;
+    }
+  }
+}
+
+.ProductImages__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    opacity: 0.95;
+  }
+}

package/components/product/product_images/product-images.vue

@@ -0,0 +1,65 @@
+<template>
+  <div v-if="hasImages" class="ProductImages__wrapper">
+    <div
+      v-for="(image, index) in modelImages"
+      :key="`model-${index}`"
+      class="ProductImages__item ProductImages__item--full">
+      <img
+        :src="getImageUrl(image)"
+        :alt="image.alt"
+        class="ProductImages__image"
+        loading="lazy" />
+    </div>
+    <div
+      v-for="(image, index) in additionalImages"
+      :key="`additional-${index}`"
+      class="ProductImages__item ProductImages__item--half">
+      <img
+        :src="getImageUrl(image)"
+        :alt="image.alt"
+        class="ProductImages__image"
+        loading="lazy" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+import { isValidImageType } from '@lancom/shared/assets/js/utils/colors';
+
+export default {
+  name: 'ProductImages',
+  computed: {
+    ...mapGetters('product', [
+      'product',
+      'images',
+      'editableColor'
+    ]),
+    colorImages() {
+      if (!this.editableColor) {
+        return this.images;
+      }
+      return this.images.filter(img => img.color === this.editableColor._id);
+    },
+    modelImages() {
+      return this.colorImages.filter(img => isValidImageType(img, 'model'));
+    },
+    additionalImages() {
+      return this.colorImages.filter(img => isValidImageType(img, 'additional_image_link'));
+    },
+    hasImages() {
+      return this.modelImages.length > 0 || this.additionalImages.length > 0;
+    }
+  },
+  methods: {
+    getImageUrl(image) {
+      return staticLink(image.large || image.medium || image.small);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-images';
+</style>

package/package.json

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

package/store/product.js

@@ -32,7 +32,8 @@ export const state = () => ({
     sm: 580,
     md: 430,
     lg: 600,
-    xl: 720
+    xl: 720,
+    xxl: 720
   },
   template: {
     visibleSteps: false,
@@ -61,6 +62,7 @@ export const state = () => ({
   selectedTab: null,
   previewPrintArea: null,
   layersUpdatesCount: 0,
+  autoFitTrigger: 0,
   editableSide: { id: 'front' }
 });
 
@@ -89,6 +91,7 @@ export const getters = {
   usedSimpleProducts: ({ template }) => (template.simpleProducts || []).filter(p => p.amount > 0),
   usedSimpleProductsQuantity: ({ template }) => (template.simpleProducts || []).filter(p => p.amount > 0).reduce((sum, { amount }) => sum + amount, 0),
   usedBigSizeSimpleProductsQuantity: (state, { usedSimpleProducts }) => filterBigSize(usedSimpleProducts).reduce((sum, { amount }) => sum + amount, 0),
+  autoFitTrigger: ({ autoFitTrigger }) => autoFitTrigger,
   defaultSimpleProduct: ({ productDetails, editableColor, defaultSize }) => {
     let simpleProduct = null;
     if (defaultSize) {
@@ -545,6 +548,9 @@ export const mutations = {
   increaseLayersUpdatesCount(state) {
     state.layersUpdatesCount++;
   },
+  triggerAutoFit(state) {
+    state.autoFitTrigger++;
+  },
   /*
   ** MANAGE COLORS
   */