vis-network/esnext/esm/vis-network.mjs.map

A dynamic, browser-based visualization library.

{"version":3,"file":"vis-network.mjs","sources":["../../lib/network/shapes.ts","../../lib/network/dotparser.js","../../lib/network/gephiParser.ts","../../lib/network/locales.ts","../../lib/network/locale-utils.ts","../../lib/network/CachedImage.js","../../lib/network/Images.js","../../lib/network/modules/Groups.js","../../lib/network/modules/components/shared/ComponentUtil.js","../../lib/network/modules/components/shared/LabelAccumulator.js","../../lib/network/modules/components/shared/LabelSplitter.js","../../lib/network/modules/components/shared/Label.js","../../lib/network/modules/components/nodes/util/NodeBase.js","../../lib/network/modules/components/nodes/shapes/Box.js","../../lib/network/modules/components/nodes/util/CircleImageBase.js","../../lib/network/modules/components/nodes/shapes/Circle.js","../../lib/network/modules/components/nodes/shapes/CircularImage.js","../../lib/network/modules/components/nodes/util/ShapeBase.js","../../lib/network/modules/components/nodes/shapes/CustomShape.js","../../lib/network/modules/components/nodes/shapes/Database.js","../../lib/network/modules/components/nodes/shapes/Diamond.js","../../lib/network/modules/components/nodes/shapes/Dot.js","../../lib/network/modules/components/nodes/shapes/Ellipse.js","../../lib/network/modules/components/nodes/shapes/Icon.js","../../lib/network/modules/components/nodes/shapes/Image.js","../../lib/network/modules/components/nodes/shapes/Square.js","../../lib/network/modules/components/nodes/shapes/Hexagon.js","../../lib/network/modules/components/nodes/shapes/Star.js","../../lib/network/modules/components/nodes/shapes/Text.js","../../lib/network/modules/components/nodes/shapes/Triangle.js","../../lib/network/modules/components/nodes/shapes/TriangleDown.js","../../lib/network/modules/components/Node.js","../../lib/network/modules/NodesHandler.js","../../lib/network/modules/components/edges/util/end-points.ts","../../lib/network/modules/components/edges/util/edge-base.ts","../../lib/network/modules/components/edges/util/bezier-edge-base.ts","../../lib/network/modules/components/edges/bezier-edge-dynamic.ts","../../lib/network/modules/components/edges/bezier-edge-static.ts","../../lib/network/modules/components/edges/util/cubic-bezier-edge-base.ts","../../lib/network/modules/components/edges/cubic-bezier-edge.ts","../../lib/network/modules/components/edges/straight-edge.ts","../../lib/network/modules/components/Edge.js","../../lib/network/modules/EdgesHandler.js","../../lib/network/modules/components/physics/BarnesHutSolver.js","../../lib/network/modules/components/physics/RepulsionSolver.js","../../lib/network/modules/components/physics/HierarchicalRepulsionSolver.js","../../lib/network/modules/components/physics/SpringSolver.js","../../lib/network/modules/components/physics/HierarchicalSpringSolver.js","../../lib/network/modules/components/physics/CentralGravitySolver.js","../../lib/network/modules/components/physics/FA2BasedRepulsionSolver.js","../../lib/network/modules/components/physics/FA2BasedCentralGravitySolver.js","../../lib/network/modules/PhysicsEngine.js","../../lib/network/NetworkUtil.js","../../lib/network/modules/components/nodes/Cluster.js","../../lib/network/modules/Clustering.js","../../lib/network/modules/CanvasRenderer.js","../../lib/hammerUtil.js","../../lib/network/modules/Canvas.js","../../lib/network/modules/view-handler/index.ts","../../lib/network/modules/View.js","../../lib/network/modules/components/NavigationHandler.js","../../lib/network/modules/InteractionHandler.js","../../lib/network/modules/selection/selection-accumulator.ts","../../lib/network/modules/SelectionHandler.js","../../lib/network/modules/components/DirectionStrategy.js","../../lib/network/modules/layout-engine/index.ts","../../lib/network/modules/LayoutEngine.js","../../lib/network/modules/ManipulationSystem.js","../../lib/network/options.ts","../../lib/network/modules/components/algorithms/FloydWarshall.js","../../lib/network/modules/KamadaKawai.js","../../lib/network/Network.js","../../lib/entry-esnext.ts"],"sourcesContent":[null,"/* eslint-disable no-prototype-builtins */\n/* eslint-disable no-unused-vars */\n/* eslint-disable no-var */\n\n/**\n * Parse a text source containing data in DOT language into a JSON object.\n * The object contains two lists: one with nodes and one with edges.\n *\n * DOT language reference: http://www.graphviz.org/doc/info/lang.html\n *\n * DOT language attributes: http://graphviz.org/content/attrs\n * @param {string} data     Text containing a graph in DOT-notation\n * @returns {object} graph   An object containing two parameters:\n *                          {Object[]} nodes\n *                          {Object[]} edges\n *\n * -------------------------------------------\n * TODO\n * ====\n *\n * For label handling, this is an incomplete implementation. From docs (quote #3015):\n *\n * > the escape sequences \"\\n\", \"\\l\" and \"\\r\" divide the label into lines, centered,\n * > left-justified, and right-justified, respectively.\n *\n * Source: http://www.graphviz.org/content/attrs#kescString\n *\n * > As another aid for readability, dot allows double-quoted strings to span multiple physical\n * > lines using the standard C convention of a backslash immediately preceding a newline\n * > character\n * > In addition, double-quoted strings can be concatenated using a '+' operator.\n * > As HTML strings can contain newline characters, which are used solely for formatting,\n * > the language does not allow escaped newlines or concatenation operators to be used\n * > within them.\n *\n * - Currently, only '\\\\n' is handled\n * - Note that text explicitly says 'labels'; the dot parser currently handles escape\n *   sequences in **all** strings.\n */\nexport function parseDOT(data) {\n  dot = data;\n  return parseGraph();\n}\n\n// mapping of attributes from DOT (the keys) to vis.js (the values)\nvar NODE_ATTR_MAPPING = {\n  fontsize: \"font.size\",\n  fontcolor: \"font.color\",\n  labelfontcolor: \"font.color\",\n  fontname: \"font.face\",\n  color: [\"color.border\", \"color.background\"],\n  fillcolor: \"color.background\",\n  tooltip: \"title\",\n  labeltooltip: \"title\",\n};\nvar EDGE_ATTR_MAPPING = Object.create(NODE_ATTR_MAPPING);\nEDGE_ATTR_MAPPING.color = \"color.color\";\nEDGE_ATTR_MAPPING.style = \"dashes\";\n\n// token types enumeration\nvar TOKENTYPE = {\n  NULL: 0,\n  DELIMITER: 1,\n  IDENTIFIER: 2,\n  UNKNOWN: 3,\n};\n\n// map with all delimiters\nvar DELIMITERS = {\n  \"{\": true,\n  \"}\": true,\n  \"[\": true,\n  \"]\": true,\n  \";\": true,\n  \"=\": true,\n  \",\": true,\n\n  \"->\": true,\n  \"--\": true,\n};\n\nvar dot = \"\"; // current dot file\nvar index = 0; // current index in dot file\nvar c = \"\"; // current token character in expr\nvar token = \"\"; // current token\nvar tokenType = TOKENTYPE.NULL; // type of the token\n\n/**\n * Get the first character from the dot file.\n * The character is stored into the char c. If the end of the dot file is\n * reached, the function puts an empty string in c.\n */\nfunction first() {\n  index = 0;\n  c = dot.charAt(0);\n}\n\n/**\n * Get the next character from the dot file.\n * The character is stored into the char c. If the end of the dot file is\n * reached, the function puts an empty string in c.\n */\nfunction next() {\n  index++;\n  c = dot.charAt(index);\n}\n\n/**\n * Preview the next character from the dot file.\n * @returns {string} cNext\n */\nfunction nextPreview() {\n  return dot.charAt(index + 1);\n}\n\n/**\n * Test whether given character is alphabetic or numeric ( a-zA-Z_0-9.:# )\n * @param {string} c\n * @returns {boolean} isAlphaNumeric\n */\nfunction isAlphaNumeric(c) {\n  var charCode = c.charCodeAt(0);\n\n  if (charCode < 47) {\n    // #.\n    return charCode === 35 || charCode === 46;\n  }\n  if (charCode < 59) {\n    // 0-9 and :\n    return charCode > 47;\n  }\n  if (charCode < 91) {\n    // A-Z\n    return charCode > 64;\n  }\n  if (charCode < 96) {\n    // _\n    return charCode === 95;\n  }\n  if (charCode < 123) {\n    // a-z\n    return charCode > 96;\n  }\n\n  return false;\n}\n\n/**\n * Merge all options of object b into object b\n * @param {object} a\n * @param {object} b\n * @returns {object} a\n */\nfunction merge(a, b) {\n  if (!a) {\n    a = {};\n  }\n\n  if (b) {\n    for (var name in b) {\n      if (b.hasOwnProperty(name)) {\n        a[name] = b[name];\n      }\n    }\n  }\n  return a;\n}\n\n/**\n * Set a value in an object, where the provided parameter name can be a\n * path with nested parameters. For example:\n *\n * var obj = {a: 2};\n * setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}\n * @param {object} obj\n * @param {string} path  A parameter name or dot-separated parameter path,\n *                      like \"color.highlight.border\".\n * @param {*} value\n */\nfunction setValue(obj, path, value) {\n  var keys = path.split(\".\");\n  var o = obj;\n  while (keys.length) {\n    var key = keys.shift();\n    if (keys.length) {\n      // this isn't the end point\n      if (!o[key]) {\n        o[key] = {};\n      }\n      o = o[key];\n    } else {\n      // this is the end point\n      o[key] = value;\n    }\n  }\n}\n\n/**\n * Add a node to a graph object. If there is already a node with\n * the same id, their attributes will be merged.\n * @param {object} graph\n * @param {object} node\n */\nfunction addNode(graph, node) {\n  var i, len;\n  var current = null;\n\n  // find root graph (in case of subgraph)\n  var graphs = [graph]; // list with all graphs from current graph to root graph\n  var root = graph;\n  while (root.parent) {\n    graphs.push(root.parent);\n    root = root.parent;\n  }\n\n  // find existing node (at root level) by its id\n  if (root.nodes) {\n    for (i = 0, len = root.nodes.length; i < len; i++) {\n      if (node.id === root.nodes[i].id) {\n        current = root.nodes[i];\n        break;\n      }\n    }\n  }\n\n  if (!current) {\n    // this is a new node\n    current = {\n      id: node.id,\n    };\n    if (graph.node) {\n      // clone default attributes\n      current.attr = merge(current.attr, graph.node);\n    }\n  }\n\n  // add node to this (sub)graph and all its parent graphs\n  for (i = graphs.length - 1; i >= 0; i--) {\n    var g = graphs[i];\n\n    if (!g.nodes) {\n      g.nodes = [];\n    }\n    if (g.nodes.indexOf(current) === -1) {\n      g.nodes.push(current);\n    }\n  }\n\n  // merge attributes\n  if (node.attr) {\n    current.attr = merge(current.attr, node.attr);\n  }\n}\n\n/**\n * Add an edge to a graph object\n * @param {object} graph\n * @param {object} edge\n */\nfunction addEdge(graph, edge) {\n  if (!graph.edges) {\n    graph.edges = [];\n  }\n  graph.edges.push(edge);\n  if (graph.edge) {\n    var attr = merge({}, graph.edge); // clone default attributes\n    edge.attr = merge(attr, edge.attr); // merge attributes\n  }\n}\n\n/**\n * Create an edge to a graph object\n * @param {object} graph\n * @param {string | number | object} from\n * @param {string | number | object} to\n * @param {string} type\n * @param {object | null} attr\n * @returns {object} edge\n */\nfunction createEdge(graph, from, to, type, attr) {\n  var edge = {\n    from: from,\n    to: to,\n    type: type,\n  };\n\n  if (graph.edge) {\n    edge.attr = merge({}, graph.edge); // clone default attributes\n  }\n  edge.attr = merge(edge.attr || {}, attr); // merge attributes\n\n  // Move arrows attribute from attr to edge temporally created in\n  // parseAttributeList().\n  if (attr != null) {\n    if (attr.hasOwnProperty(\"arrows\") && attr[\"arrows\"] != null) {\n      edge[\"arrows\"] = { to: { enabled: true, type: attr.arrows.type } };\n      attr[\"arrows\"] = null;\n    }\n  }\n  return edge;\n}\n\n/**\n * Get next token in the current dot file.\n * The token and token type are available as token and tokenType\n */\nfunction getToken() {\n  tokenType = TOKENTYPE.NULL;\n  token = \"\";\n\n  // skip over whitespaces\n  while (c === \" \" || c === \"\\t\" || c === \"\\n\" || c === \"\\r\") {\n    // space, tab, enter\n    next();\n  }\n\n  do {\n    var isComment = false;\n\n    // skip comment\n    if (c === \"#\") {\n      // find the previous non-space character\n      var i = index - 1;\n      while (dot.charAt(i) === \" \" || dot.charAt(i) === \"\\t\") {\n        i--;\n      }\n      if (dot.charAt(i) === \"\\n\" || dot.charAt(i) === \"\") {\n        // the # is at the start of a line, this is indeed a line comment\n        while (c != \"\" && c != \"\\n\") {\n          next();\n        }\n        isComment = true;\n      }\n    }\n    if (c === \"/\" && nextPreview() === \"/\") {\n      // skip line comment\n      while (c != \"\" && c != \"\\n\") {\n        next();\n      }\n      isComment = true;\n    }\n    if (c === \"/\" && nextPreview() === \"*\") {\n      // skip block comment\n      while (c != \"\") {\n        if (c === \"*\" && nextPreview() === \"/\") {\n          // end of block comment found. skip these last two characters\n          next();\n          next();\n          break;\n        } else {\n          next();\n        }\n      }\n      isComment = true;\n    }\n\n    // skip over whitespaces\n    while (c === \" \" || c === \"\\t\" || c === \"\\n\" || c === \"\\r\") {\n      // space, tab, enter\n      next();\n    }\n  } while (isComment);\n\n  // check for end of dot file\n  if (c === \"\") {\n    // token is still empty\n    tokenType = TOKENTYPE.DELIMITER;\n    return;\n  }\n\n  // check for delimiters consisting of 2 characters\n  var c2 = c + nextPreview();\n  if (DELIMITERS[c2]) {\n    tokenType = TOKENTYPE.DELIMITER;\n    token = c2;\n    next();\n    next();\n    return;\n  }\n\n  // check for delimiters consisting of 1 character\n  if (DELIMITERS[c]) {\n    tokenType = TOKENTYPE.DELIMITER;\n    token = c;\n    next();\n    return;\n  }\n\n  // check for an identifier (number or string)\n  // TODO: more precise parsing of numbers/strings (and the port separator ':')\n  if (isAlphaNumeric(c) || c === \"-\") {\n    token += c;\n    next();\n\n    while (isAlphaNumeric(c)) {\n      token += c;\n      next();\n    }\n    if (token === \"false\") {\n      token = false; // convert to boolean\n    } else if (token === \"true\") {\n      token = true; // convert to boolean\n    } else if (!isNaN(Number(token))) {\n      token = Number(token); // convert to number\n    }\n    tokenType = TOKENTYPE.IDENTIFIER;\n    return;\n  }\n\n  // check for a string enclosed by double quotes\n  if (c === '\"') {\n    next();\n    while (c != \"\" && (c != '\"' || (c === '\"' && nextPreview() === '\"'))) {\n      if (c === '\"') {\n        // skip the escape character\n        token += c;\n        next();\n      } else if (c === \"\\\\\" && nextPreview() === \"n\") {\n        // Honor a newline escape sequence\n        token += \"\\n\";\n        next();\n      } else {\n        token += c;\n      }\n      next();\n    }\n    if (c != '\"') {\n      throw newSyntaxError('End of string \" expected');\n    }\n    next();\n    tokenType = TOKENTYPE.IDENTIFIER;\n    return;\n  }\n\n  // something unknown is found, wrong characters, a syntax error\n  tokenType = TOKENTYPE.UNKNOWN;\n  while (c != \"\") {\n    token += c;\n    next();\n  }\n  throw new SyntaxError('Syntax error in part \"' + chop(token, 30) + '\"');\n}\n\n/**\n * Parse a graph.\n * @returns {object} graph\n */\nfunction parseGraph() {\n  var graph = {};\n\n  first();\n  getToken();\n\n  // optional strict keyword\n  if (token === \"strict\") {\n    graph.strict = true;\n    getToken();\n  }\n\n  // graph or digraph keyword\n  if (token === \"graph\" || token === \"digraph\") {\n    graph.type = token;\n    getToken();\n  }\n\n  // optional graph id\n  if (tokenType === TOKENTYPE.IDENTIFIER) {\n    graph.id = token;\n    getToken();\n  }\n\n  // open angle bracket\n  if (token != \"{\") {\n    throw newSyntaxError(\"Angle bracket { expected\");\n  }\n  getToken();\n\n  // statements\n  parseStatements(graph);\n\n  // close angle bracket\n  if (token != \"}\") {\n    throw newSyntaxError(\"Angle bracket } expected\");\n  }\n  getToken();\n\n  // end of file\n  if (token !== \"\") {\n    throw newSyntaxError(\"End of file expected\");\n  }\n  getToken();\n\n  // remove temporary default options\n  delete graph.node;\n  delete graph.edge;\n  delete graph.graph;\n\n  return graph;\n}\n\n/**\n * Parse a list with statements.\n * @param {object} graph\n */\nfunction parseStatements(graph) {\n  while (token !== \"\" && token != \"}\") {\n    parseStatement(graph);\n    if (token === \";\") {\n      getToken();\n    }\n  }\n}\n\n/**\n * Parse a single statement. Can be a an attribute statement, node\n * statement, a series of node statements and edge statements, or a\n * parameter.\n * @param {object} graph\n */\nfunction parseStatement(graph) {\n  // parse subgraph\n  var subgraph = parseSubgraph(graph);\n  if (subgraph) {\n    // edge statements\n    parseEdge(graph, subgraph);\n\n    return;\n  }\n\n  // parse an attribute statement\n  var attr = parseAttributeStatement(graph);\n  if (attr) {\n    return;\n  }\n\n  // parse node\n  if (tokenType != TOKENTYPE.IDENTIFIER) {\n    throw newSyntaxError(\"Identifier expected\");\n  }\n  var id = token; // id can be a string or a number\n  getToken();\n\n  if (token === \"=\") {\n    // id statement\n    getToken();\n    if (tokenType != TOKENTYPE.IDENTIFIER) {\n      throw newSyntaxError(\"Identifier expected\");\n    }\n    graph[id] = token;\n    getToken();\n    // TODO: implement comma separated list with \"a_list: ID=ID [','] [a_list] \"\n  } else {\n    parseNodeStatement(graph, id);\n  }\n}\n\n/**\n * Parse a subgraph\n * @param {object} graph    parent graph object\n * @returns {object | null} subgraph\n */\nfunction parseSubgraph(graph) {\n  var subgraph = null;\n\n  // optional subgraph keyword\n  if (token === \"subgraph\") {\n    subgraph = {};\n    subgraph.type = \"subgraph\";\n    getToken();\n\n    // optional graph id\n    if (tokenType === TOKENTYPE.IDENTIFIER) {\n      subgraph.id = token;\n      getToken();\n    }\n  }\n\n  // open angle bracket\n  if (token === \"{\") {\n    getToken();\n\n    if (!subgraph) {\n      subgraph = {};\n    }\n    subgraph.parent = graph;\n    subgraph.node = graph.node;\n    subgraph.edge = graph.edge;\n    subgraph.graph = graph.graph;\n\n    // statements\n    parseStatements(subgraph);\n\n    // close angle bracket\n    if (token != \"}\") {\n      throw newSyntaxError(\"Angle bracket } expected\");\n    }\n    getToken();\n\n    // remove temporary default options\n    delete subgraph.node;\n    delete subgraph.edge;\n    delete subgraph.graph;\n    delete subgraph.parent;\n\n    // register at the parent graph\n    if (!graph.subgraphs) {\n      graph.subgraphs = [];\n    }\n    graph.subgraphs.push(subgraph);\n  }\n\n  return subgraph;\n}\n\n/**\n * parse an attribute statement like \"node [shape=circle fontSize=16]\".\n * Available keywords are 'node', 'edge', 'graph'.\n * The previous list with default attributes will be replaced\n * @param {object} graph\n * @returns {string | null} keyword Returns the name of the parsed attribute\n *                                  (node, edge, graph), or null if nothing\n *                                  is parsed.\n */\nfunction parseAttributeStatement(graph) {\n  // attribute statements\n  if (token === \"node\") {\n    getToken();\n\n    // node attributes\n    graph.node = parseAttributeList();\n    return \"node\";\n  } else if (token === \"edge\") {\n    getToken();\n\n    // edge attributes\n    graph.edge = parseAttributeList();\n    return \"edge\";\n  } else if (token === \"graph\") {\n    getToken();\n\n    // graph attributes\n    graph.graph = parseAttributeList();\n    return \"graph\";\n  }\n\n  return null;\n}\n\n/**\n * parse a node statement\n * @param {object} graph\n * @param {string | number} id\n */\nfunction parseNodeStatement(graph, id) {\n  // node statement\n  var node = {\n    id: id,\n  };\n  var attr = parseAttributeList();\n  if (attr) {\n    node.attr = attr;\n  }\n  addNode(graph, node);\n\n  // edge statements\n  parseEdge(graph, id);\n}\n\n/**\n * Parse an edge or a series of edges\n * @param {object} graph\n * @param {string | number} from        Id of the from node\n */\nfunction parseEdge(graph, from) {\n  while (token === \"->\" || token === \"--\") {\n    var to;\n    var type = token;\n    getToken();\n\n    var subgraph = parseSubgraph(graph);\n    if (subgraph) {\n      to = subgraph;\n    } else {\n      if (tokenType != TOKENTYPE.IDENTIFIER) {\n        throw newSyntaxError(\"Identifier or subgraph expected\");\n      }\n      to = token;\n      addNode(graph, {\n        id: to,\n      });\n      getToken();\n    }\n\n    // parse edge attributes\n    var attr = parseAttributeList();\n\n    // create edge\n    var edge = createEdge(graph, from, to, type, attr);\n    addEdge(graph, edge);\n\n    from = to;\n  }\n}\n\n/**\n * As explained in [1], graphviz has limitations for combination of\n * arrow[head|tail] and dir. If attribute list includes 'dir',\n * following cases just be supported.\n * 1. both or none + arrowhead, arrowtail\n * 2. forward + arrowhead (arrowtail is not affedted)\n * 3. back + arrowtail (arrowhead is not affected)\n * [1] https://www.graphviz.org/doc/info/attrs.html#h:undir_note\n *\n * This function is called from parseAttributeList() to parse 'dir'\n * attribute with given 'attr_names' and 'attr_list'.\n * @param {object} attr_names  Array of attribute names\n * @param {object} attr_list  Array of objects of attribute set\n * @returns {object} attr_list  Updated attr_list\n */\nfunction parseDirAttribute(attr_names, attr_list) {\n  var i;\n  if (attr_names.includes(\"dir\")) {\n    var idx = {}; // get index of 'arrows' and 'dir'\n    idx.arrows = {};\n    for (i = 0; i < attr_list.length; i++) {\n      if (attr_list[i].name === \"arrows\") {\n        if (attr_list[i].value.to != null) {\n          idx.arrows.to = i;\n        } else if (attr_list[i].value.from != null) {\n          idx.arrows.from = i;\n        } else {\n          throw newSyntaxError(\"Invalid value of arrows\");\n        }\n      } else if (attr_list[i].name === \"dir\") {\n        idx.dir = i;\n      }\n    }\n\n    // first, add default arrow shape if it is not assigned to avoid error\n    var dir_type = attr_list[idx.dir].value;\n    if (!attr_names.includes(\"arrows\")) {\n      if (dir_type === \"both\") {\n        attr_list.push({\n          attr: attr_list[idx.dir].attr,\n          name: \"arrows\",\n          value: { to: { enabled: true } },\n        });\n        idx.arrows.to = attr_list.length - 1;\n        attr_list.push({\n          attr: attr_list[idx.dir].attr,\n          name: \"arrows\",\n          value: { from: { enabled: true } },\n        });\n        idx.arrows.from = attr_list.length - 1;\n      } else if (dir_type === \"forward\") {\n        attr_list.push({\n          attr: attr_list[idx.dir].attr,\n          name: \"arrows\",\n          value: { to: { enabled: true } },\n        });\n        idx.arrows.to = attr_list.length - 1;\n      } else if (dir_type === \"back\") {\n        attr_list.push({\n          attr: attr_list[idx.dir].attr,\n          name: \"arrows\",\n          value: { from: { enabled: true } },\n        });\n        idx.arrows.from = attr_list.length - 1;\n      } else if (dir_type === \"none\") {\n        attr_list.push({\n          attr: attr_list[idx.dir].attr,\n          name: \"arrows\",\n          value: \"\",\n        });\n        idx.arrows.to = attr_list.length - 1;\n      } else {\n        throw newSyntaxError('Invalid dir type \"' + dir_type + '\"');\n      }\n    }\n\n    var from_type;\n    var to_type;\n    // update 'arrows' attribute from 'dir'.\n    if (dir_type === \"both\") {\n      // both of shapes of 'from' and 'to' are given\n      if (idx.arrows.to && idx.arrows.from) {\n        to_type = attr_list[idx.arrows.to].value.to.type;\n        from_type = attr_list[idx.arrows.from].value.from.type;\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.to].attr,\n          name: attr_list[idx.arrows.to].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n        attr_list.splice(idx.arrows.from, 1);\n\n        // shape of 'to' is assigned and use default to 'from'\n      } else if (idx.arrows.to) {\n        to_type = attr_list[idx.arrows.to].value.to.type;\n        from_type = \"arrow\";\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.to].attr,\n          name: attr_list[idx.arrows.to].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n\n        // only shape of 'from' is assigned and use default for 'to'\n      } else if (idx.arrows.from) {\n        to_type = \"arrow\";\n        from_type = attr_list[idx.arrows.from].value.from.type;\n        attr_list[idx.arrows.from] = {\n          attr: attr_list[idx.arrows.from].attr,\n          name: attr_list[idx.arrows.from].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n      }\n    } else if (dir_type === \"back\") {\n      // given both of shapes, but use only 'from'\n      if (idx.arrows.to && idx.arrows.from) {\n        to_type = \"\";\n        from_type = attr_list[idx.arrows.from].value.from.type;\n        attr_list[idx.arrows.from] = {\n          attr: attr_list[idx.arrows.from].attr,\n          name: attr_list[idx.arrows.from].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n\n        // given shape of 'to', but does not use it\n      } else if (idx.arrows.to) {\n        to_type = \"\";\n        from_type = \"arrow\";\n        idx.arrows.from = idx.arrows.to;\n        attr_list[idx.arrows.from] = {\n          attr: attr_list[idx.arrows.from].attr,\n          name: attr_list[idx.arrows.from].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n\n        // assign given 'from' shape\n      } else if (idx.arrows.from) {\n        to_type = \"\";\n        from_type = attr_list[idx.arrows.from].value.from.type;\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.from].attr,\n          name: attr_list[idx.arrows.from].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n      }\n\n      attr_list[idx.arrows.from] = {\n        attr: attr_list[idx.arrows.from].attr,\n        name: attr_list[idx.arrows.from].name,\n        value: {\n          from: {\n            enabled: true,\n            type: attr_list[idx.arrows.from].value.from.type,\n          },\n        },\n      };\n    } else if (dir_type === \"none\") {\n      var idx_arrow;\n      if (idx.arrows.to) {\n        idx_arrow = idx.arrows.to;\n      } else {\n        idx_arrow = idx.arrows.from;\n      }\n\n      attr_list[idx_arrow] = {\n        attr: attr_list[idx_arrow].attr,\n        name: attr_list[idx_arrow].name,\n        value: \"\",\n      };\n    } else if (dir_type === \"forward\") {\n      // given both of shapes, but use only 'to'\n      if (idx.arrows.to && idx.arrows.from) {\n        to_type = attr_list[idx.arrows.to].value.to.type;\n        from_type = \"\";\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.to].attr,\n          name: attr_list[idx.arrows.to].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n\n        // assign given 'to' shape\n      } else if (idx.arrows.to) {\n        to_type = attr_list[idx.arrows.to].value.to.type;\n        from_type = \"\";\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.to].attr,\n          name: attr_list[idx.arrows.to].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n\n        // given shape of 'from', but does not use it\n      } else if (idx.arrows.from) {\n        to_type = \"arrow\";\n        from_type = \"\";\n        idx.arrows.to = idx.arrows.from;\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.to].attr,\n          name: attr_list[idx.arrows.to].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n      }\n\n      attr_list[idx.arrows.to] = {\n        attr: attr_list[idx.arrows.to].attr,\n        name: attr_list[idx.arrows.to].name,\n        value: {\n          to: {\n            enabled: true,\n            type: attr_list[idx.arrows.to].value.to.type,\n          },\n        },\n      };\n    } else {\n      throw newSyntaxError('Invalid dir type \"' + dir_type + '\"');\n    }\n\n    // remove 'dir' attribute no need anymore\n    attr_list.splice(idx.dir, 1);\n  }\n  return attr_list;\n}\n\n/**\n * Parse a set with attributes,\n * for example [label=\"1.000\", shape=solid]\n * @returns {object | null} attr\n */\nfunction parseAttributeList() {\n  var i;\n  var attr = null;\n\n  // edge styles of dot and vis\n  var edgeStyles = {\n    dashed: true,\n    solid: false,\n    dotted: [1, 5],\n  };\n\n  /**\n   * Define arrow types.\n   * vis currently supports types defined in 'arrowTypes'.\n   * Details of arrow shapes are described in\n   * http://www.graphviz.org/content/arrow-shapes\n   */\n  var arrowTypes = {\n    dot: \"circle\",\n    box: \"box\",\n    crow: \"crow\",\n    curve: \"curve\",\n    icurve: \"inv_curve\",\n    normal: \"triangle\",\n    inv: \"inv_triangle\",\n    diamond: \"diamond\",\n    tee: \"bar\",\n    vee: \"vee\",\n  };\n\n  /**\n   * 'attr_list' contains attributes for checking if some of them are affected\n   * later. For instance, both of 'arrowhead' and 'dir' (edge style defined\n   * in DOT) make changes to 'arrows' attribute in vis.\n   */\n  var attr_list = new Array();\n  var attr_names = new Array(); // used for checking the case.\n\n  // parse attributes\n  while (token === \"[\") {\n    getToken();\n    attr = {};\n    while (token !== \"\" && token != \"]\") {\n      if (tokenType != TOKENTYPE.IDENTIFIER) {\n        throw newSyntaxError(\"Attribute name expected\");\n      }\n      var name = token;\n\n      getToken();\n      if (token != \"=\") {\n        throw newSyntaxError(\"Equal sign = expected\");\n      }\n      getToken();\n\n      if (tokenType != TOKENTYPE.IDENTIFIER) {\n        throw newSyntaxError(\"Attribute value expected\");\n      }\n      var value = token;\n\n      // convert from dot style to vis\n      if (name === \"style\") {\n        value = edgeStyles[value];\n      }\n\n      var arrowType;\n      if (name === \"arrowhead\") {\n        arrowType = arrowTypes[value];\n        name = \"arrows\";\n        value = { to: { enabled: true, type: arrowType } };\n      }\n\n      if (name === \"arrowtail\") {\n        arrowType = arrowTypes[value];\n        name = \"arrows\";\n        value = { from: { enabled: true, type: arrowType } };\n      }\n\n      attr_list.push({ attr: attr, name: name, value: value });\n      attr_names.push(name);\n\n      getToken();\n      if (token == \",\") {\n        getToken();\n      }\n    }\n\n    if (token != \"]\") {\n      throw newSyntaxError(\"Bracket ] expected\");\n    }\n    getToken();\n  }\n\n  /**\n   * As explained in [1], graphviz has limitations for combination of\n   * arrow[head|tail] and dir. If attribute list includes 'dir',\n   * following cases just be supported.\n   *   1. both or none + arrowhead, arrowtail\n   *   2. forward + arrowhead (arrowtail is not affedted)\n   *   3. back + arrowtail (arrowhead is not affected)\n   * [1] https://www.graphviz.org/doc/info/attrs.html#h:undir_note\n   */\n  if (attr_names.includes(\"dir\")) {\n    var idx = {}; // get index of 'arrows' and 'dir'\n    idx.arrows = {};\n    for (i = 0; i < attr_list.length; i++) {\n      if (attr_list[i].name === \"arrows\") {\n        if (attr_list[i].value.to != null) {\n          idx.arrows.to = i;\n        } else if (attr_list[i].value.from != null) {\n          idx.arrows.from = i;\n        } else {\n          throw newSyntaxError(\"Invalid value of arrows\");\n        }\n      } else if (attr_list[i].name === \"dir\") {\n        idx.dir = i;\n      }\n    }\n\n    // first, add default arrow shape if it is not assigned to avoid error\n    var dir_type = attr_list[idx.dir].value;\n    if (!attr_names.includes(\"arrows\")) {\n      if (dir_type === \"both\") {\n        attr_list.push({\n          attr: attr_list[idx.dir].attr,\n          name: \"arrows\",\n          value: { to: { enabled: true } },\n        });\n        idx.arrows.to = attr_list.length - 1;\n        attr_list.push({\n          attr: attr_list[idx.dir].attr,\n          name: \"arrows\",\n          value: { from: { enabled: true } },\n        });\n        idx.arrows.from = attr_list.length - 1;\n      } else if (dir_type === \"forward\") {\n        attr_list.push({\n          attr: attr_list[idx.dir].attr,\n          name: \"arrows\",\n          value: { to: { enabled: true } },\n        });\n        idx.arrows.to = attr_list.length - 1;\n      } else if (dir_type === \"back\") {\n        attr_list.push({\n          attr: attr_list[idx.dir].attr,\n          name: \"arrows\",\n          value: { from: { enabled: true } },\n        });\n        idx.arrows.from = attr_list.length - 1;\n      } else if (dir_type === \"none\") {\n        attr_list.push({\n          attr: attr_list[idx.dir].attr,\n          name: \"arrows\",\n          value: \"\",\n        });\n        idx.arrows.to = attr_list.length - 1;\n      } else {\n        throw newSyntaxError('Invalid dir type \"' + dir_type + '\"');\n      }\n    }\n\n    var from_type;\n    var to_type;\n    // update 'arrows' attribute from 'dir'.\n    if (dir_type === \"both\") {\n      // both of shapes of 'from' and 'to' are given\n      if (idx.arrows.to && idx.arrows.from) {\n        to_type = attr_list[idx.arrows.to].value.to.type;\n        from_type = attr_list[idx.arrows.from].value.from.type;\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.to].attr,\n          name: attr_list[idx.arrows.to].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n        attr_list.splice(idx.arrows.from, 1);\n\n        // shape of 'to' is assigned and use default to 'from'\n      } else if (idx.arrows.to) {\n        to_type = attr_list[idx.arrows.to].value.to.type;\n        from_type = \"arrow\";\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.to].attr,\n          name: attr_list[idx.arrows.to].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n\n        // only shape of 'from' is assigned and use default for 'to'\n      } else if (idx.arrows.from) {\n        to_type = \"arrow\";\n        from_type = attr_list[idx.arrows.from].value.from.type;\n        attr_list[idx.arrows.from] = {\n          attr: attr_list[idx.arrows.from].attr,\n          name: attr_list[idx.arrows.from].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n      }\n    } else if (dir_type === \"back\") {\n      // given both of shapes, but use only 'from'\n      if (idx.arrows.to && idx.arrows.from) {\n        to_type = \"\";\n        from_type = attr_list[idx.arrows.from].value.from.type;\n        attr_list[idx.arrows.from] = {\n          attr: attr_list[idx.arrows.from].attr,\n          name: attr_list[idx.arrows.from].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n\n        // given shape of 'to', but does not use it\n      } else if (idx.arrows.to) {\n        to_type = \"\";\n        from_type = \"arrow\";\n        idx.arrows.from = idx.arrows.to;\n        attr_list[idx.arrows.from] = {\n          attr: attr_list[idx.arrows.from].attr,\n          name: attr_list[idx.arrows.from].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n\n        // assign given 'from' shape\n      } else if (idx.arrows.from) {\n        to_type = \"\";\n        from_type = attr_list[idx.arrows.from].value.from.type;\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.from].attr,\n          name: attr_list[idx.arrows.from].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n      }\n\n      attr_list[idx.arrows.from] = {\n        attr: attr_list[idx.arrows.from].attr,\n        name: attr_list[idx.arrows.from].name,\n        value: {\n          from: {\n            enabled: true,\n            type: attr_list[idx.arrows.from].value.from.type,\n          },\n        },\n      };\n    } else if (dir_type === \"none\") {\n      var idx_arrow;\n      if (idx.arrows.to) {\n        idx_arrow = idx.arrows.to;\n      } else {\n        idx_arrow = idx.arrows.from;\n      }\n\n      attr_list[idx_arrow] = {\n        attr: attr_list[idx_arrow].attr,\n        name: attr_list[idx_arrow].name,\n        value: \"\",\n      };\n    } else if (dir_type === \"forward\") {\n      // given both of shapes, but use only 'to'\n      if (idx.arrows.to && idx.arrows.from) {\n        to_type = attr_list[idx.arrows.to].value.to.type;\n        from_type = \"\";\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.to].attr,\n          name: attr_list[idx.arrows.to].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n\n        // assign given 'to' shape\n      } else if (idx.arrows.to) {\n        to_type = attr_list[idx.arrows.to].value.to.type;\n        from_type = \"\";\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.to].attr,\n          name: attr_list[idx.arrows.to].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n\n        // given shape of 'from', but does not use it\n      } else if (idx.arrows.from) {\n        to_type = \"arrow\";\n        from_type = \"\";\n        idx.arrows.to = idx.arrows.from;\n        attr_list[idx.arrows.to] = {\n          attr: attr_list[idx.arrows.to].attr,\n          name: attr_list[idx.arrows.to].name,\n          value: {\n            to: { enabled: true, type: to_type },\n            from: { enabled: true, type: from_type },\n          },\n        };\n      }\n\n      attr_list[idx.arrows.to] = {\n        attr: attr_list[idx.arrows.to].attr,\n        name: attr_list[idx.arrows.to].name,\n        value: {\n          to: { enabled: true, type: attr_list[idx.arrows.to].value.to.type },\n        },\n      };\n    } else {\n      throw newSyntaxError('Invalid dir type \"' + dir_type + '\"');\n    }\n\n    // remove 'dir' attribute no need anymore\n    attr_list.splice(idx.dir, 1);\n  }\n\n  // parse 'penwidth'\n  var nof_attr_list;\n  if (attr_names.includes(\"penwidth\")) {\n    var tmp_attr_list = [];\n\n    nof_attr_list = attr_list.length;\n    for (i = 0; i < nof_attr_list; i++) {\n      // exclude 'width' from attr_list if 'penwidth' exists\n      if (attr_list[i].name !== \"width\") {\n        if (attr_list[i].name === \"penwidth\") {\n          attr_list[i].name = \"width\";\n        }\n        tmp_attr_list.push(attr_list[i]);\n      }\n    }\n    attr_list = tmp_attr_list;\n  }\n\n  nof_attr_list = attr_list.length;\n  for (i = 0; i < nof_attr_list; i++) {\n    setValue(attr_list[i].attr, attr_list[i].name, attr_list[i].value);\n  }\n\n  return attr;\n}\n\n/**\n * Create a syntax error with extra information on current token and index.\n * @param {string} message\n * @returns {SyntaxError} err\n */\nfunction newSyntaxError(message) {\n  return new SyntaxError(\n    message + ', got \"' + chop(token, 30) + '\" (char ' + index + \")\",\n  );\n}\n\n/**\n * Chop off text after a maximum length\n * @param {string} text\n * @param {number} maxLength\n * @returns {string}\n */\nfunction chop(text, maxLength) {\n  return text.length <= maxLength ? text : text.substr(0, 27) + \"...\";\n}\n\n/**\n * Execute a function fn for each pair of elements in two arrays\n * @param {Array | *} array1\n * @param {Array | *} array2\n * @param {Function} fn\n */\nfunction forEach2(array1, array2, fn) {\n  if (Array.isArray(array1)) {\n    array1.forEach(function (elem1) {\n      if (Array.isArray(array2)) {\n        array2.forEach(function (elem2) {\n          fn(elem1, elem2);\n        });\n      } else {\n        fn(elem1, array2);\n      }\n    });\n  } else {\n    if (Array.isArray(array2)) {\n      array2.forEach(function (elem2) {\n        fn(array1, elem2);\n      });\n    } else {\n      fn(array1, array2);\n    }\n  }\n}\n\n/**\n * Set a nested property on an object\n * When nested objects are missing, they will be created.\n * For example setProp({}, 'font.color', 'red') will return {font: {color: 'red'}}\n * @param {object} object\n * @param {string} path   A dot separated string like 'font.color'\n * @param {*} value       Value for the property\n * @returns {object} Returns the original object, allows for chaining.\n */\nfunction setProp(object, path, value) {\n  var names = path.split(\".\");\n  var prop = names.pop();\n\n  // traverse over the nested objects\n  var obj = object;\n  for (var i = 0; i < names.length; i++) {\n    var name = names[i];\n    if (!(name in obj)) {\n      obj[name] = {};\n    }\n    obj = obj[name];\n  }\n\n  // set the property value\n  obj[prop] = value;\n\n  return object;\n}\n\n/**\n * Convert an object with DOT attributes to their vis.js equivalents.\n * @param {object} attr     Object with DOT attributes\n * @param {object} mapping\n * @returns {object}         Returns an object with vis.js attributes\n */\nfunction convertAttr(attr, mapping) {\n  var converted = {};\n\n  for (var prop in attr) {\n    if (attr.hasOwnProperty(prop)) {\n      var visProp = mapping[prop];\n      if (Array.isArray(visProp)) {\n        visProp.forEach(function (visPropI) {\n          setProp(converted, visPropI, attr[prop]);\n        });\n      } else if (typeof visProp === \"string\") {\n        setProp(converted, visProp, attr[prop]);\n      } else {\n        setProp(converted, prop, attr[prop]);\n      }\n    }\n  }\n\n  return converted;\n}\n\n/**\n * Convert a string containing a graph in DOT language into a map containing\n * with nodes and edges in the format of graph.\n * @param {string} data         Text containing a graph in DOT-notation\n * @returns {object} graphData\n */\nexport function DOTToGraph(data) {\n  // parse the DOT file\n  var dotData = parseDOT(data);\n  var graphData = {\n    nodes: [],\n    edges: [],\n    options: {},\n  };\n\n  // copy the nodes\n  if (dotData.nodes) {\n    dotData.nodes.forEach(function (dotNode) {\n      var graphNode = {\n        id: dotNode.id,\n        label: String(dotNode.label || dotNode.id),\n      };\n      merge(graphNode, convertAttr(dotNode.attr, NODE_ATTR_MAPPING));\n      if (graphNode.image) {\n        graphNode.shape = \"image\";\n      }\n      graphData.nodes.push(graphNode);\n    });\n  }\n\n  // copy the edges\n  if (dotData.edges) {\n    /**\n     * Convert an edge in DOT format to an edge with VisGraph format\n     * @param {object} dotEdge\n     * @returns {object} graphEdge\n     */\n    var convertEdge = function (dotEdge) {\n      var graphEdge = {\n        from: dotEdge.from,\n        to: dotEdge.to,\n      };\n      merge(graphEdge, convertAttr(dotEdge.attr, EDGE_ATTR_MAPPING));\n\n      // Add arrows attribute to default styled arrow.\n      // The reason why default style is not added in parseAttributeList() is\n      // because only default is cleared before here.\n      if (graphEdge.arrows == null && dotEdge.type === \"->\") {\n        graphEdge.arrows = \"to\";\n      }\n\n      return graphEdge;\n    };\n\n    dotData.edges.forEach(function (dotEdge) {\n      var from, to;\n      if (dotEdge.from instanceof Object) {\n        from = dotEdge.from.nodes;\n      } else {\n        from = {\n          id: dotEdge.from,\n        };\n      }\n\n      if (dotEdge.to instanceof Object) {\n        to = dotEdge.to.nodes;\n      } else {\n        to = {\n          id: dotEdge.to,\n        };\n      }\n\n      if (dotEdge.from instanceof Object && dotEdge.from.edges) {\n        dotEdge.from.edges.forEach(function (subEdge) {\n          var graphEdge = convertEdge(subEdge);\n          graphData.edges.push(graphEdge);\n        });\n      }\n\n      forEach2(from, to, function (from, to) {\n        var subEdge = createEdge(\n          graphData,\n          from.id,\n          to.id,\n          dotEdge.type,\n          dotEdge.attr,\n        );\n        var graphEdge = convertEdge(subEdge);\n        graphData.edges.push(graphEdge);\n      });\n\n      if (dotEdge.to instanceof Object && dotEdge.to.edges) {\n        dotEdge.to.edges.forEach(function (subEdge) {\n          var graphEdge = convertEdge(subEdge);\n          graphData.edges.push(graphEdge);\n        });\n      }\n    });\n  }\n\n  // copy the options\n  if (dotData.attr) {\n    graphData.options = dotData.attr;\n  }\n\n  return graphData;\n}\n\n/* eslint-enable no-var */\n/* eslint-enable no-unused-vars */\n/* eslint-enable no-prototype-builtins */\n",null,null,null,"/**\n * Associates a canvas to a given image, containing a number of renderings\n * of the image at various sizes.\n *\n * This technique is known as 'mipmapping'.\n *\n * NOTE: Images can also be of type 'data:svg+xml`. This code also works\n * for svg, but the mipmapping may not be necessary.\n * @param {Image} image\n */\nclass CachedImage {\n  /**\n   * @ignore\n   */\n  constructor() {\n    this.NUM_ITERATIONS = 4; // Number of items in the coordinates array\n\n    this.image = new Image();\n    this.canvas = document.createElement(\"canvas\");\n  }\n\n  /**\n   * Called when the image has been successfully loaded.\n   */\n  init() {\n    if (this.initialized()) return;\n\n    this.src = this.image.src; // For same interface with Image\n    const w = this.image.width;\n    const h = this.image.height;\n\n    // Ease external access\n    this.width = w;\n    this.height = h;\n\n    const h2 = Math.floor(h / 2);\n    const h4 = Math.floor(h / 4);\n    const h8 = Math.floor(h / 8);\n    const h16 = Math.floor(h / 16);\n\n    const w2 = Math.floor(w / 2);\n    const w4 = Math.floor(w / 4);\n    const w8 = Math.floor(w / 8);\n    const w16 = Math.floor(w / 16);\n\n    // Make canvas as small as possible\n    this.canvas.width = 3 * w4;\n    this.canvas.height = h2;\n\n    // Coordinates and sizes of images contained in the canvas\n    // Values per row:  [top x, left y, width, height]\n\n    this.coordinates = [\n      [0, 0, w2, h2],\n      [w2, 0, w4, h4],\n      [w2, h4, w8, h8],\n      [5 * w8, h4, w16, h16],\n    ];\n\n    this._fillMipMap();\n  }\n\n  /**\n   * @returns {boolean} true if init() has been called, false otherwise.\n   */\n  initialized() {\n    return this.coordinates !== undefined;\n  }\n\n  /**\n   * Redraw main image in various sizes to the context.\n   *\n   * The rationale behind this is to reduce artefacts due to interpolation\n   * at differing zoom levels.\n   *\n   * Source: http://stackoverflow.com/q/18761404/1223531\n   *\n   * This methods takes the resizing out of the drawing loop, in order to\n   * reduce performance overhead.\n   *\n   * TODO: The code assumes that a 2D context can always be gotten. This is\n   * not necessarily true! OTOH, if not true then usage of this class\n   * is senseless.\n   * @private\n   */\n  _fillMipMap() {\n    const ctx = this.canvas.getContext(\"2d\");\n\n    // First zoom-level comes from the image\n    const to = this.coordinates[0];\n    ctx.drawImage(this.image, to[0], to[1], to[2], to[3]);\n\n    // The rest are copy actions internal to the canvas/context\n    for (let iterations = 1; iterations < this.NUM_ITERATIONS; iterations++) {\n      const from = this.coordinates[iterations - 1];\n      const to = this.coordinates[iterations];\n\n      ctx.drawImage(\n        this.canvas,\n        from[0],\n        from[1],\n        from[2],\n        from[3],\n        to[0],\n        to[1],\n        to[2],\n        to[3],\n      );\n    }\n  }\n\n  /**\n   * Draw the image, using the mipmap if necessary.\n   *\n   * MipMap is only used if param factor > 2; otherwise, original bitmap\n   * is resized. This is also used to skip mipmap usage, e.g. by setting factor = 1\n   *\n   * Credits to 'Alex de Mulder' for original implementation.\n   * @param {CanvasRenderingContext2D} ctx  context on which to draw zoomed image\n   * @param {Float} factor scale factor at which to draw\n   * @param {number} left\n   * @param {number} top\n   * @param {number} width\n   * @param {number} height\n   */\n  drawImageAtPosition(ctx, factor, left, top, width, height) {\n    if (!this.i