@sme.up/ketchup 9.2.0 → 9.3.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));
-  }
+    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

@@ -4,13 +4,13 @@
  */
 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["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 = {}));