semiotic 2.0.2 → 3.0.0-beta.1

package/ai/dist/src/components/svg/lineDrawing.js

@@ -0,0 +1,427 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dividedLine = exports.bumpChart = exports.cumulativeLine = exports.lineChart = exports.stackedArea = exports.differenceLine = exports.projectLineData = exports.projectSummaryData = void 0;
+exports.funnelize = funnelize;
+exports.relativeY = relativeY;
+exports.relativeX = relativeX;
+exports.findPointByID = findPointByID;
+const d3_array_1 = require("d3-array");
+const multiAccessorUtils_1 = require("../data/multiAccessorUtils");
+const datesForUnique = (d) => (d instanceof Date ? d.getTime() : d);
+const projectSummaryData = ({ data, summaryDataAccessor, xAccessor, yAccessor }) => {
+    const projectedData = [];
+    summaryDataAccessor.forEach((actualSummaryAccessor) => {
+        xAccessor.forEach((actualXAccessor) => {
+            yAccessor.forEach((actualYAccessor) => {
+                const projection = (d) => actualSummaryAccessor(d).map((p, q) => [
+                    actualXAccessor(p, q),
+                    actualYAccessor(p, q)
+                ]);
+                data.forEach((d) => {
+                    projectedData.push({
+                        ...d,
+                        _baseData: actualSummaryAccessor(d),
+                        _xyfCoordinates: projection(d)
+                    });
+                });
+            });
+        });
+    });
+    return projectedData;
+};
+exports.projectSummaryData = projectSummaryData;
+const projectLineData = ({ data, lineDataAccessor, xProp, xPropTop, xPropBottom, yProp, yPropTop, yPropBottom, xAccessor, yAccessor }) => {
+    if (!Array.isArray(data)) {
+        data = [data];
+    }
+    const projectedLine = [];
+    lineDataAccessor.forEach((actualLineAccessor, lineIndex) => {
+        xAccessor.forEach((actualXAccessor, xIndex) => {
+            yAccessor.forEach((actualYAccessor, yIndex) => {
+                data.forEach((d) => {
+                    const originalLineData = { ...d, xIndex, yIndex, lineIndex };
+                    originalLineData.data = actualLineAccessor(d).map((p, q) => {
+                        const originalCoords = { data: p };
+                        originalCoords[xProp] = actualXAccessor(p, q);
+                        originalCoords[xPropTop] = originalCoords[xProp];
+                        originalCoords[xPropBottom] = originalCoords[xProp];
+                        originalCoords[yProp] = actualYAccessor(p, q);
+                        originalCoords[yPropTop] = originalCoords[yProp];
+                        originalCoords[yPropBottom] = originalCoords[yProp];
+                        return originalCoords;
+                    });
+                    originalLineData.key = originalLineData.key || projectedLine.length;
+                    projectedLine.push(originalLineData);
+                });
+            });
+        });
+    });
+    return projectedLine;
+};
+exports.projectLineData = projectLineData;
+const differenceLine = ({ data, yProp, yPropTop, yPropBottom }) => {
+    data.forEach((l, i) => {
+        l.data.forEach((point, q) => {
+            const otherLine = i === 0 ? 1 : 0;
+            if (point[yProp] > data[otherLine].data[q][yProp]) {
+                point[yPropBottom] = data[otherLine].data[q][yProp];
+                point[yPropTop] = point[yProp];
+            }
+            else {
+                point[yPropTop] = point[yProp];
+                point[yPropBottom] = point[yProp];
+            }
+        });
+    });
+    return data;
+};
+exports.differenceLine = differenceLine;
+const stackedArea = ({ type = "stackedarea", data, xProp, yProp, yPropMiddle, sort, yPropTop, yPropBottom }) => {
+    const valueMap = new Map();
+    const lineSums = data.map(() => 0);
+    let lineIndex = 0;
+    for (const line of data) {
+        /*
+          After we calculate this, we then sort the lines (and the value used for the sorting is in this for loop)
+          So, we need to know their original index order in order to use the naively populated coordinate array in valueMap
+          Otherwise the coordinates in the map will be in different order than the sorted order of the lines
+        */
+        line.__lineIndex = lineIndex;
+        for (const coord of line.data) {
+            const coordX = datesForUnique(coord[xProp]);
+            lineSums[lineIndex] += coord[yProp];
+            if (!valueMap.has(coordX)) {
+                valueMap.set(coordX, []);
+            }
+            valueMap.get(coordX)[lineIndex] = coord;
+        }
+        lineIndex++;
+    }
+    let stackSort = (a, b) => lineSums[b.key] - lineSums[a.key];
+    if (type === "stackedpercent-invert" || type === "stackedarea-invert") {
+        stackSort = (a, b) => lineSums[a.key] - lineSums[b.key];
+    }
+    sort = sort === undefined ? stackSort : sort;
+    if (sort !== null) {
+        data = data.sort(sort);
+    }
+    const lineIndexSortLookup = data.map((line) => line.__lineIndex);
+    for (const [, coordsAtX] of valueMap) {
+        let negativeOffset = 0;
+        let positiveOffset = 0;
+        const positiveStepTotal = (0, d3_array_1.sum)(coordsAtX, (d) => d?.[yProp] > 0 ? d[yProp] : 0);
+        const negativeStepTotal = (0, d3_array_1.sum)(coordsAtX, (d) => d?.[yProp] < 0 ? d[yProp] : 0);
+        for (const newIndex of lineIndexSortLookup) {
+            const l = coordsAtX[newIndex];
+            if (l) {
+                if (l[yProp] < 0) {
+                    if (type === "linepercent" ||
+                        type === "stackedpercent" ||
+                        type === "stackedpercent-invert") {
+                        const percent = l[yProp] / negativeStepTotal;
+                        l.percent = percent;
+                        if (type === "linepercent") {
+                            l[yPropBottom] =
+                                l[yPropBottom] =
+                                    l[yPropTop] =
+                                        l[yPropMiddle] =
+                                            percent;
+                        }
+                        else {
+                            const adjustment = negativeStepTotal >= 0 ? 0 : percent;
+                            l[yPropBottom] =
+                                negativeStepTotal === 0
+                                    ? 0
+                                    : -(negativeOffset / negativeStepTotal);
+                            l[yPropTop] = l[yPropBottom] - adjustment;
+                            l[yPropMiddle] = l[yPropBottom] - adjustment / 2;
+                        }
+                    }
+                    else {
+                        l[yPropBottom] = negativeOffset;
+                        l[yPropTop] = negativeOffset + l[yProp];
+                        l[yPropMiddle] = negativeOffset + l[yProp] / 2;
+                    }
+                    negativeOffset += l[yProp];
+                }
+                else {
+                    if (type === "linepercent" ||
+                        type === "stackedpercent" ||
+                        type === "stackedpercent-invert") {
+                        const percent = l[yProp] / positiveStepTotal;
+                        l.percent = percent;
+                        if (type === "linepercent") {
+                            l[yPropBottom] = l[yPropTop] = l[yPropMiddle] = percent;
+                        }
+                        else {
+                            const adjustment = positiveStepTotal <= 0 ? 0 : percent;
+                            l[yPropBottom] =
+                                positiveStepTotal === 0 ? 0 : positiveOffset / positiveStepTotal;
+                            l[yPropTop] = l[yPropBottom] + adjustment;
+                            l[yPropMiddle] = l[yPropBottom] + adjustment / 2;
+                        }
+                    }
+                    else {
+                        l[yPropBottom] = positiveOffset;
+                        l[yPropTop] = positiveOffset + l[yProp];
+                        l[yPropMiddle] = positiveOffset + l[yProp] / 2;
+                    }
+                    positiveOffset += l[yProp];
+                }
+            }
+        }
+    }
+    return data;
+};
+exports.stackedArea = stackedArea;
+const lineChart = ({ data, y1, x1, yPropTop, yPropMiddle, yPropBottom, xPropTop, xPropMiddle, xPropBottom }) => {
+    if (y1) {
+        for (const line of data) {
+            for (const point of line.data) {
+                point[yPropBottom] = y1(point);
+                // Use top position for hover so overlapping-area hover points
+                // align with the visible line rather than compressing toward the baseline.
+                point[yPropMiddle] = point[yPropTop];
+            }
+        }
+    }
+    if (x1) {
+        for (const line of data) {
+            for (const point of line.data) {
+                point[xPropBottom] = x1(point);
+                point[xPropMiddle] = (point[xPropBottom] + point[xPropTop]) / 2;
+            }
+        }
+    }
+    return data;
+};
+exports.lineChart = lineChart;
+const cumulativeLine = ({ data, y1, yPropTop, yPropMiddle, yPropBottom, type = "cumulative" }) => {
+    for (const line of data) {
+        let cumulativeValue = 0;
+        const dataArray = type === "cumulative-reverse" ? line.data.reverse() : line.data;
+        for (const point of dataArray) {
+            cumulativeValue += point[yPropTop];
+            point[yPropBottom] =
+                point[yPropTop] =
+                    point[yPropMiddle] =
+                        cumulativeValue;
+            if (y1) {
+                point[yPropBottom] = y1(point);
+                point[yPropMiddle] = point[yPropBottom] + point[yPropTop] / 2;
+            }
+        }
+    }
+    return data;
+};
+exports.cumulativeLine = cumulativeLine;
+const bumpChart = ({ type = "bumpline", data, xProp, yProp, yPropMiddle, yPropTop, yPropBottom }) => {
+    const uniqXValues = new Map();
+    for (const line of data) {
+        for (const point of line.data) {
+            const xValue = datesForUnique(point[xProp]);
+            if (!uniqXValues.has(xValue)) {
+                uniqXValues.set(xValue, []);
+            }
+            uniqXValues.get(xValue).push(point);
+        }
+    }
+    let bumpSort = (a, b) => {
+        if (a[yProp] > b[yProp]) {
+            return 1;
+        }
+        if (a[yProp] < b[yProp]) {
+            return -1;
+        }
+        return -1;
+    };
+    if (type === "bumparea-invert" || type === "bumpline-invert") {
+        bumpSort = (a, b) => {
+            if (a[yProp] < b[yProp]) {
+                return 1;
+            }
+            if (a[yProp] > b[yProp]) {
+                return -1;
+            }
+            return -1;
+        };
+    }
+    for (const [, pointsAtXArray] of uniqXValues) {
+        let negativeOffset = 0;
+        let positiveOffset = 0;
+        pointsAtXArray.sort(bumpSort);
+        let rank = 1;
+        for (const point of pointsAtXArray) {
+            point._XYFrameRank;
+            if (type === "bumparea" || type === "bumparea-invert") {
+                if (point[yProp] < 0) {
+                    point[yPropTop] = negativeOffset + point[yProp];
+                    point[yPropMiddle] = negativeOffset + point[yProp] / 2;
+                    point[yPropBottom] = negativeOffset;
+                    negativeOffset += point[yProp];
+                }
+                else {
+                    point[yPropTop] = positiveOffset + point[yProp];
+                    point[yPropMiddle] = positiveOffset + point[yProp] / 2;
+                    point[yPropBottom] = positiveOffset;
+                    positiveOffset += point[yProp];
+                }
+            }
+            else {
+                point[yProp] = rank;
+                point[yPropTop] = rank;
+                point[yPropBottom] = rank;
+            }
+            rank++;
+        }
+    }
+    return data;
+};
+exports.bumpChart = bumpChart;
+const dividedLine = (parameters, points, searchIterations = 10) => {
+    let currentParameters = parameters(points[0], 0);
+    let currentPointsArray = [];
+    const dividedLinesData = [
+        { key: currentParameters, points: currentPointsArray }
+    ];
+    points.forEach((point, pointI) => {
+        const newParameters = parameters(point, pointI);
+        let matchingParams = newParameters === currentParameters;
+        const stringNewParams = JSON.stringify(newParameters);
+        const stringCurrentParams = JSON.stringify(currentParameters);
+        if (typeof currentParameters === "object") {
+            matchingParams = stringNewParams === stringCurrentParams;
+        }
+        if (matchingParams) {
+            currentPointsArray.push(point);
+        }
+        else {
+            const lastPoint = currentPointsArray[currentPointsArray.length - 1];
+            let pointA = lastPoint;
+            let pointB = point;
+            let stringBParams = stringNewParams;
+            let x = 0;
+            while (x < searchIterations && stringNewParams === stringBParams) {
+                const keys = Object.keys(pointA);
+                const findPoints = simpleSearchFunction({
+                    pointA,
+                    pointB,
+                    currentParameters,
+                    parameters,
+                    keys
+                });
+                pointA = findPoints[0];
+                pointB = findPoints[1];
+                stringBParams = JSON.stringify(parameters(pointB));
+                x++;
+            }
+            currentPointsArray.push(pointB);
+            currentPointsArray = [pointB, point];
+            dividedLinesData.push({ key: newParameters, points: currentPointsArray });
+            currentParameters = newParameters;
+        }
+    });
+    return dividedLinesData;
+};
+exports.dividedLine = dividedLine;
+function simpleSearchFunction({ pointA, pointB, currentParameters, parameters, keys }) {
+    const betweenPoint = {};
+    keys.forEach((key) => {
+        betweenPoint[key] =
+            typeof pointA[key] === "number"
+                ? (pointA[key] + pointB[key]) / 2
+                : undefined;
+    });
+    const stringBetween = JSON.stringify(parameters(betweenPoint));
+    const stringCurrent = JSON.stringify(currentParameters);
+    if (stringBetween === stringCurrent) {
+        return [betweenPoint, pointB];
+    }
+    return [pointA, betweenPoint];
+}
+function funnelize({ data, steps, key }) {
+    const funnelData = [];
+    if (!Array.isArray(data)) {
+        data = [data];
+    }
+    if (!steps) {
+        steps = data.map((d) => Object.keys(d)).reduce((a, b) => a.concat(b), []);
+    }
+    data.forEach((datum, i) => {
+        const datumKey = key ? datum[key] : i;
+        steps.forEach((step) => {
+            const funnelDatum = { funnelKey: datumKey, stepName: "", stepValue: 0 };
+            funnelDatum.stepName = step;
+            funnelDatum.stepValue = datum[step] ? datum[step] : 0;
+            funnelData.push(funnelDatum);
+        });
+    });
+    return funnelData;
+}
+const whichPoint = {
+    bottom: "yBottom",
+    top: "yTop"
+};
+function relativeY({ point, projectedY, yAccessor, yScale, showLinePoints }) {
+    const baseData = point &&
+        (showLinePoints &&
+            showLinePoints !== true &&
+            point[whichPoint[showLinePoints]] !== undefined
+            ? point[whichPoint[showLinePoints]]
+            : point.yMiddle !== undefined
+                ? point.yMiddle
+                : point[projectedY] !== undefined
+                    ? point[projectedY]
+                    : (0, multiAccessorUtils_1.findFirstAccessorValue)(yAccessor, point));
+    if (Array.isArray(baseData)) {
+        return baseData.map((d) => yScale(d));
+    }
+    return baseData !== undefined ? yScale(baseData) : 0;
+}
+function relativeX({ point, projectedXMiddle, projectedX, xAccessor, xScale }) {
+    const baseData = point &&
+        (point[projectedXMiddle] !== undefined
+            ? point[projectedXMiddle]
+            : point[projectedX] !== undefined
+                ? point[projectedX]
+                : (0, multiAccessorUtils_1.findFirstAccessorValue)(xAccessor, point));
+    if (Array.isArray(baseData)) {
+        return baseData.map((d) => xScale(d));
+    }
+    return baseData !== undefined ? xScale(baseData) : 0;
+}
+function findPointByID({ point, idAccessor, lines, xScale, projectedX, xAccessor }) {
+    const pointID = idAccessor(point.parentLine || point);
+    if (pointID) {
+        const thisLine = lines.data.find((l) => idAccessor(l) === pointID);
+        if (!thisLine) {
+            return null;
+        }
+        const pointX = xScale((0, multiAccessorUtils_1.findFirstAccessorValue)(xAccessor, point));
+        const thisPoint = thisLine.data.find((p) => xScale(p[projectedX]) === pointX);
+        if (!thisPoint) {
+            return null;
+        }
+        const newPoint = {
+            ...point,
+            ...thisPoint,
+            ...thisPoint.data,
+            parentLine: thisLine
+        };
+        const reactAnnotationProps = [
+            "type",
+            "label",
+            "note",
+            "connector",
+            "disabled",
+            "color",
+            "subject"
+        ];
+        reactAnnotationProps.forEach((prop) => {
+            if (point[prop])
+                newPoint[prop] = point[prop];
+        });
+        return newPoint;
+    }
+    return point;
+}

package/ai/dist/src/components/svg/networkDrawing.js

@@ -0,0 +1,207 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawEdges = exports.drawNodes = exports.softStack = exports.topologicalSort = exports.circularAreaLink = exports.areaLink = exports.ribbonLink = exports.dagreEdgeGenerator = exports.chordEdgeGenerator = exports.sankeyArrowGenerator = exports.arcEdgeGenerator = exports.matrixEdgeGenerator = exports.hierarchicalRectNodeGenerator = exports.radialLabelGenerator = exports.radialRectNodeGenerator = exports.matrixNodeGenerator = exports.chordNodeGenerator = exports.sankeyNodeGenerator = exports.circleNodeGenerator = void 0;
+const React = __importStar(require("react"));
+const edgeGenerators_1 = require("./edgeGenerators");
+const nodeGenerators_1 = require("./nodeGenerators");
+// Re-export everything from the split modules so existing imports continue to work
+var nodeGenerators_2 = require("./nodeGenerators");
+Object.defineProperty(exports, "circleNodeGenerator", { enumerable: true, get: function () { return nodeGenerators_2.circleNodeGenerator; } });
+Object.defineProperty(exports, "sankeyNodeGenerator", { enumerable: true, get: function () { return nodeGenerators_2.sankeyNodeGenerator; } });
+Object.defineProperty(exports, "chordNodeGenerator", { enumerable: true, get: function () { return nodeGenerators_2.chordNodeGenerator; } });
+Object.defineProperty(exports, "matrixNodeGenerator", { enumerable: true, get: function () { return nodeGenerators_2.matrixNodeGenerator; } });
+Object.defineProperty(exports, "radialRectNodeGenerator", { enumerable: true, get: function () { return nodeGenerators_2.radialRectNodeGenerator; } });
+Object.defineProperty(exports, "radialLabelGenerator", { enumerable: true, get: function () { return nodeGenerators_2.radialLabelGenerator; } });
+Object.defineProperty(exports, "hierarchicalRectNodeGenerator", { enumerable: true, get: function () { return nodeGenerators_2.hierarchicalRectNodeGenerator; } });
+var edgeGenerators_2 = require("./edgeGenerators");
+Object.defineProperty(exports, "matrixEdgeGenerator", { enumerable: true, get: function () { return edgeGenerators_2.matrixEdgeGenerator; } });
+Object.defineProperty(exports, "arcEdgeGenerator", { enumerable: true, get: function () { return edgeGenerators_2.arcEdgeGenerator; } });
+Object.defineProperty(exports, "sankeyArrowGenerator", { enumerable: true, get: function () { return edgeGenerators_2.sankeyArrowGenerator; } });
+Object.defineProperty(exports, "chordEdgeGenerator", { enumerable: true, get: function () { return edgeGenerators_2.chordEdgeGenerator; } });
+Object.defineProperty(exports, "dagreEdgeGenerator", { enumerable: true, get: function () { return edgeGenerators_2.dagreEdgeGenerator; } });
+var sankeyLinks_1 = require("./sankeyLinks");
+Object.defineProperty(exports, "ribbonLink", { enumerable: true, get: function () { return sankeyLinks_1.ribbonLink; } });
+Object.defineProperty(exports, "areaLink", { enumerable: true, get: function () { return sankeyLinks_1.areaLink; } });
+Object.defineProperty(exports, "circularAreaLink", { enumerable: true, get: function () { return sankeyLinks_1.circularAreaLink; } });
+var graphAlgorithms_1 = require("./graphAlgorithms");
+Object.defineProperty(exports, "topologicalSort", { enumerable: true, get: function () { return graphAlgorithms_1.topologicalSort; } });
+Object.defineProperty(exports, "softStack", { enumerable: true, get: function () { return graphAlgorithms_1.softStack; } });
+const drawNodes = ({ data, renderKeyFn, customMark, styleFn, classFn, renderMode, canvasDrawing, canvasRenderFn, networkSettings }) => {
+    const markGenerator = customMark;
+    const renderedData = [];
+    if (networkSettings.type === "matrix" && canvasRenderFn) {
+        return;
+    }
+    if (networkSettings) {
+        let i = 0;
+        for (const d of data) {
+            const generatedMark = markGenerator({
+                d,
+                i,
+                renderKeyFn,
+                styleFn,
+                classFn,
+                renderMode,
+                key: renderKeyFn ? renderKeyFn(d, i) : d.id || `node-${i}`,
+                className: `node ${classFn(d, i)}`,
+                transform: `translate(${d.x},${d.y})`
+            });
+            if (canvasRenderFn && canvasRenderFn(d, i) === true) {
+                const { transform = "translate(0,0)" } = generatedMark.props;
+                const [x, y] = transform
+                    .replace("translate(", "")
+                    .replace(")", "")
+                    .split(",");
+                const canvasNode = {
+                    baseClass: "frame-piece",
+                    tx: x,
+                    ty: y,
+                    d,
+                    i,
+                    markProps: {
+                        markType: typeof generatedMark.type === "string" ? generatedMark.type : generatedMark.props.markType,
+                        ...generatedMark.props
+                    },
+                    styleFn,
+                    renderFn: renderMode,
+                    classFn
+                };
+                canvasDrawing.push(canvasNode);
+            }
+            else {
+                // Use the already generated mark
+                renderedData.push(generatedMark);
+            }
+            i++;
+        }
+    }
+    return renderedData;
+};
+exports.drawNodes = drawNodes;
+const drawEdges = (settings) => {
+    const { data: baseData, renderKeyFn, customMark, styleFn, classFn, renderMode, canvasRenderFn, canvasDrawing, type, networkSettings, projection, numberOfNodes, size } = settings;
+    const { type: networkType, direction, edgeSort = edgeGenerators_1.sankeyEdgeSort } = networkSettings;
+    const data = networkType === "sankey"
+        ? baseData.sort((a, b) => edgeSort(a, b, direction))
+        : baseData;
+    let dGenerator = edgeGenerators_1.genericLineGenerator;
+    const renderedData = [];
+    if (canvasRenderFn && networkSettings.type === "matrix") {
+        let i = 0;
+        const gridSize = Math.floor(Math.min(...size) / numberOfNodes);
+        for (const d of data) {
+            const canvasEdge = {
+                baseClass: "frame-piece",
+                tx: d.source.y,
+                ty: d.target.y,
+                d,
+                i,
+                markProps: { markType: "rect", ...(0, nodeGenerators_1.gridProps)(gridSize) },
+                styleFn,
+                renderFn: renderMode,
+                classFn
+            };
+            canvasDrawing.push(canvasEdge);
+            i++;
+        }
+    }
+    else if (customMark) {
+        // CUSTOM MARK IMPLEMENTATION
+        if (type) {
+            if (typeof type === "function") {
+                dGenerator = type;
+            }
+            else if (edgeGenerators_1.customEdgeHashD[type]) {
+                dGenerator = (d) => edgeGenerators_1.customEdgeHashD[type](d, projection);
+            }
+        }
+        let i = 0;
+        for (const d of data) {
+            const renderedCustomMark = customMark({
+                d,
+                i,
+                renderKeyFn,
+                styleFn,
+                classFn,
+                renderMode,
+                key: renderKeyFn ? renderKeyFn(d, i) : `edge-${i}`,
+                className: `${classFn(d, i)} edge`,
+                transform: `translate(${d.x},${d.y})`,
+                generatedPath: dGenerator(d)
+            });
+            if (renderedCustomMark &&
+                renderedCustomMark.props &&
+                (renderedCustomMark.props.markType !== "path" ||
+                    renderedCustomMark.props.d)) {
+                renderedData.push(renderedCustomMark);
+            }
+            i++;
+        }
+    }
+    else {
+        if (type) {
+            if (typeof type === "function") {
+                dGenerator = type;
+            }
+            else if (edgeGenerators_1.customEdgeHashD[type]) {
+                dGenerator = (d) => edgeGenerators_1.customEdgeHashD[type](d, projection);
+            }
+        }
+        let i = 0;
+        for (const d of data) {
+            const renderedD = dGenerator(d);
+            if (renderedD && canvasRenderFn && canvasRenderFn(d, i) === true) {
+                const canvasEdge = {
+                    baseClass: "frame-piece",
+                    tx: d.x,
+                    ty: d.y,
+                    d,
+                    i,
+                    markProps: { markType: "path", d: renderedD },
+                    styleFn,
+                    renderFn: renderMode,
+                    classFn
+                };
+                canvasDrawing.push(canvasEdge);
+            }
+            else if (renderedD) {
+                renderedData.push(React.createElement("path", { key: renderKeyFn ? renderKeyFn(d, i) : `edge-${i}`, className: `${classFn(d)} edge`, d: renderedD, style: styleFn(d, i), tabIndex: -1, role: "img", "aria-label": `connection from ${d.source.id} to ${d.target.id}` }));
+            }
+        }
+    }
+    return renderedData;
+};
+exports.drawEdges = drawEdges;