change node style

render-process/index.tsx

@@ -19,6 +19,14 @@ import { ModelConfig, Item } from "@antv/g6/lib/types";
 const { Header, Sider, Content, Footer } = Layout;
 const { TabPane } = Tabs;
 
+const NODE_COLORS: any = {
+  ['Composite'] : 'rgb(91,237,32)',
+  ['Decorator'] : 'rgb(218,167,16)',
+  ['Condition'] : 'rgb(228,20,139)',
+  ['Action'] : 'rgb(91,143,249)',
+  ['Other'] : 'rgb(112,112,112)',
+} 
+
 interface MainState {
   workspace: string;
   filepaths: string[];
@@ -49,16 +57,19 @@ export default class Main extends Component {
           },
           style: {
             fill: "white",
-            stroke: '#72CC4A',
+            width: 150,
-            width: 150
           },
           stateStyles: {
             hover: {
-              fill: '#d3adf7',
+              'main-box': {
+                fill: 'gray',
+              }
             },
             selected: {
-              stroke: '#000',
+              'main-box': {
-              lineWidth: 3,
+                stroke: 'black',
+                lineWidth: 3,
+              },
             },
             dragSrc: {
               fill: 'gray',
@@ -81,18 +92,22 @@ export default class Main extends Component {
           },
         },
         draw(cfg, group) {
-          const color = cfg.error ? '#F4664A' : '#30BF78';
+          const classfiy = settings.getClassify(cfg.name as string) || 'Other';
+          const color = NODE_COLORS[classfiy];
           var size = cfg.size ? cfg.size as number[] : [150, 40];
           const w = size[0];
           const h = size[1];
+          const x0 = -w / 2;
+          const y0 = -h / 2;
           const r = 2;
           const shape = group.addShape('rect', {
             attrs: {
-              x: -w / 2,
+              x: x0,
-              y: -h / 2,
+              y: y0,
               width: w,
               height: h,
               stroke: color,
+              lineWidth: 2,
               fill: 'white',
               radius: r,
             },
@@ -100,12 +115,26 @@ export default class Main extends Component {
             draggable: true,
           });
 
+          // name bg
+          group.addShape('rect', {
+            attrs: {
+              x: x0+1.5,
+              y: y0+1.5,
+              width: w-3,
+              height: 16,
+              fill: color,
+              // radius: r,
+            },
+            name: 'name-bg',
+            draggable: true,
+          });
+
           // id text
           group.addShape('text', {
             attrs: {
               textBaseline: 'top',
-              x: -w / 2 + 13,
+              x: x0 + 13,
-              y: -h / 2 + 2,
+              y: y0 + 4,
               lineHeight: 20,
               text: cfg.id,
               textAlign: 'right',
@@ -114,15 +143,15 @@ export default class Main extends Component {
             name: 'id-text',
           });
 
-          const classfiy = settings.getClassify(cfg.name as string) || 'Other';
+          // icon
           var img = `./static/icons/${classfiy}.svg`;
           console.log(cfg.type, classfiy);
           group.addShape('image', {
             attrs: {
-              x: -w / 2 + 15,
+              x: x0 + 15,
-              y: -h / 2,
+              y: y0 + 2,
-              height: 16,
+              height: 14,
-              width: 16,
+              width: 14,
               img,
             },
             name: 'node-icon',
@@ -132,8 +161,8 @@ export default class Main extends Component {
           group.addShape('text', {
             attrs: {
               textBaseline: 'top',
-              x: -w / 2 + 35,
+              x: x0 + 35,
-              y: -h / 2 + 2,
+              y: y0 + 4,
               lineHeight: 20,
               text: cfg.name,
               fill: 'black',
@@ -141,6 +170,24 @@ export default class Main extends Component {
             name: 'name-text',
           });
 
+          var x = x0 + 2;
+          var y = y0 + 20;
+          // desc text
+          if(cfg.desc) {
+            group.addShape('text', {
+              attrs: {
+                textBaseline: 'top',
+                x,
+                y,
+                lineHeight: 20,
+                text: cfg.name,
+                fill: 'black',
+              },
+              name: 'name-text',
+            });
+          }
+          
+
           group.addShape('rect', {
             name: 'drag-up',
             attrs: {
@@ -257,7 +304,7 @@ export default class Main extends Component {
             onEdit={(targetKey, action) => {
               if (action == 'remove') {
                 const idx = filepaths.indexOf(targetKey as string);
-                if(idx < 0) {
+                if (idx < 0) {
                   return;
                 }
                 filepaths.splice(idx, 1);

static/icons/Action.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603336764775" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6051" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M89.6 806.4h844.8V217.6H89.6v588.8zM0 128h1024v768H0V128z m242.816 577.536L192 654.72l154.304-154.368L192 346.048l50.816-50.816L448 500.352l-205.184 205.184z m584.32 13.248H512V640h315.072v78.72z" fill="#262626" p-id="6052"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603437225887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1131" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M89.6 806.4h844.8V217.6H89.6v588.8zM0 128h1024v768H0V128z m242.816 577.536L192 654.72l154.304-154.368L192 346.048l50.816-50.816L448 500.352l-205.184 205.184z m584.32 13.248H512V640h315.072v78.72z" fill="#000000" p-id="1132"></path></svg>

static/icons/Composite.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603336841326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6824" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M213.312 682.688v170.624h469.312V768H1024v256h-341.312l-0.064-85.376H128v-256h85.312zM1024 384v256h-341.312l-0.064-85.376h-341.12V469.376h341.12V384H1024z m-85.312 85.312H768v85.376h170.688V469.312zM1024 0v256h-341.312l-0.064-85.376H213.312v170.688H128v-256h554.624V0H1024z m-85.312 85.312H768v85.376h170.688V85.312z m-170.688 768v85.376h170.688v-85.376H768z m-768-512h341.312v341.376H0V341.312z m85.312 85.376v170.624H256V426.688H85.312z" fill="#181818" p-id="6825"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603437247082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M213.312 682.688v170.624h469.312V768H1024v256h-341.312l-0.064-85.376H128v-256h85.312zM1024 384v256h-341.312l-0.064-85.376h-341.12V469.376h341.12V384H1024z m-85.312 85.312H768v85.376h170.688V469.312zM1024 0v256h-341.312l-0.064-85.376H213.312v170.688H128v-256h554.624V0H1024z m-85.312 85.312H768v85.376h170.688V85.312z m-170.688 768v85.376h170.688v-85.376H768z m-768-512h341.312v341.376H0V341.312z m85.312 85.376v170.624H256V426.688H85.312z" fill="#000000" p-id="1396"></path></svg>

static/icons/Condition.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603336850569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6953" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 0l448 256v512l-448 256-448-256V256l448-256z m0 98.24l-362.88 207.36v412.8L512 925.76l362.88-207.36v-412.8L512 98.24z m224 200.448l64.64 37.312v74.688L736 448l-30.784-17.792-155.968 78.08v185.216l27.392 15.808v74.688L512 821.312l-64.64-37.312v-74.688l27.392-15.808V508.352L318.72 430.208 288 448l-64.64-37.312V336l64.64-37.312 64.64 37.312v27.712L512 443.52l159.36-79.872V336l64.64-37.312z" fill="#333333" p-id="6954"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603437255749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1527" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 0l448 256v512l-448 256-448-256V256l448-256z m0 98.24l-362.88 207.36v412.8L512 925.76l362.88-207.36v-412.8L512 98.24z m224 200.448l64.64 37.312v74.688L736 448l-30.784-17.792-155.968 78.08v185.216l27.392 15.808v74.688L512 821.312l-64.64-37.312v-74.688l27.392-15.808V508.352L318.72 430.208 288 448l-64.64-37.312V336l64.64-37.312 64.64 37.312v27.712L512 443.52l159.36-79.872V336l64.64-37.312z" fill="#000000" p-id="1528"></path></svg>

static/icons/Decorator.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603336775409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6180" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M195.776 194.688a448.064 448.064 0 0 1 760.768 261.312H846.08a336.064 336.064 0 0 0-569.408-181.12l182.08 180.672H183.488l-0.064 0.448H67.456l0.064-0.448H64V64l131.776 130.688z m632.448 634.624A448.064 448.064 0 0 1 67.456 568H177.92a336.064 336.064 0 0 0 569.408 181.12L565.248 568.384h275.264l0.064-0.448h115.968l-0.064 0.448H960V960l-131.776-130.688z" fill="#262626" p-id="6181"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603437237518" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1263" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M195.776 194.688a448.064 448.064 0 0 1 760.768 261.312H846.08a336.064 336.064 0 0 0-569.408-181.12l182.08 180.672H183.488l-0.064 0.448H67.456l0.064-0.448H64V64l131.776 130.688z m632.448 634.624A448.064 448.064 0 0 1 67.456 568H177.92a336.064 336.064 0 0 0 569.408 181.12L565.248 568.384h275.264l0.064-0.448h115.968l-0.064 0.448H960V960l-131.776-130.688z" fill="#000000" p-id="1264"></path></svg>

static/icons/Other.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603336732180" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5922" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M85.312 85.312V384H384V85.312H85.312zM0 0h469.312v469.312H0V0z m0 554.688h469.312V1024H0V554.688zM85.312 640v298.688H384V640H85.312zM554.688 0H1024v469.312H554.688V0zM640 85.312V384h298.688V85.312H640zM554.688 554.688H1024V1024H554.688V554.688zM640 640v298.688h298.688V640H640z" fill="#262626" p-id="5923"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603437207465" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="868" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M85.312 85.312V384H384V85.312H85.312zM0 0h469.312v469.312H0V0z m0 554.688h469.312V1024H0V554.688zM85.312 640v298.688H384V640H85.312zM554.688 0H1024v469.312H554.688V0zM640 85.312V384h298.688V85.312H640zM554.688 554.688H1024V1024H554.688V554.688zM640 640v298.688h298.688V640H640z" fill="#000000" p-id="869"></path></svg>