#16 Remove style options from node widget in example

MetaCell · Jul 29, 2022 · cb0d701 · cb0d701
1 parent edb552b
commit cb0d701
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 60 deletions.
diff --git a/example/components/assets/styles/constants.ts b/example/components/assets/styles/constants.ts
diff --git a/example/components/widgets/CustomNodeWidget.tsx b/example/components/widgets/CustomNodeWidget.tsx
@@ -11,23 +11,16 @@ export interface CustomNodeWidgetProps {
 
 export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
     render() {
-        const customNodeStyles = {
-          background: this.props.model.getOptions()['backgroundColor'],
-          borderColor: this.props.model.getOptions()['borderColor'],
-          boxShadow: this.props.model.getOptions()['backgrounboxShadowdColor'],
-        };
         return (
-          <Box position='relative'>
+          <Box className={`primary-node ${this.props.model.getOptions()['variant']}`}>
             {this.props.model.getOptions()['selected'] && (
-              <NodeSelection style={customNodeStyles} engine={this.props.engine} port={this.props.model} />
+              <NodeSelection engine={this.props.engine} port={this.props.model} />
             )}
 
-            <Box
-              className="node"
-              style={customNodeStyles}
-            >
-              <img src={this.props.model.getOptions()['icon']} alt={this.props.model.getOptions()['name']} />
-              <Typography component="p" style={{ color: this.props.model.getOptions()['textColor'] }}>
+            <Box className="primary-node_header">
+              <img src="" alt={this.props.model.getOptions()['name']} />
+
+              <Typography component="p">
                 {this.props.model.getOptions()['name']}
               </Typography>
             </Box>

diff --git a/example/components/widgets/NodeSelection.tsx b/example/components/widgets/NodeSelection.tsx
@@ -3,21 +3,14 @@ import { DiagramEngine, PortWidget } from "@projectstorm/react-diagrams";
 import * as React from "react";
 import PortWigetComp from "./PortWidgetComp";
 
-type styleObject = {
-  background: string;
-  borderColor: string;
-  boxShadow: string;
-}
-
 export interface NodeSelectionProps {
-  style: styleObject;
   engine: DiagramEngine;
   port: any;
 }
 
 class NodeSelection extends React.Component<NodeSelectionProps> {
   render() {
-    const { style, engine, port } = this.props;
+    const { engine, port } = this.props;
     const selectionPoint = '-0.375rem';
     const IN = 'in';
     const OUT = 'out';
@@ -26,7 +19,6 @@ class NodeSelection extends React.Component<NodeSelectionProps> {
         <Button className="node-button">
           <Box
             className="icon"
-            style={style}
           />
           Show properties
         </Button>