@lancom/shared 0.0.433 → 0.0.435

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

@@ -26,7 +26,7 @@ export class Layer {
   cornerSize = 13;
   cornerStyle = 'circle';
   lockScalingFlip = true;
-  padding = 0;
+  padding = 5;
   selectionDashArray = [10, 5];
   borderDashArray = [5, 3];
   cornerDashArray = [10, 5];

package/components/common/file_uploader.vue

@@ -11,6 +11,7 @@
         <slot name="toggle" :uploading="uploading"></slot>
         <slot name="progress" :progress="progress"></slot>
         <input
+          :id="'fileUpload' + uniqueKey"
           ref="fileUploaderField"
           class="FileUploader__input"
           type="file"
@@ -20,6 +21,10 @@
           :required="required"
           :disabled="disabled || uploading"
           @change="fileChange" />
+        <label
+          :for="'fileUpload' + uniqueKey"
+          class="FileUploader__input-label">
+        </label>
       </div>
     </div>
     <div v-if="hasUploadLink">
@@ -59,14 +64,14 @@ export default {
       rendered: null,
       error: null,
       progress: 0,
-      // timelineLite: new TimelineLite()
+      uniqueKey: Math.random()
     };
   },
   methods: {
     async onPastLink(event) {
       const url = event.target.value?.trim();
       if (!url) return;
-      
+
       try {
         const response = await fetch(url);
         const blob = await response.blob();
@@ -167,7 +172,9 @@ export default {
     display: inline-block;
     position: relative;
     width: inherit;
+    cursor: pointer !important;
     &:before {
+      cursor: pointer !important;
       content: '';
       position: absolute;
       width: 100%;
@@ -209,10 +216,19 @@ export default {
     width: 100%;
     height: 100%;
     position: absolute;
-    cursor: pointer;
     &.disabled {
       cursor: default;
     }
+
+    &-label {
+      opacity: 0;
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
   }
 }
 </style>

package/components/common/pricing_discounts_table/pricing-discounts-table.vue

@@ -17,7 +17,9 @@
           active: amount >= range.min && ((range.max && amount <= range.max) || !range.max)
         }">
         <td>{{ (range.max >= 9999 || !range.max) ? `${range.min}+` : `${range.min}-${range.max}` }}</td>
-        <td v-if="withGst">
+        <td
+          v-if="withGst"
+          class="PricingDiscountsTable__price">
           <span v-if="range.percent">
             {{ range.percent }}%
           </span>
@@ -25,7 +27,9 @@
             {{ range.price | priceWithTax(pricingSettings, currency) }}
           </span>
         </td>
-        <td v-else>
+        <td
+          v-else
+          class="PricingDiscountsTable__price">
           <span v-if="range.percent">
             {{ range.percent }}%
           </span>

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.scss

@@ -19,6 +19,17 @@
       }
     }
   }
+  &__placeholder {
+    position: absolute;
+    text-transform: uppercase;
+    font-size: 22px;
+    font-weight: 800px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    top: 50%;
+    z-index: 1;
+  }
   &__content {
     padding-top: 24px;
   }

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.vue

@@ -7,6 +7,12 @@
       </slot>
 
       <div class="EditorLayerFormText__preview">
+        <div
+          v-if="isVisiblePlaceholder"
+          class="EditorLayerFormText__placeholder"
+          @click="editText()">
+          Add Text
+        </div>
         <canvas ref="previewCanvas"></canvas>
       </div>
 
@@ -171,19 +177,23 @@ import ColorPicker from '@lancom/shared/components/common/color-picker';
 import EditorLayerCommonFields from '../editor_layer_common_fields/editor-layer-common-fields';
 import FontFamilySelect from './font-family_select/font-family-select';
 
-const editableModel = (field, prop) => ({
-  get() {
-    return prop
-      ? this[`${field}_options`].find(o => o[prop] === this.layer[field])
-      : this.layer[field];
-  },
-  set(v) {
-    const value = prop && Object.prototype.hasOwnProperty.call(v, prop) ? v[prop] : v;
-    this.$emit('set-layer-field', { field, value });
-    this.textObject[field] = value;
-    this.fabricCanvas.renderAll();
-  }
-});
+const editableModel = function (field, prop) {
+  return {
+    get() {
+      return prop
+        ? this[`${field}_options`].find(o => o[prop] === this.layer[field])
+        : this.layer[field];
+    },
+    set(v) {
+      const value = prop && Object.prototype.hasOwnProperty.call(v, prop) ? v[prop] : v;
+      this.$emit('set-layer-field', { field, value });
+      if (field !== 'copy') {
+        this.textObject[field] = value;
+      }
+      this.fabricCanvas.renderAll();
+    }
+  };
+};
 export default {
   name: 'EditorLayerFormText',
   components: {
@@ -249,6 +259,9 @@ export default {
     },
     fontFamily_options() {
       return availableFonts.map(({ label, alias }) => ({ label, value: alias }));
+    },
+    isVisiblePlaceholder() {
+      return !this.copy?.trim() && !this.isEditing;
     }
   },
   mounted() {
@@ -261,6 +274,14 @@ export default {
     }
   },
   methods: {
+    editText() {
+      if (!this.isEditing) {
+        this.fabricCanvas.setActiveObject(this.textObject);
+        this.textObject.enterEditing();
+        this.textObject.hiddenTextarea.focus();
+        this.isEditing = true;
+      }
+    },
     async selectFont({ value }) {
       const font = await loadFont(value);
       Object.keys(font).forEach(field => this.$emit('set-layer-field', {
@@ -288,7 +309,7 @@ export default {
     initFabricCanvas() {
       if (this.$refs.previewCanvas) {
         this.fabricCanvas = new fabric.Canvas(this.$refs.previewCanvas, {
-          width: 300,
+          width: this.$refs.previewCanvas.parentElement.offsetWidth,
           height: 200,
           uniScaleTransform: false
         });
@@ -311,6 +332,11 @@ export default {
           this.syncTextFromCanvas();
         }
       });
+      this.fabricCanvas.on('mouse:down', options => {
+        if (options.target === this.textObject) {
+          this.editText();
+        }
+      });
     },
     async renderLayer() {
       try {
@@ -347,12 +373,10 @@ export default {
 
         this.fabricCanvas.add(textObj);
         this.fabricCanvas.renderAll();
+
         this.textObject = textObj;
 
-        this.$nextTick(() => {
-          this.fabricCanvas.setActiveObject(textObj);
-          textObj.enterEditing();
-        });
+        this.editText();
       } catch (error) {
         console.error('Error rendering layer:', error);
       }

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

@@ -21,12 +21,11 @@
     </div>
 
     <file-uploader
+      class="EditorLayersToolbar__option"
       :multiple="false"
       :url="`image/editor/${shop._id}/${product._id}`"
       @onuploaded="handleUploaded">
-      <div
-        slot="toggle"
-        class="EditorLayersToolbar__option">
+      <div slot="toggle">
         <i class="icon-layer-art EditorLayersToolbar__option-icon"></i>
         <div class="lc_black">
           Add art

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

@@ -29,6 +29,7 @@
                 <editor-workspace-side
                   ref="editor"
                   :key="side"
+                  :is-edit-mode="isEditMode"
                   :side="side"
                   :print-area="editablePrintArea"
                   :zoom-size="sideZoomSize"
@@ -65,6 +66,7 @@
               <editor-workspace-side
                 ref="editor"
                 :key="editableSide.id"
+                :is-edit-mode="isEditMode"
                 :side="editableSide.id"
                 :print-area="editablePrintArea"
                 :print-area-size="selectedPrintArea"
@@ -113,8 +115,7 @@
         :side="editableSide.id"
         :layers="editableLayers"
         @select="selectPrintArea"
-        @option-mouseover="toogleBoundBox(true, $event)"
-        @option-mouseleave="toogleBoundBox(false, $event)">
+        @option-mouseover="toogleBoundBox(true, $event)">
       </editor-print-area-options>
     </div>
   </div>
@@ -153,6 +154,10 @@ export default {
     visibleBackgroundImage: {
       type: Boolean,
       default: true
+    },
+    isEditMode: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

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

@@ -64,6 +64,24 @@
     bottom: 0;
     z-index: 1000;
   }
+  &__add-btn {
+    background-color: white;
+    opacity: 0.8;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border-radius: 3px;
+    box-shadow: 0px 0px 0px rgba(75, 75, 75, 0.2);
+    margin: 3px 0;
+    padding: 5px;
+    min-width: 73px;
+    &:nth-child(3) {
+      padding: 5px 5px 3px 5px;
+    }
+    &:hover {
+      opacity: 1;
+      transform: translateY(-1px);
+      box-shadow: 0px 5px 15px rgba(75, 75, 75, 0.2);
+    }
+  }
   &__placeholder {
     position: absolute;
     z-index: 999;
@@ -72,6 +90,7 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    font-size: 12px;
 
     // @media (max-width: $bp-extra-small-max) {
     //   font-size: 10px;
@@ -86,8 +105,8 @@
     letter-spacing: -0.5px;
     &-option {
       cursor: pointer;
-      margin: 5px 0;
       text-transform: uppercase;
+      display: inline-block;
       span {
         &:last-child {
           display: none;
@@ -102,6 +121,10 @@
     }
     &-divider {
       color: $grey_1;
+      padding: 2px;
+      background-color: white;
+      border-radius: 2px;
+      opacity: 0.7;
     }
     &-progress {
       position: absolute;
@@ -185,4 +208,4 @@
       background-color: #EB5757;
     }
   }
-}
+}

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

@@ -7,7 +7,6 @@
     }"
     v-click-outside="onOutsideClick"
     @mouseover="toogleBoundBox(true)"
-    @mouseleave="toogleBoundBox(false)"
     @mouseup="toggleOnpressImage(false)">
     <div
       v-if="hasOnpressImage || hasWireframeImage"
@@ -60,15 +59,23 @@
       ignore-document-click
       :style="positionPlaceholder">
       <div
-        @click="createTextLayer"
-        class="EditorWorkspaceSide__placeholder-option">
-        <span>Type here</span>
+        class="EditorWorkspaceSide__placeholder-option"
+        :class="{
+          'EditorWorkspaceSide__add-btn': !printAreaLayers.length
+        }"
+        @click="createTextLayer">
+        <span>
+          <i class="icon-layer-text"></i> Add Text
+        </span>
         <span style="margin-top: -0.5px;">Text</span>
       </div>
       <div class="EditorWorkspaceSide__placeholder-divider">
         or
       </div>
-      <div>
+      <div
+        :class="{
+          'EditorWorkspaceSide__add-btn': !printAreaLayers.length
+        }">
         <file-uploader
           :multiple="false"
           :url="`image/editor/${shop._id}/${product._id}`"
@@ -165,6 +172,10 @@ export default {
     visibleBackgroundImage: {
       type: Boolean,
       default: true
+    },
+    isEditMode: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -235,16 +246,22 @@ export default {
     },
     positionPlaceholder() {
       const { center, left, top, width, height } = this.fabricHelper.printAreaRect;
-      // console.log('this.fabricHelper.printAreaRect: ', this.fabricHelper.printAreaRect);
       const ratio = this.calcWorkspaceSize() / this.editorSize.width;
-      return this.printAreaLayers.length > 0 ? {
-        top: `${(top + height) * ratio}px`,
-        left: `${left * ratio}px`
-      } : {
-        top: `${top * ratio}px`,
-        left: `${left * ratio}px`,
-        width: `${Math.max(60, width * ratio)}px`,
-        height: `${height * ratio}px`,
+      if (this.printAreaLayers.length > 0) {
+        return {
+          top: `${(top + height) * ratio}px`,
+          left: `${left * ratio}px`
+        };
+      }
+      const centerX = center?.x ?? (left + width / 2);
+      const centerY = center?.y ?? (top + height / 2);
+      const placeholderWidth = Math.max(100, width * ratio);
+      const placeholderHeight = height * ratio;
+      return {
+        top: `${(centerY * ratio) - (placeholderHeight / 2)}px`,
+        left: `${(centerX * ratio) - (placeholderWidth / 2)}px`,
+        width: `${placeholderWidth}px`,
+        height: `${placeholderHeight}px`
       };
     },
     printAreaIsSmall() {
@@ -346,15 +363,12 @@ export default {
       this.$emit('workspace', { size: this.calcWorkspaceSize(true), fabricHelper: this.fabricHelper });
     },
     initEventsListeners() {
-      // document.addEventListener('mousedown', this.onDocumentStartClick);
       window.addEventListener('resize', this.onResize);
     },
     clearEventsListeners() {
-      // document.removeEventListener('mousedown', this.onDocumentStartClick);
       window.removeEventListener('resize', this.onResize);
     },
     onDocumentStartClick({ target }) {
-      // todo: replace by click outside plugin?
       console.log('target: ', target);
       const isCanvasElement = target.tagName === 'CANVAS';
       const isIgnoreClick = !!findParentByPredicate(target, element => element.hasAttribute('ignore-document-click'));
@@ -386,7 +400,7 @@ export default {
       });
       this.fabricHelper.on('setDeleteButtonPosition', this.setDeleteButtonPosition);
       this.fabricHelper.on('outOfPrintArea', this.setOffsetWarningVisibility);
-      // todo center to print area
+
       this.updateBackgroundImage();
       this.redrawWithThrottle();
     },
@@ -451,11 +465,18 @@ export default {
       const image = this.fabricHelper.getLayersAsImage();
       this.setLayersThumbnail({ side: this.side, value: image });
     },
-    createTextLayer() {
+    async createTextLayer() {
       this.addedFromCanvas = true;
       window.scrollTo(0, 0);
-      this.createLayer({ type: 'text', isEditMode: true });
+      const layer = await this.createLayer({ type: 'text', isEditMode: this.isEditMode });
       this.visibleWireframe = true;
+      if (!this.isEditMode) {
+        setTimeout(() => {
+          this.setSelectedLayer(layer);
+          this.setEditModeSelectedLayer(true);
+          this.toogleBoundBox(true);
+        });
+      }
     },
     async handleUploaded({ url, size, fileName }) {
       window.scrollTo(0, 0);

package/components/product/product_check_delivery/product-check-delivery.vue

@@ -14,7 +14,7 @@
     </div>
     <div class="ProductCheckDelivery__postcode">
       <postcode-select
-        v-model="postcode"
+        v-model="suburb.postcode"
         :suburb="suburb"
         :only-postcode="true"
         label-text="Postcode"

package/components/product/product_pricing_tiers/product-pricing-tiers.vue

@@ -5,7 +5,7 @@
     </h3>
     <div class="ProductPricingTiers__tiers">
       <div
-        v-for="(tier, index) in defaultSimpleProduct.pricing"
+        v-for="(tier, index) in visibleTiers"
         :key="index"
         class="ProductPricingTiers__tier"
         @click="selectTier(tier)">
@@ -41,8 +41,12 @@ export default {
   },
   mixins: [MultipackMixin],
   computed: {
-    ...mapGetters('product', ['product', 'editableColor', 'priceIncludeGST', 'defaultSimpleProduct']),
-    ...mapGetters(['pricingSettings', 'currency'])
+    ...mapGetters('product', ['product', 'editableColor', 'priceIncludeGST', 'isPrintPricing', 'printsPrice', 'defaultSimpleProduct']),
+    ...mapGetters(['pricingSettings', 'currency']),
+    visibleTiers() {
+      const pricing = this.defaultSimpleProduct.pricing;
+      return pricing.map(p => ({ ...p, price: p.price + this.printsPrice }));
+    }
   },
   methods: {
     selectTier(tier) {

package/package.json

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