@instructure/canvas-rce 5.14.1 → 5.14.2

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

@@ -15,12 +15,12 @@
  * 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,
@@ -28,19 +28,17 @@ const calculateImageHeight = _ref => {
   } = _ref;
   // 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;
   let imageAttributes;
-
   if (STOCK_IMAGE_TYPES.includes(settings.imageSettings.mode)) {
     imageAttributes = {
       x: settings.x,
@@ -63,7 +61,6 @@ export function buildImage(settings) {
       href: settings.embedImage
     };
   }
-
   const group = createSvgElement('g', {
     'clip-path': `url(#${CLIP_PATH_ID})`
   });
@@ -71,6 +68,7 @@ export function buildImage(settings) {
   group.appendChild(image);
   return group;
 }
+
 /**
  * Calculates the transformation props for a given
  * shape and size.
@@ -90,242 +88,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 +327,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';
@@ -25,44 +26,41 @@ import { buildText, buildTextBackground, getContainerWidth, getContainerHeight }
 import base64EncodedFont from './font';
 export function buildSvg(settings) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  settings = { ...DEFAULT_SETTINGS,
+  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);
@@ -110,13 +108,11 @@ export function buildGroup(_ref) {
   } = _ref;
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   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,36 +28,38 @@ 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 === null || editor === void 0 ? void 0 : (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _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);
@@ -69,16 +72,16 @@ export function useSvgSettings(editor, editing, canvasOrigin) {
   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$ = 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
+        const downloadUrl = buildMetadataUrl(fileId, canvasOrigin);
 
+        // Download icon metadata. If no metadata found, return defaults
         const response = await fetch(downloadUrl);
         const metadata = await response.text();
         if (!metadata) return;
@@ -86,28 +89,24 @@ 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) {
           const generatedSvg = await createCroppedImageSvg(imageSettings.cropperSettings, imageSettings.image);
           metadataJson.embedImage = await convertFileToBase64(new Blob([generatedSvg.outerHTML], {
@@ -115,64 +114,58 @@ export function useSvgSettings(editor, editing, canvasOrigin) {
           }));
         } else {
           metadataJson.embedImage = (imageSettings === null || imageSettings === void 0 ? void 0 : imageSettings.image) || defaultState.embedImage;
-        } // settings found, return parsed results
-
+        }
 
+        // 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;
-
   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
-
+  }
 
+  // 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;
-
   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
+  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;
-
   if (!imageSettingsImage && !imageSettingsIcon) {
     metadataJson.imageSettings = null;
-  } // Replaces cropper settings' shape using icon's shape
-
+  }
 
+  // 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;
-
   if (shape && cropperSettingsShape && shape !== cropperSettingsShape) {
     metadataJson.imageSettings.cropperSettings.shape = shape;
   }