@joint/core 4.0.0

package/src/util/cloneCells.mjs

@@ -0,0 +1,67 @@
+import { uniq, toArray, isEmpty } from './util.mjs';
+
+// Clone `cells` returning an object that maps the original cell ID to the clone. The number
+// of clones is exactly the same as the `cells.length`.
+// This function simply clones all the `cells`. However, it also reconstructs
+// all the `source/target` and `parent/embed` references within the `cells`.
+// This is the main difference from the `cell.clone()` method. The
+// `cell.clone()` method works on one single cell only.
+// For example, for a graph: `A --- L ---> B`, `cloneCells([A, L, B])`
+// returns `[A2, L2, B2]` resulting to a graph: `A2 --- L2 ---> B2`, i.e.
+// the source and target of the link `L2` is changed to point to `A2` and `B2`.
+export function cloneCells(cells) {
+
+    cells = uniq(cells);
+
+    // A map of the form [original cell ID] -> [clone] helping
+    // us to reconstruct references for source/target and parent/embeds.
+    // This is also the returned value.
+    const cloneMap = toArray(cells).reduce(function(map, cell) {
+        map[cell.id] = cell.clone();
+        return map;
+    }, {});
+
+    toArray(cells).forEach(function(cell) {
+
+        const clone = cloneMap[cell.id];
+        // assert(clone exists)
+
+        if (clone.isLink()) {
+            const source = clone.source();
+            const target = clone.target();
+            if (source.id && cloneMap[source.id]) {
+                // Source points to an element and the element is among the clones.
+                // => Update the source of the cloned link.
+                clone.prop('source/id', cloneMap[source.id].id);
+            }
+            if (target.id && cloneMap[target.id]) {
+                // Target points to an element and the element is among the clones.
+                // => Update the target of the cloned link.
+                clone.prop('target/id', cloneMap[target.id].id);
+            }
+        }
+
+        // Find the parent of the original cell
+        const parent = cell.get('parent');
+        if (parent && cloneMap[parent]) {
+            clone.set('parent', cloneMap[parent].id);
+        }
+
+        // Find the embeds of the original cell
+        const embeds = toArray(cell.get('embeds')).reduce(function(newEmbeds, embed) {
+            // Embedded cells that are not being cloned can not be carried
+            // over with other embedded cells.
+            if (cloneMap[embed]) {
+                newEmbeds.push(cloneMap[embed].id);
+            }
+            return newEmbeds;
+        }, []);
+
+        if (!isEmpty(embeds)) {
+            clone.set('embeds', embeds);
+        }
+    });
+
+    return cloneMap;
+}
+

package/src/util/getRectPoint.mjs

@@ -0,0 +1,65 @@
+import * as g from '../g/index.mjs';
+
+export const Positions = {
+    TOP: 'top',
+    RIGHT: 'right',
+    BOTTOM: 'bottom',
+    LEFT: 'left',
+    TOP_LEFT: 'top-left',
+    TOP_RIGHT: 'top-right',
+    BOTTOM_LEFT: 'bottom-left',
+    BOTTOM_RIGHT: 'bottom-right',
+    CENTER: 'center',
+};
+
+export function getRectPoint(rect, position) {
+    const r = new g.Rect(rect);
+    switch (position) {
+        case undefined:
+            throw new Error('Position required');
+
+        // Middle Points
+        case Positions.LEFT:
+        case 'leftMiddle':
+            return r.leftMiddle();
+
+        case Positions.RIGHT:
+        case 'rightMiddle':
+            return r.rightMiddle();
+
+        case Positions.TOP:
+        case 'topMiddle':
+            return r.topMiddle();
+
+        case Positions.BOTTOM:
+        case 'bottomMiddle':
+            return r.bottomMiddle();
+
+        // Corners
+        case Positions.TOP_LEFT:
+        case 'topLeft':
+        case 'origin':
+            return r.topLeft();
+
+        case Positions.TOP_RIGHT:
+        case 'topRight':
+            return r.topRight();
+
+        case Positions.BOTTOM_LEFT:
+        case 'bottomLeft':
+            return r.bottomLeft();
+
+        case Positions.BOTTOM_RIGHT:
+        case 'bottomRight':
+        case 'corner':
+            return r.bottomRight();
+
+        // Center
+        case Positions.CENTER:
+            return r.center();
+
+        // TODO: calc(), percentage etc.
+        default:
+            throw new Error(`Unknown position: ${position}`);
+    }
+}

package/src/util/index.mjs

@@ -0,0 +1,5 @@
+export * from './wrappers.mjs';
+export * from './util.mjs';
+export * from './cloneCells.mjs';
+export * from './svgTagTemplate.mjs';
+export { getRectPoint } from './getRectPoint.mjs';

package/src/util/svgTagTemplate.mjs

@@ -0,0 +1,110 @@
+import V from '../V/index.mjs';
+
+export function svg(strings, ...expressions) {
+    const svgParts = [];
+    strings.forEach((part, index) => {
+        svgParts.push(part);
+        if (index in expressions) {
+            svgParts.push(expressions[index]);
+        }
+    });
+    const markup = parseFromSVGString(svgParts.join(''));
+    return markup;
+}
+
+function parseFromSVGString(str) {
+    const parser = new DOMParser();
+    const markupString = `<svg>${str.trim()}</svg>`;
+    const xmldocument = parser.parseFromString(markupString.replace(/@/g, ''), 'application/xml');
+    if (xmldocument.getElementsByTagName('parsererror')[0]) {
+        throw new Error('Invalid SVG markup');
+    }
+    const document = parser.parseFromString(markupString, 'text/html');
+    const svg = document.querySelector('svg');
+    return build(svg);
+}
+
+function buildNode(node) {
+    const markupNode = {};
+    const { tagName, attributes, namespaceURI, style, childNodes } = node;
+
+    markupNode.namespaceURI = namespaceURI;
+    markupNode.tagName = (namespaceURI === V.namespace.xhtml)
+        // XHTML documents must use lower case for all HTML element and attribute names.
+        // The tagName property returns upper case value for HTML elements.
+        // e.g. <DIV> vs.<div/>
+        ? tagName.toLowerCase()
+        : tagName;
+
+    const stylesObject = {};
+    for (var i = style.length; i--;) {
+        var nameString = style[i];
+        stylesObject[nameString] = style.getPropertyValue(nameString);
+    }
+    markupNode.style = stylesObject;
+
+    // selector fallbacks to tagName
+    const selectorAttribute = attributes.getNamedItem('@selector');
+    if (selectorAttribute) {
+        markupNode.selector = selectorAttribute.value;
+        attributes.removeNamedItem('@selector');
+    }
+
+    const groupSelectorAttribute = attributes.getNamedItem('@group-selector');
+    if (groupSelectorAttribute) {
+        const groupSelectors = groupSelectorAttribute.value.split(',');
+        markupNode.groupSelector = groupSelectors.map(s => s.trim());
+
+        attributes.removeNamedItem('@group-selector');
+    }
+
+    const className = attributes.getNamedItem('class');
+    if (className) {
+        markupNode.className = className.value;
+    }
+
+    const children = [];
+    childNodes.forEach(node => {
+        switch (node.nodeType) {
+            case Node.TEXT_NODE: {
+                const trimmedText = node.data.replace(/\s\s+/g, ' ');
+                if (trimmedText.trim()) {
+                    children.push(trimmedText);
+                }
+                break;
+            }
+            case Node.ELEMENT_NODE: {
+                children.push(buildNode(node));
+                break;
+            }
+            default:
+                break;
+        }
+    });
+    if (children.length) {
+        markupNode.children = children;
+    }
+
+    const nodeAttrs = {};
+
+    Array.from(attributes).forEach(nodeAttribute => {
+        const { name, value } = nodeAttribute;
+        nodeAttrs[name] = value;
+    });
+
+    if (Object.keys(nodeAttrs).length > 0) {
+        markupNode.attributes = nodeAttrs;
+    }
+
+    return markupNode;
+}
+
+function build(root) {
+    const markup = [];
+
+    Array.from(root.children).forEach(node => {
+        markup.push(buildNode(node));
+    });
+
+    return markup;
+}