@instructure/canvas-rce 5.11.1 → 5.12.2

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

@@ -1,354 +0,0 @@
-/*
- * Copyright (C) 2021 - 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 { 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;
-  // 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
-
-  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,
-      y: settings.y,
-      transform: settings.transform,
-      width: settings.width,
-      height: settings.height,
-      href: settings.embedImage
-    };
-  } else {
-    // we need to embed the encoded image
-    const squareHeight = calculateImageHeight(settings);
-    const translation = translationFor(squareHeight);
-    imageAttributes = {
-      x: '50%',
-      y: '50%',
-      transform: `translate(${translation}, ${translation})`,
-      width: squareHeight,
-      height: squareHeight,
-      href: settings.embedImage
-    };
-  }
-
-  const group = createSvgElement('g', {
-    'clip-path': `url(#${CLIP_PATH_ID})`
-  });
-  const image = createSvgElement('image', imageAttributes);
-  group.appendChild(image);
-  return group;
-}
-/**
- * Calculates the transformation props for a given
- * shape and size.
- *
- * A Transform takes the following shape:
- * {
- *   x: string,
- *   y: string,
- *   width: number,
- *   height: number,
- *   translateX: number,
- *   translateY: number
- * }
- *
- * @param {Shape} shape
- * @param {Size} size
- *
- * @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),
-        ...dimensionAttrsFor(40),
-        y: '55%'
-      };
-
-    case Size.Small:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(80),
-        y: '55%'
-      };
-
-    case Size.Medium:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(110),
-        y: '55%'
-      };
-
-    case Size.Large:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(140),
-        y: '55%'
-      };
-  }
-}
-
-function transformForTriangle(size) {
-  switch (size) {
-    case Size.ExtraSmall:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(24),
-        y: '65%'
-      };
-
-    case Size.Small:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(50),
-        y: '65%'
-      };
-
-    case Size.Medium:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(80),
-        y: '65%'
-      };
-
-    case Size.Large:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(112),
-        y: '65%'
-      };
-  }
-}
-
-function transformForStar(size) {
-  switch (size) {
-    case Size.ExtraSmall:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(8),
-        y: '55%'
-      };
-
-    case Size.Small:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(24),
-        y: '55%'
-      };
-
-    case Size.Medium:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(44),
-        y: '55%'
-      };
-
-    case Size.Large:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(72),
-        y: '55%'
-      };
-  }
-}
-
-function transformForSquare(size) {
-  switch (size) {
-    case Size.ExtraSmall:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(60)
-      };
-
-    case Size.Small:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(108)
-      };
-
-    case Size.Medium:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(142)
-      };
-
-    case Size.Large:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(200)
-      };
-  }
-}
-
-function transformForCircle(size) {
-  switch (size) {
-    case Size.ExtraSmall:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(54)
-      };
-
-    case Size.Small:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(100)
-      };
-
-    case Size.Medium:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(132)
-      };
-
-    case Size.Large:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(180)
-      };
-  }
-}
-
-function transformForHexagon(size) {
-  switch (size) {
-    case Size.ExtraSmall:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(28)
-      };
-
-    case Size.Small:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(68)
-      };
-
-    case Size.Medium:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(100)
-      };
-
-    case Size.Large:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(160)
-      };
-  }
-}
-
-function transformForOctagon(size) {
-  switch (size) {
-    case Size.ExtraSmall:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(36)
-      };
-
-    case Size.Small:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(80)
-      };
-
-    case Size.Medium:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(110)
-      };
-
-    case Size.Large:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(180)
-      };
-  }
-}
-
-function transformForDiamond(size) {
-  switch (size) {
-    case Size.ExtraSmall:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(30)
-      };
-
-    case Size.Small:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(60)
-      };
-
-    case Size.Medium:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(80)
-      };
-
-    case Size.Large:
-      return { ...transformForDefault(size),
-        ...dimensionAttrsFor(120)
-      };
-  }
-}
-
-function transformForDefault(size) {
-  const dimensions = {
-    [Size.ExtraSmall]: 60,
-    [Size.Small]: 75,
-    [Size.Medium]: 80,
-    [Size.Large]: 110
-  };
-  return {
-    x: '50%',
-    y: '50%',
-    ...dimensionAttrsFor(dimensions[size])
-  };
-}
-
-function translationFor(width) {
-  return width / 2 * -1;
-}
-
-function dimensionAttrsFor(width) {
-  return {
-    width,
-    height: width,
-    translateX: translationFor(width),
-    translateY: translationFor(width)
-  };
-}

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

@@ -1,122 +0,0 @@
-/*
- * Copyright (C) 2021 - 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 { BASE_SIZE, DEFAULT_SETTINGS, STROKE_WIDTH } from './constants';
-import { createSvgElement } from './utils';
-import { buildMetadata } from './metadata';
-import { buildShape } from './shape';
-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,
-    ...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); // 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
-
-  shapeWrapper.appendChild(fillGroup);
-  shapeWrapper.appendChild(borderGroup);
-  mainContainer.appendChild(shapeWrapper);
-  const textBackground = buildTextBackground(settings);
-  if (textBackground) mainContainer.appendChild(textBackground);
-  const text = buildText(settings);
-  if (text) mainContainer.appendChild(text);
-  return mainContainer;
-}
-export function buildStylesheet() {
-  const stylesheet = document.createElement('style');
-  const css = `@font-face {font-family: "Lato Extended";font-weight: bold;src: url(${base64EncodedFont()});}`;
-  stylesheet.setAttribute('type', 'text/css');
-  stylesheet.appendChild(document.createTextNode(css));
-  return stylesheet;
-}
-export function buildSvgWrapper(settings) {
-  const base = BASE_SIZE[settings.size];
-  return createSvgElement('svg', {
-    fill: 'none',
-    height: `${base}px`,
-    viewBox: `0 0 ${base} ${base}`,
-    width: `${base}px`,
-    x: Math.floor((getContainerWidth(settings) - base) * 0.5)
-  });
-}
-export function buildSvgContainer(settings, options) {
-  const containerWidth = getContainerWidth(settings);
-  const containerHeight = getContainerHeight(settings);
-  const attributes = {
-    fill: 'none',
-    width: `${containerWidth}px`,
-    height: `${containerHeight}px`,
-    viewBox: `0 0 ${containerWidth} ${containerHeight}`,
-    xmlns: 'http://www.w3.org/2000/svg'
-  };
-  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] : {};
-  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/lib/rce/plugins/instructure_icon_maker/svg/metadata.js

@@ -1,48 +0,0 @@
-/*
- * Copyright (C) 2021 - 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 { createSvgElement } from './utils';
-export function buildMetadata(settings) {
-  // Pull off any instance specific settings
-  const {
-    name,
-    originalName,
-    alt,
-    isDecorative,
-    externalStyle,
-    externalWidth,
-    externalHeight,
-    x,
-    y,
-    translateX,
-    translateY,
-    width,
-    height,
-    transform,
-    embedImage,
-    error,
-    ...embedSettings
-  } = settings;
-  const metadata = createSvgElement('metadata');
-  metadata.textContent = JSON.stringify(embedSettings);
-  return metadata;
-}
-export function parseMetadata(svg) {
-  const metadata = svg.querySelector('metadata');
-  if (!metadata) return null;
-  return JSON.parse(metadata.textContent);
-}

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

@@ -1,179 +0,0 @@
-/*
- * Copyright (C) 2021 - 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 { useState, useEffect, useReducer } from 'react';
-import { svgSettings as svgSettingsReducer, defaultState } from '../reducers/svgSettings';
-import { ICON_MAKER_ATTRIBUTE, ICON_MAKER_DOWNLOAD_URL_ATTR } from './constants';
-import { modes } from '../reducers/imageSection';
-import iconsLabels from '../utils/iconsLabels';
-import { createCroppedImageSvg } from '../../shared/ImageCropper/imageCropUtils';
-import { convertFileToBase64 } from '../../shared/fileUtils';
-export const statuses = {
-  ERROR: 'error',
-  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
-
-  if (!selectedNode) return; // 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"]`); // Icon maker still not found in the selection's children. Return
-
-  if (!iconMaker) return; // 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');
-  useEffect(() => {
-    const fetchSvgSettings = async () => {
-      if (!urlFromNode) return;
-
-      try {
-        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 = 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;
-        const metadataJson = JSON.parse(metadata);
-        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
-
-
-        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], {
-            type: 'image/svg+xml'
-          }));
-        } else {
-          metadataJson.embedImage = (imageSettings === null || imageSettings === void 0 ? void 0 : 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 (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
-
-
-  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
-
-
-  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;
-
-  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;
-
-  if (shape && cropperSettingsShape && shape !== cropperSettingsShape) {
-    metadataJson.imageSettings.cropperSettings.shape = shape;
-  }
-}