@lancom/shared 0.0.311 → 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

@@ -219,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) {
@@ -362,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/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/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/package.json

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