@lancom/shared 0.0.311 → 0.0.313

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

@@ -53,6 +53,7 @@ export class TextLayer extends Layer {
   stroke = 'rgb(255, 255, 255)';
   enableOutline = false;
   strokeWidth = 1;
+  charSpacing = 0;
   paintFirst = 'stroke'; // stroke behind fill
 
   constructor(type, colorId, top, left, isEditMode) {

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/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.vue

@@ -96,6 +96,30 @@
               </i>
             </div>
           </div>
+          <div class="form-row--cols low-dense">
+            <div class="form-col col-half">
+              <label
+                for="fontSize"
+                class="form-label">
+                Letter Spacing
+              </label>
+              <i
+                class="icon-minus form-icon-left  EditorLayerFormText__field-action"
+                @click="decreaseCharSpacing">
+              </i>
+              <input
+                id="charSpacing"
+                ref="charSpacing"
+                v-model.number="charSpacing"
+                name="charSpacing"
+                type="text"
+                class="form-field icon-inside-lr filled centered labelless" />
+              <i
+                class="icon-plus form-icon-right EditorLayerFormText__field-action"
+                @click="increaseCharSpacing">
+              </i>
+            </div>
+          </div>
           <div class="form-row--cols low-dense">
             <div class="form-col col-half">
               <label class="form-label EditorLayerFormText__label-with-checkbox">
@@ -197,6 +221,16 @@ export default {
         this.$refs.fontSize.value = value;
       }
     },
+    charSpacing: {
+      get() {
+        return this.layer.charSpacing;
+      },
+      set(value) {
+        value = inRange(value, -300, 300);
+        this.$emit('set-layer-field', { field: 'charSpacing', value });
+        this.$refs.charSpacing.value = value;
+      }
+    },
     strokeWidth: {
       get() {
         return this.layer.strokeWidth;
@@ -224,6 +258,12 @@ export default {
     decreaseFontSize() {
       this.fontSize -= 1;
     },
+    increaseCharSpacing() {
+      this.charSpacing += 1;
+    },
+    decreaseCharSpacing() {
+      this.charSpacing -= 1;
+    },
     increaseStrokeWidth() {
       this.strokeWidth += 1;
     },

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.313",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {