for example), or a DocumentFragment\n * instance, depending on the contents of the `html` string.\n *\n * @param {String} html - HTML string to \"domify\"\n * @param {Document} doc - The `document` instance to create the Node for\n * @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance\n * @api private\n */\n\nfunction parse(html, doc) {\n if ('string' != typeof html) throw new TypeError('String expected');\n\n // default to the global `document` object\n if (!doc) doc = document;\n\n // tag name\n var m = /<([\\w:]+)/.exec(html);\n if (!m) return doc.createTextNode(html);\n\n html = html.replace(/^\\s+|\\s+$/g, ''); // Remove leading/trailing whitespace\n\n var tag = m[1];\n\n // body support\n if (tag == 'body') {\n var el = doc.createElement('html');\n el.innerHTML = html;\n return el.removeChild(el.lastChild);\n }\n\n // wrap map\n var wrap = Object.prototype.hasOwnProperty.call(map, tag) ? map[tag] : map._default;\n var depth = wrap[0];\n var prefix = wrap[1];\n var suffix = wrap[2];\n var el = doc.createElement('div');\n el.innerHTML = prefix + html + suffix;\n while (depth--) el = el.lastChild;\n\n // one element\n if (el.firstChild == el.lastChild) {\n return el.removeChild(el.firstChild);\n }\n\n // several elements\n var fragment = doc.createDocumentFragment();\n while (el.firstChild) {\n fragment.appendChild(el.removeChild(el.firstChild));\n }\n\n return fragment;\n}\n\nvar domify$1 = domify;\n\n/**\n * @param { HTMLElement } element\n * @param { String } selector\n *\n * @return { boolean }\n */\nfunction matches(element, selector) {\n return element && typeof element.matches === 'function' && element.matches(selector) || false;\n}\n\nfunction query(selector, el) {\n el = el || document;\n\n return el.querySelector(selector);\n}\n\nfunction all(selector, el) {\n el = el || document;\n\n return el.querySelectorAll(selector);\n}\n\nfunction remove(el) {\n el.parentNode && el.parentNode.removeChild(el);\n}\n\nexport { assign as assignStyle, attr, classes, clear, closest, delegate, domify$1 as domify, event, matches, query, all as queryAll, remove };\n//# sourceMappingURL=index.esm.js.map\n","function ensureImported(element, target) {\n\n if (element.ownerDocument !== target.ownerDocument) {\n try {\n\n // may fail on webkit\n return target.ownerDocument.importNode(element, true);\n } catch (e) {\n\n // ignore\n }\n }\n\n return element;\n}\n\n/**\n * appendTo utility\n */\n\n\n/**\n * Append a node to a target element and return the appended node.\n *\n * @param {SVGElement} element\n * @param {SVGElement} target\n *\n * @return {SVGElement} the appended node\n */\nfunction appendTo(element, target) {\n return target.appendChild(ensureImported(element, target));\n}\n\n/**\n * append utility\n */\n\n\n/**\n * Append a node to an element\n *\n * @param {SVGElement} element\n * @param {SVGElement} node\n *\n * @return {SVGElement} the element\n */\nfunction append(target, node) {\n appendTo(node, target);\n return target;\n}\n\n/**\n * attribute accessor utility\n */\n\nvar LENGTH_ATTR = 2;\n\nvar CSS_PROPERTIES = {\n 'alignment-baseline': 1,\n 'baseline-shift': 1,\n 'clip': 1,\n 'clip-path': 1,\n 'clip-rule': 1,\n 'color': 1,\n 'color-interpolation': 1,\n 'color-interpolation-filters': 1,\n 'color-profile': 1,\n 'color-rendering': 1,\n 'cursor': 1,\n 'direction': 1,\n 'display': 1,\n 'dominant-baseline': 1,\n 'enable-background': 1,\n 'fill': 1,\n 'fill-opacity': 1,\n 'fill-rule': 1,\n 'filter': 1,\n 'flood-color': 1,\n 'flood-opacity': 1,\n 'font': 1,\n 'font-family': 1,\n 'font-size': LENGTH_ATTR,\n 'font-size-adjust': 1,\n 'font-stretch': 1,\n 'font-style': 1,\n 'font-variant': 1,\n 'font-weight': 1,\n 'glyph-orientation-horizontal': 1,\n 'glyph-orientation-vertical': 1,\n 'image-rendering': 1,\n 'kerning': 1,\n 'letter-spacing': 1,\n 'lighting-color': 1,\n 'marker': 1,\n 'marker-end': 1,\n 'marker-mid': 1,\n 'marker-start': 1,\n 'mask': 1,\n 'opacity': 1,\n 'overflow': 1,\n 'pointer-events': 1,\n 'shape-rendering': 1,\n 'stop-color': 1,\n 'stop-opacity': 1,\n 'stroke': 1,\n 'stroke-dasharray': 1,\n 'stroke-dashoffset': 1,\n 'stroke-linecap': 1,\n 'stroke-linejoin': 1,\n 'stroke-miterlimit': 1,\n 'stroke-opacity': 1,\n 'stroke-width': LENGTH_ATTR,\n 'text-anchor': 1,\n 'text-decoration': 1,\n 'text-rendering': 1,\n 'unicode-bidi': 1,\n 'visibility': 1,\n 'word-spacing': 1,\n 'writing-mode': 1\n};\n\n\nfunction getAttribute(node, name) {\n if (CSS_PROPERTIES[name]) {\n return node.style[name];\n } else {\n return node.getAttributeNS(null, name);\n }\n}\n\nfunction setAttribute(node, name, value) {\n var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n\n var type = CSS_PROPERTIES[hyphenated];\n\n if (type) {\n\n // append pixel unit, unless present\n if (type === LENGTH_ATTR && typeof value === 'number') {\n value = String(value) + 'px';\n }\n\n node.style[hyphenated] = value;\n } else {\n node.setAttributeNS(null, name, value);\n }\n}\n\nfunction setAttributes(node, attrs) {\n\n var names = Object.keys(attrs), i, name;\n\n for (i = 0, name; (name = names[i]); i++) {\n setAttribute(node, name, attrs[name]);\n }\n}\n\n/**\n * Gets or sets raw attributes on a node.\n *\n * @param {SVGElement} node\n * @param {Object} [attrs]\n * @param {String} [name]\n * @param {String} [value]\n *\n * @return {String}\n */\nfunction attr(node, name, value) {\n if (typeof name === 'string') {\n if (value !== undefined) {\n setAttribute(node, name, value);\n } else {\n return getAttribute(node, name);\n }\n } else {\n setAttributes(node, name);\n }\n\n return node;\n}\n\n/**\r\n * Taken from https://github.com/component/classes\r\n *\r\n * Without the component bits.\r\n */\r\n\r\n/**\r\n * toString reference.\r\n */\r\n\r\nconst toString = Object.prototype.toString;\r\n\r\n/**\r\n * Wrap `el` in a `ClassList`.\r\n *\r\n * @param {Element} el\r\n * @return {ClassList}\r\n * @api public\r\n */\r\n\r\nfunction classes(el) {\r\n return new ClassList(el);\r\n}\r\n\r\nfunction ClassList(el) {\r\n if (!el || !el.nodeType) {\r\n throw new Error('A DOM element reference is required');\r\n }\r\n this.el = el;\r\n this.list = el.classList;\r\n}\r\n\r\n/**\r\n * Add class `name` if not already present.\r\n *\r\n * @param {String} name\r\n * @return {ClassList}\r\n * @api public\r\n */\r\n\r\nClassList.prototype.add = function(name) {\r\n this.list.add(name);\r\n return this;\r\n};\r\n\r\n/**\r\n * Remove class `name` when present, or\r\n * pass a regular expression to remove\r\n * any which match.\r\n *\r\n * @param {String|RegExp} name\r\n * @return {ClassList}\r\n * @api public\r\n */\r\n\r\nClassList.prototype.remove = function(name) {\r\n if ('[object RegExp]' == toString.call(name)) {\r\n return this.removeMatching(name);\r\n }\r\n\r\n this.list.remove(name);\r\n return this;\r\n};\r\n\r\n/**\r\n * Remove all classes matching `re`.\r\n *\r\n * @param {RegExp} re\r\n * @return {ClassList}\r\n * @api private\r\n */\r\n\r\nClassList.prototype.removeMatching = function(re) {\r\n const arr = this.array();\r\n for (let i = 0; i < arr.length; i++) {\r\n if (re.test(arr[i])) {\r\n this.remove(arr[i]);\r\n }\r\n }\r\n return this;\r\n};\r\n\r\n/**\r\n * Toggle class `name`, can force state via `force`.\r\n *\r\n * For browsers that support classList, but do not support `force` yet,\r\n * the mistake will be detected and corrected.\r\n *\r\n * @param {String} name\r\n * @param {Boolean} force\r\n * @return {ClassList}\r\n * @api public\r\n */\r\n\r\nClassList.prototype.toggle = function(name, force) {\r\n if ('undefined' !== typeof force) {\r\n if (force !== this.list.toggle(name, force)) {\r\n this.list.toggle(name); // toggle again to correct\r\n }\r\n } else {\r\n this.list.toggle(name);\r\n }\r\n return this;\r\n};\r\n\r\n/**\r\n * Return an array of classes.\r\n *\r\n * @return {Array}\r\n * @api public\r\n */\r\n\r\nClassList.prototype.array = function() {\r\n return Array.from(this.list);\r\n};\r\n\r\n/**\r\n * Check if class `name` is present.\r\n *\r\n * @param {String} name\r\n * @return {ClassList}\r\n * @api public\r\n */\r\n\r\nClassList.prototype.has =\r\n ClassList.prototype.contains = function(name) {\r\n return this.list.contains(name);\r\n };\n\n/**\n * Clear utility\n */\n\n/**\n * Removes all children from the given element\n *\n * @param {SVGElement} element\n * @return {Element} the element (for chaining)\n */\nfunction clear(element) {\n var child;\n\n while ((child = element.firstChild)) {\n element.removeChild(child);\n }\n\n return element;\n}\n\nfunction clone(element) {\n return element.cloneNode(true);\n}\n\nvar ns = {\n svg: 'http://www.w3.org/2000/svg'\n};\n\n/**\n * DOM parsing utility\n */\n\n\nvar SVG_START = '
' + svg + ' ';\n unwrap = true;\n }\n\n var parsed = parseDocument(svg);\n\n if (!unwrap) {\n return parsed;\n }\n\n var fragment = document.createDocumentFragment();\n\n var parent = parsed.firstChild;\n\n while (parent.firstChild) {\n fragment.appendChild(parent.firstChild);\n }\n\n return fragment;\n}\n\nfunction parseDocument(svg) {\n\n var parser;\n\n // parse\n parser = new DOMParser();\n parser.async = false;\n\n return parser.parseFromString(svg, 'text/xml');\n}\n\n/**\n * Create utility for SVG elements\n */\n\n\n\n/**\n * Create a specific type from name or SVG markup.\n *\n * @param {String} name the name or markup of the element\n * @param {Object} [attrs] attributes to set on the element\n *\n * @returns {SVGElement}\n */\nfunction create(name, attrs) {\n var element;\n\n name = name.trim();\n\n if (name.charAt(0) === '<') {\n element = parse(name).firstChild;\n element = document.importNode(element, true);\n } else {\n element = document.createElementNS(ns.svg, name);\n }\n\n if (attrs) {\n attr(element, attrs);\n }\n\n return element;\n}\n\n/**\n * Events handling utility\n */\n\nfunction on(node, event, listener, useCapture) {\n node.addEventListener(event, listener, useCapture);\n}\n\nfunction off(node, event, listener, useCapture) {\n node.removeEventListener(event, listener, useCapture);\n}\n\n/**\n * Geometry helpers\n */\n\n\n// fake node used to instantiate svg geometry elements\nvar node = null;\n\nfunction getNode() {\n if (node === null) {\n node = create('svg');\n }\n\n return node;\n}\n\nfunction extend(object, props) {\n var i, k, keys = Object.keys(props);\n\n for (i = 0; (k = keys[i]); i++) {\n object[k] = props[k];\n }\n\n return object;\n}\n\n\nfunction createPoint(x, y) {\n var point = getNode().createSVGPoint();\n\n switch (arguments.length) {\n case 0:\n return point;\n case 2:\n x = {\n x: x,\n y: y\n };\n break;\n }\n\n return extend(point, x);\n}\n\n/**\n * Create matrix via args.\n *\n * @example\n *\n * createMatrix({ a: 1, b: 1 });\n * createMatrix();\n * createMatrix(1, 2, 0, 0, 30, 20);\n *\n * @return {SVGMatrix}\n */\nfunction createMatrix(a, b, c, d, e, f) {\n var matrix = getNode().createSVGMatrix();\n\n switch (arguments.length) {\n case 0:\n return matrix;\n case 1:\n return extend(matrix, a);\n case 6:\n return extend(matrix, {\n a: a,\n b: b,\n c: c,\n d: d,\n e: e,\n f: f\n });\n }\n}\n\nfunction createTransform(matrix) {\n if (matrix) {\n return getNode().createSVGTransformFromMatrix(matrix);\n } else {\n return getNode().createSVGTransform();\n }\n}\n\n/**\n * Serialization util\n */\n\nvar TEXT_ENTITIES = /([&<>]{1})/g;\nvar ATTR_ENTITIES = /([&<>\\n\\r\"]{1})/g;\n\nvar ENTITY_REPLACEMENT = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '\\''\n};\n\nfunction escape(str, pattern) {\n\n function replaceFn(match, entity) {\n return ENTITY_REPLACEMENT[entity] || entity;\n }\n\n return str.replace(pattern, replaceFn);\n}\n\nfunction serialize(node, output) {\n\n var i, len, attrMap, attrNode, childNodes;\n\n switch (node.nodeType) {\n\n // TEXT\n case 3:\n\n // replace special XML characters\n output.push(escape(node.textContent, TEXT_ENTITIES));\n break;\n\n // ELEMENT\n case 1:\n output.push('<', node.tagName);\n\n if (node.hasAttributes()) {\n attrMap = node.attributes;\n for (i = 0, len = attrMap.length; i < len; ++i) {\n attrNode = attrMap.item(i);\n output.push(' ', attrNode.name, '=\"', escape(attrNode.value, ATTR_ENTITIES), '\"');\n }\n }\n\n if (node.hasChildNodes()) {\n output.push('>');\n childNodes = node.childNodes;\n for (i = 0, len = childNodes.length; i < len; ++i) {\n serialize(childNodes.item(i), output);\n }\n output.push('');\n } else {\n output.push('/>');\n }\n break;\n\n // COMMENT\n case 8:\n output.push('');\n break;\n\n // CDATA\n case 4:\n output.push('');\n break;\n\n default:\n throw new Error('unable to handle node ' + node.nodeType);\n }\n\n return output;\n}\n\n/**\n * innerHTML like functionality for SVG elements.\n * based on innerSVG (https://code.google.com/p/innersvg)\n */\n\n\n\nfunction set(element, svg) {\n\n var parsed = parse(svg);\n\n // clear element contents\n clear(element);\n\n if (!svg) {\n return;\n }\n\n if (!isFragment(parsed)) {\n\n // extract
from parsed document\n parsed = parsed.documentElement;\n }\n\n var nodes = slice(parsed.childNodes);\n\n // import + append each node\n for (var i = 0; i < nodes.length; i++) {\n appendTo(nodes[i], element);\n }\n\n}\n\nfunction get(element) {\n var child = element.firstChild,\n output = [];\n\n while (child) {\n serialize(child, output);\n child = child.nextSibling;\n }\n\n return output.join('');\n}\n\nfunction isFragment(node) {\n return node.nodeName === '#document-fragment';\n}\n\nfunction innerSVG(element, svg) {\n\n if (svg !== undefined) {\n\n try {\n set(element, svg);\n } catch (e) {\n throw new Error('error parsing SVG: ' + e.message);\n }\n\n return element;\n } else {\n return get(element);\n }\n}\n\n\nfunction slice(arr) {\n return Array.prototype.slice.call(arr);\n}\n\n/**\n * Selection utilities\n */\n\nfunction select(node, selector) {\n return node.querySelector(selector);\n}\n\nfunction selectAll(node, selector) {\n var nodes = node.querySelectorAll(selector);\n\n return [].map.call(nodes, function(element) {\n return element;\n });\n}\n\n/**\n * prependTo utility\n */\n\n\n/**\n * Prepend a node to a target element and return the prepended node.\n *\n * @param {SVGElement} node\n * @param {SVGElement} target\n *\n * @return {SVGElement} the prepended node\n */\nfunction prependTo(node, target) {\n return target.insertBefore(ensureImported(node, target), target.firstChild || null);\n}\n\n/**\n * prepend utility\n */\n\n\n/**\n * Prepend a node to a target element\n *\n * @param {SVGElement} target\n * @param {SVGElement} node\n *\n * @return {SVGElement} the target element\n */\nfunction prepend(target, node) {\n prependTo(node, target);\n return target;\n}\n\nfunction remove(element) {\n var parent = element.parentNode;\n\n if (parent) {\n parent.removeChild(element);\n }\n\n return element;\n}\n\n/**\n * Replace utility\n */\n\n\nfunction replace(element, replacement) {\n element.parentNode.replaceChild(ensureImported(replacement, element), element);\n return replacement;\n}\n\n/**\n * transform accessor utility\n */\n\nfunction wrapMatrix(transformList, transform) {\n if (transform instanceof SVGMatrix) {\n return transformList.createSVGTransformFromMatrix(transform);\n }\n\n return transform;\n}\n\n\nfunction setTransforms(transformList, transforms) {\n var i, t;\n\n transformList.clear();\n\n for (i = 0; (t = transforms[i]); i++) {\n transformList.appendItem(wrapMatrix(transformList, t));\n }\n}\n\n/**\n * Get or set the transforms on the given node.\n *\n * @param {SVGElement} node\n * @param {SVGTransform|SVGMatrix|Array} [transforms]\n *\n * @return {SVGTransform} the consolidated transform\n */\nfunction transform(node, transforms) {\n var transformList = node.transform.baseVal;\n\n if (transforms) {\n\n if (!Array.isArray(transforms)) {\n transforms = [ transforms ];\n }\n\n setTransforms(transformList, transforms);\n }\n\n return transformList.consolidate();\n}\n\nexport { append, appendTo, attr, classes, clear, clone, create, createMatrix, createPoint, createTransform, innerSVG, off, on, prepend, prependTo, remove, replace, select, selectAll, transform };\n","const CLASS_PATTERN = /^class[ {]/;\n\n\n/**\n * @param {function} fn\n *\n * @return {boolean}\n */\nfunction isClass(fn) {\n return CLASS_PATTERN.test(fn.toString());\n}\n\n/**\n * @param {any} obj\n *\n * @return {boolean}\n */\nfunction isArray(obj) {\n return Array.isArray(obj);\n}\n\n/**\n * @param {any} obj\n * @param {string} prop\n *\n * @return {boolean}\n */\nfunction hasOwnProp(obj, prop) {\n return Object.prototype.hasOwnProperty.call(obj, prop);\n}\n\n/**\n * @typedef {import('./index.js').InjectAnnotated } InjectAnnotated\n */\n\n/**\n * @template T\n *\n * @params {[...string[], T] | ...string[], T} args\n *\n * @return {T & InjectAnnotated}\n */\nfunction annotate(...args) {\n\n if (args.length === 1 && isArray(args[0])) {\n args = args[0];\n }\n\n args = [ ...args ];\n\n const fn = args.pop();\n\n fn.$inject = args;\n\n return fn;\n}\n\n\n// Current limitations:\n// - can't put into \"function arg\" comments\n// function /* (no parenthesis like this) */ (){}\n// function abc( /* xx (no parenthesis like this) */ a, b) {}\n//\n// Just put the comment before function or inside:\n// /* (((this is fine))) */ function(a, b) {}\n// function abc(a) { /* (((this is fine))) */}\n//\n// - can't reliably auto-annotate constructor; we'll match the\n// first constructor(...) pattern found which may be the one\n// of a nested class, too.\n\nconst CONSTRUCTOR_ARGS = /constructor\\s*[^(]*\\(\\s*([^)]*)\\)/m;\nconst FN_ARGS = /^(?:async\\s+)?(?:function\\s*[^(]*)?(?:\\(\\s*([^)]*)\\)|(\\w+))/m;\nconst FN_ARG = /\\/\\*([^*]*)\\*\\//m;\n\n/**\n * @param {unknown} fn\n *\n * @return {string[]}\n */\nfunction parseAnnotations(fn) {\n\n if (typeof fn !== 'function') {\n throw new Error(`Cannot annotate \"${fn}\". Expected a function!`);\n }\n\n const match = fn.toString().match(isClass(fn) ? CONSTRUCTOR_ARGS : FN_ARGS);\n\n // may parse class without constructor\n if (!match) {\n return [];\n }\n\n const args = match[1] || match[2];\n\n return args && args.split(',').map(arg => {\n const argMatch = arg.match(FN_ARG);\n return (argMatch && argMatch[1] || arg).trim();\n }) || [];\n}\n\n/**\n * @typedef { import('./index.js').ModuleDeclaration } ModuleDeclaration\n * @typedef { import('./index.js').ModuleDefinition } ModuleDefinition\n * @typedef { import('./index.js').InjectorContext } InjectorContext\n *\n * @typedef { import('./index.js').TypedDeclaration } TypedDeclaration\n */\n\n/**\n * Create a new injector with the given modules.\n *\n * @param {ModuleDefinition[]} modules\n * @param {InjectorContext} [_parent]\n */\nfunction Injector(modules, _parent) {\n\n const parent = _parent || /** @type InjectorContext */ ({\n get: function(name, strict) {\n currentlyResolving.push(name);\n\n if (strict === false) {\n return null;\n } else {\n throw error(`No provider for \"${ name }\"!`);\n }\n }\n });\n\n const currentlyResolving = [];\n const providers = this._providers = Object.create(parent._providers || null);\n const instances = this._instances = Object.create(null);\n\n const self = instances.injector = this;\n\n const error = function(msg) {\n const stack = currentlyResolving.join(' -> ');\n currentlyResolving.length = 0;\n return new Error(stack ? `${ msg } (Resolving: ${ stack })` : msg);\n };\n\n /**\n * Return a named service.\n *\n * @param {string} name\n * @param {boolean} [strict=true] if false, resolve missing services to null\n *\n * @return {any}\n */\n function get(name, strict) {\n if (!providers[name] && name.includes('.')) {\n\n const parts = name.split('.');\n let pivot = get(/** @type { string } */ (parts.shift()));\n\n while (parts.length) {\n pivot = pivot[/** @type { string } */ (parts.shift())];\n }\n\n return pivot;\n }\n\n if (hasOwnProp(instances, name)) {\n return instances[name];\n }\n\n if (hasOwnProp(providers, name)) {\n if (currentlyResolving.indexOf(name) !== -1) {\n currentlyResolving.push(name);\n throw error('Cannot resolve circular dependency!');\n }\n\n currentlyResolving.push(name);\n instances[name] = providers[name][0](providers[name][1]);\n currentlyResolving.pop();\n\n return instances[name];\n }\n\n return parent.get(name, strict);\n }\n\n function fnDef(fn, locals) {\n\n if (typeof locals === 'undefined') {\n locals = {};\n }\n\n if (typeof fn !== 'function') {\n if (isArray(fn)) {\n fn = annotate(fn.slice());\n } else {\n throw error(`Cannot invoke \"${ fn }\". Expected a function!`);\n }\n }\n\n /**\n * @type {string[]}\n */\n const inject = fn.$inject || parseAnnotations(fn);\n const dependencies = inject.map(dep => {\n if (hasOwnProp(locals, dep)) {\n return locals[dep];\n } else {\n return get(dep);\n }\n });\n\n return {\n fn: fn,\n dependencies\n };\n }\n\n /**\n * Instantiate the given type, injecting dependencies.\n *\n * @template T\n *\n * @param { Function | [...string[], Function ]} type\n *\n * @return T\n */\n function instantiate(type) {\n const {\n fn,\n dependencies\n } = fnDef(type);\n\n // instantiate var args constructor\n const Constructor = Function.prototype.bind.call(fn, null, ...dependencies);\n\n return new Constructor();\n }\n\n /**\n * Invoke the given function, injecting dependencies. Return the result.\n *\n * @template T\n *\n * @param { Function | [...string[], Function ]} func\n * @param { Object } [context]\n * @param { Object } [locals]\n *\n * @return {T} invocation result\n */\n function invoke(func, context, locals) {\n const {\n fn,\n dependencies\n } = fnDef(func, locals);\n\n return fn.apply(context, dependencies);\n }\n\n /**\n * @param {Injector} childInjector\n *\n * @return {Function}\n */\n function createPrivateInjectorFactory(childInjector) {\n return annotate(key => childInjector.get(key));\n }\n\n /**\n * @param {ModuleDefinition[]} modules\n * @param {string[]} [forceNewInstances]\n *\n * @return {Injector}\n */\n function createChild(modules, forceNewInstances) {\n if (forceNewInstances && forceNewInstances.length) {\n const fromParentModule = Object.create(null);\n const matchedScopes = Object.create(null);\n\n const privateInjectorsCache = [];\n const privateChildInjectors = [];\n const privateChildFactories = [];\n\n let provider;\n let cacheIdx;\n let privateChildInjector;\n let privateChildInjectorFactory;\n\n for (let name in providers) {\n provider = providers[name];\n\n if (forceNewInstances.indexOf(name) !== -1) {\n if (provider[2] === 'private') {\n cacheIdx = privateInjectorsCache.indexOf(provider[3]);\n if (cacheIdx === -1) {\n privateChildInjector = provider[3].createChild([], forceNewInstances);\n privateChildInjectorFactory = createPrivateInjectorFactory(privateChildInjector);\n privateInjectorsCache.push(provider[3]);\n privateChildInjectors.push(privateChildInjector);\n privateChildFactories.push(privateChildInjectorFactory);\n fromParentModule[name] = [ privateChildInjectorFactory, name, 'private', privateChildInjector ];\n } else {\n fromParentModule[name] = [ privateChildFactories[cacheIdx], name, 'private', privateChildInjectors[cacheIdx] ];\n }\n } else {\n fromParentModule[name] = [ provider[2], provider[1] ];\n }\n matchedScopes[name] = true;\n }\n\n if ((provider[2] === 'factory' || provider[2] === 'type') && provider[1].$scope) {\n /* jshint -W083 */\n forceNewInstances.forEach(scope => {\n if (provider[1].$scope.indexOf(scope) !== -1) {\n fromParentModule[name] = [ provider[2], provider[1] ];\n matchedScopes[scope] = true;\n }\n });\n }\n }\n\n forceNewInstances.forEach(scope => {\n if (!matchedScopes[scope]) {\n throw new Error('No provider for \"' + scope + '\". Cannot use provider from the parent!');\n }\n });\n\n modules.unshift(fromParentModule);\n }\n\n return new Injector(modules, self);\n }\n\n const factoryMap = {\n factory: invoke,\n type: instantiate,\n value: function(value) {\n return value;\n }\n };\n\n /**\n * @param {ModuleDefinition} moduleDefinition\n * @param {Injector} injector\n */\n function createInitializer(moduleDefinition, injector) {\n\n const initializers = moduleDefinition.__init__ || [];\n\n return function() {\n initializers.forEach(initializer => {\n\n // eagerly resolve component (fn or string)\n if (typeof initializer === 'string') {\n injector.get(initializer);\n } else {\n injector.invoke(initializer);\n }\n });\n };\n }\n\n /**\n * @param {ModuleDefinition} moduleDefinition\n */\n function loadModule(moduleDefinition) {\n\n const moduleExports = moduleDefinition.__exports__;\n\n // private module\n if (moduleExports) {\n const nestedModules = moduleDefinition.__modules__;\n\n const clonedModule = Object.keys(moduleDefinition).reduce((clonedModule, key) => {\n\n if (key !== '__exports__' && key !== '__modules__' && key !== '__init__' && key !== '__depends__') {\n clonedModule[key] = moduleDefinition[key];\n }\n\n return clonedModule;\n }, Object.create(null));\n\n const childModules = (nestedModules || []).concat(clonedModule);\n\n const privateInjector = createChild(childModules);\n const getFromPrivateInjector = annotate(function(key) {\n return privateInjector.get(key);\n });\n\n moduleExports.forEach(function(key) {\n providers[key] = [ getFromPrivateInjector, key, 'private', privateInjector ];\n });\n\n // ensure child injector initializes\n const initializers = (moduleDefinition.__init__ || []).slice();\n\n initializers.unshift(function() {\n privateInjector.init();\n });\n\n moduleDefinition = Object.assign({}, moduleDefinition, {\n __init__: initializers\n });\n\n return createInitializer(moduleDefinition, privateInjector);\n }\n\n // normal module\n Object.keys(moduleDefinition).forEach(function(key) {\n\n if (key === '__init__' || key === '__depends__') {\n return;\n }\n\n const typeDeclaration = /** @type { TypedDeclaration } */ (\n moduleDefinition[key]\n );\n\n if (typeDeclaration[2] === 'private') {\n providers[key] = typeDeclaration;\n return;\n }\n\n const type = typeDeclaration[0];\n const value = typeDeclaration[1];\n\n providers[key] = [ factoryMap[type], arrayUnwrap(type, value), type ];\n });\n\n return createInitializer(moduleDefinition, self);\n }\n\n /**\n * @param {ModuleDefinition[]} moduleDefinitions\n * @param {ModuleDefinition} moduleDefinition\n *\n * @return {ModuleDefinition[]}\n */\n function resolveDependencies(moduleDefinitions, moduleDefinition) {\n\n if (moduleDefinitions.indexOf(moduleDefinition) !== -1) {\n return moduleDefinitions;\n }\n\n moduleDefinitions = (moduleDefinition.__depends__ || []).reduce(resolveDependencies, moduleDefinitions);\n\n if (moduleDefinitions.indexOf(moduleDefinition) !== -1) {\n return moduleDefinitions;\n }\n\n return moduleDefinitions.concat(moduleDefinition);\n }\n\n /**\n * @param {ModuleDefinition[]} moduleDefinitions\n *\n * @return { () => void } initializerFn\n */\n function bootstrap(moduleDefinitions) {\n\n const initializers = moduleDefinitions\n .reduce(resolveDependencies, [])\n .map(loadModule);\n\n let initialized = false;\n\n return function() {\n\n if (initialized) {\n return;\n }\n\n initialized = true;\n\n initializers.forEach(initializer => initializer());\n };\n }\n\n // public API\n this.get = get;\n this.invoke = invoke;\n this.instantiate = instantiate;\n this.createChild = createChild;\n\n // setup\n this.init = bootstrap(modules);\n}\n\n\n// helpers ///////////////\n\nfunction arrayUnwrap(type, value) {\n if (type !== 'value' && isArray(value)) {\n value = annotate(value.slice());\n }\n\n return value;\n}\n\nexport { Injector, annotate, parseAnnotations };\n//# sourceMappingURL=index.js.map\n","var DEFAULT_RENDER_PRIORITY = 1000;\n\n/**\n * @typedef {import('../core/Types').ElementLike} Element\n * @typedef {import('../core/Types').ConnectionLike} Connection\n * @typedef {import('../core/Types').ShapeLike} Shape\n *\n * @typedef {import('../core/EventBus').default} EventBus\n */\n\n/**\n * The base implementation of shape and connection renderers.\n *\n * @param {EventBus} eventBus\n * @param {number} [renderPriority=1000]\n */\nexport default function BaseRenderer(eventBus, renderPriority) {\n var self = this;\n\n renderPriority = renderPriority || DEFAULT_RENDER_PRIORITY;\n\n eventBus.on([ 'render.shape', 'render.connection' ], renderPriority, function(evt, context) {\n var type = evt.type,\n element = context.element,\n visuals = context.gfx,\n attrs = context.attrs;\n\n if (self.canRender(element)) {\n if (type === 'render.shape') {\n return self.drawShape(visuals, element, attrs);\n } else {\n return self.drawConnection(visuals, element, attrs);\n }\n }\n });\n\n eventBus.on([ 'render.getShapePath', 'render.getConnectionPath' ], renderPriority, function(evt, element) {\n if (self.canRender(element)) {\n if (evt.type === 'render.getShapePath') {\n return self.getShapePath(element);\n } else {\n return self.getConnectionPath(element);\n }\n }\n });\n}\n\n/**\n * Checks whether an element can be rendered.\n *\n * @param {Element} element The element to be rendered.\n *\n * @return {boolean} Whether the element can be rendered.\n */\nBaseRenderer.prototype.canRender = function(element) {};\n\n/**\n * Draws a shape.\n *\n * @param {SVGElement} visuals The SVG element to draw the shape into.\n * @param {Shape} shape The shape to be drawn.\n *\n * @return {SVGElement} The SVG element of the shape drawn.\n */\nBaseRenderer.prototype.drawShape = function(visuals, shape) {};\n\n/**\n * Draws a connection.\n *\n * @param {SVGElement} visuals The SVG element to draw the connection into.\n * @param {Connection} connection The connection to be drawn.\n *\n * @return {SVGElement} The SVG element of the connection drawn.\n */\nBaseRenderer.prototype.drawConnection = function(visuals, connection) {};\n\n/**\n * Gets the SVG path of the graphical representation of a shape.\n *\n * @param {Shape} shape The shape.\n *\n * @return {string} The SVG path of the shape.\n */\nBaseRenderer.prototype.getShapePath = function(shape) {};\n\n/**\n * Gets the SVG path of the graphical representation of a connection.\n *\n * @param {Connection} connection The connection.\n *\n * @return {string} The SVG path of the connection.\n */\nBaseRenderer.prototype.getConnectionPath = function(connection) {};\n","import {\n isNumber\n} from 'min-dash';\n\nimport {\n attr as svgAttr,\n create as svgCreate\n} from 'tiny-svg';\n\n\n/**\n * @typedef {(string|number)[]} Component\n *\n * @typedef {import('../util/Types').Point} Point\n */\n\n/**\n * @param {Component[] | Component[][]} elements\n *\n * @return {string}\n */\nexport function componentsToPath(elements) {\n return elements.flat().join(',').replace(/,?([A-z]),?/g, '$1');\n}\n\n/**\n * @param {Point[]} points\n *\n * @return {string}\n */\nexport function toSVGPoints(points) {\n var result = '';\n\n for (var i = 0, p; (p = points[i]); i++) {\n result += p.x + ',' + p.y + ' ';\n }\n\n return result;\n}\n\n/**\n * @param {Point} point\n *\n * @return {Component[]}\n */\nfunction move(point) {\n return [ 'M', point.x, point.y ];\n}\n\n/**\n * @param {Point} point\n *\n * @return {Component[]}\n */\nfunction lineTo(point) {\n return [ 'L', point.x, point.y ];\n}\n\n/**\n * @param {Point} p1\n * @param {Point} p2\n * @param {Point} p3\n *\n * @return {Component[]}\n */\nfunction curveTo(p1, p2, p3) {\n return [ 'C', p1.x, p1.y, p2.x, p2.y, p3.x, p3.y ];\n}\n\n/**\n * @param {Point[]} waypoints\n * @param {number} [cornerRadius]\n * @return {Component[][]}\n */\nfunction drawPath(waypoints, cornerRadius) {\n const pointCount = waypoints.length;\n\n const path = [ move(waypoints[0]) ];\n\n for (let i = 1; i < pointCount; i++) {\n\n const pointBefore = waypoints[i - 1];\n const point = waypoints[i];\n const pointAfter = waypoints[i + 1];\n\n if (!pointAfter || !cornerRadius) {\n path.push(lineTo(point));\n\n continue;\n }\n\n const effectiveRadius = Math.min(\n cornerRadius,\n vectorLength(point.x - pointBefore.x, point.y - pointBefore.y),\n vectorLength(pointAfter.x - point.x, pointAfter.y - point.y)\n );\n\n if (!effectiveRadius) {\n path.push(lineTo(point));\n\n continue;\n }\n\n const beforePoint = getPointAtLength(point, pointBefore, effectiveRadius);\n const beforePoint2 = getPointAtLength(point, pointBefore, effectiveRadius * .5);\n\n const afterPoint = getPointAtLength(point, pointAfter, effectiveRadius);\n const afterPoint2 = getPointAtLength(point, pointAfter, effectiveRadius * .5);\n\n path.push(lineTo(beforePoint));\n path.push(curveTo(beforePoint2, afterPoint2, afterPoint));\n }\n\n return path;\n}\n\nfunction getPointAtLength(start, end, length) {\n\n const deltaX = end.x - start.x;\n const deltaY = end.y - start.y;\n\n const totalLength = vectorLength(deltaX, deltaY);\n\n const percent = length / totalLength;\n\n return {\n x: start.x + deltaX * percent,\n y: start.y + deltaY * percent\n };\n}\n\nfunction vectorLength(x, y) {\n return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));\n}\n\n/**\n * @param {Point[]} points\n * @param {number|Object} [attrs]\n * @param {number} [radius]\n *\n * @return {SVGElement}\n */\nexport function createLine(points, attrs, radius) {\n\n if (isNumber(attrs)) {\n radius = attrs;\n attrs = null;\n }\n\n if (!attrs) {\n attrs = {};\n }\n\n const line = svgCreate('path', attrs);\n\n if (isNumber(radius)) {\n line.dataset.cornerRadius = String(radius);\n }\n\n return updateLine(line, points);\n}\n\n/**\n * @param {SVGElement} gfx\n * @param {Point[]} points\n *\n * @return {SVGElement}\n */\nexport function updateLine(gfx, points) {\n\n const cornerRadius = parseInt(gfx.dataset.cornerRadius, 10) || 0;\n\n svgAttr(gfx, {\n d: componentsToPath(drawPath(points, cornerRadius))\n });\n\n return gfx;\n}\n","import {\n assign,\n filter,\n find,\n isArray,\n isNumber,\n isObject,\n isUndefined,\n groupBy,\n forEach\n} from 'min-dash';\n\n/**\n * @typedef {import('../model/Types').Connection} Connection\n * @typedef {import('../model/Types').Element} Element\n * @typedef {import('../model/Types').Shape} Shape\n *\n * @typedef {import('../../type/Types').Rect} Rect\n *\n * @typedef { {\n * allShapes: Record,\n * allConnections: Record,\n * topLevel: Record,\n * enclosedConnections: Record,\n * enclosedElements: Record\n * } } Closure\n */\n\n/**\n * Get parent elements.\n *\n * @param {Element[]} elements\n *\n * @return {Element[]}\n */\nexport function getParents(elements) {\n\n // find elements that are not children of any other elements\n return filter(elements, function(element) {\n return !find(elements, function(e) {\n return e !== element && getParent(element, e);\n });\n });\n}\n\n\nfunction getParent(element, parent) {\n if (!parent) {\n return;\n }\n\n if (element === parent) {\n return parent;\n }\n\n if (!element.parent) {\n return;\n }\n\n return getParent(element.parent, parent);\n}\n\n\n/**\n * Adds an element to a collection and returns true if the\n * element was added.\n *\n * @param {Object[]} elements\n * @param {Object} element\n * @param {boolean} [unique]\n */\nexport function add(elements, element, unique) {\n var canAdd = !unique || elements.indexOf(element) === -1;\n\n if (canAdd) {\n elements.push(element);\n }\n\n return canAdd;\n}\n\n\n/**\n * Iterate over each element in a collection, calling the iterator function `fn`\n * with (element, index, recursionDepth).\n *\n * Recurse into all elements that are returned by `fn`.\n *\n * @param {Element|Element[]} elements\n * @param {(element: Element, index: number, depth: number) => Element[] | boolean | undefined} fn\n * @param {number} [depth] maximum recursion depth\n */\nexport function eachElement(elements, fn, depth) {\n\n depth = depth || 0;\n\n if (!isArray(elements)) {\n elements = [ elements ];\n }\n\n forEach(elements, function(s, i) {\n var filter = fn(s, i, depth);\n\n if (isArray(filter) && filter.length) {\n eachElement(filter, fn, depth + 1);\n }\n });\n}\n\n\n/**\n * Collects self + child elements up to a given depth from a list of elements.\n *\n * @param {Element|Element[]} elements the elements to select the children from\n * @param {boolean} unique whether to return a unique result set (no duplicates)\n * @param {number} maxDepth the depth to search through or -1 for infinite\n *\n * @return {Element[]} found elements\n */\nexport function selfAndChildren(elements, unique, maxDepth) {\n var result = [],\n processedChildren = [];\n\n eachElement(elements, function(element, i, depth) {\n add(result, element, unique);\n\n var children = element.children;\n\n // max traversal depth not reached yet\n if (maxDepth === -1 || depth < maxDepth) {\n\n // children exist && children not yet processed\n if (children && add(processedChildren, children, unique)) {\n return children;\n }\n }\n });\n\n return result;\n}\n\n/**\n * Return self + direct children for a number of elements\n *\n * @param {Element[]} elements to query\n * @param {boolean} [allowDuplicates] to allow duplicates in the result set\n *\n * @return {Element[]} the collected elements\n */\nexport function selfAndDirectChildren(elements, allowDuplicates) {\n return selfAndChildren(elements, !allowDuplicates, 1);\n}\n\n\n/**\n * Return self + ALL children for a number of elements\n *\n * @param {Element[]} elements to query\n * @param {boolean} [allowDuplicates] to allow duplicates in the result set\n *\n * @return {Element[]} the collected elements\n */\nexport function selfAndAllChildren(elements, allowDuplicates) {\n return selfAndChildren(elements, !allowDuplicates, -1);\n}\n\n\n/**\n * Gets the the closure for all selected elements,\n * their enclosed children and connections.\n *\n * @param {Element[]} elements\n * @param {boolean} [isTopLevel=true]\n * @param {Closure} [closure]\n *\n * @return {Closure} newClosure\n */\nexport function getClosure(elements, isTopLevel, closure) {\n\n if (isUndefined(isTopLevel)) {\n isTopLevel = true;\n }\n\n if (isObject(isTopLevel)) {\n closure = isTopLevel;\n isTopLevel = true;\n }\n\n\n closure = closure || {};\n\n var allShapes = copyObject(closure.allShapes),\n allConnections = copyObject(closure.allConnections),\n enclosedElements = copyObject(closure.enclosedElements),\n enclosedConnections = copyObject(closure.enclosedConnections);\n\n var topLevel = copyObject(\n closure.topLevel,\n isTopLevel && groupBy(elements, function(e) { return e.id; })\n );\n\n\n function handleConnection(c) {\n if (topLevel[c.source.id] && topLevel[c.target.id]) {\n topLevel[c.id] = [ c ];\n }\n\n // not enclosed as a child, but maybe logically\n // (connecting two moved elements?)\n if (allShapes[c.source.id] && allShapes[c.target.id]) {\n enclosedConnections[c.id] = enclosedElements[c.id] = c;\n }\n\n allConnections[c.id] = c;\n }\n\n function handleElement(element) {\n\n enclosedElements[element.id] = element;\n\n if (element.waypoints) {\n\n // remember connection\n enclosedConnections[element.id] = allConnections[element.id] = element;\n } else {\n\n // remember shape\n allShapes[element.id] = element;\n\n // remember all connections\n forEach(element.incoming, handleConnection);\n\n forEach(element.outgoing, handleConnection);\n\n // recurse into children\n return element.children;\n }\n }\n\n eachElement(elements, handleElement);\n\n return {\n allShapes: allShapes,\n allConnections: allConnections,\n topLevel: topLevel,\n enclosedConnections: enclosedConnections,\n enclosedElements: enclosedElements\n };\n}\n\n/**\n * Returns the surrounding bbox for all elements in\n * the array or the element primitive.\n *\n * @param {Element|Element[]} elements\n * @param {boolean} [stopRecursion=false]\n *\n * @return {Rect}\n */\nexport function getBBox(elements, stopRecursion) {\n\n stopRecursion = !!stopRecursion;\n if (!isArray(elements)) {\n elements = [ elements ];\n }\n\n var minX,\n minY,\n maxX,\n maxY;\n\n forEach(elements, function(element) {\n\n // If element is a connection the bbox must be computed first\n var bbox = element;\n if (element.waypoints && !stopRecursion) {\n bbox = getBBox(element.waypoints, true);\n }\n\n var x = bbox.x,\n y = bbox.y,\n height = bbox.height || 0,\n width = bbox.width || 0;\n\n if (x < minX || minX === undefined) {\n minX = x;\n }\n if (y < minY || minY === undefined) {\n minY = y;\n }\n\n if ((x + width) > maxX || maxX === undefined) {\n maxX = x + width;\n }\n if ((y + height) > maxY || maxY === undefined) {\n maxY = y + height;\n }\n });\n\n return {\n x: minX,\n y: minY,\n height: maxY - minY,\n width: maxX - minX\n };\n}\n\n\n/**\n * Returns all elements that are enclosed from the bounding box.\n *\n * * If bbox.(width|height) is not specified the method returns\n * all elements with element.x/y > bbox.x/y\n * * If only bbox.x or bbox.y is specified, method return all elements with\n * e.x > bbox.x or e.y > bbox.y\n *\n * @param {Element[]} elements List of Elements to search through\n * @param {Rect} bbox the enclosing bbox.\n *\n * @return {Element[]} enclosed elements\n */\nexport function getEnclosedElements(elements, bbox) {\n\n var filteredElements = {};\n\n forEach(elements, function(element) {\n\n var e = element;\n\n if (e.waypoints) {\n e = getBBox(e);\n }\n\n if (!isNumber(bbox.y) && (e.x > bbox.x)) {\n filteredElements[element.id] = element;\n }\n if (!isNumber(bbox.x) && (e.y > bbox.y)) {\n filteredElements[element.id] = element;\n }\n if (e.x > bbox.x && e.y > bbox.y) {\n if (isNumber(bbox.width) && isNumber(bbox.height) &&\n e.width + e.x < bbox.width + bbox.x &&\n e.height + e.y < bbox.height + bbox.y) {\n\n filteredElements[element.id] = element;\n } else if (!isNumber(bbox.width) || !isNumber(bbox.height)) {\n filteredElements[element.id] = element;\n }\n }\n });\n\n return filteredElements;\n}\n\n/**\n * Get the element's type\n *\n * @param {Element} element\n *\n * @return {'connection' | 'shape' | 'root'}\n */\nexport function getType(element) {\n\n if ('waypoints' in element) {\n return 'connection';\n }\n\n if ('x' in element) {\n return 'shape';\n }\n\n return 'root';\n}\n\n/**\n * @param {Element} element\n *\n * @return {boolean}\n */\nexport function isFrameElement(element) {\n return !!(element && element.isFrame);\n}\n\n// helpers ///////////////////////////////\n\nfunction copyObject(src1, src2) {\n return assign({}, src1 || {}, src2 || {});\n}\n","import inherits from 'inherits-browser';\n\nimport BaseRenderer from './BaseRenderer';\n\nimport {\n componentsToPath,\n createLine\n} from '../util/RenderUtil';\n\nimport {\n append as svgAppend,\n attr as svgAttr,\n create as svgCreate\n} from 'tiny-svg';\n\nimport { assign } from 'min-dash';\n\nimport {\n isFrameElement\n} from '../util/Elements';\n\n/**\n * @typedef {import('../core/EventBus').default} EventBus\n * @typedef {import('./Styles').default} Styles\n */\n\n// apply default renderer with lowest possible priority\n// so that it only kicks in if noone else could render\nvar DEFAULT_RENDER_PRIORITY = 1;\n\n/**\n * The default renderer used for shapes and connections.\n *\n * @param {EventBus} eventBus\n * @param {Styles} styles\n */\nexport default function DefaultRenderer(eventBus, styles) {\n\n BaseRenderer.call(this, eventBus, DEFAULT_RENDER_PRIORITY);\n\n this.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: 'fuchsia' });\n this.SHAPE_STYLE = styles.style({ fill: 'white', stroke: 'fuchsia', strokeWidth: 2 });\n this.FRAME_STYLE = styles.style([ 'no-fill' ], { stroke: 'fuchsia', strokeDasharray: 4, strokeWidth: 2 });\n}\n\ninherits(DefaultRenderer, BaseRenderer);\n\n\n/**\n * @private\n */\nDefaultRenderer.prototype.canRender = function() {\n return true;\n};\n\n/**\n * @private\n */\nDefaultRenderer.prototype.drawShape = function drawShape(visuals, element, attrs) {\n var rect = svgCreate('rect');\n\n svgAttr(rect, {\n x: 0,\n y: 0,\n width: element.width || 0,\n height: element.height || 0\n });\n\n if (isFrameElement(element)) {\n svgAttr(rect, assign({}, this.FRAME_STYLE, attrs || {}));\n } else {\n svgAttr(rect, assign({}, this.SHAPE_STYLE, attrs || {}));\n }\n\n svgAppend(visuals, rect);\n\n return rect;\n};\n\n/**\n * @private\n */\nDefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection, attrs) {\n\n var line = createLine(connection.waypoints, assign({}, this.CONNECTION_STYLE, attrs || {}));\n svgAppend(visuals, line);\n\n return line;\n};\n\n/**\n * @private\n */\nDefaultRenderer.prototype.getShapePath = function getShapePath(shape) {\n\n var x = shape.x,\n y = shape.y,\n width = shape.width,\n height = shape.height;\n\n var shapePath = [\n [ 'M', x, y ],\n [ 'l', width, 0 ],\n [ 'l', 0, height ],\n [ 'l', -width, 0 ],\n [ 'z' ]\n ];\n\n return componentsToPath(shapePath);\n};\n\n/**\n * @private\n */\nDefaultRenderer.prototype.getConnectionPath = function getConnectionPath(connection) {\n var waypoints = connection.waypoints;\n\n var idx, point, connectionPath = [];\n\n for (idx = 0; (point = waypoints[idx]); idx++) {\n\n // take invisible docking into account\n // when creating the path\n point = point.original || point;\n\n connectionPath.push([ idx === 0 ? 'M' : 'L', point.x, point.y ]);\n }\n\n return componentsToPath(connectionPath);\n};\n\nDefaultRenderer.$inject = [ 'eventBus', 'styles' ];\n","import DefaultRenderer from './DefaultRenderer';\nimport Styles from './Styles';\n\n/**\n * @type { import('didi').ModuleDeclaration }\n */\nexport default {\n __init__: [ 'defaultRenderer' ],\n defaultRenderer: [ 'type', DefaultRenderer ],\n styles: [ 'type', Styles ]\n};\n","import {\n isArray,\n assign,\n reduce\n} from 'min-dash';\n\n\n/**\n * A component that manages shape styles\n */\nexport default function Styles() {\n\n var defaultTraits = {\n\n 'no-fill': {\n fill: 'none'\n },\n 'no-border': {\n strokeOpacity: 0.0\n },\n 'no-events': {\n pointerEvents: 'none'\n }\n };\n\n var self = this;\n\n /**\n * Builds a style definition from a className, a list of traits and an object\n * of additional attributes.\n *\n * @param {string} className\n * @param {string[]} [traits]\n * @param {Object} [additionalAttrs]\n *\n * @return {Object} the style definition\n */\n this.cls = function(className, traits, additionalAttrs) {\n var attrs = this.style(traits, additionalAttrs);\n\n return assign(attrs, { 'class': className });\n };\n\n /**\n * Builds a style definition from a list of traits and an object of additional\n * attributes.\n *\n * @param {string[]} [traits]\n * @param {Object} additionalAttrs\n *\n * @return {Object} the style definition\n */\n this.style = function(traits, additionalAttrs) {\n\n if (!isArray(traits) && !additionalAttrs) {\n additionalAttrs = traits;\n traits = [];\n }\n\n var attrs = reduce(traits, function(attrs, t) {\n return assign(attrs, defaultTraits[t] || {});\n }, {});\n\n return additionalAttrs ? assign(attrs, additionalAttrs) : attrs;\n };\n\n\n /**\n * Computes a style definition from a list of traits and an object of\n * additional attributes, with custom style definition object.\n *\n * @param {Object} custom\n * @param {string[]} [traits]\n * @param {Object} defaultStyles\n *\n * @return {Object} the style definition\n */\n this.computeStyle = function(custom, traits, defaultStyles) {\n if (!isArray(traits)) {\n defaultStyles = traits;\n traits = [];\n }\n\n return self.style(traits || [], assign({}, defaultStyles, custom || {}));\n };\n}\n","/**\n * Failsafe remove an element from a collection\n *\n * @param {Array} [collection]\n * @param {Object} [element]\n *\n * @return {number} the previous index of the element\n */\nexport function remove(collection, element) {\n\n if (!collection || !element) {\n return -1;\n }\n\n var idx = collection.indexOf(element);\n\n if (idx !== -1) {\n collection.splice(idx, 1);\n }\n\n return idx;\n}\n\n/**\n * Fail save add an element to the given connection, ensuring\n * it does not yet exist.\n *\n * @param {Array} collection\n * @param {Object} element\n * @param {number} [idx]\n */\nexport function add(collection, element, idx) {\n\n if (!collection || !element) {\n return;\n }\n\n if (typeof idx !== 'number') {\n idx = -1;\n }\n\n var currentIdx = collection.indexOf(element);\n\n if (currentIdx !== -1) {\n\n if (currentIdx === idx) {\n\n // nothing to do, position has not changed\n return;\n } else {\n\n if (idx !== -1) {\n\n // remove from current position\n collection.splice(currentIdx, 1);\n } else {\n\n // already exists in collection\n return;\n }\n }\n }\n\n if (idx !== -1) {\n\n // insert at specified position\n collection.splice(idx, 0, element);\n } else {\n\n // push to end\n collection.push(element);\n }\n}\n\n\n/**\n * Fail save get the index of an element in a collection.\n *\n * @param {Array} collection\n * @param {Object} element\n *\n * @return {number} the index or -1 if collection or element do\n * not exist or the element is not contained.\n */\nexport function indexOf(collection, element) {\n\n if (!collection || !element) {\n return -1;\n }\n\n return collection.indexOf(element);\n}\n","import {\n every\n} from 'min-dash';\n\n/**\n * @typedef {import('../util/Types').Axis} Axis\n * @typedef {import('../util/Types').Point} Point\n * @typedef {import('../util/Types').Rect} Rect\n */\n\n/**\n * Computes the distance between two points.\n *\n * @param {Point} a\n * @param {Point} b\n *\n * @return {number} The distance between the two points.\n */\nexport function pointDistance(a, b) {\n if (!a || !b) {\n return -1;\n }\n\n return Math.sqrt(\n Math.pow(a.x - b.x, 2) +\n Math.pow(a.y - b.y, 2)\n );\n}\n\n\n/**\n * Returns true if the point r is on the line between p and q.\n *\n * @param {Point} p\n * @param {Point} q\n * @param {Point} r\n * @param {number} [accuracy=5] The accuracy with which to check (lower is better).\n *\n * @return {boolean}\n */\nexport function pointsOnLine(p, q, r, accuracy) {\n\n if (typeof accuracy === 'undefined') {\n accuracy = 5;\n }\n\n if (!p || !q || !r) {\n return false;\n }\n\n var val = (q.x - p.x) * (r.y - p.y) - (q.y - p.y) * (r.x - p.x),\n dist = pointDistance(p, q);\n\n // @see http://stackoverflow.com/a/907491/412190\n return Math.abs(val / dist) <= accuracy;\n}\n\n\nvar ALIGNED_THRESHOLD = 2;\n\n/**\n * Check whether two points are horizontally or vertically aligned.\n *\n * @param {Point[]|Point} a\n * @param {Point} [b]\n *\n * @return {string|boolean} If and how the two points are aligned ('h', 'v' or `false`).\n */\nexport function pointsAligned(a, b) {\n var points = Array.from(arguments).flat();\n\n const axisMap = {\n 'x': 'v',\n 'y': 'h'\n };\n\n for (const [ axis, orientation ] of Object.entries(axisMap)) {\n if (pointsAlignedOnAxis(axis, points)) {\n return orientation;\n }\n }\n\n return false;\n}\n\n/**\n * @param {Axis} axis\n * @param {Point[]} points\n *\n * @return {boolean}\n */\nexport function pointsAlignedOnAxis(axis, points) {\n const referencePoint = points[0];\n\n return every(points, function(point) {\n return Math.abs(referencePoint[axis] - point[axis]) <= ALIGNED_THRESHOLD;\n });\n}\n\n/**\n * Returns true if the point p is inside the rectangle rect\n *\n * @param {Point} p\n * @param {Rect} rect\n * @param {number} tolerance\n *\n * @return {boolean}\n */\nexport function pointInRect(p, rect, tolerance) {\n tolerance = tolerance || 0;\n\n return p.x > rect.x - tolerance &&\n p.y > rect.y - tolerance &&\n p.x < rect.x + rect.width + tolerance &&\n p.y < rect.y + rect.height + tolerance;\n}\n\n/**\n * Returns a point in the middle of points p and q\n *\n * @param {Point} p\n * @param {Point} q\n *\n * @return {Point} The mid point between the two points.\n */\nexport function getMidPoint(p, q) {\n return {\n x: Math.round(p.x + ((q.x - p.x) / 2.0)),\n y: Math.round(p.y + ((q.y - p.y) / 2.0))\n };\n}\n","/**\n * This file contains source code adapted from Snap.svg (licensed Apache-2.0).\n *\n * @see https://github.com/adobe-webplatform/Snap.svg/blob/master/src/path.js\n */\n\n/* eslint no-fallthrough: \"off\" */\n\nvar p2s = /,?([a-z]),?/gi,\n toFloat = parseFloat,\n math = Math,\n PI = math.PI,\n mmin = math.min,\n mmax = math.max,\n pow = math.pow,\n abs = math.abs,\n pathCommand = /([a-z])[\\s,]*((-?\\d*\\.?\\d*(?:e[-+]?\\d+)?[\\s]*,?[\\s]*)+)/ig,\n pathValues = /(-?\\d*\\.?\\d*(?:e[-+]?\\d+)?)[\\s]*,?[\\s]*/ig;\n\nvar isArray = Array.isArray || function(o) { return o instanceof Array; };\n\nfunction hasProperty(obj, property) {\n return Object.prototype.hasOwnProperty.call(obj, property);\n}\n\nfunction clone(obj) {\n\n if (typeof obj == 'function' || Object(obj) !== obj) {\n return obj;\n }\n\n var res = new obj.constructor;\n\n for (var key in obj) {\n if (hasProperty(obj, key)) {\n res[key] = clone(obj[key]);\n }\n }\n\n return res;\n}\n\nfunction repush(array, item) {\n for (var i = 0, ii = array.length; i < ii; i++) if (array[i] === item) {\n return array.push(array.splice(i, 1)[0]);\n }\n}\n\nfunction cacher(f) {\n\n function newf() {\n\n var arg = Array.prototype.slice.call(arguments, 0),\n args = arg.join('\\u2400'),\n cache = newf.cache = newf.cache || {},\n count = newf.count = newf.count || [];\n\n if (hasProperty(cache, args)) {\n repush(count, args);\n return cache[args];\n }\n\n count.length >= 1e3 && delete cache[count.shift()];\n count.push(args);\n cache[args] = f(...arguments);\n\n return cache[args];\n }\n return newf;\n}\n\nfunction parsePathString(pathString) {\n\n if (!pathString) {\n return null;\n }\n\n var pth = paths(pathString);\n\n if (pth.arr) {\n return clone(pth.arr);\n }\n\n var paramCounts = { a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0 },\n data = [];\n\n if (isArray(pathString) && isArray(pathString[0])) { // rough assumption\n data = clone(pathString);\n }\n\n if (!data.length) {\n\n String(pathString).replace(pathCommand, function(a, b, c) {\n var params = [],\n name = b.toLowerCase();\n\n c.replace(pathValues, function(a, b) {\n b && params.push(+b);\n });\n\n if (name == 'm' && params.length > 2) {\n data.push([ b, ...params.splice(0, 2) ]);\n name = 'l';\n b = b == 'm' ? 'l' : 'L';\n }\n\n while (params.length >= paramCounts[name]) {\n data.push([ b, ...params.splice(0, paramCounts[name]) ]);\n if (!paramCounts[name]) {\n break;\n }\n }\n });\n }\n\n data.toString = paths.toString;\n pth.arr = clone(data);\n\n return data;\n}\n\nfunction paths(ps) {\n var p = paths.ps = paths.ps || {};\n\n if (p[ps]) {\n p[ps].sleep = 100;\n } else {\n p[ps] = {\n sleep: 100\n };\n }\n\n setTimeout(function() {\n for (var key in p) {\n if (hasProperty(p, key) && key != ps) {\n p[key].sleep--;\n !p[key].sleep && delete p[key];\n }\n }\n });\n\n return p[ps];\n}\n\nfunction rectBBox(x, y, width, height) {\n\n if (arguments.length === 1) {\n y = x.y;\n width = x.width;\n height = x.height;\n x = x.x;\n }\n\n return {\n x: x,\n y: y,\n width: width,\n height: height,\n x2: x + width,\n y2: y + height\n };\n}\n\nfunction pathToString() {\n return this.join(',').replace(p2s, '$1');\n}\n\nfunction pathClone(pathArray) {\n var res = clone(pathArray);\n res.toString = pathToString;\n return res;\n}\n\nfunction findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {\n var t1 = 1 - t,\n t13 = pow(t1, 3),\n t12 = pow(t1, 2),\n t2 = t * t,\n t3 = t2 * t,\n x = t13 * p1x + t12 * 3 * t * c1x + t1 * 3 * t * t * c2x + t3 * p2x,\n y = t13 * p1y + t12 * 3 * t * c1y + t1 * 3 * t * t * c2y + t3 * p2y;\n\n return {\n x: fixError(x),\n y: fixError(y)\n };\n}\n\nfunction bezierBBox(points) {\n\n var bbox = curveBBox(...points);\n\n return rectBBox(\n bbox.x0,\n bbox.y0,\n bbox.x1 - bbox.x0,\n bbox.y1 - bbox.y0\n );\n}\n\nfunction isPointInsideBBox(bbox, x, y) {\n return x >= bbox.x &&\n x <= bbox.x + bbox.width &&\n y >= bbox.y &&\n y <= bbox.y + bbox.height;\n}\n\nfunction isBBoxIntersect(bbox1, bbox2) {\n bbox1 = rectBBox(bbox1);\n bbox2 = rectBBox(bbox2);\n return isPointInsideBBox(bbox2, bbox1.x, bbox1.y)\n || isPointInsideBBox(bbox2, bbox1.x2, bbox1.y)\n || isPointInsideBBox(bbox2, bbox1.x, bbox1.y2)\n || isPointInsideBBox(bbox2, bbox1.x2, bbox1.y2)\n || isPointInsideBBox(bbox1, bbox2.x, bbox2.y)\n || isPointInsideBBox(bbox1, bbox2.x2, bbox2.y)\n || isPointInsideBBox(bbox1, bbox2.x, bbox2.y2)\n || isPointInsideBBox(bbox1, bbox2.x2, bbox2.y2)\n || (bbox1.x < bbox2.x2 && bbox1.x > bbox2.x\n || bbox2.x < bbox1.x2 && bbox2.x > bbox1.x)\n && (bbox1.y < bbox2.y2 && bbox1.y > bbox2.y\n || bbox2.y < bbox1.y2 && bbox2.y > bbox1.y);\n}\n\nfunction base3(t, p1, p2, p3, p4) {\n var t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4,\n t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;\n return t * t2 - 3 * p1 + 3 * p2;\n}\n\nfunction bezlen(x1, y1, x2, y2, x3, y3, x4, y4, z) {\n\n if (z == null) {\n z = 1;\n }\n\n z = z > 1 ? 1 : z < 0 ? 0 : z;\n\n var z2 = z / 2,\n n = 12,\n Tvalues = [ -.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816 ],\n Cvalues = [ 0.2491,0.2491,0.2335,0.2335,0.2032,0.2032,0.1601,0.1601,0.1069,0.1069,0.0472,0.0472 ],\n sum = 0;\n\n for (var i = 0; i < n; i++) {\n var ct = z2 * Tvalues[i] + z2,\n xbase = base3(ct, x1, x2, x3, x4),\n ybase = base3(ct, y1, y2, y3, y4),\n comb = xbase * xbase + ybase * ybase;\n\n sum += Cvalues[i] * math.sqrt(comb);\n }\n\n return z2 * sum;\n}\n\n\nfunction intersectLines(x1, y1, x2, y2, x3, y3, x4, y4) {\n\n if (\n mmax(x1, x2) < mmin(x3, x4) ||\n mmin(x1, x2) > mmax(x3, x4) ||\n mmax(y1, y2) < mmin(y3, y4) ||\n mmin(y1, y2) > mmax(y3, y4)\n ) {\n return;\n }\n\n var nx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4),\n ny = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4),\n denominator = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);\n\n if (!denominator) {\n return;\n }\n\n var px = fixError(nx / denominator),\n py = fixError(ny / denominator),\n px2 = +px.toFixed(2),\n py2 = +py.toFixed(2);\n\n if (\n px2 < +mmin(x1, x2).toFixed(2) ||\n px2 > +mmax(x1, x2).toFixed(2) ||\n px2 < +mmin(x3, x4).toFixed(2) ||\n px2 > +mmax(x3, x4).toFixed(2) ||\n py2 < +mmin(y1, y2).toFixed(2) ||\n py2 > +mmax(y1, y2).toFixed(2) ||\n py2 < +mmin(y3, y4).toFixed(2) ||\n py2 > +mmax(y3, y4).toFixed(2)\n ) {\n return;\n }\n\n return { x: px, y: py };\n}\n\nfunction fixError(number) {\n return Math.round(number * 100000000000) / 100000000000;\n}\n\nfunction findBezierIntersections(bez1, bez2, justCount) {\n var bbox1 = bezierBBox(bez1),\n bbox2 = bezierBBox(bez2);\n\n if (!isBBoxIntersect(bbox1, bbox2)) {\n return justCount ? 0 : [];\n }\n\n // As an optimization, lines will have only 1 segment\n\n var l1 = bezlen(...bez1),\n l2 = bezlen(...bez2),\n n1 = isLine(bez1) ? 1 : ~~(l1 / 5) || 1,\n n2 = isLine(bez2) ? 1 : ~~(l2 / 5) || 1,\n dots1 = [],\n dots2 = [],\n xy = {},\n res = justCount ? 0 : [];\n\n for (var i = 0; i < n1 + 1; i++) {\n var p = findDotsAtSegment(...bez1, i / n1);\n dots1.push({ x: p.x, y: p.y, t: i / n1 });\n }\n\n for (i = 0; i < n2 + 1; i++) {\n p = findDotsAtSegment(...bez2, i / n2);\n dots2.push({ x: p.x, y: p.y, t: i / n2 });\n }\n\n for (i = 0; i < n1; i++) {\n\n for (var j = 0; j < n2; j++) {\n var di = dots1[i],\n di1 = dots1[i + 1],\n dj = dots2[j],\n dj1 = dots2[j + 1],\n ci = abs(di1.x - di.x) < .01 ? 'y' : 'x',\n cj = abs(dj1.x - dj.x) < .01 ? 'y' : 'x',\n is = intersectLines(di.x, di.y, di1.x, di1.y, dj.x, dj.y, dj1.x, dj1.y),\n key;\n\n if (is) {\n key = is.x.toFixed(9) + '#' + is.y.toFixed(9);\n\n if (xy[key]) {\n continue;\n }\n\n xy[key] = true;\n\n var t1 = di.t + abs((is[ci] - di[ci]) / (di1[ci] - di[ci])) * (di1.t - di.t),\n t2 = dj.t + abs((is[cj] - dj[cj]) / (dj1[cj] - dj[cj])) * (dj1.t - dj.t);\n\n if (t1 >= 0 && t1 <= 1 && t2 >= 0 && t2 <= 1) {\n\n if (justCount) {\n res++;\n } else {\n res.push({\n x: is.x,\n y: is.y,\n t1: t1,\n t2: t2\n });\n }\n }\n }\n }\n }\n\n return res;\n}\n\n\n/**\n * Find or counts the intersections between two SVG paths.\n *\n * Returns a number in counting mode and a list of intersections otherwise.\n *\n * A single intersection entry contains the intersection coordinates (x, y)\n * as well as additional information regarding the intersecting segments\n * on each path (segment1, segment2) and the relative location of the\n * intersection on these segments (t1, t2).\n *\n * The path may be an SVG path string or a list of path components\n * such as `[ [ 'M', 0, 10 ], [ 'L', 20, 0 ] ]`.\n *\n * @example\n *\n * var intersections = findPathIntersections(\n * 'M0,0L100,100',\n * [ [ 'M', 0, 100 ], [ 'L', 100, 0 ] ]\n * );\n *\n * // intersections = [\n * // { x: 50, y: 50, segment1: 1, segment2: 1, t1: 0.5, t2: 0.5 }\n * // ]\n *\n * @param {String|Array} path1\n * @param {String|Array} path2\n * @param {Boolean} [justCount=false]\n *\n * @return {Array|Number}\n */\nexport default function findPathIntersections(path1, path2, justCount) {\n path1 = pathToCurve(path1);\n path2 = pathToCurve(path2);\n\n var x1, y1, x2, y2, x1m, y1m, x2m, y2m, bez1, bez2,\n res = justCount ? 0 : [];\n\n for (var i = 0, ii = path1.length; i < ii; i++) {\n var pi = path1[i];\n\n if (pi[0] == 'M') {\n x1 = x1m = pi[1];\n y1 = y1m = pi[2];\n } else {\n\n if (pi[0] == 'C') {\n bez1 = [ x1, y1, ...pi.slice(1) ];\n x1 = bez1[6];\n y1 = bez1[7];\n } else {\n bez1 = [ x1, y1, x1, y1, x1m, y1m, x1m, y1m ];\n x1 = x1m;\n y1 = y1m;\n }\n\n for (var j = 0, jj = path2.length; j < jj; j++) {\n var pj = path2[j];\n\n if (pj[0] == 'M') {\n x2 = x2m = pj[1];\n y2 = y2m = pj[2];\n } else {\n\n if (pj[0] == 'C') {\n bez2 = [ x2, y2, ...pj.slice(1) ];\n x2 = bez2[6];\n y2 = bez2[7];\n } else {\n bez2 = [ x2, y2, x2, y2, x2m, y2m, x2m, y2m ];\n x2 = x2m;\n y2 = y2m;\n }\n\n var intr = findBezierIntersections(bez1, bez2, justCount);\n\n if (justCount) {\n res += intr;\n } else {\n\n for (var k = 0, kk = intr.length; k < kk; k++) {\n intr[k].segment1 = i;\n intr[k].segment2 = j;\n intr[k].bez1 = bez1;\n intr[k].bez2 = bez2;\n }\n\n res = res.concat(intr);\n }\n }\n }\n }\n }\n\n return res;\n}\n\n\nfunction pathToAbsolute(pathArray) {\n var pth = paths(pathArray);\n\n if (pth.abs) {\n return pathClone(pth.abs);\n }\n\n if (!isArray(pathArray) || !isArray(pathArray && pathArray[0])) { // rough assumption\n pathArray = parsePathString(pathArray);\n }\n\n if (!pathArray || !pathArray.length) {\n return [ [ 'M', 0, 0 ] ];\n }\n\n var res = [],\n x = 0,\n y = 0,\n mx = 0,\n my = 0,\n start = 0,\n pa0;\n\n if (pathArray[0][0] == 'M') {\n x = +pathArray[0][1];\n y = +pathArray[0][2];\n mx = x;\n my = y;\n start++;\n res[0] = [ 'M', x, y ];\n }\n\n for (var r, pa, i = start, ii = pathArray.length; i < ii; i++) {\n res.push(r = []);\n pa = pathArray[i];\n pa0 = pa[0];\n\n if (pa0 != pa0.toUpperCase()) {\n r[0] = pa0.toUpperCase();\n\n switch (r[0]) {\n case 'A':\n r[1] = pa[1];\n r[2] = pa[2];\n r[3] = pa[3];\n r[4] = pa[4];\n r[5] = pa[5];\n r[6] = +pa[6] + x;\n r[7] = +pa[7] + y;\n break;\n case 'V':\n r[1] = +pa[1] + y;\n break;\n case 'H':\n r[1] = +pa[1] + x;\n break;\n case 'M':\n mx = +pa[1] + x;\n my = +pa[2] + y;\n default:\n for (var j = 1, jj = pa.length; j < jj; j++) {\n r[j] = +pa[j] + ((j % 2) ? x : y);\n }\n }\n } else {\n for (var k = 0, kk = pa.length; k < kk; k++) {\n r[k] = pa[k];\n }\n }\n pa0 = pa0.toUpperCase();\n\n switch (r[0]) {\n case 'Z':\n x = +mx;\n y = +my;\n break;\n case 'H':\n x = r[1];\n break;\n case 'V':\n y = r[1];\n break;\n case 'M':\n mx = r[r.length - 2];\n my = r[r.length - 1];\n default:\n x = r[r.length - 2];\n y = r[r.length - 1];\n }\n }\n\n res.toString = pathToString;\n pth.abs = pathClone(res);\n\n return res;\n}\n\nfunction isLine(bez) {\n return (\n bez[0] === bez[2] &&\n bez[1] === bez[3] &&\n bez[4] === bez[6] &&\n bez[5] === bez[7]\n );\n}\n\nfunction lineToCurve(x1, y1, x2, y2) {\n return [\n x1, y1, x2,\n y2, x2, y2\n ];\n}\n\nfunction qubicToCurve(x1, y1, ax, ay, x2, y2) {\n var _13 = 1 / 3,\n _23 = 2 / 3;\n\n return [\n _13 * x1 + _23 * ax,\n _13 * y1 + _23 * ay,\n _13 * x2 + _23 * ax,\n _13 * y2 + _23 * ay,\n x2,\n y2\n ];\n}\n\nfunction arcToCurve(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {\n\n // for more information of where this math came from visit:\n // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes\n var _120 = PI * 120 / 180,\n rad = PI / 180 * (+angle || 0),\n res = [],\n xy,\n rotate = cacher(function(x, y, rad) {\n var X = x * math.cos(rad) - y * math.sin(rad),\n Y = x * math.sin(rad) + y * math.cos(rad);\n\n return { x: X, y: Y };\n });\n\n if (!recursive) {\n xy = rotate(x1, y1, -rad);\n x1 = xy.x;\n y1 = xy.y;\n xy = rotate(x2, y2, -rad);\n x2 = xy.x;\n y2 = xy.y;\n\n var x = (x1 - x2) / 2,\n y = (y1 - y2) / 2;\n\n var h = (x * x) / (rx * rx) + (y * y) / (ry * ry);\n\n if (h > 1) {\n h = math.sqrt(h);\n rx = h * rx;\n ry = h * ry;\n }\n\n var rx2 = rx * rx,\n ry2 = ry * ry,\n k = (large_arc_flag == sweep_flag ? -1 : 1) *\n math.sqrt(abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x))),\n cx = k * rx * y / ry + (x1 + x2) / 2,\n cy = k * -ry * x / rx + (y1 + y2) / 2,\n f1 = math.asin(((y1 - cy) / ry).toFixed(9)),\n f2 = math.asin(((y2 - cy) / ry).toFixed(9));\n\n f1 = x1 < cx ? PI - f1 : f1;\n f2 = x2 < cx ? PI - f2 : f2;\n f1 < 0 && (f1 = PI * 2 + f1);\n f2 < 0 && (f2 = PI * 2 + f2);\n\n if (sweep_flag && f1 > f2) {\n f1 = f1 - PI * 2;\n }\n if (!sweep_flag && f2 > f1) {\n f2 = f2 - PI * 2;\n }\n } else {\n f1 = recursive[0];\n f2 = recursive[1];\n cx = recursive[2];\n cy = recursive[3];\n }\n\n var df = f2 - f1;\n\n if (abs(df) > _120) {\n var f2old = f2,\n x2old = x2,\n y2old = y2;\n\n f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);\n x2 = cx + rx * math.cos(f2);\n y2 = cy + ry * math.sin(f2);\n res = arcToCurve(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [ f2, f2old, cx, cy ]);\n }\n\n df = f2 - f1;\n\n var c1 = math.cos(f1),\n s1 = math.sin(f1),\n c2 = math.cos(f2),\n s2 = math.sin(f2),\n t = math.tan(df / 4),\n hx = 4 / 3 * rx * t,\n hy = 4 / 3 * ry * t,\n m1 = [ x1, y1 ],\n m2 = [ x1 + hx * s1, y1 - hy * c1 ],\n m3 = [ x2 + hx * s2, y2 - hy * c2 ],\n m4 = [ x2, y2 ];\n\n m2[0] = 2 * m1[0] - m2[0];\n m2[1] = 2 * m1[1] - m2[1];\n\n if (recursive) {\n return [ m2, m3, m4 ].concat(res);\n } else {\n res = [ m2, m3, m4 ].concat(res).join().split(',');\n var newres = [];\n\n for (var i = 0, ii = res.length; i < ii; i++) {\n newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i], res[i + 1], rad).x;\n }\n\n return newres;\n }\n}\n\n// Returns bounding box of cubic bezier curve.\n// Source: http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html\n// Original version: NISHIO Hirokazu\n// Modifications: https://github.com/timo22345\nfunction curveBBox(x0, y0, x1, y1, x2, y2, x3, y3) {\n var tvalues = [],\n bounds = [ [], [] ],\n a, b, c, t, t1, t2, b2ac, sqrtb2ac;\n\n for (var i = 0; i < 2; ++i) {\n\n if (i == 0) {\n b = 6 * x0 - 12 * x1 + 6 * x2;\n a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3;\n c = 3 * x1 - 3 * x0;\n } else {\n b = 6 * y0 - 12 * y1 + 6 * y2;\n a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3;\n c = 3 * y1 - 3 * y0;\n }\n\n if (abs(a) < 1e-12) {\n\n if (abs(b) < 1e-12) {\n continue;\n }\n\n t = -c / b;\n\n if (0 < t && t < 1) {\n tvalues.push(t);\n }\n\n continue;\n }\n\n b2ac = b * b - 4 * c * a;\n sqrtb2ac = math.sqrt(b2ac);\n\n if (b2ac < 0) {\n continue;\n }\n\n t1 = (-b + sqrtb2ac) / (2 * a);\n\n if (0 < t1 && t1 < 1) {\n tvalues.push(t1);\n }\n\n t2 = (-b - sqrtb2ac) / (2 * a);\n\n if (0 < t2 && t2 < 1) {\n tvalues.push(t2);\n }\n }\n\n var j = tvalues.length,\n jlen = j,\n mt;\n\n while (j--) {\n t = tvalues[j];\n mt = 1 - t;\n bounds[0][j] = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3);\n bounds[1][j] = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3);\n }\n\n bounds[0][jlen] = x0;\n bounds[1][jlen] = y0;\n bounds[0][jlen + 1] = x3;\n bounds[1][jlen + 1] = y3;\n bounds[0].length = bounds[1].length = jlen + 2;\n\n return {\n x0: mmin(...bounds[0]),\n y0: mmin(...bounds[1]),\n x1: mmax(...bounds[0]),\n y1: mmax(...bounds[1])\n };\n}\n\nfunction pathToCurve(path) {\n\n var pth = paths(path);\n\n // return cached curve, if existing\n if (pth.curve) {\n return pathClone(pth.curve);\n }\n\n var curvedPath = pathToAbsolute(path),\n attrs = { x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null },\n processPath = function(path, d, pathCommand) {\n var nx, ny;\n\n if (!path) {\n return [ 'C', d.x, d.y, d.x, d.y, d.x, d.y ];\n }\n\n !(path[0] in { T: 1, Q: 1 }) && (d.qx = d.qy = null);\n\n switch (path[0]) {\n case 'M':\n d.X = path[1];\n d.Y = path[2];\n break;\n case 'A':\n path = [ 'C', ...arcToCurve(d.x, d.y, ...path.slice(1)) ];\n break;\n case 'S':\n if (pathCommand == 'C' || pathCommand == 'S') {\n\n // In 'S' case we have to take into account, if the previous command is C/S.\n nx = d.x * 2 - d.bx;\n\n // And reflect the previous\n ny = d.y * 2 - d.by;\n\n // command's control point relative to the current point.\n }\n else {\n\n // or some else or nothing\n nx = d.x;\n ny = d.y;\n }\n path = [ 'C', nx, ny, ...path.slice(1) ];\n break;\n case 'T':\n if (pathCommand == 'Q' || pathCommand == 'T') {\n\n // In 'T' case we have to take into account, if the previous command is Q/T.\n d.qx = d.x * 2 - d.qx;\n\n // And make a reflection similar\n d.qy = d.y * 2 - d.qy;\n\n // to case 'S'.\n }\n else {\n\n // or something else or nothing\n d.qx = d.x;\n d.qy = d.y;\n }\n path = [ 'C', ...qubicToCurve(d.x, d.y, d.qx, d.qy, path[1], path[2]) ];\n break;\n case 'Q':\n d.qx = path[1];\n d.qy = path[2];\n path = [ 'C', ...qubicToCurve(d.x, d.y, path[1], path[2], path[3], path[4]) ];\n break;\n case 'L':\n path = [ 'C', ...lineToCurve(d.x, d.y, path[1], path[2]) ];\n break;\n case 'H':\n path = [ 'C', ...lineToCurve(d.x, d.y, path[1], d.y) ];\n break;\n case 'V':\n path = [ 'C', ...lineToCurve(d.x, d.y, d.x, path[1]) ];\n break;\n case 'Z':\n path = [ 'C', ...lineToCurve(d.x, d.y, d.X, d.Y) ];\n break;\n }\n\n return path;\n },\n\n fixArc = function(pp, i) {\n\n if (pp[i].length > 7) {\n pp[i].shift();\n var pi = pp[i];\n\n while (pi.length) {\n pathCommands[i] = 'A'; // if created multiple C:s, their original seg is saved\n pp.splice(i++, 0, [ 'C', ...pi.splice(0, 6) ]);\n }\n\n pp.splice(i, 1);\n ii = curvedPath.length;\n }\n },\n\n pathCommands = [], // path commands of original path p\n pfirst = '', // temporary holder for original path command\n pathCommand = ''; // holder for previous path command of original path\n\n for (var i = 0, ii = curvedPath.length; i < ii; i++) {\n curvedPath[i] && (pfirst = curvedPath[i][0]); // save current path command\n\n if (pfirst != 'C') // C is not saved yet, because it may be result of conversion\n {\n pathCommands[i] = pfirst; // Save current path command\n i && (pathCommand = pathCommands[i - 1]); // Get previous path command pathCommand\n }\n curvedPath[i] = processPath(curvedPath[i], attrs, pathCommand); // Previous path command is inputted to processPath\n\n if (pathCommands[i] != 'A' && pfirst == 'C') pathCommands[i] = 'C'; // A is the only command\n // which may produce multiple C:s\n // so we have to make sure that C is also C in original path\n\n fixArc(curvedPath, i); // fixArc adds also the right amount of A:s to pathCommands\n\n var seg = curvedPath[i],\n seglen = seg.length;\n\n attrs.x = seg[seglen - 2];\n attrs.y = seg[seglen - 1];\n attrs.bx = toFloat(seg[seglen - 4]) || attrs.x;\n attrs.by = toFloat(seg[seglen - 3]) || attrs.y;\n }\n\n // cache curve\n pth.curve = pathClone(curvedPath);\n\n return curvedPath;\n}","import {\n has,\n isNil,\n isObject\n} from 'min-dash';\n\n/**\n * Checks whether a value is an instance of Connection.\n *\n * @param {any} value\n *\n * @return {boolean}\n */\nexport function isConnection(value) {\n return isObject(value) && has(value, 'waypoints');\n}\n\n/**\n * Checks whether a value is an instance of Label.\n *\n * @param {any} value\n *\n * @return {boolean}\n */\nexport function isLabel(value) {\n return isObject(value) && has(value, 'labelTarget');\n}\n\n/**\n * Checks whether a value is an instance of Root.\n *\n * @param {any} value\n *\n * @return {boolean}\n */\nexport function isRoot(value) {\n return isObject(value) && isNil(value.parent);\n}","import {\n isObject,\n sortBy\n} from 'min-dash';\n\nimport {\n pointDistance,\n pointsOnLine\n} from '../util/Geometry';\n\nimport intersectPaths from 'path-intersection';\n\nimport { isConnection } from '../util/ModelUtil';\n\n/**\n * @typedef {import('../core/Types').ElementLike} Element\n * @typedef {import('../core/Types').ConnectionLike} Connection\n *\n * @typedef {import('../util/Types').DirectionTRBL} DirectionTRBL\n * @typedef {import('../util/Types').Point} Point\n * @typedef {import('../util/Types').Rect} Rect\n * @typedef {import('../util/Types').RectTRBL} RectTRBL\n */\n\n/**\n * @param {Rect} bounds\n *\n * @returns {Rect}\n */\nexport function roundBounds(bounds) {\n return {\n x: Math.round(bounds.x),\n y: Math.round(bounds.y),\n width: Math.round(bounds.width),\n height: Math.round(bounds.height)\n };\n}\n\n/**\n * @param {Point} point\n *\n * @returns {Point}\n */\nexport function roundPoint(point) {\n\n return {\n x: Math.round(point.x),\n y: Math.round(point.y)\n };\n}\n\n\n/**\n * Convert the given bounds to a { top, left, bottom, right } descriptor.\n *\n * @param {Point|Rect} bounds\n *\n * @return {RectTRBL}\n */\nexport function asTRBL(bounds) {\n return {\n top: bounds.y,\n right: bounds.x + (bounds.width || 0),\n bottom: bounds.y + (bounds.height || 0),\n left: bounds.x\n };\n}\n\n\n/**\n * Convert a { top, left, bottom, right } to an objects bounds.\n *\n * @param {RectTRBL} trbl\n *\n * @return {Rect}\n */\nexport function asBounds(trbl) {\n return {\n x: trbl.left,\n y: trbl.top,\n width: trbl.right - trbl.left,\n height: trbl.bottom - trbl.top\n };\n}\n\n\n/**\n * Get the mid of the given bounds or point.\n *\n * @param {Point|Rect} bounds\n *\n * @return {Point}\n */\nexport function getBoundsMid(bounds) {\n return roundPoint({\n x: bounds.x + (bounds.width || 0) / 2,\n y: bounds.y + (bounds.height || 0) / 2\n });\n}\n\n\n/**\n * Get the mid of the given Connection.\n *\n * @param {Connection} connection\n *\n * @return {Point}\n */\nexport function getConnectionMid(connection) {\n var waypoints = connection.waypoints;\n\n // calculate total length and length of each segment\n var parts = waypoints.reduce(function(parts, point, index) {\n\n var lastPoint = waypoints[index - 1];\n\n if (lastPoint) {\n var lastPart = parts[parts.length - 1];\n\n var startLength = lastPart && lastPart.endLength || 0;\n var length = distance(lastPoint, point);\n\n parts.push({\n start: lastPoint,\n end: point,\n startLength: startLength,\n endLength: startLength + length,\n length: length\n });\n }\n\n return parts;\n }, []);\n\n var totalLength = parts.reduce(function(length, part) {\n return length + part.length;\n }, 0);\n\n // find which segement contains middle point\n var midLength = totalLength / 2;\n\n var i = 0;\n var midSegment = parts[i];\n\n while (midSegment.endLength < midLength) {\n midSegment = parts[++i];\n }\n\n // calculate relative position on mid segment\n var segmentProgress = (midLength - midSegment.startLength) / midSegment.length;\n\n var midPoint = {\n x: midSegment.start.x + (midSegment.end.x - midSegment.start.x) * segmentProgress,\n y: midSegment.start.y + (midSegment.end.y - midSegment.start.y) * segmentProgress\n };\n\n return midPoint;\n}\n\n\n/**\n * Get the mid of the given Element.\n *\n * @param {Element} element\n *\n * @return {Point}\n */\nexport function getMid(element) {\n if (isConnection(element)) {\n return getConnectionMid(element);\n }\n\n return getBoundsMid(element);\n}\n\n// orientation utils //////////////////////\n\n/**\n * Get orientation of the given rectangle with respect to\n * the reference rectangle.\n *\n * A padding (positive or negative) may be passed to influence\n * horizontal / vertical orientation and intersection.\n *\n * @param {Rect} rect\n * @param {Rect} reference\n * @param {Point|number} padding\n *\n * @return {DirectionTRBL} the orientation; one of top, top-left, left, ..., bottom, right or intersect.\n */\nexport function getOrientation(rect, reference, padding) {\n\n padding = padding || 0;\n\n // make sure we can use an object, too\n // for individual { x, y } padding\n if (!isObject(padding)) {\n padding = { x: padding, y: padding };\n }\n\n\n var rectOrientation = asTRBL(rect),\n referenceOrientation = asTRBL(reference);\n\n var top = rectOrientation.bottom + padding.y <= referenceOrientation.top,\n right = rectOrientation.left - padding.x >= referenceOrientation.right,\n bottom = rectOrientation.top - padding.y >= referenceOrientation.bottom,\n left = rectOrientation.right + padding.x <= referenceOrientation.left;\n\n var vertical = top ? 'top' : (bottom ? 'bottom' : null),\n horizontal = left ? 'left' : (right ? 'right' : null);\n\n if (horizontal && vertical) {\n return vertical + '-' + horizontal;\n } else {\n return horizontal || vertical || 'intersect';\n }\n}\n\n\n// intersection utils //////////////////////\n\n/**\n * Get intersection between an element and a line path.\n *\n * @param {string} elementPath\n * @param {string} linePath\n * @param {boolean} cropStart Whether to crop start or end.\n *\n * @return {Point}\n */\nexport function getElementLineIntersection(elementPath, linePath, cropStart) {\n\n var intersections = getIntersections(elementPath, linePath);\n\n // recognize intersections\n // only one -> choose\n // two close together -> choose first\n // two or more distinct -> pull out appropriate one\n // none -> ok (fallback to point itself)\n if (intersections.length === 1) {\n return roundPoint(intersections[0]);\n } else if (intersections.length === 2 && pointDistance(intersections[0], intersections[1]) < 1) {\n return roundPoint(intersections[0]);\n } else if (intersections.length > 1) {\n\n // sort by intersections based on connection segment +\n // distance from start\n intersections = sortBy(intersections, function(i) {\n var distance = Math.floor(i.t2 * 100) || 1;\n\n distance = 100 - distance;\n\n distance = (distance < 10 ? '0' : '') + distance;\n\n // create a sort string that makes sure we sort\n // line segment ASC + line segment position DESC (for cropStart)\n // line segment ASC + line segment position ASC (for cropEnd)\n return i.segment2 + '#' + distance;\n });\n\n return roundPoint(intersections[cropStart ? 0 : intersections.length - 1]);\n }\n\n return null;\n}\n\n\nexport function getIntersections(a, b) {\n return intersectPaths(a, b);\n}\n\n\nexport function filterRedundantWaypoints(waypoints) {\n\n // alter copy of waypoints, not original\n waypoints = waypoints.slice();\n\n var idx = 0,\n point,\n previousPoint,\n nextPoint;\n\n while (waypoints[idx]) {\n point = waypoints[idx];\n previousPoint = waypoints[idx - 1];\n nextPoint = waypoints[idx + 1];\n\n if (pointDistance(point, nextPoint) === 0 ||\n pointsOnLine(previousPoint, nextPoint, point)) {\n\n // remove point, if overlapping with {nextPoint}\n // or on line with {previousPoint} -> {point} -> {nextPoint}\n waypoints.splice(idx, 1);\n } else {\n idx++;\n }\n }\n\n return waypoints;\n}\n\n// helpers //////////////////////\n\nfunction distance(a, b) {\n return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));\n}","import {\n isNumber,\n assign,\n forEach,\n every,\n debounce,\n bind,\n reduce,\n find\n} from 'min-dash';\n\nimport {\n assignStyle\n} from 'min-dom';\n\nimport {\n add as collectionAdd,\n remove as collectionRemove\n} from '../util/Collections';\n\nimport {\n getType,\n getBBox as getBoundingBox\n} from '../util/Elements';\n\nimport { asTRBL } from '../layout/LayoutUtil';\n\nimport {\n append as svgAppend,\n attr as svgAttr,\n classes as svgClasses,\n create as svgCreate,\n transform as svgTransform,\n remove as svgRemove\n} from 'tiny-svg';\n\nimport { createMatrix as createMatrix } from 'tiny-svg';\n\n\n/**\n * @typedef {import('./Types').ConnectionLike} ConnectionLike\n * @typedef {import('./Types').RootLike} RootLike\n * @typedef {import('./Types').ParentLike } ParentLike\n * @typedef {import('./Types').ShapeLike} ShapeLike\n *\n * @typedef { {\n * container?: HTMLElement;\n * deferUpdate?: boolean;\n * width?: number;\n * height?: number;\n * } } CanvasConfig\n * @typedef { {\n * group: SVGElement;\n * index: number;\n * visible: boolean;\n * } } CanvasLayer\n * @typedef { {\n * [key: string]: CanvasLayer;\n * } } CanvasLayers\n * @typedef { {\n * rootElement: ShapeLike;\n * layer: CanvasLayer;\n * } } CanvasPlane\n * @typedef { {\n * scale: number;\n * inner: Rect;\n * outer: Dimensions;\n * } & Rect } CanvasViewbox\n *\n * @typedef {import('./ElementRegistry').default} ElementRegistry\n * @typedef {import('./EventBus').default} EventBus\n * @typedef {import('./GraphicsFactory').default} GraphicsFactory\n *\n * @typedef {import('../util/Types').Dimensions} Dimensions\n * @typedef {import('../util/Types').Point} Point\n * @typedef {import('../util/Types').Rect} Rect\n * @typedef {import('../util/Types').RectTRBL} RectTRBL\n */\n\nfunction round(number, resolution) {\n return Math.round(number * resolution) / resolution;\n}\n\nfunction ensurePx(number) {\n return isNumber(number) ? number + 'px' : number;\n}\n\nfunction findRoot(element) {\n while (element.parent) {\n element = element.parent;\n }\n\n return element;\n}\n\n/**\n * Creates a HTML container element for a SVG element with\n * the given configuration\n *\n * @param {CanvasConfig} options\n *\n * @return {HTMLElement} the container element\n */\nfunction createContainer(options) {\n\n options = assign({}, { width: '100%', height: '100%' }, options);\n\n const container = options.container || document.body;\n\n // create a around the svg element with the respective size\n // this way we can always get the correct container size\n // (this is impossible for
elements at the moment)\n const parent = document.createElement('div');\n parent.setAttribute('class', 'djs-container djs-parent');\n\n assignStyle(parent, {\n position: 'relative',\n overflow: 'hidden',\n width: ensurePx(options.width),\n height: ensurePx(options.height)\n });\n\n container.appendChild(parent);\n\n return parent;\n}\n\nfunction createGroup(parent, cls, childIndex) {\n const group = svgCreate('g');\n svgClasses(group).add(cls);\n\n const index = childIndex !== undefined ? childIndex : parent.childNodes.length - 1;\n\n // must ensure second argument is node or _null_\n // cf. https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore\n parent.insertBefore(group, parent.childNodes[index] || null);\n\n return group;\n}\n\nconst BASE_LAYER = 'base';\n\n// render plane contents behind utility layers\nconst PLANE_LAYER_INDEX = 0;\nconst UTILITY_LAYER_INDEX = 1;\n\n\nconst REQUIRED_MODEL_ATTRS = {\n shape: [ 'x', 'y', 'width', 'height' ],\n connection: [ 'waypoints' ]\n};\n\n/**\n * The main drawing canvas.\n *\n * @class\n * @constructor\n *\n * @emits Canvas#canvas.init\n *\n * @param {CanvasConfig|null} config\n * @param {EventBus} eventBus\n * @param {GraphicsFactory} graphicsFactory\n * @param {ElementRegistry} elementRegistry\n */\nexport default function Canvas(config, eventBus, graphicsFactory, elementRegistry) {\n this._eventBus = eventBus;\n this._elementRegistry = elementRegistry;\n this._graphicsFactory = graphicsFactory;\n\n /**\n * @type {number}\n */\n this._rootsIdx = 0;\n\n /**\n * @type {CanvasLayers}\n */\n this._layers = {};\n\n /**\n * @type {CanvasPlane[]}\n */\n this._planes = [];\n\n /**\n * @type {RootLike|null}\n */\n this._rootElement = null;\n\n this._init(config || {});\n}\n\nCanvas.$inject = [\n 'config.canvas',\n 'eventBus',\n 'graphicsFactory',\n 'elementRegistry'\n];\n\n/**\n * Creates a element that is wrapped into a .\n * This way we are always able to correctly figure out the size of the svg element\n * by querying the parent node.\n\n * (It is not possible to get the size of a svg element cross browser @ 2014-04-01)\n\n *
\n * \n * ...\n * \n *
\n *\n * @param {CanvasConfig} config\n */\nCanvas.prototype._init = function(config) {\n\n const eventBus = this._eventBus;\n\n // html container\n const container = this._container = createContainer(config);\n\n const svg = this._svg = svgCreate('svg');\n svgAttr(svg, { width: '100%', height: '100%' });\n\n svgAppend(container, svg);\n\n const viewport = this._viewport = createGroup(svg, 'viewport');\n\n // debounce canvas.viewbox.changed events when deferUpdate is set\n // to help with potential performance issues\n if (config.deferUpdate) {\n this._viewboxChanged = debounce(bind(this._viewboxChanged, this), 300);\n }\n\n eventBus.on('diagram.init', () => {\n\n /**\n * An event indicating that the canvas is ready to be drawn on.\n *\n * @memberOf Canvas\n *\n * @event canvas.init\n *\n * @type {Object}\n * @property {SVGElement} svg the created svg element\n * @property {SVGElement} viewport the direct parent of diagram elements and shapes\n */\n eventBus.fire('canvas.init', {\n svg: svg,\n viewport: viewport\n });\n\n });\n\n // reset viewbox on shape changes to\n // recompute the viewbox\n eventBus.on([\n 'shape.added',\n 'connection.added',\n 'shape.removed',\n 'connection.removed',\n 'elements.changed',\n 'root.set'\n ], () => {\n delete this._cachedViewbox;\n });\n\n eventBus.on('diagram.destroy', 500, this._destroy, this);\n eventBus.on('diagram.clear', 500, this._clear, this);\n};\n\nCanvas.prototype._destroy = function() {\n this._eventBus.fire('canvas.destroy', {\n svg: this._svg,\n viewport: this._viewport\n });\n\n const parent = this._container.parentNode;\n\n if (parent) {\n parent.removeChild(this._container);\n }\n\n delete this._svg;\n delete this._container;\n delete this._layers;\n delete this._planes;\n delete this._rootElement;\n delete this._viewport;\n};\n\nCanvas.prototype._clear = function() {\n\n const allElements = this._elementRegistry.getAll();\n\n // remove all elements\n allElements.forEach(element => {\n const type = getType(element);\n\n if (type === 'root') {\n this.removeRootElement(element);\n } else {\n this._removeElement(element, type);\n }\n });\n\n // remove all planes\n this._planes = [];\n this._rootElement = null;\n\n // force recomputation of view box\n delete this._cachedViewbox;\n};\n\n/**\n * Returns the default layer on which\n * all elements are drawn.\n *\n * @return {SVGElement} The SVG element of the layer.\n */\nCanvas.prototype.getDefaultLayer = function() {\n return this.getLayer(BASE_LAYER, PLANE_LAYER_INDEX);\n};\n\n/**\n * Returns a layer that is used to draw elements\n * or annotations on it.\n *\n * Non-existing layers retrieved through this method\n * will be created. During creation, the optional index\n * may be used to create layers below or above existing layers.\n * A layer with a certain index is always created above all\n * existing layers with the same index.\n *\n * @param {string} name The name of the layer.\n * @param {number} [index] The index of the layer.\n *\n * @return {SVGElement} The SVG element of the layer.\n */\nCanvas.prototype.getLayer = function(name, index) {\n\n if (!name) {\n throw new Error('must specify a name');\n }\n\n let layer = this._layers[name];\n\n if (!layer) {\n layer = this._layers[name] = this._createLayer(name, index);\n }\n\n // throw an error if layer creation / retrival is\n // requested on different index\n if (typeof index !== 'undefined' && layer.index !== index) {\n throw new Error('layer <' + name + '> already created at index <' + index + '>');\n }\n\n return layer.group;\n};\n\n/**\n * For a given index, return the number of layers that have a higher index and\n * are visible.\n *\n * This is used to determine the node a layer should be inserted at.\n *\n * @param {number} index\n *\n * @return {number}\n */\nCanvas.prototype._getChildIndex = function(index) {\n return reduce(this._layers, function(childIndex, layer) {\n if (layer.visible && index >= layer.index) {\n childIndex++;\n }\n\n return childIndex;\n }, 0);\n};\n\n/**\n * Creates a given layer and returns it.\n *\n * @param {string} name\n * @param {number} [index=0]\n *\n * @return {CanvasLayer}\n */\nCanvas.prototype._createLayer = function(name, index) {\n\n if (typeof index === 'undefined') {\n index = UTILITY_LAYER_INDEX;\n }\n\n const childIndex = this._getChildIndex(index);\n\n return {\n group: createGroup(this._viewport, 'layer-' + name, childIndex),\n index: index,\n visible: true\n };\n};\n\n\n/**\n * Shows a given layer.\n *\n * @param {string} name The name of the layer.\n *\n * @return {SVGElement} The SVG element of the layer.\n */\nCanvas.prototype.showLayer = function(name) {\n\n if (!name) {\n throw new Error('must specify a name');\n }\n\n const layer = this._layers[name];\n\n if (!layer) {\n throw new Error('layer <' + name + '> does not exist');\n }\n\n const viewport = this._viewport;\n const group = layer.group;\n const index = layer.index;\n\n if (layer.visible) {\n return group;\n }\n\n const childIndex = this._getChildIndex(index);\n\n viewport.insertBefore(group, viewport.childNodes[childIndex] || null);\n\n layer.visible = true;\n\n return group;\n};\n\n/**\n * Hides a given layer.\n *\n * @param {string} name The name of the layer.\n *\n * @return {SVGElement} The SVG element of the layer.\n */\nCanvas.prototype.hideLayer = function(name) {\n\n if (!name) {\n throw new Error('must specify a name');\n }\n\n const layer = this._layers[name];\n\n if (!layer) {\n throw new Error('layer <' + name + '> does not exist');\n }\n\n const group = layer.group;\n\n if (!layer.visible) {\n return group;\n }\n\n svgRemove(group);\n\n layer.visible = false;\n\n return group;\n};\n\n\nCanvas.prototype._removeLayer = function(name) {\n\n const layer = this._layers[name];\n\n if (layer) {\n delete this._layers[name];\n\n svgRemove(layer.group);\n }\n};\n\n/**\n * Returns the currently active layer. Can be null.\n *\n * @return {CanvasLayer|null} The active layer of `null`.\n */\nCanvas.prototype.getActiveLayer = function() {\n const plane = this._findPlaneForRoot(this.getRootElement());\n\n if (!plane) {\n return null;\n }\n\n return plane.layer;\n};\n\n\n/**\n * Returns the plane which contains the given element.\n *\n * @param {ShapeLike|ConnectionLike|string} element The element or its ID.\n *\n * @return {RootLike|undefined} The root of the element.\n */\nCanvas.prototype.findRoot = function(element) {\n if (typeof element === 'string') {\n element = this._elementRegistry.get(element);\n }\n\n if (!element) {\n return;\n }\n\n const plane = this._findPlaneForRoot(\n findRoot(element)\n ) || {};\n\n return plane.rootElement;\n};\n\n/**\n * Return a list of all root elements on the diagram.\n *\n * @return {(RootLike)[]} The list of root elements.\n */\nCanvas.prototype.getRootElements = function() {\n return this._planes.map(function(plane) {\n return plane.rootElement;\n });\n};\n\nCanvas.prototype._findPlaneForRoot = function(rootElement) {\n return find(this._planes, function(plane) {\n return plane.rootElement === rootElement;\n });\n};\n\n\n/**\n * Returns the html element that encloses the\n * drawing canvas.\n *\n * @return {HTMLElement} The HTML element of the container.\n */\nCanvas.prototype.getContainer = function() {\n return this._container;\n};\n\n\n// markers //////////////////////\n\nCanvas.prototype._updateMarker = function(element, marker, add) {\n let container;\n\n if (!element.id) {\n element = this._elementRegistry.get(element);\n }\n\n // we need to access all\n container = this._elementRegistry._elements[element.id];\n\n if (!container) {\n return;\n }\n\n forEach([ container.gfx, container.secondaryGfx ], function(gfx) {\n if (gfx) {\n\n // invoke either addClass or removeClass based on mode\n if (add) {\n svgClasses(gfx).add(marker);\n } else {\n svgClasses(gfx).remove(marker);\n }\n }\n });\n\n /**\n * An event indicating that a marker has been updated for an element\n *\n * @event element.marker.update\n * @type {Object}\n * @property {Element} element the shape\n * @property {SVGElement} gfx the graphical representation of the shape\n * @property {string} marker\n * @property {boolean} add true if the marker was added, false if it got removed\n */\n this._eventBus.fire('element.marker.update', { element: element, gfx: container.gfx, marker: marker, add: !!add });\n};\n\n\n/**\n * Adds a marker to an element (basically a css class).\n *\n * Fires the element.marker.update event, making it possible to\n * integrate extension into the marker life-cycle, too.\n *\n * @example\n *\n * ```javascript\n * canvas.addMarker('foo', 'some-marker');\n *\n * const fooGfx = canvas.getGraphics('foo');\n *\n * fooGfx; //
... \n * ```\n *\n * @param {ShapeLike|ConnectionLike|string} element The element or its ID.\n * @param {string} marker The marker.\n */\nCanvas.prototype.addMarker = function(element, marker) {\n this._updateMarker(element, marker, true);\n};\n\n\n/**\n * Remove a marker from an element.\n *\n * Fires the element.marker.update event, making it possible to\n * integrate extension into the marker life-cycle, too.\n *\n * @param {ShapeLike|ConnectionLike|string} element The element or its ID.\n * @param {string} marker The marker.\n */\nCanvas.prototype.removeMarker = function(element, marker) {\n this._updateMarker(element, marker, false);\n};\n\n/**\n * Check whether an element has a given marker.\n *\n * @param {ShapeLike|ConnectionLike|string} element The element or its ID.\n * @param {string} marker The marker.\n */\nCanvas.prototype.hasMarker = function(element, marker) {\n if (!element.id) {\n element = this._elementRegistry.get(element);\n }\n\n const gfx = this.getGraphics(element);\n\n return svgClasses(gfx).has(marker);\n};\n\n/**\n * Toggles a marker on an element.\n *\n * Fires the element.marker.update event, making it possible to\n * integrate extension into the marker life-cycle, too.\n *\n * @param {ShapeLike|ConnectionLike|string} element The element or its ID.\n * @param {string} marker The marker.\n */\nCanvas.prototype.toggleMarker = function(element, marker) {\n if (this.hasMarker(element, marker)) {\n this.removeMarker(element, marker);\n } else {\n this.addMarker(element, marker);\n }\n};\n\n/**\n * Returns the current root element.\n *\n * Supports two different modes for handling root elements:\n *\n * 1. if no root element has been added before, an implicit root will be added\n * and returned. This is used in applications that don't require explicit\n * root elements.\n *\n * 2. when root elements have been added before calling `getRootElement`,\n * root elements can be null. This is used for applications that want to manage\n * root elements themselves.\n *\n * @return {RootLike} The current root element.\n */\nCanvas.prototype.getRootElement = function() {\n const rootElement = this._rootElement;\n\n // can return null if root elements are present but none was set yet\n if (rootElement || this._planes.length) {\n return rootElement;\n }\n\n return this.setRootElement(this.addRootElement(null));\n};\n\n/**\n * Adds a given root element and returns it.\n *\n * @param {RootLike} [rootElement] The root element to be added.\n *\n * @return {RootLike} The added root element or an implicit root element.\n */\nCanvas.prototype.addRootElement = function(rootElement) {\n const idx = this._rootsIdx++;\n\n if (!rootElement) {\n rootElement = {\n id: '__implicitroot_' + idx,\n children: [],\n isImplicit: true\n };\n }\n\n const layerName = rootElement.layer = 'root-' + idx;\n\n this._ensureValid('root', rootElement);\n\n const layer = this.getLayer(layerName, PLANE_LAYER_INDEX);\n\n this.hideLayer(layerName);\n\n this._addRoot(rootElement, layer);\n\n this._planes.push({\n rootElement: rootElement,\n layer: layer\n });\n\n return rootElement;\n};\n\n/**\n * Removes a given root element and returns it.\n *\n * @param {RootLike|string} rootElement element or element ID\n *\n * @return {RootLike|undefined} removed element\n */\nCanvas.prototype.removeRootElement = function(rootElement) {\n\n if (typeof rootElement === 'string') {\n rootElement = this._elementRegistry.get(rootElement);\n }\n\n const plane = this._findPlaneForRoot(rootElement);\n\n if (!plane) {\n return;\n }\n\n // hook up life-cycle events\n this._removeRoot(rootElement);\n\n // clean up layer\n this._removeLayer(rootElement.layer);\n\n // clean up plane\n this._planes = this._planes.filter(function(plane) {\n return plane.rootElement !== rootElement;\n });\n\n // clean up active root\n if (this._rootElement === rootElement) {\n this._rootElement = null;\n }\n\n return rootElement;\n};\n\n\n/**\n * Sets a given element as the new root element for the canvas\n * and returns the new root element.\n *\n * @param {RootLike} rootElement The root element to be set.\n *\n * @return {RootLike} The set root element.\n */\nCanvas.prototype.setRootElement = function(rootElement) {\n\n if (rootElement === this._rootElement) {\n return;\n }\n\n let plane;\n\n if (!rootElement) {\n throw new Error('rootElement required');\n }\n\n plane = this._findPlaneForRoot(rootElement);\n\n // give set add semantics for backwards compatibility\n if (!plane) {\n rootElement = this.addRootElement(rootElement);\n }\n\n this._setRoot(rootElement);\n\n return rootElement;\n};\n\n\nCanvas.prototype._removeRoot = function(element) {\n const elementRegistry = this._elementRegistry,\n eventBus = this._eventBus;\n\n // simulate element remove event sequence\n eventBus.fire('root.remove', { element: element });\n eventBus.fire('root.removed', { element: element });\n\n elementRegistry.remove(element);\n};\n\n\nCanvas.prototype._addRoot = function(element, gfx) {\n const elementRegistry = this._elementRegistry,\n eventBus = this._eventBus;\n\n // resemble element add event sequence\n eventBus.fire('root.add', { element: element });\n\n elementRegistry.add(element, gfx);\n\n eventBus.fire('root.added', { element: element, gfx: gfx });\n};\n\n\nCanvas.prototype._setRoot = function(rootElement, layer) {\n\n const currentRoot = this._rootElement;\n\n if (currentRoot) {\n\n // un-associate previous root element
\n this._elementRegistry.updateGraphics(currentRoot, null, true);\n\n // hide previous layer\n this.hideLayer(currentRoot.layer);\n }\n\n if (rootElement) {\n\n if (!layer) {\n layer = this._findPlaneForRoot(rootElement).layer;\n }\n\n // associate element with \n this._elementRegistry.updateGraphics(rootElement, this._svg, true);\n\n // show root layer\n this.showLayer(rootElement.layer);\n }\n\n this._rootElement = rootElement;\n\n this._eventBus.fire('root.set', { element: rootElement });\n};\n\nCanvas.prototype._ensureValid = function(type, element) {\n if (!element.id) {\n throw new Error('element must have an id');\n }\n\n if (this._elementRegistry.get(element.id)) {\n throw new Error('element <' + element.id + '> already exists');\n }\n\n const requiredAttrs = REQUIRED_MODEL_ATTRS[type];\n\n const valid = every(requiredAttrs, function(attr) {\n return typeof element[attr] !== 'undefined';\n });\n\n if (!valid) {\n throw new Error(\n 'must supply { ' + requiredAttrs.join(', ') + ' } with ' + type);\n }\n};\n\nCanvas.prototype._setParent = function(element, parent, parentIndex) {\n collectionAdd(parent.children, element, parentIndex);\n element.parent = parent;\n};\n\n/**\n * Adds an element to the canvas.\n *\n * This wires the parent <-> child relationship between the element and\n * a explicitly specified parent or an implicit root element.\n *\n * During add it emits the events\n *\n * * <{type}.add> (element, parent)\n * * <{type}.added> (element, gfx)\n *\n * Extensions may hook into these events to perform their magic.\n *\n * @param {string} type\n * @param {ConnectionLike|ShapeLike} element\n * @param {ShapeLike} [parent]\n * @param {number} [parentIndex]\n *\n * @return {ConnectionLike|ShapeLike} The added element.\n */\nCanvas.prototype._addElement = function(type, element, parent, parentIndex) {\n\n parent = parent || this.getRootElement();\n\n const eventBus = this._eventBus,\n graphicsFactory = this._graphicsFactory;\n\n this._ensureValid(type, element);\n\n eventBus.fire(type + '.add', { element: element, parent: parent });\n\n this._setParent(element, parent, parentIndex);\n\n // create graphics\n const gfx = graphicsFactory.create(type, element, parentIndex);\n\n this._elementRegistry.add(element, gfx);\n\n // update its visual\n graphicsFactory.update(type, element, gfx);\n\n eventBus.fire(type + '.added', { element: element, gfx: gfx });\n\n return element;\n};\n\n/**\n * Adds a shape to the canvas.\n *\n * @param {ShapeLike} shape The shape to be added\n * @param {ParentLike} [parent] The shape's parent.\n * @param {number} [parentIndex] The index at which to add the shape to the parent's children.\n *\n * @return {ShapeLike} The added shape.\n */\nCanvas.prototype.addShape = function(shape, parent, parentIndex) {\n return this._addElement('shape', shape, parent, parentIndex);\n};\n\n/**\n * Adds a connection to the canvas.\n *\n * @param {ConnectionLike} connection The connection to be added.\n * @param {ParentLike} [parent] The connection's parent.\n * @param {number} [parentIndex] The index at which to add the connection to the parent's children.\n *\n * @return {ConnectionLike} The added connection.\n */\nCanvas.prototype.addConnection = function(connection, parent, parentIndex) {\n return this._addElement('connection', connection, parent, parentIndex);\n};\n\n\n/**\n * Internal remove element\n */\nCanvas.prototype._removeElement = function(element, type) {\n\n const elementRegistry = this._elementRegistry,\n graphicsFactory = this._graphicsFactory,\n eventBus = this._eventBus;\n\n element = elementRegistry.get(element.id || element);\n\n if (!element) {\n\n // element was removed already\n return;\n }\n\n eventBus.fire(type + '.remove', { element: element });\n\n graphicsFactory.remove(element);\n\n // unset parent <-> child relationship\n collectionRemove(element.parent && element.parent.children, element);\n element.parent = null;\n\n eventBus.fire(type + '.removed', { element: element });\n\n elementRegistry.remove(element);\n\n return element;\n};\n\n\n/**\n * Removes a shape from the canvas.\n *\n * @fires ShapeRemoveEvent\n * @fires ShapeRemovedEvent\n *\n * @param {ShapeLike|string} shape The shape or its ID.\n *\n * @return {ShapeLike} The removed shape.\n */\nCanvas.prototype.removeShape = function(shape) {\n\n /**\n * An event indicating that a shape is about to be removed from the canvas.\n *\n * @memberOf Canvas\n *\n * @event ShapeRemoveEvent\n * @type {Object}\n * @property {ShapeLike} element The shape.\n * @property {SVGElement} gfx The graphical element.\n */\n\n /**\n * An event indicating that a shape has been removed from the canvas.\n *\n * @memberOf Canvas\n *\n * @event ShapeRemovedEvent\n * @type {Object}\n * @property {ShapeLike} element The shape.\n * @property {SVGElement} gfx The graphical element.\n */\n return this._removeElement(shape, 'shape');\n};\n\n\n/**\n * Removes a connection from the canvas.\n *\n * @fires ConnectionRemoveEvent\n * @fires ConnectionRemovedEvent\n *\n * @param {ConnectionLike|string} connection The connection or its ID.\n *\n * @return {ConnectionLike} The removed connection.\n */\nCanvas.prototype.removeConnection = function(connection) {\n\n /**\n * An event indicating that a connection is about to be removed from the canvas.\n *\n * @memberOf Canvas\n *\n * @event ConnectionRemoveEvent\n * @type {Object}\n * @property {ConnectionLike} element The connection.\n * @property {SVGElement} gfx The graphical element.\n */\n\n /**\n * An event indicating that a connection has been removed from the canvas.\n *\n * @memberOf Canvas\n *\n * @event ConnectionRemovedEvent\n * @type {Object}\n * @property {ConnectionLike} element The connection.\n * @property {SVGElement} gfx The graphical element.\n */\n return this._removeElement(connection, 'connection');\n};\n\n\n/**\n * Returns the graphical element of an element.\n *\n * @param {ShapeLike|ConnectionLike|string} element The element or its ID.\n * @param {boolean} [secondary=false] Whether to return the secondary graphical element.\n *\n * @return {SVGElement} The graphical element.\n */\nCanvas.prototype.getGraphics = function(element, secondary) {\n return this._elementRegistry.getGraphics(element, secondary);\n};\n\n\n/**\n * Perform a viewbox update via a given change function.\n *\n * @param {Function} changeFn\n */\nCanvas.prototype._changeViewbox = function(changeFn) {\n\n // notify others of the upcoming viewbox change\n this._eventBus.fire('canvas.viewbox.changing');\n\n // perform actual change\n changeFn.apply(this);\n\n // reset the cached viewbox so that\n // a new get operation on viewbox or zoom\n // triggers a viewbox re-computation\n this._cachedViewbox = null;\n\n // notify others of the change; this step\n // may or may not be debounced\n this._viewboxChanged();\n};\n\nCanvas.prototype._viewboxChanged = function() {\n this._eventBus.fire('canvas.viewbox.changed', { viewbox: this.viewbox() });\n};\n\n\n/**\n * Gets or sets the view box of the canvas, i.e. the\n * area that is currently displayed.\n *\n * The getter may return a cached viewbox (if it is currently\n * changing). To force a recomputation, pass `false` as the first argument.\n *\n * @example\n *\n * ```javascript\n * canvas.viewbox({ x: 100, y: 100, width: 500, height: 500 })\n *\n * // sets the visible area of the diagram to (100|100) -> (600|100)\n * // and and scales it according to the diagram width\n *\n * const viewbox = canvas.viewbox(); // pass `false` to force recomputing the box.\n *\n * console.log(viewbox);\n * // {\n * // inner: Dimensions,\n * // outer: Dimensions,\n * // scale,\n * // x, y,\n * // width, height\n * // }\n *\n * // if the current diagram is zoomed and scrolled, you may reset it to the\n * // default zoom via this method, too:\n *\n * const zoomedAndScrolledViewbox = canvas.viewbox();\n *\n * canvas.viewbox({\n * x: 0,\n * y: 0,\n * width: zoomedAndScrolledViewbox.outer.width,\n * height: zoomedAndScrolledViewbox.outer.height\n * });\n * ```\n *\n * @param {Rect} [box] The viewbox to be set.\n *\n * @return {CanvasViewbox} The set viewbox.\n */\nCanvas.prototype.viewbox = function(box) {\n\n if (box === undefined && this._cachedViewbox) {\n return this._cachedViewbox;\n }\n\n const viewport = this._viewport,\n outerBox = this.getSize();\n let innerBox,\n matrix,\n activeLayer,\n transform,\n scale,\n x, y;\n\n if (!box) {\n\n // compute the inner box based on the\n // diagrams active layer. This allows us to exclude\n // external components, such as overlays\n\n activeLayer = this._rootElement ? this.getActiveLayer() : null;\n innerBox = activeLayer && activeLayer.getBBox() || {};\n\n transform = svgTransform(viewport);\n matrix = transform ? transform.matrix : createMatrix();\n scale = round(matrix.a, 1000);\n\n x = round(-matrix.e || 0, 1000);\n y = round(-matrix.f || 0, 1000);\n\n box = this._cachedViewbox = {\n x: x ? x / scale : 0,\n y: y ? y / scale : 0,\n width: outerBox.width / scale,\n height: outerBox.height / scale,\n scale: scale,\n inner: {\n width: innerBox.width || 0,\n height: innerBox.height || 0,\n x: innerBox.x || 0,\n y: innerBox.y || 0\n },\n outer: outerBox\n };\n\n return box;\n } else {\n\n this._changeViewbox(function() {\n scale = Math.min(outerBox.width / box.width, outerBox.height / box.height);\n\n const matrix = this._svg.createSVGMatrix()\n .scale(scale)\n .translate(-box.x, -box.y);\n\n svgTransform(viewport, matrix);\n });\n }\n\n return box;\n};\n\n\n/**\n * Gets or sets the scroll of the canvas.\n *\n * @param {Point} [delta] The scroll to be set.\n *\n * @return {Point}\n */\nCanvas.prototype.scroll = function(delta) {\n\n const node = this._viewport;\n let matrix = node.getCTM();\n\n if (delta) {\n this._changeViewbox(function() {\n delta = assign({ dx: 0, dy: 0 }, delta || {});\n\n matrix = this._svg.createSVGMatrix().translate(delta.dx, delta.dy).multiply(matrix);\n\n setCTM(node, matrix);\n });\n }\n\n return { x: matrix.e, y: matrix.f };\n};\n\n/**\n * Scrolls the viewbox to contain the given element.\n * Optionally specify a padding to be applied to the edges.\n *\n * @param {ShapeLike|ConnectionLike|string} element The element to scroll to or its ID.\n * @param {RectTRBL|number} [padding=100] The padding to be applied. Can also specify top, bottom, left and right.\n */\nCanvas.prototype.scrollToElement = function(element, padding) {\n let defaultPadding = 100;\n\n if (typeof element === 'string') {\n element = this._elementRegistry.get(element);\n }\n\n // set to correct rootElement\n const rootElement = this.findRoot(element);\n\n if (rootElement !== this.getRootElement()) {\n this.setRootElement(rootElement);\n }\n\n // element is rootElement, do not change viewport\n if (rootElement === element) {\n return;\n }\n\n if (!padding) {\n padding = {};\n }\n if (typeof padding === 'number') {\n defaultPadding = padding;\n }\n\n padding = {\n top: padding.top || defaultPadding,\n right: padding.right || defaultPadding,\n bottom: padding.bottom || defaultPadding,\n left: padding.left || defaultPadding\n };\n\n const elementBounds = getBoundingBox(element),\n elementTrbl = asTRBL(elementBounds),\n viewboxBounds = this.viewbox(),\n zoom = this.zoom();\n let dx, dy;\n\n // shrink viewboxBounds with padding\n viewboxBounds.y += padding.top / zoom;\n viewboxBounds.x += padding.left / zoom;\n viewboxBounds.width -= (padding.right + padding.left) / zoom;\n viewboxBounds.height -= (padding.bottom + padding.top) / zoom;\n\n const viewboxTrbl = asTRBL(viewboxBounds);\n\n const canFit = elementBounds.width < viewboxBounds.width && elementBounds.height < viewboxBounds.height;\n\n if (!canFit) {\n\n // top-left when element can't fit\n dx = elementBounds.x - viewboxBounds.x;\n dy = elementBounds.y - viewboxBounds.y;\n\n } else {\n\n const dRight = Math.max(0, elementTrbl.right - viewboxTrbl.right),\n dLeft = Math.min(0, elementTrbl.left - viewboxTrbl.left),\n dBottom = Math.max(0, elementTrbl.bottom - viewboxTrbl.bottom),\n dTop = Math.min(0, elementTrbl.top - viewboxTrbl.top);\n\n dx = dRight || dLeft;\n dy = dBottom || dTop;\n\n }\n\n this.scroll({ dx: -dx * zoom, dy: -dy * zoom });\n};\n\n/**\n * Gets or sets the current zoom of the canvas, optionally zooming to the\n * specified position.\n *\n * The getter may return a cached zoom level. Call it with `false` as the first\n * argument to force recomputation of the current level.\n *\n * @param {number|'fit-viewport'} [newScale] The new zoom level, either a number,\n * i.e. 0.9, or `fit-viewport` to adjust the size to fit the current viewport.\n * @param {Point} [center] The reference point { x: ..., y: ...} to zoom to.\n *\n * @return {number} The set zoom level.\n */\nCanvas.prototype.zoom = function(newScale, center) {\n\n if (!newScale) {\n return this.viewbox(newScale).scale;\n }\n\n if (newScale === 'fit-viewport') {\n return this._fitViewport(center);\n }\n\n let outer,\n matrix;\n\n this._changeViewbox(function() {\n\n if (typeof center !== 'object') {\n outer = this.viewbox().outer;\n\n center = {\n x: outer.width / 2,\n y: outer.height / 2\n };\n }\n\n matrix = this._setZoom(newScale, center);\n });\n\n return round(matrix.a, 1000);\n};\n\nfunction setCTM(node, m) {\n const mstr = 'matrix(' + m.a + ',' + m.b + ',' + m.c + ',' + m.d + ',' + m.e + ',' + m.f + ')';\n node.setAttribute('transform', mstr);\n}\n\nCanvas.prototype._fitViewport = function(center) {\n\n const vbox = this.viewbox(),\n outer = vbox.outer,\n inner = vbox.inner;\n let newScale,\n newViewbox;\n\n // display the complete diagram without zooming in.\n // instead of relying on internal zoom, we perform a\n // hard reset on the canvas viewbox to realize this\n //\n // if diagram does not need to be zoomed in, we focus it around\n // the diagram origin instead\n\n if (inner.x >= 0 &&\n inner.y >= 0 &&\n inner.x + inner.width <= outer.width &&\n inner.y + inner.height <= outer.height &&\n !center) {\n\n newViewbox = {\n x: 0,\n y: 0,\n width: Math.max(inner.width + inner.x, outer.width),\n height: Math.max(inner.height + inner.y, outer.height)\n };\n } else {\n\n newScale = Math.min(1, outer.width / inner.width, outer.height / inner.height);\n newViewbox = {\n x: inner.x + (center ? inner.width / 2 - outer.width / newScale / 2 : 0),\n y: inner.y + (center ? inner.height / 2 - outer.height / newScale / 2 : 0),\n width: outer.width / newScale,\n height: outer.height / newScale\n };\n }\n\n this.viewbox(newViewbox);\n\n return this.viewbox(false).scale;\n};\n\n\nCanvas.prototype._setZoom = function(scale, center) {\n\n const svg = this._svg,\n viewport = this._viewport;\n\n const matrix = svg.createSVGMatrix();\n const point = svg.createSVGPoint();\n\n let centerPoint,\n originalPoint,\n currentMatrix,\n scaleMatrix,\n newMatrix;\n\n currentMatrix = viewport.getCTM();\n\n const currentScale = currentMatrix.a;\n\n if (center) {\n centerPoint = assign(point, center);\n\n // revert applied viewport transformations\n originalPoint = centerPoint.matrixTransform(currentMatrix.inverse());\n\n // create scale matrix\n scaleMatrix = matrix\n .translate(originalPoint.x, originalPoint.y)\n .scale(1 / currentScale * scale)\n .translate(-originalPoint.x, -originalPoint.y);\n\n newMatrix = currentMatrix.multiply(scaleMatrix);\n } else {\n newMatrix = matrix.scale(scale);\n }\n\n setCTM(this._viewport, newMatrix);\n\n return newMatrix;\n};\n\n\n/**\n * Returns the size of the canvas.\n *\n * @return {Dimensions} The size of the canvas.\n */\nCanvas.prototype.getSize = function() {\n return {\n width: this._container.clientWidth,\n height: this._container.clientHeight\n };\n};\n\n\n/**\n * Returns the absolute bounding box of an element.\n *\n * The absolute bounding box may be used to display overlays in the callers\n * (browser) coordinate system rather than the zoomed in/out canvas coordinates.\n *\n * @param {ShapeLike|ConnectionLike} element The element.\n *\n * @return {Rect} The element's absolute bounding box.\n */\nCanvas.prototype.getAbsoluteBBox = function(element) {\n const vbox = this.viewbox();\n let bbox;\n\n // connection\n // use svg bbox\n if (element.waypoints) {\n const gfx = this.getGraphics(element);\n\n bbox = gfx.getBBox();\n }\n\n // shapes\n // use data\n else {\n bbox = element;\n }\n\n const x = bbox.x * vbox.scale - vbox.x * vbox.scale;\n const y = bbox.y * vbox.scale - vbox.y * vbox.scale;\n\n const width = bbox.width * vbox.scale;\n const height = bbox.height * vbox.scale;\n\n return {\n x: x,\n y: y,\n width: width,\n height: height\n };\n};\n\n/**\n * Fires an event so other modules can react to the canvas resizing.\n */\nCanvas.prototype.resized = function() {\n\n // force recomputation of view box\n delete this._cachedViewbox;\n\n this._eventBus.fire('canvas.resized');\n};\n","var ELEMENT_ID = 'data-element-id';\n\nimport { attr as svgAttr } from 'tiny-svg';\n\n/**\n * @typedef {import('./Types').ElementLike} ElementLike\n *\n * @typedef {import('./EventBus').default} EventBus\n *\n * @typedef { (element: ElementLike, gfx: SVGElement) => boolean|any } ElementRegistryFilterCallback\n * @typedef { (element: ElementLike, gfx: SVGElement) => any } ElementRegistryForEachCallback\n */\n\n/**\n * A registry that keeps track of all shapes in the diagram.\n *\n * @class\n * @constructor\n *\n * @param {EventBus} eventBus\n */\nexport default function ElementRegistry(eventBus) {\n\n /**\n * @type { {\n * [id: string]: {\n * element: ElementLike;\n * gfx?: SVGElement;\n * secondaryGfx?: SVGElement;\n * }\n * } }\n */\n this._elements = {};\n\n this._eventBus = eventBus;\n}\n\nElementRegistry.$inject = [ 'eventBus' ];\n\n/**\n * Add an element and its graphical representation(s) to the registry.\n *\n * @param {ElementLike} element The element to be added.\n * @param {SVGElement} gfx The primary graphical representation.\n * @param {SVGElement} [secondaryGfx] The secondary graphical representation.\n */\nElementRegistry.prototype.add = function(element, gfx, secondaryGfx) {\n\n var id = element.id;\n\n this._validateId(id);\n\n // associate dom node with element\n svgAttr(gfx, ELEMENT_ID, id);\n\n if (secondaryGfx) {\n svgAttr(secondaryGfx, ELEMENT_ID, id);\n }\n\n this._elements[id] = { element: element, gfx: gfx, secondaryGfx: secondaryGfx };\n};\n\n/**\n * Remove an element from the registry.\n *\n * @param {ElementLike|string} element\n */\nElementRegistry.prototype.remove = function(element) {\n var elements = this._elements,\n id = element.id || element,\n container = id && elements[id];\n\n if (container) {\n\n // unset element id on gfx\n svgAttr(container.gfx, ELEMENT_ID, '');\n\n if (container.secondaryGfx) {\n svgAttr(container.secondaryGfx, ELEMENT_ID, '');\n }\n\n delete elements[id];\n }\n};\n\n/**\n * Update an elements ID.\n *\n * @param {ElementLike|string} element The element or its ID.\n * @param {string} newId The new ID.\n */\nElementRegistry.prototype.updateId = function(element, newId) {\n\n this._validateId(newId);\n\n if (typeof element === 'string') {\n element = this.get(element);\n }\n\n this._eventBus.fire('element.updateId', {\n element: element,\n newId: newId\n });\n\n var gfx = this.getGraphics(element),\n secondaryGfx = this.getGraphics(element, true);\n\n this.remove(element);\n\n element.id = newId;\n\n this.add(element, gfx, secondaryGfx);\n};\n\n/**\n * Update the graphical representation of an element.\n *\n * @param {ElementLike|string} filter The element or its ID.\n * @param {SVGElement} gfx The new graphical representation.\n * @param {boolean} [secondary=false] Whether to update the secondary graphical representation.\n */\nElementRegistry.prototype.updateGraphics = function(filter, gfx, secondary) {\n var id = filter.id || filter;\n\n var container = this._elements[id];\n\n if (secondary) {\n container.secondaryGfx = gfx;\n } else {\n container.gfx = gfx;\n }\n\n if (gfx) {\n svgAttr(gfx, ELEMENT_ID, id);\n }\n\n return gfx;\n};\n\n/**\n * Get the element with the given ID or graphical representation.\n *\n * @example\n *\n * ```javascript\n * elementRegistry.get('SomeElementId_1');\n *\n * elementRegistry.get(gfx);\n * ```\n *\n * @param {string|SVGElement} filter The elements ID or graphical representation.\n *\n * @return {ElementLike|undefined} The element.\n */\nElementRegistry.prototype.get = function(filter) {\n var id;\n\n if (typeof filter === 'string') {\n id = filter;\n } else {\n id = filter && svgAttr(filter, ELEMENT_ID);\n }\n\n var container = this._elements[id];\n return container && container.element;\n};\n\n/**\n * Return all elements that match a given filter function.\n *\n * @param {ElementRegistryFilterCallback} fn The filter function.\n *\n * @return {ElementLike[]} The matching elements.\n */\nElementRegistry.prototype.filter = function(fn) {\n\n var filtered = [];\n\n this.forEach(function(element, gfx) {\n if (fn(element, gfx)) {\n filtered.push(element);\n }\n });\n\n return filtered;\n};\n\n/**\n * Return the first element that matches the given filter function.\n *\n * @param {ElementRegistryFilterCallback} fn The filter function.\n *\n * @return {ElementLike|undefined} The matching element.\n */\nElementRegistry.prototype.find = function(fn) {\n var map = this._elements,\n keys = Object.keys(map);\n\n for (var i = 0; i < keys.length; i++) {\n var id = keys[i],\n container = map[id],\n element = container.element,\n gfx = container.gfx;\n\n if (fn(element, gfx)) {\n return element;\n }\n }\n};\n\n/**\n * Get all elements.\n *\n * @return {ElementLike[]} All elements.\n */\nElementRegistry.prototype.getAll = function() {\n return this.filter(function(e) { return e; });\n};\n\n/**\n * Execute a given function for each element.\n *\n * @param {ElementRegistryForEachCallback} fn The function to execute.\n */\nElementRegistry.prototype.forEach = function(fn) {\n\n var map = this._elements;\n\n Object.keys(map).forEach(function(id) {\n var container = map[id],\n element = container.element,\n gfx = container.gfx;\n\n return fn(element, gfx);\n });\n};\n\n/**\n * Return the graphical representation of an element.\n *\n * @example\n *\n * ```javascript\n * elementRegistry.getGraphics('SomeElementId_1');\n *\n * elementRegistry.getGraphics(rootElement); // \n *\n * elementRegistry.getGraphics(rootElement, true); // \n * ```\n *\n * @param {ElementLike|string} filter The element or its ID.\n * @param {boolean} [secondary=false] Whether to return the secondary graphical representation.\n *\n * @return {SVGElement} The graphical representation.\n */\nElementRegistry.prototype.getGraphics = function(filter, secondary) {\n var id = filter.id || filter;\n\n var container = this._elements[id];\n return container && (secondary ? container.secondaryGfx : container.gfx);\n};\n\n/**\n * Validate an ID and throw an error if invalid.\n *\n * @param {string} id\n *\n * @throws {Error} Error indicating that the ID is invalid or already assigned.\n */\nElementRegistry.prototype._validateId = function(id) {\n if (!id) {\n throw new Error('element must have an id');\n }\n\n if (this._elements[id]) {\n throw new Error('element with id ' + id + ' already added');\n }\n};\n","/**\n * Extends a collection with {@link Refs} aware methods\n *\n * @param {Array} collection\n * @param {Refs} refs instance\n * @param {Object} property represented by the collection\n * @param {Object} target object the collection is attached to\n *\n * @return {RefsCollection} the extended array\n */\nfunction extend(collection, refs, property, target) {\n var inverseProperty = property.inverse;\n\n /**\n * Removes the given element from the array and returns it.\n *\n * @method RefsCollection#remove\n *\n * @param {Object} element the element to remove\n */\n Object.defineProperty(collection, 'remove', {\n value: function (element) {\n var idx = this.indexOf(element);\n if (idx !== -1) {\n this.splice(idx, 1);\n\n // unset inverse\n refs.unset(element, inverseProperty, target);\n }\n return element;\n }\n });\n\n /**\n * Returns true if the collection contains the given element\n *\n * @method RefsCollection#contains\n *\n * @param {Object} element the element to check for\n */\n Object.defineProperty(collection, 'contains', {\n value: function (element) {\n return this.indexOf(element) !== -1;\n }\n });\n\n /**\n * Adds an element to the array, unless it exists already (set semantics).\n *\n * @method RefsCollection#add\n *\n * @param {Object} element the element to add\n * @param {Number} optional index to add element to\n * (possibly moving other elements around)\n */\n Object.defineProperty(collection, 'add', {\n value: function (element, idx) {\n var currentIdx = this.indexOf(element);\n if (typeof idx === 'undefined') {\n if (currentIdx !== -1) {\n // element already in collection (!)\n return;\n }\n\n // add to end of array, as no idx is specified\n idx = this.length;\n }\n\n // handle already in collection\n if (currentIdx !== -1) {\n // remove element from currentIdx\n this.splice(currentIdx, 1);\n }\n\n // add element at idx\n this.splice(idx, 0, element);\n if (currentIdx === -1) {\n // set inverse, unless element was\n // in collection already\n refs.set(element, inverseProperty, target);\n }\n }\n });\n\n // a simple marker, identifying this element\n // as being a refs collection\n Object.defineProperty(collection, '__refs_collection', {\n value: true\n });\n return collection;\n}\n\n/**\n * Checks if a given collection is extended\n *\n * @param {Array} collection\n *\n * @return {boolean}\n */\nfunction isExtended(collection) {\n return collection.__refs_collection === true;\n}\n\nvar collection = {\n __proto__: null,\n extend: extend,\n isExtended: isExtended\n};\n\nfunction hasOwnProperty(e, property) {\n return Object.prototype.hasOwnProperty.call(e, property.name || property);\n}\nfunction defineCollectionProperty(ref, property, target) {\n var collection = extend(target[property.name] || [], ref, property, target);\n Object.defineProperty(target, property.name, {\n enumerable: property.enumerable,\n value: collection\n });\n if (collection.length) {\n collection.forEach(function (o) {\n ref.set(o, property.inverse, target);\n });\n }\n}\nfunction defineProperty(ref, property, target) {\n var inverseProperty = property.inverse;\n var _value = target[property.name];\n Object.defineProperty(target, property.name, {\n configurable: property.configurable,\n enumerable: property.enumerable,\n get: function () {\n return _value;\n },\n set: function (value) {\n // return if we already performed all changes\n if (value === _value) {\n return;\n }\n var old = _value;\n\n // temporary set null\n _value = null;\n if (old) {\n ref.unset(old, inverseProperty, target);\n }\n\n // set new value\n _value = value;\n\n // set inverse value\n ref.set(_value, inverseProperty, target);\n }\n });\n}\n\n/**\n * Creates a new references object defining two inversly related\n * attribute descriptors a and b.\n *\n * \n * When bound to an object using {@link Refs#bind} the references\n * get activated and ensure that add and remove operations are applied\n * reversely, too.\n *
\n *\n * \n * For attributes represented as collections {@link Refs} provides the\n * {@link RefsCollection#add}, {@link RefsCollection#remove} and {@link RefsCollection#contains} extensions\n * that must be used to properly hook into the inverse change mechanism.\n *
\n *\n * @class Refs\n *\n * @classdesc A bi-directional reference between two attributes.\n *\n * @param {Refs.AttributeDescriptor} a property descriptor\n * @param {Refs.AttributeDescriptor} b property descriptor\n *\n * @example\n *\n * var refs = Refs({ name: 'wheels', collection: true, enumerable: true }, { name: 'car' });\n *\n * var car = { name: 'toyota' };\n * var wheels = [{ pos: 'front-left' }, { pos: 'front-right' }];\n *\n * refs.bind(car, 'wheels');\n *\n * car.wheels // []\n * car.wheels.add(wheels[0]);\n * car.wheels.add(wheels[1]);\n *\n * car.wheels // [{ pos: 'front-left' }, { pos: 'front-right' }]\n *\n * wheels[0].car // { name: 'toyota' };\n * car.wheels.remove(wheels[0]);\n *\n * wheels[0].car // undefined\n */\nfunction Refs(a, b) {\n if (!(this instanceof Refs)) {\n return new Refs(a, b);\n }\n\n // link\n a.inverse = b;\n b.inverse = a;\n this.props = {};\n this.props[a.name] = a;\n this.props[b.name] = b;\n}\n\n/**\n * Binds one side of a bi-directional reference to a\n * target object.\n *\n * @memberOf Refs\n *\n * @param {Object} target\n * @param {String} property\n */\nRefs.prototype.bind = function (target, property) {\n if (typeof property === 'string') {\n if (!this.props[property]) {\n throw new Error('no property <' + property + '> in ref');\n }\n property = this.props[property];\n }\n if (property.collection) {\n defineCollectionProperty(this, property, target);\n } else {\n defineProperty(this, property, target);\n }\n};\nRefs.prototype.ensureRefsCollection = function (target, property) {\n var collection = target[property.name];\n if (!isExtended(collection)) {\n defineCollectionProperty(this, property, target);\n }\n return collection;\n};\nRefs.prototype.ensureBound = function (target, property) {\n if (!hasOwnProperty(target, property)) {\n this.bind(target, property);\n }\n};\nRefs.prototype.unset = function (target, property, value) {\n if (target) {\n this.ensureBound(target, property);\n if (property.collection) {\n this.ensureRefsCollection(target, property).remove(value);\n } else {\n target[property.name] = undefined;\n }\n }\n};\nRefs.prototype.set = function (target, property, value) {\n if (target) {\n this.ensureBound(target, property);\n if (property.collection) {\n this.ensureRefsCollection(target, property).add(value);\n } else {\n target[property.name] = value;\n }\n }\n};\n\n/**\n * An attribute descriptor to be used specify an attribute in a {@link Refs} instance\n *\n * @typedef {Object} Refs.AttributeDescriptor\n * @property {String} name\n * @property {boolean} [collection=false]\n * @property {boolean} [enumerable=false]\n */\n\nexport { collection as Collection, Refs };\n","import { assign } from 'min-dash';\nimport inherits from 'inherits-browser';\n\nimport { Refs } from 'object-refs';\n\nvar parentRefs = new Refs({ name: 'children', enumerable: true, collection: true }, { name: 'parent' }),\n labelRefs = new Refs({ name: 'labels', enumerable: true, collection: true }, { name: 'labelTarget' }),\n attacherRefs = new Refs({ name: 'attachers', collection: true }, { name: 'host' }),\n outgoingRefs = new Refs({ name: 'outgoing', collection: true }, { name: 'source' }),\n incomingRefs = new Refs({ name: 'incoming', collection: true }, { name: 'target' });\n\n/**\n * @typedef {import('./Types').Element} Element\n * @typedef {import('./Types').Shape} Shape\n * @typedef {import('./Types').Root} Root\n * @typedef {import('./Types').Label} Label\n * @typedef {import('./Types').Connection} Connection\n */\n\n/**\n * The basic graphical representation\n *\n * @class\n * @constructor\n */\nfunction ElementImpl() {\n\n /**\n * The object that backs up the shape\n *\n * @name Element#businessObject\n * @type Object\n */\n Object.defineProperty(this, 'businessObject', {\n writable: true\n });\n\n\n /**\n * Single label support, will mapped to multi label array\n *\n * @name Element#label\n * @type Object\n */\n Object.defineProperty(this, 'label', {\n get: function() {\n return this.labels[0];\n },\n set: function(newLabel) {\n\n var label = this.label,\n labels = this.labels;\n\n if (!newLabel && label) {\n labels.remove(label);\n } else {\n labels.add(newLabel, 0);\n }\n }\n });\n\n /**\n * The parent shape\n *\n * @name Element#parent\n * @type Shape\n */\n parentRefs.bind(this, 'parent');\n\n /**\n * The list of labels\n *\n * @name Element#labels\n * @type Label\n */\n labelRefs.bind(this, 'labels');\n\n /**\n * The list of outgoing connections\n *\n * @name Element#outgoing\n * @type Array\n */\n outgoingRefs.bind(this, 'outgoing');\n\n /**\n * The list of incoming connections\n *\n * @name Element#incoming\n * @type Array\n */\n incomingRefs.bind(this, 'incoming');\n}\n\n\n/**\n * A graphical object\n *\n * @class\n * @constructor\n *\n * @extends ElementImpl\n */\nfunction ShapeImpl() {\n ElementImpl.call(this);\n\n /**\n * Indicates frame shapes\n *\n * @name ShapeImpl#isFrame\n * @type boolean\n */\n\n /**\n * The list of children\n *\n * @name ShapeImpl#children\n * @type Element[]\n */\n parentRefs.bind(this, 'children');\n\n /**\n * @name ShapeImpl#host\n * @type Shape\n */\n attacherRefs.bind(this, 'host');\n\n /**\n * @name ShapeImpl#attachers\n * @type Shape\n */\n attacherRefs.bind(this, 'attachers');\n}\n\ninherits(ShapeImpl, ElementImpl);\n\n\n/**\n * A root graphical object\n *\n * @class\n * @constructor\n *\n * @extends ElementImpl\n */\nfunction RootImpl() {\n ElementImpl.call(this);\n\n /**\n * The list of children\n *\n * @name RootImpl#children\n * @type Element[]\n */\n parentRefs.bind(this, 'children');\n}\n\ninherits(RootImpl, ShapeImpl);\n\n\n/**\n * A label for an element\n *\n * @class\n * @constructor\n *\n * @extends ShapeImpl\n */\nfunction LabelImpl() {\n ShapeImpl.call(this);\n\n /**\n * The labeled element\n *\n * @name LabelImpl#labelTarget\n * @type Element\n */\n labelRefs.bind(this, 'labelTarget');\n}\n\ninherits(LabelImpl, ShapeImpl);\n\n\n/**\n * A connection between two elements\n *\n * @class\n * @constructor\n *\n * @extends ElementImpl\n */\nfunction ConnectionImpl() {\n ElementImpl.call(this);\n\n /**\n * The element this connection originates from\n *\n * @name ConnectionImpl#source\n * @type Element\n */\n outgoingRefs.bind(this, 'source');\n\n /**\n * The element this connection points to\n *\n * @name ConnectionImpl#target\n * @type Element\n */\n incomingRefs.bind(this, 'target');\n}\n\ninherits(ConnectionImpl, ElementImpl);\n\n\nvar types = {\n connection: ConnectionImpl,\n shape: ShapeImpl,\n label: LabelImpl,\n root: RootImpl\n};\n\n/**\n * Creates a root element.\n *\n * @overlord\n *\n * @example\n *\n * ```javascript\n * import * as Model from 'diagram-js/lib/model';\n *\n * const root = Model.create('root', {\n * x: 100,\n * y: 100,\n * width: 100,\n * height: 100\n * });\n * ```\n *\n * @param {'root'} type\n * @param {any} [attrs]\n *\n * @return {Root}\n */\n\n/**\n * Creates a connection.\n *\n * @overlord\n *\n * @example\n *\n * ```javascript\n * import * as Model from 'diagram-js/lib/model';\n *\n * const connection = Model.create('connection', {\n * waypoints: [\n * { x: 100, y: 100 },\n * { x: 200, y: 100 }\n * ]\n * });\n * ```\n *\n * @param {'connection'} type\n * @param {any} [attrs]\n *\n * @return {Connection}\n */\n\n/**\n * Creates a shape.\n *\n * @overlord\n *\n * @example\n *\n * ```javascript\n * import * as Model from 'diagram-js/lib/model';\n *\n * const shape = Model.create('shape', {\n * x: 100,\n * y: 100,\n * width: 100,\n * height: 100\n * });\n * ```\n *\n * @param {'shape'} type\n * @param {any} [attrs]\n *\n * @return {Shape}\n */\n\n/**\n * Creates a label.\n *\n * @example\n *\n * ```javascript\n * import * as Model from 'diagram-js/lib/model';\n *\n * const label = Model.create('label', {\n * x: 100,\n * y: 100,\n * width: 100,\n * height: 100,\n * labelTarget: shape\n * });\n * ```\n *\n * @param {'label'} type\n * @param {Object} [attrs]\n *\n * @return {Label}\n */\nexport function create(type, attrs) {\n var Type = types[type];\n if (!Type) {\n throw new Error('unknown type: <' + type + '>');\n }\n return assign(new Type(), attrs);\n}\n\n/**\n * Checks whether an object is a model instance.\n *\n * @param {any} obj\n *\n * @return {boolean}\n */\nexport function isModelElement(obj) {\n return obj instanceof ElementImpl;\n}","import {\n create\n} from '../model';\n\nimport { assign } from 'min-dash';\n\n/**\n * @typedef {import('../model/Types').Element} Element\n * @typedef {import('../model/Types').Connection} Connection\n * @typedef {import('../model/Types').Label} Label\n * @typedef {import('../model/Types').Root} Root\n * @typedef {import('../model/Types').Shape} Shape\n */\n\n/**\n * A factory for model elements.\n *\n * @template {Connection} [T=Connection]\n * @template {Label} [U=Label]\n * @template {Root} [V=Root]\n * @template {Shape} [W=Shape]\n */\nexport default function ElementFactory() {\n this._uid = 12;\n}\n\n/**\n * Create a root element.\n *\n * @param {Partial} [attrs]\n *\n * @return {V} The created root element.\n */\nElementFactory.prototype.createRoot = function(attrs) {\n return this.create('root', attrs);\n};\n\n/**\n * Create a label.\n *\n * @param {Partial} [attrs]\n *\n * @return {U} The created label.\n */\nElementFactory.prototype.createLabel = function(attrs) {\n return this.create('label', attrs);\n};\n\n/**\n * Create a shape.\n *\n * @param {Partial} [attrs]\n *\n * @return {W} The created shape.\n */\nElementFactory.prototype.createShape = function(attrs) {\n return this.create('shape', attrs);\n};\n\n/**\n * Create a connection.\n *\n * @param {Partial} [attrs]\n *\n * @return {T} The created connection.\n */\nElementFactory.prototype.createConnection = function(attrs) {\n return this.create('connection', attrs);\n};\n\n/**\n * Create a root element.\n *\n * @overlord\n * @param {'root'} type\n * @param {Partial} [attrs]\n * @return {V}\n */\n/**\n * Create a shape.\n *\n * @overlord\n * @param {'shape'} type\n * @param {Partial} [attrs]\n * @return {W}\n */\n/**\n * Create a connection.\n *\n * @overlord\n * @param {'connection'} type\n * @param {Partial} [attrs]\n * @return {T}\n */\n/**\n * Create a label.\n *\n * @param {'label'} type\n * @param {Partial} [attrs]\n * @return {U}\n */\nElementFactory.prototype.create = function(type, attrs) {\n\n attrs = assign({}, attrs || {});\n\n if (!attrs.id) {\n attrs.id = type + '_' + (this._uid++);\n }\n\n return create(type, attrs);\n};","import {\n isFunction,\n isArray,\n isNumber,\n bind,\n assign\n} from 'min-dash';\n\nvar FN_REF = '__fn';\n\nvar DEFAULT_PRIORITY = 1000;\n\nvar slice = Array.prototype.slice;\n\n/**\n * @typedef { {\n * stopPropagation(): void;\n * preventDefault(): void;\n * cancelBubble: boolean;\n * defaultPrevented: boolean;\n * returnValue: any;\n * } } Event\n */\n\n/**\n * @template E\n *\n * @typedef { (event: E & Event, ...any) => any } EventBusEventCallback\n */\n\n/**\n * @typedef { {\n * priority: number;\n * next: EventBusListener | null;\n * callback: EventBusEventCallback;\n * } } EventBusListener\n */\n\n/**\n * A general purpose event bus.\n *\n * This component is used to communicate across a diagram instance.\n * Other parts of a diagram can use it to listen to and broadcast events.\n *\n *\n * ## Registering for Events\n *\n * The event bus provides the {@link EventBus#on} and {@link EventBus#once}\n * methods to register for events. {@link EventBus#off} can be used to\n * remove event registrations. Listeners receive an instance of {@link Event}\n * as the first argument. It allows them to hook into the event execution.\n *\n * ```javascript\n *\n * // listen for event\n * eventBus.on('foo', function(event) {\n *\n * // access event type\n * event.type; // 'foo'\n *\n * // stop propagation to other listeners\n * event.stopPropagation();\n *\n * // prevent event default\n * event.preventDefault();\n * });\n *\n * // listen for event with custom payload\n * eventBus.on('bar', function(event, payload) {\n * console.log(payload);\n * });\n *\n * // listen for event returning value\n * eventBus.on('foobar', function(event) {\n *\n * // stop event propagation + prevent default\n * return false;\n *\n * // stop event propagation + return custom result\n * return {\n * complex: 'listening result'\n * };\n * });\n *\n *\n * // listen with custom priority (default=1000, higher is better)\n * eventBus.on('priorityfoo', 1500, function(event) {\n * console.log('invoked first!');\n * });\n *\n *\n * // listen for event and pass the context (`this`)\n * eventBus.on('foobar', function(event) {\n * this.foo();\n * }, this);\n * ```\n *\n *\n * ## Emitting Events\n *\n * Events can be emitted via the event bus using {@link EventBus#fire}.\n *\n * ```javascript\n *\n * // false indicates that the default action\n * // was prevented by listeners\n * if (eventBus.fire('foo') === false) {\n * console.log('default has been prevented!');\n * };\n *\n *\n * // custom args + return value listener\n * eventBus.on('sum', function(event, a, b) {\n * return a + b;\n * });\n *\n * // you can pass custom arguments + retrieve result values.\n * var sum = eventBus.fire('sum', 1, 2);\n * console.log(sum); // 3\n * ```\n */\nexport default function EventBus() {\n\n /**\n * @type { Record }\n */\n this._listeners = {};\n\n // cleanup on destroy on lowest priority to allow\n // message passing until the bitter end\n this.on('diagram.destroy', 1, this._destroy, this);\n}\n\n\n/**\n * Register an event listener for events with the given name.\n *\n * The callback will be invoked with `event, ...additionalArguments`\n * that have been passed to {@link EventBus#fire}.\n *\n * Returning false from a listener will prevent the events default action\n * (if any is specified). To stop an event from being processed further in\n * other listeners execute {@link Event#stopPropagation}.\n *\n * Returning anything but `undefined` from a listener will stop the listener propagation.\n *\n * @template T\n *\n * @param {string|string[]} events to subscribe to\n * @param {number} [priority=1000] listen priority\n * @param {EventBusEventCallback} callback\n * @param {any} [that] callback context\n */\nEventBus.prototype.on = function(events, priority, callback, that) {\n\n events = isArray(events) ? events : [ events ];\n\n if (isFunction(priority)) {\n that = callback;\n callback = priority;\n priority = DEFAULT_PRIORITY;\n }\n\n if (!isNumber(priority)) {\n throw new Error('priority must be a number');\n }\n\n var actualCallback = callback;\n\n if (that) {\n actualCallback = bind(callback, that);\n\n // make sure we remember and are able to remove\n // bound callbacks via {@link #off} using the original\n // callback\n actualCallback[FN_REF] = callback[FN_REF] || callback;\n }\n\n var self = this;\n\n events.forEach(function(e) {\n self._addListener(e, {\n priority: priority,\n callback: actualCallback,\n next: null\n });\n });\n};\n\n/**\n * Register an event listener that is called only once.\n *\n * @template T\n *\n * @param {string|string[]} events to subscribe to\n * @param {number} [priority=1000] the listen priority\n * @param {EventBusEventCallback} callback\n * @param {any} [that] callback context\n */\nEventBus.prototype.once = function(events, priority, callback, that) {\n var self = this;\n\n if (isFunction(priority)) {\n that = callback;\n callback = priority;\n priority = DEFAULT_PRIORITY;\n }\n\n if (!isNumber(priority)) {\n throw new Error('priority must be a number');\n }\n\n function wrappedCallback() {\n wrappedCallback.__isTomb = true;\n\n var result = callback.apply(that, arguments);\n\n self.off(events, wrappedCallback);\n\n return result;\n }\n\n // make sure we remember and are able to remove\n // bound callbacks via {@link #off} using the original\n // callback\n wrappedCallback[FN_REF] = callback;\n\n this.on(events, priority, wrappedCallback);\n};\n\n\n/**\n * Removes event listeners by event and callback.\n *\n * If no callback is given, all listeners for a given event name are being removed.\n *\n * @param {string|string[]} events\n * @param {EventBusEventCallback} [callback]\n */\nEventBus.prototype.off = function(events, callback) {\n\n events = isArray(events) ? events : [ events ];\n\n var self = this;\n\n events.forEach(function(event) {\n self._removeListener(event, callback);\n });\n\n};\n\n\n/**\n * Create an event recognized be the event bus.\n *\n * @param {Object} data Event data.\n *\n * @return {Event} An event that will be recognized by the event bus.\n */\nEventBus.prototype.createEvent = function(data) {\n var event = new InternalEvent();\n\n event.init(data);\n\n return event;\n};\n\n\n/**\n * Fires an event.\n *\n * @example\n *\n * ```javascript\n * // fire event by name\n * events.fire('foo');\n *\n * // fire event object with nested type\n * var event = { type: 'foo' };\n * events.fire(event);\n *\n * // fire event with explicit type\n * var event = { x: 10, y: 20 };\n * events.fire('element.moved', event);\n *\n * // pass additional arguments to the event\n * events.on('foo', function(event, bar) {\n * alert(bar);\n * });\n *\n * events.fire({ type: 'foo' }, 'I am bar!');\n * ```\n *\n * @param {string} [type] event type\n * @param {Object} [data] event or event data\n * @param {...any} [args] additional arguments the callback will be called with.\n *\n * @return {any} The return value. Will be set to `false` if the default was prevented.\n */\nEventBus.prototype.fire = function(type, data) {\n var event,\n firstListener,\n returnValue,\n args;\n\n args = slice.call(arguments);\n\n if (typeof type === 'object') {\n data = type;\n type = data.type;\n }\n\n if (!type) {\n throw new Error('no event type specified');\n }\n\n firstListener = this._listeners[type];\n\n if (!firstListener) {\n return;\n }\n\n // we make sure we fire instances of our home made\n // events here. We wrap them only once, though\n if (data instanceof InternalEvent) {\n\n // we are fine, we alread have an event\n event = data;\n } else {\n event = this.createEvent(data);\n }\n\n // ensure we pass the event as the first parameter\n args[0] = event;\n\n // original event type (in case we delegate)\n var originalType = event.type;\n\n // update event type before delegation\n if (type !== originalType) {\n event.type = type;\n }\n\n try {\n returnValue = this._invokeListeners(event, args, firstListener);\n } finally {\n\n // reset event type after delegation\n if (type !== originalType) {\n event.type = originalType;\n }\n }\n\n // set the return value to false if the event default\n // got prevented and no other return value exists\n if (returnValue === undefined && event.defaultPrevented) {\n returnValue = false;\n }\n\n return returnValue;\n};\n\n/**\n * Handle an error by firing an event.\n *\n * @param {Error} error The error to be handled.\n *\n * @return {boolean} Whether the error was handled.\n */\nEventBus.prototype.handleError = function(error) {\n return this.fire('error', { error: error }) === false;\n};\n\n\nEventBus.prototype._destroy = function() {\n this._listeners = {};\n};\n\n/**\n * @param {Event} event\n * @param {any[]} args\n * @param {EventBusListener} listener\n *\n * @return {any}\n */\nEventBus.prototype._invokeListeners = function(event, args, listener) {\n\n var returnValue;\n\n while (listener) {\n\n // handle stopped propagation\n if (event.cancelBubble) {\n break;\n }\n\n returnValue = this._invokeListener(event, args, listener);\n\n listener = listener.next;\n }\n\n return returnValue;\n};\n\n/**\n * @param {Event} event\n * @param {any[]} args\n * @param {EventBusListener} listener\n *\n * @return {any}\n */\nEventBus.prototype._invokeListener = function(event, args, listener) {\n\n var returnValue;\n\n if (listener.callback.__isTomb) {\n return returnValue;\n }\n\n try {\n\n // returning false prevents the default action\n returnValue = invokeFunction(listener.callback, args);\n\n // stop propagation on return value\n if (returnValue !== undefined) {\n event.returnValue = returnValue;\n event.stopPropagation();\n }\n\n // prevent default on return false\n if (returnValue === false) {\n event.preventDefault();\n }\n } catch (error) {\n if (!this.handleError(error)) {\n console.error('unhandled error in event listener', error);\n\n throw error;\n }\n }\n\n return returnValue;\n};\n\n/**\n * Add new listener with a certain priority to the list\n * of listeners (for the given event).\n *\n * The semantics of listener registration / listener execution are\n * first register, first serve: New listeners will always be inserted\n * after existing listeners with the same priority.\n *\n * Example: Inserting two listeners with priority 1000 and 1300\n *\n * * before: [ 1500, 1500, 1000, 1000 ]\n * * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]\n *\n * @param {string} event\n * @param {EventBusListener} newListener\n */\nEventBus.prototype._addListener = function(event, newListener) {\n\n var listener = this._getListeners(event),\n previousListener;\n\n // no prior listeners\n if (!listener) {\n this._setListeners(event, newListener);\n\n return;\n }\n\n // ensure we order listeners by priority from\n // 0 (high) to n > 0 (low)\n while (listener) {\n\n if (listener.priority < newListener.priority) {\n\n newListener.next = listener;\n\n if (previousListener) {\n previousListener.next = newListener;\n } else {\n this._setListeners(event, newListener);\n }\n\n return;\n }\n\n previousListener = listener;\n listener = listener.next;\n }\n\n // add new listener to back\n previousListener.next = newListener;\n};\n\n\n/**\n * @param {string} name\n *\n * @return {EventBusListener}\n */\nEventBus.prototype._getListeners = function(name) {\n return this._listeners[name];\n};\n\n/**\n * @param {string} name\n * @param {EventBusListener} listener\n */\nEventBus.prototype._setListeners = function(name, listener) {\n this._listeners[name] = listener;\n};\n\nEventBus.prototype._removeListener = function(event, callback) {\n\n var listener = this._getListeners(event),\n nextListener,\n previousListener,\n listenerCallback;\n\n if (!callback) {\n\n // clear listeners\n this._setListeners(event, null);\n\n return;\n }\n\n while (listener) {\n\n nextListener = listener.next;\n\n listenerCallback = listener.callback;\n\n if (listenerCallback === callback || listenerCallback[FN_REF] === callback) {\n if (previousListener) {\n previousListener.next = nextListener;\n } else {\n\n // new first listener\n this._setListeners(event, nextListener);\n }\n }\n\n previousListener = listener;\n listener = nextListener;\n }\n};\n\n/**\n * A event that is emitted via the event bus.\n */\nfunction InternalEvent() { }\n\nInternalEvent.prototype.stopPropagation = function() {\n this.cancelBubble = true;\n};\n\nInternalEvent.prototype.preventDefault = function() {\n this.defaultPrevented = true;\n};\n\nInternalEvent.prototype.init = function(data) {\n assign(this, data || {});\n};\n\n\n/**\n * Invoke function. Be fast...\n *\n * @param {Function} fn\n * @param {any[]} args\n *\n * @return {any}\n */\nfunction invokeFunction(fn, args) {\n return fn.apply(null, args);\n}\n","/**\n * SVGs for elements are generated by the {@link GraphicsFactory}.\n *\n * This utility gives quick access to the important semantic\n * parts of an element.\n */\n\n/**\n * Returns the visual part of a diagram element.\n *\n * @param {SVGElement} gfx\n *\n * @return {SVGElement}\n */\nexport function getVisual(gfx) {\n return gfx.childNodes[0];\n}\n\n/**\n * Returns the children for a given diagram element.\n *\n * @param {SVGElement} gfx\n * @return {SVGElement}\n */\nexport function getChildren(gfx) {\n return gfx.parentNode.childNodes[1];\n}","import {\r\n transform as svgTransform,\r\n createTransform\r\n} from 'tiny-svg';\r\n\r\n\r\n/**\r\n * @param {SVGElement} gfx\r\n * @param {number} x\r\n * @param {number} y\r\n * @param {number} [angle]\r\n * @param {number} [amount]\r\n */\r\nexport function transform(gfx, x, y, angle, amount) {\r\n var translate = createTransform();\r\n translate.setTranslate(x, y);\r\n\r\n var rotate = createTransform();\r\n rotate.setRotate(angle || 0, 0, 0);\r\n\r\n var scale = createTransform();\r\n scale.setScale(amount || 1, amount || 1);\r\n\r\n svgTransform(gfx, [ translate, rotate, scale ]);\r\n}\r\n\r\n\r\n/**\r\n * @param {SVGElement} gfx\r\n * @param {number} x\r\n * @param {number} y\r\n */\r\nexport function translate(gfx, x, y) {\r\n var translate = createTransform();\r\n translate.setTranslate(x, y);\r\n\r\n svgTransform(gfx, translate);\r\n}\r\n\r\n\r\n/**\r\n * @param {SVGElement} gfx\r\n * @param {number} angle\r\n */\r\nexport function rotate(gfx, angle) {\r\n var rotate = createTransform();\r\n rotate.setRotate(angle, 0, 0);\r\n\r\n svgTransform(gfx, rotate);\r\n}\r\n\r\n\r\n/**\r\n * @param {SVGElement} gfx\r\n * @param {number} amount\r\n */\r\nexport function scale(gfx, amount) {\r\n var scale = createTransform();\r\n scale.setScale(amount, amount);\r\n\r\n svgTransform(gfx, scale);\r\n}\r\n","import {\n forEach,\n reduce\n} from 'min-dash';\n\nimport {\n getChildren,\n getVisual\n} from '../util/GraphicsUtil';\n\nimport { translate } from '../util/SvgTransformUtil';\n\nimport { clear as domClear } from 'min-dom';\n\nimport {\n append as svgAppend,\n attr as svgAttr,\n classes as svgClasses,\n create as svgCreate,\n remove as svgRemove\n} from 'tiny-svg';\n\nimport {\n isFrameElement\n} from '../util/Elements';\n\n/**\n * @typedef {import('./Types').ConnectionLike} ConnectionLike\n * @typedef {import('./Types').ElementLike} ElementLike\n * @typedef {import('./Types').ShapeLike} ShapeLike\n *\n * @typedef {import('./ElementRegistry').default} ElementRegistry\n * @typedef {import('./EventBus').default} EventBus\n */\n\n/**\n * A factory that creates graphical elements.\n *\n * @param {EventBus} eventBus\n * @param {ElementRegistry} elementRegistry\n */\nexport default function GraphicsFactory(eventBus, elementRegistry) {\n this._eventBus = eventBus;\n this._elementRegistry = elementRegistry;\n}\n\nGraphicsFactory.$inject = [ 'eventBus' , 'elementRegistry' ];\n\n/**\n * @param { { parent?: any } } element\n * @return {SVGElement}\n */\nGraphicsFactory.prototype._getChildrenContainer = function(element) {\n\n var gfx = this._elementRegistry.getGraphics(element);\n\n var childrenGfx;\n\n // root element\n if (!element.parent) {\n childrenGfx = gfx;\n } else {\n childrenGfx = getChildren(gfx);\n if (!childrenGfx) {\n childrenGfx = svgCreate('g');\n svgClasses(childrenGfx).add('djs-children');\n\n svgAppend(gfx.parentNode, childrenGfx);\n }\n }\n\n return childrenGfx;\n};\n\n/**\n * Clears the graphical representation of the element and returns the\n * cleared visual (the \n *\n * \n * \n * \n * \n * \n *\n * \n * \n *\n * @param {string} type the type of the element, i.e. shape | connection\n * @param {SVGElement} childrenGfx\n * @param {number} [parentIndex] position to create container in parent\n * @param {boolean} [isFrame] is frame element\n *\n * @return {SVGElement}\n */\nGraphicsFactory.prototype._createContainer = function(\n type, childrenGfx, parentIndex, isFrame\n) {\n var outerGfx = svgCreate('g');\n svgClasses(outerGfx).add('djs-group');\n\n // insert node at position\n if (typeof parentIndex !== 'undefined') {\n prependTo(outerGfx, childrenGfx, childrenGfx.childNodes[parentIndex]);\n } else {\n svgAppend(childrenGfx, outerGfx);\n }\n\n var gfx = svgCreate('g');\n svgClasses(gfx).add('djs-element');\n svgClasses(gfx).add('djs-' + type);\n\n if (isFrame) {\n svgClasses(gfx).add('djs-frame');\n }\n\n svgAppend(outerGfx, gfx);\n\n // create visual\n var visual = svgCreate('g');\n svgClasses(visual).add('djs-visual');\n\n svgAppend(gfx, visual);\n\n return gfx;\n};\n\n/**\n * Create a graphical element.\n *\n * @param { 'shape' | 'connection' | 'label' | 'root' } type The type of the element.\n * @param {ElementLike} element The element.\n * @param {number} [parentIndex] The index at which to add the graphical element to its parent's children.\n *\n * @return {SVGElement} The graphical element.\n */\nGraphicsFactory.prototype.create = function(type, element, parentIndex) {\n var childrenGfx = this._getChildrenContainer(element.parent);\n return this._createContainer(type, childrenGfx, parentIndex, isFrameElement(element));\n};\n\n/**\n * Update the containments of the given elements.\n *\n * @param {ElementLike[]} elements The elements.\n */\nGraphicsFactory.prototype.updateContainments = function(elements) {\n\n var self = this,\n elementRegistry = this._elementRegistry,\n parents;\n\n parents = reduce(elements, function(map, e) {\n\n if (e.parent) {\n map[e.parent.id] = e.parent;\n }\n\n return map;\n }, {});\n\n // update all parents of changed and reorganized their children\n // in the correct order (as indicated in our model)\n forEach(parents, function(parent) {\n\n var children = parent.children;\n\n if (!children) {\n return;\n }\n\n var childrenGfx = self._getChildrenContainer(parent);\n\n forEach(children.slice().reverse(), function(child) {\n var childGfx = elementRegistry.getGraphics(child);\n\n prependTo(childGfx.parentNode, childrenGfx);\n });\n });\n};\n\n/**\n * Draw a shape.\n *\n * @param {SVGElement} visual The graphical element.\n * @param {ShapeLike} element The shape.\n * @param {Object} attrs Optional attributes.\n *\n * @return {SVGElement}\n */\nGraphicsFactory.prototype.drawShape = function(visual, element, attrs = {}) {\n var eventBus = this._eventBus;\n\n return eventBus.fire('render.shape', { gfx: visual, element, attrs });\n};\n\n/**\n * Get the path of a shape.\n *\n * @param {ShapeLike} element The shape.\n *\n * @return {string} The path of the shape.\n */\nGraphicsFactory.prototype.getShapePath = function(element) {\n var eventBus = this._eventBus;\n\n return eventBus.fire('render.getShapePath', element);\n};\n\n/**\n * Draw a connection.\n *\n * @param {SVGElement} visual The graphical element.\n * @param {ConnectionLike} element The connection.\n * @param {Object} attrs Optional attributes.\n *\n * @return {SVGElement}\n */\nGraphicsFactory.prototype.drawConnection = function(visual, element, attrs = {}) {\n var eventBus = this._eventBus;\n\n return eventBus.fire('render.connection', { gfx: visual, element, attrs });\n};\n\n/**\n * Get the path of a connection.\n *\n * @param {ConnectionLike} connection The connection.\n *\n * @return {string} The path of the connection.\n */\nGraphicsFactory.prototype.getConnectionPath = function(connection) {\n var eventBus = this._eventBus;\n\n return eventBus.fire('render.getConnectionPath', connection);\n};\n\n/**\n * Update an elements graphical representation.\n *\n * @param {'shape'|'connection'} type\n * @param {ElementLike} element\n * @param {SVGElement} gfx\n */\nGraphicsFactory.prototype.update = function(type, element, gfx) {\n\n // do NOT update root element\n if (!element.parent) {\n return;\n }\n\n var visual = this._clear(gfx);\n\n // redraw\n if (type === 'shape') {\n this.drawShape(visual, element);\n\n // update positioning\n translate(gfx, element.x, element.y);\n } else\n if (type === 'connection') {\n this.drawConnection(visual, element);\n } else {\n throw new Error('unknown type: ' + type);\n }\n\n if (element.hidden) {\n svgAttr(gfx, 'display', 'none');\n } else {\n svgAttr(gfx, 'display', 'block');\n }\n};\n\n/**\n * Remove a graphical element.\n *\n * @param {ElementLike} element The element.\n */\nGraphicsFactory.prototype.remove = function(element) {\n var gfx = this._elementRegistry.getGraphics(element);\n\n // remove\n svgRemove(gfx.parentNode);\n};\n\n\n// helpers //////////\n\nfunction prependTo(newNode, parentNode, siblingNode) {\n var node = siblingNode || parentNode.firstChild;\n\n // do not prepend node to itself to prevent IE from crashing\n // https://github.com/bpmn-io/bpmn-js/issues/746\n if (newNode === node) {\n return;\n }\n\n parentNode.insertBefore(newNode, node);\n}\n","import DrawModule from '../draw';\n\nimport Canvas from './Canvas';\nimport ElementRegistry from './ElementRegistry';\nimport ElementFactory from './ElementFactory';\nimport EventBus from './EventBus';\nimport GraphicsFactory from './GraphicsFactory';\n\n/**\n * @type { import('didi').ModuleDeclaration }\n */\nexport default {\n __depends__: [ DrawModule ],\n __init__: [ 'canvas' ],\n canvas: [ 'type', Canvas ],\n elementRegistry: [ 'type', ElementRegistry ],\n elementFactory: [ 'type', ElementFactory ],\n eventBus: [ 'type', EventBus ],\n graphicsFactory: [ 'type', GraphicsFactory ]\n};","import { Injector } from 'didi';\n\nimport CoreModule from './core';\n\n/**\n * @typedef {import('didi').InjectionContext} InjectionContext\n * @typedef {import('didi').LocalsMap} LocalsMap\n * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration\n *\n * @typedef { {\n * modules?: ModuleDeclaration[];\n * } & Record } DiagramOptions\n */\n\n/**\n * Bootstrap an injector from a list of modules, instantiating a number of default components\n *\n * @param {ModuleDeclaration[]} modules\n *\n * @return {Injector} a injector to use to access the components\n */\nfunction bootstrap(modules) {\n var injector = new Injector(modules);\n\n injector.init();\n\n return injector;\n}\n\n/**\n * Creates an injector from passed options.\n *\n * @param {DiagramOptions} [options]\n *\n * @return {Injector}\n */\nfunction createInjector(options) {\n\n options = options || {};\n\n /**\n * @type { ModuleDeclaration }\n */\n var configModule = {\n 'config': [ 'value', options ]\n };\n\n var modules = [ configModule, CoreModule ].concat(options.modules || []);\n\n return bootstrap(modules);\n}\n\n\n/**\n * The main diagram-js entry point that bootstraps the diagram with the given\n * configuration.\n *\n * To register extensions with the diagram, pass them as Array to the constructor.\n *\n * @class\n * @constructor\n *\n * @example Creating a plug-in that logs whenever a shape is added to the canvas.\n *\n * ```javascript\n * // plug-in implementation\n * function MyLoggingPlugin(eventBus) {\n * eventBus.on('shape.added', function(event) {\n * console.log('shape ', event.shape, ' was added to the diagram');\n * });\n * }\n *\n * // export as module\n * export default {\n * __init__: [ 'myLoggingPlugin' ],\n * myLoggingPlugin: [ 'type', MyLoggingPlugin ]\n * };\n * ```\n *\n * Use the plug-in in a Diagram instance:\n *\n * ```javascript\n * import MyLoggingModule from 'path-to-my-logging-plugin';\n *\n * var diagram = new Diagram({\n * modules: [\n * MyLoggingModule\n * ]\n * });\n *\n * diagram.invoke([ 'canvas', function(canvas) {\n * // add shape to drawing canvas\n * canvas.addShape({ x: 10, y: 10 });\n * });\n *\n * // 'shape ... was added to the diagram' logged to console\n * ```\n *\n * @param {DiagramOptions} [options]\n * @param {Injector} [injector] An (optional) injector to bootstrap the diagram with.\n */\nexport default function Diagram(options, injector) {\n\n this._injector = injector = injector || createInjector(options);\n\n // API\n\n /**\n * Resolves a diagram service.\n *\n * @template T\n *\n * @param {string} name The name of the service to get.\n * @param {boolean} [strict=true] If false, resolve missing services to null.\n *\n * @return {T|null}\n */\n this.get = injector.get;\n\n /**\n * Executes a function with its dependencies injected.\n *\n * @template T\n *\n * @param {Function} func function to be invoked\n * @param {InjectionContext} [context] context of the invocation\n * @param {LocalsMap} [locals] locals provided\n *\n * @return {T|null}\n */\n this.invoke = injector.invoke;\n\n // init\n\n // indicate via event\n\n\n /**\n * An event indicating that all plug-ins are loaded.\n *\n * Use this event to fire other events to interested plug-ins\n *\n * @memberOf Diagram\n *\n * @event diagram.init\n *\n * @example\n *\n * ```javascript\n * eventBus.on('diagram.init', function() {\n * eventBus.fire('my-custom-event', { foo: 'BAR' });\n * });\n * ```\n *\n * @type {Object}\n */\n this.get('eventBus').fire('diagram.init');\n}\n\n\n/**\n * Destroys the diagram\n */\nDiagram.prototype.destroy = function() {\n this.get('eventBus').fire('diagram.destroy');\n};\n\n/**\n * Clear the diagram, removing all contents.\n */\nDiagram.prototype.clear = function() {\n this.get('eventBus').fire('diagram.clear');\n};\n","import { forEach, bind, pick, assign, isString, isObject, set } from 'min-dash';\n\n/**\n * Moddle base element.\n */\nfunction Base() { }\n\nBase.prototype.get = function(name) {\n return this.$model.properties.get(this, name);\n};\n\nBase.prototype.set = function(name, value) {\n this.$model.properties.set(this, name, value);\n};\n\n/**\n * A model element factory.\n *\n * @param {Moddle} model\n * @param {Properties} properties\n */\nfunction Factory(model, properties) {\n this.model = model;\n this.properties = properties;\n}\n\n\nFactory.prototype.createType = function(descriptor) {\n\n var model = this.model;\n\n var props = this.properties,\n prototype = Object.create(Base.prototype);\n\n // initialize default values\n forEach(descriptor.properties, function(p) {\n if (!p.isMany && p.default !== undefined) {\n prototype[p.name] = p.default;\n }\n });\n\n props.defineModel(prototype, model);\n props.defineDescriptor(prototype, descriptor);\n\n var name = descriptor.ns.name;\n\n /**\n * The new type constructor\n */\n function ModdleElement(attrs) {\n props.define(this, '$type', { value: name, enumerable: true });\n props.define(this, '$attrs', { value: {} });\n props.define(this, '$parent', { writable: true });\n\n forEach(attrs, bind(function(val, key) {\n this.set(key, val);\n }, this));\n }\n\n ModdleElement.prototype = prototype;\n\n ModdleElement.hasType = prototype.$instanceOf = this.model.hasType;\n\n // static links\n props.defineModel(ModdleElement, model);\n props.defineDescriptor(ModdleElement, descriptor);\n\n return ModdleElement;\n};\n\n/**\n * Built-in moddle types\n */\nvar BUILTINS = {\n String: true,\n Boolean: true,\n Integer: true,\n Real: true,\n Element: true\n};\n\n/**\n * Converters for built in types from string representations\n */\nvar TYPE_CONVERTERS = {\n String: function(s) { return s; },\n Boolean: function(s) { return s === 'true'; },\n Integer: function(s) { return parseInt(s, 10); },\n Real: function(s) { return parseFloat(s); }\n};\n\n/**\n * Convert a type to its real representation\n */\nfunction coerceType(type, value) {\n\n var converter = TYPE_CONVERTERS[type];\n\n if (converter) {\n return converter(value);\n } else {\n return value;\n }\n}\n\n/**\n * Return whether the given type is built-in\n */\nfunction isBuiltIn(type) {\n return !!BUILTINS[type];\n}\n\n/**\n * Return whether the given type is simple\n */\nfunction isSimple(type) {\n return !!TYPE_CONVERTERS[type];\n}\n\n/**\n * Parses a namespaced attribute name of the form (ns:)localName to an object,\n * given a default prefix to assume in case no explicit namespace is given.\n *\n * @param {String} name\n * @param {String} [defaultPrefix] the default prefix to take, if none is present.\n *\n * @return {Object} the parsed name\n */\nfunction parseName(name, defaultPrefix) {\n var parts = name.split(/:/),\n localName, prefix;\n\n // no prefix (i.e. only local name)\n if (parts.length === 1) {\n localName = name;\n prefix = defaultPrefix;\n } else\n\n // prefix + local name\n if (parts.length === 2) {\n localName = parts[1];\n prefix = parts[0];\n } else {\n throw new Error('expected or , got ' + name);\n }\n\n name = (prefix ? prefix + ':' : '') + localName;\n\n return {\n name: name,\n prefix: prefix,\n localName: localName\n };\n}\n\n/**\n * A utility to build element descriptors.\n */\nfunction DescriptorBuilder(nameNs) {\n this.ns = nameNs;\n this.name = nameNs.name;\n this.allTypes = [];\n this.allTypesByName = {};\n this.properties = [];\n this.propertiesByName = {};\n}\n\n\nDescriptorBuilder.prototype.build = function() {\n return pick(this, [\n 'ns',\n 'name',\n 'allTypes',\n 'allTypesByName',\n 'properties',\n 'propertiesByName',\n 'bodyProperty',\n 'idProperty'\n ]);\n};\n\n/**\n * Add property at given index.\n *\n * @param {Object} p\n * @param {Number} [idx]\n * @param {Boolean} [validate=true]\n */\nDescriptorBuilder.prototype.addProperty = function(p, idx, validate) {\n\n if (typeof idx === 'boolean') {\n validate = idx;\n idx = undefined;\n }\n\n this.addNamedProperty(p, validate !== false);\n\n var properties = this.properties;\n\n if (idx !== undefined) {\n properties.splice(idx, 0, p);\n } else {\n properties.push(p);\n }\n};\n\n\nDescriptorBuilder.prototype.replaceProperty = function(oldProperty, newProperty, replace) {\n var oldNameNs = oldProperty.ns;\n\n var props = this.properties,\n propertiesByName = this.propertiesByName,\n rename = oldProperty.name !== newProperty.name;\n\n if (oldProperty.isId) {\n if (!newProperty.isId) {\n throw new Error(\n 'property <' + newProperty.ns.name + '> must be id property ' +\n 'to refine <' + oldProperty.ns.name + '>');\n }\n\n this.setIdProperty(newProperty, false);\n }\n\n if (oldProperty.isBody) {\n\n if (!newProperty.isBody) {\n throw new Error(\n 'property <' + newProperty.ns.name + '> must be body property ' +\n 'to refine <' + oldProperty.ns.name + '>');\n }\n\n // TODO: Check compatibility\n this.setBodyProperty(newProperty, false);\n }\n\n // validate existence and get location of old property\n var idx = props.indexOf(oldProperty);\n if (idx === -1) {\n throw new Error('property <' + oldNameNs.name + '> not found in property list');\n }\n\n // remove old property\n props.splice(idx, 1);\n\n // replacing the named property is intentional\n //\n // * validate only if this is a \"rename\" operation\n // * add at specific index unless we \"replace\"\n //\n this.addProperty(newProperty, replace ? undefined : idx, rename);\n\n // make new property available under old name\n propertiesByName[oldNameNs.name] = propertiesByName[oldNameNs.localName] = newProperty;\n};\n\n\nDescriptorBuilder.prototype.redefineProperty = function(p, targetPropertyName, replace) {\n\n var nsPrefix = p.ns.prefix;\n var parts = targetPropertyName.split('#');\n\n var name = parseName(parts[0], nsPrefix);\n var attrName = parseName(parts[1], name.prefix).name;\n\n var redefinedProperty = this.propertiesByName[attrName];\n if (!redefinedProperty) {\n throw new Error('refined property <' + attrName + '> not found');\n } else {\n this.replaceProperty(redefinedProperty, p, replace);\n }\n\n delete p.redefines;\n};\n\nDescriptorBuilder.prototype.addNamedProperty = function(p, validate) {\n var ns = p.ns,\n propsByName = this.propertiesByName;\n\n if (validate) {\n this.assertNotDefined(p, ns.name);\n this.assertNotDefined(p, ns.localName);\n }\n\n propsByName[ns.name] = propsByName[ns.localName] = p;\n};\n\nDescriptorBuilder.prototype.removeNamedProperty = function(p) {\n var ns = p.ns,\n propsByName = this.propertiesByName;\n\n delete propsByName[ns.name];\n delete propsByName[ns.localName];\n};\n\nDescriptorBuilder.prototype.setBodyProperty = function(p, validate) {\n\n if (validate && this.bodyProperty) {\n throw new Error(\n 'body property defined multiple times ' +\n '(<' + this.bodyProperty.ns.name + '>, <' + p.ns.name + '>)');\n }\n\n this.bodyProperty = p;\n};\n\nDescriptorBuilder.prototype.setIdProperty = function(p, validate) {\n\n if (validate && this.idProperty) {\n throw new Error(\n 'id property defined multiple times ' +\n '(<' + this.idProperty.ns.name + '>, <' + p.ns.name + '>)');\n }\n\n this.idProperty = p;\n};\n\nDescriptorBuilder.prototype.assertNotTrait = function(typeDescriptor) {\n\n const _extends = typeDescriptor.extends || [];\n\n if (_extends.length) {\n throw new Error(\n `cannot create <${ typeDescriptor.name }> extending <${ typeDescriptor.extends }>`\n );\n }\n};\n\nDescriptorBuilder.prototype.assertNotDefined = function(p, name) {\n var propertyName = p.name,\n definedProperty = this.propertiesByName[propertyName];\n\n if (definedProperty) {\n throw new Error(\n 'property <' + propertyName + '> already defined; ' +\n 'override of <' + definedProperty.definedBy.ns.name + '#' + definedProperty.ns.name + '> by ' +\n '<' + p.definedBy.ns.name + '#' + p.ns.name + '> not allowed without redefines');\n }\n};\n\nDescriptorBuilder.prototype.hasProperty = function(name) {\n return this.propertiesByName[name];\n};\n\nDescriptorBuilder.prototype.addTrait = function(t, inherited) {\n\n if (inherited) {\n this.assertNotTrait(t);\n }\n\n var typesByName = this.allTypesByName,\n types = this.allTypes;\n\n var typeName = t.name;\n\n if (typeName in typesByName) {\n return;\n }\n\n forEach(t.properties, bind(function(p) {\n\n // clone property to allow extensions\n p = assign({}, p, {\n name: p.ns.localName,\n inherited: inherited\n });\n\n Object.defineProperty(p, 'definedBy', {\n value: t\n });\n\n var replaces = p.replaces,\n redefines = p.redefines;\n\n // add replace/redefine support\n if (replaces || redefines) {\n this.redefineProperty(p, replaces || redefines, replaces);\n } else {\n if (p.isBody) {\n this.setBodyProperty(p);\n }\n if (p.isId) {\n this.setIdProperty(p);\n }\n this.addProperty(p);\n }\n }, this));\n\n types.push(t);\n typesByName[typeName] = t;\n};\n\n/**\n * A registry of Moddle packages.\n *\n * @param {Array} packages\n * @param {Properties} properties\n */\nfunction Registry(packages, properties) {\n this.packageMap = {};\n this.typeMap = {};\n\n this.packages = [];\n\n this.properties = properties;\n\n forEach(packages, bind(this.registerPackage, this));\n}\n\n\nRegistry.prototype.getPackage = function(uriOrPrefix) {\n return this.packageMap[uriOrPrefix];\n};\n\nRegistry.prototype.getPackages = function() {\n return this.packages;\n};\n\n\nRegistry.prototype.registerPackage = function(pkg) {\n\n // copy package\n pkg = assign({}, pkg);\n\n var pkgMap = this.packageMap;\n\n ensureAvailable(pkgMap, pkg, 'prefix');\n ensureAvailable(pkgMap, pkg, 'uri');\n\n // register types\n forEach(pkg.types, bind(function(descriptor) {\n this.registerType(descriptor, pkg);\n }, this));\n\n pkgMap[pkg.uri] = pkgMap[pkg.prefix] = pkg;\n this.packages.push(pkg);\n};\n\n\n/**\n * Register a type from a specific package with us\n */\nRegistry.prototype.registerType = function(type, pkg) {\n\n type = assign({}, type, {\n superClass: (type.superClass || []).slice(),\n extends: (type.extends || []).slice(),\n properties: (type.properties || []).slice(),\n meta: assign((type.meta || {}))\n });\n\n var ns = parseName(type.name, pkg.prefix),\n name = ns.name,\n propertiesByName = {};\n\n // parse properties\n forEach(type.properties, bind(function(p) {\n\n // namespace property names\n var propertyNs = parseName(p.name, ns.prefix),\n propertyName = propertyNs.name;\n\n // namespace property types\n if (!isBuiltIn(p.type)) {\n p.type = parseName(p.type, propertyNs.prefix).name;\n }\n\n assign(p, {\n ns: propertyNs,\n name: propertyName\n });\n\n propertiesByName[propertyName] = p;\n }, this));\n\n // update ns + name\n assign(type, {\n ns: ns,\n name: name,\n propertiesByName: propertiesByName\n });\n\n forEach(type.extends, bind(function(extendsName) {\n var extendsNameNs = parseName(extendsName, ns.prefix);\n\n var extended = this.typeMap[extendsNameNs.name];\n\n extended.traits = extended.traits || [];\n extended.traits.push(name);\n }, this));\n\n // link to package\n this.definePackage(type, pkg);\n\n // register\n this.typeMap[name] = type;\n};\n\n\n/**\n * Traverse the type hierarchy from bottom to top,\n * calling iterator with (type, inherited) for all elements in\n * the inheritance chain.\n *\n * @param {Object} nsName\n * @param {Function} iterator\n * @param {Boolean} [trait=false]\n */\nRegistry.prototype.mapTypes = function(nsName, iterator, trait) {\n\n var type = isBuiltIn(nsName.name) ? { name: nsName.name } : this.typeMap[nsName.name];\n\n var self = this;\n\n /**\n * Traverse the selected super type or trait\n *\n * @param {String} cls\n * @param {Boolean} [trait=false]\n */\n function traverse(cls, trait) {\n var parentNs = parseName(cls, isBuiltIn(cls) ? '' : nsName.prefix);\n self.mapTypes(parentNs, iterator, trait);\n }\n\n /**\n * Traverse the selected trait.\n *\n * @param {String} cls\n */\n function traverseTrait(cls) {\n return traverse(cls, true);\n }\n\n /**\n * Traverse the selected super type\n *\n * @param {String} cls\n */\n function traverseSuper(cls) {\n return traverse(cls, false);\n }\n\n if (!type) {\n throw new Error('unknown type <' + nsName.name + '>');\n }\n\n forEach(type.superClass, trait ? traverseTrait : traverseSuper);\n\n // call iterator with (type, inherited=!trait)\n iterator(type, !trait);\n\n forEach(type.traits, traverseTrait);\n};\n\n\n/**\n * Returns the effective descriptor for a type.\n *\n * @param {String} type the namespaced name (ns:localName) of the type\n *\n * @return {Descriptor} the resulting effective descriptor\n */\nRegistry.prototype.getEffectiveDescriptor = function(name) {\n\n var nsName = parseName(name);\n\n var builder = new DescriptorBuilder(nsName);\n\n this.mapTypes(nsName, function(type, inherited) {\n builder.addTrait(type, inherited);\n });\n\n var descriptor = builder.build();\n\n // define package link\n this.definePackage(descriptor, descriptor.allTypes[descriptor.allTypes.length - 1].$pkg);\n\n return descriptor;\n};\n\n\nRegistry.prototype.definePackage = function(target, pkg) {\n this.properties.define(target, '$pkg', { value: pkg });\n};\n\n\n\n// helpers ////////////////////////////\n\nfunction ensureAvailable(packageMap, pkg, identifierKey) {\n\n var value = pkg[identifierKey];\n\n if (value in packageMap) {\n throw new Error('package with ' + identifierKey + ' <' + value + '> already defined');\n }\n}\n\n/**\n * A utility that gets and sets properties of model elements.\n *\n * @param {Model} model\n */\nfunction Properties(model) {\n this.model = model;\n}\n\n\n/**\n * Sets a named property on the target element.\n * If the value is undefined, the property gets deleted.\n *\n * @param {Object} target\n * @param {String} name\n * @param {Object} value\n */\nProperties.prototype.set = function(target, name, value) {\n\n if (!isString(name) || !name.length) {\n throw new TypeError('property name must be a non-empty string');\n }\n\n var property = this.getProperty(target, name);\n\n var propertyName = property && property.name;\n\n if (isUndefined(value)) {\n\n // unset the property, if the specified value is undefined;\n // delete from $attrs (for extensions) or the target itself\n if (property) {\n delete target[propertyName];\n } else {\n delete target.$attrs[stripGlobal(name)];\n }\n } else {\n\n // set the property, defining well defined properties on the fly\n // or simply updating them in target.$attrs (for extensions)\n if (property) {\n if (propertyName in target) {\n target[propertyName] = value;\n } else {\n defineProperty(target, property, value);\n }\n } else {\n target.$attrs[stripGlobal(name)] = value;\n }\n }\n};\n\n/**\n * Returns the named property of the given element\n *\n * @param {Object} target\n * @param {String} name\n *\n * @return {Object}\n */\nProperties.prototype.get = function(target, name) {\n\n var property = this.getProperty(target, name);\n\n if (!property) {\n return target.$attrs[stripGlobal(name)];\n }\n\n var propertyName = property.name;\n\n // check if access to collection property and lazily initialize it\n if (!target[propertyName] && property.isMany) {\n defineProperty(target, property, []);\n }\n\n return target[propertyName];\n};\n\n\n/**\n * Define a property on the target element\n *\n * @param {Object} target\n * @param {String} name\n * @param {Object} options\n */\nProperties.prototype.define = function(target, name, options) {\n\n if (!options.writable) {\n\n var value = options.value;\n\n // use getters for read-only variables to support ES6 proxies\n // cf. https://github.com/bpmn-io/internal-docs/issues/386\n options = assign({}, options, {\n get: function() { return value; }\n });\n\n delete options.value;\n }\n\n Object.defineProperty(target, name, options);\n};\n\n\n/**\n * Define the descriptor for an element\n */\nProperties.prototype.defineDescriptor = function(target, descriptor) {\n this.define(target, '$descriptor', { value: descriptor });\n};\n\n/**\n * Define the model for an element\n */\nProperties.prototype.defineModel = function(target, model) {\n this.define(target, '$model', { value: model });\n};\n\n/**\n * Return property with the given name on the element.\n *\n * @param {any} target\n * @param {string} name\n *\n * @return {object | null} property\n */\nProperties.prototype.getProperty = function(target, name) {\n\n var model = this.model;\n\n var property = model.getPropertyDescriptor(target, name);\n\n if (property) {\n return property;\n }\n\n if (name.includes(':')) {\n return null;\n }\n\n const strict = model.config.strict;\n\n if (typeof strict !== 'undefined') {\n const error = new TypeError(`unknown property <${ name }> on <${ target.$type }>`);\n\n if (strict) {\n throw error;\n } else {\n\n // eslint-disable-next-line no-undef\n typeof console !== 'undefined' && console.warn(error);\n }\n }\n\n return null;\n};\n\nfunction isUndefined(val) {\n return typeof val === 'undefined';\n}\n\nfunction defineProperty(target, property, value) {\n Object.defineProperty(target, property.name, {\n enumerable: !property.isReference,\n writable: true,\n value: value,\n configurable: true\n });\n}\n\nfunction stripGlobal(name) {\n return name.replace(/^:/, '');\n}\n\n// Moddle implementation /////////////////////////////////////////////////\n\n/**\n * @class Moddle\n *\n * A model that can be used to create elements of a specific type.\n *\n * @example\n *\n * var Moddle = require('moddle');\n *\n * var pkg = {\n * name: 'mypackage',\n * prefix: 'my',\n * types: [\n * { name: 'Root' }\n * ]\n * };\n *\n * var moddle = new Moddle([pkg]);\n *\n * @param {Array} packages the packages to contain\n *\n * @param { { strict?: boolean } } [config] moddle configuration\n */\nfunction Moddle(packages, config = {}) {\n\n this.properties = new Properties(this);\n\n this.factory = new Factory(this, this.properties);\n this.registry = new Registry(packages, this.properties);\n\n this.typeCache = {};\n\n this.config = config;\n}\n\n\n/**\n * Create an instance of the specified type.\n *\n * @method Moddle#create\n *\n * @example\n *\n * var foo = moddle.create('my:Foo');\n * var bar = moddle.create('my:Bar', { id: 'BAR_1' });\n *\n * @param {String|Object} descriptor the type descriptor or name know to the model\n * @param {Object} attrs a number of attributes to initialize the model instance with\n * @return {Object} model instance\n */\nModdle.prototype.create = function(descriptor, attrs) {\n var Type = this.getType(descriptor);\n\n if (!Type) {\n throw new Error('unknown type <' + descriptor + '>');\n }\n\n return new Type(attrs);\n};\n\n\n/**\n * Returns the type representing a given descriptor\n *\n * @method Moddle#getType\n *\n * @example\n *\n * var Foo = moddle.getType('my:Foo');\n * var foo = new Foo({ 'id' : 'FOO_1' });\n *\n * @param {String|Object} descriptor the type descriptor or name know to the model\n * @return {Object} the type representing the descriptor\n */\nModdle.prototype.getType = function(descriptor) {\n\n var cache = this.typeCache;\n\n var name = isString(descriptor) ? descriptor : descriptor.ns.name;\n\n var type = cache[name];\n\n if (!type) {\n descriptor = this.registry.getEffectiveDescriptor(name);\n type = cache[name] = this.factory.createType(descriptor);\n }\n\n return type;\n};\n\n\n/**\n * Creates an any-element type to be used within model instances.\n *\n * This can be used to create custom elements that lie outside the meta-model.\n * The created element contains all the meta-data required to serialize it\n * as part of meta-model elements.\n *\n * @method Moddle#createAny\n *\n * @example\n *\n * var foo = moddle.createAny('vendor:Foo', 'http://vendor', {\n * value: 'bar'\n * });\n *\n * var container = moddle.create('my:Container', 'http://my', {\n * any: [ foo ]\n * });\n *\n * // go ahead and serialize the stuff\n *\n *\n * @param {String} name the name of the element\n * @param {String} nsUri the namespace uri of the element\n * @param {Object} [properties] a map of properties to initialize the instance with\n * @return {Object} the any type instance\n */\nModdle.prototype.createAny = function(name, nsUri, properties) {\n\n var nameNs = parseName(name);\n\n var element = {\n $type: name,\n $instanceOf: function(type) {\n return type === this.$type;\n },\n get: function(key) {\n return this[key];\n },\n set: function(key, value) {\n set(this, [ key ], value);\n }\n };\n\n var descriptor = {\n name: name,\n isGeneric: true,\n ns: {\n prefix: nameNs.prefix,\n localName: nameNs.localName,\n uri: nsUri\n }\n };\n\n this.properties.defineDescriptor(element, descriptor);\n this.properties.defineModel(element, this);\n this.properties.define(element, 'get', { enumerable: false, writable: true });\n this.properties.define(element, 'set', { enumerable: false, writable: true });\n this.properties.define(element, '$parent', { enumerable: false, writable: true });\n this.properties.define(element, '$instanceOf', { enumerable: false, writable: true });\n\n forEach(properties, function(a, key) {\n if (isObject(a) && a.value !== undefined) {\n element[a.name] = a.value;\n } else {\n element[key] = a;\n }\n });\n\n return element;\n};\n\n/**\n * Returns a registered package by uri or prefix\n *\n * @return {Object} the package\n */\nModdle.prototype.getPackage = function(uriOrPrefix) {\n return this.registry.getPackage(uriOrPrefix);\n};\n\n/**\n * Returns a snapshot of all known packages\n *\n * @return {Object} the package\n */\nModdle.prototype.getPackages = function() {\n return this.registry.getPackages();\n};\n\n/**\n * Returns the descriptor for an element\n */\nModdle.prototype.getElementDescriptor = function(element) {\n return element.$descriptor;\n};\n\n/**\n * Returns true if the given descriptor or instance\n * represents the given type.\n *\n * May be applied to this, if element is omitted.\n */\nModdle.prototype.hasType = function(element, type) {\n if (type === undefined) {\n type = element;\n element = this;\n }\n\n var descriptor = element.$model.getElementDescriptor(element);\n\n return (type in descriptor.allTypesByName);\n};\n\n/**\n * Returns the descriptor of an elements named property\n */\nModdle.prototype.getPropertyDescriptor = function(element, property) {\n return this.getElementDescriptor(element).propertiesByName[property];\n};\n\n/**\n * Returns a mapped type's descriptor\n */\nModdle.prototype.getTypeDescriptor = function(type) {\n return this.registry.typeMap[type];\n};\n\nexport { Moddle, coerceType, isBuiltIn as isBuiltInType, isSimple as isSimpleType, parseName as parseNameNS };\n//# sourceMappingURL=index.esm.js.map\n","var fromCharCode = String.fromCharCode;\n\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\n\nvar ENTITY_PATTERN = /&#(\\d+);|&#x([0-9a-f]+);|&(\\w+);/ig;\n\nvar ENTITY_MAPPING = {\n 'amp': '&',\n 'apos': '\\'',\n 'gt': '>',\n 'lt': '<',\n 'quot': '\"'\n};\n\n// map UPPERCASE variants of supported special chars\nObject.keys(ENTITY_MAPPING).forEach(function(k) {\n ENTITY_MAPPING[k.toUpperCase()] = ENTITY_MAPPING[k];\n});\n\n\nfunction replaceEntities(_, d, x, z) {\n\n // reserved names, i.e. \n if (z) {\n if (hasOwnProperty.call(ENTITY_MAPPING, z)) {\n return ENTITY_MAPPING[z];\n } else {\n\n // fall back to original value\n return '&' + z + ';';\n }\n }\n\n // decimal encoded char\n if (d) {\n return fromCharCode(d);\n }\n\n // hex encoded char\n return fromCharCode(parseInt(x, 16));\n}\n\n\n/**\n * A basic entity decoder that can decode a minimal\n * sub-set of reserved names (&) as well as\n * hex (ય) and decimal (ӏ) encoded characters.\n *\n * @param {string} str\n *\n * @return {string} decoded string\n */\nfunction decodeEntities(s) {\n if (s.length > 3 && s.indexOf('&') !== -1) {\n return s.replace(ENTITY_PATTERN, replaceEntities);\n }\n\n return s;\n}\n\nvar XSI_URI = 'http://www.w3.org/2001/XMLSchema-instance';\nvar XSI_PREFIX = 'xsi';\nvar XSI_TYPE = 'xsi:type';\n\nvar NON_WHITESPACE_OUTSIDE_ROOT_NODE = 'non-whitespace outside of root node';\n\nfunction error(msg) {\n return new Error(msg);\n}\n\nfunction missingNamespaceForPrefix(prefix) {\n return 'missing namespace for prefix <' + prefix + '>';\n}\n\nfunction getter(getFn) {\n return {\n 'get': getFn,\n 'enumerable': true\n };\n}\n\nfunction cloneNsMatrix(nsMatrix) {\n var clone = {}, key;\n for (key in nsMatrix) {\n clone[key] = nsMatrix[key];\n }\n return clone;\n}\n\nfunction uriPrefix(prefix) {\n return prefix + '$uri';\n}\n\nfunction buildNsMatrix(nsUriToPrefix) {\n var nsMatrix = {},\n uri,\n prefix;\n\n for (uri in nsUriToPrefix) {\n prefix = nsUriToPrefix[uri];\n nsMatrix[prefix] = prefix;\n nsMatrix[uriPrefix(prefix)] = uri;\n }\n\n return nsMatrix;\n}\n\nfunction noopGetContext() {\n return { 'line': 0, 'column': 0 };\n}\n\nfunction throwFunc(err) {\n throw err;\n}\n\n/**\n * Creates a new parser with the given options.\n *\n * @constructor\n *\n * @param {!Object=} options\n */\nfunction Parser(options) {\n\n if (!this) {\n return new Parser(options);\n }\n\n var proxy = options && options['proxy'];\n\n var onText,\n onOpenTag,\n onCloseTag,\n onCDATA,\n onError = throwFunc,\n onWarning,\n onComment,\n onQuestion,\n onAttention;\n\n var getContext = noopGetContext;\n\n /**\n * Do we need to parse the current elements attributes for namespaces?\n *\n * @type {boolean}\n */\n var maybeNS = false;\n\n /**\n * Do we process namespaces at all?\n *\n * @type {boolean}\n */\n var isNamespace = false;\n\n /**\n * The caught error returned on parse end\n *\n * @type {Error}\n */\n var returnError = null;\n\n /**\n * Should we stop parsing?\n *\n * @type {boolean}\n */\n var parseStop = false;\n\n /**\n * A map of { uri: prefix } used by the parser.\n *\n * This map will ensure we can normalize prefixes during processing;\n * for each uri, only one prefix will be exposed to the handlers.\n *\n * @type {!Object}}\n */\n var nsUriToPrefix;\n\n /**\n * Handle parse error.\n *\n * @param {string|Error} err\n */\n function handleError(err) {\n if (!(err instanceof Error)) {\n err = error(err);\n }\n\n returnError = err;\n\n onError(err, getContext);\n }\n\n /**\n * Handle parse error.\n *\n * @param {string|Error} err\n */\n function handleWarning(err) {\n\n if (!onWarning) {\n return;\n }\n\n if (!(err instanceof Error)) {\n err = error(err);\n }\n\n onWarning(err, getContext);\n }\n\n /**\n * Register parse listener.\n *\n * @param {string} name\n * @param {Function} cb\n *\n * @return {Parser}\n */\n this['on'] = function(name, cb) {\n\n if (typeof cb !== 'function') {\n throw error('required args 
+