@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/plugins/instructure_icon_maker/reducers/imageSection.js

@@ -1,194 +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 formatMessage from '../../../../format-message';
-export const initialState = {
-  mode: '',
-  image: '',
-  imageName: '',
-  icon: '',
-  iconFillColor: '#000000',
-  collectionOpen: false,
-  loading: false,
-  error: undefined,
-  cropperOpen: false,
-  cropperSettings: null,
-  compressed: false
-};
-export const actions = {
-  RESET_ALL: {
-    type: 'ResetAll'
-  },
-  SET_IMAGE: {
-    type: 'SetImage'
-  },
-  SET_IMAGE_NAME: {
-    type: 'SetImageName'
-  },
-  SET_COMPRESSION_STATUS: {
-    type: 'SetCompressionStatus'
-  },
-  CLEAR_IMAGE: {
-    type: 'ClearImage'
-  },
-  SET_ICON: {
-    type: 'SetIcon'
-  },
-  SET_ICON_FILL_COLOR: {
-    type: 'SetIconFillColor'
-  },
-  SET_IMAGE_COLLECTION_OPEN: {
-    type: 'SetImageCollectionOpen'
-  },
-  START_LOADING: {
-    type: 'StartLoading'
-  },
-  STOP_LOADING: {
-    type: 'StopLoading'
-  },
-  CLEAR_MODE: {
-    type: 'ClearMode'
-  },
-  UPDATE_SETTINGS: {
-    type: 'UpdateSettings'
-  },
-  SET_CROPPER_OPEN: {
-    type: 'SetCropperOpen'
-  },
-  SET_CROPPER_SETTINGS: {
-    type: 'SetCropperSettings'
-  }
-};
-export const modes = {
-  courseImages: {
-    type: 'Course',
-    label: formatMessage('Course Images')
-  },
-  uploadImages: {
-    type: 'Upload',
-    label: formatMessage('Upload Image')
-  },
-  singleColorImages: {
-    type: 'SingleColor',
-    label: formatMessage('Single Color Image')
-  },
-  multiColorImages: {
-    type: 'MultiColor',
-    label: formatMessage('Multi Color Image')
-  }
-};
-
-const imageSection = (state, action) => {
-  switch (action.type) {
-    case actions.START_LOADING.type:
-      return { ...state,
-        loading: true
-      };
-
-    case actions.STOP_LOADING.type:
-      return { ...state,
-        loading: false
-      };
-
-    case actions.SET_IMAGE.type:
-      return { ...state,
-        image: action.payload
-      };
-
-    case actions.SET_IMAGE_NAME.type:
-      return { ...state,
-        imageName: action.payload
-      };
-
-    case actions.SET_COMPRESSION_STATUS.type:
-      return { ...state,
-        compressed: action.payload
-      };
-
-    case actions.CLEAR_IMAGE.type:
-      return { ...state,
-        image: '',
-        imageName: '',
-        compressed: false
-      };
-
-    case actions.SET_ICON.type:
-      return { ...state,
-        icon: action.payload
-      };
-
-    case actions.SET_ICON_FILL_COLOR.type:
-      return { ...state,
-        iconFillColor: action.payload
-      };
-
-    case actions.CLEAR_MODE.type:
-      return { ...state,
-        mode: ''
-      };
-
-    case actions.SET_IMAGE_COLLECTION_OPEN.type:
-      return { ...state,
-        collectionOpen: action.payload
-      };
-
-    case actions.RESET_ALL.type:
-      return { ...state,
-        ...initialState
-      };
-
-    case modes.uploadImages.type:
-      return { ...state,
-        mode: modes.uploadImages.type
-      };
-
-    case modes.singleColorImages.type:
-      return { ...state,
-        mode: modes.singleColorImages.type
-      };
-
-    case modes.multiColorImages.type:
-      return { ...state,
-        mode: modes.multiColorImages.type
-      };
-
-    case modes.courseImages.type:
-      return { ...state,
-        mode: modes.courseImages.type
-      };
-
-    case actions.UPDATE_SETTINGS.type:
-      return { ...state,
-        ...action.payload
-      };
-
-    case actions.SET_CROPPER_OPEN.type:
-      return { ...state,
-        cropperOpen: action.payload
-      };
-
-    case actions.SET_CROPPER_SETTINGS.type:
-      return { ...state,
-        cropperSettings: action.payload
-      };
-
-    default:
-      throw Error('Unknown action for image selection reducer');
-  }
-};
-
-export default imageSection;

package/lib/rce/plugins/instructure_icon_maker/reducers/svgSettings.js

@@ -1,98 +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 { DEFAULT_SETTINGS } from '../svg/constants';
-export const defaultState = DEFAULT_SETTINGS;
-export const actions = {
-  SET_IMAGE_SETTINGS: 'SetImageSettings',
-  SET_EMBED_IMAGE: 'SetEmbedImage',
-  SET_X: 'SetX',
-  SET_Y: 'SetY',
-  SET_TRANSLATE_X: 'SetTranslateX',
-  SET_TRANSLATE_Y: 'SetTranslateY',
-  SET_WIDTH: 'SetWidth',
-  SET_HEIGHT: 'SetHeight',
-  SET_ERROR: 'SetError'
-};
-
-const buildTransformString = state => {
-  // All transforms that may be applied to an image
-  return [`translate(${state.translateX},${state.translateY})`].join(' ');
-};
-
-const nextStateForTransform = (currentState, transformProp, value) => {
-  // Set the transform property that actually changed
-  let nextState = { ...currentState,
-    [transformProp]: value
-  }; // Regenerate the new "transform" string, taking into account the transform
-  // property value that was updated
-
-  nextState = { ...nextState,
-    transform: buildTransformString(nextState)
-  };
-  return nextState;
-};
-
-export const svgSettings = (state, action) => {
-  switch (action.type) {
-    case actions.SET_IMAGE_SETTINGS:
-      return { ...state,
-        imageSettings: action.payload
-      };
-
-    case actions.SET_EMBED_IMAGE:
-      return { ...state,
-        embedImage: action.payload
-      };
-
-    case actions.SET_X:
-      return { ...state,
-        x: action.payload
-      };
-
-    case actions.SET_Y:
-      return { ...state,
-        y: action.payload
-      };
-
-    case actions.SET_WIDTH:
-      return { ...state,
-        width: action.payload
-      };
-
-    case actions.SET_HEIGHT:
-      return { ...state,
-        height: action.payload
-      };
-
-    case actions.SET_ERROR:
-      return { ...state,
-        error: action.payload
-      };
-
-    case actions.SET_TRANSLATE_X:
-      return nextStateForTransform(state, 'translateX', action.payload);
-
-    case actions.SET_TRANSLATE_Y:
-      return nextStateForTransform(state, 'translateY', action.payload);
-
-    default:
-      return { ...state,
-        ...action
-      };
-  }
-};

package/lib/rce/plugins/instructure_icon_maker/registerEditToolbar.js

@@ -1,56 +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 formatMessage from '../../../format-message';
-import { BUTTON_ID, TOOLBAR_ID, ICON_MAKER_ATTRIBUTE } from './svg/constants';
-import TrayController from '../instructure_image/ImageOptionsTray/TrayController';
-export const shouldShowEditButton = node => !!(node !== null && node !== void 0 && node.getAttribute(ICON_MAKER_ATTRIBUTE));
-export const EDIT_ALT_TEXT_BUTTON_ID = 'inst-icon-maker-edit-alt-text';
-const trayController = new TrayController();
-export default function registerEditToolbar(editor, onAction) {
-  addButton(editor, onAction);
-  addAltTextButton(editor);
-  addContextToolbar(editor);
-}
-
-function addButton(editor, onAction) {
-  editor.ui.registry.addButton(BUTTON_ID, {
-    onAction,
-    text: formatMessage('Edit Icon'),
-    tooltip: formatMessage('Edit Existing Icon Maker Icon')
-  });
-}
-
-function addAltTextButton(editor) {
-  editor.ui.registry.addButton(EDIT_ALT_TEXT_BUTTON_ID, {
-    onAction: () => {
-      // show the Image Options tray
-      trayController.showTrayForEditor(editor, true);
-    },
-    text: formatMessage('Icon Options'),
-    tooltip: formatMessage('Edit alt text for this icon instance')
-  });
-}
-
-function addContextToolbar(editor) {
-  editor.ui.registry.addContextToolbar(TOOLBAR_ID, {
-    items: `${BUTTON_ID} ${EDIT_ALT_TEXT_BUTTON_ID}`,
-    position: 'node',
-    scope: 'node',
-    predicate: shouldShowEditButton
-  });
-}

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

@@ -1,25 +0,0 @@
-/*
- * 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 { createSvgElement } from './utils';
-export const CLIP_PATH_ID = 'clip-path-for-embed';
-export function buildClipPath() {
-  const clipPath = createSvgElement('clipPath', {
-    id: CLIP_PATH_ID
-  });
-  return clipPath;
-}

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

@@ -1,100 +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/>.
- */
-export const TYPE = 'image/svg+xml-icon-maker-icons'; // New constants added to centralize imports
-
-export const BUTTON_ID = 'inst-icon-maker-edit';
-export const TOOLBAR_ID = 'inst-icon-maker-edit-toolbar';
-export const ICON_MAKER_ATTRIBUTE = 'data-inst-icon-maker-icon';
-export const ICON_MAKER_DOWNLOAD_URL_ATTR = 'data-download-url';
-export const ICON_MAKER_ICONS = 'icon_maker_icons';
-export const ICON_MAKER_PARAM = 'icon_maker_icon'; // different definitions for filetypes
-
-export const SVG_XML_TYPE = 'image/svg+xml';
-export const SVG_TYPE = 'image/svg';
-export const Size = {
-  None: 'none',
-  ExtraSmall: 'x-small',
-  Small: 'small',
-  Medium: 'medium',
-  Large: 'large',
-  ExtraLarge: 'x-large'
-};
-export const DEFAULT_SETTINGS = {
-  // Basic  icon maker settings
-  type: TYPE,
-  alt: '',
-  isDecorative: false,
-  shape: 'square',
-  size: Size.Small,
-  color: null,
-  outlineColor: '#000000',
-  outlineSize: Size.None,
-  text: '',
-  textSize: Size.Small,
-  textColor: '#000000',
-  textBackgroundColor: null,
-  textPosition: 'below',
-  // Additional external attributes
-  externalStyle: null,
-  externalWidth: null,
-  externalHeight: null,
-  // Embedded image crop settings
-  x: 0,
-  y: 0,
-  translateX: 0,
-  translateY: 0,
-  width: 0,
-  height: 0,
-  transform: '',
-  imageSettings: null,
-  embedImage: null,
-  error: null
-};
-export const BASE_SIZE = {
-  [Size.ExtraSmall]: 74,
-  [Size.Small]: 122,
-  [Size.Medium]: 158,
-  [Size.Large]: 218
-};
-export const STROKE_WIDTH = {
-  [Size.None]: 0,
-  [Size.Small]: 2,
-  [Size.Medium]: 4,
-  [Size.Large]: 8
-};
-export const TEXT_SIZE = {
-  [Size.Small]: 14,
-  [Size.Medium]: 16,
-  [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,
-  [Size.Large]: 13,
-  [Size.ExtraLarge]: 10
-};
-export const MAX_TOTAL_TEXT_CHARS = 32;
-export const TEXT_BACKGROUND_PADDING = 4;
-export const ICON_PADDING = 4;