@instructure/canvas-rce 5.6.0-beta.0 → 5.6.1

package/lib/translated/en-AU-x-unimelb/modules/rce/plugins/instructure_icon_maker/svg/constants.js

@@ -64,7 +64,8 @@ export const DEFAULT_SETTINGS = {
   width: 0,
   height: 0,
   transform: '',
-  imageSettings: null
+  imageSettings: null,
+  error: null
 };
 export const BASE_SIZE = {
   [Size.ExtraSmall]: 74,
@@ -84,6 +85,12 @@ export const TEXT_SIZE = {
   [Size.Large]: 22,
   [Size.ExtraLarge]: 28
 };
+export const TEXT_SIZE_FONT_DIFF = {
+  [Size.Small]: -1,
+  [Size.Medium]: 0,
+  [Size.Large]: 1,
+  [Size.ExtraLarge]: 2
+};
 export const MAX_CHAR_COUNT = {
   [Size.Small]: 21,
   [Size.Medium]: 18,

package/lib/translated/en-AU-x-unimelb/modules/rce/plugins/instructure_icon_maker/svg/metadata.js

@@ -26,6 +26,7 @@ export function buildMetadata(settings) {
     externalStyle,
     externalWidth,
     externalHeight,
+    error,
     ...embedSettings
   } = settings;
   const metadata = createSvgElement('metadata');

package/lib/translated/en-AU-x-unimelb/modules/rce/plugins/instructure_icon_maker/svg/settings.js

@@ -18,7 +18,6 @@
 import { useState, useEffect, useReducer } from 'react';
 import { svgSettings as svgSettingsReducer, defaultState } from '../reducers/svgSettings';
 import { ICON_MAKER_ATTRIBUTE, ICON_MAKER_DOWNLOAD_URL_ATTR, SVG_XML_TYPE } from './constants';
-import RceApiSource from '../../../../rcs/api';
 import { modes } from '../reducers/imageSection';
 import iconsLabels from '../utils/iconsLabels';
 export const statuses = {
@@ -50,17 +49,9 @@ const getImageNode = (editor, editing) => {
   return iconMaker;
 };
 
-const buildFilesUrl = (fileId, rcsConfig) => {
-  // http://canvas.docker/files/2169/download?download_frd=1&icon_maker_icon=1
-  const downloadURL = new URL(`${rcsConfig.canvasUrl}/files/${fileId}/download`); // Adding the Course ID to the request causes Canvas to follow the chain
-  // of files that were uploaded and "replaced" previous versions of the file.
-
-  downloadURL.searchParams.append('replacement_chain_context_type', 'course');
-  downloadURL.searchParams.append('replacement_chain_context_id', rcsConfig.contextId); // Prevent the browser from using an old cached SVGs
-
-  downloadURL.searchParams.append('ts', Date.now()); // Yes, we want do download for real dude
-
-  downloadURL.searchParams.append('download_frd', 1);
+const buildMetadataUrl = (fileId, rcsConfig) => {
+  // http://canvas.docker/api/v1/files/2169/icon_metadata
+  const downloadURL = new URL(`${rcsConfig.canvasUrl}/api/v1/files/${fileId}/icon_metadata`);
   return downloadURL.toString();
 };
 
@@ -78,26 +69,19 @@ export function useSvgSettings(editor, editing, rcsConfig) {
       if (!urlFromNode) return;
 
       try {
-        var _urlFromNode$split$, _svg$querySelector;
+        var _urlFromNode$split$;
 
         setStatus(statuses.LOADING); // Parse out the file ID from something like
         // /courses/1/files/3/preview?...
 
         const fileId = (_urlFromNode$split$ = urlFromNode.split('files/')[1]) === null || _urlFromNode$split$ === void 0 ? void 0 : _urlFromNode$split$.split('/')[0];
-        const downloadUrl = buildFilesUrl(fileId, rcsConfig); // Parse SVG. If no SVG found, return defaults
+        const downloadUrl = buildMetadataUrl(fileId, rcsConfig); // Download icon metadata. If no metadata found, return defaults
 
-        const svg = await svgFromUrl(downloadUrl);
-        if (!svg) return; // Parse metadata. If no metadata found, return defaults
-
-        const metadata = (_svg$querySelector = svg.querySelector('metadata')) === null || _svg$querySelector === void 0 ? void 0 : _svg$querySelector.innerHTML;
+        const response = await fetch(downloadUrl);
+        const metadata = await response.text();
         if (!metadata) return;
-        const rcs = new RceApiSource(rcsConfig);
-        const fileData = await rcs.getFile(fileId, {
-          replacement_chain_context_type: rcsConfig.contextType,
-          replacement_chain_context_id: rcsConfig.contextId
-        });
-        const fileName = fileData.name.replace(/\.[^\.]+$/, '');
         const metadataJson = JSON.parse(metadata);
+        const fileName = metadataJson.name.replace(/\.[^\.]+$/, '');
         metadataJson.name = fileName;
         metadataJson.originalName = fileName;
 
@@ -131,11 +115,6 @@ export function useSvgSettings(editor, editing, rcsConfig) {
   }, [editor, editing, urlFromNode, rcsConfig, altText, customWidth, customHeight, customStyle]);
   return [settings, status, dispatch];
 }
-export async function svgFromUrl(url) {
-  const response = await fetch(url);
-  const data = await response.text();
-  return new DOMParser().parseFromString(data, SVG_XML_TYPE);
-}
 
 function processMetadataForBackwardCompatibility(metadataJson) {
   var _metadataJson$imageSe, _metadataJson$imageSe2;

package/lib/translated/en-AU-x-unimelb/modules/rce/plugins/instructure_icon_maker/svg/text.js

@@ -16,7 +16,7 @@
  * 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 } from './constants';
+import { TEXT_BACKGROUND_PADDING, BASE_SIZE, TEXT_SIZE, MAX_CHAR_COUNT, Size, TEXT_SIZE_FONT_DIFF } from './constants';
 import { Shape } from './shape';
 export function buildText(_ref) {
   let {
@@ -28,15 +28,15 @@ export function buildText(_ref) {
     size
   } = _ref;
   if (!text.trim()) return null;
+  const lines = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]);
   const textElement = createSvgElement('text', {
     x: Math.max(TEXT_BACKGROUND_PADDING, Math.floor(getTextXValue(text, textSize, size))),
-    y: getTextYValue(textPosition, textSize, shape, size),
+    y: getTextYValue(textPosition, textSize, shape, size, lines.length),
     fill: textColor || '',
     'font-family': 'Lato Extended',
     'font-size': TEXT_SIZE[textSize],
     'font-weight': 'bold'
   });
-  const lines = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]);
   const containerWidth = getContainerWidth({
     text,
     textSize,
@@ -63,16 +63,18 @@ export function buildTextBackground(_ref2) {
     size
   } = _ref2;
   if (!text.trim()) return null;
+  const linesCount = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]).length;
   const xValue = getTextXValue(text, textSize, size);
-  const yValue = getTextYValue(textPosition, textSize, shape, size);
-  const textWidth = getTextWidth(text, textSize);
-  const textHeight = getTextHeight(text, textSize);
+  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 textHeight = getTextHeight(linesCount + 1, textSize);
   const paddingSize = TEXT_BACKGROUND_PADDING * 2;
   const pathElement = createSvgElement('path');
   const radius = 4;
   const fontWeight = 2;
   const initialX = Math.max(0, Math.floor(xValue - TEXT_BACKGROUND_PADDING)) + radius;
-  const initialY = Math.floor(yValue - TEXT_SIZE[textSize] - TEXT_BACKGROUND_PADDING / 2);
+  const initialY = Math.floor(yValue - TEXT_SIZE[textSize] + TEXT_SIZE_FONT_DIFF[textSize] - TEXT_BACKGROUND_PADDING / 2);
   const horizontalLineLength = Math.floor(textWidth + paddingSize + fontWeight) - radius * 2;
   const verticalLineLength = Math.floor(textHeight + paddingSize + fontWeight) - radius * 2;
   const d = `M${initialX},${initialY} h${horizontalLineLength} a${radius},${radius} 0 0 1 ${radius},${radius} v${verticalLineLength} a${radius},${radius} 0 0 1 ${-radius},${radius} h${-horizontalLineLength} a${radius},${radius} 0 0 1 ${-radius},${-radius} v${-verticalLineLength} a${radius},${radius} 0 0 1 ${radius},${-radius} z`;
@@ -105,9 +107,10 @@ export function getContainerHeight(_ref4) {
     return base;
   }
 
-  const textYValue = getTextYValue(textPosition, textSize, shape, size);
-  const extraTextHeight = getTextHeight(text, textSize) - TEXT_SIZE[textSize];
-  const textBackgroundHeight = textYValue + extraTextHeight + TEXT_BACKGROUND_PADDING * 2;
+  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);
 }
 
@@ -120,9 +123,10 @@ function getTextWidth(text, textSize) {
   return Math.max(...widths);
 }
 
-function getTextHeight(text, textSize) {
-  const linesCount = splitTextIntoLines(text, MAX_CHAR_COUNT[textSize]).length;
-  return linesCount * TEXT_SIZE[textSize];
+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) {
@@ -135,13 +139,23 @@ function getTextXValue(text, textSize, size) {
   return Math.floor((containerWidth - textWidth) * 0.5);
 }
 
-function getTextYValue(textPosition, textSize, shape, size) {
+function getTextYValue(textPosition, textSize, shape, size, linesCount) {
   switch (textPosition) {
     case 'middle':
-      return getYMiddleText(textSize, shape, size);
+      {
+        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':
-      return getYBottomThirdText(textSize, shape, size);
+      {
+        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);
@@ -228,16 +242,16 @@ function getYMiddleTextForShape(getYTextSizeCallback, shape, size) {
 function getYMiddleSmallTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 44;
+      return 43;
 
     case Size.Small:
-      return 68;
+      return 67;
 
     case Size.Medium:
-      return 86;
+      return 85;
 
     case Size.Large:
-      return 116;
+      return 115;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -247,16 +261,16 @@ function getYMiddleSmallTextForShape(size) {
 function getYMiddleMediumTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 45;
+      return 43;
 
     case Size.Small:
-      return 69;
+      return 67;
 
     case Size.Medium:
-      return 87;
+      return 85;
 
     case Size.Large:
-      return 117;
+      return 115;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -266,16 +280,16 @@ function getYMiddleMediumTextForShape(size) {
 function getYMiddleLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 48;
+      return 45;
 
     case Size.Small:
-      return 72;
+      return 69;
 
     case Size.Medium:
-      return 90;
+      return 87;
 
     case Size.Large:
-      return 120;
+      return 117;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -285,16 +299,16 @@ function getYMiddleLargeTextForShape(size) {
 function getYMiddleXLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 51;
+      return 47;
 
     case Size.Small:
-      return 75;
+      return 71;
 
     case Size.Medium:
-      return 93;
+      return 89;
 
     case Size.Large:
-      return 123;
+      return 119;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -304,16 +318,16 @@ function getYMiddleXLargeTextForShape(size) {
 function getYBottomThirdSmallTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 77;
+      return 73;
 
     case Size.Small:
-      return 125;
+      return 121;
 
     case Size.Medium:
-      return 161;
+      return 157;
 
     case Size.Large:
-      return 221;
+      return 217;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -323,16 +337,16 @@ function getYBottomThirdSmallTextForShape(size) {
 function getYBottomThirdMediumTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 78;
+      return 74;
 
     case Size.Small:
-      return 126;
+      return 122;
 
     case Size.Medium:
-      return 162;
+      return 158;
 
     case Size.Large:
-      return 222;
+      return 218;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -342,16 +356,16 @@ function getYBottomThirdMediumTextForShape(size) {
 function getYBottomThirdLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 81;
+      return 75;
 
     case Size.Small:
-      return 129;
+      return 123;
 
     case Size.Medium:
-      return 165;
+      return 159;
 
     case Size.Large:
-      return 225;
+      return 219;
 
     default:
       throw new Error(`Invalid size: ${size}`);
@@ -361,16 +375,16 @@ function getYBottomThirdLargeTextForShape(size) {
 function getYBottomThirdXLargeTextForShape(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return 84;
+      return 77;
 
     case Size.Small:
-      return 132;
+      return 125;
 
     case Size.Medium:
-      return 168;
+      return 161;
 
     case Size.Large:
-      return 228;
+      return 221;
 
     default:
       throw new Error(`Invalid size: ${size}`);

package/lib/translated/en-AU-x-unimelb/modules/rce/plugins/instructure_icon_maker/svg/utils.js

@@ -25,14 +25,15 @@ export function createSvgElement(tag) {
   return element;
 }
 export function splitTextIntoLines(text, maxChars) {
-  const trimmedText = text.trim();
+  // 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.split(' ');
+  const words = trimmedText.match(/\S+/g);
 
   while (words.length) {
     let newLineNeeded = false;

package/lib/translated/en-AU-x-unimelb/modules/rce/plugins/instructure_icon_maker/utils/IconMakerFormHasChanges.js

@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * 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 _ from 'lodash';
+export class IconMakerFormHasChanges {
+  constructor(initSettings, currSettings) {
+    this.initialSettings = void 0;
+    this.currentSettings = void 0;
+    this.initialSettings = initSettings;
+    this.currentSettings = currSettings;
+  }
+
+  hasNameChange() {
+    return 'name' in this.currentSettings && this.initialSettings.name !== this.currentSettings.name;
+  }
+
+  hasAltChange() {
+    return 'alt' in this.currentSettings && this.initialSettings.alt !== this.currentSettings.alt;
+  }
+
+  hasShapeNameChange() {
+    return 'shape' in this.currentSettings && this.initialSettings.shape !== this.currentSettings.shape;
+  }
+
+  hasShapeSizeChange() {
+    return 'size' in this.currentSettings && this.initialSettings.size !== this.currentSettings.size;
+  }
+
+  hasColorNameChange() {
+    return 'color' in this.currentSettings && this.initialSettings.color !== this.currentSettings.color;
+  }
+
+  hasOutlineSizeChange() {
+    return 'outlineSize' in this.currentSettings && this.initialSettings.outlineSize !== this.currentSettings.outlineSize;
+  }
+
+  hasOutlineColorChange() {
+    return 'outlineColor' in this.currentSettings && this.initialSettings.outlineColor !== this.currentSettings.outlineColor;
+  }
+
+  hasTextChange() {
+    return 'text' in this.currentSettings && this.initialSettings.text !== this.currentSettings.text;
+  }
+
+  hasTextSizeChange() {
+    return 'textSize' in this.currentSettings && this.initialSettings.textSize !== this.currentSettings.textSize;
+  }
+
+  hasTextColorChange() {
+    return 'textColor' in this.currentSettings && this.initialSettings.textColor !== this.currentSettings.textColor;
+  }
+
+  hasTextBackgroundColorChange() {
+    return 'textBackgroundColor' in this.currentSettings && this.initialSettings.textBackgroundColor !== this.currentSettings.textBackgroundColor;
+  }
+
+  hasTextPositionChange() {
+    return 'textPosition' in this.currentSettings && this.initialSettings.textPosition !== this.currentSettings.textPosition;
+  }
+
+  hasImageSettingsChange() {
+    return 'imageSettings' in this.currentSettings && !_.isEqual(this.initialSettings.imageSettings, this.currentSettings.imageSettings);
+  }
+
+  hasChanges() {
+    return this.hasNameChange() || this.hasAltChange() || this.hasShapeNameChange() || this.hasShapeSizeChange() || this.hasColorNameChange() || this.hasOutlineColorChange() || this.hasOutlineSizeChange() || this.hasTextChange() || this.hasTextSizeChange() || this.hasTextColorChange() || this.hasTextBackgroundColorChange() || this.hasTextPositionChange() || this.hasImageSettingsChange();
+  }
+
+}