@disputas/diagram - npm Package Compare versions

Comparing version 1.0.12 to 1.0.13

lib/components.d.ts

@@ -1,2 +0,2 @@
-import { Proposition, Argument } from "@disputas/types";
+import { Proposition, Argument, Category } from "@disputas/types";
 import { Point, DagreEdgeObject, DagreNode } from "./types";
@@ -13,2 +13,3 @@ interface IDiagramNodeProps {
     height: number;
+    color: string;
 }
@@ -38,4 +39,5 @@ export declare const Node: (props: IDiagramNodeProps) => JSX.Element;
     activePropositionId: string;
+    categories: Category[];
 }
-declare const AllNodes: ({ renderNodes, updateProposition, highlightedId, activePropositionId, getArgumentsByPropositionId, }: INodeProps) => JSX.Element;
+declare const AllNodes: ({ renderNodes, updateProposition, highlightedId, activePropositionId, categories, getArgumentsByPropositionId, }: INodeProps) => JSX.Element;
 export { AllEdges as Edges, AllNodes as Nodes };

lib/components.js

@@ -46,4 +46,4 @@ '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;
-    var type = proposition.type, description = proposition.description, displayId = proposition.displayId, propositionId = proposition.id;
+    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;
+    proposition.type; var description = proposition.description, displayId = proposition.displayId, propositionId = proposition.id;
     var _a = React.useState(description), _description = _a[0], setDescription = _a[1];
@@ -59,7 +59,7 @@ var editorRef = React.useRef(null);
             (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, " ").concat(diagram_module[type]), onClick: function (e) {
+            React__default["default"].createElement("fieldset", { className: "".concat(diagram_module.node), style: { border: "2px solid ".concat(color) }, onClick: function (e) {
                     e.stopPropagation();
                     events.dispatchEvent(events.NodeClick(propositionId));
                 } },
-                React__default["default"].createElement("legend", { className: diagram_module.tag }, displayId),
+                React__default["default"].createElement("legend", { className: diagram_module.tag, style: { color: color } }, displayId),
                 React__default["default"].createElement("textarea", { className: diagram_module.content, value: _description, onChange: function (e) { return setDescription(e.target.value); }, ref: editorRef, readOnly: proposition.readOnly, onFocus: function () {
@@ -146,8 +146,11 @@ events.dispatchEvent(events.NodeClick(propositionId));
 var AllNodes = function (_a) {
-    var renderNodes = _a.renderNodes, updateProposition = _a.updateProposition, highlightedId = _a.highlightedId, activePropositionId = _a.activePropositionId, getArgumentsByPropositionId = _a.getArgumentsByPropositionId;
+    var renderNodes = _a.renderNodes, updateProposition = _a.updateProposition, highlightedId = _a.highlightedId, activePropositionId = _a.activePropositionId, categories = _a.categories, getArgumentsByPropositionId = _a.getArgumentsByPropositionId;
     var NODE_PADDING = 7.6; // 7.6 is paddings from using fieldset
     return (React__default["default"].createElement("g", { name: "nodes" }, renderNodes.map(function (node) {
+        var color = 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) {
                 updateProposition(node.prop.id, description);
-            }, width: node.width || constants.NodeAttrs.nodeWidth, height: node.height || constants.NodeAttrs.nodeHeight, getArgumentsByPropositionId: getArgumentsByPropositionId }));
+            }, width: node.width || constants.NodeAttrs.nodeWidth, height: node.height || constants.NodeAttrs.nodeHeight, getArgumentsByPropositionId: getArgumentsByPropositionId, color: color }));
     })));
@@ -154,0 +157,0 @@ };

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","conclusion":"diagram-module_conclusion__3V1e-","relevance":"diagram-module_relevance__3iwqm","premise":"diagram-module_premise__2vMhG","unsorted":"diagram-module_unsorted__1vLuP","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"};
 
 module.exports = styles;

lib/index.d.ts

 import React from "react";
-import { Proposition, Argument, AnalysisCollection, GraphRotationType } from "@disputas/types";
+import { Proposition, Argument, AnalysisCollection, GraphRotationType, Category } from "@disputas/types";
 interface IDiagramProps {
@@ -20,4 +20,5 @@ propositions: AnalysisCollection<Proposition>;
     updateProposition: (id: string, data: string) => void;
+    categories: Category[];
 }
 declare const Diagram: React.ForwardRefExoticComponent<IDiagramProps & React.RefAttributes<unknown>>;
 export default Diagram;

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;
+    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 _b = React.useState([]), graphs = _b[0], setGraphs = _b[1];
@@ -162,2 +162,3 @@ var svgRef = React.useRef(null);
                         getArgumentsByPropositionId: getArgumentsByPropositionId,
+                        categories: categories,
                     }))));
@@ -164,0 +165,0 @@ }

package.json

 {
   "name": "@disputas/diagram",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "D3 and Dagre based diagram",
@@ -42,5 +42,6 @@ "main": "lib/index.js",
     "@disputas/dagre": "^0.8.15",
-    "@disputas/types": "^1.0.2",
+    "@disputas/types": "^1.0.3",
     "d3": "^7.4.0",
     "postcss": "^8.4.12",
+    "re-resizable": "^6.9.9",
     "react-icons": "^4.3.1"
@@ -47,0 +48,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

103466

increased by77.67%

Number of package files

46

increased by206.67%

Lines of code

2082

increased by72.64%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Addedre-resizable@^6.9.9

• + Addedre-resizable@6.11.2(transitive)

• Updated@disputas/types@^1.0.3