@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/plugins/instructure_icon_maker/svg/image.js

@@ -15,32 +15,28 @@
  * 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 { CLIP_PATH_ID } from './clipPath';
 import { Shape } from './shape';
 import { Size, STROKE_WIDTH, BASE_SIZE, ICON_PADDING } from './constants';
 const STOCK_IMAGE_TYPES = ['SingleColor', 'MultiColor'];
-
-const calculateImageHeight = _ref => {
-  let {
-    size,
-    outlineSize
-  } = _ref;
+const calculateImageHeight = ({
+  size,
+  outlineSize
+}) => {
   // Subtract the padding at the top and the bottom
   // to get the true height of the shape in the icon
-  const iconHeightLessPadding = BASE_SIZE[size] - 2 * ICON_PADDING; // Shrink it by the size of the stroke width so the
-  // border doesn't cover parts of the cropped image
+  const iconHeightLessPadding = BASE_SIZE[size] - 2 * ICON_PADDING;
 
+  // Shrink it by the size of the stroke width so the
+  // border doesn't cover parts of the cropped image
   return iconHeightLessPadding - STROKE_WIDTH[outlineSize];
 };
-
 export function buildImage(settings) {
-  var _settings$imageSettin;
-
   // Don't attempt to embed an image if none exist
-  if (!((_settings$imageSettin = settings.imageSettings) !== null && _settings$imageSettin !== void 0 && _settings$imageSettin.image)) return;
+  if (!settings.imageSettings?.image) return;
   let imageAttributes;
-
   if (STOCK_IMAGE_TYPES.includes(settings.imageSettings.mode)) {
     imageAttributes = {
       x: settings.x,
@@ -63,7 +59,6 @@ export function buildImage(settings) {
       href: settings.embedImage
     };
   }
-
   const group = createSvgElement('g', {
     'clip-path': `url(#${CLIP_PATH_ID})`
   });
@@ -71,6 +66,7 @@ export function buildImage(settings) {
   group.appendChild(image);
   return group;
 }
+
 /**
  * Calculates the transformation props for a given
  * shape and size.
@@ -90,242 +86,232 @@ export function buildImage(settings) {
  *
  * @returns Transform
  */
-
 export function transformForShape(shape, size) {
   switch (shape) {
     case Shape.Pentagon:
       return transformForPentagon(size);
-
     case Shape.Triangle:
       return transformForTriangle(size);
-
     case Shape.Star:
       return transformForStar(size);
-
     case Shape.Square:
       return transformForSquare(size);
-
     case Shape.Circle:
       return transformForCircle(size);
-
     case Shape.Hexagon:
       return transformForHexagon(size);
-
     case Shape.Octagon:
       return transformForOctagon(size);
-
     case Shape.Diamond:
       return transformForDiamond(size);
-
     default:
       return transformForDefault(size);
   }
 }
-
 function transformForPentagon(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(40),
         y: '55%'
       };
-
     case Size.Small:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(80),
         y: '55%'
       };
-
     case Size.Medium:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(110),
         y: '55%'
       };
-
     case Size.Large:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(140),
         y: '55%'
       };
   }
 }
-
 function transformForTriangle(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(24),
         y: '65%'
       };
-
     case Size.Small:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(50),
         y: '65%'
       };
-
     case Size.Medium:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(80),
         y: '65%'
       };
-
     case Size.Large:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(112),
         y: '65%'
       };
   }
 }
-
 function transformForStar(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(8),
         y: '55%'
       };
-
     case Size.Small:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(24),
         y: '55%'
       };
-
     case Size.Medium:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(44),
         y: '55%'
       };
-
     case Size.Large:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(72),
         y: '55%'
       };
   }
 }
-
 function transformForSquare(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(60)
       };
-
     case Size.Small:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(108)
       };
-
     case Size.Medium:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(142)
       };
-
     case Size.Large:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(200)
       };
   }
 }
-
 function transformForCircle(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(54)
       };
-
     case Size.Small:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(100)
       };
-
     case Size.Medium:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(132)
       };
-
     case Size.Large:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(180)
       };
   }
 }
-
 function transformForHexagon(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(28)
       };
-
     case Size.Small:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(68)
       };
-
     case Size.Medium:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(100)
       };
-
     case Size.Large:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(160)
       };
   }
 }
-
 function transformForOctagon(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(36)
       };
-
     case Size.Small:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(80)
       };
-
     case Size.Medium:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(110)
       };
-
     case Size.Large:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(180)
       };
   }
 }
-
 function transformForDiamond(size) {
   switch (size) {
     case Size.ExtraSmall:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(30)
       };
-
     case Size.Small:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(60)
       };
-
     case Size.Medium:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(80)
       };
-
     case Size.Large:
-      return { ...transformForDefault(size),
+      return {
+        ...transformForDefault(size),
         ...dimensionAttrsFor(120)
       };
   }
 }
-
 function transformForDefault(size) {
   const dimensions = {
     [Size.ExtraSmall]: 60,
@@ -339,11 +325,9 @@ function transformForDefault(size) {
     ...dimensionAttrsFor(dimensions[size])
   };
 }
-
 function translationFor(width) {
   return width / 2 * -1;
 }
-
 function dimensionAttrsFor(width) {
   return {
     width,

package/es/rce/plugins/instructure_icon_maker/svg/index.js

@@ -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 { BASE_SIZE, DEFAULT_SETTINGS, STROKE_WIDTH } from './constants';
 import { createSvgElement } from './utils';
 import { buildMetadata } from './metadata';
@@ -23,46 +24,42 @@ import { buildImage } from './image';
 import { buildClipPath } from './clipPath';
 import { buildText, buildTextBackground, getContainerWidth, getContainerHeight } from './text';
 import base64EncodedFont from './font';
-export function buildSvg(settings) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  settings = { ...DEFAULT_SETTINGS,
+export function buildSvg(settings, options = {}) {
+  settings = {
+    ...DEFAULT_SETTINGS,
     ...settings
   };
   const mainContainer = buildSvgContainer(settings, options);
   const shapeWrapper = buildSvgWrapper(settings);
-
   if (!options.isPreview) {
     const metadata = buildMetadata(settings);
     mainContainer.appendChild(metadata);
   }
-
   const fillGroup = buildGroup(settings, {
     fill: true
   }); // The shape with the fill color
-
   const borderGroup = buildGroup(settings); // The shape with the outline and image
-
   const clipPath = buildClipPath(settings); // A clip path used to crop the image
-
   const shape = buildShape(settings); // The actual path of the shape being built
-
   const image = buildImage(settings); // The embedded image. Cropped by clipPath
+
   // Don't append an image if none has been selected
   // Also add image here so it sits beneath the outline,
   // which is added below to the borderGroup
-
   if (image) {
     borderGroup.appendChild(image);
   }
+  clipPath.appendChild(shape);
 
-  clipPath.appendChild(shape); // These are required to make the group have the right shape
-
-  fillGroup.appendChild(shape.cloneNode(true)); // These are required to make the group have the right shape
+  // These are required to make the group have the right shape
+  fillGroup.appendChild(shape.cloneNode(true));
 
+  // These are required to make the group have the right shape
   borderGroup.appendChild(clipPath.cloneNode(true));
-  borderGroup.appendChild(shape.cloneNode(true)); // Add fill group before the main group so the fill
-  // sits behind the image and outline
+  borderGroup.appendChild(shape.cloneNode(true));
 
+  // Add fill group before the main group so the fill
+  // sits behind the image and outline
   shapeWrapper.appendChild(fillGroup);
   shapeWrapper.appendChild(borderGroup);
   mainContainer.appendChild(shapeWrapper);
@@ -102,21 +99,17 @@ export function buildSvgContainer(settings, options) {
   if (options.isPreview) attributes.style = 'padding: 16px';
   return createSvgElement('svg', attributes);
 }
-export function buildGroup(_ref) {
-  let {
-    color,
-    outlineColor,
-    outlineSize
-  } = _ref;
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+export function buildGroup({
+  color,
+  outlineColor,
+  outlineSize
+}, options = {}) {
   const g = createSvgElement('g');
-
   if (options.fill) {
     g.setAttribute('fill', color || 'none');
   } else if (outlineColor) {
     g.setAttribute('stroke', outlineColor);
     g.setAttribute('stroke-width', STROKE_WIDTH[outlineSize]);
   }
-
   return g;
 }

package/es/rce/plugins/instructure_icon_maker/svg/metadata.js

@@ -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';
 export function buildMetadata(settings) {
   // Pull off any instance specific settings

package/es/rce/plugins/instructure_icon_maker/svg/settings.js

@@ -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 { useState, useEffect, useReducer } from 'react';
 import { svgSettings as svgSettingsReducer, defaultState } from '../reducers/svgSettings';
 import { ICON_MAKER_ATTRIBUTE, ICON_MAKER_DOWNLOAD_URL_ATTR } from './constants';
@@ -27,58 +28,58 @@ export const statuses = {
   LOADING: 'loading',
   IDLE: 'idle'
 };
-
 const getImageNode = (editor, editing) => {
-  var _editor$selection;
-
   // If the user is creating an icon rather then editing, no sense trying
   // to get an existing SVG URL
   if (!editing) return;
-  const selectedNode = editor === null || editor === void 0 ? void 0 : (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.getNode(); // No selection made, return
+  const selectedNode = editor?.selection?.getNode();
 
-  if (!selectedNode) return; // The icon maker image is selected. return it
+  // No selection made, return
+  if (!selectedNode) return;
 
-  if (selectedNode.getAttribute(ICON_MAKER_ATTRIBUTE)) return selectedNode; // The icon maker image element is not selected, but it's possible
+  // The icon maker image is selected. return it
+  if (selectedNode.getAttribute(ICON_MAKER_ATTRIBUTE)) return selectedNode;
+
+  // The icon maker image element is not selected, but it's possible
   // an element wrapping it is. Look for a icon maker image in the
   // selection's children
+  const iconMaker = selectedNode.querySelector(`img[${ICON_MAKER_ATTRIBUTE}="true"]`);
 
-  const iconMaker = selectedNode.querySelector(`img[${ICON_MAKER_ATTRIBUTE}="true"]`); // Icon maker still not found in the selection's children. Return
+  // Icon maker still not found in the selection's children. Return
+  if (!iconMaker) return;
 
-  if (!iconMaker) return; // Icon maker found in the selections children. Return it and set the
+  // Icon maker found in the selections children. Return it and set the
   // editor's selection to it as well
-
   editor.selection.select(iconMaker);
   return iconMaker;
 };
-
 const buildMetadataUrl = (fileId, canvasOrigin) => {
   // http://canvas.docker/api/v1/files/2169/icon_metadata
+
   const downloadURL = new URL(`${canvasOrigin}/api/v1/files/${fileId}/icon_metadata`);
   return downloadURL.toString();
 };
-
 export function useSvgSettings(editor, editing, canvasOrigin) {
   const [settings, dispatch] = useReducer(svgSettingsReducer, defaultState);
   const [status, setStatus] = useState(statuses.IDLE);
   const imgNode = getImageNode(editor, editing);
-  const urlFromNode = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute(ICON_MAKER_DOWNLOAD_URL_ATTR);
-  const altText = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('alt');
-  const customStyle = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('style');
-  const customWidth = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('width');
-  const customHeight = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('height');
+  const urlFromNode = imgNode?.getAttribute(ICON_MAKER_DOWNLOAD_URL_ATTR);
+  const altText = imgNode?.getAttribute('alt');
+  const customStyle = imgNode?.getAttribute('style');
+  const customWidth = imgNode?.getAttribute('width');
+  const customHeight = imgNode?.getAttribute('height');
   useEffect(() => {
     const fetchSvgSettings = async () => {
       if (!urlFromNode) return;
-
       try {
-        var _urlFromNode$split$;
+        setStatus(statuses.LOADING);
 
-        setStatus(statuses.LOADING); // Parse out the file ID from something like
+        // Parse out the file ID from something like
         // /courses/1/files/3/preview?...
+        const fileId = urlFromNode.split('files/')[1]?.split('/')[0];
+        const downloadUrl = buildMetadataUrl(fileId, canvasOrigin);
 
-        const fileId = (_urlFromNode$split$ = urlFromNode.split('files/')[1]) === null || _urlFromNode$split$ === void 0 ? void 0 : _urlFromNode$split$.split('/')[0];
-        const downloadUrl = buildMetadataUrl(fileId, canvasOrigin); // Download icon metadata. If no metadata found, return defaults
-
+        // Download icon metadata. If no metadata found, return defaults
         const response = await fetch(downloadUrl);
         const metadata = await response.text();
         if (!metadata) return;
@@ -86,93 +87,82 @@ export function useSvgSettings(editor, editing, canvasOrigin) {
         const fileName = metadataJson.name.replace(/\.[^\.]+$/, '');
         metadataJson.name = fileName;
         metadataJson.originalName = fileName;
-
         if (altText === '') {
           metadataJson.isDecorative = true;
         } else if (altText) {
           metadataJson.alt = altText;
-        } // Include external details on metadata
-
+        }
 
+        // Include external details on metadata
         if (customWidth && customHeight) {
           metadataJson.externalWidth = customWidth;
           metadataJson.externalHeight = customHeight;
         }
-
         if (customStyle) {
           metadataJson.externalStyle = customStyle;
         }
-
         processMetadataForBackwardCompatibility(metadataJson);
         const {
           imageSettings
         } = metadataJson;
-
-        if (imageSettings !== null && imageSettings !== void 0 && imageSettings.cropperSettings) {
+        if (imageSettings?.cropperSettings) {
           const generatedSvg = await createCroppedImageSvg(imageSettings.cropperSettings, imageSettings.image);
           metadataJson.embedImage = await convertFileToBase64(new Blob([generatedSvg.outerHTML], {
             type: 'image/svg+xml'
           }));
         } else {
-          metadataJson.embedImage = (imageSettings === null || imageSettings === void 0 ? void 0 : imageSettings.image) || defaultState.embedImage;
-        } // settings found, return parsed results
-
+          metadataJson.embedImage = imageSettings?.image || defaultState.embedImage;
+        }
 
+        // settings found, return parsed results
         dispatch(metadataJson);
         setStatus(statuses.IDLE);
       } catch (e) {
         setStatus(statuses.ERROR);
       }
-    }; // If we are editing rather than creating, fetch existing settings
-
+    };
 
+    // If we are editing rather than creating, fetch existing settings
     if (editing) fetchSvgSettings();
   }, [editor, editing, urlFromNode, canvasOrigin, altText, customWidth, customHeight, customStyle]);
   return [settings, status, dispatch];
 }
-
 function processMetadataForBackwardCompatibility(metadataJson) {
-  var _metadataJson$imageSe, _metadataJson$imageSe2, _metadataJson$imageSe3, _metadataJson$imageSe4, _metadataJson$imageSe5, _metadataJson$imageSe6, _metadataJson$imageSe7, _metadataJson$imageSe8;
-
-  const icon = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe = metadataJson.imageSettings) === null || _metadataJson$imageSe === void 0 ? void 0 : _metadataJson$imageSe.icon;
-  const mode = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe2 = metadataJson.imageSettings) === null || _metadataJson$imageSe2 === void 0 ? void 0 : _metadataJson$imageSe2.mode;
-
+  const icon = metadataJson?.imageSettings?.icon;
+  const mode = metadataJson?.imageSettings?.mode;
   if (mode === modes.singleColorImages.type && typeof icon === 'object') {
     const foundIconId = iconsLabels[icon.label];
-
     if (foundIconId) {
       metadataJson.imageSettings.icon = foundIconId;
     } else {
       metadataJson.imageSettings = null;
     }
-  } // On old icons we stored the original image inside cropper settings
-  // If that's the case we are copying it to the correct place
-
-
-  const cropperSettingsImage = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe3 = metadataJson.imageSettings) === null || _metadataJson$imageSe3 === void 0 ? void 0 : (_metadataJson$imageSe4 = _metadataJson$imageSe3.cropperSettings) === null || _metadataJson$imageSe4 === void 0 ? void 0 : _metadataJson$imageSe4.image;
-  const imageSettingsImage = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe5 = metadataJson.imageSettings) === null || _metadataJson$imageSe5 === void 0 ? void 0 : _metadataJson$imageSe5.image;
-  const encodedImage = metadataJson === null || metadataJson === void 0 ? void 0 : metadataJson.encodedImage;
+  }
 
+  // On old icons we stored the original image inside cropper settings
+  // If that's the case we are copying it to the correct place
+  const cropperSettingsImage = metadataJson?.imageSettings?.cropperSettings?.image;
+  const imageSettingsImage = metadataJson?.imageSettings?.image;
+  const encodedImage = metadataJson?.encodedImage;
   if (imageSettingsImage && cropperSettingsImage && imageSettingsImage !== cropperSettingsImage) {
     metadataJson.imageSettings.image = cropperSettingsImage || imageSettingsImage || encodedImage || '';
     delete metadataJson.imageSettings.cropperSettings.image;
-  } // Removes old and unused encoded image fields from metadata
-
+  }
 
+  // Removes old and unused encoded image fields from metadata
   delete metadataJson.encodedImage;
   delete metadataJson.encodedImageType;
-  delete metadataJson.encodedImageName; // Cleans image settings if there is no image or icon
-
-  const imageSettingsIcon = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe6 = metadataJson.imageSettings) === null || _metadataJson$imageSe6 === void 0 ? void 0 : _metadataJson$imageSe6.icon;
+  delete metadataJson.encodedImageName;
 
+  // Cleans image settings if there is no image or icon
+  const imageSettingsIcon = metadataJson?.imageSettings?.icon;
   if (!imageSettingsImage && !imageSettingsIcon) {
     metadataJson.imageSettings = null;
-  } // Replaces cropper settings' shape using icon's shape
-
-
-  const cropperSettingsShape = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe7 = metadataJson.imageSettings) === null || _metadataJson$imageSe7 === void 0 ? void 0 : (_metadataJson$imageSe8 = _metadataJson$imageSe7.cropperSettings) === null || _metadataJson$imageSe8 === void 0 ? void 0 : _metadataJson$imageSe8.shape;
-  const shape = metadataJson === null || metadataJson === void 0 ? void 0 : metadataJson.shape;
+  }
 
+  // Replaces cropper settings' shape using icon's shape
+  const cropperSettingsShape = metadataJson?.imageSettings?.cropperSettings?.shape;
+  const shape = metadataJson?.shape;
   if (shape && cropperSettingsShape && shape !== cropperSettingsShape) {
     metadataJson.imageSettings.cropperSettings.shape = shape;
   }