@lancom/shared 0.0.310 → 0.0.312

package/assets/js/utils/fabric/wireframe.js

@@ -3,7 +3,7 @@ import { fabric } from 'fabric';
 
 const sizes = [];
 
-export const buildWireframe = ({ width, height, editor, print, printSize }) => {
+export const buildWireframe = ({ width, height, editor, print, printSize, hiddenFrame }) => {
   const layers = editor.getObjects();
   const printAreaSize = printSize || print?.printSize || { width: 1, height: 1};
   const group = new fabric.Group(layers);
@@ -133,11 +133,14 @@ export const buildWireframe = ({ width, height, editor, print, printSize }) => {
   horizontalSize.set({
     left: horizontalSize.left - horizontalSize.width / 2
   });
-  editor.add(verticalLine);
-  editor.add(horizontallLine);
-  editor.add(verticalArrow);
-  editor.add(horizontalArrow);
-  editor.add(verticalSize);
-  editor.add(horizontalSize);
-  editor.add(bounding);
+  console.log('hiddenFrame: ', hiddenFrame);
+  if (!hiddenFrame) {
+    editor.add(verticalLine);
+    editor.add(horizontallLine);
+    editor.add(verticalArrow);
+    editor.add(horizontalArrow);
+    editor.add(verticalSize);
+    editor.add(horizontalSize);
+    editor.add(bounding);
+  }
 };

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

@@ -192,7 +192,6 @@ export default class FabricHelper {
 
   createObject({ layer, active }) {
     const initial = !layer.modifiedAt;
-    console.log('createObject...', layer.type, layer.top, layer.left);
     return new Promise(resolve => {
       const methods = {
         text: 'createTextObject',
@@ -220,8 +219,8 @@ export default class FabricHelper {
     });
   }
 
-  buildWireframe({ width, height, print, printSize }) {
-    buildWireframe({ width, height, editor: this.editor, print, printSize });
+  buildWireframe({ width, height, print, printSize, hiddenFrame }) {
+    buildWireframe({ width, height, editor: this.editor, print, printSize, hiddenFrame });
   }
 
   checkBoundingIntersection(object) {
@@ -363,7 +362,10 @@ export default class FabricHelper {
   }
 
   getLayersAsImage() {
-    const data = this.editor.toDataURL('png');
+    const data = this.editor.toDataURL({
+      format: 'png',
+      multiplier: this.editor.width < 500 ? 2 : 1
+    });
     this.editor.renderAll();
     return data;
   }

package/assets/js/utils/layers.js

@@ -7,10 +7,11 @@ export function generateLayersTemplate(template, printArea) {
   }));
 }
 
-export function fitLayerToEditorSize(layer, { size }, { width, height, top, left }) {
-  const scaleKoef = (width < height ? width / size.width : height / size.height) - 0.02;
-  layer.top = top + layer.top * scaleKoef + (Math.abs(size.height * scaleKoef - height) / 2) - 4;
-  layer.left = left + layer.left * scaleKoef + Math.abs((size.width * scaleKoef - width) / 2) - 3;
+export function fitLayerToEditorSize(layer, { size }, printArea) {
+  const { width, height, top, left } = printArea;
+  const scaleKoef = width / size.width;
+  layer.top = top + layer.top * scaleKoef - 5 + (height - size.height * scaleKoef) / 2;
+  layer.left = left + layer.left * scaleKoef - 5 + (width - size.width * scaleKoef) / 2;
   ['fontSize', 'scaleX', 'scaleY'].forEach(property => {
     if (property in layer) {
       const originalSize = layer[property];

package/components/common/payment/payment_success/payment-success.vue

@@ -24,13 +24,13 @@
 </template>
 
 <script>
-import messages from '@/messages';
+import { MESSAGES } from '@/messages';
 
 export default {
   name: 'PaymentSuccess',
   data() {
     return {
-      messages
+      messages: MESSAGES
     };
   },
   props: {

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

@@ -1,6 +1,17 @@
 @import "@/assets/scss/variables";
 
 .EditorWorkspace {
+  &__preloading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: white;
+    display: flex;
+    justify-content: center;
+    z-index: 1;
+  }
   &__sides {
     position: relative;
     width: 100%;

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

@@ -1,5 +1,10 @@
 <template>
   <div class="EditorWorkspace__wrapper">
+    <div
+      v-if="preloading"
+      class="EditorWorkspace__preloading">
+      <placeholder />
+    </div>
     <breakpoint
       name="md"
       mode="up">
@@ -17,7 +22,7 @@
               class="EditorWorkspace__sides rotate-y-container"
               :class="{rotating: isRotating}">
               <transition
-                name="rotate"
+                :name="preloading ? 'empty' : 'rotate'"
                 mode="in-out"
                 @before-enter="isRotating = true"
                 @after-leave="isRotating = false">
@@ -50,7 +55,7 @@
             class="EditorWorkspace__sides rotate-y-container"
             :class="{rotating: isRotating}">
             <transition
-              name="rotate"
+              :name="preloading ? 'empty' : 'rotate'"
               mode="in-out"
               @before-enter="isRotating = true"
               @after-leave="isRotating = false">
@@ -72,7 +77,7 @@
             :class="{
               'EditorWorkspace__sides-toggle--fixed': isZoomIn
             }"
-            @click="toggleSide">
+            @click="toggleSide()">
             <i class="icon-rotate-tee"></i>
           </div>
           <div
@@ -108,6 +113,7 @@ import { createNamespacedHelpers } from 'vuex';
 import EditorPrintAreaOptions from '@lancom/shared/components/editor/editor_print_area_options/editor-print-area-options';
 import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import Tabs from '@lancom/shared/components/common/tabs';
+import Placeholder from '@lancom/shared/components/placeholder/placeholder';
 import EditorWorkspaceSide from './editor_workspace_side/editor-workspace-side';
 
 const { mapGetters, mapMutations } = createNamespacedHelpers('product');
@@ -115,6 +121,7 @@ const { mapGetters, mapMutations } = createNamespacedHelpers('product');
 export default {
   name: 'EditorWorkspace',
   components: {
+    Placeholder,
     EditorWorkspaceSide,
     EditorPrintAreaOptions,
     EditorPricing,
@@ -122,6 +129,7 @@ export default {
   },
   data() {
     return {
+      preloading: true,
       isRotating: false,
       zoomSize: null,
       productSides: [
@@ -146,22 +154,38 @@ export default {
       return !!this.zoomSize;
     }
   },
+  mounted() {
+    this.preloadingEditor();
+  },
   methods: {
     ...mapMutations([
       'setEditableSide',
       'setSelectedPrintArea',
       'setEditablePrintArea'
     ]),
+   async preloadingEditor() {
+      this.preloading = true;
+      const sides = ['back', 'front'];
+      for (const side of sides) {
+        await (new Promise((resolve) => {
+          setTimeout(() => {
+            this.toggleSide(side);
+            resolve();
+          }, 500);
+        }));
+      }
+      this.preloading = false;
+    },
     selectTab(value) {
       if (this.editableSide.id !== value) {
         this.setEditablePrintArea(null);
         this.setEditableSide({ id: value });
       }
     },
-    toggleSide() {
+    toggleSide(side) {
       this.setEditablePrintArea(null);
       this.setEditableSide({
-        id: this.editableSide.id === 'front' ? 'back' : 'front'
+        id: side || (this.editableSide.id === 'front' ? 'back' : 'front')
       });
     },
     selectPrintArea({ printArea, size }) {

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

@@ -48,7 +48,7 @@
         @click="hide">
       </div>
       <div
-        v-if="isOpen"
+        v-show="isOpen"
         key="container"
         class="MobileEditorProductDetails__container"
         @close="hide">

package/components/order/order_view/order-view.mixin.js

@@ -46,32 +46,35 @@ export default {
     depositInfo() {
       return this.settings?.depositInfo || {};
     },
+    displayAddress() {
+      return this.invoice?.address || this.order.billingAddress || this.order.shippingAddress;
+    },
     fullName() {
-      return this.invoice?.address?.fullName || this.order.shippingAddress.fullName;
+      return this.displayAddress.fullName;
     },
     company() {
-      return this.invoice?.address?.company || this.order.shippingAddress.company;
+      return this.displayAddress.company;
     },
     phone() {
-      return this.invoice?.address?.phone || this.order.shippingAddress.phone;
+      return this.displayAddress.phone;
     },
     email() {
-      return this.invoice?.address?.email || this.order.shippingAddress.email;
+      return this.displayAddress.email;
     },
     additionalInfo() {
-      return this.invoice?.address?.additionalInfo || this.order.shippingAddress.additionalInfo;
+      return this.displayAddress.additionalInfo;
     }, 
     purchaseOrderNumber() {
       return this.invoice?.purchaseOrderNumber || this.order.purchaseOrderNumber;
     },
     orderAddress() {
       return [
-        this.invoice?.address?.addressLine1 || this.order.shippingAddress.addressLine1,
-        this.invoice?.address?.addressLine2 || this.order.shippingAddress.addressLine2,
-        this.invoice?.address?.city || this.order.shippingAddress.city,
-        this.invoice?.address?.postcode || this.order.shippingAddress.postcode,
-        this.invoice?.address?.state || this.order.shippingAddress.state,
-        this.invoice?.address?.country || this.order.shippingAddress.country
+        this.displayAddress.addressLine1,
+        this.displayAddress.addressLine2,
+        this.displayAddress.city,
+        this.displayAddress.postcode,
+        this.displayAddress.state,
+        this.displayAddress.country
       ].filter(i => !!i).join(', ');
     },
     gstTax() {

package/components/product/product_print_preview/product-print-preview.vue

@@ -3,21 +3,33 @@
     <canvas ref="print"></canvas>
     <div
       class="ProductPrintPreview__export"
-      @click="exportPrintToSVG">
-      Export To SVG
+      @click="exportPrintToPNG">
+      Export To PNG
+    </div>
+    <div
+      class="ProductPrintPreview__frame"
+      @click="hiddenFrame = !hiddenFrame">
+      {{ hiddenFrame ? 'Show' : 'Hide'}} Frame
     </div>
   </div>
 </template>
 
 <script>
-import { exportPrintToSVG } from '@lancom/shared/assets/js/utils/export-print-to-svg';
+import FileSaver from 'file-saver';
 import FabricHelper from '@lancom/shared/assets/js/utils/fabric-helper';
 
 export default {
   name: 'ProductPrintPreview',
+  watch: {
+    hiddenFrame() {
+      this.fabricHelper.clear();
+      this.draw();
+    }
+  },
   data() {
     return {
       fabricHelper: null,
+      hiddenFrame: true,
       size: {
         width: 540,
         height: 540
@@ -46,23 +58,27 @@ export default {
       return layers;
     }
   },
-  async mounted() {
-    console.log('print: ', this.print);
+  mounted() {
     this.fabricHelper = new FabricHelper({
       editor: this.$refs.print,
       size: this.size
     });
-    await this.drawLayers();
-    this.fabricHelper.buildWireframe({
-      ...this.size,
-      // area: product.printAreas[this.sideId],
-      printSize: this.printSize,
-      product: this.product
-    });
+    this.draw();
   },
   methods: {
+    async draw() {
+      await this.drawLayers();
+      this.fabricHelper.buildWireframe({
+        ...this.size,
+        // area: product.printAreas[this.sideId],
+        printSize: this.printSize,
+        product: this.product,
+        hiddenFrame: this.hiddenFrame
+      });
+    },
     drawLayers() {
-      return this.layers.reduce(async (promise, layer) => {
+      const layers = JSON.parse(JSON.stringify(this.layers));
+      return layers.reduce(async (promise, layer) => {
         await promise;
         return new Promise(resolve => {
           this.fabricHelper.createObject({ layer }).then(obj => {
@@ -71,8 +87,15 @@ export default {
         });
       }, Promise.resolve());
     },
-    exportPrintToSVG() {
-      exportPrintToSVG(this.layers, this.printSize);
+    async exportPrintToPNG() {
+      const data = this.fabricHelper.editor.toDataURL({
+        format: 'png',
+        multiplier: 3
+      });
+      const response = await fetch(data);
+      const blob = await response.blob();
+      const file = new Blob([blob],  {type: 'image/png'});
+      FileSaver.saveAs(file, `Print-${Date.now()}.png`);
     }
   }
 };
@@ -89,15 +112,20 @@ export default {
       // border: 2px solid blue;
     }
   }
-  &__export {
+  &__export,
+  &__frame {
     position: absolute;
     top: 50px;
     right: 50px;
     display: inline-block;
-    padding: 10px;
+    padding: 6px;
+    font-size: 13px;
     cursor: pointer;
     background: rgb(110, 217, 246);
     z-index: 99;
   }
+  &__frame {
+    top: 90px;
+  }
 }
 </style>

package/components/product/wizard/wizard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="Wizard__wrapper">
     <div
-      v-if="preSetPrints"
+      v-if="hasPresetPrints"
       class="Wizard__header Wizard__header--active">
       <div class="Wizard__header-name">
         PRINT OPTIONS
@@ -43,7 +43,7 @@
           @edit="editLayer($event)"
           @delete="removeTemplateLayer($event)" />
         <div
-          v-if="!preSetPrints"
+          v-if="!hasPresetPrints"
           class="Wizard__layers-info">
           <p>1. Note final print price will be calculated once garment quantity is finalised</p>
           <p>2. PDF mockup will be provided for approval prior to printing</p>
@@ -190,10 +190,13 @@ export default {
     },
     productPrintAreas() {
       return this.product.printAreas || [];
+    },
+    hasPresetPrints() {
+      return this.preSetPrints?.length > 0
     }
   },
   mounted() {
-    if (this.product.printOnly || this.preSetPrints || this.layers.length > 0) {
+    if (this.product.printOnly || this.hasPresetPrints || this.layers.length > 0) {
       this.isVisible = true;
       this.setIsPrintPricing(this.isVisible);
     }

package/components/products/product_list_product/product-list-product.vue

@@ -57,7 +57,7 @@
         <div
           v-if="noMinimum"
           class="ProductListProduct__tag-item ProductListProduct__tag-item--qty">
-          <span>No Mimimums</span>
+          <span>No Minimums</span>
         </div>
         <div
           v-if="!noMinimum && product.minimumPrintOrderQuantity > 0"

package/mixins/product-view.js

@@ -110,7 +110,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
     }
 
     try {
-      if (this.preSetPrints) {
+      if (this.preSetPrints?.length) {
         for (const preSetPrint of this.preSetPrints) {
           const layers = preSetPrint.printTemplate?.layers || [{ type: 'text' }];
           for (const layer of layers) {
@@ -140,6 +140,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
               properties
             };
             const model = await getLayerModel(data);
+            model.createdAt = Date.now();
             this.addTemplateLayer(model);
           }
         }

package/package.json

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