@disputas/diagram - npm Package Compare versions

Comparing version 1.0.13 to 1.0.14

lib/components.d.ts

@@ -14,2 +14,3 @@ import { Proposition, Argument, Category } from "@disputas/types";
     color: string;
+    categories: Category[];
 }
@@ -16,0 +17,0 @@ export declare const Node: (props: IDiagramNodeProps) => JSX.Element;

lib/components.js

@@ -46,15 +46,53 @@ 'use strict';
 var Node = function (props) {
-    var proposition = props.proposition, hovered = props.hovered, x = props.x, y = props.y, activePropositionId = props.activePropositionId, updateDescription = props.updateDescription, getArgumentsByPropositionId = props.getArgumentsByPropositionId, width = props.width, height = props.height, color = props.color;
+    var proposition = props.proposition, hovered = props.hovered, x = props.x, y = props.y, activePropositionId = props.activePropositionId, updateDescription = props.updateDescription, getArgumentsByPropositionId = props.getArgumentsByPropositionId, width = props.width, height = props.height, color = props.color, categories = props.categories;
     proposition.type; var description = proposition.description, displayId = proposition.displayId, propositionId = proposition.id;
     var _a = React.useState(description), _description = _a[0], setDescription = _a[1];
     var editorRef = React.useRef(null);
+    var containerRef = React.useRef();
     var _b = React.useState(false), isFocused = _b[0], setIsFocused = _b[1];
-    var isBuilding = activePropositionId !== "" && activePropositionId !== propositionId;
+    var _c = React.useState(false), showContext = _c[0], setShowContext = _c[1];
+    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(propositionId, "_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);
+        };
+    }
+    var shouldUseContext = categories.length > 4;
+    React.useEffect(function () {
+        var unregister = function () {
+            /*no-op*/
+        };
+        if (shouldUseContext) {
+            unregister = registerContextEvents();
+        }
+        return function () {
+            unregister();
+        };
+    });
+    var isBuilding = activePropositionId && activePropositionId !== propositionId;
     var hasConnections = getArgumentsByPropositionId(propositionId).length > 0;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("foreignObject", { width: width, height: height, x: x, y: y, onMouseOver: function () {
+        React__default["default"].createElement("foreignObject", { width: width, ref: containerRef, height: height, x: x, id: "node_".concat(propositionId), y: y, onMouseOver: function () {
                 return events.dispatchEvent(events.NodeMouseEnter(proposition.id));
             }, onMouseLeave: function () { return events.dispatchEvent(events.NodeMouseLeave(proposition.id)); }, className: "".concat(diagram_module.nodeWrapper, " ").concat(activePropositionId === propositionId ? diagram_module.active : "", "\n        \n        "), "data-cy": propositionId },
             (hovered === propositionId && !isFocused && !isBuilding && (React__default["default"].createElement(DeleteButton, { id: propositionId, width: width }))) || React__default["default"].createElement("div", { style: { width: "100%", height: "2rem" } }),
-            React__default["default"].createElement("fieldset", { className: "".concat(diagram_module.node), style: { border: "2px solid ".concat(color) }, onClick: function (e) {
+            React__default["default"].createElement("fieldset", { className: "".concat(diagram_module.node), style: { border: "4px solid ".concat(color) }, onClick: function (e) {
                     e.stopPropagation();
@@ -84,3 +122,10 @@ events.dispatchEvent(events.NodeClick(propositionId));
                 ((isBuilding && React__default["default"].createElement(ConnectButton, { id: propositionId, width: width })) ||
-                    (hasConnections && (React__default["default"].createElement(DisconnectButton, { id: propositionId, width: width }))))) || React__default["default"].createElement("div", { style: { width: "100%", height: "2rem" } }))));
+                    (hasConnections && (React__default["default"].createElement(DisconnectButton, { id: propositionId, width: width }))))) || React__default["default"].createElement("div", { style: { width: "100%", height: "2rem" } })),
+        shouldUseContext && showContext && (React__default["default"].createElement(ContextMenu, { positions: {
+                x: x,
+                y: y +
+                    constants.NodeAttrs.nodeHeight -
+                    constants.NodeAttrs.paddingY +
+                    constants.NodeAttrs.borderWidth,
+            }, propositionId: propositionId, categories: categories, hideContext: hideContext }))));
 };
@@ -104,2 +149,28 @@ var Edge = function (_a) {
         React__default["default"].createElement("path", { d: "M-8,6 L-2,2 C-2,2 1,0 -2,-2 L-8,-6" })))); };
+var ContextMenu = function (_a) {
+    var categories = _a.categories, propositionId = _a.propositionId, positions = _a.positions, hideContext = _a.hideContext;
+    // 1.5 rem is the height property. 0.2rem is the gap property
+    var elementHeight = 1.5 * (categories.length + 1) + 0.2 * categories.length;
+    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") },
+        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();
+                } },
+                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")))));
+};
 var AllEdges = function (_a) {
@@ -150,8 +221,8 @@ var g = _a.g, simpleEdges = _a.simpleEdges, relevanceArgs = _a.relevanceArgs, conjoinedArgs = _a.conjoinedArgs, activePropositionId = _a.activePropositionId;
     return (React__default["default"].createElement("g", { name: "nodes" }, renderNodes.map(function (node) {
-        var color = categories.find(function (cat) {
+        var category = categories.find(function (cat) {
             return cat.shadowName === node.prop.type || cat.name === node.prop.type;
-        }).color || "#797979";
-        return (React__default["default"].createElement(Node, { proposition: node.prop, hovered: highlightedId, key: node.prop.id, x: node.x - node.width / 2, y: node.y - node.height + NODE_PADDING, activePropositionId: activePropositionId, updateDescription: function (description) {
+        });
+        return (React__default["default"].createElement(Node, { categories: categories, proposition: node.prop, hovered: highlightedId, key: node.prop.id, x: node.x - node.width / 2, y: node.y - node.height + NODE_PADDING, activePropositionId: activePropositionId, updateDescription: function (description) {
                 updateProposition(node.prop.id, description);
-            }, width: node.width || constants.NodeAttrs.nodeWidth, height: node.height || constants.NodeAttrs.nodeHeight, getArgumentsByPropositionId: getArgumentsByPropositionId, color: color }));
+            }, width: node.width || constants.NodeAttrs.nodeWidth, height: node.height || constants.NodeAttrs.nodeHeight, getArgumentsByPropositionId: getArgumentsByPropositionId, color: category.color || "#797979" }));
     })));
@@ -158,0 +229,0 @@ };

lib/constants.d.ts

@@ -15,2 +15,3 @@ interface INodeAttrs {
     backgroundUnsorted: string;
+    borderWidth: number;
     fallbackColor: string;
@@ -17,0 +18,0 @@ strokeOpacity: number;

lib/constants.js

@@ -10,3 +10,3 @@ 'use strict';
     nodeHeight: 100,
-    paddingY: 10,
+    paddingY: 5.6 + 8,
     textWidthMargin: 30,
@@ -20,2 +20,3 @@ numberOfLines: 12,
     backgroundUnsorted: "#F9F9F9",
+    borderWidth: 4,
     fallbackColor: "#000",
@@ -22,0 +23,0 @@ strokeOpacity: 1,

lib/diagram.module.css.js

 'use strict';
 
-var styles = {"container":"diagram-module_container__1zxhj","nodeWrapper":"diagram-module_nodeWrapper__1cjgg","hovered":"diagram-module_hovered__DID8r","button":"diagram-module_button__c97Zq","deleteButton":"diagram-module_deleteButton__BrBFg diagram-module_button__c97Zq","connectButton":"diagram-module_connectButton__1U3Wd diagram-module_button__c97Zq","disconnectButton":"diagram-module_disconnectButton__1LPOm diagram-module_button__c97Zq","edgeButton":"diagram-module_edgeButton__1_HTg","node":"diagram-module_node__3bH5T","active":"diagram-module_active__347Cw","content":"diagram-module_content__1FyfN","tag":"diagram-module_tag__140np","contraRed":"diagram-module_contraRed__1x_7q","defaultBlack":"diagram-module_defaultBlack__Fuku4"};
+var styles = {"container":"diagram-module_container__1zxhj","nodeWrapper":"diagram-module_nodeWrapper__1cjgg","hovered":"diagram-module_hovered__DID8r","button":"diagram-module_button__c97Zq","deleteButton":"diagram-module_deleteButton__BrBFg diagram-module_button__c97Zq","connectButton":"diagram-module_connectButton__1U3Wd diagram-module_button__c97Zq","disconnectButton":"diagram-module_disconnectButton__1LPOm diagram-module_button__c97Zq","edgeButton":"diagram-module_edgeButton__1_HTg","node":"diagram-module_node__3bH5T","active":"diagram-module_active__347Cw","content":"diagram-module_content__1FyfN","tag":"diagram-module_tag__140np","contraRed":"diagram-module_contraRed__1x_7q","defaultBlack":"diagram-module_defaultBlack__Fuku4","contextMenuWrapper":"diagram-module_contextMenuWrapper__ryG_f","contextMenu":"diagram-module_contextMenu__1K5yD"};
 
 module.exports = styles;

lib/events.d.ts

@@ -15,1 +15,5 @@ export declare const dispatchEvent: <T extends unknown>(ev: CustomEvent<T>) => boolean;
 export declare const FocusNode: (id: string) => CustomEvent<string>;
+export declare const SetCategory: (id: string, category: string) => CustomEvent<{
+    id: string;
+    category: string;
+}>;

lib/events.js

@@ -43,2 +43,5 @@ 'use strict';
 };
+var SetCategory = function (id, category) {
+    return new CustomEvent("node:category", { detail: { id: id, category: category } });
+};
 
@@ -56,4 +59,5 @@ exports.ChangeProCon = ChangeProCon;
 exports.RelevanceArgument = RelevanceArgument;
+exports.SetCategory = SetCategory;
 exports.addEventListener = addEventListener;
 exports.dispatchEvent = dispatchEvent;
 exports.removeEventListener = removeEventListener;

lib/index.d.ts

@@ -20,2 +20,6 @@ import React from "react";
     updateProposition: (id: string, data: string) => void;
+    updateCategory: (e: CustomEventInit<{
+        id: string;
+        category: string;
+    }>) => void;
     categories: Category[];
@@ -22,0 +26,0 @@ }

lib/index.js

@@ -20,3 +20,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, highlightedId = _a.highlightedId, categories = _a.categories;
+    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;
     var _b = React.useState([]), graphs = _b[0], setGraphs = _b[1];
@@ -103,2 +103,3 @@ var svgRef = React.useRef(null);
         events.addEventListener("edge:delete", deleteEdge);
+        events.addEventListener("node:category", updateCategory);
         d3.select("#main")
@@ -132,3 +133,3 @@ .call(_zoom)
         className: diagram_module.container, id: "main", "data-testid": "main", onClick: function () {
-            setFocus(events.FocusNode(""));
+            setFocus(events.FocusNode(null));
         }, ref: svgRef },
@@ -135,0 +136,0 @@ React__default["default"].createElement(components.Defs, null),

lib/utils.d.ts

@@ -50,4 +50,4 @@ import { Proposition, Argument, AnalysisCollection } from "@disputas/types";
  * Sorts nodes (propositions) and edges (arguments) into
- * independant graphs by using a modified Kruskal's algorithm.
- * NOTE: All unsorted propositions will be placed in one independant graph.
+ * independent graphs by using a modified Kruskal's algorithm.
+ * NOTE: All unsorted propositions will be placed in one independent graph.
  * @param args A list of arguments.
@@ -54,0 +54,0 @@ * @param propositions A list of propositions.

lib/utils.js

@@ -77,5 +77,10 @@ 'use strict';
 function handleGraph(propositions, args, argsById, g) {
-    var unsortedPropositions = propositions.filter(function (prop) { return prop.type === "unsorted"; });
+    var propositionsWithArgument = args.flatMap(function (arg) { return tslib.__spreadArray(tslib.__spreadArray([], arg.sourceIds, true), [
+        arg.targetId,
+    ], false); });
+    var propositionsWithoutArgument = propositions.filter(function (p) { return !propositionsWithArgument.includes(p.id); });
     var relevanceArgs = args.filter(function (arg) { return arg.type === "relevance"; });
-    var sortedPropositions = propositions.filter(function (prop) { return prop.type !== "unsorted" && prop.type !== "relevance"; });
+    var sortedPropositions = propositions.filter(function (prop) {
+        return prop.type !== "relevance" && !propositionsWithoutArgument.includes(prop);
+    });
     var conjoinedArgs = args.filter(function (arg) { return arg.type !== "relevance" && arg.sourceIds.length > 1; });
@@ -114,3 +119,3 @@ var simpleArgs = args.filter(function (arg) { return arg.type !== "relevance" && arg.sourceIds.length === 1; });
     // create and places nodes for unsorted propositions
-    unsortedPropositions.forEach(function (prop, i) {
+    propositionsWithoutArgument.forEach(function (prop, i) {
         g.setNode(prop.id, {
@@ -263,4 +268,4 @@ prop: tslib.__assign({}, prop),
  * Sorts nodes (propositions) and edges (arguments) into
- * independant graphs by using a modified Kruskal's algorithm.
- * NOTE: All unsorted propositions will be placed in one independant graph.
+ * independent graphs by using a modified Kruskal's algorithm.
+ * NOTE: All unsorted propositions will be placed in one independent graph.
  * @param args A list of arguments.
@@ -272,7 +277,10 @@ * @param propositions A list of propositions.
 function seperateIndependentGraphs(args, argsById, propositions, propositionsById) {
-    var unsortedPropositions = [];
+    var propositionsWithoutArgument = [];
     var remainingPropositions = [];
-    propositions.forEach(function (proposition) {
-        if (proposition.type === "unsorted")
-            unsortedPropositions.push([proposition]);
+    var propositionsWithArgument = args.flatMap(function (arg) { return tslib.__spreadArray(tslib.__spreadArray([], arg.sourceIds, true), [
+        arg.targetId,
+    ], false); });
+    propositions.forEach(function sortPropositions(proposition) {
+        if (!propositionsWithArgument.includes(proposition.id))
+            propositionsWithoutArgument.push([proposition]);
         else
@@ -288,3 +296,3 @@ remainingPropositions.push(proposition);
     // Iterate through edges.
-    args.forEach(function (arg) {
+    args.forEach(function combine(arg) {
         var sources = arg.sourceIds.map(function (id) { return propositionsById[id]; });
@@ -296,3 +304,3 @@ var target = propositionsById[arg.targetId];
         allGraphs[sourceGraph0Index].edges.push(arg);
-        // Ensure that both sources of conjoined
+        // Ensure that all sources of conjoined
         // arguments are in the same graph.
@@ -333,7 +341,7 @@ if (sources.length > 1) {
     // Add unsorted propositions as one graph.
-    if (unsortedPropositions.length > 0)
+    if (propositionsWithoutArgument.length > 0)
         allGraphs.unshift({
-            nodes: unsortedPropositions,
+            nodes: propositionsWithoutArgument,
             edges: [],
-            containsConjoined: false,
+            containsConjoined: allGraphs.some(function (graph) { return graph.containsConjoined; }),
         });
@@ -340,0 +348,0 @@ return allGraphs;

package.json

 {
   "name": "@disputas/diagram",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "D3 and Dagre based diagram",
@@ -42,3 +42,2 @@ "main": "lib/index.js",
     "@disputas/dagre": "^0.8.15",
-    "@disputas/types": "^1.0.3",
     "d3": "^7.4.0",
@@ -50,5 +49,5 @@ "postcss": "^8.4.12",
   "scripts": {
-    "run:dev": "gulp watch",
     "test": "gulp test",
     "build": "gulp build",
+    "build-watch": "gulp build-watch",
     "format": "prettier --write \"src/**/*.ts\"",
@@ -63,2 +62,3 @@ "lint": "tslint -p tsconfig.json -c tslint.json",
   "peerDependencies": {
+    "@disputas/types": "^1.0.4",
     "react": "^17.0.0",
@@ -65,0 +65,0 @@ "react-dom": "^17.0.0",

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

109488

increased by5.82%

Lines of code

2207

increased by6%

Dependency changes

• - Removed@disputas/types@^1.0.3