change node style
This commit is contained in:
zhandouxiaojiji committed
1 parent
61a69a3e7f
commit
ad320d73a5
6 files changed
+70
-23
No files matched your search
+65
-18
@@ -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',
|
||||
lineWidth: 3,
|
||||
'main-box': {
|
||||
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,
|
||||
y: -h / 2,
|
||||
x: x0,
|
||||
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,
|
||||
y: -h / 2 + 2,
|
||||
x: x0 + 13,
|
||||
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,
|
||||
y: -h / 2,
|
||||
height: 16,
|
||||
width: 16,
|
||||
x: x0 + 15,
|
||||
y: y0 + 2,
|
||||
height: 14,
|
||||
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,
|
||||
y: -h / 2 + 2,
|
||||
x: x0 + 35,
|
||||
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);
|
||||
|
||||
@@ -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>
|
||||
|
Before Width: | Height: | Size: 614 B After Width: | Height: | Size: 614 B |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 857 B After Width: | Height: | Size: 857 B |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 812 B After Width: | Height: | Size: 812 B |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 772 B After Width: | Height: | Size: 772 B |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 696 B After Width: | Height: | Size: 694 B |
Reference in new issue
Block a user