From ad320d73a5290e57d7c4520d6d702f2d6601136f Mon Sep 17 00:00:00 2001 From: zhandouxiaojiji Date: Fri, 23 Oct 2020 17:47:46 +0800 Subject: [PATCH] change node style --- render-process/index.tsx | 83 +++++++++++++++++++++++++++++--------- static/icons/Action.svg | 2 +- static/icons/Composite.svg | 2 +- static/icons/Condition.svg | 2 +- static/icons/Decorator.svg | 2 +- static/icons/Other.svg | 2 +- 6 files changed, 70 insertions(+), 23 deletions(-) diff --git a/render-process/index.tsx b/render-process/index.tsx index b04bc19..2db969e 100644 --- a/render-process/index.tsx +++ b/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', - 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); diff --git a/static/icons/Action.svg b/static/icons/Action.svg index 198ca72..96808ad 100644 --- a/static/icons/Action.svg +++ b/static/icons/Action.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/icons/Composite.svg b/static/icons/Composite.svg index dc5a425..be106d7 100644 --- a/static/icons/Composite.svg +++ b/static/icons/Composite.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/icons/Condition.svg b/static/icons/Condition.svg index 2429354..c6fafe1 100644 --- a/static/icons/Condition.svg +++ b/static/icons/Condition.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/icons/Decorator.svg b/static/icons/Decorator.svg index 1333ef5..d670472 100644 --- a/static/icons/Decorator.svg +++ b/static/icons/Decorator.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/icons/Other.svg b/static/icons/Other.svg index 0d68e05..5666887 100644 --- a/static/icons/Other.svg +++ b/static/icons/Other.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file