npm - @instructure/canvas-rce - Versions diffs - 5.14.1 → 5.14.2 - Mend

@instructure/canvas-rce 5.14.1 → 5.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (481) hide show

package/es/rce/plugins/instructure_icon_maker/svg/shape.js CHANGED Viewed

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { createSvgElement } from './utils';
 import { Size } from './constants';
 export const Shape = {
@@ -32,37 +33,27 @@ export function buildShape(_ref) {
     shape,
     size
   } = _ref;
   switch (shape) {
     case Shape.Square:
       return buildSquare(size);
     case Shape.Circle:
       return buildCircle(size);
     case Shape.Triangle:
       return buildTriangle(size);
     case Shape.Diamond:
       return buildDiamond(size);
     case Shape.Pentagon:
       return buildPentagon(size);
     case Shape.Hexagon:
       return buildHexagon(size);
     case Shape.Octagon:
       return buildOctagon(size);
     case Shape.Star:
       return buildStar(size);
     default:
       throw new Error(`Invalid shape: ${shape}`);
   }
 }
 function buildSquare(size) {
   switch (size) {
     case Size.ExtraSmall:
@@ -72,7 +63,6 @@ function buildSquare(size) {
         width: '66',
         height: '66'
       });
     case Size.Small:
       return createSvgElement('rect', {
         x: '4',
@@ -80,7 +70,6 @@ function buildSquare(size) {
         width: '114',
         height: '114'
       });
     case Size.Medium:
       return createSvgElement('rect', {
         x: '4',
@@ -88,7 +77,6 @@ function buildSquare(size) {
         width: '150',
         height: '150'
       });
     case Size.Large:
       return createSvgElement('rect', {
         x: '4',
@@ -96,12 +84,10 @@ function buildSquare(size) {
         width: '210',
         height: '210'
       });
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function buildCircle(size) {
   switch (size) {
     case Size.ExtraSmall:
@@ -110,60 +96,50 @@ function buildCircle(size) {
         cy: '37',
         r: '33'
       });
     case Size.Small:
       return createSvgElement('circle', {
         cx: '61',
         cy: '61',
         r: '57'
       });
     case Size.Medium:
       return createSvgElement('circle', {
         cx: '79',
         cy: '79',
         r: '75'
       });
     case Size.Large:
       return createSvgElement('circle', {
         cx: '109',
         cy: '109',
         r: '105'
       });
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function buildTriangle(size) {
   switch (size) {
     case Size.ExtraSmall:
       return createSvgElement('path', {
         d: 'M37 8L66 70H8L37 8Z'
       });
     case Size.Small:
       return createSvgElement('path', {
         d: 'M61 8L114 118H8L61 8Z'
       });
     case Size.Medium:
       return createSvgElement('path', {
         d: 'M79 8L150 154H8L79 8Z'
       });
     case Size.Large:
       return createSvgElement('path', {
         d: 'M109 8L210 214H8L109 8Z'
       });
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function buildDiamond(size) {
   switch (size) {
     case Size.ExtraSmall:
@@ -174,7 +150,6 @@ function buildDiamond(size) {
         height: '44',
         transform: 'rotate(-45 6 37)'
       });
     case Size.Small:
       return createSvgElement('rect', {
         x: '7',
@@ -183,7 +158,6 @@ function buildDiamond(size) {
         height: '77',
         transform: 'rotate(-45 7 61)'
       });
     case Size.Medium:
       return createSvgElement('rect', {
         x: '6',
@@ -192,7 +166,6 @@ function buildDiamond(size) {
         height: '103',
         transform: 'rotate(-45 6 79)'
       });
     case Size.Large:
       return createSvgElement('rect', {
         x: '6',
@@ -201,115 +174,94 @@ function buildDiamond(size) {
         height: '146',
         transform: 'rotate(-45 6 109)'
       });
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function buildPentagon(size) {
   switch (size) {
     case Size.ExtraSmall:
       return createSvgElement('path', {
         d: 'M5 28.9191L37 5L69 28.9191L55.235 68H18.8686L5 28.9191Z'
       });
     case Size.Small:
       return createSvgElement('path', {
         d: 'M5 47.3838L61 6L117 47.3839L92.9113 115H29.27L5 47.3838Z'
       });
     case Size.Medium:
       return createSvgElement('path', {
         d: 'M5 61.0519L79 6L153 61.0519L121.168 151H37.0711L5 61.0519Z'
       });
     case Size.Large:
       return createSvgElement('path', {
         d: 'M5 84.8319L109 7L213 84.832L168.264 212H50.0728L5 84.8319Z'
       });
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function buildHexagon(size) {
   switch (size) {
     case Size.ExtraSmall:
       return createSvgElement('path', {
         d: 'M50.75 4L70 37L50.75 70H23.25L4 37L23.25 4H50.75Z'
       });
     case Size.Small:
       return createSvgElement('path', {
         d: 'M84.75 4L118 61L84.75 118H37.25L4 61L37.25 4H84.75Z'
       });
     case Size.Medium:
       return createSvgElement('path', {
         d: 'M110.25 4L154 79L110.25 154H47.75L4 79L47.75 4H110.25Z'
       });
     case Size.Large:
       return createSvgElement('path', {
         d: 'M152.75 4L214 109L152.75 214H65.25L4 109L65.25 4H152.75Z'
       });
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function buildOctagon(size) {
   switch (size) {
     case Size.ExtraSmall:
       return createSvgElement('path', {
         d: 'M4 23.25L23.25 4H50.75L70 23.25V50.75L50.75 70H23.25L4 50.75V23.25Z'
       });
     case Size.Small:
       return createSvgElement('path', {
         d: 'M4 37.25L37.25 4H84.75L118 37.25V84.75L84.75 118H37.25L4 84.75V37.25Z'
       });
     case Size.Medium:
       return createSvgElement('path', {
         d: 'M4 47.75L47.75 4H110.25L154 47.75V110.25L110.25 154H47.75L4 110.25V47.75Z'
       });
     case Size.Large:
       return createSvgElement('path', {
         d: 'M4 65.25L65.25 4H152.75L214 65.25V152.75L152.75 214H65.25L4 152.75V65.25Z'
       });
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function buildStar(size) {
   switch (size) {
     case Size.ExtraSmall:
       return createSvgElement('path', {
         d: 'M37.0623 14L42.5481 32.75H61L45.5403 43L53.5195 62L37.0623 49.25L21.1039 62L28.0857 43L13 32.75H31.5766L37.0623 14Z'
       });
     case Size.Small:
       return createSvgElement('path', {
         d: 'M61.1247 13L72.0961 50.5H109L78.0805 71L94.039 109L61.1247 83.5L29.2078 109L43.1714 71L13 50.5H50.1532L61.1247 13Z'
       });
     case Size.Medium:
       return createSvgElement('path', {
         d: 'M79.1714 13L94.2571 64.5625H145L102.486 92.75L124.429 145L79.1714 109.937L35.2857 145L54.4857 92.75L13 64.5625H64.0857L79.1714 13Z'
       });
     case Size.Large:
       return createSvgElement('path', {
         d: 'M109.249 13L131.192 88H205L143.161 129L175.078 205L109.249 154L45.4156 205L73.3429 129L13 88H87.3065L109.249 13Z'
       });
     default:
       throw new Error(`Invalid size: ${size}`);
   }

package/es/rce/plugins/instructure_icon_maker/svg/text.js CHANGED Viewed

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { createSvgElement, splitTextIntoLines } from './utils';
 import { TEXT_BACKGROUND_PADDING, BASE_SIZE, TEXT_SIZE, MAX_CHAR_COUNT, Size, TEXT_SIZE_FONT_DIFF } from './constants';
 import { Shape } from './shape';
@@ -66,8 +67,8 @@ export function buildTextBackground(_ref2) {
   const linesCount = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]).length;
   const xValue = getTextXValue(text, textSize, size);
   const yValue = getTextYValue(textPosition, textSize, shape, size, linesCount);
-  const textWidth = getTextWidth(text, textSize); // An extra line is added due svg text baseline behavior the first line is not counted regularly.
+  const textWidth = getTextWidth(text, textSize);
+  // An extra line is added due svg text baseline behavior the first line is not counted regularly.
   const textHeight = getTextHeight(linesCount + 1, textSize);
   const paddingSize = TEXT_BACKGROUND_PADDING * 2;
   const pathElement = createSvgElement('path');
@@ -102,18 +103,15 @@ export function getContainerHeight(_ref4) {
     size
   } = _ref4;
   const base = BASE_SIZE[size];
   if (!text || text.trim().length === 0) {
     return base;
   }
   const linesCount = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]).length;
   const textYValue = getTextYValue(textPosition, textSize, shape, size, linesCount);
   const textHeight = getTextHeight(linesCount, textSize);
   const textBackgroundHeight = textYValue + textHeight + TEXT_BACKGROUND_PADDING * 2;
   return Math.max(base, textBackgroundHeight);
 }
 function getTextWidth(text, textSize) {
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');
@@ -122,13 +120,11 @@ function getTextWidth(text, textSize) {
   const widths = lines.map(line => context.measureText(line).width);
   return Math.max(...widths);
 }
 function getTextHeight(linesCount, textSize) {
   // Since the svg text's initial Y position starts on the bottom of the first line
   // one line is subtracted to the count
   return (linesCount - 1) * TEXT_SIZE[textSize];
 }
 function getTextXValue(text, textSize, size) {
   const containerWidth = getContainerWidth({
     text,
@@ -138,90 +134,70 @@ function getTextXValue(text, textSize, size) {
   const textWidth = getTextWidth(text, textSize);
   return Math.floor((containerWidth - textWidth) * 0.5);
 }
 function getTextYValue(textPosition, textSize, shape, size, linesCount) {
   switch (textPosition) {
     case 'middle':
       {
-        const baseline = getYMiddleText(textSize, shape, size); // Represents the Y difference for multiline text to keep it vertically centered
+        const baseline = getYMiddleText(textSize, shape, size);
+        // Represents the Y difference for multiline text to keep it vertically centered
         const multilineDiff = (linesCount - 1) * TEXT_SIZE[textSize] / 2;
         return baseline - multilineDiff;
       }
     case 'bottom-third':
       {
-        const baseline = getYBottomThirdText(textSize, shape, size); // Represents the Y difference for multiline text to keep it vertically centered
+        const baseline = getYBottomThirdText(textSize, shape, size);
+        // Represents the Y difference for multiline text to keep it vertically centered
         const multilineDiff = (linesCount - 1) * TEXT_SIZE[textSize] / 2;
         return baseline - multilineDiff;
       }
     case 'below':
       return getYBelowText(textSize, shape, size);
     default:
       throw new Error(`Invalid text position: ${textPosition}`);
   }
 }
 function getYMiddleText(textSize, shape, size) {
   switch (textSize) {
     case Size.Small:
       return getYMiddleTextForShape(getYMiddleSmallTextForShape, shape, size);
     case Size.Medium:
       return getYMiddleTextForShape(getYMiddleMediumTextForShape, shape, size);
     case Size.Large:
       return getYMiddleTextForShape(getYMiddleLargeTextForShape, shape, size);
     case Size.ExtraLarge:
       return getYMiddleTextForShape(getYMiddleXLargeTextForShape, shape, size);
     default:
       throw new Error(`Invalid text size: ${textSize}`);
   }
 }
 function getYBottomThirdText(textSize, shape, size) {
   switch (textSize) {
     case Size.Small:
       return getYMiddleTextForShape(getYBottomThirdSmallTextForShape, shape, size);
     case Size.Medium:
       return getYMiddleTextForShape(getYBottomThirdMediumTextForShape, shape, size);
     case Size.Large:
       return getYMiddleTextForShape(getYBottomThirdLargeTextForShape, shape, size);
     case Size.ExtraLarge:
       return getYMiddleTextForShape(getYBottomThirdXLargeTextForShape, shape, size);
     default:
       throw new Error(`Invalid text size: ${textSize}`);
   }
 }
 function getYBelowText(textSize, shape, size) {
   switch (textSize) {
     case Size.Small:
       return getYMiddleTextForShape(getYBelowSmallTextForShape, shape, size);
     case Size.Medium:
       return getYMiddleTextForShape(getYBelowMediumTextForShape, shape, size);
     case Size.Large:
       return getYMiddleTextForShape(getYBelowLargeTextForShape, shape, size);
     case Size.ExtraLarge:
       return getYMiddleTextForShape(getYBelowXLargeTextForShape, shape, size);
     default:
       throw new Error(`Invalid text size: ${textSize}`);
   }
 }
 function getYMiddleTextForShape(getYTextSizeCallback, shape, size) {
   switch (shape) {
     case Shape.Square:
@@ -233,235 +209,174 @@ function getYMiddleTextForShape(getYTextSizeCallback, shape, size) {
     case Shape.Octagon:
     case Shape.Star:
       return getYTextSizeCallback(size);
     default:
       throw new Error(`Invalid shape: ${shape}`);
   }
 }
 function getYMiddleSmallTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 43;
     case Size.Small:
       return 67;
     case Size.Medium:
       return 85;
     case Size.Large:
       return 115;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYMiddleMediumTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 43;
     case Size.Small:
       return 67;
     case Size.Medium:
       return 85;
     case Size.Large:
       return 115;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYMiddleLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 45;
     case Size.Small:
       return 69;
     case Size.Medium:
       return 87;
     case Size.Large:
       return 117;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYMiddleXLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 47;
     case Size.Small:
       return 71;
     case Size.Medium:
       return 89;
     case Size.Large:
       return 119;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYBottomThirdSmallTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 73;
     case Size.Small:
       return 121;
     case Size.Medium:
       return 157;
     case Size.Large:
       return 217;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYBottomThirdMediumTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 74;
     case Size.Small:
       return 122;
     case Size.Medium:
       return 158;
     case Size.Large:
       return 218;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYBottomThirdLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 75;
     case Size.Small:
       return 123;
     case Size.Medium:
       return 159;
     case Size.Large:
       return 219;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYBottomThirdXLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 77;
     case Size.Small:
       return 125;
     case Size.Medium:
       return 161;
     case Size.Large:
       return 221;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYBelowSmallTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 96;
     case Size.Small:
       return 144;
     case Size.Medium:
       return 180;
     case Size.Large:
       return 240;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYBelowMediumTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 98;
     case Size.Small:
       return 146;
     case Size.Medium:
       return 182;
     case Size.Large:
       return 242;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYBelowLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 104;
     case Size.Small:
       return 152;
     case Size.Medium:
       return 188;
     case Size.Large:
       return 248;
     default:
       throw new Error(`Invalid size: ${size}`);
   }
 }
 function getYBelowXLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
       return 110;
     case Size.Small:
       return 158;
     case Size.Medium:
       return 194;
     case Size.Large:
       return 254;
     default:
       throw new Error(`Invalid size: ${size}`);
   }

package/es/rce/plugins/instructure_icon_maker/svg/utils.js CHANGED Viewed

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 export function createSvgElement(tag) {
   let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
@@ -27,23 +28,18 @@ export function createSvgElement(tag) {
 export function splitTextIntoLines(text, maxChars) {
   // Removes the beginning or trailing spaces, newlines or tabs.
   const trimmedText = text.replace(/^\s+|\s+$/g, '');
   if (!text || trimmedText.length === 0 || maxChars <= 0) {
     return [];
   }
   const lines = [];
   const words = trimmedText.match(/\S+/g);
   while (words.length) {
     let newLineNeeded = false;
     let line = '';
     let word;
     while (!newLineNeeded && (word = words.shift())) {
       word = word.trim();
       const newLength = (line + word).length;
       if (word.length >= maxChars + 1) {
         // if a single word doesn't fit in a line
         const start = word.substring(0, maxChars - 1);
@@ -60,11 +56,9 @@ export function splitTextIntoLines(text, maxChars) {
         newLineNeeded = true;
       }
     }
     line = line.trim();
     lines.push(line);
   }
   return lines;
 }
 export const decode = input => new DOMParser().parseFromString(input, 'text/html').documentElement.textContent;