@lancom/shared 0.0.62 → 0.0.66

package/assets/js/utils/export-print-to-svg.js

@@ -0,0 +1,97 @@
+
+import { fabric } from 'fabric';
+import FileSaver from 'file-saver';
+import { getFontPath } from '@lancom/shared/assets/js/utils/fonts-helper';
+import { PIXELS_PER_CM } from '@lancom/shared/assets/js/models/print-area';
+import { createObject } from './fabric/object-factory';
+
+const sizes = [];
+
+export function convertPrintToSVG(entity, sideId) {
+  return new Promise(resolve => {
+    const svgSize = getSVGSize(entity, sideId);
+    const canvas = new fabric.Canvas(document.createElement('canvas'), { ...svgSize, uniScaleTransform: false });
+
+    const sideLayers = getSideLayers(entity, sideId);
+    Promise.all(
+      sideLayers
+        .map(layer => {
+          if (layer.type === 'art') {
+            layer.url = layer.url.replace('thumb', 'origin');
+            layer._width = layer.width;
+            delete layer.width;
+            delete layer.height;
+          }
+          return layer;
+        })
+        .map(l => createObject(l, true))
+    ).then(objects => {
+      objects.forEach(object => {
+        const zoom = svgSize.width / object.layer.printAreaSize.width;
+        let artOriginZoom = 1;
+        if (object.layer.type === 'art') {
+          artOriginZoom *= object.layer._width / object.width;
+        }
+        object.top *= zoom;
+        object.left *= zoom;
+        object.scaleY *= zoom * artOriginZoom;
+        object.scaleX *= zoom * artOriginZoom;
+        canvas.add(object);
+      });
+
+      let svg = canvas.toSVG();
+      svg = insertFontsStyleToSvg(sideLayers, svg);
+      resolve(svg);
+    });
+  });
+}
+
+export function exportPrintToSVG(entity, sideId) {
+  convertPrintToSVG(entity, sideId).then(svg => {
+    const blob = new Blob([svg], { type: 'image/svg+xml' });
+    FileSaver.saveAs(blob, `${sideId}-${entity.guid}.svg`);
+  });
+};
+
+function getSVGSize(entity, sideId) {
+  const printArea = getPrintArea(entity, sideId);
+  const printSize = sizes[printArea];
+  return {
+    width: printSize[0] * PIXELS_PER_CM,
+    height: printSize[1] * PIXELS_PER_CM
+  };
+}
+
+function getPrintArea(entity, sideId) {
+  const printAreas = entity.printAreas || {};
+  return printAreas[sideId];
+}
+
+function getSideLayers(entity, sideId) {
+  return (entity.layers || []).filter(layer => layer.sideId === sideId);
+}
+
+function insertFontsStyleToSvg(layers, svg) {
+  const fonts = [];
+  layers.filter(layer => layer.type === 'text')
+    .forEach(layer => {
+      if (!fonts.includes()) {
+        fonts.push(layer.fontFamily);
+      }
+    });
+
+  const css = fonts.reduce((style, font) => {
+    const fontPath = getFontPath(font);
+    if (fontPath) {
+      style += `
+        @font-face {
+        font-family: '${font}';
+        src: url('${fontPath}')  format('truetype');
+        }
+      `;
+    }
+    return style;
+  }, '');
+
+  return svg.replace('</defs>', `<style type="text/css"><![CDATA[${css}]]></style></defs>`);
+}

package/assets/js/utils/fabric/files-loader.js

@@ -0,0 +1,36 @@
+
+import { loadFont } from '@lancom/shared/assets/js/utils/fonts-helper';
+
+const cacheImages = {};
+const cacheFonts = {};
+
+class FilesLoader {
+  loadImage(url) {
+    return new Promise(resolve => {
+      if (cacheImages[url]) {
+        return resolve(cacheImages[url]);
+      }
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.addEventListener('load', () => {
+        cacheImages[url] = img;
+        resolve(img);
+      });
+      img.src = url;
+    });
+  }
+
+  loadFont(font) {
+    return new Promise(resolve => {
+      if (cacheFonts[font]) {
+        return resolve(cacheFonts[font]);
+      }
+      loadFont(font).then(() => {
+        cacheFonts[font] = true;
+        resolve(true);
+      });
+    });
+  }
+}
+
+export const filesLoader = new FilesLoader();

package/assets/js/utils/fabric/object-factory.js

@@ -0,0 +1,50 @@
+
+import { fabric } from 'fabric';
+import { filesLoader } from './files-loader';
+
+export function createObject(layer, isImageBase64) {
+  switch (layer.type) {
+    case 'art':
+      return createArt(layer, isImageBase64);
+
+    case 'text':
+      return createText(layer);
+
+    default:
+      return Promise.reject(new Error('Don\'t support this layer type'));
+  }
+}
+
+export function createText(layer) {
+  return filesLoader.loadFont(layer.fontFamily)
+    .then(() => {
+      const params = { ...layer, layer };
+      delete params.copy;
+      const copy = layer.copy.length ? layer.copy : '';
+      if (!layer.enableOutline) {
+        params.strokeWidth = 0;
+      }
+
+      return new fabric.IText(copy, params);
+    });
+}
+
+export function createArt(layer, isImageBase64) {
+  return filesLoader.loadImage(layer.url)
+    .then(img => isImageBase64 ? getImageWithDataUrl(img) : Promise.resolve(img))
+    .then(img => new fabric.Image(img, { ...layer, layer }));
+}
+
+function getImageWithDataUrl(img) {
+  return new Promise(resolve => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage(img, 0, 0);
+
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.src = canvas.toDataURL();
+  });
+}

package/assets/js/utils/fabric/selection-style.js

@@ -0,0 +1,59 @@
+import { fabric } from 'fabric';
+
+let rotate;
+
+export function loadRotateImage(cb = Function.prototype) {
+  const image = new Image();
+  image.src = '/icons/rotate.png';
+  image.onload = () => {
+    rotate = image;
+    cb();
+  };
+}
+
+fabric.Object.prototype.drawControls = function (ctx) {
+  if (!this.hasControls) {
+    return this;
+  }
+
+  const { x: width, y: height } = this._calculateCurrentDimensions();
+  const scaleOffset = this.cornerSize;
+  const left = -(width + scaleOffset) / 2;
+  const top = -(height + scaleOffset) / 2;
+  const methodName = this.transparentCorners ? 'stroke' : 'fill';
+
+  ctx.save();
+
+  ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
+  if (!this.transparentCorners) {
+    ctx.strokeStyle = this.cornerStrokeColor;
+  }
+  this._setLineDash(ctx, this.cornerDashArray, null);
+
+  this._drawControl('tl', ctx, methodName, left, top);
+  this._drawControl('tr', ctx, methodName, left + width, top);
+  this._drawControl('bl', ctx, methodName, left, top + height);
+  this._drawControl('br', ctx, methodName, left + width, top + height);
+
+  if (!this.get('lockUniScaling')) {
+    this._drawControl('mt', ctx, methodName, left + width / 2, top);
+    this._drawControl('mb', ctx, methodName, left + width / 2, top + height);
+    this._drawControl('mr', ctx, methodName, left + width, top + height / 2);
+    this._drawControl('ml', ctx, methodName, left, top + height / 2);
+  }
+
+  if (this.hasRotatingPoint) {
+    const rotateLeft = left + width / 2 - 4;
+    const rotateTop = top - this.rotatingPointOffset - 5;
+    const drawRotateIcon = () => ctx.drawImage(rotate, rotateLeft, rotateTop, 20, 20);
+    if (!rotate) {
+      loadRotateImage(drawRotateIcon);
+    } else {
+      drawRotateIcon();
+    }
+  }
+
+  ctx.restore();
+
+  return this;
+};

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

@@ -0,0 +1,143 @@
+
+import { fabric } from 'fabric';
+
+const sizes = [];
+
+export const buildWireframe = ({ width, height, editor, area = 'a4_v', product }) => {
+  const layers = editor.getObjects();
+  const printAreaSize = layers[0].printAreaSize;
+  const group = new fabric.Group(layers);
+  const groupBounding = group.getBoundingRect();
+  const ratioX = (width / groupBounding.width) * 0.8;
+  const ratioY = (height / groupBounding.height) * 0.8;
+  const ratio = ratioX < ratioY ? ratioX : ratioY;
+  layers.forEach(layer => {
+    layer.set({ selectable: false });
+  });
+  const bounding = new fabric.Rect({
+    top: groupBounding.top,
+    left: groupBounding.left,
+    width: groupBounding.width * ratio,
+    height: groupBounding.height * ratio,
+    hasBorders: false,
+    hasControls: false,
+    lockMovementX: true,
+    lockMovementY: true,
+    evented: false,
+    strokeWidth: 2,
+    strokeDashArray: [8, 3],
+    stroke: '#343750',
+    fill: 'rgba(0, 0, 0, 0)',
+    selectable: false
+  });
+  group.scaleX = ratio;
+  group.scaleY = ratio;
+  group.set({
+    left: (width - (groupBounding.width * ratio)) / 2,
+    top: (height - (groupBounding.height * ratio)) / 2
+  });
+  bounding.set({
+    left: (width - (groupBounding.width * ratio)) / 2,
+    top: (height - (groupBounding.height * ratio)) / 2
+  });
+  const verticalLine = new fabric.Line(
+    [
+      bounding.left,
+      bounding.top + bounding.height,
+      bounding.left,
+      width
+    ],
+    {
+      strokeWidth: 2,
+      strokeDashArray: [8, 3],
+      stroke: '#343750',
+      selectable: false
+    }
+  );
+  const horizontallLine = new fabric.Line(
+    [
+      bounding.left,
+      bounding.top + bounding.height,
+      0,
+      bounding.top + bounding.height
+    ],
+    {
+      strokeWidth: 2,
+      strokeDashArray: [8, 3],
+      stroke: '#343750',
+      selectable: false
+    }
+  );
+  const getArrow = ([x1, y1, x2, y2], orientation) => {
+    const line = new fabric.Line(
+      [x1, y1, x2, y2],
+      {
+        strokeWidth: 2,
+        stroke: '#343750'
+      }
+    );
+    const triangle1 = new fabric.Triangle({
+      width: 16,
+      height: 20,
+      fill: '#343750',
+      left: orientation === 'v' ? x1 : x1 - 7.5,
+      top: orientation === 'v' ? y1 + 9.5 : y1 - 3,
+      angle: orientation === 'v' ? -90 : 0
+    });
+    const triangle2 = new fabric.Triangle({
+      width: 16,
+      height: 20,
+      fill: '#343750',
+      left: orientation === 'v' ? x2 + 3 : x2 + 9.5,
+      top: orientation === 'v' ? y2 - 7.5 : y2 + 3,
+      angle: orientation === 'v' ? 90 : 180
+    });
+    return new fabric.Group([line, triangle1, triangle2]);
+  };
+  const verticalArrow = getArrow([
+    bounding.left,
+    (bounding.top + bounding.height) + 20,
+    bounding.left + bounding.width,
+    (bounding.top + bounding.height) + 20
+  ], 'v');
+  const horizontalArrow = getArrow([
+    bounding.left - 20,
+    bounding.top,
+    bounding.left - 20,
+    bounding.top + bounding.height
+  ], 'h');
+  verticalArrow.set({ selectable: false });
+  horizontalArrow.set({ selectable: false });
+  const W = Math.round(groupBounding.width / printAreaSize.width * sizes[area][0]);
+  const H = Math.round(groupBounding.height / printAreaSize.height * sizes[area][1]);
+  const verticalSize = new fabric.Text(`H: ${H * 10}mm`, {
+    top: bounding.top + (bounding.height / 2),
+    left: 0,
+    fontSize: 22,
+    fill: '#343750',
+    fontFamily: 'poppins',
+    angle: -90,
+    selectable: false
+  });
+  const horizontalSize = new fabric.Text(`W: ${W * 10}mm`, {
+    top: (bounding.top + bounding.height) + 25,
+    left: bounding.left + (bounding.width / 2),
+    fontSize: 22,
+    fill: '#343750',
+    fontFamily: 'poppins',
+    selectable: false
+  });
+  verticalSize.set({
+    left: bounding.left - 25 - verticalSize.height
+  });
+  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);
+};