@disputas/diagram - npm Package Compare versions

Comparing version 1.0.18 to 1.0.19

lib/components.d.ts

@@ -18,6 +18,7 @@ import { Proposition, Argument, Category } from "@disputas/types";
 declare type Points = [Point, Point, Point];
-export declare const Edge: ({ points, id, isContra, isConnecting, }: {
+export declare const Edge: ({ points, id, isContra, activePropositionId, isConnecting, }: {
     points: Points;
     id: string;
     isContra: boolean;
+    activePropositionId: string;
     isConnecting: boolean;
@@ -24,0 +25,0 @@ }) => JSX.Element;

lib/components.js

@@ -5,7 +5,7 @@ 'use strict';
 
-var tslib = require('tslib');
 var React = require('react');
-require('react-icons/ti');
 var im = require('react-icons/im');
 var cg = require('react-icons/cg');
+var fa = require('react-icons/fa');
+var icons = require('./icons.js');
 var utils = require('./utils.js');
@@ -20,20 +20,2 @@ var events = require('./events.js');
 
-var EdgeButtons = function (_a) {
-    var id = _a.id, isConnecting = _a.isConnecting, point = _a.point;
-    var connecting = (React__default["default"].createElement("foreignObject", tslib.__assign({}, point, { className: diagram_module.edgeButton }),
-        React__default["default"].createElement("button", { onClick: function (e) {
-                e.stopPropagation();
-                events.dispatchEvent(events.RelevanceArgument(id));
-            } }, "Relevance argument"),
-        React__default["default"].createElement("button", { onClick: function (e) {
-                e.stopPropagation();
-                events.dispatchEvent(events.ConjoinedArgument(id));
-            } }, "Conjoined argument")));
-    var notConnecting = (React__default["default"].createElement("foreignObject", tslib.__assign({}, point, { className: diagram_module.edgeButton }),
-        React__default["default"].createElement("button", { onClick: function () { return events.dispatchEvent(events.ChangeProCon(id)); } }, "Change pro/contra"),
-        React__default["default"].createElement("button", { onClick: function () { return events.dispatchEvent(events.DeleteEdge(id)); } }, "Delete argument")));
-    if (isConnecting)
-        return connecting;
-    return notConnecting;
-};
 var Node = function (props) {
@@ -122,3 +104,3 @@ 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;
                     } }))),
-        showContext && (React__default["default"].createElement(ContextMenu, { positions: {
+        showContext && (React__default["default"].createElement(NodeContextMenu, { positions: {
                 x: x,
@@ -129,12 +111,50 @@ y: y + constants.NodeAttrs.nodeHeight / 2 + constants.NodeAttrs.borderWidth * 2,
 var Edge = function (_a) {
-    var points = _a.points, id = _a.id, isContra = _a.isContra, isConnecting = _a.isConnecting;
+    var points = _a.points, id = _a.id, isContra = _a.isContra, activePropositionId = _a.activePropositionId, isConnecting = _a.isConnecting;
     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), active = _d[0], setActive = _d[1];
-    return (React__default["default"].createElement("g", null,
+    var _d = React.useState(false), showContext = _d[0], setShowContext = _d[1];
+    var containerRef = React.useRef(null);
+    var displayContextMenu = React.useCallback(function (e) {
+        e.preventDefault();
+        document.dispatchEvent(new MouseEvent("click"));
+        setShowContext(true);
+    }, [setShowContext]);
+    function hideContext() {
+        setShowContext(false);
+    }
+    var removeContextMenu = React.useCallback(function (e) {
+        var menu = document.getElementById("".concat(id, "_context"));
+        if (menu && menu.contains(e.target)) ;
+        else
+            return showContext ? hideContext() : null;
+    }, [showContext]);
+    function registerContextEvents() {
+        var _a;
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("contextmenu", displayContextMenu);
+        document.addEventListener("click", removeContextMenu);
+        return function () {
+            var _a;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("contextmenu", displayContextMenu);
+            document.removeEventListener("click", removeContextMenu);
+        };
+    }
+    React.useEffect(function () {
+        var unregister = registerContextEvents();
+        return function () {
+            unregister();
+        };
+    });
+    return (React__default["default"].createElement("g", { ref: containerRef },
         React__default["default"].createElement("path", { className: isContra ? diagram_module.contraRed : diagram_module.defaultBlack, fill: "transparent", strokeWidth: "3px", d: edge, markerEnd: isContra ? "url(#contraArrow)" : "url(#defaultArrow)" }),
-        React__default["default"].createElement("g", { onMouseOver: function () { return setActive(true); }, onMouseLeave: function () { return setActive(false); }, "data-cy": id },
-            React__default["default"].createElement("path", { fill: "transparent", strokeWidth: "0px", stroke: "black", d: padding }),
-            active && (React__default["default"].createElement(EdgeButtons, { id: id, isConnecting: isConnecting, point: { x: x - 100, y: y - 50 } })))));
+        React__default["default"].createElement("g", { onClick: function (e) {
+                e.stopPropagation();
+                setShowContext(true);
+            }, "data-cy": id },
+            React__default["default"].createElement("path", { fill: "transparent", strokeWidth: "0px", stroke: "black", d: padding, style: {
+                    cursor: isConnecting || activePropositionId === null
+                        ? "pointer"
+                        : "initial",
+                } }),
+            showContext && (React__default["default"].createElement(EdgeContextMenu, { id: id, isConnecting: isConnecting, positions: { x: x - constants.ContextMenuWidth / 2, y: y - 50 }, hideContext: hideContext })))));
 };
@@ -147,38 +167,88 @@ var Defs = function () { return (React__default["default"].createElement("defs", null,
 var ContextMenu = function (_a) {
-    var categories = _a.categories, propositionId = _a.propositionId, positions = _a.positions, hideContext = _a.hideContext;
+    var id = _a.id, positions = _a.positions, children = _a.children;
     var BUTTON_HEIGHT = 1.5; // rem
     var BUTTON_GAP = 0.2; // rem
-    var DEFAULT_BUTTON_COUNT = 2;
-    var elementHeight = BUTTON_HEIGHT * (categories.length + DEFAULT_BUTTON_COUNT) +
-        BUTTON_GAP * (categories.length + DEFAULT_BUTTON_COUNT - 1);
-    return (React__default["default"].createElement("foreignObject", { x: positions.x + constants.NodeAttrs.nodeWidth / 2, y: positions.y + constants.NodeAttrs.nodeHeight / 2, width: 150, className: diagram_module.contextMenuWrapper, height: "".concat(elementHeight, "rem") },
+    var childrenLength = React.Children.count(children);
+    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") },
         React__default["default"].createElement("div", { style: {
                 height: "".concat(elementHeight, "rem"),
-                width: 150,
-            }, className: diagram_module.contextMenu, id: "".concat(propositionId, "_context") },
-            categories.map(function (category) { return (React__default["default"].createElement("button", { key: category.id, onClick: function () {
-                    events.dispatchEvent(events.SetCategory(propositionId, category.shadowName || category.name));
-                    hideContext();
+                width: constants.ContextMenuWidth,
+            }, className: diagram_module.contextMenu, id: "".concat(id, "_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 },
+        categories.map(function (category) { return (React__default["default"].createElement("button", { key: category.id, onClick: function () {
+                events.dispatchEvent(events.SetCategory(propositionId, category.shadowName || category.name));
+                hideContext();
+            } },
+            React__default["default"].createElement("div", { style: {
+                    backgroundColor: category.color,
+                } }),
+            React__default["default"].createElement("h4", null, category.name))); }),
+        React__default["default"].createElement("button", { onClick: function () { return events.dispatchEvent(events.DeleteNode(propositionId)); } },
+            React__default["default"].createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
                 } },
-                React__default["default"].createElement("div", { style: {
-                        backgroundColor: category.color,
-                    } }),
-                React__default["default"].createElement("h4", null, category.name))); }),
-            React__default["default"].createElement("button", { onClick: function () { return events.dispatchEvent(events.DeleteNode(propositionId)); } },
-                React__default["default"].createElement("div", { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    } },
-                    React__default["default"].createElement(im.ImCross, { color: "red" })),
-                React__default["default"].createElement("h4", null, "Delete")),
-            React__default["default"].createElement("button", { onClick: function () { return events.dispatchEvent(events.DisconnectNode(propositionId)); } },
-                React__default["default"].createElement("div", { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    } },
-                    React__default["default"].createElement(cg.CgRemoveR, { color: "red" })),
-                React__default["default"].createElement("h4", null, "Disconnect")))));
+                React__default["default"].createElement(im.ImCross, { color: "red" })),
+            React__default["default"].createElement("h4", null, "Delete")),
+        React__default["default"].createElement("button", { onClick: function () { return events.dispatchEvent(events.DisconnectNode(propositionId)); } },
+            React__default["default"].createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                } },
+                React__default["default"].createElement(cg.CgRemoveR, { color: "red" })),
+            React__default["default"].createElement("h4", null, "Disconnect"))));
 };
+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 },
+        React__default["default"].createElement("button", { onClick: function (e) {
+                e.stopPropagation();
+                events.dispatchEvent(events.RelevanceArgument(id));
+            } },
+            React__default["default"].createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                } },
+                React__default["default"].createElement(icons.Relevance, null)),
+            React__default["default"].createElement("h4", null, "Relevance Argument")),
+        React__default["default"].createElement("button", { onClick: function (e) {
+                e.stopPropagation();
+                events.dispatchEvent(events.ConjoinedArgument(id));
+            } },
+            React__default["default"].createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                } },
+                React__default["default"].createElement(icons.Conjoined, null)),
+            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)); } },
+            React__default["default"].createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                } },
+                React__default["default"].createElement(fa.FaExchangeAlt, { color: "blue" })),
+            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("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                } },
+                React__default["default"].createElement(im.ImCross, { color: "red" })),
+            React__default["default"].createElement("h4", null, "Delete argument")))); };
+    return isConnecting ? React__default["default"].createElement(Connecting, null) : React__default["default"].createElement(NotConnecting, null);
+};
 var AllEdges = function (_a) {
@@ -193,4 +263,5 @@ 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, 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 &&
+                    activePropositionId !== edge.arg.id &&
                     !edge.arg.sourceIds.includes(activePropositionId) }));
@@ -219,3 +290,3 @@ }),
                         var points = utils.getConjoinedArgEdge(g, arg);
-                        return (React__default["default"].createElement(Edge, { points: points, id: arg.id, isContra: arg.isContraArgument, isConnecting: activePropositionId &&
+                        return (React__default["default"].createElement(Edge, { points: points, activePropositionId: activePropositionId, id: arg.id, isContra: arg.isContraArgument, isConnecting: activePropositionId &&
                                 activePropositionId !== arg.targetId &&
@@ -234,3 +305,3 @@ !arg.sourceIds.includes(activePropositionId) }));
                 updateProposition(node.prop.id, description);
-            }, width: node.width, height: node.height, getArgumentsByPropositionId: getArgumentsByPropositionId, color: category.color || "#797979" }));
+            }, width: node.width, height: node.height, getArgumentsByPropositionId: getArgumentsByPropositionId, color: (category === null || category === void 0 ? void 0 : category.color) || "#797979" }));
     })));
@@ -237,0 +308,0 @@ };

lib/constants.d.ts

@@ -32,2 +32,3 @@ interface INodeAttrs {
 export declare const NodeButtonOffset = 25;
+export declare const ContextMenuWidth = 180;
 export {};

lib/constants.js

@@ -33,4 +33,6 @@ 'use strict';
 };
+var ContextMenuWidth = 180;
 
+exports.ContextMenuWidth = ContextMenuWidth;
 exports.GeneralValues = GeneralValues;
 exports.NodeAttrs = NodeAttrs;

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

129930

increased by18.84%

Number of package files

50

increased by8.7%

Lines of code

2417

increased by8.97%

No dependency changes