@disputas/diagram - npm Package Compare versions

Comparing version 1.0.26 to 1.0.27

lib/components.d.ts

@@ -6,4 +6,2 @@ import { Proposition, Argument, Category } from "@disputas/types";
     updateDescription: (d: string) => void;
-    getArgumentsByPropositionId: (id: string) => Argument[];
-    hovered: string;
     x: number;
@@ -13,5 +11,3 @@ y: number;
     width: number;
-    height: number;
     color: string;
-    categories: Category[];
     ua: {
@@ -33,2 +29,6 @@ scaleBy: number;
 export declare const Defs: () => JSX.Element;
+export declare const ContextWrapper: ({ categories, propositionId, }: {
+    categories: Category[];
+    propositionId: string;
+}) => JSX.Element;
 interface IEdgesProps {
@@ -45,4 +45,2 @@ g: any;
     updateProposition: (id: string, description: string) => void;
-    getArgumentsByPropositionId: (id: string) => Argument[];
-    highlightedId: string;
     activePropositionId: string;
@@ -56,3 +54,3 @@ categories: Category[];
 }
-declare const AllNodes: ({ renderNodes, updateProposition, highlightedId, activePropositionId, categories, getArgumentsByPropositionId, ua, noConnect, }: INodeProps) => JSX.Element;
+declare const AllNodes: ({ renderNodes, updateProposition, activePropositionId, categories, ua, noConnect, }: INodeProps) => JSX.Element;
 export { AllEdges as Edges, AllNodes as Nodes };

lib/components.js

@@ -20,3 +20,3 @@ 'use strict';
 var Node = function (props) {
-    var proposition = props.proposition; props.hovered; var x = props.x, y = props.y, activePropositionId = props.activePropositionId, updateDescription = props.updateDescription, getArgumentsByPropositionId = props.getArgumentsByPropositionId, width = props.width, color = props.color, categories = props.categories, ua = props.ua, noConnect = props.noConnect;
+    var proposition = props.proposition, x = props.x, y = props.y, activePropositionId = props.activePropositionId, updateDescription = props.updateDescription, width = props.width, color = props.color, ua = props.ua, noConnect = props.noConnect;
     var description = proposition.description, displayId = proposition.displayId, propositionId = proposition.id;
@@ -29,4 +29,6 @@ var _a = React.useState(description), _description = _a[0], setDescription = _a[1];
         e.preventDefault();
-        document.dispatchEvent(events.RemoveContexts());
+        var domPoint = { x: e.clientX, y: e.clientY };
+        var svgPoint = utils.mapDomPointToSvg(domPoint);
         events.dispatchEvent(events.NodeClick(propositionId));
+        events.dispatchEvent(events.DisplayContexts({ position: svgPoint, graphElement: "node" }));
         setShowContext(true);
@@ -65,54 +67,39 @@ }, [setShowContext]);
     var isBuilding = activePropositionId && activePropositionId !== propositionId && !noConnect;
-    var args = getArgumentsByPropositionId(propositionId);
-    var isRelevance = args.some(function (arg) { return arg.type === "relevance"; });
-    var contextOptions = categories.length > 4
-        ? isRelevance
-            ? categories
-            : categories.filter(function (cat) { return cat.shadowName !== "relevance"; })
-        : [];
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("foreignObject", { width: width, ref: containerRef, x: x, id: "node_".concat(propositionId), y: y, onMouseOver: function () { return events.dispatchEvent(events.NodeMouseEnter(propositionId)); }, onMouseLeave: function () { return events.dispatchEvent(events.NodeMouseLeave(propositionId)); }, className: "".concat(diagram_module.nodeWrapper, " ").concat(activePropositionId === propositionId ? diagram_module.active : "", "\n        "), "data-cy": propositionId },
-            React__default["default"].createElement("fieldset", { className: "".concat(diagram_module.node), style: { borderColor: color }, onClick: function (e) {
-                    e.stopPropagation();
-                    document.dispatchEvent(events.RemoveContexts());
+    return (React__default["default"].createElement("foreignObject", { width: width, ref: containerRef, x: x, id: "node_".concat(propositionId), y: y, onMouseOver: function () { return events.dispatchEvent(events.NodeMouseEnter(propositionId)); }, onMouseLeave: function () { return events.dispatchEvent(events.NodeMouseLeave(propositionId)); }, className: "".concat(diagram_module.nodeWrapper, " ").concat(activePropositionId === propositionId ? diagram_module.active : "", "\n        "), "data-cy": propositionId },
+        React__default["default"].createElement("fieldset", { className: "".concat(diagram_module.node), style: { borderColor: color }, onClick: function (e) {
+                e.stopPropagation();
+                events.dispatchEvent(events.RemoveContexts());
+                if (isBuilding) {
+                    events.dispatchEvent(events.ConnectNode(propositionId));
+                }
+                else
+                    events.dispatchEvent(events.NodeClick(propositionId));
+            } },
+            React__default["default"].createElement("legend", { className: diagram_module.tag, style: { color: color } }, displayId),
+            React__default["default"].createElement("textarea", { className: diagram_module.content, style: {
+                    cursor: isBuilding ? "pointer" : "initial",
+                    fontSize: ua.nodeFontSize,
+                }, value: _description, onChange: function (e) { return setDescription(e.target.value); }, ref: editorRef, readOnly: proposition.readOnly, onFocus: function () {
+                    var _a;
                     if (isBuilding) {
-                        events.dispatchEvent(events.ConnectNode(propositionId));
+                        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.blur();
                     }
-                    else
+                    else {
                         events.dispatchEvent(events.NodeClick(propositionId));
-                } },
-                React__default["default"].createElement("legend", { className: diagram_module.tag, style: { color: color } }, displayId),
-                React__default["default"].createElement("textarea", { className: diagram_module.content, style: {
-                        cursor: isBuilding ? "pointer" : "initial",
-                        fontSize: ua.nodeFontSize,
-                    }, value: _description, onChange: function (e) { return setDescription(e.target.value); }, ref: editorRef, readOnly: proposition.readOnly, onFocus: function () {
-                        var _a;
-                        if (document.querySelector("div[data-context='context']"))
-                            return;
-                        if (isBuilding) {
-                            events.dispatchEvent(events.ConnectNode(propositionId));
-                            (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-                        }
-                        else {
-                            events.dispatchEvent(events.NodeClick(propositionId));
-                        }
-                    }, onBlur: function () {
-                        if (editorRef.current)
-                            editorRef.current.scrollTop = 0;
-                        if (_description !== description) {
-                            updateDescription(_description);
-                        }
-                    }, onKeyDown: function (e) {
-                        var _a;
-                        if (e.key === "Enter" && !e.shiftKey) {
-                            e.preventDefault();
-                            (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-                        }
-                        // Deselect node for connection when writing in the textarea
-                        events.dispatchEvent(events.NodeClick(null));
-                    } }))),
-        showContext && (React__default["default"].createElement(NodeContextMenu, { positions: {
-                x: x,
-                y: y + constants.NodeAttrs.nodeHeight / 2 + constants.NodeAttrs.borderWidth * 2,
-            }, propositionId: propositionId, categories: contextOptions, hideContext: hideContext }))));
+                    }
+                }, onBlur: function () {
+                    if (editorRef.current)
+                        editorRef.current.scrollTop = 0;
+                    if (_description !== description) {
+                        updateDescription(_description);
+                    }
+                }, onKeyDown: function (e) {
+                    var _a;
+                    if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+                    }
+                    // Deselect node for connection when writing in the textarea
+                    events.dispatchEvent(events.NodeClick(null));
+                } }))));
 };
@@ -122,11 +109,16 @@ var Edge = function (_a) {
     var _b = utils.getEdgePathAndPadding(points), edge = _b.edge, padding = _b.padding;
-    var t = 0.5;
-    var _c = utils.getPathPoint(points, t), x = _c.x, y = _c.y;
-    var _d = React.useState(false), showContext = _d[0], setShowContext = _d[1];
+    var _c = React.useState(false), showContext = _c[0], setShowContext = _c[1];
     var containerRef = React.useRef(null);
     var displayContextMenu = React.useCallback(function (e) {
         e.preventDefault();
-        document.dispatchEvent(events.RemoveContexts());
+        var domPoint = { x: e.clientX, y: e.clientY };
+        var svgPoint = utils.mapDomPointToSvg(domPoint);
+        events.dispatchEvent(events.DisplayContexts({
+            position: svgPoint,
+            graphElement: "edge",
+            id: id,
+            isConnecting: isConnecting,
+        }));
         setShowContext(true);
-    }, [setShowContext]);
+    }, [setShowContext, isConnecting]);
     function hideContext() {
@@ -168,4 +160,3 @@ setShowContext(false);
                     cursor: isConnecting ? "pointer" : "initial",
-                } }),
-            showContext && (React__default["default"].createElement(EdgeContextMenu, { id: id, isConnecting: isConnecting, positions: { x: x - constants.ContextMenuWidth / 2, y: y - 50 }, hideContext: hideContext })))));
+                } }))));
 };
@@ -178,3 +169,3 @@ var Defs = function () { return (React__default["default"].createElement("defs", null,
 var ContextMenu = function (_a) {
-    var id = _a.id, positions = _a.positions, children = _a.children;
+    var positions = _a.positions, children = _a.children;
     var BUTTON_HEIGHT = 1.5; // rem
@@ -184,14 +175,11 @@ var BUTTON_GAP = 0.2; // rem
     var elementHeight = BUTTON_HEIGHT * childrenLength + BUTTON_GAP * (childrenLength - 1);
-    return (React__default["default"].createElement("foreignObject", { x: positions.x, y: positions.y, width: constants.ContextMenuWidth, className: diagram_module.contextMenuWrapper, height: "".concat(elementHeight, "rem") },
+    return (React__default["default"].createElement("foreignObject", { x: positions.x, y: positions.y, width: constants.ContextMenuWidth, className: diagram_module.contextMenuWrapper, height: "".concat(elementHeight * 16, "px") },
         React__default["default"].createElement("div", { style: {
                 height: "".concat(elementHeight, "rem"),
                 width: constants.ContextMenuWidth,
-            }, className: diagram_module.contextMenu, id: "".concat(id, "_context"), "data-context": "context" }, children)));
+            }, className: diagram_module.contextMenu, "data-context": "context" }, children)));
 };
 var NodeContextMenu = function (_a) {
-    var categories = _a.categories, propositionId = _a.propositionId, positions = _a.positions, hideContext = _a.hideContext;
-    return (React__default["default"].createElement(ContextMenu, { positions: {
-            x: positions.x + constants.NodeAttrs.nodeWidth / 2,
-            y: positions.y + constants.NodeAttrs.nodeHeight / 2,
-        }, id: propositionId, hideContext: hideContext },
+    var categories = _a.categories, propositionId = _a.propositionId, position = _a.position, hideContext = _a.hideContext;
+    return (React__default["default"].createElement(ContextMenu, { positions: position, hideContext: hideContext },
         categories.map(function (category) { return (React__default["default"].createElement("button", { key: category.id, onClick: function () {
@@ -223,7 +211,8 @@ events.dispatchEvent(events.SetCategory(propositionId, category.shadowName || category.name));
 var EdgeContextMenu = function (_a) {
-    var id = _a.id, positions = _a.positions, hideContext = _a.hideContext, isConnecting = _a.isConnecting;
-    var Connecting = function () { return (React__default["default"].createElement(ContextMenu, { id: id, positions: positions, hideContext: hideContext },
+    var id = _a.id, position = _a.position, hideContext = _a.hideContext, isConnecting = _a.isConnecting;
+    var Connecting = function () { return (React__default["default"].createElement(ContextMenu, { positions: position, hideContext: hideContext },
         React__default["default"].createElement("button", { onClick: function (e) {
                 e.stopPropagation();
                 events.dispatchEvent(events.RelevanceArgument(id));
+                events.dispatchEvent(events.RemoveContexts());
             } },
@@ -240,2 +229,3 @@ React__default["default"].createElement("div", { style: {
                 events.dispatchEvent(events.ConjoinedArgument(id));
+                events.dispatchEvent(events.RemoveContexts());
             } },
@@ -249,4 +239,7 @@ React__default["default"].createElement("div", { style: {
             React__default["default"].createElement("h4", null, "Conjoined argument")))); };
-    var NotConnecting = function () { return (React__default["default"].createElement(ContextMenu, { id: id, positions: positions, hideContext: hideContext },
-        React__default["default"].createElement("button", { onClick: function () { return events.dispatchEvent(events.ChangeProCon(id)); } },
+    var NotConnecting = function () { return (React__default["default"].createElement(ContextMenu, { positions: position, hideContext: hideContext },
+        React__default["default"].createElement("button", { onClick: function () {
+                events.dispatchEvent(events.ChangeProCon(id));
+                events.dispatchEvent(events.RemoveContexts());
+            } },
             React__default["default"].createElement("div", { style: {
@@ -259,3 +252,6 @@ display: "flex",
             React__default["default"].createElement("h4", null, "Supports/Opposes")),
-        React__default["default"].createElement("button", { onClick: function () { return events.dispatchEvent(events.DeleteEdge(id)); } },
+        React__default["default"].createElement("button", { onClick: function () {
+                events.dispatchEvent(events.DeleteEdge(id));
+                events.dispatchEvent(events.RemoveContexts());
+            } },
             React__default["default"].createElement("div", { style: {
@@ -270,2 +266,36 @@ display: "flex",
 };
+var ContextWrapper = function (_a) {
+    var categories = _a.categories, propositionId = _a.propositionId;
+    var _b = React.useState(false), isVisible = _b[0], setIsVisible = _b[1];
+    var _c = React.useState(undefined), graphElement = _c[0], setGraphElement = _c[1];
+    var _d = React.useState({ x: 0, y: 0 }), position = _d[0], setPosition = _d[1];
+    var _e = React.useState(""), edgeId = _e[0], setEdgeId = _e[1];
+    var _f = React.useState(false), isConnecting = _f[0], setIsConnecting = _f[1];
+    var availableCategories = categories.length > 4 ? categories : [];
+    function hideContext() {
+        setIsVisible(false);
+        setPosition({ x: 0, y: 0 });
+    }
+    function displayContext(e) {
+        setIsVisible(true);
+        setGraphElement(e.detail.graphElement);
+        setPosition(e.detail.position);
+        if ("id" in e.detail && "isConnecting" in e.detail) {
+            var detail = e.detail;
+            setEdgeId(detail.id);
+            setIsConnecting(detail.isConnecting);
+        }
+    }
+    React.useEffect(function () {
+        events.addEventListener("context:remove", hideContext);
+        events.addEventListener("context:display", displayContext);
+        return function () {
+            events.removeEventListener("context:remove", hideContext);
+            events.removeEventListener("context:display", displayContext);
+        };
+    }, []);
+    if (!isVisible)
+        return null;
+    return graphElement === "node" ? (React__default["default"].createElement(NodeContextMenu, { categories: availableCategories, propositionId: propositionId, position: position, hideContext: hideContext })) : (React__default["default"].createElement(EdgeContextMenu, { id: edgeId, position: position, hideContext: hideContext, isConnecting: isConnecting }));
+};
 var AllEdges = function (_a) {
@@ -280,3 +310,3 @@ var g = _a.g, simpleEdges = _a.simpleEdges, relevanceArgs = _a.relevanceArgs, conjoinedArgs = _a.conjoinedArgs, activePropositionId = _a.activePropositionId;
             var targetPoint = utils.intersectNode(targetNode, edge.points[1]);
-            return (React__default["default"].createElement(Edge, { points: [sourcePoint, edge.points[1], targetPoint], key: e.v + "->" + e.w, id: edge.arg.id, activePropositionId: activePropositionId, isContra: edge.arg.isContraArgument, isConnecting: activePropositionId &&
+            return (React__default["default"].createElement(Edge, { points: [sourcePoint, edge.points[1], targetPoint], key: e.v + "->" + e.w, id: edge.arg.id, activePropositionId: activePropositionId, isContra: edge.arg.isContraArgument, isConnecting: !!activePropositionId &&
                     activePropositionId !== edge.arg.targetId &&
@@ -314,3 +344,3 @@ activePropositionId !== edge.arg.id &&
 var AllNodes = function (_a) {
-    var renderNodes = _a.renderNodes, updateProposition = _a.updateProposition, highlightedId = _a.highlightedId, activePropositionId = _a.activePropositionId, categories = _a.categories, getArgumentsByPropositionId = _a.getArgumentsByPropositionId, ua = _a.ua, noConnect = _a.noConnect;
+    var renderNodes = _a.renderNodes, updateProposition = _a.updateProposition, activePropositionId = _a.activePropositionId, categories = _a.categories, ua = _a.ua, noConnect = _a.noConnect;
     return (React__default["default"].createElement("g", { name: "nodes" }, renderNodes.map(function (node) {
@@ -320,8 +350,9 @@ var category = categories.find(function (cat) {
         });
-        return (React__default["default"].createElement(Node, { noConnect: noConnect, categories: categories, proposition: node.prop, hovered: highlightedId, key: node.prop.id, x: node.x - node.width / 2, y: node.y - node.height / 2 - constants.NodeAttrs.paddingY, activePropositionId: activePropositionId, updateDescription: function (description) {
+        return (React__default["default"].createElement(Node, { noConnect: noConnect, proposition: node.prop, key: node.prop.id, x: node.x - node.width / 2, y: node.y - node.height / 2 - constants.NodeAttrs.paddingY, activePropositionId: activePropositionId, updateDescription: function (description) {
                 updateProposition(node.prop.id, description);
-            }, width: node.width, height: node.height, getArgumentsByPropositionId: getArgumentsByPropositionId, color: (category === null || category === void 0 ? void 0 : category.color) || "#797979", ua: ua }));
+            }, width: node.width, color: (category === null || category === void 0 ? void 0 : category.color) || "#797979", ua: ua }));
     })));
 };
 
+exports.ContextWrapper = ContextWrapper;
 exports.Defs = Defs;
@@ -328,0 +359,0 @@ exports.Edge = Edge;

lib/events.d.ts

@@ -0,1 +1,2 @@
+import { EdgeDetail, NodeDetail } from "./types";
 export declare const dispatchEvent: <T extends unknown>(ev: CustomEvent<T>) => boolean;
@@ -20,1 +21,2 @@ export declare const addEventListener: (ev: string, cb: (detail: CustomEventInit) => void) => void;
 export declare const RemoveContexts: () => CustomEvent<unknown>;
+export declare const DisplayContexts: (detail: NodeDetail | EdgeDetail) => CustomEvent<NodeDetail | EdgeDetail>;

lib/events.js

@@ -47,2 +47,5 @@ 'use strict';
 var RemoveContexts = function () { return new CustomEvent("context:remove"); };
+var DisplayContexts = function (detail) {
+    return new CustomEvent("context:display", { detail: detail });
+};
 
@@ -55,2 +58,3 @@ exports.ChangeProCon = ChangeProCon;
 exports.DisconnectNode = DisconnectNode;
+exports.DisplayContexts = DisplayContexts;
 exports.FocusNode = FocusNode;
@@ -57,0 +61,0 @@ exports.NodeClick = NodeClick;

lib/index.d.ts

@@ -10,2 +10,3 @@ import React from "react";
     setFocus: (e: CustomEventInit<string>) => void;
+    deleteEdge: (e: CustomEventInit<string>) => void;
     deleteNode: (e: CustomEventInit<string>) => void;
@@ -15,8 +16,4 @@ createSimpleEdge: (e: CustomEventInit<string>) => void;
     toggleProCon: (e: CustomEventInit<string>) => void;
-    deleteEdge: (e: CustomEventInit<string>) => void;
+    addConjoinedEdge: (e: CustomEventInit<string>) => void;
     addRelevanceEdge: (e: CustomEventInit<string>) => void;
-    addConjoinedEdge: (e: CustomEventInit<string>) => void;
-    setHighlight: (e: CustomEventInit<string>) => void;
-    removeHighlight: () => void;
-    highlightedId: string;
     updateProposition: (id: string, data: string) => void;
@@ -23,0 +20,0 @@ updateCategory: (e: CustomEventInit<{

lib/index.js

@@ -22,3 +22,3 @@ 'use strict';
 var Diagram = React.forwardRef(function (_a, ref) {
-    var propositions = _a.propositions, args = _a.args, graphRotation = _a.graphRotation, activePropositionId = _a.activePropositionId, setFocus = _a.setFocus, deleteEdge = _a.deleteEdge, deleteNode = _a.deleteNode, createSimpleEdge = _a.createSimpleEdge, disconnectNode = _a.disconnectNode, toggleProCon = _a.toggleProCon, addConjoinedEdge = _a.addConjoinedEdge, addRelevanceEdge = _a.addRelevanceEdge, updateProposition = _a.updateProposition, setHighlight = _a.setHighlight, removeHighlight = _a.removeHighlight, updateCategory = _a.updateCategory, highlightedId = _a.highlightedId, categories = _a.categories, ua = _a.ua, noConnect = _a.noConnect;
+    var propositions = _a.propositions, args = _a.args, graphRotation = _a.graphRotation, activePropositionId = _a.activePropositionId, setFocus = _a.setFocus, deleteEdge = _a.deleteEdge, deleteNode = _a.deleteNode, createSimpleEdge = _a.createSimpleEdge, disconnectNode = _a.disconnectNode, toggleProCon = _a.toggleProCon, addConjoinedEdge = _a.addConjoinedEdge, addRelevanceEdge = _a.addRelevanceEdge, updateProposition = _a.updateProposition, updateCategory = _a.updateCategory, categories = _a.categories, ua = _a.ua, noConnect = _a.noConnect;
     var _b = React.useState([]), graphs = _b[0], setGraphs = _b[1];
@@ -66,3 +66,3 @@ var svgRef = React.useRef(null);
     }, 
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [propositions, args]);
@@ -95,10 +95,3 @@ function toDataURL() {
     }
-    function getArgumentsByPropositionId(id) {
-        return argList.filter(function (arg) {
-            return arg.sourceIds.concat(arg.targetId).includes(id);
-        });
-    }
     React.useEffect(function () {
-        events.addEventListener("node:mouseenter", setHighlight);
-        events.addEventListener("node:mouseleave", removeHighlight);
         events.addEventListener("node:delete", deleteNode);
@@ -115,3 +108,3 @@ events.addEventListener("node:disconnect", disconnectNode);
     }, 
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
@@ -124,3 +117,2 @@ React.useEffect(function () {
         return function () {
-            removeHighlight();
             events.removeEventListener("node:connect", createSimpleEdge);
@@ -132,3 +124,3 @@ events.removeEventListener("argument:relevance", addRelevanceEdge);
     }, 
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [activePropositionId]);
@@ -139,43 +131,42 @@ var VIEW_BOX_HEIGHT = 1000;
     var NODE_WIDTH = constants.NodeAttrs.nodeWidth;
-    return (React__default["default"].createElement("svg", { viewBox: "-".concat(constants.NodeAttrs.nodeWidth / 2, " -").concat(constants.NodeAttrs.nodeHeight / 2, " ").concat(VIEW_BOX_WIDTH, " ").concat(VIEW_BOX_HEIGHT), 
-        // style={{ width, height }}
-        className: diagram_module.container, id: "main", "data-testid": "main", onClick: function () {
+    return (React__default["default"].createElement("svg", { viewBox: "-".concat(constants.NodeAttrs.nodeWidth / 2, " -").concat(constants.NodeAttrs.nodeHeight / 2, " ").concat(VIEW_BOX_WIDTH, " ").concat(VIEW_BOX_HEIGHT), className: diagram_module.container, id: "main", "data-testid": "main", onClick: function () {
             setFocus(events.FocusNode(null));
+            events.dispatchEvent(events.RemoveContexts());
         }, ref: svgRef },
         React__default["default"].createElement(components.Defs, null),
-        React__default["default"].createElement("g", null, (function () {
-            var reactElements = [];
-            var xTransform = 0;
-            for (var index = 0; index < graphs.length; index++) {
-                var previousGraphWidth = 0;
-                if (index > 0) {
-                    previousGraphWidth = graphs[index - 1].g.graph().width;
-                    if (previousGraphWidth === -Infinity)
-                        previousGraphWidth = NODE_WIDTH;
-                    xTransform += GRAPH_SEPERATION_MARGIN;
+        React__default["default"].createElement("g", null,
+            (function () {
+                var reactElements = [];
+                var xTransform = 0;
+                for (var index = 0; index < graphs.length; index++) {
+                    var previousGraphWidth = 0;
+                    if (index > 0) {
+                        previousGraphWidth = graphs[index - 1].g.graph().width;
+                        if (previousGraphWidth === -Infinity)
+                            previousGraphWidth = NODE_WIDTH;
+                        xTransform += GRAPH_SEPERATION_MARGIN;
+                    }
+                    xTransform += previousGraphWidth;
+                    var _a = tslib.__assign({}, graphs[index]), g = _a.g, renderNodes = _a.renderNodes, simpleEdges = _a.simpleEdges, relevanceArgs = _a.relevanceArgs, conjoinedArgs = _a.conjoinedArgs;
+                    var yTransform = !!conjoinedArgs.length ? -75 : 0;
+                    reactElements.push(React__default["default"].createElement("g", { name: "graph".concat(index), key: index, transform: "translate(".concat(xTransform, ", ").concat(yTransform, ")") },
+                        React__default["default"].createElement(components.Edges, tslib.__assign({}, {
+                            g: g,
+                            simpleEdges: simpleEdges,
+                            relevanceArgs: relevanceArgs,
+                            conjoinedArgs: conjoinedArgs,
+                            activePropositionId: activePropositionId,
+                        })),
+                        React__default["default"].createElement(components.Nodes, tslib.__assign({}, {
+                            noConnect: noConnect,
+                            ua: ua,
+                            renderNodes: renderNodes,
+                            updateProposition: updateProposition,
+                            activePropositionId: activePropositionId,
+                            categories: categories,
+                        }))));
                 }
-                xTransform += previousGraphWidth;
-                var _a = tslib.__assign({}, graphs[index]), g = _a.g, renderNodes = _a.renderNodes, simpleEdges = _a.simpleEdges, relevanceArgs = _a.relevanceArgs, conjoinedArgs = _a.conjoinedArgs;
-                var yTransform = !!conjoinedArgs.length ? -75 : 0;
-                reactElements.push(React__default["default"].createElement("g", { name: "graph".concat(index), key: index, transform: "translate(".concat(xTransform, ", ").concat(yTransform, ")") },
-                    React__default["default"].createElement(components.Edges, tslib.__assign({}, {
-                        g: g,
-                        simpleEdges: simpleEdges,
-                        relevanceArgs: relevanceArgs,
-                        conjoinedArgs: conjoinedArgs,
-                        activePropositionId: activePropositionId,
-                    })),
-                    React__default["default"].createElement(components.Nodes, tslib.__assign({}, {
-                        noConnect: noConnect,
-                        ua: ua,
-                        renderNodes: renderNodes,
-                        updateProposition: updateProposition,
-                        highlightedId: highlightedId,
-                        activePropositionId: activePropositionId,
-                        getArgumentsByPropositionId: getArgumentsByPropositionId,
-                        categories: categories,
-                    }))));
-            }
-            return reactElements;
-        })())));
+                return reactElements;
+            })(),
+            React__default["default"].createElement(components.ContextWrapper, { categories: categories, propositionId: activePropositionId }))));
 });
@@ -182,0 +173,0 @@

lib/types.d.ts

@@ -105,2 +105,21 @@ import { Argument, Proposition } from "@disputas/types";
 }
+interface DisplayContextsDetail {
+    position: {
+        x: number;
+        y: number;
+    };
+    graphElement: "node" | "edge";
+}
+export interface NodeDetail extends DisplayContextsDetail {
+    graphElement: "node";
+}
+export interface EdgeDetail extends DisplayContextsDetail {
+    position: {
+        x: number;
+        y: number;
+    };
+    graphElement: "edge";
+    id: string;
+    isConnecting: boolean;
+}
 export {};

lib/utils.d.ts

@@ -58,2 +58,8 @@ import { Proposition, Argument, AnalysisCollection } from "@disputas/types";
 export declare function seperateIndependentGraphs(args: Argument[], argsById: AnalysisCollection<Argument>["byId"], propositions: Proposition[], propositionsById: AnalysisCollection<Proposition>["byId"]): GraphCollection;
+/**
+ * Converts DOM x and y coordinates into SVG x and y coordinates.
+ * @param point An object with x and y properties.
+ * @returns A DOMPoint object with x and y mapped to SVG coordinates.
+ */
+export declare function mapDomPointToSvg(point: Point): DOMPoint;
 export {};

lib/utils.js

@@ -369,2 +369,15 @@ 'use strict';
 }
+/**
+ * Converts DOM x and y coordinates into SVG x and y coordinates.
+ * @param point An object with x and y properties.
+ * @returns A DOMPoint object with x and y mapped to SVG coordinates.
+ */
+function mapDomPointToSvg(point) {
+    var svgElement = document.getElementById("main");
+    var svgGroupElement = svgElement.getElementsByTagName("g")[0];
+    var svgPoint = svgElement.createSVGPoint();
+    svgPoint.x = point.x;
+    svgPoint.y = point.y;
+    return svgPoint.matrixTransform(svgGroupElement.getScreenCTM().inverse());
+}
 
@@ -376,2 +389,3 @@ exports.getConjoinedArgEdge = getConjoinedArgEdge;
 exports.intersectNode = intersectNode;
+exports.mapDomPointToSvg = mapDomPointToSvg;
 exports.seperateIndependentGraphs = seperateIndependentGraphs;

package.json

 {
   "name": "@disputas/diagram",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "D3 and Dagre based diagram",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

133442

increased by1.36%

Lines of code

2514

increased by2.49%

No dependency changes