fabric 5.3.0 → 6.0.0-beta10

package/src/parser/getCSSRules.ts

@@ -0,0 +1,61 @@
+/**
+ * Returns CSS rules for a given SVG document
+ * @param {SVGDocument} doc SVG document to parse
+ * @return {Object} CSS rules of this document
+ */
+export function getCSSRules(doc: Document) {
+  const styles = doc.getElementsByTagName('style');
+  let i;
+  let len;
+  const allRules: Record<string, Record<string, string>> = {};
+  let rules;
+
+  // very crude parsing of style contents
+  for (i = 0, len = styles.length; i < len; i++) {
+    const styleContents = (styles[i].textContent || '').replace(
+      // remove comments
+      /\/\*[\s\S]*?\*\//g,
+      ''
+    );
+
+    if (styleContents.trim() === '') {
+      continue;
+    }
+    // recovers all the rule in this form `body { style code... }`
+    // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g);
+    rules = styleContents.split('}');
+    // remove empty rules.
+    rules = rules.filter(function (rule) {
+      return rule.trim();
+    });
+    // at this point we have hopefully an array of rules `body { style code... `
+    // eslint-disable-next-line no-loop-func
+    rules.forEach(function (rule) {
+      const match = rule.split('{'),
+        ruleObj: Record<string, string> = {},
+        declaration = match[1].trim(),
+        propertyValuePairs = declaration.split(';').filter(function (pair) {
+          return pair.trim();
+        });
+
+      for (i = 0, len = propertyValuePairs.length; i < len; i++) {
+        const pair = propertyValuePairs[i].split(':'),
+          property = pair[0].trim(),
+          value = pair[1].trim();
+        ruleObj[property] = value;
+      }
+      rule = match[0].trim();
+      rule.split(',').forEach((_rule) => {
+        _rule = _rule.replace(/^svg/i, '').trim();
+        if (_rule === '') {
+          return;
+        }
+        allRules[_rule] = {
+          ...(allRules[_rule] || {}),
+          ...ruleObj,
+        };
+      });
+    });
+  }
+  return allRules;
+}

package/src/parser/getGlobalStylesForElement.ts

@@ -0,0 +1,19 @@
+//@ts-nocheck
+import { cssRules } from './constants';
+import { elementMatchesRule } from './elementMatchesRule';
+
+/**
+ * @private
+ */
+
+export function getGlobalStylesForElement(element, svgUid) {
+  const styles = {};
+  for (const rule in cssRules[svgUid]) {
+    if (elementMatchesRule(element, rule.split(' '))) {
+      for (const property in cssRules[svgUid][rule]) {
+        styles[property] = cssRules[svgUid][rule][property];
+      }
+    }
+  }
+  return styles;
+}

package/src/parser/getGradientDefs.ts

@@ -0,0 +1,31 @@
+//@ts-nocheck
+
+import { getMultipleNodes } from './getMultipleNodes';
+import { recursivelyParseGradientsXlink } from './recursivelyParseGradientsXlink';
+
+const tagArray = [
+  'linearGradient',
+  'radialGradient',
+  'svg:linearGradient',
+  'svg:radialGradient',
+];
+
+/**
+ * Parses an SVG document, returning all of the gradient declarations found in it
+ * @param {SVGDocument} doc SVG document to parse
+ * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element
+ */
+export function getGradientDefs(doc) {
+  const elList = getMultipleNodes(doc, tagArray);
+  let el;
+  const gradientDefs = {};
+  let j = elList.length;
+  while (j--) {
+    el = elList[j];
+    if (el.getAttribute('xlink:href')) {
+      recursivelyParseGradientsXlink(doc, el);
+    }
+    gradientDefs[el.getAttribute('id')] = el;
+  }
+  return gradientDefs;
+}

package/src/parser/getMultipleNodes.ts

@@ -0,0 +1,15 @@
+//@ts-nocheck
+
+export function getMultipleNodes(doc, nodeNames) {
+  let nodeName,
+    nodeArray = [],
+    nodeList,
+    i,
+    len;
+  for (i = 0, len = nodeNames.length; i < len; i++) {
+    nodeName = nodeNames[i];
+    nodeList = doc.getElementsByTagName(nodeName);
+    nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList));
+  }
+  return nodeArray;
+}

package/src/parser/getSvgRegex.ts

@@ -0,0 +1,3 @@
+export function getSvgRegex(arr: string[]) {
+  return new RegExp('^(' + arr.join('|') + ')\\b', 'i');
+}

package/src/parser/hasAncestorWithNodeName.ts

@@ -0,0 +1,14 @@
+//@ts-nocheck
+
+export function hasAncestorWithNodeName(element, nodeName) {
+  while (element && (element = element.parentNode)) {
+    if (
+      element.nodeName &&
+      nodeName.test(element.nodeName.replace('svg:', '')) &&
+      !element.getAttribute('instantiated_by_use')
+    ) {
+      return true;
+    }
+  }
+  return false;
+}

package/src/parser/index.ts

@@ -0,0 +1,8 @@
+export { loadSVGFromURL } from './loadSVGFromURL';
+export { loadSVGFromString } from './loadSVGFromString';
+export { parseAttributes } from './parseAttributes';
+export { parseStyleAttribute } from './parseStyleAttribute';
+export { parsePointsAttribute } from './parsePointsAttribute';
+export { parseTransformAttribute } from './parseTransformAttribute';
+export { getCSSRules } from './getCSSRules';
+export { parseFontDeclaration } from './parseFontDeclaration';

package/src/parser/loadSVGFromString.ts

@@ -0,0 +1,29 @@
+import { getFabricWindow } from '../env';
+import type { LoadImageOptions } from '../util/misc/objectEnlive';
+import { parseSVGDocument } from './parseSVGDocument';
+import type { SVGParsingOutput, TSvgReviverCallback } from './typedefs';
+
+/**
+ * Takes string corresponding to an SVG document, and parses it into a set of fabric objects
+ * @memberOf fabric
+ * @param {String} string representing the svg
+ * @param {TSvgParsedCallback} callback Invoked when the parsing is done, with null if parsing wasn't possible with the list of svg nodes.
+ * {@link TSvgParsedCallback} also receives `allElements` array as the last argument. This is the full list of svg nodes available in the document.
+ * You may want to use it if you are trying to regroup the objects as they were originally grouped in the SVG. ( This was the reason why it was added )
+ * @param {TSvgReviverCallback} [reviver] Extra callback for further parsing of SVG elements, called after each fabric object has been created.
+ * Takes as input the original svg element and the generated `FabricObject` as arguments. Used to inspect extra properties not parsed by fabric,
+ * or extra custom manipulation
+ * @param {Object} [options] Object containing options for parsing
+ * @param {String} [options.crossOrigin] crossOrigin setting to use for external resources
+ * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+ */
+export function loadSVGFromString(
+  string: string,
+  reviver?: TSvgReviverCallback,
+  options?: LoadImageOptions
+): Promise<SVGParsingOutput> {
+  const parser = new (getFabricWindow().DOMParser)(),
+    // should we use `image/svg+xml` here?
+    doc = parser.parseFromString(string.trim(), 'text/xml');
+  return parseSVGDocument(doc.documentElement, reviver, options);
+}

package/src/parser/loadSVGFromURL.ts

@@ -0,0 +1,47 @@
+import { request } from '../util/dom_request';
+import { parseSVGDocument, createEmptyResponse } from './parseSVGDocument';
+import type { SVGParsingOutput, TSvgReviverCallback } from './typedefs';
+import type { LoadImageOptions } from '../util/misc/objectEnlive';
+
+/**
+ * Takes url corresponding to an SVG document, and parses it into a set of fabric objects.
+ * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)
+ * @memberOf fabric
+ * @param {string} url where the SVG is
+ * @param {TSvgParsedCallback} callback Invoked when the parsing is done, with null if parsing wasn't possible with the list of svg nodes.
+ * {@link TSvgParsedCallback} also receives `allElements` array as the last argument. This is the full list of svg nodes available in the document.
+ * You may want to use it if you are trying to regroup the objects as they were originally grouped in the SVG. ( This was the reason why it was added )
+ * @param {TSvgReviverCallback} [reviver] Extra callback for further parsing of SVG elements, called after each fabric object has been created.
+ * Takes as input the original svg element and the generated `FabricObject` as arguments. Used to inspect extra properties not parsed by fabric,
+ * or extra custom manipulation
+ * @param {Object} [options] Object containing options for parsing
+ * @param {String} [options.crossOrigin] crossOrigin setting to use for external resources
+ * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+ */
+export function loadSVGFromURL(
+  url: string,
+  reviver?: TSvgReviverCallback,
+  options: LoadImageOptions = {}
+): Promise<SVGParsingOutput> {
+  // need to handle error properly
+  return new Promise<HTMLElement>((resolve, reject) => {
+    const onComplete = (r: XMLHttpRequest) => {
+      const xml = r.responseXML;
+      if (xml && xml.documentElement) {
+        resolve(xml.documentElement);
+      }
+      reject();
+    };
+
+    request(url.replace(/^\n\s*/, '').trim(), {
+      method: 'get',
+      onComplete,
+      signal: options.signal,
+    });
+  })
+    .then((parsedDoc) => parseSVGDocument(parsedDoc, reviver, options))
+    .catch(() => {
+      // this is an unhappy path, we dont care about speed
+      return createEmptyResponse();
+    });
+}

package/src/parser/normalizeAttr.ts

@@ -0,0 +1,10 @@
+//@ts-nocheck
+import { attributesMap } from './constants';
+
+export function normalizeAttr(attr) {
+  // transform attribute names
+  if (attr in attributesMap) {
+    return attributesMap[attr];
+  }
+  return attr;
+}

package/src/parser/normalizeValue.ts

@@ -0,0 +1,64 @@
+//@ts-nocheck
+import { multiplyTransformMatrices } from '../util/misc/matrix';
+import { parseUnit } from '../util/misc/svgParsing';
+import { parseTransformAttribute } from './parseTransformAttribute';
+import { CENTER, LEFT, RIGHT, NONE } from '../constants';
+
+export function normalizeValue(attr, value, parentAttributes, fontSize) {
+  const isArray = Array.isArray(value);
+  let parsed;
+
+  if ((attr === 'fill' || attr === 'stroke') && value === NONE) {
+    value = '';
+  } else if (attr === 'strokeUniform') {
+    return value === 'non-scaling-stroke';
+  } else if (attr === 'strokeDashArray') {
+    if (value === NONE) {
+      value = null;
+    } else {
+      value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat);
+    }
+  } else if (attr === 'transformMatrix') {
+    if (parentAttributes && parentAttributes.transformMatrix) {
+      value = multiplyTransformMatrices(
+        parentAttributes.transformMatrix,
+        parseTransformAttribute(value)
+      );
+    } else {
+      value = parseTransformAttribute(value);
+    }
+  } else if (attr === 'visible') {
+    value = value !== NONE && value !== 'hidden';
+    // display=none on parent element always takes precedence over child element
+    if (parentAttributes && parentAttributes.visible === false) {
+      value = false;
+    }
+  } else if (attr === 'opacity') {
+    value = parseFloat(value);
+    if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') {
+      value *= parentAttributes.opacity;
+    }
+  } else if (attr === 'textAnchor' /* text-anchor */) {
+    value = value === 'start' ? LEFT : value === 'end' ? RIGHT : CENTER;
+  } else if (attr === 'charSpacing') {
+    // parseUnit returns px and we convert it to em
+    parsed = (parseUnit(value, fontSize) / fontSize) * 1000;
+  } else if (attr === 'paintFirst') {
+    const fillIndex = value.indexOf('fill');
+    const strokeIndex = value.indexOf('stroke');
+    value = 'fill';
+    if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) {
+      value = 'stroke';
+    } else if (fillIndex === -1 && strokeIndex > -1) {
+      value = 'stroke';
+    }
+  } else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') {
+    return value;
+  } else if (attr === 'imageSmoothing') {
+    return value === 'optimizeQuality';
+  } else {
+    parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize);
+  }
+
+  return !isArray && isNaN(parsed) ? value : parsed;
+}

package/src/parser/parseAttributes.ts

@@ -0,0 +1,90 @@
+//@ts-nocheck
+import { DEFAULT_SVG_FONT_SIZE } from '../constants';
+import { parseUnit } from '../util/misc/svgParsing';
+import { cPath, fSize, svgValidParentsRegEx } from './constants';
+import { getGlobalStylesForElement } from './getGlobalStylesForElement';
+import { normalizeAttr } from './normalizeAttr';
+import { normalizeValue } from './normalizeValue';
+import { parseFontDeclaration } from './parseFontDeclaration';
+import { parseStyleAttribute } from './parseStyleAttribute';
+import { setStrokeFillOpacity } from './setStrokeFillOpacity';
+
+/**
+ * Returns an object of attributes' name/value, given element and an array of attribute names;
+ * Parses parent "g" nodes recursively upwards.
+ * @param {SVGElement | HTMLElement} element Element to parse
+ * @param {Array} attributes Array of attributes to parse
+ * @return {Object} object containing parsed attributes' names/values
+ */
+export function parseAttributes(
+  element: SVGElement | HTMLElement,
+  attributes: string[],
+  svgUid?: string
+): Record<string, any> {
+  if (!element) {
+    return {};
+  }
+
+  let value,
+    parentAttributes = {},
+    fontSize,
+    parentFontSize;
+
+  if (typeof svgUid === 'undefined') {
+    svgUid = element.getAttribute('svgUid');
+  }
+  // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards
+  if (
+    element.parentNode &&
+    svgValidParentsRegEx.test(element.parentNode.nodeName)
+  ) {
+    parentAttributes = parseAttributes(element.parentNode, attributes, svgUid);
+  }
+
+  let ownAttributes = attributes.reduce(function (memo, attr) {
+    value = element.getAttribute(attr);
+    if (value) {
+      // eslint-disable-line
+      memo[attr] = value;
+    }
+    return memo;
+  }, {});
+  // add values parsed from style, which take precedence over attributes
+  // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes)
+  const cssAttrs = Object.assign(
+    getGlobalStylesForElement(element, svgUid),
+    parseStyleAttribute(element)
+  );
+  ownAttributes = Object.assign(ownAttributes, cssAttrs);
+  if (cssAttrs[cPath]) {
+    element.setAttribute(cPath, cssAttrs[cPath]);
+  }
+  fontSize = parentFontSize =
+    parentAttributes.fontSize || DEFAULT_SVG_FONT_SIZE;
+  if (ownAttributes[fSize]) {
+    // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers.
+    ownAttributes[fSize] = fontSize = parseUnit(
+      ownAttributes[fSize],
+      parentFontSize
+    );
+  }
+
+  const normalizedStyle = {};
+  for (const attr in ownAttributes) {
+    const normalizedAttr = normalizeAttr(attr);
+    const normalizedValue = normalizeValue(
+      normalizedAttr,
+      ownAttributes[attr],
+      parentAttributes,
+      fontSize
+    );
+    normalizedStyle[normalizedAttr] = normalizedValue;
+  }
+  if (normalizedStyle && normalizedStyle.font) {
+    parseFontDeclaration(normalizedStyle.font, normalizedStyle);
+  }
+  const mergedAttrs = { ...parentAttributes, ...normalizedStyle };
+  return svgValidParentsRegEx.test(element.nodeName)
+    ? mergedAttrs
+    : setStrokeFillOpacity(mergedAttrs);
+}

package/src/parser/parseFontDeclaration.ts

@@ -0,0 +1,44 @@
+//@ts-nocheck
+import { parseUnit } from '../util/misc/svgParsing';
+import { reFontDeclaration } from './constants';
+
+/**
+ * Parses a short font declaration, building adding its properties to a style object
+ * @static
+ * @function
+ * @memberOf fabric
+ * @param {String} value font declaration
+ * @param {Object} oStyle definition
+ */
+export function parseFontDeclaration(value, oStyle) {
+  const match = value.match(reFontDeclaration);
+
+  if (!match) {
+    return;
+  }
+  const fontStyle = match[1],
+    // font variant is not used
+    // fontVariant = match[2],
+    fontWeight = match[3],
+    fontSize = match[4],
+    lineHeight = match[5],
+    fontFamily = match[6];
+
+  if (fontStyle) {
+    oStyle.fontStyle = fontStyle;
+  }
+  if (fontWeight) {
+    oStyle.fontWeight = isNaN(parseFloat(fontWeight))
+      ? fontWeight
+      : parseFloat(fontWeight);
+  }
+  if (fontSize) {
+    oStyle.fontSize = parseUnit(fontSize);
+  }
+  if (fontFamily) {
+    oStyle.fontFamily = fontFamily;
+  }
+  if (lineHeight) {
+    oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight;
+  }
+}

package/src/parser/parsePointsAttribute.ts

@@ -0,0 +1,34 @@
+//@ts-nocheck
+
+/**
+ * Parses "points" attribute, returning an array of values
+ * @static
+ * @memberOf fabric
+ * @param {String} points points attribute string
+ * @return {Array} array of points
+ */
+export function parsePointsAttribute(points) {
+  // points attribute is required and must not be empty
+  if (!points) {
+    return null;
+  }
+
+  // replace commas with whitespace and remove bookending whitespace
+  points = points.replace(/,/g, ' ').trim();
+
+  points = points.split(/\s+/);
+  const parsedPoints = [];
+
+  for (let i = 0; i < points.length; i += 2) {
+    parsedPoints.push({
+      x: parseFloat(points[i]),
+      y: parseFloat(points[i + 1]),
+    });
+  }
+
+  // odd number of points is an error
+  // if (parsedPoints.length % 2 !== 0) {
+  //   return null;
+  // }
+  return parsedPoints;
+}

package/src/parser/parseSVGDocument.ts

@@ -0,0 +1,118 @@
+// @ts-nocheck
+import { uid } from '../util/internals/uid';
+import { applyViewboxTransform } from './applyViewboxTransform';
+import {
+  clipPaths,
+  cssRules,
+  gradientDefs,
+  svgInvalidAncestorsRegEx,
+  svgValidTagNamesRegEx,
+} from './constants';
+import { getCSSRules } from './getCSSRules';
+import { getGradientDefs } from './getGradientDefs';
+import { hasAncestorWithNodeName } from './hasAncestorWithNodeName';
+import { parseUseDirectives } from './parseUseDirectives';
+import type { SVGParsingOutput, TSvgReviverCallback } from './typedefs';
+import type { LoadImageOptions } from '../util/misc/objectEnlive';
+import { ElementsParser } from './elements_parser';
+
+/**
+ * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
+ * @static
+ * @function
+ * @memberOf fabric
+ * @param {HTMLElement} doc SVG document to parse
+ * @param {TSvgParsedCallback} callback Invoked when the parsing is done, with null if parsing wasn't possible with the list of svg nodes.
+ * @param {TSvgReviverCallback} [reviver] Extra callback for further parsing of SVG elements, called after each fabric object has been created.
+ * Takes as input the original svg element and the generated `FabricObject` as arguments. Used to inspect extra properties not parsed by fabric,
+ * or extra custom manipulation
+ * @param {Object} [options] Object containing options for parsing
+ * @param {String} [options.crossOrigin] crossOrigin setting to use for external resources
+ * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+ * @return {SVGParsingOutput}
+ * {@link SVGParsingOutput} also receives `allElements` array as the last argument. This is the full list of svg nodes available in the document.
+ * You may want to use it if you are trying to regroup the objects as they were originally grouped in the SVG. ( This was the reason why it was added )
+
+ */
+
+export const createEmptyResponse = (): SVGParsingOutput => ({
+  objects: [],
+  elements: [],
+  options: {},
+  allElements: [],
+});
+
+export async function parseSVGDocument(
+  doc: HTMLElement,
+  reviver?: TSvgReviverCallback,
+  { crossOrigin, signal }: LoadImageOptions = {}
+): Promise<SVGParsingOutput> {
+  if (signal && signal.aborted) {
+    console.log('`options.signal` is in `aborted` state');
+    // this is an unhappy path, we dont care about speed
+    return createEmptyResponse();
+  }
+  parseUseDirectives(doc);
+
+  const svgUid = uid(),
+    descendants = Array.from(doc.getElementsByTagName('*')),
+    options = {
+      ...applyViewboxTransform(doc),
+      crossOrigin,
+      svgUid,
+      signal,
+    };
+
+  const elements = descendants.filter(function (el) {
+    applyViewboxTransform(el);
+    return (
+      svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) &&
+      !hasAncestorWithNodeName(el, svgInvalidAncestorsRegEx)
+    ); // http://www.w3.org/TR/SVG/struct.html#DefsElement
+  });
+  if (!elements || (elements && !elements.length)) {
+    return {
+      ...createEmptyResponse(),
+      options,
+      allElements: descendants,
+    };
+  }
+  const localClipPaths = {};
+  descendants
+    .filter((el) => el.nodeName.replace('svg:', '') === 'clipPath')
+    .forEach((el) => {
+      const id = el.getAttribute('id');
+      localClipPaths[id] = Array.from(el.getElementsByTagName('*')).filter(
+        (el) => svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', ''))
+      );
+    });
+
+  // thos are like globals we need to fix
+  gradientDefs[svgUid] = getGradientDefs(doc);
+  cssRules[svgUid] = getCSSRules(doc);
+  clipPaths[svgUid] = localClipPaths;
+
+  // Precedence of rules:   style > class > attribute
+  const elementParser = new ElementsParser(
+    elements,
+    options,
+    reviver,
+    {
+      crossOrigin,
+      signal,
+    },
+    doc
+  );
+  const instances = await elementParser.parse();
+
+  delete gradientDefs[svgUid];
+  delete cssRules[svgUid];
+  delete clipPaths[svgUid];
+
+  return {
+    objects: instances,
+    elements,
+    options,
+    allElements: descendants,
+  };
+}

package/src/parser/parseStyleAttribute.ts

@@ -0,0 +1,27 @@
+//@ts-nocheck
+import { parseStyleObject } from './parseStyleObject';
+import { parseStyleString } from './parseStyleString';
+
+/**
+ * Parses "style" attribute, retuning an object with values
+ * @static
+ * @memberOf fabric
+ * @param {SVGElement} element Element to parse
+ * @return {Object} Objects with values parsed from style attribute of an element
+ */
+export function parseStyleAttribute(element) {
+  const oStyle = {},
+    style = element.getAttribute('style');
+
+  if (!style) {
+    return oStyle;
+  }
+
+  if (typeof style === 'string') {
+    parseStyleString(style, oStyle);
+  } else {
+    parseStyleObject(style, oStyle);
+  }
+
+  return oStyle;
+}

package/src/parser/parseStyleObject.ts

@@ -0,0 +1,15 @@
+//@ts-nocheck
+
+export function parseStyleObject(style, oStyle) {
+  let attr, value;
+  for (const prop in style) {
+    if (typeof style[prop] === 'undefined') {
+      continue;
+    }
+
+    attr = prop.toLowerCase();
+    value = style[prop];
+
+    oStyle[attr] = value;
+  }
+}

package/src/parser/parseStyleString.ts

@@ -0,0 +1,16 @@
+//@ts-nocheck
+
+export function parseStyleString(style, oStyle) {
+  let attr, value;
+  style
+    .replace(/;\s*$/, '')
+    .split(';')
+    .forEach(function (chunk) {
+      const pair = chunk.split(':');
+
+      attr = pair[0].trim().toLowerCase();
+      value = pair[1].trim();
+
+      oStyle[attr] = value;
+    });
+}