semiotic 2.0.3 → 3.0.0-beta.1

package/ai/dist/src/components/annotationLayerBehavior/d3labeler.js

@@ -0,0 +1,254 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+// from Evan Wang's https://github.com/tinker10/D3-Labeler
+function default_1() {
+    let lab = [], anc = [], w = 1, // box width
+    h = 1, // box width
+    labeler = {
+        start: x => { },
+        width: x => { },
+        height: x => { },
+        label: x => { },
+        anchor: x => { },
+        alt_energy: x => { },
+        alt_schedule: x => { }
+    };
+    let max_move = 5.0, max_angle = 0.5;
+    // weights
+    let w_len = 0.2, // leader line length
+    w_inter = 1.0, // leader line intersection
+    w_lab2 = 30.0, // label-label overlap
+    w_lab_anc = 30.0, // label-anchor overlap
+    w_orient = 3.0; // orientation bias
+    // booleans for user defined functions
+    let user_energy = false, user_schedule = false;
+    let user_defined_energy, user_defined_schedule;
+    const energy = function (index) {
+        // energy function, tailored for label placement
+        let m = lab.length, ener = 0, dx = lab[index].x - anc[index].x, dy = anc[index].y - lab[index].y, dist = Math.sqrt(dx * dx + dy * dy), overlap = true, amount = 0, theta = 0;
+        // penalty for length of leader line
+        if (dist > 0)
+            ener += dist * w_len;
+        // label orientation bias
+        dx /= dist;
+        dy /= dist;
+        if (dx > 0 && dy > 0) {
+            ener += 0 * w_orient;
+        }
+        else if (dx < 0 && dy > 0) {
+            ener += 1 * w_orient;
+        }
+        else if (dx < 0 && dy < 0) {
+            ener += 2 * w_orient;
+        }
+        else {
+            ener += 3 * w_orient;
+        }
+        let x21 = lab[index].x, y21 = lab[index].y - lab[index].height + 2.0, x22 = lab[index].x + lab[index].width, y22 = lab[index].y + 2.0;
+        let x11, x12, y11, y12, x_overlap, y_overlap, overlap_area;
+        for (let i = 0; i < m; i++) {
+            if (i !== index) {
+                // penalty for intersection of leader lines
+                const overlap = intersect(anc[index].x, lab[index].x, anc[i].x, lab[i].x, anc[index].y, lab[index].y, anc[i].y, lab[i].y);
+                if (overlap)
+                    ener += w_inter;
+                // penalty for label-label overlap
+                x11 = lab[i].x;
+                y11 = lab[i].y - lab[i].height + 2.0;
+                x12 = lab[i].x + lab[i].width;
+                y12 = lab[i].y + 2.0;
+                x_overlap = Math.max(0, Math.min(x12, x22) - Math.max(x11, x21));
+                y_overlap = Math.max(0, Math.min(y12, y22) - Math.max(y11, y21));
+                overlap_area = x_overlap * y_overlap;
+                ener += overlap_area * w_lab2;
+            }
+            // penalty for label-anchor overlap
+            x11 = anc[i].x - anc[i].r;
+            y11 = anc[i].y - anc[i].r;
+            x12 = anc[i].x + anc[i].r;
+            y12 = anc[i].y + anc[i].r;
+            x_overlap = Math.max(0, Math.min(x12, x22) - Math.max(x11, x21));
+            y_overlap = Math.max(0, Math.min(y12, y22) - Math.max(y11, y21));
+            overlap_area = x_overlap * y_overlap;
+            ener += overlap_area * w_lab_anc;
+        }
+        return ener;
+    };
+    const mcmove = function (currT) {
+        // Monte Carlo translation move
+        // select a random label
+        let i = Math.floor(Math.random() * lab.length);
+        // save old coordinates
+        let x_old = lab[i].x;
+        let y_old = lab[i].y;
+        // old energy
+        let old_energy;
+        if (user_energy) {
+            old_energy = user_defined_energy(i, lab, anc);
+        }
+        else {
+            old_energy = energy(i);
+        }
+        // random translation
+        lab[i].x += (Math.random() - 0.5) * max_move;
+        lab[i].y += (Math.random() - 0.5) * max_move;
+        // hard wall boundaries
+        if (lab[i].x > w)
+            lab[i].x = x_old;
+        if (lab[i].x < 0)
+            lab[i].x = x_old;
+        if (lab[i].y > h)
+            lab[i].y = y_old;
+        if (lab[i].y < 0)
+            lab[i].y = y_old;
+        // new energy
+        let new_energy;
+        if (user_energy) {
+            new_energy = user_defined_energy(i, lab, anc);
+        }
+        else {
+            new_energy = energy(i);
+        }
+        // delta E
+        let delta_energy = new_energy - old_energy;
+        if (!(Math.random() < Math.exp(-delta_energy / currT))) {
+            // move back to old coordinates
+            lab[i].x = x_old;
+            lab[i].y = y_old;
+        }
+    };
+    const mcrotate = function (currT) {
+        // Monte Carlo rotation move
+        // select a random label
+        let i = Math.floor(Math.random() * lab.length);
+        // save old coordinates
+        let x_old = lab[i].x;
+        let y_old = lab[i].y;
+        // old energy
+        let old_energy;
+        if (user_energy) {
+            old_energy = user_defined_energy(i, lab, anc);
+        }
+        else {
+            old_energy = energy(i);
+        }
+        // random angle
+        let angle = (Math.random() - 0.5) * max_angle;
+        let s = Math.sin(angle);
+        let c = Math.cos(angle);
+        // translate label (relative to anchor at origin):
+        lab[i].x -= anc[i].x;
+        lab[i].y -= anc[i].y;
+        // rotate label
+        let x_new = lab[i].x * c - lab[i].y * s, y_new = lab[i].x * s + lab[i].y * c;
+        // translate label back
+        lab[i].x = x_new + anc[i].x;
+        lab[i].y = y_new + anc[i].y;
+        // hard wall boundaries
+        if (lab[i].x > w)
+            lab[i].x = x_old;
+        if (lab[i].x < 0)
+            lab[i].x = x_old;
+        if (lab[i].y > h)
+            lab[i].y = y_old;
+        if (lab[i].y < 0)
+            lab[i].y = y_old;
+        // new energy
+        let new_energy;
+        if (user_energy) {
+            new_energy = user_defined_energy(i, lab, anc);
+        }
+        else {
+            new_energy = energy(i);
+        }
+        // delta E
+        let delta_energy = new_energy - old_energy;
+        if (!(Math.random() < Math.exp(-delta_energy / currT))) {
+            // move back to old coordinates
+            lab[i].x = x_old;
+            lab[i].y = y_old;
+        }
+    };
+    const intersect = function (x1, x2, x3, x4, y1, y2, y3, y4) {
+        // returns true if two lines intersect, else false
+        // from http://paulbourke.net/geometry/lineline2d/
+        let mua, mub;
+        let denom, numera, numerb;
+        denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
+        numera = (x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3);
+        numerb = (x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3);
+        /* Is the intersection along the the segments */
+        mua = numera / denom;
+        mub = numerb / denom;
+        if (!(mua < 0 || mua > 1 || mub < 0 || mub > 1)) {
+            return true;
+        }
+        return false;
+    };
+    const cooling_schedule = function (currT, initialT, nsweeps) {
+        // linear cooling
+        return currT - initialT / nsweeps;
+    };
+    labeler.start = function (nsweeps) {
+        // main simulated annealing function
+        let m = lab.length, currT = 1.0, initialT = 1.0;
+        for (let i = 0; i < nsweeps; i++) {
+            for (let j = 0; j < m; j++) {
+                if (Math.random() < 0.5) {
+                    mcmove(currT);
+                }
+                else {
+                    mcrotate(currT);
+                }
+            }
+            currT = cooling_schedule(currT, initialT, nsweeps);
+        }
+    };
+    labeler.width = function (x) {
+        // users insert graph width
+        if (!arguments.length)
+            return w;
+        w = x;
+        return labeler;
+    };
+    labeler.height = function (x) {
+        // users insert graph height
+        if (!arguments.length)
+            return h;
+        h = x;
+        return labeler;
+    };
+    labeler.label = function (x) {
+        // users insert label positions
+        if (!arguments.length)
+            return lab;
+        lab = x;
+        return labeler;
+    };
+    labeler.anchor = function (x) {
+        // users insert anchor positions
+        if (!arguments.length)
+            return anc;
+        anc = x;
+        return labeler;
+    };
+    labeler.alt_energy = function (x) {
+        // user defined energy
+        if (!arguments.length)
+            return energy;
+        user_defined_energy = x;
+        user_energy = true;
+        return labeler;
+    };
+    labeler.alt_schedule = function (x) {
+        // user defined cooling_schedule
+        if (!arguments.length)
+            return cooling_schedule;
+        user_defined_schedule = x;
+        user_schedule = true;
+        return labeler;
+    };
+    return labeler;
+}
+/*eslint-enable */

package/ai/dist/src/components/annotationRules/baseRules.js

@@ -0,0 +1,150 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.desaturationLayer = exports.hullEnclosure = exports.rectangleEnclosure = exports.circleEnclosure = void 0;
+const React = __importStar(require("react"));
+const Annotation_1 = __importDefault(require("../Annotation"));
+const d3_polygon_1 = require("d3-polygon");
+const polygon_offset_1 = __importDefault(require("polygon-offset"));
+const circleEnclosure = ({ d, i, circle }) => {
+    const { padding = 2, radiusPadding = padding, label } = d;
+    const noteData = Object.assign({
+        dx: 0,
+        dy: 0,
+        note: { label },
+        connector: { end: "arrow" }
+    }, d, {
+        coordinates: undefined,
+        x: circle.x,
+        y: circle.y,
+        type: "callout-circle",
+        subject: {
+            radius: circle.r,
+            radiusPadding
+        },
+        i
+    });
+    if (noteData.rp) {
+        switch (noteData.rp) {
+            case "top":
+                noteData.dx = 0;
+                noteData.dy = -circle.r - noteData.rd;
+                break;
+            case "bottom":
+                noteData.dx = 0;
+                noteData.dy = circle.r + noteData.rd;
+                break;
+            case "left":
+                noteData.dx = -circle.r - noteData.rd;
+                noteData.dy = 0;
+                break;
+            default:
+                noteData.dx = circle.r + noteData.rd;
+                noteData.dy = 0;
+        }
+    }
+    //TODO: Support .ra (setting angle)
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.circleEnclosure = circleEnclosure;
+const rectangleEnclosure = ({ bboxNodes, d, i }) => {
+    const { padding = 0, dx = -25, dy = -25, label } = d;
+    const bbox = [
+        [
+            Math.min(...bboxNodes.map((p) => p.x0)) - padding,
+            Math.min(...bboxNodes.map((p) => p.y0)) - padding
+        ],
+        [
+            Math.max(...bboxNodes.map((p) => p.x1)) + padding,
+            Math.max(...bboxNodes.map((p) => p.y1)) + padding
+        ]
+    ];
+    const noteData = Object.assign({
+        dx: dx,
+        dy: dy,
+        note: { label },
+        connector: { end: "arrow" }
+    }, d, {
+        type: "callout-rect",
+        x: bbox[0][0],
+        y: bbox[0][1],
+        subject: {
+            width: bbox[1][0] - bbox[0][0],
+            height: bbox[1][1] - bbox[0][1]
+        }
+    });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.rectangleEnclosure = rectangleEnclosure;
+const hullEnclosure = ({ points, d, i }) => {
+    const { color = "currentColor", dx = -25, dy = -25, label, padding = 10, buffer = padding, strokeWidth = 10 } = d;
+    const hullPoints = (0, d3_polygon_1.polygonHull)(points);
+    const offset = new polygon_offset_1.default();
+    const bufferedHull = offset
+        .data([...hullPoints, hullPoints[0]])
+        .margin(buffer)[0];
+    const hullD = `M${bufferedHull.map((d) => d.join(",")).join("L")}Z`;
+    const firstCoord = bufferedHull[0];
+    const { nx = firstCoord[0] + dx, ny = firstCoord[1] + dy } = d;
+    const closestCoordinates = bufferedHull.reduce((p, c) => {
+        if (Math.hypot(nx - p[0], ny - p[1]) > Math.hypot(nx - c[0], ny - c[1])) {
+            p = c;
+        }
+        return p;
+    }, firstCoord);
+    const noteData = Object.assign({
+        dx: dx,
+        dy: dy,
+        note: { label },
+        connector: { end: "arrow" }
+    }, d, {
+        type: "callout-custom",
+        x: closestCoordinates[0],
+        y: closestCoordinates[1],
+        subject: {
+            custom: [
+                React.createElement("path", { key: "hull-drawing", d: hullD, strokeWidth: strokeWidth, strokeMiterlimit: "10", strokeLinejoin: "miter", strokeLinecap: "butt", fill: "none", stroke: color, transform: `translate(${-closestCoordinates[0]},${-closestCoordinates[1]})` })
+            ],
+            customID: "hull-annotation"
+        }
+    });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.hullEnclosure = hullEnclosure;
+const desaturationLayer = ({ style = { fill: "white", fillOpacity: 0.5 }, size, i, key }) => (React.createElement("rect", { "data-testid": "desaturation-layer", key: key || `desaturation-${i}`, x: -5, y: -5, width: size[0] + 10, height: size[1] + 10, style: style }));
+exports.desaturationLayer = desaturationLayer;

package/ai/dist/src/components/annotationRules/networkframeRules.js

@@ -0,0 +1,198 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svgHighlightRule = exports.svgHullEncloseRule = exports.svgRectEncloseRule = exports.svgEncloseRule = exports.svgReactAnnotationRule = exports.svgNodeRule = exports.htmlFrameHoverRule = void 0;
+const React = __importStar(require("react"));
+const Annotation_1 = __importDefault(require("../Annotation"));
+const d3_hierarchy_1 = require("d3-hierarchy");
+const baseRules_1 = require("./baseRules");
+const TooltipPositioner_1 = __importDefault(require("../TooltipPositioner"));
+const htmlFrameHoverRule = ({ d: baseD, i, tooltipContent, optimizeCustomTooltipPosition, nodes, edges, nodeIDAccessor, adjustedSize }) => {
+    const d = baseD.x !== undefined && baseD.y !== undefined
+        ? baseD
+        : baseD.edge
+            ? {
+                ...(edges.find((p) => nodeIDAccessor(p.source) === nodeIDAccessor(baseD.source) &&
+                    nodeIDAccessor(p.target) === nodeIDAccessor(baseD.target)) || {}),
+                ...baseD
+            }
+            : nodes.find((p) => nodeIDAccessor(p) === baseD.id);
+    if (!d)
+        return null;
+    let content = d.edge ? (React.createElement("div", { className: "tooltip-content", "data-testid": "tooltip-content" },
+        React.createElement("p", { key: "html-annotation-content-1" },
+            (d.source || d.edge.source).id,
+            " to ",
+            (d.target || d.edge.target).id))) : (React.createElement("div", { className: "tooltip-content", "data-testid": "tooltip-content" },
+        React.createElement("p", { key: "html-annotation-content-1" }, d.id),
+        React.createElement("p", { key: "html-annotation-content-2" },
+            "Degree: ",
+            d.degree)));
+    if (d.type === "frame-hover" && tooltipContent) {
+        content = optimizeCustomTooltipPosition ? (React.createElement(TooltipPositioner_1.default, { tooltipContent: tooltipContent, tooltipContentArgs: d })) : (tooltipContent(d));
+    }
+    const flipped = adjustedSize && d.x > adjustedSize[0] / 2;
+    const tooltipStyle = {
+        position: "absolute",
+        top: `${d.y}px`
+    };
+    if (flipped) {
+        tooltipStyle.right = `${adjustedSize[0] - d.x}px`;
+    }
+    else {
+        tooltipStyle.left = `${d.x}px`;
+    }
+    return (React.createElement("div", { key: `network-annotation-label-${i}`, className: `annotation annotation-network-label ${d.className || ""}`, "data-testid": "network-tooltip-container", style: tooltipStyle }, content));
+};
+exports.htmlFrameHoverRule = htmlFrameHoverRule;
+const svgNodeRule = ({ d, i, nodeSizeAccessor }) => {
+    if (!d) {
+        return null;
+    }
+    const noteData = Object.assign({
+        dx: d.dx || -25,
+        dy: d.dy || -25,
+        x: d.x,
+        y: d.y,
+        note: { label: d.label, orientation: d.orientation, align: d.align },
+        connector: { end: "arrow" }
+    }, d, {
+        type: "callout-circle",
+        subject: {
+            radius: d.radius || d.radius || nodeSizeAccessor(d)
+        }
+    });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.svgNodeRule = svgNodeRule;
+const svgReactAnnotationRule = ({ d, i, projectedNodes, nodeIDAccessor }) => {
+    const selectedNode = d.x !== undefined && d.y !== undefined
+        ? d
+        : projectedNodes.find((p) => nodeIDAccessor(p) === d.id);
+    if (!selectedNode) {
+        return null;
+    }
+    const noteData = Object.assign({
+        dx: 0,
+        dy: 0,
+        x: selectedNode.x,
+        y: selectedNode.y,
+        note: { label: d.label },
+        connector: { end: "arrow" }
+    }, d, { type: typeof d.type === "function" ? d.type : undefined });
+    return React.createElement(Annotation_1.default, { key: d.key || `annotation-${i}`, noteData: noteData });
+};
+exports.svgReactAnnotationRule = svgReactAnnotationRule;
+const svgEncloseRule = ({ d, i, projectedNodes, nodeIDAccessor, nodeSizeAccessor }) => {
+    const selectedNodes = projectedNodes.filter((p) => d.ids.indexOf(nodeIDAccessor(p)) !== -1);
+    if (selectedNodes.length === 0) {
+        return null;
+    }
+    const circle = (0, d3_hierarchy_1.packEnclose)(selectedNodes.map((p) => ({ x: p.x, y: p.y, r: nodeSizeAccessor(p) })));
+    return (0, baseRules_1.circleEnclosure)({ circle, d, i });
+};
+exports.svgEncloseRule = svgEncloseRule;
+const svgRectEncloseRule = ({ d, i, projectedNodes, nodeIDAccessor, nodeSizeAccessor }) => {
+    const selectedNodes = projectedNodes.filter((p) => d.ids.indexOf(nodeIDAccessor(p)) !== -1);
+    if (selectedNodes.length === 0) {
+        return null;
+    }
+    const bboxNodes = selectedNodes.map((p) => {
+        if (p.shapeNode) {
+            return {
+                x0: p.x0,
+                x1: p.x1,
+                y0: p.y0,
+                y1: p.y1
+            };
+        }
+        const nodeSize = nodeSizeAccessor(p);
+        return {
+            x0: p.x - nodeSize,
+            x1: p.x + nodeSize,
+            y0: p.y - nodeSize,
+            y1: p.y + nodeSize
+        };
+    });
+    return (0, baseRules_1.rectangleEnclosure)({ bboxNodes, d, i });
+};
+exports.svgRectEncloseRule = svgRectEncloseRule;
+const svgHullEncloseRule = ({ d, i, projectedNodes, nodeIDAccessor, nodeSizeAccessor }) => {
+    const selectedNodes = projectedNodes.filter((p) => d.ids.indexOf(nodeIDAccessor(p)) !== -1);
+    if (selectedNodes.length === 0) {
+        return null;
+    }
+    const projectedPoints = [];
+    selectedNodes.forEach((p) => {
+        if (p.shapeNode) {
+            projectedPoints.push({ x: p.x0, y: p.y0 });
+            projectedPoints.push({ x: p.x0, y: p.y1 });
+            projectedPoints.push({ x: p.x1, y: p.y0 });
+            projectedPoints.push({ x: p.x1, y: p.y1 });
+        }
+        else {
+            const nodeSize = nodeSizeAccessor(p);
+            projectedPoints.push({ x: p.x - nodeSize, y: p.y - nodeSize });
+            projectedPoints.push({ x: p.x + nodeSize, y: p.y - nodeSize });
+            projectedPoints.push({ x: p.x - nodeSize, y: p.y + nodeSize });
+            projectedPoints.push({ x: p.x + nodeSize, y: p.y + nodeSize });
+        }
+    });
+    return (0, baseRules_1.hullEnclosure)({ points: projectedPoints.map((d) => [d.x, d.y]), d, i });
+};
+exports.svgHullEncloseRule = svgHullEncloseRule;
+const svgHighlightRule = ({ d, i, networkFrameRender }) => {
+    const { nodes } = networkFrameRender;
+    const { customMark, styleFn: baseStyle } = nodes;
+    let styleFn = baseStyle;
+    if (d.style && typeof d.style === "function") {
+        styleFn = (d) => ({ ...baseStyle(d), ...d.style(d) });
+    }
+    else if (d.style) {
+        styleFn = (d) => ({ ...baseStyle(d), ...d.style });
+    }
+    const transform = `translate(${d.x},${d.y})`;
+    const HighlightMark = customMark({
+        d,
+        styleFn,
+        transform,
+        key: `highlight-${i}`
+    });
+    return HighlightMark;
+};
+exports.svgHighlightRule = svgHighlightRule;