@sme.up/ketchup 8.0.2 → 8.2.0

package/dist/collection/components/kup-image/canvas/kup-image-canvas.js

@@ -1,225 +1,225 @@
-import { GraphicElement, Color } from './kup-image-canvas-declarations';
-import { getColorFromString } from './kup-image-canvas-helper';
-export class imageCanvas {
-  constructor() {
-    this.graphic_element_marker_splitter = '\\\\';
-    this.graphic_element_splitter = '\\\\AND\\\\';
-    this.background_color = 'BCOLOR;R255G000B000';
-    this.default_color = new Color(0, 0, 0);
-  }
-  async drawCanvas(value, canvas) {
-    this.value = value;
-    this.canvas = canvas;
-    this.draw();
-    return value;
-  }
-  draw() {
-    if (!this.value) {
-      return;
-    }
-    if (this.canvas.getContext) {
-      this.ctx = this.canvas.getContext('2d');
-      this.drawGraphicCell();
-    }
-  }
-  drawGraphicCell() {
-    const vGraphicElementDefinitionArr = this.value.split(this.graphic_element_splitter);
-    vGraphicElementDefinitionArr.forEach((graphicElem, index) => {
-      let vShapeMarker = 'SHAPE;BAR';
-      let vBGColorMarker = this.background_color;
-      let vHeightPctMarker = 'HEIGHT;100';
-      const vMarkersArray = graphicElem.split(this.graphic_element_marker_splitter);
-      const shapesArray = [];
-      const vSeparatorsList = [];
-      vMarkersArray.forEach((vString) => {
-        if (this.isShapeMarker(vString)) {
-          vShapeMarker = vString;
-        }
-        else if (this.isBgColorMarker(vString)) {
-          vBGColorMarker = vString;
-        }
-        else if (this.isHeightMarker(vString)) {
-          vHeightPctMarker = vString;
-        }
-        else if (this.isDecoratorMarker(vString)) {
-          vSeparatorsList.push(vString);
-        }
-        else {
-          shapesArray.push(vString);
-        }
-      });
-      const vGraphicElementArray = shapesArray.map((shape) => {
-        const elem = new GraphicElement();
-        elem.init([
-          vShapeMarker,
-          vBGColorMarker,
-          vHeightPctMarker,
-          shape,
-        ]);
-        return elem;
-      });
-      if (index === 0 && vBGColorMarker !== this.background_color) {
-        const bgColor = getColorFromString(vBGColorMarker.substring('BCOLOR;'.length));
-        this.drawRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight, bgColor);
-      }
-      let startX = 0;
-      vGraphicElementArray.forEach((elem) => {
-        switch (elem.getShape()) {
-          case 'circle':
-            startX = this.getNewStarXFromCircle(startX, elem);
-            break;
-          case 'tril':
-            startX = this.getNewStarXFromTril(startX, elem);
-            break;
-          case 'trir':
-            startX = this.getNewStarXFromTrir(startX, elem);
-            break;
-          default:
-            // bar
-            startX = this.getNewStarXFromBar(startX, elem);
-            break;
-        }
-      });
-      vSeparatorsList.forEach((sep) => {
-        if (sep.startsWith('SEP') || sep.startsWith('DIV')) {
-          this.drawSeparator(sep);
-        }
-        else if (sep.startsWith('ARW')) {
-          this.drawArrow(sep);
-        }
-        else if (sep.startsWith('GRID')) {
-          this.drawGrid(sep);
-        }
-      });
-    });
-  }
-  isShapeMarker(value) {
-    return value && value.toUpperCase().startsWith('SHAPE;');
-  }
-  isBgColorMarker(value) {
-    return value && value.toUpperCase().startsWith('BCOLOR;');
-  }
-  isHeightMarker(value) {
-    return value && value.toUpperCase().startsWith('HEIGHT;');
-  }
-  isDecoratorMarker(value) {
-    return (value &&
-      (value.toUpperCase().startsWith('SEP;') ||
-        value.toUpperCase().startsWith('DIV;') ||
-        value.toUpperCase().startsWith('ARW;') ||
-        value.toUpperCase().startsWith('GRID;')));
-  }
-  getDim(dimPixel, dimPerc) {
-    return Math.floor((dimPixel / 100) * dimPerc);
-  }
-  getNewStarXFromBar(startX, elem) {
-    if (Number.isNaN(elem.getWidth())) {
-      //no width
-      return startX;
-    }
-    const elemWidth = this.getDim(this.canvas.clientWidth, elem.getWidth());
-    const elemHeight = this.getDim(this.canvas.clientHeight, elem.getHeight());
-    const y = this.canvas.clientHeight - elemHeight;
-    if (!elem.isTrasparent()) {
-      this.drawRect(startX, y, elemWidth - startX, elemHeight, elem.getColor());
-    }
-    return elemWidth;
-  }
-  getNewStarXFromCircle(startX, circle) {
-    const newStartX = this.getDim(this.canvas.clientWidth, circle.getWidth());
-    const x = (startX + newStartX) / 2;
-    if (!circle.isTrasparent()) {
-      this.drawArc(x, this.canvas.clientHeight / 2, circle.getColor());
-    }
-    return newStartX;
-  }
-  getNewStarXFromTril(startX, triLeft) {
-    const newStartX = this.getDim(this.canvas.clientWidth, triLeft.getWidth());
-    if (!triLeft.isTrasparent()) {
-      this.drawTri(newStartX, 0, startX, this.canvas.clientHeight / 2, triLeft.getColor());
-    }
-    return newStartX;
-  }
-  getNewStarXFromTrir(startX, triRight) {
-    const newStartX = this.getDim(this.canvas.clientWidth, triRight.getWidth());
-    if (!triRight.isTrasparent()) {
-      this.drawTri(startX, 0, newStartX, this.canvas.clientHeight / 2, triRight.getColor());
-    }
-    return newStartX;
-  }
-  drawArc(x, radius, color) {
-    if (color) {
-      this.ctx.fillStyle = color.toString();
-    }
-    this.ctx.beginPath();
-    this.ctx.arc(x, radius, radius, 0, 2 * Math.PI, true);
-    this.ctx.fill();
-  }
-  drawRect(x, y, width, height, color) {
-    if (color) {
-      this.ctx.fillStyle = color.toString();
-    }
-    this.ctx.fillRect(x, y, width, height);
-  }
-  drawTri(x1, y1, x2, y2, color) {
-    if (color) {
-      this.ctx.fillStyle = color.toString();
-    }
-    this.ctx.beginPath();
-    this.ctx.moveTo(x1, y1);
-    this.ctx.lineTo(x2, y2);
-    this.ctx.lineTo(x1, this.canvas.clientHeight);
-    this.ctx.fill();
-  }
-  drawArrow(sep) {
-    let vPart = sep.substring('ARW;'.length);
-    if (vPart.indexOf(',') > -1) {
-      vPart = vPart.replace(',', '.');
-    }
-    this.ctx.fillStyle = this.default_color.toString();
-    const startX = this.getDim(this.canvas.clientWidth, parseFloat(vPart));
-    const height = this.canvas.clientHeight;
-    const arrSpan = Math.floor(height / 3);
-    const arrSpanHalf = arrSpan / 2;
-    this.ctx.beginPath();
-    this.ctx.moveTo(startX, 0);
-    this.ctx.lineTo(startX - arrSpan, height / 2);
-    this.ctx.lineTo(startX - arrSpanHalf, height / 2);
-    this.ctx.lineTo(startX - arrSpanHalf, height);
-    this.ctx.lineTo(startX + arrSpanHalf, height);
-    this.ctx.lineTo(startX + arrSpanHalf, height / 2);
-    this.ctx.lineTo(startX + arrSpan, height / 2);
-    this.ctx.fill();
-  }
-  drawGrid(sep) {
-    let vPart = sep.substring('GRID;'.length);
-    if (vPart.indexOf(',') > -1) {
-      vPart = vPart.replace(',', '.');
-    }
-    const vTickNum = parseInt(vPart);
-    const vTickDist = this.canvas.clientWidth / vTickNum;
-    const tickH = this.canvas.clientHeight / 5;
-    const y = this.canvas.clientHeight - tickH;
-    const tickW = 1;
-    for (let i = vTickDist; i < this.canvas.clientWidth; i = i + vTickDist) {
-      this.drawRect(i, y, tickW, tickH, this.default_color);
-    }
-  }
-  drawSeparator(sep) {
-    const vSeparatorPart = sep.substring('SEP;'.length).split(';');
-    let vColor = 'R000G000B000';
-    let vThickness = 2;
-    let vPositionPart = vSeparatorPart[0];
-    if (vSeparatorPart.length > 1) {
-      vColor = vSeparatorPart[1];
-    }
-    if (vSeparatorPart.length > 2) {
-      vThickness = parseInt(vSeparatorPart[2]);
-    }
-    if (vPositionPart.indexOf(',') > -1) {
-      vPositionPart = vPositionPart.replace(',', '.');
-    }
-    const x = this.getDim(this.canvas.clientWidth, parseFloat(vPositionPart));
-    this.drawRect(x, 0, vThickness, this.canvas.clientHeight, getColorFromString(vColor));
-  }
-}
+import { GraphicElement, Color } from './kup-image-canvas-declarations';
+import { getColorFromString } from './kup-image-canvas-helper';
+export class imageCanvas {
+  constructor() {
+    this.graphic_element_marker_splitter = '\\\\';
+    this.graphic_element_splitter = '\\\\AND\\\\';
+    this.background_color = 'BCOLOR;R255G000B000';
+    this.default_color = new Color(0, 0, 0);
+  }
+  async drawCanvas(value, canvas) {
+    this.value = value;
+    this.canvas = canvas;
+    this.draw();
+    return value;
+  }
+  draw() {
+    if (!this.value) {
+      return;
+    }
+    if (this.canvas.getContext) {
+      this.ctx = this.canvas.getContext('2d');
+      this.drawGraphicCell();
+    }
+  }
+  drawGraphicCell() {
+    const vGraphicElementDefinitionArr = this.value.split(this.graphic_element_splitter);
+    vGraphicElementDefinitionArr.forEach((graphicElem, index) => {
+      let vShapeMarker = 'SHAPE;BAR';
+      let vBGColorMarker = this.background_color;
+      let vHeightPctMarker = 'HEIGHT;100';
+      const vMarkersArray = graphicElem.split(this.graphic_element_marker_splitter);
+      const shapesArray = [];
+      const vSeparatorsList = [];
+      vMarkersArray.forEach((vString) => {
+        if (this.isShapeMarker(vString)) {
+          vShapeMarker = vString;
+        }
+        else if (this.isBgColorMarker(vString)) {
+          vBGColorMarker = vString;
+        }
+        else if (this.isHeightMarker(vString)) {
+          vHeightPctMarker = vString;
+        }
+        else if (this.isDecoratorMarker(vString)) {
+          vSeparatorsList.push(vString);
+        }
+        else {
+          shapesArray.push(vString);
+        }
+      });
+      const vGraphicElementArray = shapesArray.map((shape) => {
+        const elem = new GraphicElement();
+        elem.init([
+          vShapeMarker,
+          vBGColorMarker,
+          vHeightPctMarker,
+          shape,
+        ]);
+        return elem;
+      });
+      if (index === 0 && vBGColorMarker !== this.background_color) {
+        const bgColor = getColorFromString(vBGColorMarker.substring('BCOLOR;'.length));
+        this.drawRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight, bgColor);
+      }
+      let startX = 0;
+      vGraphicElementArray.forEach((elem) => {
+        switch (elem.getShape()) {
+          case 'circle':
+            startX = this.getNewStarXFromCircle(startX, elem);
+            break;
+          case 'tril':
+            startX = this.getNewStarXFromTril(startX, elem);
+            break;
+          case 'trir':
+            startX = this.getNewStarXFromTrir(startX, elem);
+            break;
+          default:
+            // bar
+            startX = this.getNewStarXFromBar(startX, elem);
+            break;
+        }
+      });
+      vSeparatorsList.forEach((sep) => {
+        if (sep.startsWith('SEP') || sep.startsWith('DIV')) {
+          this.drawSeparator(sep);
+        }
+        else if (sep.startsWith('ARW')) {
+          this.drawArrow(sep);
+        }
+        else if (sep.startsWith('GRID')) {
+          this.drawGrid(sep);
+        }
+      });
+    });
+  }
+  isShapeMarker(value) {
+    return value && value.toUpperCase().startsWith('SHAPE;');
+  }
+  isBgColorMarker(value) {
+    return value && value.toUpperCase().startsWith('BCOLOR;');
+  }
+  isHeightMarker(value) {
+    return value && value.toUpperCase().startsWith('HEIGHT;');
+  }
+  isDecoratorMarker(value) {
+    return (value &&
+      (value.toUpperCase().startsWith('SEP;') ||
+        value.toUpperCase().startsWith('DIV;') ||
+        value.toUpperCase().startsWith('ARW;') ||
+        value.toUpperCase().startsWith('GRID;')));
+  }
+  getDim(dimPixel, dimPerc) {
+    return Math.floor((dimPixel / 100) * dimPerc);
+  }
+  getNewStarXFromBar(startX, elem) {
+    if (Number.isNaN(elem.getWidth())) {
+      //no width
+      return startX;
+    }
+    const elemWidth = this.getDim(this.canvas.clientWidth, elem.getWidth());
+    const elemHeight = this.getDim(this.canvas.clientHeight, elem.getHeight());
+    const y = this.canvas.clientHeight - elemHeight;
+    if (!elem.isTrasparent()) {
+      this.drawRect(startX, y, elemWidth - startX, elemHeight, elem.getColor());
+    }
+    return elemWidth;
+  }
+  getNewStarXFromCircle(startX, circle) {
+    const newStartX = this.getDim(this.canvas.clientWidth, circle.getWidth());
+    const x = (startX + newStartX) / 2;
+    if (!circle.isTrasparent()) {
+      this.drawArc(x, this.canvas.clientHeight / 2, circle.getColor());
+    }
+    return newStartX;
+  }
+  getNewStarXFromTril(startX, triLeft) {
+    const newStartX = this.getDim(this.canvas.clientWidth, triLeft.getWidth());
+    if (!triLeft.isTrasparent()) {
+      this.drawTri(newStartX, 0, startX, this.canvas.clientHeight / 2, triLeft.getColor());
+    }
+    return newStartX;
+  }
+  getNewStarXFromTrir(startX, triRight) {
+    const newStartX = this.getDim(this.canvas.clientWidth, triRight.getWidth());
+    if (!triRight.isTrasparent()) {
+      this.drawTri(startX, 0, newStartX, this.canvas.clientHeight / 2, triRight.getColor());
+    }
+    return newStartX;
+  }
+  drawArc(x, radius, color) {
+    if (color) {
+      this.ctx.fillStyle = color.toString();
+    }
+    this.ctx.beginPath();
+    this.ctx.arc(x, radius, radius, 0, 2 * Math.PI, true);
+    this.ctx.fill();
+  }
+  drawRect(x, y, width, height, color) {
+    if (color) {
+      this.ctx.fillStyle = color.toString();
+    }
+    this.ctx.fillRect(x, y, width, height);
+  }
+  drawTri(x1, y1, x2, y2, color) {
+    if (color) {
+      this.ctx.fillStyle = color.toString();
+    }
+    this.ctx.beginPath();
+    this.ctx.moveTo(x1, y1);
+    this.ctx.lineTo(x2, y2);
+    this.ctx.lineTo(x1, this.canvas.clientHeight);
+    this.ctx.fill();
+  }
+  drawArrow(sep) {
+    let vPart = sep.substring('ARW;'.length);
+    if (vPart.indexOf(',') > -1) {
+      vPart = vPart.replace(',', '.');
+    }
+    this.ctx.fillStyle = this.default_color.toString();
+    const startX = this.getDim(this.canvas.clientWidth, parseFloat(vPart));
+    const height = this.canvas.clientHeight;
+    const arrSpan = Math.floor(height / 3);
+    const arrSpanHalf = arrSpan / 2;
+    this.ctx.beginPath();
+    this.ctx.moveTo(startX, 0);
+    this.ctx.lineTo(startX - arrSpan, height / 2);
+    this.ctx.lineTo(startX - arrSpanHalf, height / 2);
+    this.ctx.lineTo(startX - arrSpanHalf, height);
+    this.ctx.lineTo(startX + arrSpanHalf, height);
+    this.ctx.lineTo(startX + arrSpanHalf, height / 2);
+    this.ctx.lineTo(startX + arrSpan, height / 2);
+    this.ctx.fill();
+  }
+  drawGrid(sep) {
+    let vPart = sep.substring('GRID;'.length);
+    if (vPart.indexOf(',') > -1) {
+      vPart = vPart.replace(',', '.');
+    }
+    const vTickNum = parseInt(vPart);
+    const vTickDist = this.canvas.clientWidth / vTickNum;
+    const tickH = this.canvas.clientHeight / 5;
+    const y = this.canvas.clientHeight - tickH;
+    const tickW = 1;
+    for (let i = vTickDist; i < this.canvas.clientWidth; i = i + vTickDist) {
+      this.drawRect(i, y, tickW, tickH, this.default_color);
+    }
+  }
+  drawSeparator(sep) {
+    const vSeparatorPart = sep.substring('SEP;'.length).split(';');
+    let vColor = 'R000G000B000';
+    let vThickness = 2;
+    let vPositionPart = vSeparatorPart[0];
+    if (vSeparatorPart.length > 1) {
+      vColor = vSeparatorPart[1];
+    }
+    if (vSeparatorPart.length > 2) {
+      vThickness = parseInt(vSeparatorPart[2]);
+    }
+    if (vPositionPart.indexOf(',') > -1) {
+      vPositionPart = vPositionPart.replace(',', '.');
+    }
+    const x = this.getDim(this.canvas.clientWidth, parseFloat(vPositionPart));
+    this.drawRect(x, 0, vThickness, this.canvas.clientHeight, getColorFromString(vColor));
+  }
+}

package/dist/collection/components/kup-image/kup-image-declarations.js

@@ -1,16 +1,16 @@
-/**
- * Props of the kup-image component.
- * Used to export every prop in an object.
- */
-export var KupImageProps;
-(function (KupImageProps) {
-  KupImageProps["badgeData"] = "Sets the data of badges.";
-  KupImageProps["color"] = "The color of the icon, defaults to the CSS variable --kup-icon-color.";
-  KupImageProps["customStyle"] = "Custom style of the component.";
-  KupImageProps["data"] = "When present, the component will be drawn using CSS. Check the 'Drawing with CSS' section of the image showcase for more information.";
-  KupImageProps["feedback"] = "When set to true, a spinner will be displayed until the image finished loading. Not compatible with SVGs.";
-  KupImageProps["isCanvas"] = "The image component will create a canvas element on which it's possible to draw. It's a temporary feature that will be fully replaced by CSS drawing in the future.";
-  KupImageProps["resource"] = "The resource used to fetch the image.";
-  KupImageProps["sizeX"] = "The width of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).";
-  KupImageProps["sizeY"] = "The height of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).";
-})(KupImageProps || (KupImageProps = {}));
+/**
+ * Props of the kup-image component.
+ * Used to export every prop in an object.
+ */
+export var KupImageProps;
+(function (KupImageProps) {
+  KupImageProps["badgeData"] = "Sets the data of badges.";
+  KupImageProps["color"] = "The color of the icon, defaults to the CSS variable --kup-icon-color.";
+  KupImageProps["customStyle"] = "Custom style of the component.";
+  KupImageProps["data"] = "When present, the component will be drawn using CSS. Check the 'Drawing with CSS' section of the image showcase for more information.";
+  KupImageProps["feedback"] = "When set to true, a spinner will be displayed until the image finished loading. Not compatible with SVGs.";
+  KupImageProps["isCanvas"] = "The image component will create a canvas element on which it's possible to draw. It's a temporary feature that will be fully replaced by CSS drawing in the future.";
+  KupImageProps["resource"] = "The resource used to fetch the image.";
+  KupImageProps["sizeX"] = "The width of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).";
+  KupImageProps["sizeY"] = "The height of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).";
+})(KupImageProps || (KupImageProps = {}));