@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/plugins/shared/ImageCropper/controls/useDebouncedNumericValue.js

@@ -1,94 +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 { useEffect, useRef, useState } from 'react';
-import { debounce } from '@instructure/debounce';
-const CHANGE_EVENT_DELAY = 1000;
-
-const digestValue = _ref => {
-  let {
-    parseValueCallback,
-    processValueCallback,
-    formatValueCallback,
-    value
-  } = _ref;
-  const parsedNewValue = parseValueCallback(value);
-
-  if (parsedNewValue === null) {
-    return [null, null];
-  }
-
-  const processedNewValue = processValueCallback(parsedNewValue);
-  const formattedNewTempValue = formatValueCallback(processedNewValue);
-  return [formattedNewTempValue, processedNewValue];
-};
-
-export function useDebouncedNumericValue(_ref2) {
-  let {
-    value,
-    parseValueCallback,
-    processValueCallback,
-    formatValueCallback,
-    onChange
-  } = _ref2;
-  const [inputValue, setInputValue] = useState(formatValueCallback(value));
-  const [hasError, setHasError] = useState(false);
-
-  const updateStateAfterDigest = newValue => {
-    const [formattedValue, processedValue] = digestValue({
-      parseValueCallback,
-      processValueCallback,
-      formatValueCallback,
-      value: newValue
-    });
-
-    if (formattedValue === null || processedValue === null) {
-      setHasError(true);
-      return;
-    }
-
-    setHasError(false);
-
-    if (newValue !== formattedValue) {
-      setInputValue(formattedValue);
-    }
-
-    if (processedValue !== value) {
-      onChange(processedValue);
-    }
-  };
-
-  const debouncedUpdateStateAfterDigest = useRef(debounce(updateStateAfterDigest, CHANGE_EVENT_DELAY));
-  useEffect(() => {
-    const newTempValue = formatValueCallback(value);
-
-    if (newTempValue !== inputValue) {
-      setInputValue(newTempValue);
-      setHasError(false);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [value]);
-
-  const digestCurrentValue = () => updateStateAfterDigest(inputValue);
-
-  const digestNewValue = rawValue => {
-    setInputValue(rawValue);
-    debouncedUpdateStateAfterDigest.current(rawValue);
-  };
-
-  return [inputValue, digestCurrentValue, digestNewValue, hasError];
-}

package/lib/rce/plugins/shared/ImageCropper/controls/utils.js

@@ -1,41 +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 { BUTTON_ROTATION_DEGREES, MAX_SCALE_RATIO, MIN_SCALE_RATIO } from '../constants';
-import round from '../../round';
-export const calculateScaleRatio = scaleRatio => {
-  let result = round(scaleRatio);
-  result = result > MAX_SCALE_RATIO ? MAX_SCALE_RATIO : result;
-  result = result < MIN_SCALE_RATIO ? MIN_SCALE_RATIO : result;
-  return result;
-};
-export const calculateScalePercentage = scalePercentage => {
-  const result = calculateScaleRatio(scalePercentage / 100);
-  return round(result * 100, 0);
-};
-export const calculateRotation = rotationAngle => {
-  const simplifiedRotationAngle = round(rotationAngle % 360);
-
-  if (Math.abs(rotationAngle) >= 360) {
-    return simplifiedRotationAngle;
-  }
-
-  return rotationAngle;
-};
-export const getNearestRectAngle = (rotationAngle, shouldRotateToLeft) => {
-  return shouldRotateToLeft ? Math.ceil(rotationAngle / BUTTON_ROTATION_DEGREES) * 90 : Math.floor(rotationAngle / BUTTON_ROTATION_DEGREES) * 90;
-};

package/lib/rce/plugins/shared/ImageCropper/imageCropUtils.js

@@ -1,149 +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 round from '../round';
-import { buildShapeMask } from './svg/shape';
-import { createSvgElement } from './svg/utils';
-import { PREVIEW_HEIGHT } from './constants';
-const CLIP_PATH_ID = 'clip-path-for-cropped-image';
-export async function createCroppedImageSvg(cropperSettings, image) {
-  const {
-    shape
-  } = cropperSettings;
-  const {
-    imageWidth,
-    imageHeight
-  } = await fetchImageMetadata(image);
-  const squareDimension = imageHeight;
-  const rootElement = createSvgElement('svg', {
-    xmlns: 'http://www.w3.org/2000/svg',
-    width: squareDimension,
-    height: squareDimension
-  });
-  const defs = createDefsElement({
-    shape,
-    squareDimension
-  });
-  const mainGroup = createMainSvgGroup({
-    imageWidth,
-    imageHeight,
-    squareDimension,
-    image,
-    settings: cropperSettings
-  });
-  rootElement.appendChild(defs);
-  rootElement.appendChild(mainGroup);
-  return rootElement;
-}
-
-const fetchImageMetadata = src => {
-  return new Promise(resolve => {
-    const img = new Image();
-
-    img.onload = function () {
-      resolve({
-        imageWidth: this.naturalWidth,
-        imageHeight: this.naturalHeight
-      });
-    };
-
-    img.src = src;
-  });
-};
-
-const createDefsElement = _ref => {
-  let {
-    shape,
-    squareDimension
-  } = _ref;
-  const defs = createSvgElement('defs');
-  const shapeMask = buildShapeMask({
-    shape,
-    size: squareDimension
-  });
-  const clipPath = createSvgElement('clipPath', {
-    id: CLIP_PATH_ID
-  });
-  clipPath.appendChild(shapeMask);
-  defs.appendChild(clipPath);
-  return defs;
-};
-
-const convertTranslationUnits = (translationPixels, imageHeight) => {
-  return imageHeight * translationPixels / PREVIEW_HEIGHT;
-};
-
-const createMainSvgGroup = _ref2 => {
-  let {
-    imageWidth,
-    imageHeight,
-    squareDimension,
-    image,
-    settings
-  } = _ref2;
-  const mainGroup = createSvgElement('g', {
-    'clip-path': `url(#${CLIP_PATH_ID})`
-  });
-  const imageElement = createSvgElement('image', {
-    width: imageWidth,
-    height: imageHeight,
-    href: image
-  });
-  setTransformAttribute({
-    imageElement,
-    imageWidth,
-    imageHeight,
-    squareDimension,
-    settings
-  });
-  mainGroup.appendChild(imageElement);
-  return mainGroup;
-};
-
-export const setTransformAttribute = _ref3 => {
-  let {
-    imageElement,
-    imageWidth,
-    imageHeight,
-    squareDimension,
-    settings
-  } = _ref3;
-  const {
-    rotation = 0,
-    scaleRatio = 1.0,
-    translateX = 0,
-    translateY = 0
-  } = settings;
-  const horizontalCenter = scaleRatio * imageWidth / 2;
-  const verticalCenter = scaleRatio * imageHeight / 2;
-  const convertedTranslateX = convertTranslationUnits(translateX, imageHeight);
-  const convertedTranslateY = convertTranslationUnits(translateY, imageHeight);
-  const x = round(-horizontalCenter + convertedTranslateX + squareDimension / 2, 2);
-  const y = round(-verticalCenter + convertedTranslateY + squareDimension / 2, 2);
-  let value = `translate(${x}, ${y})`;
-
-  if (rotation !== 0) {
-    // Rotates image using its center as pivot
-    value += ` rotate(${rotation}, ${horizontalCenter}, ${verticalCenter})`;
-  }
-
-  if (scaleRatio !== 1.0) {
-    value += ` scale(${scaleRatio})`;
-  }
-
-  imageElement.setAttribute('transform', value);
-};

package/lib/rce/plugins/shared/ImageCropper/index.js

@@ -1,18 +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 { ImageCropperModal } from './Modal';

package/lib/rce/plugins/shared/ImageCropper/propTypes.js

@@ -1,26 +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 PropTypes from 'prop-types';
-export const ImageCropperSettingsPropTypes = PropTypes.shape({
-  shape: PropTypes.string,
-  rotation: PropTypes.number,
-  scaleRatio: PropTypes.number,
-  translateX: PropTypes.number,
-  translateY: PropTypes.number,
-  direction: PropTypes.number
-});

package/lib/rce/plugins/shared/ImageCropper/reducers/imageCropper.js

@@ -1,72 +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 { DEFAULT_CROPPER_SETTINGS } from '../constants';
-export const defaultState = DEFAULT_CROPPER_SETTINGS;
-export const actions = {
-  SET_SHAPE: 'SetShape',
-  SET_ROTATION: 'SetRotation',
-  SET_SCALE_RATIO: 'SetScaleRatio',
-  SET_TRANSLATE_X: 'SetTranslateX',
-  SET_TRANSLATE_Y: 'SetTranslateY',
-  UPDATE_SETTINGS: 'UpdateSettings',
-  RESET_SETTINGS: 'ResetSettings'
-};
-export const cropperSettingsReducer = (state, action) => {
-  switch (action.type) {
-    case actions.SET_SHAPE:
-      return { ...state,
-        shape: action.payload
-      };
-
-    case actions.SET_ROTATION:
-      return { ...state,
-        rotation: action.payload
-      };
-
-    case actions.SET_SCALE_RATIO:
-      return { ...state,
-        scaleRatio: action.payload
-      };
-
-    case actions.SET_TRANSLATE_X:
-      return { ...state,
-        translateX: action.payload
-      };
-
-    case actions.SET_TRANSLATE_Y:
-      return { ...state,
-        translateY: action.payload
-      };
-
-    case actions.UPDATE_SETTINGS:
-      return { ...state,
-        ...action.payload
-      };
-
-    case actions.RESET_SETTINGS:
-      return { ...state,
-        rotation: defaultState.rotation,
-        scaleRatio: defaultState.scaleRatio,
-        translateX: defaultState.translateX,
-        translateY: defaultState.translateY
-      };
-
-    default:
-      throw Error('Unknown action for image cropper reducer');
-  }
-};

package/lib/rce/plugins/shared/ImageCropper/shape.js

@@ -1,27 +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/>.
- */
-export const Shape = {
-  Square: 'square',
-  Circle: 'circle',
-  Triangle: 'triangle',
-  Diamond: 'diamond',
-  Pentagon: 'pentagon',
-  Hexagon: 'hexagon',
-  Octagon: 'octagon',
-  Star: 'star'
-};

package/lib/rce/plugins/shared/ImageCropper/svg/index.js

@@ -1,89 +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 { PREVIEW_HEIGHT, SHAPE_CONTAINER_LENGTH, GLUE_WIDTH, PREVIEW_WIDTH, PREVIEW_BACKGROUND_COLOR } from '../constants';
-import { buildShapeMask } from './shape';
-export function buildSvg(shape) {
-  const settings = {
-    shape
-  };
-  const mainContainer = createSvgContainer();
-  const leftGlue = createSvgElement('rect', {
-    x: 0,
-    y: 0,
-    width: GLUE_WIDTH,
-    height: PREVIEW_HEIGHT,
-    fill: PREVIEW_BACKGROUND_COLOR,
-    'fill-opacity': '0.5'
-  });
-  const rightGlue = createSvgElement('rect', {
-    x: GLUE_WIDTH + SHAPE_CONTAINER_LENGTH,
-    y: 0,
-    width: GLUE_WIDTH,
-    height: PREVIEW_HEIGHT,
-    fill: PREVIEW_BACKGROUND_COLOR,
-    'fill-opacity': '0.5'
-  });
-  const defsElement = createSvgElement('defs');
-  const maskElement = createMask(settings);
-  const bgElement = createSvgElement('rect', {
-    x: `${PREVIEW_WIDTH / 2 - SHAPE_CONTAINER_LENGTH / 2}`,
-    y: 0,
-    width: SHAPE_CONTAINER_LENGTH,
-    height: SHAPE_CONTAINER_LENGTH,
-    mask: 'url(#imageCropperMask)',
-    fill: PREVIEW_BACKGROUND_COLOR,
-    'fill-opacity': '0.5'
-  });
-  defsElement.appendChild(maskElement);
-  mainContainer.appendChild(leftGlue);
-  mainContainer.appendChild(rightGlue);
-  mainContainer.appendChild(defsElement);
-  mainContainer.appendChild(bgElement);
-  return mainContainer;
-}
-
-function createSvgContainer() {
-  return createSvgElement('svg', {
-    xmlns: 'http://www.w3.org/2000/svg',
-    width: PREVIEW_WIDTH,
-    height: PREVIEW_HEIGHT
-  });
-}
-
-function createMask(settings) {
-  const maskElement = createSvgElement('mask', {
-    id: 'imageCropperMask'
-  });
-  const shapeContainer = createSvgElement('svg', {
-    x: `${PREVIEW_WIDTH / 2 - SHAPE_CONTAINER_LENGTH / 2}`,
-    y: 0,
-    width: SHAPE_CONTAINER_LENGTH,
-    height: SHAPE_CONTAINER_LENGTH
-  });
-  const bgElement = createSvgElement('rect', {
-    width: '100%',
-    height: `${PREVIEW_HEIGHT}px`,
-    fill: 'white'
-  });
-  const shapeElement = buildShapeMask(settings);
-  shapeContainer.appendChild(bgElement);
-  shapeContainer.appendChild(shapeElement);
-  maskElement.appendChild(shapeContainer);
-  return maskElement;
-}

package/lib/rce/plugins/shared/ImageCropper/svg/shape.js

@@ -1,125 +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 round from '../../round';
-import { SHAPE_CONTAINER_LENGTH } from '../constants';
-import { createSvgElement } from './utils';
-import { Shape } from '../shape';
-export function buildShapeMask(_ref) {
-  let {
-    shape,
-    size
-  } = _ref;
-  const dimensionSize = size || SHAPE_CONTAINER_LENGTH;
-
-  switch (shape) {
-    case Shape.Square:
-      return buildSquare(dimensionSize);
-
-    case Shape.Circle:
-      return buildCircle(dimensionSize);
-
-    case Shape.Triangle:
-      return buildTriangle(dimensionSize);
-
-    case Shape.Diamond:
-      return buildDiamond(dimensionSize);
-
-    case Shape.Pentagon:
-      return buildPentagon(dimensionSize);
-
-    case Shape.Hexagon:
-      return buildHexagon(dimensionSize);
-
-    case Shape.Octagon:
-      return buildOctagon(dimensionSize);
-
-    case Shape.Star:
-      return buildStar(dimensionSize);
-
-    default:
-      throw new Error(`Invalid shape: ${shape}`);
-  }
-}
-
-function buildSquare(dimensionSize) {
-  return createSvgElement('rect', {
-    x: 0,
-    y: 0,
-    width: dimensionSize,
-    height: dimensionSize,
-    fill: 'black'
-  });
-}
-
-function buildCircle(dimensionSize) {
-  return createSvgElement('circle', {
-    cx: dimensionSize / 2,
-    cy: dimensionSize / 2,
-    r: dimensionSize / 2,
-    fill: 'black'
-  });
-}
-
-function buildTriangle(dimensionSize) {
-  return createSvgElement('path', {
-    d: `M${dimensionSize / 2} 0L${dimensionSize} ${dimensionSize}H0L${dimensionSize / 2} 0Z`
-  });
-}
-
-function buildDiamond(dimensionSize) {
-  return createSvgElement('path', {
-    d: `M${dimensionSize / 2} 0L${dimensionSize} ${dimensionSize / 2}L${dimensionSize / 2} ${dimensionSize}L0 ${dimensionSize / 2}L${dimensionSize / 2} 0Z`
-  });
-}
-
-function buildPentagon(dimensionSize) {
-  const half = round(dimensionSize / 2, 2);
-  const alpha = round(0.3906 * dimensionSize, 2);
-  const beta = round(0.3433 * dimensionSize, 2);
-  return createSvgElement('path', {
-    d: `M${half} 0L${dimensionSize} ${alpha}L${half + beta} ${dimensionSize}H${half - beta}L0 ${alpha}L${half} 0L${half} 0Z`
-  });
-}
-
-function buildHexagon(dimensionSize) {
-  const leg = round(0.2895 * dimensionSize, 2);
-  return createSvgElement('path', {
-    d: `M${dimensionSize - leg} 0L${dimensionSize} ${dimensionSize / 2}L${dimensionSize - leg} ${dimensionSize}H${leg}L0 ${dimensionSize / 2}L${leg} 0H${dimensionSize - leg}Z`
-  });
-}
-
-function buildOctagon(dimensionSize) {
-  const leg = round(0.2895 * dimensionSize, 2);
-  const side = round(dimensionSize - 2 * leg, 2);
-  return createSvgElement('path', {
-    d: `M0 ${leg}L${leg} 0H${leg + side}L${dimensionSize} ${leg}V${leg + side}L${leg + side} ${dimensionSize}H${leg}L0 ${leg + side}V${leg}Z`
-  });
-}
-
-function buildStar(dimensionSize) {
-  const half = round(dimensionSize / 2, 2);
-  const alpha = round(0.1143 * dimensionSize, 2);
-  const beta = round(0.3906 * dimensionSize, 2);
-  const gamma = round(0.1779 * dimensionSize, 2);
-  const delta = round(0.6042 * dimensionSize, 2);
-  const zeta = round(0.3433 * dimensionSize, 2);
-  const eta = round(0.7344 * dimensionSize, 2);
-  return createSvgElement('path', {
-    d: `M${half} 0L${half + alpha} ${beta}H${dimensionSize}L${half + gamma} ${delta}L${half + zeta} ${dimensionSize}L${half} ${eta}L${half - zeta} ${dimensionSize}L${half - gamma} ${delta}L0 ${beta}H${half - alpha}L${half} 0Z`
-  });
-}

package/lib/rce/plugins/shared/ImageCropper/svg/utils.js

@@ -1,26 +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 function createSvgElement(tag) {
-  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
-  Object.entries(attributes).forEach(_ref => {
-    let [attr, value] = _ref;
-    element.setAttribute(attr, value);
-  });
-  return element;
-}