@lancom/shared 0.0.62 → 0.0.66

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

@@ -0,0 +1,381 @@
+
+import { fabric } from 'fabric';
+import { getPrintAreaByName } from '../models/print-area';
+import { loadRotateImage } from './fabric/selection-style';
+import EventDispatcher from './event-dispatcher';
+import { createText, createArt } from './fabric/object-factory';
+import { buildWireframe } from './fabric/wireframe';
+
+class Background {
+  canvas = null;
+  boundingRect = null;
+  boundingBox = null;
+  boundinStrokeColor = '#7D6AEF';
+  backgroundImage = null;
+
+  constructor({ background, size }) {
+    this.canvas = new fabric.Canvas(background, { ...size, uniScaleTransform: false });
+  }
+
+  clear() {
+    this.canvas.clear();
+  }
+
+  draw() {
+    this.clear();
+    this.canvas.setBackgroundImage(this.backgroundImage);
+    this.addBoundingRect();
+  }
+
+  addBoundingRect() {
+    if (this.boundingRect) {
+      this.boundingBox = new fabric.Rect({
+        ...this.boundingRect,
+        hasBorders: false,
+        hasControls: false,
+        lockMovementX: true,
+        lockMovementY: true,
+        evented: false,
+        strokeDashArray: [8, 3],
+        fill: 'rgba(0, 0, 0, 0)',
+        stroke: this.boundinStrokeColor,
+        selectable: false
+      });
+      this.canvas.add(this.boundingBox);
+    }
+  }
+
+  toggleBorder(state) {
+    this.boundingBox.set('stroke', state ? this.boundinStrokeColor : 'rgba(0, 0, 0, 0)');
+    this.canvas.renderAll();
+  }
+
+  setImage(image) {
+    this.backgroundImage = image;
+    this.draw();
+  }
+
+  setBoundingRect(rect) {
+    this.boundingRect = rect;
+    this.draw();
+  }
+}
+
+export default class FabricHelper {
+  editor = null;
+  background = null;
+  printAreaName = 'a3';
+  printAreaRect = null;
+
+  constructor({ editor, background, size }) {
+    this.size = size;
+    this.editor = new fabric.Canvas(editor, { ...size, uniScaleTransform: false });
+    if (background) {
+      this.background = new Background({ background, size });
+    }
+    this.events = {};
+    this.boundingBox = null;
+
+    // fabric.Text.prototype.calcTextHeight = function () {
+    //   let lineHeight;
+    //   let height = 0;
+    //   for (let i = 0, len = this._textLines.length; i < len; i++) {
+    //     lineHeight = this.getHeightOfLine(i);
+    //     height += lineHeight / this.lineHeight;
+    //   }
+    //   return height;
+    // };
+    // fabric.Text.prototype._getTopOffset = function () {
+    //   return -this.height / 2 + this.getHeightOfLine(0) / this.lineHeight;
+    // };
+
+    this.setDeleteButtonListeners();
+    loadRotateImage();
+  }
+
+  clear() {
+    this.editor.clear();
+  }
+
+  scaleWorkspace({ width, height }) {
+    const ratio = width / this.size.width;
+    this.editor.setDimensions({ width, height });
+    this.editor.setZoom(ratio);
+    this.background.canvas.setDimensions({ width, height });
+    this.background.canvas.setZoom(ratio);
+  }
+
+  dispatch(eventName, data) {
+    const event = this.events[eventName];
+    if (event) {
+      event.fire(data);
+    }
+  }
+
+  on(eventName, callback) {
+    let event = this.events[eventName];
+    if (!event) {
+      event = new EventDispatcher(eventName);
+      this.events[eventName] = event;
+    }
+    event.registerCallback(callback);
+  }
+
+  off(eventName, callback) {
+    const event = this.events[eventName];
+    if (event && event.callbacks.includes(callback)) {
+      event.unregisterCallback(callback);
+      if (event.callbacks.length === 0) {
+        delete this.events[eventName];
+      }
+    }
+  }
+
+  setBackgroundImage(image) {
+    this.background.setImage(image);
+  }
+
+  setPrintArea(name, size, product) {
+    this.printAreaName = name;
+    this.printAreaRect = getPrintAreaByName({
+      name: this.printAreaName,
+      editorWidth: size.width,
+      editorHeight: size.height
+    }, product);
+    if (this.background) {
+      this.background.setBoundingRect(this.printAreaRect);
+    }
+    this.addBoundingArea();
+  }
+
+  addBoundingArea() {
+    this.boundingBox = new fabric.Rect({
+      ...this.printAreaRect,
+      absolutePositioned: true
+    });
+  }
+
+  createTextObject({ layer, initial }) {
+    return createText(layer).then(text => {
+      if (initial) {
+        text.fontSize = Math.floor(this.printAreaRect.width / 3);
+        this.dispatch('setField', { field: 'fontSize', value: text.fontSize });
+      }
+      return text;
+    });
+  }
+
+  getEditorDPI() {
+    const { widthInInches, width } = this.printAreaRect;
+    return width / widthInInches;
+  }
+
+  createArtObject({ layer, initial }) {
+    return createArt(layer).then(art => {
+      if (initial) {
+        art.scaleX = art.scaleY = Math.min(
+          this.printAreaRect.width / art.width,
+          this.printAreaRect.height / art.height
+        );
+        const measure = this.getEditorDPI();
+        const originalRatio = art.originalSize.width / art.width;
+        const dpi = Math.round(measure / art.scaleX * originalRatio);
+        this.dispatch('setField', { field: 'dpi', value: dpi });
+        this.dispatch('setField', { field: 'scaleX', value: art.scaleX });
+        this.dispatch('setField', { field: 'scaleY', value: art.scaleY });
+        this.dispatch('setField', { field: 'width', value: art.width });
+        this.dispatch('setField', { field: 'height', value: art.height });
+      }
+      return art;
+    });
+  }
+
+  createObject({ layer, active }) {
+    const initial = !layer.modifiedAt;
+    return new Promise(resolve => {
+      const methods = {
+        text: 'createTextObject',
+        art: 'createArtObject'
+      };
+      this[methods[layer.type]]({ layer, initial }).then(obj => {
+        obj.clipPath = this.boundingBox;
+        this.handleListeners(obj, layer.type);
+        this.editor.add(obj);
+        if (active) {
+          this.editor.setActiveObject(obj);
+          if (layer.isEditMode) {
+            obj.enterEditing();
+            obj.hiddenTextarea.focus();
+          }
+        }
+        obj.setControlsVisibility({ tr: false });
+
+        if (initial) {
+          this.dispatch('setField', { field: 'boundingRect', value: obj.getBoundingRect() });
+        }
+        resolve(obj);
+      });
+    });
+  }
+
+  buildWireframe({ width, height, area }) {
+    buildWireframe({ width, height, editor: this.editor, area });
+  }
+
+  checkAnyBoundingIntersection() {
+    const objects = this.editor.getObjects();
+
+    if (!objects.length) {
+      return this.dispatch('outOfPrintArea', false);
+    }
+
+    let isOut = false;
+    objects.forEach(object => {
+      if (!isOut) {
+        isOut = this.checkBoundingIntersection(object);
+      }
+    });
+  }
+
+  checkBoundingIntersection(object) {
+    const width = object.width * object.scaleX;
+    const height = object.height * object.scaleY;
+    const box = {
+      top: object.top - (height / 2),
+      right: object.left + (width / 2),
+      bottom: object.top + (height / 2),
+      left: object.left - (width / 2)
+    };
+    const bounds = {
+      top: this.boundingBox.top,
+      right: this.boundingBox.left + this.boundingBox.width,
+      bottom: this.boundingBox.top + this.boundingBox.height,
+      left: this.boundingBox.left
+    };
+    if (
+      (box.top >= bounds.bottom) ||
+      (box.right <= bounds.left) ||
+      (box.bottom <= bounds.top) ||
+      (box.left >= bounds.right)
+    ) {
+      object.set({
+        top: this.boundingBox.center.top,
+        left: this.boundingBox.center.left
+      });
+    }
+    if (
+      (box.top < bounds.top) ||
+      (box.right > bounds.right) ||
+      (box.bottom > bounds.bottom) ||
+      (box.left < bounds.left)
+    ) {
+      this.dispatch('outOfPrintArea', true);
+      return true;
+    } else {
+      this.dispatch('outOfPrintArea', false);
+      return false;
+    }
+  }
+
+  setDeleteButtonListeners() {
+    this.editor.on('object:selected', ({ target }) => {
+      this.dispatch('setDeleteButtonPosition', target.oCoords.tr);
+    });
+    this.editor.on('object:modified', ({ target }) => {
+      this.dispatch('setDeleteButtonPosition', target.oCoords.tr);
+      target.setControlsVisibility({ tr: false });
+    });
+    this.editor.on('object:moving', ({ target }) => {
+      target.setControlsVisibility({ tr: true });
+      this.dispatch('setDeleteButtonPosition', null);
+    });
+    this.editor.on('object:scaling', ({ target }) => {
+      target.setControlsVisibility({ tr: true });
+      this.dispatch('setDeleteButtonPosition', null);
+    });
+    this.editor.on('object:rotating', ({ target }) => {
+      target.setControlsVisibility({ tr: true });
+      this.dispatch('setDeleteButtonPosition', null);
+    });
+    this.editor.on('selection:cleared', () => {
+      this.dispatch('setDeleteButtonPosition', null);
+    });
+  }
+
+  handleListeners(object, type) {
+    /*
+    ** COMMON EVENTS
+    */
+    object.on('selected', () => this.dispatch('selectLayer', object.layer));
+    object.on('rotating', ({ target: { angle } }) => {
+      this.dispatch('setField', { field: 'angle', value: parseInt(angle) });
+    });
+    object.on('moved', ({ target }) => {
+      const { top, left } = target;
+      this.dispatch('setField', { field: 'top', value: Math.round(top) });
+      this.dispatch('setField', { field: 'left', value: Math.round(left) });
+    });
+    object.on('moving', () => this.checkBoundingIntersection(object));
+    object.on('scaling', () => {
+      this.checkBoundingIntersection(object);
+      if (object.type === 'art') {
+        const measure = this.getEditorDPI();
+        const originalRatio = object.originalSize.width / object.width;
+        const dpi = Math.round(measure / object.scaleX * originalRatio);
+        this.dispatch('setField', { field: 'dpi', value: dpi });
+      }
+    });
+
+    object.on('scaled', () => {
+      this.dispatch('setField', { field: 'boundingRect', value: object.getBoundingRect() });
+    });
+    object.on('moved', () => {
+      this.dispatch('setField', { field: 'boundingRect', value: object.getBoundingRect() });
+    });
+    /*
+    ** TEXT OBJECT EVENTS
+    */
+    if (type === 'text') {
+      object.on('scaled', target => {
+        const fontSize = Math.round(object.fontSize * object.scaleX);
+        // const strokeWidth = Math.round(object.strokeWidth * object.scaleX);
+        this.dispatch('setField', { field: 'fontSize', value: fontSize });
+        // this.dispatch('setField', { field: 'strokeWidth', value: strokeWidth });
+      });
+      object.on('editing:exited', () => {
+        if (!object.text) {
+          this.dispatch('removeLayer', object.layer);
+        } else {
+          this.dispatch('setField', { field: 'isEditMode', value: false });
+          this.dispatch('setField', { field: 'copy', value: object.text });
+        }
+      });
+      object.on('changed', () => {
+        this.dispatch('setField', { field: 'copy', value: object.text });
+        this.dispatch('setField', { field: 'boundingRect', value: object.getBoundingRect() });
+        this.dispatch('setDeleteButtonPosition', object.oCoords.tr);
+        this.checkBoundingIntersection(object);
+      });
+    }
+    /*
+    ** ART OBJECT EVENTS
+    */
+    if (type === 'art') {
+      object.on('scaled', () => {
+        this.dispatch('setField', { field: 'scaleX', value: object.scaleX });
+        this.dispatch('setField', { field: 'scaleY', value: object.scaleY });
+      });
+    }
+  }
+
+  getLayersAsImage() {
+    const data = this.editor.toDataURL('png');
+    this.editor.renderAll();
+    return data;
+  }
+
+  discardActiveObjects() {
+    this.editor.discardActiveObject();
+    this.editor.renderAll();
+  }
+};

package/assets/js/utils/filters.js

@@ -0,0 +1,87 @@
+import moment from 'moment';
+import DateOnly from 'dateonly';
+
+import currencies from '../constants/currencies';
+import { printsLabels } from '../constants/prints';
+import { SIDE_TYPES } from '../constants/sides';
+import { sortSizes } from '../utils/sizes';
+
+const decodeDecimal = entity => {
+  const arr = entity.match(/&#\d+;/g);
+  return arr.map(c => String.fromCharCode(/\d+/.exec(c))).join('');
+};
+
+export const number = (value, digits = 0) => {
+  const fixed = (value || 0).toFixed(digits);
+  return fixed.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
+export const price = (value = 0, currency = 'USD') => {
+  const amount = number(value, 2);
+  const cur = currencies.find(c => c.value.toUpperCase() === currency.toUpperCase());
+  const label = cur ? decodeDecimal(cur.code) : currency;
+  return `${label}${amount}`;
+};
+
+export const tax = (value = 0, tax = 0) => {
+  return value + (value * (tax / 100));
+};
+
+export const capitalize = value => {
+  if (!value) {
+    return '';
+  }
+  return value.split(' ').map(part => `${part.charAt(0).toUpperCase()}${part.substring(1)}`).join('');
+};
+
+export const inRange = (v, f, t) => v < f ? f : (v > t ? t : v);
+
+export const sizesRange = (sizes = []) => {
+  const sorted = sortSizes(sizes);
+  const first = sorted[0];
+  const last = sorted[sorted.length - 1];
+  const isDiffSizes = last && (first && first.shortName !== last.shortName);
+  return isDiffSizes ? `${first.shortName} - ${last.shortName}` : first && first.shortName;
+};
+
+export const pricingRange = pricing => {
+  const calcPrice = (prev, current, calc) => typeof prev === 'number' ? calc(prev, current) : current;
+  const [min, max] = (pricing || []).reduce(([min, max], { price }) => [calcPrice(min, price, Math.min), calcPrice(max, price, Math.max)], []);
+  return min !== max ? `${price(min)} - ${price(max)}` : price(min);
+};
+
+export const print = type => printsLabels[type];
+
+export const side = type => SIDE_TYPES[type];
+
+export const printsRange = (prints = []) => {
+  return prints.join(', ');
+};
+
+export const highlight = (string = '', query) => {
+  if (!query || !query.length) {
+    return string;
+  }
+  const q = new RegExp(query, 'ig');
+  return string.toString().replace(q, matchedTxt => (`<span class="highlight">${matchedTxt}</span>`));
+};
+
+export const date = d => moment(d).format('lll');
+
+export const shortDate = d => moment(d).format('DD/MM/YYYY');
+
+export const sydneyTime = d => moment(d).utc().utcOffset(10).format('lll');
+
+export const priceInRange = (prices, amount) => (prices.find(({ min, max }) => min <= amount && (!max || max >= amount)) || { price: 0 }).price;
+
+export const staticLink = link => (link || '').startsWith('http') ? link : `${process.env.STATIC_URL}${link}`;
+
+export const nl2br = text => text.replace(/\n/g, '<br>');
+
+export const nl2p = text => `<p>${text.replace(/\n/g, '</p><p>')}</p>`;
+
+export const nl2list = text => `<ul><li>${text.replace(/\n/g, '</li><li>')}</li></ul>`;
+
+export const dateOnly = date => (new DateOnly(date)).toDate();
+
+export const sortByName = (list, prop = 'name') => (list || []).sort((a, b) => a[prop].localeCompare(b[prop]));

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

@@ -0,0 +1,85 @@
+import { staticLink } from './filters';
+import {
+  FONTS, FONTS_HEBREW, FONTS_HINDI, FONTS_BENGALI, FONTS_GUJARATI, FONTS_KANNADA, FONTS_MALYALAM,
+  FONTS_MARATHI, FONTS_TAMIL, FONTS_TELUGU, FONTS_ORIYA
+} from './../constants/fonts';
+
+const fontsLoadList = {};
+
+export const FONTS_LANGS = {
+  ENG: 'eng',
+  HEBREW: 'hebrew',
+  HINDI: 'hindi',
+  BENGALI: 'bengali',
+  GUJARATI: 'gujarati',
+  KANNADA: 'kannada',
+  MALYALAM: 'malyalam',
+  MARATHI: 'marathi',
+  TAMIL: 'tamil',
+  TELUGU: 'telugu',
+  ORIYA: 'oriya'
+};
+
+export const FONTS_LANGS_LIST = Object.keys(FONTS_LANGS).map(key => FONTS_LANGS[key]);
+
+const generateFonts = (lang, fonts) => Object.keys(fonts)
+  .map(name => ({
+    alias: name.replace(/-/g, '_'),
+    name,
+    lang,
+    label: name,
+    path: fonts[name],
+    params: {
+      style: 'normal',
+      display: 'swap'
+    }
+  }));
+
+export const availableFonts = [
+  ...generateFonts(FONTS_LANGS.ENG, FONTS),
+  ...generateFonts(FONTS_LANGS.HEBREW, FONTS_HEBREW),
+  ...generateFonts(FONTS_LANGS.HINDI, FONTS_HINDI),
+  ...generateFonts(FONTS_LANGS.BENGALI, FONTS_BENGALI),
+  ...generateFonts(FONTS_LANGS.GUJARATI, FONTS_GUJARATI),
+  ...generateFonts(FONTS_LANGS.KANNADA, FONTS_KANNADA),
+  ...generateFonts(FONTS_LANGS.MALYALAM, FONTS_MALYALAM),
+  ...generateFonts(FONTS_LANGS.MARATHI, FONTS_MARATHI),
+  ...generateFonts(FONTS_LANGS.TAMIL, FONTS_TAMIL),
+  ...generateFonts(FONTS_LANGS.TELUGU, FONTS_TELUGU),
+  ...generateFonts(FONTS_LANGS.ORIYA, FONTS_ORIYA)
+];
+
+export const getFont = alias => availableFonts.find(f => f.alias === alias || f.name === alias);
+
+export const getFormattedFont = alias => {
+  const font = getFont(alias);
+  return font ? {
+    fontFamily: font.name,
+    fontWeight: font.params.weight,
+    fontStyle: font.params.style
+  } : {};
+};
+
+export const getFontPath = alias => {
+  const { path } = getFont(alias) || {};
+  return path && staticLink(path);
+};
+
+export const loadFont = alias => new Promise((resolve, reject) => {
+  const font = getFont(alias);
+  if (!font) {
+    return reject(new Error('Font not found!'));
+  }
+
+  if (fontsLoadList[font.name]) {
+    return fontsLoadList[font.name].then(() => resolve(getFormattedFont(alias)));
+  }
+
+  const fontFace = new FontFace(font.name, `url('${getFontPath(alias)}')`);
+  fontsLoadList[font.name] = fontFace.load();
+
+  fontsLoadList[font.name].then(loadedFace => {
+    document.fonts.add(loadedFace);
+    resolve(getFormattedFont(alias));
+  }).catch(error => console.warn(error));
+});

package/assets/js/utils/gtm.js

@@ -0,0 +1,20 @@
+const gtm = {
+  push({
+    id,
+    total,
+    tax,
+    shipping,
+    products
+  }) {
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      transactionId: id,
+      transactionTotal: total,
+      transactionTax: tax,
+      transactionShipping: shipping,
+      transactionProducts: products
+    });
+  }
+};
+
+export default gtm;

package/assets/js/utils/guid.js

@@ -0,0 +1,3 @@
+export function generateGUID() {
+  return `${Date.now()}_${Math.random()}`;
+}

package/assets/js/utils/news.js

@@ -0,0 +1,10 @@
+const COLOR_EXP = /_([#A-Za-z0-9]+)\s*$/;
+
+export function getColor(title) {
+  const [, color] = title.match(COLOR_EXP) || [];
+  return color;
+}
+
+export function removeColor(title) {
+  return title.replace(COLOR_EXP, '');
+}

package/assets/js/utils/order.js

@@ -0,0 +1,73 @@
+import { getProductSides } from './product';
+
+export function populateProductsFields(products, pricing) {
+  const prints = [];
+  const designs = [];
+
+  return products.map(product => {
+    const sides = getProductSides(product);
+    const sidesKeys = [];
+    sides.forEach(side => {
+      const sideLayers = product.layers.filter(l => l.sideId === side);
+      const lastModifiedLayer = sideLayers.sort((l1, l2) => l2.modifiedAt - l1.modifiedAt)[0];
+      const key = `${side}-${lastModifiedLayer.modifiedAt}`;
+
+      sidesKeys.push(key);
+
+      if (!prints.includes(key)) {
+        prints.push(key);
+      }
+
+      const printId = prints.indexOf(key) + 1;
+      sideLayers.forEach(l => {
+        l.printId = printId;
+      });
+
+      product.printIds[side] = printId;
+    });
+
+    const designKey = sidesKeys.join('__');
+    if (!designs.includes(designKey)) {
+      designs.push(designKey);
+    }
+
+    const designId = designs.indexOf(designKey) + 1;
+    product.designId = designId;
+
+    product.colors = (product.simpleProducts || []).reduce((colors, sp) => {
+      if (!colors.includes(sp.color._id)) {
+        colors.push(sp.color._id);
+      }
+      return colors;
+    }, []);
+
+    if (pricing) {
+      const productPricing = pricing.products[product.guid];
+      product.totalPrice = productPricing.totalPriceWithoutTax;
+      product.printsTotalPrice = productPricing.prints.totalPriceWithoutTax;
+      product.productsTotalPrice = productPricing.products.totalPriceWithoutTax;
+
+      (product.simpleProducts || []).forEach(sp => {
+        const spPricing = productPricing.products[sp.guid];
+        if (spPricing) {
+          sp.totalPrice = spPricing.totalPriceWithoutTax;
+          sp.productCost = spPricing.priceWithoutTax;
+        }
+      });
+
+      (product.prints || []).forEach(p => {
+        const pPricing = productPricing.prints[p.printArea._id];
+        if (pPricing) {
+          p.totalPrice = pPricing.totalPriceWithoutTax;
+          p.printCost = pPricing.priceWithoutTax;
+          p.setupCost = pPricing.setupPriceWithoutTax;
+        }
+        const defaultPricing = { setupCost: 0, printCost: [{ price: 0 }] };
+        const pricing = (p.printType?.printAreas || []).find(printArea => (printArea.printSizes || []).includes(p.printSize._id));
+        p.pricing = pricing || defaultPricing;
+      });
+    }
+
+    return product;
+  });
+};

package/assets/js/utils/pricing.js

@@ -0,0 +1,5 @@
+export function priceFromRange(amount = 0, pricing = [], defaultPrice = 0) {
+  const priceCondition = price => (!price.min || price.min <= amount) && (!price.max || price.max >= amount);
+  const { price } = (pricing || []).find(priceCondition) || { price: defaultPrice };
+  return price;
+}